How do I add 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.

 

Keep in mind you can achieve the illusion of dividers with design elements such as whitespace or changes in background color. When you're working with images the images themselves act as a solid anchor point between sections.

 

Topics covered in this article:

Horizontal dividers

Vertical dividers

 

 

Horizontal dividers

 

You can easily 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. Typically Outlook PC is the lowest email client in use among subscribers, but the most used for testing internally. Always focus your design on the end user.



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.

url("/nodeapp/test/file-fixtures/emails/tbe-template-fixture/black-1x1.png"),   
url("/nodeapp/test/file-fixtures/emails/tbe-template-fixture/black-1x1.png")

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.

 

 

Have more questions? Submit a request