How To Hide Page Titles in WordPress Using Elementor
Hiding page titles in WordPress is a common design practice, especially when building custom layouts with page builders like Elementor. By hiding the title, you can create cleaner, more professional-looking pages without showing the default page title at the top of the content. Here’s a step-by-step guide on how to hide page titles in WordPress using Elementor.
Method 1: Hide the Page Title Using Elementor Settings
Elementor makes it easy to hide page titles directly within its settings for individual pages. This method is quick and doesn’t require any custom CSS or plugins.
Step 1: Open the Page in Elementor
- Log in to your WordPress dashboard.
- Navigate to Pages > All Pages.
- Find the page you want to hide the title on and click Edit with Elementor.
Step 2: Toggle the Hide Title Option
- Once in the Elementor editor, click the Settings (gear icon) at the bottom left corner of the Elementor panel.
- In the settings menu, look for the Hide Title toggle option.
- Turn the Hide Title option ON.
- Click Update to save your changes.
This method will hide the page title for that specific page without affecting other pages.
Method 2: Hide the Page Title Using a WordPress Theme Setting
Many WordPress themes have built-in options to hide page titles. Check your theme’s settings first to see if you can turn off the page titles site-wide or for specific pages.
Step 1: Check the Theme Customizer or Page Settings
- In your WordPress dashboard, go to Appearance > Customize.
- Look for an option like Page Settings, Layout, or Titles in the Customizer. Some themes allow you to disable page titles globally.
- If the theme has individual page settings, you may find an option to hide the title when editing a page. This option is typically found in the Document Settings or a meta box under the WordPress editor.
Method 3: Hide the Page Title with Custom CSS
If you need more control or want to hide page titles globally, you can use custom CSS to hide page titles for specific pages or for all pages on your site.
Step 1: Find the Page’s ID
- Navigate to Pages > All Pages in your WordPress dashboard.
- Hover over the page you want to hide the title for, and in the bottom-left corner of your browser, you’ll see a URL that contains the Post ID (e.g., post=123).
- Take note of this ID, as you’ll use it in the CSS.
Step 2: Add Custom CSS
- In your WordPress dashboard, go to Appearance > Customize.
- Click on Additional CSS.
- Add the following CSS code to hide the title for a specific page (replace 123 with the actual page ID):.page-id-123 .elementor-page-title { display: none; }
This will hide the page title only on the page with ID 123.
- If you want to hide the page titles for all pages, use this CSS:.elementor-page-title { display: none; }
- Click Publish to save your changes.
Method 4: Use a Plugin to Hide Titles (Optional)
If you’re not comfortable using CSS, you can install a plugin specifically designed to hide page titles.
Step 1: Install and Activate a Plugin
- Go to Plugins > Add New in your WordPress dashboard.
- Search for “Hide Page and Post Title” or similar plugins.
- Click Install and then Activate.
Step 2: Hide Titles Using the Plugin
- After activating the plugin, you’ll see an option under each page/post editor to hide the title.
- Check the Hide Title box and save your changes.
Conclusion
Hiding page titles in WordPress using Elementor is easy and can be done through the Elementor settings, custom CSS, or even a plugin. Depending on your theme and specific design needs, you can choose the method that works best for your website. By following these steps, you can create more customized and cleaner pages for your WordPress site.