Help

← Template Editing

Editable sections

Editable section in the template editor

Containers of content stacked on top of each other that can be added in as part of a template's layout.

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.

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. A section cannot be used on a block-edit element.

Editable tag

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'

Example:

<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

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.

Example:

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

Support

Still have questions? Message us.