Getting started

The divi default tab module has several limitations that stuck designers in some points. As a solution, the Diviflash approaches with an extended version of the divi tabs module. The advanced divi tabs module consists of various content areas & modern features that keep no restrictions for a designer, such as a child item, tab setting, nav & content container background, nav container & content setting, nav item, and nav item active, and so on. Today, we will have a profound demonstration of all the features & methods. But first, we should achieve proper knowledge about three essential elements, the child item, nav item & content area.

Child Item
The Add New Item is responsible for creating a child item. And a child item consists of a nav item.

Nav Item
The Nav item is a short form of Navigation Item that works like a menu bar without loading. Clicking over a nav item brings up a content area.

Content Area
The Content Area of a nav item allows you to show broad information in a concise area by adding body text, images & buttons.

Child Item

The Add New Item of the advanced divi tabs helps create several Child Items depending on the design intentions. Under the child items, you can apply the title, description & icon on the nav item and a body text, image & button in the content area. However, placing a shortcode of any design (section, row & module) in the content area is the most attractive attribute of the child item. Therefore, before jumping into the global features, let’s get to know the child item first. The structure of the child item features is placed upon three categories,

+ Content Option
+ Design Option
+ Advanced Option

Child Item Content Tab

The content tab mainly focuses on the first step of fabricating a divi tabs child item. It helps implement the nav title, description & icon, content area body text, image & button. An explanation of all these features of the content tab has been given below.

Content

The content attribute is all about putting the title, description & body text in the child item.

Nav Icon Setting

The Nav Icon Setting lets the designer add an icon for the nav item. Usually, the nav icon shows a virtual connection between the nave item and the content area of the child item. However, this feature is also responsible for defining the icon color & size.

Image

The image feature ensures the image placement to the content area of the child item along with a few responsive settings. As a designer, you can determine the image alter-text & placement according to various devices, the desktop, tablet & Mobile.

Button

You can give a button custom text & URL under the button feature of the child item content tab. Further, you can order to open the URL in a new tab or an existing window.

Text Area Background

The text area background setting indicates the content body text background of the child item. Under this feature, you can change the body text background by providing new colors, gradients & images.

Background

The background features of the child Items Content tab have multiple attributes to apply for a better layout view. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire item.

Admin Label

Admin Label of advanced divi tabs module provides the opportunity to modify the item name as you wanted. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.

Child Item Design Tab

Several components were applied in the content tab of the child item, and now it’s time to decorate each ingredient with the help of the Design tab. This tab contains several supportive features like the nav item text, image style, body, heading text, button, sizing, and suchlike. So, let’s start with a detailed illustration of all these features.

Nav Item Text

The Nav Item Text feature authorizes a designer to modify the title & description of the nav item. This attribute changes the title text font-weight, style, color & alignment, text size, letter spacing & line-height, and various text-shadow effects. Whereas every bit of customizing settings, you get for the title, also available for the description.

Image Style

Image style is one of the core features of the child item design tab dedicated to bestow the image an alluring look. The image style feature brings a few advanced settings, the Z-index, max-width, border styling, filter effects. In detail, you are allowed to define the image Z-order value, max-width, alignment with a corner rounding effect. Moreover, the image border style, width & color can be modified alongside different box-shadow effects. Last but not least, the image filter lets the designer put effects like the hue, saturation, brightness, contrast, invert, sepia, opacity, blur, and more to the image.

Body

The body settings were invented specially for the embellishment of the body text. Transforming the body text into an engaging look by changing its font style, weight & alignment is super easy under this feature. Also, you can give an alternative text color, size, letter spacing & line-height over a few text-shadow effects. Remember, if you apply any link, quote, bulleted, or numbered list in the body text, you can decorate each of them separately.

Heading Text

The heading tag can be used In the body text of the content area if required. Here the advanced divi tabs module brings the heading text feature to make the particular heading stylish. This attribute allows you to change the heading text style, weight, color & alignment, text size, letter spacing & line-height alongside text-shadow effects for the specific heading tag.

Button

