Creating any type of tab is quick and easy with DiviGear’s Tab Modules. This module offers lots of pro features and tons of design opportunities. Let’s explore all the features this module has-
Before we jump into the brief discussion, let me first familiarize you with some terms.
Child Item
Each time you create/add a new item, it will be added as a child item. You will have one tab for the entire child item. This is how you can create an unlimited number of tabs. One more thing, the design option inside the child item will overwrite the design given on the parent item.
Parent Item
The child items or tabs are wrapped with the parent item or module. Therefore, design options or functions applied here will be applied to all child items.
Here we will explore the child item first and then the parent module.
NOTE: See How to Add a New Tab here in this article.
How to add a new tab in the Advanced Tabs Module?
Child Item of Advanced Tabs Module
Child Item Content Tab
This Content Tab primarily focuses on content, such as Tab Title, Body Content, Image, Icon, buttons, etc.
Content
Here is the list of things you will find inside the content-
- Tab Label: This is where you can place the navigation tab label. Keep it blank if you want to use only an image or Icon.
- Tab Description: If required, you can add a tab description here. This will show immediately after the tab label.
- Content-Type: Here, you can choose your content type. It is the content area by default, but you can also select any library item. Selecting a library item will display a list of items in your Divi library, and you can select any of them.
- Body: Here is the content area for this particular tab. This is a regular text area. You can use regular text, a heading, and more.
Nav Icon Settings
Use Icon: If you want this to use Icon, you can turn this on and select Icon from the icon list. You also have the option of choosing icon color and size. You can also turn Off the icon option, which will show you an additional “Tab Image” feature.
You can use an image instead of an icon here if you don’t want to keep this blank.
Image
This image option is for the content area. You will find a field for adding an image and, afterward, a field for the ALT text for the image.
Image Placement: Depending on the device, an image can be placed. In addition, you can select different positions for different devices.
By default, it is on top of your body content. You can choose the bottom, left, and right.
If you select left or right, a couple of more features will be displayed:
- Image Container width: Here, you can select the width of your image container. By default, it’s 50%, and the other 50% is for your content.
- Vertical Alignment of Image and Content: If you would like to change the vertical alignment of your image and content, then here is the option for you.
Button
Each child item can have a button. The button text and URL options are available here.
Text Area Background
Here you can set the text area background color or images. Color can be solid or gradient.
Background
This background is applied to the entire module.
Admin Label
Admin Label of the advanced Divi tabs module allows you to modify the item name as you want. By default, the tab label will be your admin label.
Child Item Design Tab
You will have the design option for all the elements we set in the content tab.
Nav Text Styles
Here you will find different styling options for the title and description. In addition, you will find typography options, colors, sizing, etc., in both inner tabs.
Image Styles
Including regular features like alignment, rounded corners, border styles, and shadow, as well as image Z-index, Image Width, and color filters here.
Body
All the text styling options for body text are here.
Heading Text
You would find styling options here if you used any Heading Tag (H1 – H6).
Button
Here is the button styler with all the necessary options like alignment, color, margin/padding, typography, etc.
Text Area Settings
This is a new area, but the features inside are very familiar. For example, from here, you can set rounder corners, borders, and shadows for your Text Area.
Sizing
Here you will find all the standard sizing options for selected child items.
Spacing
Under the spacing option, you will have an image wrapper, content wrapper, and regular margin padding for the selected child item.
Border, Box Shadow & Filters
Those are the regular features available in the Divi modules, and they work similarly in all modules.
Child Item Advanced Tab
Features like Custom CSS, conditions, visibility, transitions, positions and scroll effects are available here.
NOTE: All the features and effects you get here apply individually to each child item of the advanced tabs module.
