Animated heading
shortcode

Make the headings on your site more visible to impress and attract more attention.
Read documentation
Usage frequency
65%
Preset amount
75%
Customizability
94%

Available options

Default code: [dfd_animate_heading line_appearance="top-to-bottom"]

Line appear effect – Choose between 4 preset styles;

Heading alignment – Select the alignment for the shortcode;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS  and write your own CSS code with this class to get your own style;

Content – Add the title and the subtitle for your heading;

Style – Customize your heading, choose the background color, border radius and offset for the heading elements;

Background align – Allows you to align the background according to the longest part if you set both title and the subtitle;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Responsive – Specify the font size and letter spacing for different screen resolutions.

Default styles

Samples of preset styles without custom changes
left to right

Animated header example

Animated subheading example

Animated header example

Animated subheading example

Animated header example

Animated subheading example
right to left

Animated header example

Animated subheading example

Animated header example

Animated subheading example

Animated header example

Animated subheading example
top to bottom

Animated header example

Animated subheading example

Animated header example

Animated subheading example

Animated header example

Animated subheading example
bottom to top

Animated header example

Animated subheading example

Animated header example

Animated subheading example

Animated header example

Animated subheading example

Customized styles

Some variations of style customizations of the shortcode
custom background

Animated header example

Animated subheading example
background align
Animated header example
Animated subheading example
customized typography
ANIMATED HEADER
Animated subheading example