GreenLight Builder Explained

greenlight builder explained

GreenLight Builder is a lightweight, HTML‑centric block collection for Gutenberg that pairs with the GreenLight theme and Light Framework to provide a streamlined, variable‑driven workflow for building performant WordPress sites. In thevideo I provide a walk-through of the features. This post summarizes the main points.

Video Version

Discussion

The GreenLight Builder is a lightweight, HTML‑centric block collection for Gutenberg that pairs with the GreenLight theme and Light Framework to provide a streamlined, variable‑driven workflow for building performant WordPress sites.​ The GreenLight blocks map directly to native HTML tags (div, h1–h3, button, etc.) instead of adding extra wrappers, keeping the frontend output very lean.​ You download the GreenLight Builder plugin and the GreenLight theme from the GreenLight landing page. ​

The Light Framework is a CSS‑variables framework integrated into the builder, where only the variables actually used on a page are loaded, improving performance. ​It comes with a Style Book UI that provides global controls for typography, colors, spacing, borders, shadows, transitions, and more. You can override default framework variables or import your own CSS variables in the Style Book.​

You apply local styles to individual GreenLight element blocks, which creates lightweight utility classes tied just to that block and can override framework defaults without affecting other elements. ​The local styles inputs are a standardized set of options found at the bottom of the block options area. There are buttons and links within the local styles UI for picking Light Framework classes.

Global styles are managed at the top of the block options area, where reusable classes (like a “special heading” style) are created and then applied across multiple blocks. They are managed centrally in the Style Book’s Classes panel for easy reuse and editing. ​Global framework presets control defaults (for example, all h2 headings) while local styles and global classes let you selectively override those defaults when needed. ​

GreenLight is aimed at WordPress site builders who want a performant, CSS‑variables‑driven workflow inside Gutenberg, and who prefer consistent styling controls across blocks rather than the fragmented options in many core and third‑party blocks. ​

Use coupon DYNAMICWP for 15% off

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *