Titre traduit: How to Add, Edit and Delete a Heading in Elementor

Texte traduit: In this Texte traduit: WPDesignsTexte traduit:  article, we will discuss how to Add, Edit, and Delete a heading in Texte traduit: ElementorTexte traduit: .

Texte traduit: Why Use Headings?

Texte traduit: 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.

Texte traduit: How to Add a Heading In Elementor

Texte traduit: The first step to adding or editing a heading in Texte traduit: ElementorTexte traduit:  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 –  Texte traduit: Add Edit and Delete Pages in WordPressTexte traduit: .  If you are not sure how to open the page to edit, you can go to the dashboard, then navigate to Texte traduit: PagesTexte traduit: ; from the list of pages, open the Elementor page builder back end by going to Texte traduit: Edit with ElementorTexte traduit: .

Texte traduit: 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 Texte traduit: to edit the headerTexte traduit: .  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.

Texte traduit: 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.

Texte traduit: How to Edit the Heading In Elementor

Texte traduit: 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.

Texte traduit: With that, the box on the left of the page will bring up the info for that widget and you can make your edits.

Texte traduit: The Heading Editor Tabs

Texte traduit: 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.

Texte traduit: Content Tab

Texte traduit: 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. 

Texte traduit: In the heading content tab, there are several options available.

• Texte traduit: TitleTexte traduit:  – You can add your own custom text into the box much like you would with a standard word processor.
• Texte traduit: Dynamic HeaderTexte traduit:  – The small cylindrical icon will allow you to create a dynamic heading that will change depending on a range of defined variables.
• Texte traduit: LinkTexte traduit:  – 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.

• Texte traduit: SizeTexte traduit:  – 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.
• Texte traduit: HTML TagTexte traduit:  – 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.
• Texte traduit: AlignmentTexte traduit:  – 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.

Texte traduit: Style Tab

Texte traduit: The style tab takes care of, well… the style…

Texte traduit: There are useful options here that can help maintain the header’s look and feel in line with your site.

• Texte traduit: Text ColorTexte traduit:  – As you’d imagine, from here you can change the text’s color. If nothing is selected, it will take the color from the Texte traduit: Global ColorsTexte traduit: ; if set here it will override the Texte traduit: Global colorsTexte traduit: .  You can reset the color by clicking the arrow going in a circle when choosing a color.
• Texte traduit: TypographyTexte traduit:  – Takes care of everything from the font family, weight, transform, decoration, line height, and line spacing.
• Texte traduit: Text ShadowTexte traduit:  – You can add a shadow to the text to help it stand out or do as you need.
• Texte traduit: Blend ModeTexte traduit:  – 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.

Texte traduit: Advanced

Texte traduit: The Advanced tab is full of useful features:

• Texte traduit: AdvancedTexte traduit:  – Options include; margin, padding, z-index, CCS ID and CSS Class.
• Texte traduit: Motion EffectsTexte traduit:  – 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.
• Texte traduit: BackgroundTexte traduit:  – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
• Texte traduit: BorderTexte traduit:  – 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.
• Texte traduit: PositioningTexte traduit:  – 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 Texte traduit: a deep look into the positioning properties in Elementor.
• Texte traduit: Responsive Texte traduit: – 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.
• Texte traduit: AttributesTexte traduit:  – (Pro Feature) You can add custom attributes to the element; you can find a full list Texte traduit: hereTexte traduit: .
• Texte traduit: Custom CSSTexte traduit:  – (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.

Texte traduit: How to Delete Your Elementor Heading

Texte traduit: 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 Texte traduit: UpdateTexte traduit:  button in the bottom left and the widget will be successfully removed.