The Line element in Cloud Sites serves as a simple yet effective design tool for adding visual separation or decorative accents to a webpage. It can be used to divide sections, highlight content, or introduce stylistic flair.
Adding the Line Element
To insert a line:
- Open the Add Elements Drawer from the left sidebar.
- Select the Line element.
- Click, hold, and drag the line into the desired location on the page.
A placement indicator will appear, allowing precise positioning between elements.
Resizing and Adjusting Width
Once placed:
- Select the line to activate its resize handles on the left and right.
- Drag the handles to adjust the line’s width visually.
For more precise control:
- Open the Options Toolbar and select Settings.
- Adjust the width using percentage values for responsive design or switch to pixel-based measurements for fixed sizing.
Using percentages ensures the line adapts to different screen sizes, maintaining a consistent layout across devices.
Styling the Line Element
To customize the appearance:
- Navigate to the Style tab in the settings.
- Choose from various line types, including:
- Solid
- Dashed
- Dotted
- Double
- Decorative styles for added flair
Additional styling options include:
- Weight: Controls the thickness of the line.
- Amount: Adjusts the stretch or spacing.
- Height: Adds vertical dimension, especially useful for thicker design elements.
Lines can be aligned to the left, center, or right of the container. Positioning can be fine-tuned by dragging the element or adjusting its height to enhance visual separation.
Adding Text or Icons to Lines
The Line element also supports embedded content:
- Text: Add labels or headings directly within the line.
- Icons: Insert visual markers for branding or navigation.
To add these:
- Reduce the line’s height for better integration.
- Select the Text or Icon option from the settings.
- Customize the content, style, and alignment as needed.
This feature transforms a simple line into a functional and visually engaging component of the page.
**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. Also, in this video the word "fonts" is used instead of "icons." The documentation is correct, but the video **
Updated
