Gallery of Blocks

Block Variations and Preset
Showcase

Explore the complete collection of GreenLight block variations and discover endless possibilities for your website design.

One of GreenLight Philosophy’s points is “One block that rules them all”. For this reason, GreenLight doesn’t have many blocks. It has an Element block that is for all kind of content, a Slider block for all kind of carousels and sliders, and a Query Block (+ filter blocks as extra). Instead of many blocks, GreenLight uses variations. This allows us to keep all settings consistent and easy for studying. Let’s see all variations

Your starting point

Layout Elements

Use this block for centering your content and as main entry point of your design. Block will autodetect container width of theme and use it for content container width

Layout Components include Section Component, Pinned Horizontal section and regular DIV.

Section Component

It’s the central block that you should use for making the homepage and landing pages. It allows for centering content with the theme container width. In the same time you can use Columns or Grid in Layout options

Pinned Section Element

This block allows you to change regular vertical scroll to horizontal scroll in specific section. Useful for galleries with big photos. You can control the speed of scrolling if you change the height of the section

It’s recommended to add content outside the pinned element first, and then you can put it inside the Horizontal scroll section.

Scroll speed is calculated automatically based on content length and height.

Your main content points

Content Elements

Use these variations to put different kind of content inside your posts and pages. You can combine them with core blocks

Content Elements have all regular HTML tags (all standard) like

and others

There are some specific content elements

Button Component (with icon and flat)

Button component is integrated inside Light Framework and you can easily change style of button from primary to secondary or custom. There are also 30 quick presets that you can add to Link Element. Examples

This variation is made for more faster creation of Icon lists. You can change design of list items from parent block class or from the Descendant Style Panel of parent class

• Lorem ipsum dolor sit amet, consectetur adipiscing elit
• Est in labore excepteur mollit laborum
• Do velit sunt esse officia excepteur aliquip

Video Lightbox

This is great block to Show preview and play button. Unlike other blocks, Youtube is loading only in lightbox and this means that youtube scripts are loaded after user interactions (so page still has good performance)

Video lightbox supports also dynamic placeholders so you can save youtube link in custom field and then use {{CUSTOM:field}} placeholder in URL field.

Video Lightbox supports youtube/vimeo and .mp4 links for video source

Inline Video and Cover Element

Inline Video block is great when you want to put video background on page. You can disable control and enable mute, autoplay for this. You can put this block inside another block Cover Element instead of image for faster workflow. Use position absolute for video layer block to make it work as background

This block allows to automatically split text by words and symbols. You can style these chunks separatelly or animate them. Split text is server related, it means that it will work without scripts and will not affect web vital score.

Split text block works also with dynamic text. So, you can add specific styles to first word (or any other) even if text generated dynamically

Animation can be easily added if you enable animations for child and stagger effect

Unlike heavy scripts like GSAP, this block is server related and do not relate on heavy scripts

Text Animated Element

Another version of text animations. This element can change one specific word on another in rotation. You can add unlimited words and different effects

SVG and SVG Text path

SVG Element allows to add any svg code to page and even convert svg image to code. Also, you can use simple shapes for text path. You can also animate it on scroll

Add interactions to content

Interactive Elements

Use these blocks to add some interactivity to content. Different ways to capture user actions and communication

GreenLight has a lot of ready interactive elements and also you can build custom Interaction Layers

Accordion Element

This can be used as accordion or as Spoiler block. If you want to make specific accordion opened on loading, add class “active” and dynamic attribute “data-active” to item

Tabs Element

Both Accordion and Tabs are not hard coded, you can take some parts of block and put it somewhere in another place and it will work. For example, tabs can be placed separately for content and for tab links

Design of blocks are totally configurable because these blocks are not hard coded.

Draggable Scroll Element

This Element can be used if you want to have a horizontal app-like scroll block, but you think that swiper carousel block doesn’t fit your needs. You can use any element for custom arrows. It’s variation of very light carousel.

Marquee Element

Marquee Element is similar to previous, but it makes an infinite animation loop. You can add anything to loop, not only images. Do not forget to Toggle animation in options (otherwise Marquee will not start.

Counter Element

Simple Element, you set start and end number and counter will do animation between numbers. Supports also dynamic data. Counter will start when it’s in view on page

Countdown Element

Add slider to anything

Slider Elements

Use these blocks to add some slider or carousel to content, this supportd also query dynamic data

Slider has a lot of variations

Practically, you can convert any block with children to be a slider

Add additional options

Extra Elements

Use these for a wide range of tasks and content styling, add uniqueness to your site and content

Switcher Element

Switcher element can be used for two purposes: you can use it for switching content and as a toggle box.

When you use it for switching content, in the Switcher block, click on the button to toggle the switcher and set different content for different state of the switcher.

Dark Mode Switcher

You can also use Dark mode switcher, which will also add an option to replace the theme and preset colors to be different when you are in different modes. Mode is saved inside the cookie.

Social Share Element

This Element gives you list of social share icons with a share script. You can change the design of each button

Split Test Block

Idea of this block to test different sections or content. It’s just container block and you must put children items inside. Then, each child item will be visible in rotation and other items will be hidden on frontend. This way user will see different items on each page reload and you can test which design has better conversion

Table Element

This element is made for making Tables. Each cell can have any type of content. You can add also design for separate columns, rows, and each cell. There is also CSV to table converter.

Navigation Element

Add very flexible navigation to site. Works much faster and more performant then WordPress Menu

Add dynamic options

Dynamic Elements

Any site requires dynamic data, add query loops, repeatable data, filters. Build design with constructor, add carousel to dynamic data

Add dynamic to your site with Query Builder (to get post type items), repeatable builder (to get any repeatable data) and Filter (to filter post type items)

Query Builder

Get next source of data

• Post Category or tag
• Custom post type and taxonomy
• Manual Select and Order
• Related items By Taxonomy
• Related items By Post Author
• Related items By Meta field
• Auto detect archive data
• Auto detect Shop archive
• Taxonomy Archive (only parent posts)
• Wishlist query
• Get all childs of current page
• Get all sisters of current page
• Get parent of current page
• Get Previous Post
• Get Next Post
• MetaBox RelationShip
• Ids RelationShip
• Current user posts
• Query arguments

Latest Query arguments source supports json and all wp query options. You can also combine them with dynamic placeholders.

Dynamic Repeater

Repeater builder is more advanced constructor. Unlike to Query Builder, you can show any repeatable data.

• ACF Repeater Field
• ACPT Repeater Field
• ACF Site Options
• Users data
• Comments
• Site Options
• Custom Meta Field Repeater
• Custom Meta array of file ids
• Taxonomy (Archive) Meta Field
• Taxonomy list data
• Query arguments
• Relationship Post Objects
• Relationship Post Ids
• JSON/API Connector
• Content Egg plugin data

Add charts options

Chart Elements

Add special chart block to site. Different types of chart. Possible to convert CSV and Google SpreadSheet to chart. Add dynamic to charts

Add canvas options

Canvas Elements

Add special animated blocks to your site: Spline3d for 3d elements, Rive and Lottie, Unicorn, Scrolly Video

Add special Canvas Elements. Currently supported

• Rive
• Lottie
• Spline 3d
• Unicorn
• Scrolly Video

All items support also dynamic placeholders for variables. It means that you can build even dynamic canvas where items are connected to your site data