BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How To Remove Page Title With Elementor

You are currently viewing How To Remove Page Title With Elementor

The page title will appear at the top of every page, just above the content.

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.

Why to Hide the Page Title

Although a page title can improve SEO and inform the visitors what the page is about, there are some cases that you may want to hide.

Here are the most common reasons why to hide the page title:

  • Landing/sales pages – these pages are usually built on plain canvas without header, footer or title.
  • Mismatch beetween the URL and title – WordPress will automatically use the given page name as the page URL. Often times, we would like to have different names for them each, so we will need to hide the title.
  • Redesign the default stlye – a page title will automatically inherit the CSS rules of the used theme. If we would like to change the look of it, we will need to hide it first, and restlye it with Elementor after.

Whatever the reason may be, hidden the page title with Elementor is a really easy process. Let’s dive right into it.

Remove the Page Title with Elementor

Hiding a page title with Elementor is a simple two steps process:

  1. Edit the page with Elementor.
  2. Toggle the Hide Title option to on in the settings screen.

Step #1: Edit the 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.

Edit page With Elementor

Once we open the Elementor editor screen, move on to the setting screen to hide the title.

Step #2: 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.

Page settings screen

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.

Elementor hide title toggle

Great job, the page title was removed and no longer appears on the screen.

Page title was removed with elementor

The method above will work as long as the CSS class of the title is .entry-title. If it didn’t work, read the next section and learn how to fix it.

Troubleshooting: Remove Title With Elementor Isn’t Working

By default, the Elementor hide title option is set to hide any H1 element with the class of .entry-title.

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.

Elementor widget libraries

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.

Find the title class

CSS classes are attributes that define elements to a page to apply them with a unique style.

While still in the Elementor edit screen, right-click with your mouse on the page title, and click Inspect.

Inspect page title

When inspecting the page title in our example, we can see that our title is an H1 tag with the class of page-header-title

<h1 class="page-header-title clr" itemprop="headline">
Inspect page title class

Let’s copy the class, for now, we will need to use it in a second.

Change the CSS selector

Now, let’s navigate to the Elementor global settings by clicking on the Elementor hamburger menu on the left top corner.

Elementor global settings

Then, enter into the Site Settings option.

Elementor site settings

Inside the Site Settings screen, click on the Layout option.

Elementor site settings layout

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:

h1.page-header-title
Remove page title

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, you removed the title 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.

Title container 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.

h1.page-header-title, header.page-header
Page title and container were removed

After entering both classes, click update and revisit your page to make sure both the page title and container are no longer there.

Remove page title and container

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.

Conclusion

In this article, you learned how to easily remove the page title with Elementor.

Leave us a comment down below and let us know if you have any further questions.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

This Post Has One Comment

  1. Anthony

    Hi Sir. This process did not wot work for the theme that I am currently using. The theme is called Neve. Can you please help?

Leave a Reply