🎯 Purpose
The Divider widget adds subtle or bold visual breaks between sections, content blocks, or within layouts—helping improve readability and visual structure while enhancing design flow.
⚙️ Key Features & Configuration
Type and Style
Choose between solid, dashed, dotted, double, or none.
Control line weight, color, and opacity for tailored design accents.
Width and Alignment
Set a custom width using percentage or fixed units.
Align the divider left, center, or right to suit content positioning.
Icon Option (Optional)
Add a separator icon in the center of the divider.
Customize icon type, size, color, position, and padding around it.
🎨 Style & Design Options
Gap Control
Manage vertical spacing above and below the divider for clean separation.
Responsive Visibility
Adjust visibility, style, alignment, and spacing separately for desktop, tablet, and mobile to ensure consistent layout on all devices.
🛠️ Advanced Customization
Advanced Tab
Use controls for margin, padding, custom positioning, and z-index.
Apply entrance animations or scroll-triggered motion effects for dynamic transitions.
Add HTML anchors, custom CSS classes, and unique attributes to integrate with the rest of the design.
✅ Best Practices
Use dividers to break up long text sections or define chunks of content in landing pages.
Match divider color and style to your site’s visual theme.
Use icons sparingly to add decorative or branding details.
Test and adjust spacing across devices to prevent content overlap or misalignment.
Choose appropriate alignment based on surrounding elements for visual flow and balance.
The Divider widget provides a versatile way to give structure and polish to your content—combining flexible styling, responsive control, and the option to add unique iconography.
