What is the Tab 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 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.
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.
Choose a tab style from the two provided options: Default for a classic look, or Underline for an elegant look.
Drag the two sliders to adjust the X and Y paddings of the tab’s label.
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.
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.
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.
Adjust the Tabs element’s alignment in relation to the current position as either Left, Centered, or Right.
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
Here’s an example of the final result of a Tabs element designed in GemPages: