Design

Divider

Quickly place a line/divider between sections on a page.

Used to divide sections of a page.

If the settings are not changed, the widget will produce a thin divider in an accent color (grey) that fits the width of the container it is placed in.





How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert above or Insert below
  3. Choose the Divider widget
  4. Additional fields can be found in the Settings tab, these will allow you to customize the look of the widget. The fields and their descriptions are listed below;
    • Color - Choose the color of the divider. Options available are Primary, Secondary, Tertiary, Accent, Info, Gray, Light Gray, Dark Gray, and Dark/Black. By Default the color chosen is Accent.
    • Height - Select the height of the divider from the following; Default, Small, Medium and Large. The default is small.
    • Style - Pick the style of the divider from the following options; Default, Dashed, Dotted, Solid and Double. The default is a solid line.
    • Width - Choose the width of the divider, by default it is 100%. Other options include; 25%, 50%, 75% and 100%.
    • Icon - Pick from a selection of icons if you want the divider to be something other than a line.
    • Custom CSS Classes - If you need to target the divider with a custom style enter the custom class name in this field.
  5. When you are finished, click on the green Create button and your Divider widget will show up on the page.
  6. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.