Sections

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

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 or -block-section: true

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

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

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

data-title="Title" or -title-var: 'Title'

Example

<div class="block-section" data-group="header" data-title="Header">
  <h1 class="block-edit" data-block="example-title" style="text-align: left">Title</h1>
  <p class="block-edit" data-block="example-text" style="text-align: left">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" 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-section" 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>