How to Hide the Header Section From Specific Pages Using OzSpeed hPanel

Hiding the header section on specific pages can be useful when creating landing pages, special promotional pages, or unique layouts where you want to minimize distractions. This guide will show you how to hide the header section using OzSpeed’s Website Builder or through your WordPress theme settings.

---

Step 1: Access the Page Editor #

To hide the header on specific pages, you first need to open the page you want to customize.

Using Website Builder: #

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Click on Pages and select the page where you want to hide the header.

Using WordPress: #

1. Log in to your WordPress Admin Dashboard.
2. Go to Pages > All Pages.
3. Click Edit on the page where you want to hide the header.

Tip: #

• Use the Preview feature to see your changes in real-time without affecting the live site.

---

Step 2: Access the Header Settings #

The header settings allow you to control the visibility of the header section on individual pages.

In Website Builder: #

1. Click on the Header section in the page editor.
2. Go to Settings > Visibility Options.

In WordPress: #

1. Click on Edit Page Settings or open the Theme Customizer (depending on your theme).
2. Look for the option labeled Header Visibility, Hide Header, or similar.

Tip: #

• If you don’t see these options in WordPress, you may need to use a page builder plugin like Elementor or check the theme documentation for custom header settings.

---

Step 3: Hide the Header Section #

Follow the steps below to hide the header section from the selected page.

Using Website Builder: #

1. In the Visibility Options, toggle the switch for Hide Header on This Page.
2. Click Save to apply the changes.

Using WordPress: #

1. Scroll down to the Page Settings or Header Options section in the page editor.
2. Check the box for Hide Header or select No Header from the dropdown menu.
3. Click Update or Save Changes.

Tip: #

• Some themes may also have a Page Template option (e.g., “Blank Template”) that automatically hides the header.

---

Step 4: Use Custom CSS (Alternative Method) #

If your theme or website builder does not offer a built-in option to hide the header, you can use custom CSS.

How to Add Custom CSS: #

1. In hPanel, go to Website Settings > Custom CSS.
2. Enter the following CSS code:cssCopy code.page-id-123 .site-header { display: none; }
3. Replace 123 with the ID of the page where you want to hide the header.
4. Click Save to apply the changes.

How to Find the Page ID in WordPress: #

1. Go to Pages > All Pages.
2. Hover over the page title and look at the URL in your browser’s status bar (e.g., post=123).

Tip: #

• Use a browser inspector tool (e.g., right-click > Inspect) to identify the header class if you’re unsure.

---

Step 5: Test the Page #

After hiding the header section, preview the page to ensure the changes look good and that the layout is not affected.

How to Preview: #

1. Click Preview in the Website Builder or WordPress editor.
2. Open the page in an incognito window or clear your browser cache to see the live changes.

Tip: #

• Check the page on different devices (desktop, tablet, mobile) to ensure the layout is responsive.

---

Troubleshooting Tips #

1. Header Still Visible After Hiding:
   • Clear the website cache in hPanel and your browser cache.
   • Check for conflicting settings in your theme or page builder.
2. Page Layout Issues:
   • Use custom CSS to adjust the spacing if hiding the header affects the page layout.
   • Enable a Blank Page Template if available in your theme.
3. CSS Code Not Working:
   • Ensure you’re using the correct page ID or header class.
   • Add !important to the CSS rule (e.g., display: none !important;) to override other styles.

---

Additional Tips: #

• Create Landing Pages: Use a Blank Page Template or hide both the header and footer for distraction-free landing pages.
• Test for SEO Impact: Removing the header may affect internal linking and SEO. Monitor your traffic and make adjustments if necessary.
• Monitor User Behavior: Use Google Analytics to track the performance of pages where the header is hidden and compare it to pages with the full header.