Display a grid of unique blocks with different sizes and hierarchy
The dynamic content section allows you to showcase different content blocks such as images, text, icons, videos, and many more in a grid-based layout. It's perfect for creating unique content, and the possibilities with this section are almost infinite.
Example of how the section looks on preview for desktop
Example of how the section looks on preview for mobile
Customize
By default, the section uses a 16-column grid which adjusts automatically to fit your screen. On mobile, it uses an 8-column grid. These can both be customized under the main section settings.
Example of how the section looks inside the theme customizer with the grid system
You can change the position of the blocks and tweak their sizes by editing the row and column positions.
You can also drag and drop blocks above or below each other to change their priority.
The lowest placed block will have the highest priority, while the highest block(the one closest to the dynamic content) will have the lowest priority.
Under each block, you will see an option to limit its visibility for specific devices. This way, you can create a design that fits both desktop and mobile.
Section settings
Settings
Type
Description
General
Color scheme
color_scheme
Select the color scheme applied to the section. Default: scheme_1.
Desktop grid
Info text
paragraph
Uses a 16-column grid. Rows adjust automatically to fit your content.
Gap
range
Controls spacing between grid items on desktop. Range: 0–50px, step: 2px. Default: 16px.
Mobile grid
Info text
paragraph
Uses an 8-column grid. Rows adjust automatically to fit your content. Switch to mobile preview to configure the section more easily.
Gap
range
Controls spacing between grid items on mobile. Range: 0–50px, step: 2px. Default: 10px.
Layout
Width
select
Controls section width.
Options:
wrapper--full — Full width
wrapper--full-padded — Full width padded (default)
Padding
Top
range
Top padding of the section. Range: 0–200px, step: 2px. Default: 50px.
Bottom
range
Bottom padding of the section. Range: 0–200px, step: 2px. Default: 50px.
