Divider

Add horizontal lines to separate content sections

A horizontal line that creates visual separation between content sections. Helps organize pages and improve readability.

Quick Reference

• Add: Type /divider or use toolbar

• Styles: Solid or dashed line

• Customization: Color and opacity

• Spacing: Automatic above/below

• Responsive: Adjusts to container width

Adding a Divider

Method 1: Drag from Right Sidebar

1. Click the Lines category in the right sidebar

2. Find Straight or Dashed in the dropdown

3. Drag it onto your page where you want it

4. Click to select and customize

Method 2: Slash Command

1. Type /divider on empty line

2. Divider appears with default styling

3. Click to select and customize

Configuration

Line Style

• Solid: Clean, professional (default)

• Dashed: Softer, less formal

Color & Opacity

• Use color picker in menubar

• Adjust opacity for subtlety

• Default: 50% opacity gray

Best Practices

• Use sparingly: Only between major sections

• Purpose over decoration: Each divider should clarify structure

• Consistent style: Use same color/opacity throughout

• Automatic spacing: Don't add extra line breaks

• Avoid overuse: Not between every paragraph

Common Use Cases

• Between major sections: Hero → Features → Testimonials

• Content type changes: Text → Gallery → Text

• Before footer: Separate main content from footer

• FAQ items: Light divider between Q&A pairs

• Timeline breaks: Separate chronological sections

Design Tips

1. Subtlety works best

   • Light colors with lower opacity

   • Let content be the focus

   • Guide without distraction

2. Match your brand

   • Use theme colors when appropriate

   • Consistent opacity throughout

   • Professional appearance

3. Mobile considerations

   • Test visibility on all devices

   • Ensure adequate contrast

   • Automatic width adjustment

Related Features

• Heading: Natural section breaks

• Paragraph: Content organization

• Columns: Visual separation