Tabs

Create distinct 'screens' of information and creative assets in a single unit, directing users to the appropriate screen through the use of ‘tabbed like’ navigation.

This article will walk you through adding a tab set to your ad unit. 

HubSpot Video

Resources:

Explore our Ad Gallery for examples of this component

 

In this article, you will learn:

How to Add the Tabs Component

How to Edit Tab Labels

How to Add Content to your Tabs

How to edit the Layout of your tabbed unit

How to edit the Design of your tabbed unit

How to to add the Tabs component

  1. Once you've created your ad, select Tabs from the Components drop down menu.  The Tabs Component can be added to any type of Format.



  2. You'll now see a tab set on your ad canvas. By default, your tab set will have three tabs. You can add additional tabs by clicking the + icon on the Tabs Component layer.

    KB-Tabs-Canvas

    KB-Tabs-Add

 

Editing Tab Labels

To edit tab labels, double click on the label text. Enter the desired tab label.

KB-Tabs-Edit-Labels

Adding Tab Content

Select the tab you'd like to add content to. Once active, you can add text, components, animations etc. like you normally would on any ad canvas. To add content to another tab, select that tab and add your content. 

 

How to modify the Layout of your Tabs

The Tabs component Layout properties are explained below:

Click the Layout tab at the top of the Tabs properties menu.


KB-Tabs-Layout

 

Tabs  
Position Where your tabs will be positioned. Choose from Bottom or Top placement.
Width

The width of the tab.

Auto: By default, your tab width is set to auto, with tab width automatically set based on the number of tabs and the overall width of your tab set. 

Fit To Label: Tabs will be sized to text label.

Custom: Select Custom to set tab size manually (px).

Height

The height of the tab.

Auto: By default, your tab height is set to auto, with tab height automatically set based on the overall dimensions of your tab set. 

Custom: Select Custom to set tab size manually (px).

Spacing The space (in pixels) between your tabs.
Radius The corner radius of your tabs. 
Content Content refers to the area below your tabs. 
Fill Color Set the color of your content background.
Opacity Set the opacity of your background.

 

How to modify the Design of your Tabs

The Tabs component Design properties are explained below:

Click the Design tab at the top of the Tabs properties menu.


KB-Tabs-Design

 

Tab Labels  
Font Set the font of your tab labels.
Size Set the font size of your tab labels.
Tab States Tab states allow you to set different styles for active, normal and hover states.
Active Tab that is currently selected.
Active - Border Sets the color and size of the active tab border.
Active - Text Choose the color and style of the active tab label text.
Active - Fill Set active tab fill color and opacity.
Normal Inactive tab state.
Normal - Border Sets the color and size of the normal tab border.
Normal - Text Choose the color and style of the normal tab label text.
Normal - Fill Set normal tab fill color and opacity.
Hover Tab state on hover over.
Hover - Border Sets the color and size of the hover tab border.
Hover - Text Choose the color and style of the hover label text.
Hover - Fill Set hover tab fill color and opacity.