Before designing any content on a Cloud Sites page, it is essential to begin by adding a block. Once a block is in place, the next step is to establish the structure of the page using container elements—primarily columns and rows.
Understanding Container Elements
Brizy provides two main container elements:
- Columns: Used to divide a block into vertical sections.
- Rows: Used to group elements horizontally across the full width of the container.
These elements help organize content and create visually appealing layouts.
Adding and Managing Columns
To add columns:
- Navigate to the Add Elements panel on the left sidebar
(the blue plus sign icon at the top).
Under Grid Elements, select Column.
- Drag and drop the column element onto any area of the page marked by a thick gray line.
By default, two columns are added. To modify them:
- Use the Options Toolbar in the top-right corner of each column.
- Click Add New Column to increase the number of columns (up to six per row).
- Use the Plus (+) icon within a column to add content elements.
- Columns can be nested within other columns, indicated by pink bounding boxes.
To duplicate a column with its content:
- Select Duplicate from the column’s settings.
To rearrange columns:
- Use the Arrow Keys in the options toolbar to move columns left or right.
To delete a column:
- Use the Delete option in the toolbar or right-click the column and select Delete.
Styling Columns
Columns can be customized with various design options:
- Backgrounds: Add images, videos, maps, or solid colors.
- Filters and Effects: Apply shadows, borders, and hover effects.
- Links: Link columns to URLs, other blocks, pop-ups, or downloadable files.
- Width and Height: Adjust width using percentage values or drag blue handle bars directly on the page. Height can be set to auto or customized in pixels.
- Content Alignment: Align content to the top, center, bottom, or scatter.
- Styling Options: Apply padding, margins, and corner radius for rounded edges.
Responsive Design with Columns
Cloud Sites column system is responsive by default:
- On tablet view, columns remain side-by-side but can be adjusted using the handlebar to create new lines.
- Column widths can be set manually or adjusted by dragging.
- On mobile view, columns stack vertically for better readability. However, columns can be resized and aligned side-by-side if needed.
Columns can also be reordered using the Reorder Buttons in the options toolbar, allowing for flexible layout adjustments across devices.
Using Rows for Layout
Rows function similarly to columns but with key differences:
- Rows span the entire container width and cannot be placed side-by-side.
- To add a row, drag the Row element from the Add Elements panel.
- Rows are identified by a gray icon in the top-left corner when hovered over.
Rows support the same customization options as columns:
- Backgrounds, colors, links, width and height settings.
- Styling effects such as padding, margins, and borders.
- Rows can be duplicated and moved to different areas of the page for reuse.
Best Practices
- Use columns for flexible, multi-section layouts.
- Use rows when grouping multiple elements that need to span the full width.
- Always check responsive views (tablet and mobile) to ensure optimal design across devices.
- Utilize nesting and duplication to streamline layout creation and maintain consistency.
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
