The Divider Element [Zipify Pages]

Use the divider visual element to create a visual break or divide sections on your page!

Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

Overview

The divider element can add a stylized horizontal divider line to your page, which can serve as a separator for page sections and content.

Dividers contribute to the aesthetics, organization, and usability of a web page. They provide a visual separation between content sections, enhance the overall design, and guide users' attention. By effectively utilizing dividers, you can create a visually appealing and well-structured web page that improves the user experience and engages visitors effectively.

Sections which contain the divider element can be found in the "Misc" category of the page section library:

A new divider element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Divider" element:

Divider Settings & Styles

The settings and styles of the divider can be adjusted in the sidebar of the builder using the following Tabs:

๐Ÿ“Choose the device type you'd like to edit the image styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits for Spacing, Size and Visibility are available in Tablet/Mobile modes.

1. In the "Border" tab you set the divider's:

  • Style - Solid / Dotted / Dashed

  • Size - The thickness of the divier

  • Color - The color of the divider

2. In the "Box Shadow" tab you can edit the divider's:

  • Color - The color of the shadow

  • X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards

  • Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
    ๐Ÿ“ X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinates

  • Blur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow

  • Spread - The size of the shadow. Range of allowed values is 0 - 20

3. In the "Spacing" tab you can edit the divider's:

  • Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border

  • Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element

4. In the "Size" tab you can edit the divider's:

  • Width - The horizontal length/width of the divider. Preset options of S/M/L/XL/Full are provided or use the slider to set a Custom width instead

5. In the "Visibility" tab you can choose which device(s) to show the divider on:

  • Show on Desktop

  • Show on Tablet

  • Show on Mobile

Did this answer your question?