Adding blocks with tabs
Tabs are useful for organizing chunks of related information into a single block, thereby freeing space on a page. With this feature, you can structure the pictures in a gallery by general topics, organize your company's products and services, and much more.
Weblium editor allows you to add a pre-made block with tabs or enable tabs mode in some of the existing blocks.
Here's a good example of block with tabs:
To add a block with tabs, open the blocks gallery and choose a suitable block with tabs:
Hover over the content of the block and click on the "gear" to access the Collection settings. In the pop-up window, navigate to the Modes tab and choose the type, quantity, and alignment of your tabs:
Tip: Proceed with customizing your block according to the instructions in the Changing the design of a block article.
Some blocks in our gallery can contain a set of entirely interdependent elements gathered in a collection. Each item in a collection keeps the same layout as others — if you delete an element from one item in a collection, it will be automatically deleted from every item.
The collection blocks can be re-structured into tabs.
Tip: To learn more about the collections, check the Collection items settings article.
For that, hover over the collection item and click on the "gear" in the top right corner to access its settings:
In the pop-up window, navigate to the Modes tab and enable the Tabs option:
Here you can change the type, quantity or alignment of your tabs, and also set the accent color:
Note: The maximum number of tabs is 8. The acceptable size of the icons in the tab name is 40x40 px.
To rename a tab, click on its name, highlight it and add a new one:
Tip: You can switch between tabs just by clicking on the tab name.
To access the tabs settings, hover over the collection element and click on three stripes icon:
In the new window, you can drag the tabs to change their order, duplicate, delete or hide them:
To move elements within one tab, hover over the element and drag it to the desired position:
Don't forget to publish your site for the changes to appear live.
Weblium editor allows you to add a pre-made block with tabs or enable tabs mode in some of the existing blocks.
Here's a good example of block with tabs:
Adding a block with tabs
To add a block with tabs, open the blocks gallery and choose a suitable block with tabs:
Hover over the content of the block and click on the "gear" to access the Collection settings. In the pop-up window, navigate to the Modes tab and choose the type, quantity, and alignment of your tabs:
Tip: Proceed with customizing your block according to the instructions in the Changing the design of a block article.
Enabling the tabs mode in a collection
Some blocks in our gallery can contain a set of entirely interdependent elements gathered in a collection. Each item in a collection keeps the same layout as others — if you delete an element from one item in a collection, it will be automatically deleted from every item.
The collection blocks can be re-structured into tabs.
Tip: To learn more about the collections, check the Collection items settings article.
For that, hover over the collection item and click on the "gear" in the top right corner to access its settings:
In the pop-up window, navigate to the Modes tab and enable the Tabs option:
Here you can change the type, quantity or alignment of your tabs, and also set the accent color:
Note: The maximum number of tabs is 8. The acceptable size of the icons in the tab name is 40x40 px.
Managing tabs and their content
To rename a tab, click on its name, highlight it and add a new one:
Tip: You can switch between tabs just by clicking on the tab name.
To access the tabs settings, hover over the collection element and click on three stripes icon:
In the new window, you can drag the tabs to change their order, duplicate, delete or hide them:
To move elements within one tab, hover over the element and drag it to the desired position:
Don't forget to publish your site for the changes to appear live.
Updated on: 12/05/2023
Thank you!