How to Hide the Page Title with Elementor

If you're building a page with Elementor, you might not want the title of the page to be visible.

Basically, we want to hide this:

Different themes handle hiding the title differently. For example, in Astra, there's a checkbox on the page editor to hide the title.

Thankfully, Elementor has the ability to do this no matter what theme. This also works with both the free and pro versions of Elementor.

How to hide the page title with Elementor:

1. Edit the page with Elementor
2. Go to settings in the editor and turn the Hide Title toggle to "Yes"
3. If that doesn't work, find the page title selector and add it under Elementor -> Settings -> Style : Page Title Selector.

Let's see that in action.

Edit the page with Elementor

I'm assuming you have Elementor installed and active. If you don't, go through our tutorial on that here.

Just get to the Elementor page editor for that page. If you haven't run Elementor on that page before, edit the page in WordPress, then click the "Edit with Elementor" button.

If you have edited the page with Elementor before, you can get to the editor using the method above, or under pages in the WordPress admin area an "Edit with Elementor" link will appear, or you can get to it from viewing the page on the front end and clicking "Edit with Elementor" in the admin bar at the top.

Hide the page title in Elementor settings for that page

With the Elementor page builder active for that page, look in the bottom left corner for the gears icon.

That's the Page Settings. Click that.

Look for the toggle next to Hide Title.

Click that, so that it changes to "Yes".

Your page title should now have disappeared. Read on if it does not disappear at this point.

Elementor Hide Title Toggle doesn't work

If the Elementor Hide Title Toggle doesn't hide the page title, the most likely reason is your theme doesn't use a H1 or the class "example title" for the page title. To fix it, find the correct css selector and add it to Elementor Settings.

This is what it looks like if the Elementor Hide Title toggle doesn't work:

We'll need to find what code our theme uses for the page title.

If you're in Chrome, right click on the title, then select "Inspect" from the popup menu.

You'll see an area with the source code of the page. If you've right clicked on the title, you should see that highlighted. In case the text is too small in the image, the line is:

<h1 class="example-title">Hide This Title With Elementor</h1>

To find the code using other browsers, or if it doesn't automatically scroll to the right area, read our guide on using Inspect Element.

For this example, the important information is that the heading is a H1 and the class is "example-title".

In the WordPress dashboard, go to Elementor -> Settings. Choose the Style tab and look for the Page Title Selector.

Change the Page Title Selector to match your theme's page title.

For our example, we use h1.example-title.

If we were using a H2 for the page title, it would be h2.example-title.

The dot between h1 and example-title is important, because it says that the H1 is of the class "example-title". Make sure there is no space in there.

Click "Save Changes".

Now when you refresh the page, the page title will be set to hidden.