The Button attribute of the child item design tab is the most attractive feature for the advanced divi tabs module. This option authorizes you to modify the button alignment, background color, font color, width & style. Furthermore, the button text alignment, color, size, letter spacing & line-height can get adorned by various text-shadow effects under the button setting. This setting is well organized to design the button border style, width & color alongside corner rounded & box-shadow effects. Nevertheless, you can apply the margin & padding in all directions of the button layout.

Sizing

As a designer, you would love to control the child item alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your child container’s width and height. In addition, you can set a min or max-height & width of the item.

Spacing

The spacing feature allows designers to apply the wrapper margin & padding for the content & image. Also, the general margin & padding option is available here. So, implement a proper gap between your ingredients and make a stand-out Tabs module.

Border

The Border feature of the child item design tab can provide a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.

Filters

The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the child item of the divi tabs module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your module. So, increase or decrease the value of these effects as you want them to your design.

Child Item Advanced Tab

All you want to achieve is possible under the Content and Design tab, so take advantage as much as you can. However, the Child Item Advanced tab has an innovative intention to create something extraordinary for items. Here, designers can precisely play with each element added to the item by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.

Note Down: All the features and effects you get here apply individually to each child item of the advanced divi tabs module.

Global Features of Advanced Divi Tabs Module

So, it’s time to find out the customizing procedure of the global features in a detailed demonstration. One thing about global features should be in your concern that they impact the entire module at once. like any other divi module, the structure of the divi advanced tab global features is established into three categories,
+ Content Option
+ Design Option
+ Advanced Option

Advanced Divi Tabs Module Content Tab

The advanced divi tabs module’s content tab contains a few primary and inevitable features. These attributes work to improve several basic instincts of module ingredients. Modifying the tab revealing animation, nav container background & content area background are the most crucial task of the content tab. Achieving these goals demand the presence of several features which are already imported here. Without any further discussion, let’s learn these features first.

Tab Settings

The Tab settings is an alluring feature introduced for applying different revealing animation effects for the tab content area. Also, the animation duration is controlled under this feature.

Nav Container Background

The name of this feature represents its customizing process, doesn’t it? The nav container background changes the entire nav item container background by implementing new color, gradient color & image. Remember, if you want to apply the image as background, the color option goes away.

Content Container Background

The content container background lets you decorate the entire tab content area background with a color, gradient color & image.

Background

The background features of the Content tab have multiple attributes to apply for a better layout view. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire module.

Admin Label

Admin Label of advanced divi tabs module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Advanced Divi Tabs Module Design Tab

The advanced divi tabs module integrates all the features deployed for the decoration of each ingredient. So here is the place for a designer to prove their expertise level by playing a range of features. The nav content & content area setting, nav item, nav item active, nav text style, nav item text Active, Nav Active Arrow, heading text, & custom spacing are the most notable features. It sounds like a massive list of features and customizing processes, right? But all the attributes are super easy to conduct.

Nav Container Setting

The “Nav Container Settings” is one of the core features of the design tab deployed for the embellishment of the nav item. This feature provides the authorization to apply several effects like the nav sticky, width control, nav placement, nav item alignment, and so on. Turning on the Sticky Nav attribute emphasize the nav item to stick in the wireframe while scrolling. And activating the Use Nav Width Control setting allows the designer to control the entire nav item container. Now, it’s time to fix the position of the nav item in the desktop wireframe; the Nav Placement Desktop option is here to set the nav container in one of the directions between top, bottom, left & right. Nevertheless, the Nav container setting defines the nav container border style, width & color along with corner rounding and box-shadow effects.

Content Area Setting

The “Nav Content Area Settings” is imported into the advanced divi tabs to decorate the module content area. Under this feature, you can change the vertical alignment of the content text to the start, center, or endpoint. Moreover, the border style, width & color of the content area can be modified under this attribute. Finally, achieving corner rounding & box-shadow effect is just a matter of a click for you with the content area settings.

Nav Item

The nav item feature of the design tab proceeds to decorate the entire nav item by applying several changes to the ingredients. For instance, this setting allows you to change the whole background of the nav item. Also, the nav icon color, size, placement, & alignment can achieve a decorative look under the nav item feature. Not only that, here you are authorized to modify the nav item container border style, width & color over a corner rounding, and box-shadow effect.

