Tabs
Display blocks in Tabbed layout
Overview
The Tabs Block Container helps you organize your content into horizontal tabs on a single page. Instead of stacking everything into one long, scroll-heavy layout, you can split related content into neat, clickable tabs. This makes it easier for users to navigate and quickly find the information they need.
How to Use the Tabs Block Container
1. Add the Tabs Container
To add the Tabs Block Container to your page:
- Click Add Block in the page editor to open the block panel.
- Go to the Containers section.
- Select Tabs from the available block options.
- A new tab container will appear on your page. Each tab will serve as its section for content.
- You can add as many tabs as needed by adjusting the settings panel.
2. Add Blocks to Tabs
Once you’ve added tabs:
- Open a tab by clicking on it in the settings panel or directly on the canvas.
- Click the Add Block button on the canvas to insert content into each tab.
- You can add any block to each tab, making it easy to organize your content.
Each tab can hold different types of information, keeping things organized and easy to navigate. Here’s how you might use them:
- Content Organization: Group large content sections into separate, manageable tabs for easier access.
- Data Display: Use tabs to show different views of the same data (e.g., filtered datasets or reports).
- Record Details: Organize complex records, like customer information, by grouping related fields into individual tabs.
3. Customize Your Tabs
You can customize both the appearance and behavior of your tabs using the settings options:
Tab Settings:
- Rename a Tab: Click on the tab label to rename it. Name your tabs based on their content (e.g., "Overview," "Details," "Reports").
- Add Icons: Customize your tabs by adding icons next to each label.
- Reorder Tabs: Drag and drop tabs to rearrange them in the desired order.
- Show Title and Subtitle: To provide context for the content inside, set a title and subtitle for the entire tab container.
Tab Style Settings:
- Tab Container Style: Adjust the background color and padding of the entire Tabs Block Container.
- Customize Tab Labels: You can modify the size, font, and colors of tab labels, including their active, hover, and inactive states.
- Title & Subtitle Customization: Style the tab container's title and subtitle to match your page's design.
4. Set Visibility Rules
You can control who sees your tabs by using visibility rules, allowing you to tailor content access to specific user groups:
Visibility for the Entire Tab Block:
- Select the Tab Container in the editor.
- Click on Visibility and define the rules. This will control access to the entire tab block, including all tabs and their content.
Visibility for Individual Tabs:
- Open the Tab Settings.
- Click on Tab Visibility and define rules for specific tabs. This allows certain tabs to be visible to select users while hiding others.
Visibility for Blocks Inside Tabs:
- Select a block within a tab.
- Go to Visibility Settings and define rules for the block. This will restrict access to certain blocks within a tab for different user groups.
5. Move Blocks In/Out of Tabs
You can easily move blocks in or out of the tab container without losing any of your existing settings:
- Hover over the block you want to move.
- Click on the Move to Container button.
- Select the Tabs Container and choose the tab you want to move the block into.
- Similarly, once the block is inside the tab, click the canvas Move out button to move it outside the tab container.
