The Spacer element in Cloud Sites is a versatile tool designed to add vertical space between elements on a webpage. It helps improve visual structure, readability, and overall design flow by creating separation between components such as text, buttons, images, and other content blocks.
Adding a Spacer
To insert a spacer:
- Open the Elements Drawer from the left sidebar.
- Select the Spacer element.
- Click, hold, and drag the spacer into the desired location—typically between two elements where a visual gap is needed.
A gray line will appear between elements, indicating where the spacer can be placed.
Adjusting Spacer Height
Once the spacer is added:
- Select the spacer to activate its controls.
- Drag the handle at the bottom to manually adjust its height.
For precise control:
- Open the Settings Panel for the spacer.
- Enter a specific height value.
- Choose from units such as pixels (px), viewport height (vh), or em (m-value) depending on the design requirements.
Responsive Design Considerations
Spacers can be customized for different screen sizes:
- In tablet and mobile views, select the spacer and open its settings.
- Adjust the height independently for each device type to ensure optimal spacing and layout across all screen sizes.
This flexibility ensures that the design remains clean and user-friendly, regardless of the device being used to view the site.
**In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.**
Updated
