Back to Elements & Plugins

Separators and Dividers

3 min readUpdated 1 March 2026
Separators add a space or line onto your page layout to break up content. They help maintain consistent spacing throughout your website and create clear visual boundaries between sections.

Separator Types

Four separator styles are available: Empty Space (invisible spacing), Unbroken Line (solid horizontal rule), Dashed Line, and Dotted Line. Each can be customised in width, thickness, colour, and alignment.

Adding a Separator

  1. 1Navigate to the page where you want a visual break
  2. 2Click '+Add Element' in the page header bar
  3. 3Drag and drop the Separator icon to your preferred location
  4. 4Click the settings icon on the separator
  5. 5Choose your separator style from the available options
  6. 6Click 'Apply' to save

Configuration Options

Spacing — uses a grid system to maintain uniform site spacing above and below the line. Width — adjustable as a percentage of the container width. Alignment — position left, centre, or right. Thickness — controls the line's height. Colour — select from your site's colour palette or apply a custom colour.

Deleting a Separator

Hover over the separator on your page and click the X icon to remove it.
Use empty space separators for clean, minimal layouts. Reserve visible lines for areas where you need a strong visual distinction between content sections — overusing lines can make pages feel cluttered.
Was this helpful?

Related Articles

Still need help?

Submit a Support Ticket