The Heading widget displays a text into your section or header that is rendered with a heading tag (H1, H2, etc.) in the HTML output.
To add the heading element to a section or a header:
- Click on the Elements icon on the top right corner panel.
- Drop in the heading module to header/section layout. You can choose where to drop the element by following the pink line and releasing it there.
When it comes to the settings you can first type in your preferred heading that you want displayed in your page.
Next you can add a URL if you want the heading to contain a live link. Then select the link target you prefer between self and blank. As for the self link target the url will open on the same browser tab/window while on the blank link target the url will open on a different tab/window.
Under the HTML tag settings, select the heading level (H1, H2, etc.). This automatically inserts the correct heading tags into the rendered page.
Finally you can set an alignment of your heading between left, center, right and justify which will position your heading accordingly.
When it comes to heading styling options you will mostly encounter text options.
First is the color option whereby the default heading color is usually specified in the theme, but you can choose a custom color here.
Next you can enable and then change the typography options by selecting a custom font family, setting a font size & weight, then add text transformation, text style, letter spacing and line height to your heading.
Tip: Even if you can choose a custom Google font in each Heading widget, avoid using too many different fonts in case you are paring down page load times. You can check load times of your combination of Google fonts at fonts.google.com.