Getting Started

As a designer, creating an animated heading is a common temptation for you. The animated heading module for divi created by Diviflash is one of the extraordinary heading modules in the marketplace. This module consists of several innovative features like the content, fancy text setting, Prefix, suffix & fancy text background, Title, custom border, custom spacing & fancy text customizing. Besides that, there are many more features that play a vital role in this module. The Divi animated heading module separated these features into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab

Divi Animated Heading Content Tab

The content tab is the first step of fabricating the Divi animated heading module. This tab approaches to help designers with some initial features which considered the backbone of the module. Among these primary features, the content, setting, prefix background, fancy-text background & suffix background are the most famous. First, let’s learn the customizing procedure of all the features in detail.

Content

The content feature of the Divi animated heading module allows designers to implement two different titles, namely Prefix & suffix. Moreover, you can apply a list of fancy text that appears one by one alongside various fancy text animation effects. This feature makes a way to adorn each Title separately in the further customizing procedure.

Settings

Under the setting, you can define the fancy text spring animation mass, stiffness, damping & velocity value. However, activating the Easing attribute lets you apply a compatible value for the animation duration & delay option. Remember, there are many predefined easing effects situated to save your time.

Prefix Background

The prefix background feature is imported to bring a background color to the prefix part of the Title. Also, you can apply color gradient & image as the prefix background.

Fancy text Background

The list of designing properties you achieve in the prefix background is also presented in the fancy text background setting.

Suffix Background

The list of designing properties you achieve in the prefix 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 animated heading is a well-planned module with every bit of customization settings that will be required while working.

Background

Background setting has multiple facilities to implement 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 animated 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 Animated Heading Design Tab

The Design tab is regarded as the most precious tab dedicated to embellish each ingredient imported in the content tab. This tab brings a range of advanced features along with the intention of decorating the entire module. For instance, the Title, prefix, fancy text, suffix, border, custom border, sizing, spacing, and so on are included in this tab. Therefore, get a decent idea about all the designing features of the Divi animated heading module and be overwhelmed by its capability.

Title

The Title of the Divi animated heading module is an excellent feature that impacts the entire Title, the Prefix, fancy text & 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.

Prefix

The Prefix of the design tab has a general 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 adjusted with the prefix setting.

Fancy-text

The fancy-text feature of the design tab creates the most sensation among visitors with its attractive attribute. This feature lets designers select the overflow between two distinct types of overflow effects, the visible & hidden. Here, you get the opportunity to define the element to be displayed with the block or inline style. Moreover, this feature provides the authorization to adorn the fancy text font, font-weight, style, alignment & color. Finally, you get the privilege to change the fancy text size & line-height to suit the design.

Suffix

Every decorating attribute you get in the prefix feature is also included in the suffix feature.

Border

The Border feature of the Divi animated 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 unique feature of the Divi animated 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, fancy text & 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 Divi animated heading module’s alignment, width, and height. 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 animated heading works like the divi default spacing system. But this spacing system of the design tab has broad functionalities. As a designer, you can set a perfect distance between every ingredient by applying the margin & padding around them. Specifically, you are privileged to provide the margin & padding around the heading, Prefix, fancy text & suffix. However, the general margin & padding also presented here impact the entire module at once.

Box-shadow

This Box shadow affects the entire Divi animated heading module, and it has six distinct shadow effect styles. On top of these, you get some features to adjust the box-shadow effect to a particular design.

Divi Animated Heading Advanced Tab

Each customization that you seek as a designer is possible under the content and design tab. However, the advanced tab of the Divi animated heading module is standing 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 styling 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 animated 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 animated 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.