Divider

Use the Divider content type to add a rule as a visual break between sections of content on the stage. You can specify the line color, thickness, and width of the divider, as well as control the alignment, margins and padding, and format of the container border. By default, the divider is a hairline rule that extends the full width of the container, with allowance for padding.

Default Divider in Container without Border

Although most divider containers are invisible, in the following example, the container has a red dashed border so you can see the relationship between the divider, its padding, and the container. You can adjust the padding at the top and bottom of the divider to control the spacing between elements.

Divider with Padding in Container with Dashed Border

To add a divider

  1. In the Page Builder panel under Elements, drag a Divider placeholder to a row, column, or tab set on the stage.

  2. Use the red guideline for reference as you position the divider either before or after another content container on the stage.

    In the following example, the divider marks the beginning of a new section of text.

    Divider Separating Sections of Text

To update divider settings

  1. Hover over the container. Then in the toolbox, choose Settings ( ), and do the following:

    Divider and Toolbox

    • To change the divider Line Color, do one of the following:

      • Enter a valid HTML color name. For example, “Teal.”
      • Enter the hexadecimal color value. For example, “#008080.”
    • When complete, tap Apply.

      Line Color

    • Enter the Line Thickness in pixels.

    • Enter the Line Width followed by either “px” or “%” to indicate the unit of measurement.

      Line Color, Thickness, and Width

    • In the Advanced section, set Alignment to “Center.”

      Center Alignment

    • Update the remaining settings as needed, using the field descriptions at the end of this page for reference.

    • When complete, Save the settings and return to the Page Builder workspace.

      Divider Centered in Row

  2. In the upper-right corner, Save. the page.

To duplicate a divider

For a formatted divider with specific settings, it is more efficient to make a duplicate, rather than start over with a new placeholder.

  1. Hover over the container. Then in the toolbox, choose Duplicate ( ).

    The duplicate appears just below the original.

    Duplicate Divider

  2. To move the new divider into position, hover over the container. Then in the toolbox, choose Move ( ).

    Move Divider

  3. Hold down the mouse button, and drag the divider until the red guideline marks the new position.

    The top and bottom borders of each container appear as dashed lines while the divider is being moved.

    Move Duplicated Divider

  4. In the upper-right corner of the page, tap Save.

Divider Toolbox

| Tool | Icon | Description | | ——— | ———————————————————————— | ————————————————————————————————– | | Move | | Moves the divider container to another valid place on the page. | | (label) | DIVIDER | Identifies the current container as a divider element. | | Settings | | Opens the Edit Divider page, where you can change the properties of the divider and its container. | | Hide | | Hides the divider container. | | Show | | Shows the hidden divider container. | | Duplicate | | Makes a duplicate copy of the divider container. | | Remove | | Deletes the divider container and its content from the stage. |

Divider Settings

Setting Description
Line Color Determines the color of the divider.
Line Thickness Determines the thickness of the divider in pixels.
Line Width Determines the width of the divider in pixels, or as a percentage.
Advanced
Alignment Determines the horizontal alignment of the divider in relation to its parent container. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns the divider along the left border of its parent container, with allowance for any padding that is specified.
CenterAligns the divider in the center of its parent container, with allowance for any padding that is specified.
RightAligns the divider along the right border of its parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the divider container. Options:
DefaultApplies the default border style from the style sheet that is associated with the current theme.
NoneProvides no visible indication of container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe container border appears as an outset line.
Border Color Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the container border.
Border Radius Specifies the size of the radius that is used to round each corner of the container border.
CSS Classes Specifies the names of CSS classes from the current style sheet which apply to the divider. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the row. Enter each corresponding value in the row container diagram. Options:
MarginsThe amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the divider container. Options: Top, Right, Bottom, Left.
PaddingThe amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the divider container. Options: Top, Right, Bottom, Left.