How to Use Spacers for Better Page Layout

Spacers are essential for creating clean, structured layouts by adding vertical space between elements. They help improve readability and prevent elements from appearing too crowded.

1. Adding a Spacer Element

1. Open the Elements Panel on the left.
2. Under Layout, find the Spacer Element.
3. Click, hold, and drag it to the desired position between two elements.

2. Adjusting the Spacer Size

Manual Resizing

• Click on the spacer and drag the bottom handle up or down to adjust its height.

Precise Sizing with Settings

• Select the Spacer and go to the Settings Panel on the left.
• Enter a specific height value in:
• Pixels (px) – Fixed spacing.
• Viewport Height (vh) – Responsive spacing based on screen height.
• Em (em) – Relative spacing based on font size.

3. Optimizing Spacing for Mobile & Tablet

• Spacing that looks good on desktop might be too large or small on mobile.
• Select the Spacer and adjust its height separately for:
• Tablet view
• Mobile view
• This ensures a consistent, well-spaced layout across all devices.

4. Why Use Spacers?

Better Readability – Prevents text and elements from feeling cramped.

Balanced Layouts – Creates even spacing between sections.

Flexible Design – Allows precise control over element positioning.

By using spacers correctly, you can ensure a polished and professional web design that is both visually appealing and user-friendly.