Follow

How to Use Dividers

Why Do People Use Dividers?

Dividers are used to break an otherwise long scroll into manageable chunks. Since it is a block-level element, a horizontal rule will always create a line break above and below.

There are many ways that people refer to a Divider. This refers to a display of an <hr> tag, or a horizontal rule, that is used to define a thematic break in a page. We added support for Dividers to be added to the body of content on Tempest.

Here's an Example:

Screen_Shot_2020-12-18_at_10.35.30_AM.png

How to Add a Divider

To add a Divider in the Tempest CMS you will do the following:

  1. Navigate to an article or create a new article

  2. Add a paragraph and select the + to add an embed

Screen_Shot_2020-12-18_at_8.51.35_AM.png

3. Select Divider from the embed menu. By default Variant 1 will be inserted.

Screen_Shot_2020-12-18_at_8.52.33_AM.png

Screen_Shot_2020-12-18_at_8.53.20_AM.png

4. Select the pencil > i icon on the bottom right hand corner to toggle between the 4 variants we allow to be configured on a site

Screen_Shot_2020-12-18_at_8.54.28_AM.png

Screen_Shot_2020-12-18_at_8.55.30_AM.png

5. Preview the content to confirm display

6. To remove the divider you can select the pencil > trash

 

Screen_Shot_2020-12-18_at_8.58.19_AM.png

We offer 4 variants for Dividers which correspond to 4 separate entries in our styling config. Since users do not have the styling config, to change these variants, contact publisher services.  

  • The options for defining the variants would include:

    • Introduce ability to add in a page break/horizontal rule:

      • Solid Line 

      • Double Line

      • Dotted

      • Dashed

    • Provide basic styling options for Dividers :

      • Color: can select from palette or any color

      • Style: solid, double, dotted, dashed

      • Height (in px): this refers to the height of the lines in pixels

      • Width (in %): width of the content well

4 Variants

1.

Screen_Shot_2020-12-18_at_11.49.35_AM.png

2.

Screen_Shot_2020-12-18_at_11.50.11_AM.png

3. 

Screen_Shot_2020-12-18_at_11.50.40_AM.png

4.

Screen_Shot_2020-12-18_at_11.51.11_AM.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk