Divider Block
Add visual separation between content sections with customizable divider styles.
What is the Divider Block?
A visual separator block with multiple style options for creating clear content boundaries.
Key Features
- 8 divider styles
- Customizable width and thickness
- Color and gradient support
- Alignment options
- Spacing controls
- Icon integration option
Available Styles
- Solid Line – Classic horizontal line
- Dashed Line – Dashed pattern
- Dotted Line – Dotted pattern
- Double Line – Two parallel lines
- Gradient – Color fade effect
- Dots – Series of dots
- Wave – Wavy line pattern
- Icon – Divider with icon in center
How to Use
- Insert Divider block between content
- Select style from dropdown
- Adjust width (percentage or pixels)
- Set thickness (1-10px)
- Choose color or gradient
- Configure spacing
Settings
Style Settings:
- Style – Choose from 8 options
- Width – Full width, 50 percent, 25 percent, custom
- Thickness – Line height (1-10px)
- Alignment – Left, Center, Right
Colors:
- Color – Single color option
- Gradient – Two-color fade
- Opacity – Transparency control
Spacing:
- Margin Top – Space above divider
- Margin Bottom – Space below divider
Common Use Cases
Section Separators
Between major page sections
Content Breaks
Within long text content
List Separators
Between list items or groups
Decorative Elements
Add visual interest to pages
Best Practices
- Use sparingly for maximum impact
- Match divider color to design
- Keep thickness subtle (1-3px)
- Center alignment works best
- Add appropriate spacing (40-60px)
- Use wave or icon styles for variety