Support
Still have questions? Message us.
Containers of content stacked on top of each other that can be added in as part of a template's layout.
Sections are stored and shown as thumbnails to choose from in the left sidebar. A dashed blue line is shown where a section can be dropped in. Sections can be dragged in multiple times, reordered, and removed as needed.
block-section or -block-section: true
Adding variable names to sections saves their metadata. Each unique section requires its own variable name.
data-group="variable-name" or -group-var: variable-name
To add a title for the section in the sidebar, use the data-title attribute.
data-title="Title" or -title-var: 'Title'
<div class="block-section" data-group="header" data-title="Header">
<h1 class="block-edit" data-block="example-title" style="text-align: left">Title</h1>
<p class="block-edit" data-block="example-text" style="text-align: left">Content</p>
</div>
Variants are alternate versions of sections that you can enable to choose from. This allows for preset design features and formatting options that can be switched between. The same variable name should be used for all blocks that apply to its section. Blocks should be immediately adjacent to each other.
<div class="block-section" data-group="header">
<h1 class="block-edit" data-block="example-title" style="text-align: left">Title Left</h1>
<p class="block-edit" data-block="example-text" style="text-align: left">Content Left</p>
</div>
<div class="block-section" data-group="header">
<h1 class="block-edit" data-block="example-title" style="text-align: center">Title Center</h1>
<p class="block-edit" data-block="example-text" style="text-align: center">Content Center</p>
</div>
In the template editor, go into edit mode, and with the section icon () chosen on the left, start selecting areas that you want to turn into drag and drop modules. Use the blue bar of HTML elements at the bottom to help determine which areas would work as seperate containers that are on top of each other. Option to set the section will appear in the sidebar on the left. Click Update to enable it. And Save to go into template preview mode to see the results.
Still have questions? Message us.