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.

Visual theme editor

To enable a content area to work as a section in the visual theme editor: click the Edit button at the top to go into edit mode. Make sure you have the Sections icon () selected from the left sidebar.

Use the blue bar of HTML elements at the bottom of the editor to help determine which HTML element would work best for each section. Mousing over each HTML element will show a solid outline of the container for your section.

Once selected, use the panel on the left to enable as a section and give it a unique variable name along with a title that users will see for it in the sidebar.

Editable tags code

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>