Editable Tags

Components

Drag and drop elements and customizable areas

Section highlight icon

Sections


block-section or -block-section: true

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

Example

<div class="block-section">
  <h1 class="block-edit" style="text-align: left">Title</h1>
  <p class="block-edit" style="text-align: left">Content</p>
</div>
Component highlight icon

Components


block-component or -block-component: true

Stand-alone pieces that can be added throughout a template.

Example

<a href="#" class="block-component" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a> Region highlight icon

Regions


block-region or -block-region: true

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

Example

<div class="block-region">
  <h1 class="block-edit" style="text-align: left">Title</h1>
  <p class="block-edit" 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">
  <h1 class="block-edit" style="text-align: left">Title</h1>
  <p class="block-edit" style="text-align: left">Content</p>
</div>

Remove

block-remove or -block-remove: true

Allows a region to be removed.

<div class="block-region block-remove">
  <h1 class="block-edit" style="text-align: left">Title</h1>
  <p class="block-edit" style="text-align: left">Content</p>
</div>

Variants

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

Variants, or groups are alternate versions of sections, components, and regions that you can enable to choose from. This allows for preset design features and formatting options that can be switched between.

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: