The Tabs element in Cloud Websites is a versatile tool for organizing content into categorized sections, allowing users to navigate between related information without leaving the page. This is especially useful for product features, FAQs, service breakdowns, or any content that benefits from structured segmentation.
Adding the Tabs Element
To insert tabs:
- Open the Add Elements Drawer from the left sidebar.
- Locate the Tabs element.
- Click, hold, and drag the element into the desired location on the page.
By default, two tabs are generated, but additional tabs can be added as needed.
Customizing Tab Content
Each tab contains a content area that functions like a container block. Within this area, any element can be added, including:
- Text
- Buttons
- Columns
- Images
The default tab may include placeholder elements such as icons or buttons, which can be removed to create a blank canvas for custom content.
Accessing Tab Settings
Tab settings are available via the Options Toolbar in the top-right corner of the tab container. These settings include:
- Padding and Margins
- Duplicate and Delete
- Background, Border, and Shadow Styling
- Hover Effects
Managing Individual Tabs
To customize individual tabs:
- Click on a tab label to activate its settings.
- Use the Options Toolbar on the far left to adjust:
- Orientation (horizontal or vertical)
- Tab styles (detached label, underline, etc.)
- Activation method (click or hover)
- Spacing between tab labels
Tabs can be renamed by highlighting the label text and entering a new name. Tabs can also be duplicated, which clones both the label and its content. This is useful when creating multiple tabs with similar layouts—design one tab fully, then duplicate and modify the content as needed.
Tabs can be reordered using arrow keys in the toolbar to move them left or right.
Styling Tabs
Styling options include:
- Typography for tab labels
- Background and text colors
- Borders and shadows
- Hover and active state styling
Icons can be added to individual tabs and positioned at the top, right, or bottom of the label. Size and spacing between the icon and label can also be adjusted.
Orientation Options
Tabs can be displayed:
- Horizontally (default and most common)
- Vertically, with tabs aligned to the left or right
When switching to vertical orientation, the tab style icon changes to reflect the new layout. All styling and icon options remain available in vertical mode.
Responsive Design Considerations
Tabs can occupy significant space, so it is important to check their appearance on tablet and mobile devices. On smaller screens, tabs typically collapse into an accordion-style layout for better usability. Adjustments may be needed to ensure content remains accessible and visually balanced across all devices.
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
