Help

← Template Editing

Editable regions

Editable region in the template editor

Customizable areas of elements that can't be moved around.

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.

Editable tag

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

Regions cannot contain nested regions. 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.

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

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

Support

Still have questions? Message us.