How to Hide Page Titles in WordPress Using Elementor

Hiding a page title in WordPress means suppressing the <h1> heading that your theme automatically renders at the top of every page — separate from the browser tab title or SEO meta title. With Elementor, you can remove this element per-page through the editor's built-in toggle, through your theme's customizer, via targeted CSS, or through a lightweight plugin. Each method targets a different layer of the WordPress rendering stack, and choosing the wrong one for your situation can cause layout regressions or SEO side effects.

This guide covers all four methods in precise technical detail, explains when each is appropriate, flags the pitfalls that most tutorials skip, and ends with a decision matrix to help you pick the right approach for your specific setup.

Why Page Titles Appear — and Why Removing Them Is More Complex Than It Looks

WordPress themes output the page title through a template tag, typically the_title() or get_the_title(), wrapped in an <h1> tag inside the theme's page.php or single.php template. Elementor renders its content inside this template, not instead of it. This means the title is rendered by the theme layer, not by Elementor itself — which is why simply deleting the title widget inside the Elementor canvas does nothing to the theme-generated heading.

Understanding this distinction matters because:

• Hiding the title visually with display: none still leaves the <h1> in the DOM, which can confuse screen readers and create duplicate heading structures.
• Removing the title via Elementor's native toggle suppresses it at the template level for that page only.
• Theme-level settings may override Elementor's toggle depending on load order.
• Some page caching layers will serve a cached version of the page that ignores newly saved settings until the cache is purged.

If your WordPress site runs on a VPS Hosting environment, always purge your server-side cache (Nginx FastCGI cache, Redis object cache, or your caching plugin) after making any of these changes, or the result will not be visible to visitors.

Method 1: Hide the Page Title Using Elementor's Native Page Settings

This is the correct first-line approach for hiding the title on individual pages. It uses Elementor's internal page meta, which instructs the theme template to skip rendering the title tag entirely — no CSS hack, no DOM pollution.

Step-by-Step Instructions

Step 1: Open the page in Elementor

1. Log in to your WordPress admin dashboard.
2. Navigate to Pages > All Pages.
3. Locate the target page and click Edit with Elementor.

Step 2: Access the Page Settings panel

1. In the Elementor editor, click the hamburger menu icon (three horizontal lines) in the top-left corner, then select Page Settings — or click the gear icon at the bottom-left of the panel if you are on an older Elementor version.
2. The Page Settings panel will open on the left side.

Step 3: Toggle the Hide Title option

1. Scroll down within the Page Settings panel until you see the Hide Title toggle.
2. Switch it to Yes.
3. Click Update (or Publish if the page is new).

What this actually does: Elementor writes a post meta value (_elementor_page_title) to the database for that specific post ID. The theme's template checks for this meta value and conditionally skips the the_title() call. This means the <h1> is never output to the DOM — a semantically cleaner result than CSS hiding.

Known Limitations

• This toggle only works if your active theme is compatible with Elementor's page settings API. Themes that do not check for this meta key will ignore it entirely.
• If you are using Elementor Pro with a custom Theme Builder header or page template, the toggle may have no effect because the theme's page.php is bypassed altogether.
• The toggle is per-page. There is no native Elementor option to apply this globally across all pages from a single control.

Method 2: Hide Page Titles Through Your Theme's Settings

Many commercial and block themes expose a title visibility control either in the Customizer or in per-page metaboxes. This is the correct approach when you want to suppress titles site-wide or when your theme does not play well with Elementor's meta toggle.

Using the WordPress Customizer

1. Go to Appearance > Customize.
2. Look for sections labeled Page Settings, Layout, Typography, or Post/Page Options — the exact label depends on your theme.
3. If a Show Page Title or Display Title toggle exists, disable it.
4. Click Publish.

Popular themes and where to find this setting:

