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 coordinatesBlur - 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
