Blocks Divider

Divider Block - User Guide

Version: 1.0.0 Category: Design Keywords: divider, separator, line, hr, break

Overview

The Divider Block adds visual separators with multiple style options including solid, dashed, gradient, and decorative patterns. Use it to break up content sections, improve readability, and add visual interest to your pages.

Key Features:

• 8 divider styles (solid, dashed, dotted, double, gradient, dots, wave, icon)
• Adjustable width and thickness
• Icon picker for icon-style dividers
• Full color support via Block Supports
• Customizable spacing and alignment

🚀 Quick Start

1. Insert the Divider block (found in Design category).
2. Choose a divider style from the settings panel.
3. Adjust width (percentage) and thickness (pixels).
4. Set color via the Color panel.

⚙️ Settings & Configuration

Divider Settings Panel

Style Options:

• Solid: Classic single line (default)
• Dashed: Dashed line pattern
• Dotted: Dotted line pattern
• Double: Two parallel lines
• Gradient Fade: Fades out at edges
• Dots Pattern: Decorative dot pattern
• Wave: Wavy line decoration
• Icon: Custom icon in center

Width: 0-100% (controls horizontal width)

Thickness: 1-20px (line height/weight)

Icon Name: Choose from icon library (for icon style only)

Appearance

• Color: Text color controls divider color
• Alignment: Left, Center, Right, Wide, Full
• Spacing: Top/bottom margin via Block Supports
• Min Height: Optional vertical spacing

💡 Common Use Cases

1. Section Breaks

Use Solid or Gradient Fade at 80-100% width between content sections.

2. Subtle Separators

Use Dotted or Dots Pattern at 50% width for light visual breaks.

3. Decorative Dividers

Use Wave or Icon styles for headers, footers, or featured content areas.

4. Bold Separators

Use Double at 3-4px thickness for emphasis between major sections.

✅ Best Practices

DO:

• Use consistent divider styles throughout your site
• Match divider color to your theme palette
• Adjust width based on content width (narrower for tighter sections)
• Add margin spacing above/below for proper breathing room

DON'T:

• Overuse dividers (can create visual clutter)
• Use thickness over 5px for subtle designs
• Mix too many divider styles on one page
• Forget to test color contrast in light/dark modes

💡 Tips & Tricks

• Gradient Effect: Use gradient fade at 60-80% width for modern look
• Decorative Headers: Combine icon divider with heading blocks
• Responsive Width: Use percentage-based width for mobile-friendly dividers
• Color Harmony: Match divider color to nearby elements for cohesion
• Vertical Spacing: Use margin controls to create perfect spacing rhythm

---

Auto-generated from docs/blocks/DIVIDER.md. To update, edit the source file and changes will sync on next push to main.