The Tabs Element

Tabs element

If you want to display more content in less space, Tabs provide a slick solution. The basic Tabs Element comes with default styling. Adding your own styling is easy and there are options for editing the Active, Hover and Static states of the table titles. You can even style tabs with custom CSS, but we’ll look at how to add custom code to your site in-depth in the next post in this series.

 

When we drag and drop the Tabs Element to the workspace it should look something like this:

tabs element website builder

We can change the name of the active tabs in the same way we would edit any text, by double or triple-clicking directly on the text. We can also edit the content of a tab using the same double or triple click method.

Adding a new Tab is a simple as clicking the ‘+’ icon.

And of course, as with any of the Elements in the Toolbox, we can further refine the styling of the Tab on the page. To move beyond the Default, create a pre-set Tab Style. In our new pre-set we can explore a number of options which will be outlined below.

Content Area Colours: Change the background colour of the content area of your Tab.

Border: Add a border to your content area.

Tab Label Typography: Just like with the Text Element you have control over Typeface, Weight/Style, Size and so on.

You can also add a Border to the Tab using the lower border switch.

tabs settings website builder

In Hover mode we can make some changes to animate the Tabs or make them pop a bit. The simplest way to do this is to alter the Border, Colour, Typography and Animate State Changes properties, press OK to save, and then observe the changes to the Tabs as you hover the mouse over them. There really are no hard and fast rules with this feature, just experiment and decide what is right for you and your website.

Using a similar method, we can also highlight the Active Tab. Click the Active Button and make some changes to the Border, Colour and other setting properties, press OK to save, and observe your changes. As with the Hover mode, you will need to experiment to find the styling that is best suited your website project.