Sections

Containers of content stacked on top of each other that can be added in as part of a layout, between the header and footer.

Sections are stored and shown as thumbnails to choose from in the left sidebar. A dashed blue line is shown where a section can be dropped in. Sections can be dragged in multiple times, reordered, and removed as needed.

block-section

Adding variable names to sections saves their metadata. Each unique section requires its own variable name.

data-group="variable-name"

To add a title for the section in the sidebar, use the data-title attribute.

data-title="Title"

Example

<div class="block-section" data-group="header" data-title="Header">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>

Variants

Variants are alternate versions of sections 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 blocks that apply to its section. Blocks should be immediately adjacent to each other.

Example

<div class="block-section" data-group="header">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>
<div class="block-section" data-group="header" style="text-align: center">
  <h1 class="block-edit" data-block="example-title">Title</h1>
  <p class="block-edit" data-block="example-text">Content</p>
</div>