Modules
Drag and drop elements and customizable areas
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.
- Sections can be added in multiple times, reordered, and removed as needed
- Sections are stored and shown as thumbnails to choose from in the left sidebar
- To add a title for the section in the sidebar, use the
data-titleattribute where you define your section - A dashed blue line is shown where a section can be dropped in
- A solid blue outline is shown when mousing over a section along with its options
Example
<div class="block-section" data-title="Intro">
<h1 class="block-edit" style="text-align: left">Title</h1>
<p class="block-edit" style="text-align: left">Content</p>
</div>
Regions
block-region or -block-region: true
Customizable areas of elements that can't be moved around.
- Regions cannot contain nested regions
- A dashed green outline is shown when mousing over a region along with its options
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>
block-repeat-# or -block-repeat: #
Sets a limit to the number of items that can be duplicated.
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>
Components
block-component or -block-component: true
Stand-alone pieces that can be added throughout a template.
- Is shown as part of a library on the left sidebar
- To add a title for the component in the sidebar, use the
data-titleattribute where you define your component - Once placed, a component can always be moved, or removed
- A component cannot contain a region
- A dashed blue line is shown where a component can be dropped in
- A blue outline is shown when mousing over a component along with its options
Example
<a href="#" class="block-component" data-title="CTA" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a>
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.
- The same variable name should be used for all group blocks that apply to its section/region/component
- Group blocks should be immediately adjacent to each other
- Groups cannot be nested within each other; either use for a section, or regions within a section, but not both
- Numbered tabs are shown to switch between the available group versions
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.
- Each unique content piece requires its own variable name
- Using the same variable name on multiple content pieces will update content for all pieces when one is updated
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>
