Drag and drop elements and customizable areas
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.
<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>
block-region
or -block-region: true
Customizable areas of elements that can't be moved around.
<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>
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>
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>
block-component
or -block-component: true
Stand-alone pieces that can be added throughout a template.
<a href="#" class="block-component" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a>
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.
<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>
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.
<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>
Sign up for free to import your template and test out editable tags. Need some help implementing the tags? Here are some options: