In this day and age, it’s not sufficient for headings to merely convey the right message; they also need to be visually appealing to stay in the competition.
With this in mind, DiviGear introduces the Animated Heading Module, designed to enable the creation of attractive headings effortlessly.
This article will delve into the functionalities provided by the DiviGear Animated Heading module.
Add the Animated Heading
Upon opening the Animated Heading module, you should see the Animated Heading Settings window with three tabs: Content, Design, and Advanced.
Under the Content tab, in the Content section, you will see these fields-
- Fancy Text Animation: Choose 9 different animation styles for your animated heading.
- Title Prefix: Use this field to include additional text to the animated heading that will appear before the animated text.
- Fancy Text List: Input the text you want to animate. You should also notice three icons in these fields.
- The duplicate icon is for adding more fields.
- The relocation icon is for rearranging the order of the fancy text fields.
- The trash icon is there for deleting the fields.
- Title Suffix: Use this field to add more text after the animated fancy text.
Going forward we will discuss all the ways you can customize the animated heading.
Customize the Animated Heading – Content
In the content tab, here are the options you get to make your animated heading more attractive.
Settings
- Easing: Smooth out the movements of the animation by enabling this option.
- Animation Duration: Adjust how long the animation will last.
- Animation Delay: Adjust the delay between each animation.
- Easing: Choose how the easing effect will look from a wide range of options.
- Spring Animation Mass: Adjust the speed and bounciness of your animation.
- Spring Animation Stiffness: Adjust the rigidity of your animation.
- Spring Animation Damping: Adjust how quickly the animation comes to a rest.
- Spring Animation Velocity: Adjust the initial speed of the bounciness of the animation.
Prefix Background
Add a different background for the prefix of the animated heading. You can choose from a plain color, a color gradient, or an image.
Fancy-text Background
The same options as the Prefix Background.
Suffix Background
The same options as the Prefix Background.
Link
You can link your animated heading to a URL, as well as choose if the link will open in a new tab or the same tab.
Background
Modify the module’s background.
Customize the Animated Heading – Design
The design tab contains more features for customizing the animated heading.
Title
- Title Heading Level: Choose the HTML tag for the animated heading text.
- Title Font: You can select a variety of font styles for the heading text.
- Title Font Weight: Adjust the font thickness.
- Font Style: There are several font styles available for headings, including italic, uppercase, underlined, and strikethrough. You can also select the color and style of the underline and the strikethrough.
- Title Text Alignment: Decide where the heading text should be placed.
- Title Text Color: Choose a different color for the text.
- Title Text Size: Select the appropriate size for the text.
- Title Letter Spacing: Specify the amount of space between each letter of the heading.
- Title Line Height: Specify the distance between each heading line.
Prefix
- Display Element: The heading prefix can be displayed as block text or inline text, and you can customize the element on different devices.
- Max Width: When you choose the block element to display the prefix, you can specify a maximum width.
- Alignment: Decide where the block element should be placed.
- Prefix Font: Select a font for the heading text prefix.
- Prefix Font Weight: Decide how thick the prefix font should be.
- Prefix Font Style: The prefix can be displayed in italics, uppercase, underlining, or striking through. In addition, you can choose the color and style of the underline and strikethrough.
- Prefix Text Alignment: Choose where the heading prefix should be positioned.
- Prefix Text Color: Select a different color for the prefix text.
- Prefix Text Size: Pick the right text size for the prefix.
- Prefix Letter Spacing: Indicate the amount of space between each letter of the prefix.
- Prefix Line Height: Determine the distance between prefix lines.
Fancy-text
- Overflow: Choose if you want the animation effect to overflow or not.
- Display Element: You can display the fancy-text as block text or inline text, and you can customize the element according to the device.
- Max Width: You can specify the maximum width if you choose the block element to display the fancy text.
- Alignment: Determine where the block element should be positioned.
- Fancy-text Font: Choose a font for the fancy-text.
- Fancy-text Font Weight: Set the thickness of the fancy-text font.
- Fancy-text Font Style: The fancy-text can be displayed in italics, uppercase, underlining, or striking through. In addition, you can choose the color and style of the underline and strikethrough.
- Fancy-text Alignment: Set the position of the fancy-text.
- Fancy-text Color: Choose a different color for the fancy-text.
- Fancy-text Size: Select the appropriate text size.
- Fancy-text Letter Spacing: Define how much space there should be between each letter of the fancy-text.
- Fancy-text Line Height: Specifies how far apart fancy-text lines should be.
Suffix
The same options as the Prefix.
Border
Customize the heading container by adjusting corner sharpness, and selecting the border’s width, color, and style.
Custom Border
Using this section, you can customize the border of the prefix, fancy-text, and suffix separately. You can change the width, color, and style of their border, and you can adjust the sharpness of their corners.
Sizing
Besides the width and height, you can also adjust the alignment of the animated heading from this section.
Spacing
This section provides options to individually adjust padding and margin for the prefix, fancy-text, and suffix. Additionally, you can set padding and margin for both the heading and the entire module.
Box Shadow
Allows you to add a box shadow to the entire heading module.
Customize the Animated Heading – Advanced
Every Divi module includes this default Divi tab for adding custom CSS codes, scroll effects, and more.
Do You Have Any Questions Left?
Please contact our support team at support@divigear.com if you need further assistance with the DiviGear Animated Heading module.
