Headings are important elements on your site. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course..deliver an impactful message!
This tutorial will cover:
✔︎ Styling headings to suit your designs
✔︎ Adjusting them for mobile devices
✔︎ Using HTML Tags for your Page Hierarchy & SEO
✔︎ And much more!
Extra Links:
Landing Pages
Dynamic Tags [PRO]
Global Colors & Fonts Webinar
Responsive 101
Advanced Tab Playlist
Hi all, it’s Ziv from Elementor. Today we’ll cover one of the most important and most used widgets – the heading widget!
As you probably know, headings are important elements on any kind of web page. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course, deliver an impactful message!
So let’s dive in and explore the heading widget.
I’ll be using this cool dog food landing page as an example.
You can find this template in the Elementor landing pages library. Follow the link I left in the description to learn more about it.
I’ll be using this cool dog food landing page as an example, which you can find in the Elementor Landing Pages Library. Follow the link I left in the description to learn more about it.
Okay. From the widget panel, drag and drop a heading widget onto your page. The blue line indicates where it will be positioned when you let go.
Let’s first type the text.
By the way, if you are an Elementor Pro user, you can use the Dynamic tags feature instead of typing static text. It enables you to select text to appear dynamically, such as a post’s title, date or time. The same goes for any other field with this icon.
Next, you can link the heading to another page on your site, by simply typing the name and selecting it from the list. Or paste any external link you want in the field.
Here, you can choose to use one of these preset sizes. Soon I’ll show you how to set an exact size as well.
Next, you can decide which HTML tag the heading gets. This will help you establish the hierarchy within the page. And when done correctly is great for your SEO.
H1 defines the most important heading, and H6 the least important one.
You can control the alignment of the text over here.
Great, the content is all set. Time to Style this Heading!
You can set the text color, either by choosing a custom one from the color picker. Or select one of your predefined global colors, if you’re working with a design system. They help you work smarter by enabling you to save colours and use them anywhere throughout your site.
The same goes for Typography, you can choose one of your global fonts, or click the pencil icon to give it a custom style.
You can set the font family, size, weight, and a lot more.
I’ll go ahead and increase the font size, and adjust the line height a bit.
Pay attention that some of these options, such as the size, have device icons next to them. It indicates that you can set specific sizes for desktop, tablet and mobile devices.
I’ll go ahead and choose mobile. It’ll automatically take you to the Mobile Responsive Mode. Then simply adjust the size.
You can click here to check out the Tablet Mode.
And adjust the size the same way.
To exit the mobile responsive mode, click here.
Next, if you want to, you can add a cool text shadow to your heading.
You can control the shadow color, the horizontal and vertical positions, as well as its blur strength. You can always click reset to remove it.
Another cool way to liven up your designs is by applying a Blend Mode. They let you create cool effects by combining the widget’s styling with the background behind it. There are multiple options to choose from, but you do need something to blend with. I’ll add an image to the section’s background so you can see.
Then, back in the heading widget, simply play around with the Blend Modes and styling, till you’re happy with the result.
Cool! We’re almost done. I’ll go ahead and set it back to how it was.
Lastly, In the advanced tab you can find many additional settings, such as margin, padding, the z-index, motion Effects, mask, positioning, and a lot more. To learn more about these settings, checkout our dedicated Advanced Tab playlist.
Well that’s it! Now you know how to use the heading widget, and style them to your liking, so they deliver a powerful message.
We look forward to seeing how you use heading widgets. So Feel free to share your designs in the comments!
As always, don’t forget to subscribe to our YouTube channel for more tips and tutorials. Ciao for now!
