If you’re building your website with Elementor, you may like to hide the page title on certain pages.
In this article, you will learn how to remove a page title with Elementor.
Hiding a page title with Elementor is a simple two steps process:
- Edit the page with Elementor.
- Toggle the Hide Title option to on in the Settings screen.
Let’s dive right in.
Edit Page with Elementor
The first step of hiding the title of a page is to edit that specific page with Elementor.
Therefore, click on the Edit with Elementor button at the admin bar to open the editor.
Turn On the Hide Title Toggle
Now that we are inside the Elementor edit screen, click on the gear icon at the bottom left corner to access the settings screen of this specific page.
Now, toggle the Hide Title option to on and make sure that the title was removed successfully.
When done, click on Update to save the changes and revisit your page once again.
Great job, the page title was removed and no longer appears on the screen.
Elementor Hide Title Option Isn’t Working
By default, the Elementor hide title option is set to hide any
H1 element with the class of
In most cases, that is the default class for many WordPress themes, and turning the hide title toggle option to on will do its job and remove the title.
In some other cases, depends on the WordPress theme you’re using, switching the Hide Title toggle to on will not work for you and will not remove the title.
If the hide title option did not work for you, we will need to find the class of your page title and add it to the Elementor setting screen.
While still in the Elementor edit screen, right-click with your mouse on the page title, and click Inspect.
When inspecting the page title in our example, we can see that our title is an
H1 tag with the class of
<h1 class="page-header-title clr" itemprop="headline">
Let’s copy the class, for now, we will need to use it in a second.
Now, let’s navigate to the Elementor global settings by clicking on the Elementor hamburger menu on the left top corner.
Then, enter into the Site Settings option.
Inside the Site Settings screen, click on the Layout option.
Here we will need to paste our page title class inside the Page Title Selector field. Make sure to add the title tag plus a dot together with the class:
After pasting the code, the page title will be removed. If the title is still showing, make sure the Hide Title option is on under the settings tab.
As you can see above, the page title was removed successfully, however, the container of the page title is still there.
If you would like to remove the container of the page title as well, click Inspect on the page title container, and look for its class.
Then, enter the container class into the Page Title Selector as well next to the title class and separate them both with a comma.
After entering both classes, click update and revisit your page to make sure the page title and the title container were removed successfully.
Fortunately, entering the classes of the page title into the layout screen of Elementor is a process that we need to do only once. After entering the right classes once, enabling the hide title option on the next pages will work perfectly fine and will remove the title.
Hiding the title of a page is very simple with Elementor and can be done with a click of a button.
If the method in this article did not work for your specific theme, make sure to leave us a comment down below with the theme you’re using and we will provide you with the right class.