Tabs

Let’s cover in this section all the fields that will let you customize the tabs and their content.

Next, we will show you how to add single tabs from their settings modal.

Content Tab > Tabs > Position

By default the tabs are located above the content area.

This field allows you to change the tabs position to the right, left or below the content area.

The options are: Top (default), Right, Bottom and Left.

This field comes with responsive options, meaning that you can have different positions on different devices.

Content Tab > Tabs > Direction

You can choose whether the tabs should be displayed horizontally or vertically.

Select the Row option display the tabs horizontally.

Select Column to display them vertically.

This field also comes with responsive options so you can be able to set different directions in different devices. We recommend that you follow a mobile-first approach.

This way, your tab module will look great in all devices.

Design Tab > Tabs > Background color

This field will allow you to set a custom background color that will be applied to all the tabs.

Design Tab > Tabs > Active Tab Background color

This field will allow you to set a custom background color to the active tab only. That is, to the tab that is showing the content.

Design Tab > Tabs > Alignment

This field controls how the tabs are horizontally aligned inside their container.

Design Tab > Tabs > Vertical Alignment

This field controls how the tabs are vertically aligned inside their container.

Design Tab > Tabs > Force Fullwidth

This will force the tabs to extend the full width of the container. This module field is responsive so you choose the devices where you can extend the tabs width.

Design Tab > Menu Items > Gap

This field will allow increase the distance between the tabs. Default is 0 (no space between tabs).

Design Tab > Tabs > Border fields

Here you can add custom borders to the tabs, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

Design Tab > Tabs > Tabs Padding

This responsive field will allow you to customize the tabs padding.

Design Tab > Tabs Text

These toggle fields will let you customize the tabs title and subtitle text style.

Here you will be able to change the font family, font weight, font style, text color, text size, letter spacing, line height and text shadow. These changes will be applied to all tabs.

DesignTab > Content > Offset

This responsive field will allow you to set the distance between the tabs and the content area. Default is 0px.

Design Tab > Content > Border fields

Here you can add custom borders to the content area, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

Design Tab > Content > Content Padding

This responsive field will allow you to play with the content area spacing.

Tab

You can create a new tab by clicking Add New Tab. A new modal called Tab Settings will appear where you will be able to customize the tab.

Each tab can contain a title and additionaly a subtitle.

Also, you can add an icon or an image to the tab.

Let’s cover now all the content and design modal fields so you can add content to the tab and style them.

Content Tab > Tab > Title

This is the title that will be displayed in the tab. Also, this title will be also displayed in the tabs list.

This field comes with responsive options.

Content Tab > Tab > Subtitle

This responsive field will allow you to also display a subtitle in the tab.

Content Tab > Tab > Image/Icon

You can choose here whether an image or icon should be displayed next to the tab title (and subtitle).

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Tab Image & Icon will appear in the design tab in order to style the image/icon.

Content Tab > Tab > Placement

This responsive field will allow you to choose whether the image or icon should be displayed. default is top (above the tab text).

Content Tab > Content > Content

You can display in the content area either custom content or a Divi Layout from your Divi Library.

If you select the Divi Layout option, a new select field will appear with the available Divi layouts.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we recommend that you don’t select a layout that includes a DonDivi Tabs module.

Content Tab > Content > Show On Hover

This field will allow you to show the tab content when hovering over the tab.

Design Tab > Tab > Text Alignment

This field controls how the tab text (title and subtitle) are horizontally aligned inside the tab.

Additionaly, you can individually align the title and the subtitle if needed. Likewise, you will be able to align the tab Image/Icon. In order to override the title and subtitle alignment, please go to the Custom CSS > Module Elements group, located in the Advanced tab, and enter your styles in the Tab Title and Tab Subtitle fields. In case you want to apply another horizontal alignment to the Image/Icon, go to the Tab Image & Icon group and use the Image/Icon Alignment field.

Design Tab > Tab > Text Vertical Alignment

This field controls how the tab text (title and subtitle) are vertically aligned inside the tab. Likewise, as commented above, you will be able to align the Image/Icon (if any) as well. In order to vertically align the tab Image/Icon, you can go to the Tab Image & Icon group and use the Image/Icon Vertical Alignment field.

Custom Content

If you chose to display custom content (default option), the following fields will appear in order to allow you to add and style the tab custom content.

Content Tab >  Content > Image/Icon

You can choose here whether an image or icon should be displayed in the content area.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content Image & Icon will appear in the design tab (which we will document later).

Content Tab > Content > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Content > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Content > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Content Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Content Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and 100% in case you are displaying an image.

Design Tab > Content Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Content Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Content Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Content Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Content Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of the grid item.

Animation

You will be able to add transition animations to the content area when changing the active tab.

In order to add a transition animation, we offer the DonDivi custom effects in this module.

Content Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the content when it appears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, the content that is appearing is a Divi layout and you have set a Divi animation in the Divi layout, then the Divi animation will run.

However, if you select a DonDivi effect, no Divi animation (if any) will run and the selected effect will be applied instead.

These are the available enter effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the content when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade (Default)

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Content Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.