Table of Contents
Why Use Headings?
The headings you choose to add to your website are significant as both readers and search engines use them to determine what the page is about. This helps to break up the content for users to decide whether or not the section contains the information they need; the heading also works to inform search engines about the page’s content. There are 6 heading types: H1, H2, H3, H4, H5 & H6.
How to Add a Heading In Elementor
The first step to adding or editing a heading in Elementor is to make sure you can access the page. If you need to create a page, you can do so by following our instructions on – Add Edit and Delete Pages in WordPress. If you are not sure how to open the page to edit, you can go to the dashboard, then navigate to Pages; from the list of pages, open the Elementor page builder back end by going to Edit with Elementor.
Once you are on the page you need, you can add your new heading. If the heading already exists, click it and move to the section to edit the header. If you need to add your new header, open the Elementor widgets list and find “Heading .” Once found, click, hold and drag it across to the page. If you have no sections open on the page, you can add the heading into the section with the three colored circles. Alternatively, if you have a page already constructed, you can see the location that it will be added to by the blue line that comes across the bottom as you move it around. Once happy with its location, you can release it.
After letting go of the header, you will have added it to the page, but you will still need to add your custom text, likely style it, and adjust some other settings. You can learn more in the following sections.
How to Edit the Heading In Elementor
Go to the page you wish to edit and make sure it is opened in edit mode. Find the element you wish to edit and click the blue box in the top right corner of it to open it in edit mode.
With that, the box on the left of the page will bring up the info for that widget and you can make your edits.
The Heading Editor Tabs
There are 3 consistent tabs for every widget in Elementor; these consist of “Content,” “Style” and “Advanced.” These tabs’ contents remain the same through most widgets, with some variations in the options available depending on the widget being edited.
One thing you will probably want to do is add your text to the header. You can do this by going to the left-hand menu and making sure you are on the “Content” tab. From here, add your text into the box much as you would with a standard word processor on your computer and any text added here will appear on the page.
In the heading content tab, there are several options available.
- Title – You can add your own custom text into the box much like you would with a standard word processor.
- Dynamic Header – The small cylindrical icon will allow you to create a dynamic heading that will change depending on a range of defined variables.
- Link – This will allow you to add a hyperlink to the heading if you need it to redirect the user somewhere upon a click. It can also be configured to download something, open a popup, open a lightbox, open a video, or a whole range of other things. You also have dynamic options for the link.
- Size – You can select your header’s size here from a selection ranging from Small to XXL. If you select a font size in the style tab, it will overwrite the size given here.
- HTML Tag – This is an important one to get right; your page should give the most important heading on the page a H1 tag and the others H2 and down as the importance reduces. Whilst you should only have one H1 header, you can have as many H2, H3, etc. as needed.
- Alignment – You can set how your title will be positioned. You can sometimes find the alignment under Style (for example, when editing text). You can adjust further in the Advanced tab using the padding and margins.
The style tab takes care of, well… the style…
There are useful options here that can help maintain the header’s look and feel in line with your site.
- Text Color – As you’d imagine, from here you can change the text’s color. If nothing is selected, it will take the color from the Global Colors; if set here it will override the Global colors. You can reset the color by clicking the arrow going in a circle when choosing a color.
- Typography – Takes care of everything from the font family, weight, transform, decoration, line height, and line spacing.
- Text Shadow – You can add a shadow to the text to help it stand out or do as you need.
- Blend Mode – There are 13 different modes available to try out and each has a different effect on the header and how it interacts with the background.
The Advanced tab is full of useful features:
- Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
- Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
- Background – You can select the background for standard and also for hover. You can choose from a solid background and a gradient.
- Border – This allows you to add a border to the element when standard and hover along with the border-radius. You can also add a box-shadow.
- Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom. For the page position, you have default, absolute, and fixed. Check out this article for a deep look into the positioning properties in Elementor.
- Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes. This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
- Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
- Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box. It is best to add the CSS for the element and add the CSS for the global setting site. You can use “selector” to target the specific element you have open.
How to Delete Your Elementor Heading
Deleting the widget is easy, find the widget you would like to delete, right-click on it, and select delete from the menu. Then click the green Update button in the bottom left and the widget will be successfully removed.