Tabs

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

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.

 

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.

 

 

Editing Tab Labels

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

 

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. 

 

Layout

Tabs

Under the properties for Tab Set, you'll see options for customizing the layout of your 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

 

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

Border: Sets the color and size of the active tab border

Text: Choose the color and style of the active tab label text

Fill: Set active tab fill color and opacity

 

Normal: Inactive tab state

Border: Sets the color and size of the normal tab border

Text: Choose the color and style of the tab label text

Fill: Set normal tab fill color and opacity

 

Hover: Tab state on hover over

Border: Sets the color and size of the hover tab border

Text: Choose the color and style of the label text

Fill: Set hover tab fill color and opacity