Nav Item Active

The nav item active feature is responsible for embellishing a particular nab item that got activated over clicking. Under this setting, you receive every design feature that is available in the general Nav item setting. So, you get yourself an option to provide a distinct look to the active nav item.

Nav Item Text

Nav item text is a feature that focuses on beautifying every item text of the entire nab container. This customizing setting of the advanced divi tabs module changes the font style, weight, color & alignment of the nav item title & description text. Moreover, the text size, letter spacing & line-height of the title & description text can be modified along with text-shadow effects.

Nav Item Text Active

In the Nav item text active settings, you receive every designing feature available in the general Nav item text. But there is only one difference between these features; the Nav item text active setting only applied for the active nav item text during the Nav item text achievable for the entire nav item text.

Nav Active Arrow

Activating the Nav active arrow feature brings an arrow pointing to the content area of the active nav item. However, you also can play with the color, size & alignment of the Nav Active Arrow under this setting.

Body

The “Body Settings” is invented specially for the embellishment of the body text. Transforming the body text into an engaging look by changing its font style, weight & alignment is super easy under this feature. Also, you can give an alternative text color, size, letter spacing & line-height over a few text-shadow effects. Remember, if you apply any link, quote, bulleted, or numbered list in the body text, you can decorate each of them separately here.

Heading Text

The heading tag can be applied In the body text of the content area if required. Here the advanced divi tabs module brings the heading text feature to make the particular heading stylish. This attribute allows you to change the heading text style, weight, color & alignment, text size, letter spacing & line-height alongside text-shadow effects for the specific heading tag.

Button

The Button attribute of the advanced divi tabs module’s design tab is the most attractive feature. This option authorizes you to modify the button alignment, background color, font color, width & style. Furthermore, the button text alignment, color, size, letter spacing & line height can get adorned by various text-shadow effects under the button setting. This setting is well organized to design the button border style, width & color alongside corner rounded & box-shadow effects. Nevertheless, you can apply the margin & padding in all directions of the button layout.

Custom Spacing

Custom spacing is considered a prominent feature of the advanced divi tabs module. If you go further down to this setting, you will discover two different categories of customization features; demonstrated below.

Wrapper spacing
The wrapper spacing attribute lets you apply the wrapper margin & padding on the nav & tab container, content area, and image separately. And remember, each ingredient within the item will move at the same time.

Content spacing
In contrast, the Content spacing procedure allows designers to provide margin and padding in all the directions for the nav item & active nav item separately. Also, here you receive an option to provide the margin for the nav first & last item, nav icon, title & description.

Sizing

As a designer, you would love to control the alignment, width, and height of the advanced divi tabs, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. Even, you can set a min or max height & width for the module.

Spacing

Divi makes the spacing setting a default feature for the whole module. Therefore, you will find two standard margins and padding settings that work the same for all Divi modules in this function.

Border

The Border feature of the Advanced divi tabs module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.

Box-shadow

This Box shadow affects the entire Divi Advanced tabs, and it consists of distinct shadow effect styles with all the necessary settings.

Filter

The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire Divi advanced tabs. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your module. So, increase or decrease the value of these effects as you want them to your design.

Transform

The transform feature of the Divi Advanced tabs module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your tabs module will give you better control over the section.

Animation

Animation setting exists in all the Divi modules works as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.

Advanced Divi Tabs Module Advanced Tab

Everything you want to achieve based on the design intention is possible under the content and design tab. However, the advanced tab of the diviflash advanced tabs module is standing beside designers to have direct control over the module. As a designer, you can precisely play with each element of this module by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.

CSS ID & Classes

CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
CSS Class: Assign any CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.

Custom CSS

The Custom CSS section has three distinct CSS implementing areas in the Divi advanced tabs module. You have access to all the areas to write down any CSS Code and target any particular location.

Visibility

The visibility option of the advanced setting offers designers to conceal the advanced tabs module on particular devices.

Transitions

Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.

Position

Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

If you want to provide a scroll effect to your module, here you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi module.

NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.