Divider Component

Showcases the Divider component. [2:31]

Two options for completing this exercise...
  1. Request a Self-Paced account on the Training Server. Then just follow the instructions as is.
  2. If you already have access to the main Author Server, adapt the instructions to fit your own site.


Dividers are used to break up a page into visually distinct sections, so it is easier for readers to scan.

Please use the divider component for this purpose, rather than adding redundant blank lines to Body Text or other components.

By default, the Divider is a gray dotted line, which is effective, but if you prefer, the component can also be used to add extra 'white space' for even larger separation between content areas.


1. Log into the UBCMS.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

  • Click the Toggle Side Panel button in the upper left of the window.
  • Switch to the Component Browser.
  • Components are listed alphabetically. Or type part of its title and click Enter.
  • Find your desired component and drag it onto the page.

6. Note how the component looks initially (a thin gray line).

7. Select the component, then click the wrench icon to Configure it.

8. Explore the main formating options:

  • Change the Style to blank.
  • Add some Vertical Space.   

9. Click the checkmark icon when you are done. (The 'X' cancels your changes.)

10. Observe the results.

Best practice: as you build out a long and complicated page, decide how you want the dividers to look, then build one and copy then paste it down the page as many times as you need it to save you a lot of repetitive steps. (Copying components is showcased in another exercise.)

Additional Reading