• Astra: Appearance > Customize > Page > Single Page > Page Title
• GeneratePress: Appearance > Customize > Layout > Page Layout > Disable Title
• OceanWP: Appearance > Customize > General Options > Page Title Bar
• Hello Elementor (Elementor's own theme): No built-in title control — relies entirely on Elementor's page settings toggle or CSS.

Using Per-Page Document Settings

Some themes inject a metabox directly into the WordPress block editor or classic editor sidebar. When editing a page, look for a panel labeled Page Options, Page Settings, or your theme's name. A Hide Title checkbox here operates at the PHP template level, identical in effect to Elementor's toggle.

Critical Pitfall

If you disable titles globally through the Customizer, this setting applies to every page, post, and custom post type that uses the same template. Audit your content inventory before enabling a global setting, or you will inadvertently hide titles on blog posts, WooCommerce product pages, or archive pages where the title is semantically necessary.

Method 3: Hide Page Titles with Custom CSS

Use this method when you need surgical control — for example, hiding the title on a specific page without touching Elementor settings or theme options, or when you are dealing with a theme that does not expose any native toggle.

Step 1: Find the Page's Post ID

1. In your WordPress dashboard, go to Pages > All Pages.
2. Hover over the target page. Look at the URL shown in your browser's status bar — it will contain a parameter like post=123. The number is the page's post ID.

Alternatively, open the page in the block editor and check the URL in your browser's address bar: https://yoursite.com/wp-admin/post.php?post=123&action=edit.

WordPress automatically adds a body class of page-id-{ID} to every page's <body> tag, which you can use as a CSS selector.

Step 2: Identify the Correct CSS Selector

The selector depends on your theme and Elementor version. Common selectors include:

Use your browser's DevTools (right-click the title on the front end, select Inspect) to identify the exact class on your installation before writing any CSS.

Step 3: Add the CSS via the Customizer

1. Go to Appearance > Customize > Additional CSS.
2. To hide the title on a single page:

.page-id-123 .entry-title {
  display: none;
}

1. To hide the title on all pages site-wide:

.page .entry-title {
  display: none;
}

1. To hide the title only on pages built with Elementor:

.elementor-page .entry-title {
  display: none;
}

1. Click Publish.

The SEO Implication of display: none

This is the most important caveat with the CSS method: display: none hides the element visually but does not remove it from the DOM. Googlebot will still crawl and index the <h1> content. This is generally acceptable — Google understands CSS hiding for layout purposes — but it creates a structural problem: your page will have a hidden <h1> that duplicates whatever heading you placed inside the Elementor canvas. Duplicate <h1> tags are a recognized on-page SEO issue.

The technically correct solution when using CSS to hide a title is to also ensure your Elementor layout contains a proper <h1> heading widget so the page has exactly one visible, meaningful <h1>. If you are hiding the theme title purely because you have built a custom heading inside Elementor, this is the right workflow.

Alternative: visibility: hidden vs. display: none

For accessibility and SEO integrity, the Elementor toggle or a PHP-level theme setting is always preferable to CSS hiding.

Method 4: Use a Plugin to Hide Page Titles

Plugins are the right choice when you are managing a multisite network, when your team includes non-technical editors who need a simple checkbox, or when you need to hide titles across multiple post types without writing any code.

Recommended Plugins

Hide Title (by Stefano Lissa) — Lightweight, no settings page, adds a single checkbox to each post/page editor. Approximately 10,000 active installs, regularly updated.

Elementor Header & Footer Builder — If you are already using this plugin for template management, it can help restructure page layouts so the theme title is never rendered in the first place.

Page and Post Title Hider — Adds per-post and per-page controls, supports custom post types, and works independently of the active theme.

Installation and Use

1. Go to Plugins > Add New.
2. Search for your chosen plugin by name.
3. Click Install Now, then Activate.
4. Edit the target page. In the block editor sidebar or below the classic editor, locate the plugin's Hide Title checkbox.
5. Check the box and click Update.

When Not to Use a Plugin

Avoid adding a plugin solely for this purpose if you already have Elementor Pro or a theme that natively supports title suppression. Every additional plugin adds HTTP requests, database queries, and a potential attack surface. On a performance-optimized VPS with cPanel or a managed server environment, plugin bloat is a measurable performance liability.

Comparison of All Four Methods

Handling Edge Cases and Common Failures

The toggle is not visible in Elementor's Page Settings

This happens when the active theme does not register support for title-tag or when a child theme overrides page.php without checking Elementor's meta. Solution: switch to the CSS method or use a plugin.

The title disappears in the editor but reappears on the front end

Almost always a caching issue. Purge your caching plugin's cache, your CDN cache (if using Cloudflare or BunnyCDN), and your server-level cache. On a Dedicated Server running Nginx with FastCGI caching, run:

sudo find /var/cache/nginx -type f -delete
sudo systemctl reload nginx

The title is hidden but a blank space remains at the top of the page

The theme is applying padding or margin to the title container even when the title text is hidden. Target the container element, not just the heading:

.page-id-123 .page-header,
.page-id-123 .entry-header {
  display: none;
}

Custom post types do not respond to the Elementor toggle

Elementor's toggle only works on post types that Elementor explicitly supports. For custom post types registered by plugins (WooCommerce products, portfolio items, etc.), use the CSS method or a plugin that supports custom post types natively.

Hiding the title breaks breadcrumbs or schema markup

Some breadcrumb plugins (Yoast SEO, RankMath, Breadcrumb NavXT) pull the page title from the_title() to populate breadcrumb labels and structured data. Hiding the title visually does not affect these — they read from the database, not the DOM. However, if you use a theme that conditionally removes the title from the template entirely, verify that your breadcrumb and schema output still renders correctly by checking the page source and Google's Rich Results Test.

Technical Decision Matrix

Use this checklist to select the right method for your situation:

• Single page, Elementor-compatible theme, no coding: Use Method 1 (Elementor Page Settings toggle).
• Multiple pages or site-wide suppression, non-technical team: Use Method 2 (Theme Customizer) or Method 4 (Plugin).
• Theme ignores Elementor's toggle, need immediate fix: Use Method 3 (Custom CSS) with the correct selector from DevTools.
• Multisite network or custom post types: Use Method 4 (Plugin) with CPT support.
• Elementor Pro with Theme Builder full-site template: The theme's page.php is bypassed — build your heading directly in the Elementor template and do not rely on any of the above methods.
• After any change: Purge all cache layers before testing on the front end.

If your WordPress installation runs on Shared Web Hosting, you may not have access to server-level cache purging — rely on your caching plugin's built-in purge function instead.

For sites where performance, SSL termination, and full server control matter — particularly those running Elementor Pro with WooCommerce or heavy custom post type structures — a VPS Hosting environment gives you the control to manage caching, PHP-FPM workers, and OPcache settings that directly affect how quickly template changes propagate to visitors. Pair this with a properly configured SSL Certificate to ensure your customized pages are served securely.

FAQ

Does hiding a page title in WordPress affect SEO?

Hiding the theme-generated title using the Elementor toggle or a PHP-level method removes the <h1> from the DOM entirely. This is SEO-safe only if your Elementor layout contains a properly structured <h1> heading widget as a replacement. If you hide the title with CSS (display: none), the <h1> remains in the DOM and Google will still read it — but you risk a duplicate heading structure if your canvas also contains an <h1>.

Why does the Elementor "Hide Title" toggle not work on my site?

The toggle writes a post meta value that your theme must explicitly check. Themes that do not integrate with Elementor's page settings API will ignore this meta key. The Hello Elementor theme and most major commercial themes (Astra, GeneratePress, OceanWP) support it. If yours does not, use Custom CSS or a plugin as a fallback.

Can I hide the page title for all pages at once in Elementor?

Elementor's native toggle is per-page only. For a global setting, use your theme's Customizer option, add a CSS rule targeting .page .entry-title { display: none; } in Additional CSS, or use a plugin that supports bulk title suppression.

Will hiding the page title affect the browser tab title or the SEO meta title?

No. The browser tab title is controlled by the <title> tag in the <head>, and the SEO meta title is set by your SEO plugin (Yoast, RankMath, etc.). Hiding the on-page <h1> heading has no effect on either of these.

What is the difference between hiding the title and deleting the title in Elementor?

You cannot "delete" the theme-generated title from within the Elementor canvas — it is rendered by the theme template, outside Elementor's scope. "Hiding" it means either suppressing it at the PHP level (toggle, theme setting, plugin) or concealing it visually with CSS. If you want to replace it entirely, build a custom heading widget inside Elementor and suppress the theme title using Method 1 or Method 2.