🎯 Purpose
A visual element that inserts a straight, vertical line to separate content, enhance structure, or add a refined design accent between sections or columns.
➕ How to Add
Drag and drop the Vertical Divider widget into a section or column layout.
It creates a standalone vertical line by default, but can be positioned alongside other elements as needed.
📋 Main Content Settings
Orientation: Automatically vertical; height adjusts to match its container.
Content Alignment (if combined with text/icon): Controls how the line aligns relative to nearby content.
Height Control: Set to full container height or apply a custom height (in pixels, percentages, or other units).
🎨 Style Configuration
Line Appearance
Color & Width: Choose the line’s color and thickness to match your design.
Line Style: Choose between solid, dashed, or dotted formats.
Opacity: Adjust transparency for subtle or bold visuals.
Spacing
Padding: Adds space inside the divider’s container to separate it from adjacent content.
Margin: Adjusts space outside the container to control distance from surrounding elements.
🛠️ Advanced Layout Options
In the Advanced tab, you can fine-tune:
Positioning: Set margins, padding, z-index, and responsive visibility.
Motion Effects: Add entrance animations or scrolling behavior.
Custom CSS & Attributes: Extend styling or add interactivity with your own code.
Responsive Controls: Show, hide, or resize the divider for different screen devices.
💡 Best Practices
Use to clearly separate columns of diverse content.
Apply thin, low-contrast lines for gentle separation, or bold styles for emphasis.
Keep spacing balanced so the divider feels integrated, not crowded.
Use responsive settings to hide the divider on smaller screens if it disrupts layout flow.
The Vertical Divider widget helps you create a clean and intentional layout structure, visually separating content in a subtle and effective way.
