Getting Started
The advanced heading module for divi is one of the best heading modules ever Invented by the Diviflash. This module is introduced especially for designers to create a Phenomenal heading text. Here, you get great typography properties alongside a couple of exclusives customizing features. These features are structured under three distinct categories, The Content, Design & Advanced Tab. However, these tabs carry different design options for the module. Today, we will learn the working strategy of each of these tabs in detail.
Divi Advanced Heading Module – Content Tab
The content tab of the Divi advanced heading plays a vital role in the initial fabrication of the module. This tab allows you to apply the prefix, infix & suffix title under the content feature. Moreover, adding a divider & embellishing it is also a part of the content tab. The responsibility of decorating the prefix, infix, and suffix title background goes to the content tab. However, more features are situated under this tab, and we will discover all the design possibilities here.
Content
The content feature of the Divi advanced heading module allows designers to implement three different titles, named prefix, infix & suffix. This feature makes a way to adorn each title separately in the further customizing procedure.
Divider
Activating the “Use Divider” attribute brings up a range of features to decorate the divider position, style, color & alignment. Also, the thickness, border radius & max-width of the divider can get modified here. Besides that, you can choose either the Use Icon or Image property to be shown along with the divider. Turning on one of these features presents a couple of attributes required to embellish those properties, such as alignment, color, background color & size. Not least, you can give a circle effect to the divider icon & image. Remember, selecting the Use Divider Icon setting will disable the Use Divider Image setting.
Divider Line Background
The divider line background feature is imported to bring a background color to the divider. Also, you can apply color gradients & images as the divider background.
Prefix Background
The list of designing properties you achieve in the Divider line background is also presented in the prefix background setting.
Infix Background
The list of designing properties you achieve in the Divider line background is also imported in the infix background setting.
Suffix Background
The list of designing properties you achieve in the Divider line background is also presented in the suffix background setting.
Link
Designers can easily take the audience to another page simply by providing a link on the module. Diviflash advanced heading is a well-planned module with every customization setting that will be required while working.
Background
Background setting has multiple facilities for a better layout, such as background color, gradient color, image, and video features. And on top of these features, there are few settings to make each adjustment as you desire.
Admin Label
Admin Label of the Divi advanced heading provides the opportunity to customize the module name as you desire. So, it doesn’t have to be the actual name of the module that generally shows on the wireframe view.
Divi Advanced Heading Module – Design Tab
The name “Design Tab” of this tab represents its overall task procedure. The Divi advanced heading design tab is dedicated to designing every possible ingredient applied in the content tab. A list of overwhelming features is placed under this tab to achieve the maximum decorative output. Among those features, the title, dual text, prefix, infix, suffix, custom border & custom spacing are the most notable. Including all other features, there will be a detailed demonstration to learn how all these features work.
Title
The title of the design tab is an awesome feature that affects the entire title, the prefix, infix, & suffix at once. This feature lets designers define the title heading tag & font, font style, title text weight, color & alignment. Moreover, the text size, letter spacing & line-height get determined over various text-shadow effects under the title feature.
Dual Text
Dual text is considered one of the core features of the Divi advanced heading module. This feature is imported for you to implement a secondary text in the heading. The work procedures of the dual text setting are divided into two parts, the Use dual Text & Use Dual Custom Text. Activating the Use dual text property brings a couple of advanced attributes for you. Here, you can modify the dual font style, weight, alignment & color, text size, letter spacing & line-height. Not only that, this property authorized you to apply different types of text-shadow effects along with a suitable color. You are also allowed to change the dual text-shadow blur strength and position horizontally & vertically. Meanwhile, the Use Dual Custom Text allows any text as the dual text of this module.
Prefix
The prefix of the design tab has a very common intention to decorate the prefix part of the title. Under this setting, you get the opportunity to define the element to be displayed with the block or inline style. Moreover, it gives you the power to modify the prefix font weight, style, alignment & color. Also, the prefix text size, letter spacing & line height get embellished over various text & box-shadow effects with the prefix setting. However, it presents a property called the Enable Clip dedicated to masking the inside of the prefix title. Turning on the enable clip property lets you apply a fill color & stroke color inside & outside of the title; we also can call this procedure the Text Masking. Finally, you get yourself an option to increase or decrease the title stroke width for a better look.
Infix
All customizing properties are imported in the Prefix feature, also dedicated to the Infix part of the heading.
Suffix
All customizing properties are imported in the Prefix feature, also dedicated to the Suffix part of the heading.
Border
The Border feature of the Divi advanced heading module can give you a border corner rounding effect for the entire heading. Also, you can customize the design by changing the border width, style, and color with it. Nevertheless, don’t feel confused by just reading; try once and see it’s easier than you thought.
Custom Border
Here, we arrive at the special feature of the Divi advanced heading module, the Custom Border. The custom border feature is imported to play with each of the title parts efficiently. Therefore, you get the facility to decorate the prefix, infix & suffix individually. Furthermore, under the custom border, you have the authorization to apply a border corner rounding effect along with a compatible border width, color & style.
Sizing
As a designer, you would love to control the alignment, width, and height of the Divi advanced heading module, right? So, the sizing feature stands in your favor to increase or decrease the width and height of your container. Even you can set a min or max height and width of the heading.
Spacing
The spacing feature of the divi advanced heading is not like the Divi default spacing system. This spacing feature offers a lot more than you could ever imagine. Here, you can provide margin & padding over the entire heading, divider container & line. Moreover, you are allowed to apply margin & padding around the prefix, infix, suffix, and divider icon & image. General margin & padding for the entire Divi advanced heading module is also available.
Box-shadow
This Box shadow affects the entire Divi advanced heading module and has six distinct shadow effect styles. On top of these, you get some features to adjust the box-shadow effect to a particular design.
Transform
The transform feature of the Divi advanced heading module provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your heading will give you better control over the section.
Divi Advanced Heading Module – Advanced Tab
As a designer, you can successfully create anything extraordinary under the content and design tab. However, the Divi advanced heading module’s advanced tab stands beside the developer to have direct control over the module. Developers can precisely play with each module element 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 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 heading module. You have access to all the areas to write down any CSS Code and target any particular area.
Visibility
The visibility option of the advanced setting offers designers to conceal the advanced heading 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 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, 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.
