DocumentationCommercePage Builder

Elements - Divider

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the Divider content type to add a rule as a visual break between sections of content in the Page Builder stage. You can specify the line color, thickness, and width of the divider. You can also control the alignment, set the 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.

w-500 modal-image
Default divider in a container without a border

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

w-500 modal-image
Divider with padding in container with dashed border
NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Divider toolbox

Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the divider container to another valid place on the page.
(label)
DIVIDER
Identifies the current container as a divider element.
Settings
img-md
w-25
Settings icon
Opens the Edit Divider page, where you can change the properties of the divider and its container.
Hide
img-md
w-25
Hide icon
Hides the divider container.
Show
img-md
w-25
Show icon
Shows the hidden divider container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the divider container.
Remove
img-md
w-25
Remove icon
Deletes the divider container and its content from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add a divider

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

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

    img-md
    w-600 modal-image
    Dragging a divider to the stage

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

    img-md
    w-500 modal-image
    Divider separating sections of text

  2. To specify the settings of the new divider, follow the next procedure.

Change the divider settings

  1. Hover over the divider container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

    img-md
    w-500 modal-image
    Divider toolbox

  2. Change the divider Line Color using one of the following methods:

    • Enter a valid HTML color name. For example, Teal.
    • Enter the hexadecimal color value. For example, #008080.

    When complete, click Apply.

    img-md
    w-600 modal-image
    Setting the line color

  3. Enter the Line Thickness in pixels.

  4. To indicate the unit of measurement, enter the Line Width followed by either px or %.

    img-md
    w-600 modal-image
    Setting line color, thickness, and width

  5. Update the Advanced settings as needed.

    • To control the positioning of the divider within the parent container, choose the Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Option Description
      Default Applies the alignment default setting that is specified in the style sheet of the current theme.
      Left Aligns the list along the left border of the parent container, with allowance for any padding that is specified.
      Center Aligns the list in the center of the parent container, with allowance for any padding that is specified.
      Right Aligns the block along the right border of the parent container, with allowance for any padding that is specified.

      In the following example, the options are set to use a center alignment for the divider.

      img-md
      w-600 modal-image
      Divider with a center alignment

    • Set the Border style applied to all four sides of the divider container:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      Option Description
      Default Applies the default border style that is specified by the associated style sheet.
      None Does not provide any visible indication of the container borders.
      Dotted The container border appears as a dotted line.
      Dashed The container border appears as a dashed line.
      Solid The container border appears as a solid line.
      Double The container border appears as a double line.
      Groove The container border appears as a grooved line.
      Ridge The container border appears as a ridged line.
      Inset The container border appears as an inset line.
      Outset The container border appears as an outset line.

    • If you set a border style other than None, complete the border display options:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Option Description
      Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
      Border Width Enter the number of pixels for the border line width.
      Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

    • (Optional) Specify the names of CSS classes from the current style sheet to apply to the container.

      Separate multiple class names with a space.

    • Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the divider container.

      Enter the corresponding values in the diagram.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Container area Description
      Margins The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
      Padding The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left

  6. When complete, click Save to apply the settings and return to the Page Builder workspace.

    img-md
    w-500 modal-image
    Divider centered in a row

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 divider container to display the toolbox and choose the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | Duplicate icon | +---------------------------+) icon.

    The duplicate divider container appears just below the original.

    img-md
    w-500 modal-image
    Duplicated divider

  2. Hover over the new divider container to display the toolbox and choose the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | Move icon | +----------------------+) icon.

    img-md
    w-500 modal-image
    Moving a divider

  3. Select 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 moved.

    img-md
    w-500 modal-image
    Moving the duplicated divider into position
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d