Help

← Template Editing

Editable regions

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.

Example

<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>

Repeat

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.

Example

<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.

Remove

block-remove or -block-remove: true

Allows a region to be removed.

Example

<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

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.

Example

<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>

Template editor

Editable region in the template editor

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.

Support

Still have questions? Message us.