Tab Element

About the Tab element

Tabs on websites were originally designed to resemble physical tabs on paper file folders. They provide an organized way to display and access information within a fixed section of the screen. With GemPages, you can easily create tabs on your webpage using the Tabs element. 

Follow these steps to add the Tab element to your page:

Step 1: From the GemPages Dashboard, open a template to edit. You can quickly find the Tab element on the left sidebar of the Editor, under the Interactive section. Drag & drop the element to any position you prefer.

Step 2: Drop the other elements such as Heading, Text block, Image, etc. inside the tab to create the content layout you wish.

Clicking on the Tab element, the configuration will be available on the left sidebar, which will be covered in the following sections.

Configure the Settings Tab

Item management

Click on the arrow icon and you will see the option to input the title of the tab. You can also control the number of tabs at this point. 

To add an additional tab: Simply click on the “Add more” option. 

To duplicate a tab: Hover over the desired slide and click on the duplicate icon. 

To remove a tab: Hover over the specific slide and click on the trash icon.

Layout

Select a tab layout of your preference to arrange the content as you wish. 

Tab header

At this point, you have the ability to fine-tune the typography of the tab header. Here are the available options:

• Styles: Select your desired style from the pre-defined options, which include 6 heading styles and 3 paragraph styles.
• Font: Choose the font you wish to use for the text. If you want to use a font that is not listed, you can refer to the provided guidance on how to add a custom font in Editor v7.
• Size: Adjust the font size by specifying a value in pixels.
• Color: Modify the color of the text to your preference.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text Transform: Transform the text in one of the following ways: 

• No transformation applied.
• Uppercase: Convert all text to uppercase.
• Lowercase: Convert all text to lowercase.
• Capitalize: Capitalize the first letter of each word.

Text Align: Select the desired positioning of the text within the tab header, including options such as left-aligned, centered, or right-aligned.

Full-width: Enable or disable this option to expand the tab header to span the entire width of your pages.

Width: Specify the preferred width of the tab header by inputting a value in pixels or percentages.

Align: Decide how the tabs should be positioned on your page, such as aligning them to the left, center, or right side.

States

You have the flexibility to determine the appearance of the tab layout based on different states: normal, hover, and when clicked for tab selection. Below are the customization options available to you:

Background Color: Customize the background of the tab header by either selecting a color from the provided palette or inputting a specific hex code.

Text Color: Tailor the color of the tab text to your preference by selecting a color from the provided palette or inputting a specific hex code.

Border: Enhance the tab header by adding a border. Choose the border color, thickness, and style to achieve the desired effect.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.