Regions

Groups of content and components that can be repeated and/or removed, like a listing of items. Regions do not get added to the sidebar.

Visual theme editor

To enable a content area to work as a region in the visual theme editor: click the Edit button at the top to go into edit mode. Make sure you have the Regions 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 region. Mousing over each HTML element will show a solid outline of the container for your region.

Once selected, use the panel on the left to enable as a region and give it a unique variable name. You can also set whether you want the region can be duplicated, along with a set limit, or removed.

Editable tags code

block-region

Adding variable names to regions saves their metadata. Each unique region requires its own variable name.

data-group="variable-name"

A region cannot be used on a block-edit element.

Example

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

Drop area

You can use an empty region to show a placeholder area that indicates to the user that components can be dropped there.

Example

<div class="block-region" data-block="content"></div>

Repeat

block-repeat

Allows duplicating a region, making it part of a listing where each copy can be reordered or removed.

This will not work on a region within another region around it.

block-repeat-#
Sets a limit to the number of items that can be duplicated.

Example

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

Remove

block-remove

Allows a region to be removed.

Variants

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

Example

<div class="block-region" 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-region" 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>