One of the most striking elements you can add to your site is a transparent header. It creates a seamless blend between your header and content, giving your site a modern and professional look.
However, WordPress’s Full Site Editor a.k.a. the block theme doesn’t have a clear approach when it comes to designing a transparent header.
The general consensus among users is either relying on a third-party plugin or custom CSS which can be messy to implement.
In this article, I will show you my technique to create a beautiful transparent header in WordPress as well as best practices and some caveats you need to be aware of.
Let’s dive right into it!
Before we start…
To ensure the best result, I recommend these:
- Make sure you are using a block theme, not a classic theme.
- Make sure the page has a hero section that contains an image.
- Trying this on a demo/staging website is recommended.
With that out of the way, follow these steps.
Step 1: Launch the Site Editor
Open your WordPress Dashboard, go to Appearances > Editor and then select the page which header you want to make transparent.
For, example I’m going to edit the header of this homepage.
Step 2: Open the Header editor
Open the List View menu, select the Header block, and then click Edit.
It will open a new editor that exclusively displays the Header. We are doing this to get the Header structure which we will copy later.
Step 3: Copy the Header content
Still in the List View menu, right-click on the Group block that encapsulates the Header content, and then click Copy.
After that you want to go Back to the main editor page.
Step 4: Add a new block inside the hero section
Now we the Header content has been copied, we want to put it into the hero section.
The easiest approach is to right-click on the first block within the hero section, then click Add before to introduce a new block at the top.
Step 5: Paste the Header to the hero section
On the new block (Paragraph block) that we just added before, you can Paste the Header content onto it.
You will have two identical headers in this page. But don’t worry, we are going to remove one of them later.
Step 6: Remove the original Header
You will see that there are two headers, the main reusable Header (in purple) is the one that we need to remove. Right-click on it and select Delete.
This step leaves only the copied Header that we will turn transparent next.
Step 7: Turn the new header transparent
Now, we need to make the new Header body transparent. To do that, select the new header Group block, open Settings > Styles > Background > Color, and then set the transparency level to maximum.
The result would look this:
Step 8: Adjust the new header content
In some cases, it may be important to adjust the new header content to adapt with the new transparent look.
Make sure that the text, logo, and buttons in your header stays visible. Adding a shadow effect or changing the color may help.
Step 9: Save and test
Finally, you can click Save and see the result. If you are using a staging site, you may push the update to the live site.
I recommend checking the mobile menu as well as the menu icon (like the hamburger icon) may need some visual adjustments.
What are the limitations?
First, we can’t turn the menu sticky as it has no solid background to keep the header content stand out.
Secondly, the transparent header is only visible on the page where you modified the header (which in my case was the Homepage). Other pages like Archive and Blog would use the default Header unless if you modify the Header on them too.
But even with the limitations, it would still look fantastic and serve your visitors as the hub to navigate various pages on your website.
FAQs
Can I make my header transparent only on certain pages?
Yes, you can. One way to do this is by using conditional statements in your header template part. You can use WordPress conditional tags to check which page is being displayed and apply the transparent style accordingly. Alternatively, you can use the Cover block method on specific pages where you want a transparent header.
Will a transparent header work with all themes?
While the methods described in this article work best with block themes, not all themes may support these features out of the box. If you’re using a classic theme, you might need to use custom CSS or a plugin to achieve a transparent header effect.
How can I ensure my header text is readable over any background?
To ensure readability, you can add a text shadow to your header text, use a semi-transparent background instead of fully transparent, or add a gradient overlay to your background image. Always test your design with different background images to ensure it works in various scenarios.
