Separator widget

The Separator widget is a simple but powerful design element used to visually divide content on a page.

It helps create structure, improve readability, and guide the user’s eye through sections without adding extra text or visuals.

Separators are especially useful for breaking up long pages, separating sections, or adding subtle visual rhythm to your layout.

Use the Separator widget when you want to:

Visually separate sections of content
Improve readability on long pages
Create spacing and breathing room between blocks
Add subtle visual structure without heavy design elements
Guide users through content in a logical flow

Common examples include:

Separating sections on landing pages
Dividing content blocks in long-form pages
Adding structure between text-heavy sections
Creating visual pauses between features or steps

When you select the Separator widget and open Settings, you’ll see the following options.

Type

The Type setting controls how wide the separator appears inside its column.

Available options:

Small

Displays a separator with a fixed, narrow width
Ideal for subtle dividers or minimal visual breaks
Works well as a decorative accent rather than a full section divider

Use Small when:

You want a discreet separator
The divider should not span the full content width
You’re aiming for a clean, minimal look

Full Width

Makes the separator span the entire width of the column
Best suited for clear section separation and stronger visual structure

Resizable behavior (important):

When Full Width is selected, you can manually adjust the width after placing the separator:

Select Full Width
Place the separator
Drag its handles to resize it to any custom width you want

This gives you full flexibility — from edge-to-edge dividers to custom-width separators aligned with other elements.

Use Full Width when:

You want a strong visual divider
You need precise control over the separator’s width
You want the separator to align with other layout elements

💡 Tip

A common technique is to use Full Width and then slightly reduce the width to match text columns or cards, creating a balanced and intentional layout.

Separator Color

The Separator Color setting lets you choose the color of the line.

You can:

Use one of your Global Colors
Select a custom color if needed

Best practices:

Prefer Global Colors for consistency
Use neutral or muted colors for subtle separation
Ensure enough contrast so the separator is visible, but not distracting

💡 Tip

Separators often work best when they are lighter than text and darker than the background — just enough to be noticed.

UI & UX Design Tips

Use separators to support structure, not decoration

Separators should clarify layout, not decorate it. If the separator draws more attention than the content, it’s usually too strong.

Avoid overusing separators

Too many separators can make a page feel fragmented.

If content already has enough spacing, a separator may not be necessary.

Combine with spacing

Separators work best when combined with proper padding and margins above and below.

Let the separator breathe.

Keep consistency across the page

If you use separators in one section style, use the same type and color elsewhere for visual consistency.

Use separators instead of extra text

Instead of adding headings like “Next section”, a subtle separator can often do the job more elegantly.

Common Use Cases

Landing pages with multiple sections
Long sales pages or funnels
Blog posts or content-heavy pages
Feature or benefit sections
Breaking up FAQs or accordion groups

When Not to Use a Separator

You may want to avoid separators if:

Spacing alone already creates clear separation
The page feels visually cluttered
A background color or section container already defines structure
The separator does not add clarity

In those cases, adjusting padding, margins, or section backgrounds may be a better solution.

Summary

The Separator widget adds a visual divider between content sections
You can control type (size) and color
Best used subtly to improve readability and structure
Prefer Global Colors and consistent styles
Avoid overuse — separators should support content, not dominate it

Used thoughtfully, the Separator widget helps create cleaner layouts, clearer structure, and a more pleasant reading experience for your visitors.

Separator widget

What the Separator Widget Is Used For