Support
Still have questions? Message us.
Customizable areas of elements that can't be moved around. Regions do not get added to the sidebar.
block-region or -block-region: true
Adding variable names to regions saves their metadata. Each unique region requires its own variable name.
data-group="variable-name" or -group-var: variable-name
And a region cannot be used on a block-edit element.
<div class="block-region" data-group="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>
block-repeat or -block-repeat: true
Allows duplicating a region, making it part of a listing where each copy can be reordered or removed.
This will not work on a region within another region around it.
<div class="block-region block-repeat" data-group="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>
block-repeat-# or -block-repeat: #
Sets a limit to the number of items that can be duplicated.
block-remove or -block-remove: true
Allows a region to be removed.
<div class="block-region block-remove" data-group="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 regions 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 region. Blocks should be immediately adjacent to each other.
<div class="block-region" 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-region" 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 region icon () chosen on the left, start selecting areas that you want to enable options for. Use the blue bar of HTML elements at the bottom to help determine which areas would work as groups of elements. Options 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.