Add a divider

In this article

Horizontal dividers

Vertical dividers


Dividers help organize page content and hierarchy into individual sections. You can add a horizontal divider using a block in Modern Editor or add a vertical divider by adding some CSS to your design.



Horizontal dividers

Add a horizontal divider line to your design by dragging and dropping a horizontal divider to your preview panel in Modern Editor.


Select the Divider block from the blocks tab (left side of the Modern Editor) and drag it over to the preview panel (right side of the Modern Editor).


Once set, you can start working on how you want this divider to display. Click the divider block, and choose the Styles tab. Here, you can use the Horizontal Rule style to edit your divider:




Vertical dividers

While a vertical divider is not a block type, you can achieve this look by using a 1-pixel image as a background image element. This option won't display in Outlook PC because this email client doesn't support background images.

Steps to follow:

1. Create a 1x1 image filled with the desired color for the divider

2. In your Modern Editor design, click on a column block or other container block

3. Click on Styles

4. Click the Background Image element

5. Browser to the 1x1 image that was created earlier and upload it

6. Copy the contents of the Background Image field and append it to the end value, adding a comma as a separator


7. Set the value of the Background Repeat field to repeat-y

8. Set the value of the Background Position to 33.3% center, 66.6% center

The percentage values are the locations where the dividers will appear in the container block.