How to Change the Header Section Color on Specific Pages Using OzSpeed hPanel

Customizing the header section color for specific pages can help highlight different sections of your website, create a unique look for landing pages, or match the color scheme of individual pages. With OzSpeed’s Website Builder, you can easily change the header color for specific pages without affecting the rest of your site. Here’s a step-by-step guide on how to do this.

---

Step 1: Access the Website Editor #

To start customizing the header color, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the specific page where you want to change the header color.

Tip: #

• Customizing the header for specific pages is especially useful for creating distinct landing pages or highlighting important content.

---

Step 2: Select the Header Section #

Click on the header section to open the Design Settings panel.

How to Select the Header: #

1. Click directly on the Header Section at the top of the page.
2. Ensure the header is highlighted, indicating it is selected for editing.

Tip: #

• If your site uses a global header, changes made here will usually affect all pages. To customize a specific page, you’ll need to unlink the header from the global settings.

---

Step 3: Unlink the Header from Global Settings (If Applicable) #

If your website uses a global header, you need to unlink it before making changes that apply only to a specific page.

How to Unlink the Header: #

1. Click on the Header Section to open the settings panel.
2. Click Unlink from Global Header in the options menu.
3. Confirm the unlinking action.

Tip: #

• After unlinking, any changes you make will apply only to the current page, leaving the global header unchanged on other pages.

---

Step 4: Change the Header Background Color #

You can now customize the header background color for the specific page.

How to Change the Background Color: #

1. In the Design Settings panel, go to the Background tab.
2. Choose Solid Color, Gradient, or Image Background.
   • For a Solid Color, use the color picker or enter a hex code (e.g., #FF5733).
   • For a Gradient, select two colors and adjust the gradient direction.
   • For an Image Background, upload an image or select one from the Media Library.
3. Click Apply to save the changes.

Tip: #

• Choose a contrasting color that complements the page’s content for better visual impact.

---

Step 5: Customize the Text and Link Colors #

Ensure that the text and links in the header are easily readable against the new background color.

How to Update Text and Link Colors: #

1. In the Design Settings panel, go to the Typography tab.
2. Change the Text Color and Link Color to match the new header background.
3. Click Apply.

Tip: #

• Use a light text color on dark backgrounds and a dark text color on light backgrounds for optimal readability.

---

Step 6: Preview the Header Changes #

Before publishing, preview the specific page to see how the new header color looks.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the header section on both desktop and mobile views.
3. Ensure the new color complements the page’s content and design.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 7: Publish the Page #

Once you’re satisfied with the changes, publish the page to make the new header color live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm your changes for the specific page.

Tip: #

• Announce updates to specific landing pages or new page designs on social media or in your email newsletter.

---

Troubleshooting Tips #

1. Header Color Not Changing:
   • Ensure the header is unlinked from global settings if you only want to change it for a specific page.
   • Clear your website cache in hPanel and your browser cache.
2. Text Hard to Read Against New Background:
   • Adjust the text color to create better contrast with the new background color.
   • Use a subtle text shadow effect to enhance readability.
3. Changes Affecting All Pages:
   • Double-check that you’ve unlinked the header from the global settings. If not, changes will apply site-wide.

---

Additional Tips: #

• Use Brand Colors: Customize the header with your brand’s color palette for a consistent and professional look.
• Experiment with Gradients: Gradients can add a dynamic and modern touch to your header without overwhelming the design.
• Test Across Devices: Ensure the new header color looks good and scales well on both desktop and mobile devices.