Back to contents

How to add a headline to Elementor with JetElements Headline and Animated Text widgets

This tutorial explains how to create a headline, featuring Headline and Animated Text widgets which are included in the huge JetElements set of widgets.

Adding headline with JetElements Headline widget

JetElements Headline widget is the stylish widget for Elementor, allowing to use versatile typography settings, classic and gradient text colors. It also allows to or to apply the image for the text. Follow the instruction and you will learn, how to create an attractive and noticeable caption.

Headline widget

Step 1 — Firstly, find the Headline widget in the list of JetElements widgets on Elementor editor page. Then, drag and drop it into a new section.

Headline widget

Step 2 — Move on to the Content > Title block. Here you can input the First and the Second Parts of the Title, add a Link.

Content settings in Headline widget

Step 3 — Select HTML Tag. Notice, you should choose one of the heading markups, however, it shouldn’t be H1. The proper heading markup is needed for the title to be ranked by the search engine. H1-H6 specifies the importance of the heading, in comparison to other headings. This way, H1 – is the most important heading, while H6 – the least important.

HTML tag in Headline widget

Step 4 — In the Content > Decorative Elements block you are able to add Before and After Icons/Images.

Decorative elements in Headline widget

Step 5 — Proceed to the Style > General block. Here you can determine the Direction, the Alignment, the Background Color, the Padding, the Margin, the Border Type and the Border Radius.

Step 6 — The Style > First Part block options make you in charge of styling up the first part of the title by changing its Color, Typography, Alignment and so on.

Decorative elements in Headline widget

Step 7 — The Style > Second Part block allows you to design the second part of the heading.

Step 8 — Navigate to the Style > Decorative Elements block, where you are able to customize the Before and After Icons, as well as enable or disable the Divider Deco Element function.

Creating headlines with Animated Text widget

From this part of the tutorial, you will find out, how to create a headline using the Animated Text widget, which can play the role of a heading. We bet, it will attract everybody!

Animated Text widget

Step 1 — Open the Elementor page builder and search for Animated Text widget. Drag and drop it into a new section.

Animated Text widget

Step 2 — The Content > Content block is where you create your new headline. There are three parts of a heading: Before Text, Animated Text and After Text.

Before Text and After Text never change, however, Animated Text part changes on and on, where each item replaces another. You can add as many Animated Text items as you wish.

Content settings in Animated Text widget

Step 3 — It’s time to pick a striking animation effect. Proceed to the Content > Settings block and in the Animation Effect dropdown you are allowed to choose an effect among Joke, Kinnect, Circus, Rotation Fall, Simple Fall, Rotation, Anime, Label, Croco, Scaling, Fun and Typing options. In this block you can also fix the time value between two animated text items changing in the Animation Delay section. We recommend you not to make it fast, because it will not be easy to read.

Settings in Animated Text widget

Step 4 — Then go to the Style block, where you can personalize all the parts of a headline by means of changing Color, Background color, Typography and Padding.

After text settings in Animated Text widget

Attention! Use Magic Button to browse Sections > Animated Text and see the samples of what can be done with the help of the Animated Text widget.

Animated Text widget

Improvise and make your site appealing!