All Collections
Zipify Pages - Tutorials & Documentation
Page Block Elements
The Divider Element [Zipify Pages]
The Divider Element [Zipify Pages]

Use the divider visual element to create a visual break or divide block 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 blocks 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.

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

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?