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 the gallery by the 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:

Adding a block with tabs

To add a block with tabs, open the blocks gallery and choose the 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 or alignment of your tabs:

Tip: proceed with customizing your block according to the instructions in the article Changing the design of a block.

Enabling the tabs mode in the collection

Some blocks in our gallery can contain a set of entirely interdependent elements, that are gathered in the collection. Each item in the collection keeps the same layout as others — if you delete an element from one item in the collection, it will be automatically deleted from every item.

The collection blocks can be re-structured into the tabs.

Tip: to learn more about the collections, check the article Collection items settings.

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:

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 the tab name, highlight it and add the needed 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.
Was this article helpful?
Thank you!