This article shows you how to customise the Divider Component in the Style Editor.
A divider is a horizontal line that helps readers visually understand your content while scanning a page. Dividers typically group related content into sections or separate content from a list.
There are two basic kinds of dividers:
- Full bleed, which runs across the whole layout.
- Inset, which spans a part of the layout.
1 Customising divider settings
- Go to the Style Editor page.
- At the top of the screen, verify the Default Styles button is selected (it should be green).
- Scroll down to the Divider section.
- Hover the mouse pointer on the Divider Section and then click the Pencil button. The Divider Settings panel opens.
- To make the changes active across the website, click the Publish button at the top of the Style Editor page.
2 Customising divider width
Choose how far a divider spans across its component. Select a number between 5% to 100%.
3 Customising Appearance
Click Appearance on the Settings panel. That displays tools to customise the divider's appearance.
Click the plus (+) or minus (-) boxes to increase or decrease line thickness. The maximum size is 10 px.
Choose a line style: solid, broken, or dotted.
Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette.
Add rounded corners to the divider. Click the plus (+) or minus (-) boxes. The higher the number, the rounder the corners.
4 Customising Spacing
Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.
5 Customising Advanced
For developers, add a Class Name to specify CSS rules. For more information, see: