Skip to content

Adding a Divider

You get a clean horizontal line that splits your page into clear sections. Use it between text, images or other elements when a page needs a visual break.

A centred purple divider, 6 px thick and 300 px long, between the heading Our services and its paragraph

Add a divider

Open your page while logged in: the builder controls appear when you hover the content area. Your first page shows the basics.

  1. Hover the column and click + in its control bar, or click Add Elements on an empty page. Open the Content tab and click Divider. It lands at the top of the column, without a dialog. Drag it by the handle in its control bar to move it.
  2. The line is thin, so hover the line itself to show its control bar. Click More, choose Settings and pick a Color.
  3. Under Thickness, choose Custom thickness.
  4. Drag the Thickness slider to set the line weight. Here we use 6 px.
  5. Under Length, choose Custom width.
  6. Drag the Width slider to set the line length. Here we use 300 px.
  7. Set Align to Center.
  8. Click Save in the dialog. Then click Save in the toolbar at the top of the content area to store the page.

What you see

A horizontal line runs across the column in the colour, thickness and length you chose. In the video, it is 6 px thick, 300 px long and centred. Visitors see it once you save the page and it is published.

Set up your divider

Hover the element and open More > Settings in its control bar. Options:

  • Color: the colour of the line. Leave it empty to use the theme colour.
  • Thickness: Theme default or Custom thickness. Custom adds a Thickness slider from 0 to 20 px.
  • Length: Theme default or Custom width. Keep Length on Theme default for a full-width line. Custom adds a Width slider from 0 to 500 px.
  • Align: Left, Center or Right. It shows only with Custom width.

If you don't see it

  • Divider is not in the Content tab. Your user profile hides it. Ask an administrator to tick Separator under Elements in User Profiles.
  • It is gone after you reload. The page was not saved. Add it again and click Save in the toolbar at the top of the content area.
  • The divider sits above your content. New elements land at the top of the column. Hover the line and drag it by its handle, or open More > Move Down.
  • The line is invisible. The Color matches the page background. Hover the element and open More > Settings, then pick a contrasting colour.
  • The line does not span the full width. Length is set to Custom width. Hover the element and open More > Settings, then set Length back to Theme default.

What's next?

Style tab to change spacing around your divider.

Something wrong or missing on this page? Report it or edit the page.