Customising Divider Style

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.

See Also

• Using the Style Editor

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 click the pencil button. 

The Divider panel opens with four sections: Width, Appearance, Spacing, and Advanced. 

• 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.

• Thickness - Click the plus (+) or minus (-) boxes to increase or decrease line thickness. The maximum size is 10 px.
• Line Color - Click the box, and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette. 
• Border Width - Set the width of the outside border between 0 and 10 px.
• Border Type - Choose a line style: solid, broken, or dotted. 
• Line Radius - 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 Adding CSS.