GreenLight Blocks are part of the Greenshift plugin, but finally, they are also available as a standalone project. We are glad to introduce it and show you the key differences from everything that you have used before.
Whitelabel by default
First of all, GreenLight is a plugin that is white label at start. Yes, it is a first page builder that does not have any branding at all. It means that you can install it on client’s sites as your self-made product. Even the documentation will be inside the site. This way, you give more value to your clients, so you can estimate your work more highly.
GreenLight also have role based block manager and unique feature Simplified Panels when you can enable only content editing for specific roles.
One Block that rules them all
This is our main key technical side of GreenLight. Instead of making a lot of blocks or even own environment, we decided to make everything as one key block that is called Elements. They are equal to HTML tags. All other blocks are just variation of this key block. Depends on tag that you will select, you will see extra options. This means that your site has the best and cleanest output. It’s practically the same as building a site manually in a text editor, but with all power of modern tools.
When you add new Element, like DIV – it will be just div on the frontend
<div></div>You can attach styles to this div, and the plugin will add the root class and attach all styles to it. You can also convert such a class to a local class or make it a style instance if you want to reuse it on the page.
We believe that this is the best approach because just one block doesn’t overload your site with requests, it’s stable because we do not rely on core blocks, and it works with the best web development standards. Of course, you can also have access to all attributes in all blocks
Animations, Interactions, Connections, Generations, Creations
These are the main key points of the GreenLight Pro
Animations
First of all, GreenLight has its own super effective animation framework that is based on browser native Intersection Observer
It has only one line of js code, but it’s enough for most animations. It also includes options for staggered sequenced animations for children, hover animations, parent hover animations, animations based on the “active” class, and more. It’s just one simple solution that covers 90% of site animations. It’s also based on our CSS variables, and you can easily update global logic. For example, you can disable all transitions at once on the whole site or add custom accessibility logic.
You can’t even imagine how much you can make just by using our simple Animation framework
And even if you need more, GreenLight has Advanced Animations (based on GSAP) and Interactive Animations (based on Motion.dev), and Browser Native Animation API. Watch more about Advanced Animation panels
And even more, we added browser Native Animation presets for scroll, horizontal scroll, parallaxes, etc.
You don’t need to know anything about Animation CSS, because we also added all fallbacks, presets, and even a keyframe builder.
Interactions
GreenLight has a powerful Interaction system, but it’s not just a regular Trigger – Action feature, it has the most common interactive functions as blocks: Sliding panels, Popups, Lightboxes, Popovers, Modals. And all of these are integrated with blocks, so you have full access to each element. You just click on “Create Panel” and everything is built by the plugin just in place.
There are also many unique interactions like API call, Rive actions, Slider actions, dynamic template loading, etc
Connections
GreenLight has powerful Dynamic options. These include several important features.
Dynamic Fields
You can enable Dynamic Content in all fields and connect it to everything in WordPress
Dynamic placeholders
All blocks support special dynamic placeholders inside content, inside custom CSS variables, attributes, and inside custom JavaScript
Dynamic Query
There is a special block – Query Builder, that is used to build custom loop design, woocommerce product loops, etc
Dynamic Repeater
It’s possible to retrieve repeatable and array-like values and map them to any design blocks. This can include any database stored values and even external connections with API.
Even more, we added a lot of proxy helpers that can convert and test different type of data to be Repeatable for your site. Imagine that you can connect Google Sheets to a specific block on your site? And it’s easy
External API connection to design
And even more, you can connect an external API to your blocks. This can be used to build custom interfaces, like chats, and also filterable items from an external database. And you have full control over design because you will use GreenLight blocks to build API interfaces.
The plugin will take care of formatting, markdown conversion, images, preloaders, errors, API connections, etc. And all of these are inside the editor without writing code or design. We added many ready examples that you can import and use.
Generations
AI becomes our helper and friend. And we decided to concentrate on something that is proven and gives real value. All popular models are deeply integrated into GreenLight and without any kind of payment to us. You can build blocks, convert sites to GreenLight blocks, make tables, charts, edit content, images, etc, and everything inside the editor.
We do not send anything to our servers, we use direct API from popular systems: Google, Open AI, Claude, etc
Of course, all responses will be trained on our special instruction that we update constantly, and we provide it for free, you can download the markdown file from the root folder of the plugin and use it in your own AI tools
Figma and HTML Converter
Generations can be not only directly in the editor. You can also use our free Figma Converter or HTML converter and turn any design or site section into GreenLight Blocks.
Creations
It’s important to create all types of modern design fast. And you can do this with GreenLight. You can build not only regular HTML but also integrate Rive, Lottie, Spline 3d, Charts, Tables,and Unicorn Studio.
And it’s not just regular integration. It’s much more. For example, you can connect your Rive object with the dynamic data of the site. Imagine that you store special numbers in your custom fields and then use this data inside your Rive objects. It’s really easy to do, just add a variable and use dynamic placeholders inside Variable Value. You can do the same for Spline 3d to make dynamic 3d sites
At the same time, we take care of scripts and you can enable the Smart Lazy load option for heavy Spline 3d scenes.
Charts are also another good way for information presentation and we provide wide range of chart systems that can be connected to your site data or to external sources
Another important creation type is Slider. And we have very powerful Slider block that can be used for wide range of styles and functions including connection to dynamic data or synchronization between accordions, tabs and slider
But creation is not only about content, it’s also about speed and how fast you can do design. And we provide a lot of helper tools – auto class creation, style components, quick copy – paste by design type, several type of class system, sub selector auto creation, BEM class creation and many more.
Check our special video with an overview
Modern Web is not scary
While many tools continue to implement outdated things, we are not afraid to experiment and integrate modern things as earlier as possible. And to make them cross browser, we add polyfills that were loaded automatically.
At the same time, you have full access to Class first, variables, and our own Light Framework.
All panels are equipped with Presets that have variables
They have only most commonly used values with modern clamp, max, min variables. In the same time, our framework is not loaded as a common file, it loads only those styles that are in use on the page.
But we do not want to limit you with own framework. We provide a tool to import any design system in one click. Just copy CSS to area and click to import
Community and collaboration in mind
We started to use WordPress because of the huge, lovely community, and I think WordPress is losing it. Most of companies try to fill everything by own products. We will do the opposite – instead of telling you “hey, use only our product, all others suck”. We tell you – “hey, use what you are comfortable to use right now”. We will do our best to make GreenLight as lightweight and friendly as possible. Do you enjoy Kadence, Blocksy, Astra, GeneratePress? It’s fine, GreenLight will work with any other blocks, themes without affecting their speed, functionality, or breaking anything.
At the same time, you can build a whole project around GreenLight, and it will be the highest performing site. We are so sure in our product that we have a permanent bonus challenge – if you build a highly functional site with any other well-known tool that will work faster than on GreenLight – we provide 100% bonus ($100) for you. Your page must have at least 5 screens, one video, one slider or carousel, one canvas section (3d, lottie, rive, unicorn or anything similar), some animations.
We also opened for collaboration, but we carefully approach the selection of partners to keep only those partners that can work in synergy with our products without competition with each other. For example, you can see how we work with the Blocksy team, we have direct chat with devs, and if someone finds any incompatibility, we fix it together very fast. The same, you will see soon with the Crocoblock team and Jetengine products. So, we are gathering small WordPress League of products that add value to each other and make something best in their niche. You can expect some common packs and tools in the future from this league