Developer

Groups

Design variations of areas to choose from

Group

data-group="variable-name" or -group-var: 'variable-name'

Multiple versions of a section, region, or component that can be switched between for preset design features and formatting options.

Example

<div class="block-region" data-group="header">
  <h1 class="block-edit" style="text-align: left">Title Left</h1>
  <p class="block-edit" style="text-align: left">Content Left</p>
</div>
<div class="block-region" data-group="header">
  <h1 class="block-edit" style="text-align: center">Title Center</h1>
  <p class="block-edit" style="text-align: center">Content Center</p>
</div>
<div class="block-region" data-group="header">
  <h1 class="block-edit" style="text-align: right">Title Right</h1>
  <p class="block-edit" style="text-align: right">Content Right</p>
</div>

Stored content

data-block="variable-name" or -block-var: 'variable-name'

Adding to HTML elements stores their content. This works with group functionality to update content across each version.

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>
<div class="block-region" data-group="header">
  <h1 class="block-edit" data-block="example-title" style="text-align: right">Title Right</h1>
  <p class="block-edit" data-block="example-text" style="text-align: right">Content Right</p>
</div>

Testing your template

Sign up for free to import your template and test out editable tags. Need some help implementing the tags? Here are some options: