The Timeline element in Cloud Sites is a content container designed to present information in a sequential format, either as a traditional timeline or a step-by-step guide. This element is ideal for showcasing processes, historical events, milestones, or instructional flows.
Adding the Timeline Element
To insert a timeline:
- Open the Add Elements Drawer from the left sidebar.
- Locate the Timeline element.
- Click, hold, and drag the element into the desired location on the page.
By default, the timeline includes two tabs, each representing a step or point in the sequence.
Building Content Within Tabs
Each tab contains a content area where any Brizy element can be added:
- Text
- Buttons
- Icons
- Columns
- Lines
- Headings
Content is built using the same drag-and-drop functionality available throughout the builder. To maintain consistency across tabs, it is recommended to fully design the first tab and then duplicate it. This ensures uniform formatting and saves time.
Tabs can be duplicated using the Duplicate option in the toolbar. Renaming tabs is done by selecting the tab label and typing the new name. Tabs can also be deleted individually.
Timeline Container Settings
The timeline container includes settings for:
- Padding and Margins
- Entrance Animations
- Duplicate and Delete Options
These settings apply to the entire bounding box of the timeline element.
Configuring Timeline Tabs
Each tab icon opens settings specific to that step:
- Width: Adjusts the content area width (e.g., 300–350 pixels).
- Padding: Controls spacing within the content area.
- Orientation: Choose between horizontal or vertical layout.
- Styles: Options include staggered content, top-aligned content, or hidden titles.
- Columns: Set the number of visible columns to control layout and scrolling behavior.
For example, if three tabs are present but only two columns are set, a scroll bar will appear. Increasing the column count to match the number of tabs will display all steps without scrolling.
Icon and Style Customization
Icons are managed on a tab-by-tab basis:
Change icon type, size, and background shape (circle, square, or custom).
Adjust spacing between icons and content.
- Apply consistent styling across all tabs or customize each individually.
The timeline line itself can be styled with:
- Color
- Thickness
- Shadow
- Border
Label Styling
Tab labels at the top of the timeline have independent styling options:
- Typography: Applies to all tab labels.
- Color: Controls text and background colors for normal, hover, and active states.
Responsive Design Considerations
Timelines can be challenging on smaller screens. On tablet and mobile devices, horizontal timelines may become compressed or difficult to navigate. To optimize for responsiveness:
- Preview the timeline on different devices.
- Adjust width settings to reduce content area size.
- Consider switching to a horizontal layout or deactivating the timeline on mobile if necessary.
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
