Developer

Groups

Alternate versions of certain content areas to choose from

Component highlight icon

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. (Note: groups were formerly referenced as styles, which also still work.)

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: left">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: left">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: left">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: left">Content Right</p>
</div>

Implementation Support

Need help implementing your template? Here are some options: