Components

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 in a grid of thumbnails to choose from
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">

        <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>

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
A component can always be 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" 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>

Editable Tags

Components

Sections

Example

Regions

Example

Repeat

Remove

Components

Example

Variants

Example

Stored content

Example

Testing your template