– [Ben] Hi guys, this
is Ben from Elementor. Today I’m going to explain to you about how to use the Heading Widget. So I’ll go ahead and start designing and click on Edit with Elementor, and I’ll go ahead and drag
and drop the Heading Widget. As you can see, wherever
the blue line appears, I can drag and drop the Heading Widget. I’ll put it in the top of the page. And now I’ll explain about
the three tabs that I have that control the settings of the widget, Content, Style and Advanced. Let’s start with Content. First let’s change the text a bit. The heading for my article. And the link, I can
link to wherever I want, by clicking on this button, I can have the link open on a new tab. I can easily change the
size of the heading… Make it small or large. I’ll keep it at large. Change the HTML tag, to be from H1 to H6, or make
it to dv, span or paragraph. I’ll stick with H2. And I can change the
alignment to center, right. Let’s keep it on the left. That’s it for the first
tab, let’s go on to Style. Here I can change every aspect
of the style of the heading. Change first the color, however I want. Let’s make it… This blue. And the typography, I can use the default, but if I go to custom, I can really manipulate
every aspect of the heading, increase it in size, choose a Font Family. I can choose one of any
hundreds of Google Fonts, I like Oswald. Change the Weight, maybe
make it a bit thinner. Have it on uppercase,
lowercase, or capitalize. I want it to be extra striking,
so I’ll make it uppercase. And change the style to italic or oblique. Let’s keep it on default. I can now manipulate the line
height, something like this, and the letter spacing, like this. Okay, let’s add a sub-heading. I can just duplicate the current heading, but I prefer to drag a new heading… because I wanna make it a bit longer. So let’s place the text… Change the size maybe to medium, have it on H3… and go on to styling. Text color I will choose… Something gray, and change the typography, maybe make it a bit bigger. Family, I will choose Roboto. Have a normal Weight,
no Transform or Style. I wanna give it a bit more spacing, so it looks nice, this is fine. And maybe spread it a bit more. Okay, now we go on to
the Advanced settings. I will go into more details
here on a different video, but to give you a quick overview, you can change here things like Margin, Padding, Background Type, Border Type, Border Radius, or add my own CSS class. Let’s for example, I want
to give here an extra, wider spacing beneath the sub-heading, so I’ll put a bottom, of let’s say… 20, yeah, that gave a nice space here. Okay, let’s see how it looks on mobile, I’ll switch to Mobile Portrait. Okay, I think I could give
a bit more line height, to the heading. Something like this,
maybe a bit smaller, yes. Okay, excellent, I’ll
switch back to Desktop, and click on the preview button, see how it looks like, looks fine. Let’s save it. I hope you’ve enjoyed this tutorial. For more video tutorials,
subscribe to our YouTube channel, or visit docs.elementor.com