Spacer widget

The Spacer widget is a simple layout tool used to create empty space between elements on a page.

It does not contain content or styling — its sole purpose is to control spacing and improve layout, readability, and visual flow.

Spacers are especially useful when you need precise control over distance between sections, widgets, or columns without relying on padding or margins alone.

What the Spacer Widget Is Used For

Use the Spacer widget when you want to:

• Add vertical space between sections or widgets
• Create horizontal spacing inside columns or layouts
• Fine-tune layout spacing without affecting content styles
• Improve readability and visual rhythm
• Adjust spacing responsively by visual control

Common examples:

• Adding breathing room between text and buttons
• Separating stacked sections
• Creating consistent spacing in grids or columns
• Adjusting layout balance on landing pages

Spacer Widget Behavior

The Spacer widget has no settings panel.

All adjustments are made directly on the canvas.

Resize Controls

You can resize the spacer by dragging it:

• Height (vertical spacing)

  Drag the top or bottom handle to increase or decrease vertical space.

• Width (horizontal spacing)

  Drag the side handles to adjust horizontal spacing inside a column or layout.

This gives you full visual control over spacing in both directions.

💡 Tip

The spacer automatically adapts to the layout it’s placed in (sections, columns, grids).

Design & UX Tips

Use spacers intentionally

Spacers should improve clarity and flow — not act as a workaround for poor structure.

Prefer structure first

Before adding spacers:

• Check section padding
• Check column spacing
• Use separators or background sections when appropriate

Spacers are best for fine-tuning, not structural fixes.

Keep spacing consistent

Use similar spacer heights for similar layout situations to maintain a clean, professional look.

Avoid overuse

Too many spacers can make a layout hard to maintain and inconsistent over time.

When to Use a Spacer

Use the Spacer widget when:

• You need precise spacing control
• Padding or margins aren’t enough
• You want a clean solution without visual elements
• You’re adjusting spacing inside complex layouts

When Not to Use a Spacer

You may want to avoid spacers if:

• Section padding already solves or can solve the problem
• The layout relies heavily on many stacked spacers
• A Separator or background section would communicate structure better

Summary

• The Spacer widget adds empty space only
• No settings — resize directly on the canvas
• Can be adjusted in both height and width
• Ideal for fine-tuning layout spacing
• Best used sparingly and consistently

Used thoughtfully, the Spacer widget helps you create balanced layouts, improve readability, and give your content the breathing room it needs without adding visual noise.