Experiencing an issue?

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

 

 

1  Customising divider settings

  1. Go to the Style Editor page.
  2. At the top of the screen, verify the Default Styles button is selected (it should be green).
  3. Scroll down to the Divider section.
  4. Hover the mouse pointer on the Divider Section and then click the Pencil button. The Divider Settings panel opens.
  5. To make the changes active across the website, click the Publish button at the top of the Style Editor page. 

 

divide-1.png

 

2  Customising divider width

Choose how far a divider spans across its component. Select a number between 5% to 100%.


divide-2a.png

 

3  Customising Appearance

Click Appearance on the Settings panel. That displays tools to customise the divider's appearance.

 

divide-3a.png

 

Thickness

Click the plus (+) or minus (-) boxes to increase or decrease line thickness. The maximum size is 10 px.

Line Type

Choose a line style: solid, broken, or dotted. 

Line Color

Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette. 

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.

 

divide-space-1.png

 

5  Customising Advanced

For developers, add a Class Name to specify CSS rules. For more information, see: