Separators (Dividers)
On this page:
As the name suggests, 'Separators' add a space or line onto your page layout to break the content up.
Separators are a great way to separate elements or blocks of content within your website to make sure you have consistent spacing and separators throughout your site.
Spacers come in 4 different options:
- Empty Space
- Unbroken Line
- Dashed Line
- Dotted Line
The video below shows how these options will display.
Adding a Separator to your page
- Make sure you are on the page you wish to add the spacer to.
- Click on the ‘+Add Element’ Icon on the page's Header Bar.
- Drag and Drop the Separator icon onto the area of the page that you want it to appear in.
- Click on the Settings Icon
- Depending on your preference, select from the list of spacer options.
- Click 'Apply'
You have now added a spacer to your page.
Separator options
Click edit on your separator to see options.
| Top and bottom spacing | Spacing options work off a grid, to help keep your site spacing uniform. |
| Width | Is a percentage value, and allows you to change the width of the separator. |
| Alignment | Allows you to align your separator left, middle, right. |
| Thickness | Controls the height of the separator |
| Colour | If you have a colour palette set, you can choose from one of your preset colours, or select a custom colour instead, by clicking the custom button. |
Styling
Separator's can have their colours changed, to give interesting contrast to sections of your page. Whether it's a section seperation, or simple a smaller border under a heading.
To change the colour of a separator:
- Click edit on your separator
- At the bottom you'll see the colour scheme. Select a default colour, or choose a custom colour
If you haven't set a colour scheme for your site, you will only have the 'Custom' colour available to you.
Can't find the answer you are looking for?
Try using searching below: