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.

SiteCliq 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

1. To add a block with tabs, open the blocks gallery and choose a suitable block with tabs:

2. 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 article Changing the design of a block.

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 article Collection items settings.

1. For that, hover over the collection item and click on the "gear" in the top right corner to access its settings:

2. In the pop-up window, navigate to the Modes tab and enable the Tabs option:

3. 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

1. 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.

2. To access the tabs settings, hover over the collection element and click on three stripes icon:

3. In the new window, you can drag the tabs to change their order, duplicate, delete or hide them:

4. 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.

• Related Articles

• Global Blocks — Header and Footer

  Global header and footer allow you to create convenient site navigation, add your logo, social networks just once, but apply the settings across all site pages. Global header and footer All global blocks are marked with a yellow icon in the top right ...

• Adding Elements

  Most blocks in our editor are fully customizable. Therefore, you can enrich the look of your blocks by adding new elements to them — for example, icons, dividers, lists, etc. Tip: see the article Adding a custom block to create your block from ...

• Adding Google Maps

  Adding Google Maps to your site will benefit both you and your customers, providing your visitors with a detailed visual guide on how to find your company. Adding Google Maps 1. Firstly, add a block which contains a map from the Contact tab in our ...

• Adding a Shape Divider

  If you've ever thought your block lacks something eye-catching or just wanted to divide blocks in a cool way, you can try shape dividers. They are stylish dividers of the blocks that you can apply to any of your site. Shape dividers allow you to make ...

• Adding a Countdown

  A countdown block serves for displaying backward counting to indicate the time remaining before an event that is scheduled to occur. Use countdown to announce the discount period or special offer, estimate the time left before the launch of a new ...