A separator adds a horizontal line or a clean gap between sections.
Adding one#
Open Add Elements and choose Separator from the Basic group, then drop it where you want the break.
Settings#
Style
- Line style: Empty space, Unbroken line, Dashed line or Dotted line
Spacing
- Top spacing and Bottom spacing: None, Small, Medium, Large or X-Large
- Width (%): how far the line stretches across its column
- Thickness (px): 1 to 20. Hidden when the style is Empty space.
Alignment, colour and visibility
- Alignment: Left, Centre or Right
- Colour: pick from your site palette or set your own. Hidden when the style is Empty space.
- Hide on mobile: hides the separator on phones
Tips#
- A new separator has no spacing. Both spacing settings start on None, so set them to create a visible gap.
- 'Empty space' is an invisible gap. With both spacings on None you'll get nothing at all, which is why the thickness and colour options disappear for this style.
- Spacing shrinks automatically on tablets and phones, so a Large gap won't swallow a small screen.
- Width is a percentage of its column, not the whole page, so a separator inside a narrow box will be shorter than you expect.
- Once you pick a colour it stays fixed, so it won't follow later changes to your site palette. Leave it unset to keep following your theme.
- Use empty space for clean, minimal layouts. Too many visible lines make a page feel busy.
Looking for curved or wavy dividers?#
Shape dividers (curves, waves and angles between bands of content) aren't part of the Separator element. They're section settings: open a section's settings and look for Top shape divider and Bottom shape divider, where you can set the shape's colour, height and width, and flip or invert it. See Sections and page layouts.