Thrive Knowledge Base

How to Use the Tabs Element

The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.

The “Tabs” element can help you organize your content into tabs, allowing you to place any kind of element you need inside as many tabs as you need. 

This article will guide you through the process of adding the element, customizing it and understanding how to use its options.

Add the Element

In order to add the element to your ​page, click on the plus sign from the right sidebar:

This will open a list of all the Thrive Architect elements. Look for the “Tabs” one, or search for it in the search bar:

Drag and drop it anywhere on your ​page, depending on where you want the element to show.

Add Content to The Tabs

Once you have placed it, you can start adding content to the tabs. The way to do that is to go back to the element list (by clicking on the plus sign from the right sidebar), choose the element that you want to place in the tabs and drag ​& drop it inside the tabs:

As an example, I will place a "Text" element as well as an “Image” element in the first tab. I will drag and drop both ​elements inside the tab and the result will look like this:

Keep in mind that in the case of these two elements, you also have to add a specific image and text to have actual content in the tab.

You can add various elements from the list of elements, based on what you want the content of the tabs to be. Each element you add in your editor has its own options. If you need to know more about them, you can find information about various elements in our Knowledge Base.

When you add content to one tab, it will not be copied to the other ones.

Once you’ve added and customized the content that you want, you can move on to the other tabs and do the same.

You can also edit the tab text, if you want to change ​its default text (“First Tab”, “Second Tab”, etc.) into something that suits the page better. To do that, simply click on the text and customize it as you please:

Use the Main Options

In order to see the element's options, simply click on it. You will notice the “Main Options” section will open on the left sidebar:

Tabs Layout

You can change the layout of the tabs and position them vertically or horizontally. To do that, click on the field next to the “Tabs layout” option:

This will open a drop down menu where you can choose the layout that best suits your page:

Default Tab

This is where you can choose which tab will be open when someone accesses the page. To change the default tab, click on the field next to the option:

This will open a drop down menu which contains your current tabs, so you can set whichever you prefer as your default tab:

Tabs

​The following option is the “Tabs” option. Next to it, there is an “Add New” button. Click on it in order to add more tabs to your element:

The new tabs will be visible under the “Tabs” section in the "Main Options" section, as well as next to the old tabs, in the editor:

If you want to change their order, this can be done by grabbing the items from the dotted left side and drag & dropping them in the order that best suits your needs:

If you do not want to keep a tab anymore, you can easily delete it using the trash can icon next to it: 

You can also delete a tab by selecting it and clicking on the trash can icon that will appear in the corner of the element:

Tabs Width

You can also change the width of the tabs by dragging the slider under the option or by manually entering a value in the field next to the slider:

Select Which Tabs to Edit

You can change the background color and the borders of the tabs. In order to do that, you first have to select which tabs to edit, since the tab that is open (active tab) will have a different look from the inactive ones. To choose which tabs to edit, click on the field under the “Select which tabs to edit” option:

A drop down menu will open, where you have to choose if you want to edit the active tabs or the inactive ones:

Active Tabs

We will take a look at the “Active Tabs” first. The active tab represents the one that is selected.

  • Background

In order to change the background color, click on the field next to the “Background” option:

The color pop-up will open. To change the color, you can either choose one manually using the color picker, or enter a HEX/RGB color code in the field:

Once you’re done, click on “Apply”:

  • Borders​​

Next, you can customize the borders. Do that by clicking on the field next to the “Border” option:

Choose the color just like in the case of the background color, and click on “Apply” once you’ve decided on one:

Advanced

There is also an “Advanced” option available for the active tabs. Click on the down arrow next to the option in order to open it:

This will open another background and borders section, where you can choose the color of the background and the borders of the content inside tabs:

Inactive Tabs

Now that we’ve applied some modifications to the “Active Tabs”, we can move on to the “Inactive” ones. For now, the tabs look like this:

Go back to the “Select which tabs to edit” option, open the drop down menu by clicking on the field and choose “Inactive Tabs”:

  • Background

Choose suitable colors for ​the background, just as in the case of the active tabs. Apply the changes:

  • Borders

Just as in the case of the active tabs, you can change the border colors of the tabs using the color picker that appears if you click on the box with the color next to the option, as shown above.

After changing the background and border colors of the "Inactive Tabs", they look like this:

General Options

Besides the "Main Options", you have a few more option sections available in the left sidebar. For example, you can customize the layout & position of the tabs, as well as the borders & cornersshadows and so on. We have dedicated articles for each of the sections in our knowledge base.

One of the most common used options is the “Typography” one:

You can change the default font, color, alignment, etc. from here. You can also customize the font size, line height and letter spacing.

If you need more information about the general options, check out our Knowledge Base articles about it.

This concludes the article about how to use the “Tabs” element. If you found it useful, don’t forget to rate us with a smile below :)

>