[V6] Tabs Element

What is the Tabs element?

Originally, the idea of tabs on websites was to mimic the physical tabs at the top of traditional paper file folders inside a file cabinet. This kind of design allows you to display a lot of information in one fixed section of screen real estate, divided by and accessed through different tabs.

In GemPages, you can design tabs on your page easily with the Tabs element. Let’s dive into the details!

Add the Tabs element onto your page

Step 1: Head over to the GemPages Dashboard, open your selected page by clicking on the “Edit” button, or simply create a new page.

Step 2: Open the Library and select the Elements tab.

Step 3: Search for “tabs” in the search box and click on the result.

Step 4: Hit the blue “Add Element” button to install the Tabs element. Exit the Library when finished.

Step 5: After that, the Tabs element is located on the left sidebar of the Editor, under the Stack section. Drag & drop it onto your preferred spot on the page.

The element’s configuration will be available on the left sidebar, which will be covered in the next sections.

Configure the Settings tab

The Settings tab is where you’ll find all the parameters to edit the layout and content of the tabs.

Item list

In this first section, you can add or remove tabs. To add more, click on the Duplicate icon of a tab. To remove one, click on the Trash icon of the selected tab, then confirm the action.

To change the Tab title, double click on it. For more styling options, click on each Tab (which itself is a Text Block element) on the main Editor to open its configurations on the left sidebar.

Tab Style

Choose a tab style from the two provided options: Default for a classic look, or Underline for an elegant look.

Tab Padding

Drag the two sliders to adjust the X and Y paddings of the tab’s label.

Border

In this section, you can adjust the border’s color and thickness.

You can pick a border color using the color palette or enter a hex color code. To tailor the border size (in pixels), drag the slider or enter a number in the mini box.

Active Tab

This section allows you to adjust the active tab – the one that is currently being viewed.

Tab Background: Pick a color from the color palette or enter a hex color code.

Text Color: Similar to Tab Background.

Default Tab: Enter a number in this field to set a default active tab when the page loads.

All tabs are indexed from left to right, with 1 being the first tab on the left.

E.g.: If you are looking to have the third tab from the left as the default tab, input the number 3.

Normal Tab

This section is for editing the inactive tabs.

Inactive Tab Background: Pick a color from the color palette or enter a hex color code.

Inactive Tab Text Color: Similar to Inactive Tab Background.

Alignment

Adjust the Tabs element’s alignment in relation to the current position as either Left, Centered, or Right.

Extra Class

If coding is second nature to you and you wish to customize the Tabs element even further, feel free to enter a class name in this field and refer to it in your CSS file.

Configure the Design tab

Before moving on to design the content inside the tabs, don’t forget to fine-tune the look and feel of your element using the Design tab. Check out this article for a deep dive into the functionalities of the Design tab.

Design the Tab’s content

Start dragging & dropping elements inside the tabs to create content. A few common elements you can put inside a tab are Row, Text Block, Heading, Image, etc.

Here’s an example of the final result of a Tabs element designed in GemPages: