Dividers

Dividers are simple yet effective elements for creating visual separation and structure within your email content. This guide explains how to add and customise dividers.

Adding a Divider

  1. Select the Content Tab: Ensure the Content tab is active in the right-hand sidebar, displaying the available content elements.

  2. Drag and Drop:

    • Locate the "Divider" element in the sidebar.

    • Click and drag the "Divider" element onto your email canvas, placing it within a column or directly into a row where you want the separation. The canvas may show placeholder areas like "Drop it here" or "No content here. Drag content from right."

    Once dropped, a default horizontal line will appear on the canvas, and its properties will load in the right-hand sidebar under the "Content" tab, specific to the "Line" (Divider) element.

Customising Divider Properties

With the divider selected on the canvas, you can adjust its appearance using the options in the right-hand sidebar.

1. Line Styling

This section controls the visual characteristics of the divider line itself.

  • Width: Use the slider to adjust the width of the divider line. This is a percentage relative to the container it's in. By default, it's often 100%.

  • Line Style & Colour:

    1. Style: Click the dropdown menu next to "Line" (initially might show "Solid"). Select the desired style:

      • Solid

      • Dotted

      • Dashed

    2. Thickness: In the input field, enter a pixel value for the line's thickness (e.g., 1px )

    3. Colour: Click the colour swatch (icon resembling a coloured square) to open the colour picker. Select the desired colour for the line (e.g., a red colour like #CC3B3B).

  • Align: Choose the horizontal alignment of the divider line within its container:

    • Left

    • Center (Often the default)

    • Right

General (Container Padding)

This section controls the spacing around the divider element, within its container block. It does not affect the line itself but the space above and below (or left and right if it were a vertical divider, though this type is typically horizontal).

  • Container Padding:

    • All Sides: Enter a pixel value in the "All Sides" input field to apply equal padding to the top, right, bottom, and left of the divider element's container (e.g., default 10px, changed to 35px in the video).

    • More Options: Toggle the "More Options" switch on to reveal individual input fields for "Top," "Right," "Bottom," and "Left" container padding. This allows for precise control over the spacing on each side of the divider.

Responsive Design

Control the visibility of the divider on different devices.

  • Hide on Desktop: Toggle this switch on to make the divider invisible when the email is viewed on desktop devices.

  • Hide on Mobile: Toggle this switch on to make the divider invisible when the email is viewed on mobile devices.

PreviousButtonsNextHeadings

Last updated