Have you had the chance to use our recently released Header & Footer feature in Thrive Architect yet?
It can open up a HUGE range of new conversion focused possibilities for your website.
In fact, one online design trend we’ve noticed quite a bit lately is what we like to call the Double Header.
Read on to learn exactly what double headers are, see a breakdown of 18 real life examples and learn how you can build your own conversion focused Double Header using the Headers & Footers feature now available in Thrive Architect!
The DNA of a Good Web Page Header
Since you now have the power to build and customize headers with the Headers & Footers feature in Thrive Architect, let’s quickly touch on the basics of what makes a good header in the first place.
When you think about headers for websites, there’s at least two standard elements every header incorporates:
- A Logo or Brand Identity, and...
- A Main Navigation Menu
Here's a very basic example to illustrate that point:
Without these two things, a header isn’t really a header, right?
Generally speaking though, website headers have become increasingly complex as people expand their functionality to include more design and clickable elements.
These more complex header types generally add one or more of the following features:
- Page Titles
- Calls-To-Actions (Lead gen and opt-in offer buttons, product offers, etc.)
- Contact Information (phone numbers, physical addresses, emails, etc.)
- Social Sharing Buttons
- Search Bars
- Shopping Carts (for Ecommerce Sites)
- Login / Logout links or buttons
- User Profile Links
- Notifications (seasonal sales, expiring offers, event information, etc.)
- Alternate Language Links
- Sitemap Links
However, know that every element you add to your header can become a distraction from the main conversion goal each page of your website is supposed to be tasked with. That’s because your headers are typically global elements shown on every post and most pages of your site.
This means it’s important to understand what the primary conversion goal is for every post or page on your website so the header design never interferes with conversions inadvertently. In some cases, you may need to hide the header all together (like on a sales page) to avoid this.
But it turns out there’s a way to both expand the functionality of your header while still being able to make certain page-by-page modifications easier on yourself. It’s called the Double Header design and now I’m going to tell you all about it...
Meet the Double Header Design
So what exactly is a double header?
Just this: two header bars stacked on top of each other working to expand the header's functionality while improving its aesthetic appeal.
Because double headers range in design and complexity, a picture is worth a thousand words. That’s why I scoured the internet for several examples of double headers and categorized them into specific use cases to help you apply the most appropriate model for your own business website.
Let’s take a look at each of them...
Call-To-Action Double Headers
One of the most powerful double header styles we’ve noticed are those that contain a call-to-action. Featuring a strong call-to-action in your web page header is always worth testing since it puts your site's primary conversion goal front and center for visitors — as soon as the page loads.
These primary call-to-actions can be one of many possible conversion goals including free download opt-in offers, recommended product links — or for local businesses, a free class or coupon to get new customers in the doors of your physical storefront.
Here’s a few types of call-to-action focused double header examples to show you how they’re being used online.
Lead Gen Call-To-Action
The Membership Guys is an online membership site focused on teaching people how to create, well... membership websites.
They use a visually appealing double header design that incorporates their logo and main menu navigation links in the top element, while presenting a lead magnet CTA button in the bottom header element.
Clicking their “Download Now” button loads a lead generation landing page to further persuade visitors to sign up to their mailing list in exchange for a free download.
(Alternatively, you can make the CTA button open a 2-step lightbox instead of a separate landing page.)
NOTE: Keep reading to see how you can build a variation of this double header with Thrive Architect.
Content Box Element Call-To-Action
The internet retail giant Amazon also uses the Call-To-Action double header design to market “New & Interesting Finds” at the top of their website.
By showcasing a range of new and interesting product images at the top of the page, one of the images is likely to trigger a visitor into impulse buying one of the products they see.
The technicalities behind this particular example are interesting because the entire top header element is clickable.
By clicking anywhere on the top header element, you’ll be brought to Amazon’s “New & Interesting Finds” category page. From there, an unplanned Amazon shopping spree can ensue.
Direct Offer Call-To-Action
The London Fight Factory, a London based Mixed Martial Arts gym, uses a straightforward CTA double header strategy. They place two basic buttons on either side of their centrally positioned logo.
On the left is a “Costs” button that takes potential students to a page explaining the gym’s membership and drop-in class fees. The CTA button on the right hand side is a coupon discount offering new students the chance to “Sign up for a free trial class”.
For a martial arts gym, getting new students in the door is obviously the primary conversion goal for their website so consider testing a similar direct call-to-action double-header design if you operate a similar sort of business.
Local Business Double Headers
The double header design also offers local businesses the opportunity to place their most important contact and physical address information at the top of their pages where potential clients and customers can easily see it.
The following are a few examples of sites doing just that.
Service Area & Phone Number
The Closet Works builds custom closets for clients in greater Philadelphia and New York City.
They use the double header design strategy to help communicate their service areas immediately to existing and potential customers:
The Philadelphia 5 counties
South & Central New Jersey
Manhattan and Brooklyn
They also include their phone number in the header to help customers contact the company directly. Unfortunately, Closet Works didn’t make their phone number push-to-call capable on desktop, however they did well to make it so on mobile.
Store Hours & Contact Information
The Rowing Dock is a local Kayak, Canoe and Stand Up Paddleboard rental company in Austin, Texas.
In order to get their most useful information to potential customers as quickly as possible, Rowing Dock’s website deploys the double header design to display multiple contact and info elements upfront.
This includes their:
- hours of operation
- contact email
- phone number
- and language settings
Office Locations & Call for New Hires
Vital is a digital marketing agency with offices in Boston, Massachusetts, San Francisco, California and Portsmouth, New Hampshire.
To help local clients identify the office location that’s nearest them, Vital displays location links for each of their 3 locations. Clicking one of these links loads the relevant contact and address information for the respective office.
The double header bar also uses a link for prospective hires so they can go straight to the online job application page for available positions at Vital.
Guarantees and Anxiety Reducing Double Headers
The double header design strategy can also be used to message product guarantees or reduce purchase anxiety for customers.
The following are a few simple website examples we found that use this method to encourage customers to pull the trigger on their products...
Seasonal Sales & Product Guarantee Links
Gant is an international fashion brand based out of Sweden.
For their online store, Gant uses a simple black and white double header to message their online shopping benefits including their free shipping policy, seasonal sale offer and 30 Day Return guarantee.
The text phrases not only communicate specific messages, but double as a links to specific pages on the Gant website.
Free Shipping & Discount Coupon Offers
Baxter of California is a beard, skin and hair care product company based out of California.
Much like Gant, Baxter telegraphs their free shipping offer in the top element of their double header, but differs by adding a product discount offer to new visitors in exchange for signing up to their email list.
Text Based Offer GIF
The UK based, minimalist footwear brand VivoBarefoot uses a simple double header design to communicate multiple messages to customers. However, they use a rotating slider in the top element of the header that scrolls through 3 text based messages.
We’re always negative on sliders here at Thrive Themes, however, VivoBarefoot's rotating text message GIF works to communicate their free shipping offer, referral program and kid shoe discount to visitors.
Unfortunately, if you try to click on any of the text messages, nothing happens. This feels like a missed opportunity to engage with customers that are interested in each of those deals.
A better strategy would be to use side-by-side clickable text links like we showed above in the Gant example.
Design Focused Double Headers
Some double headers on the web are also being used to help build brand recognition through both their design and copy.
Such design focused double header examples are usually either simple displays of brand taglines or much more prominent showcases of a brand’s logo.
Below are a few examples showcasing these two different styles.
Brand Recognition Tagline
GrowthLab, Ramit Sethi’s online entrepreneurship training website, uses the double header design very simply. The top header element offers an opportunity for Ramit to plug his brand with a very short tagline:
We Make Entrepreneurs
If you choose to do this, be cautious as emphasizing inspirational taglines tends to be a strategy for well established brands. It's better to use a clear, benefit driven phrase instead if your online business is still relatively unknown.
Brand Logo & Subscription Link
The woman’s magazine Glamour prioritizes design in the double header by inking its logo in big, bold letters. The logo dwarfs the main menu navigation elements beneath it.
This particular design also doubles as a CTA double header since a clickable image of the current issue's cover links over to an online subscription sign up page.
Stylish Topography & Sponsor Logo
I Love Typography’s double header design showcases its business of font types by placing the name logo in big letters. They also provide a link to learn more about that particular font type (Tungsten Rounded) in the upper header element.
I Love Typography then uses it's leftover header space to recognize their corporate sponsor with the benefactor’s logo next to their own.
Social Sharing Double Headers
Websites that rely heavily on social media platforms can also use the double header design to add social media icon buttons to the top of their pages.
Below are a few interesting examples of sites actively using that strategy.
Facebook Page Link Triple Header
Floret Flowers is a small, family owned flower farm located in the US state of Washington.
Their website’s triple header provides a lot of links to visitors. Those links vary from asking people to register for a free mini-course to linking over to Floret Flowers online seed and flower shop.
In the top header element however, Floret Flowers provides social media icon buttons that link to their Facebook page, instagram account and pinterest board.
Interestingly, when visitors click on the facebook icon, it not only loads Floret Flowers Facebook page, but also opens a Facebook Messenger chat box showing multiple pre-loaded questions the customer can click to ask including “Can I learn more about a product?”:
To set these prompt questions up on your own Facebook Page:
- Open your Facebook Page Settings.
- Click on the "Messaging" tab.
- Turn the "Help people start a conversation with your Page" under General Settings to "On".
- Add your prompt questions.
YouTube Channel Link Triple Header
Another example of social media icon links in a triple header design can be seen on the website One Hungry Mama.
Because it’s a site built around providing meal strategies and recipes for busy moms, it also provides social media icon buttons linking to important destinations like the site’s YouTube channel.
If new visitors go down the rabbit hole of watching some of One Hungry Mama’s videos, they’ll learn something valuable while building a personal relationship with the brand at the same time.
Skype Chat Link Double Header
PIT Designs is a web design shop based out of Erbil, Iraq that uses a wide range of contact links and buttons to help encourage potential clients to connect.
They provide a phone number, contact email, their website available in multiple languages and several social media icon links. Interestingly, among those social sharing links is a Skype link to make it easy for potential customers to voice call them over the internet.
Setting up your Skype button to automatically open a chat is super simple too! Just use the following link formula as the link destination for your Skype button:
If a visitor clicks your Skype button, Google Chrome will open a new tab and ask visitors whether or not they want to open their Skype application to start a chat with you.
Pretty slick, right?
Double Headers for Podcasters
With the increasing popularity of podcasts across virtually every internet niche, a growing number of websites have begun to showcase their latest episodes in the header.
The double header design is great for this approach since you can display a play button for the latest podcast episode at the very top of the webpage alongside your site logo and main navigation links.
Here’s a few examples of this podcast header in action...
Streaming Podcast Audio Player Example #1
Amy Porterfield is an internet marketer and entrepreneurship coach with a popular podcast discussing those topics.
In the top element of her double header, she queues up her most recent episode to make it easy for new and returning visitors to tune in and get to know her brand better.
Streaming Podcast Audio Player Example #2
Joe Rogan is host of the Joe Rogan Experience Podcast (an homage to Jimi Hendrix’s band name) and one of the most popular podcasters in the world.
Even though his JRE Podcast website isn’t much to look at, he makes teeing up the latest audio files easy by dropping a streaming audio player in the top element of his double header.
Notice that Joe also uses social media icon buttons in the upper right of his double header to link out to his Facebook page, Twitter profile, Apple Podcasts page and YouTube channel.
Podcast Cover Art & "Click To Listen" CTA Button
Another podcasting giant, Tim Ferriss, uses a hybrid double header design strategy to get the conversion goal he wants at the very top of his blog.
Tim combines the image of his podcast cover art with social proof, copy describing his most recent guest and a CTA button inviting visitors to listen in.
Upon clicking the CTA button, the episode starts streaming in a new browser window.
The main navigation links in the bottom element of the double header are small, but still prominent due to the high contrast of bold white font on a black background.
How To Build Your Own Double Headers with Thrive Architect
So now that you have a ton of double header examples to pull inspiration from, it's your turn to customize a mobile optimized variation using Thrive Architect.
To show you what's possible, I crafted a variation of the Lead Gen CTA double header I discussed at the start of this post. The finished variation looks like this on desktop:
Like this on tablet:
And like this on mobile:
Not bad, eh?
But if you're curious to know how to build it from scratch, the step-by-step details are below:
Add a Header to Your Landing Page
To get started crafting your own custom Double Header, click on the gear icon on the right hand Thrive editor sidebar:
Then, choose the "Global" section from the list of settings that appears in the sidebar:
In the "Global" settings, you will see that there are no headers added to your page yet. Click on the "Header" field to open it and start adding a header:
A pop-up window will open where you can either choose or create a header. If you have previously created a header, that will appear in the "Saved Headers" section.
Click on the "Create New Header" option and select the "Blank Header" option to get started.
Create Your Double Header Upper Section
In Desktop mode, the upper section uses a split menu design with a simple logo in the middle. How do you make that happen in Thrive Architect?
First drop a Background Section element into the Header editor area. Next, use a 3-part "Columns" element within your Background Section and add 2 separate "Custom Menu" elements in the left and right 1/3 columns.
Use a Text or Image element to insert your brand logo in the middle column.
Now I know you're clever and already see the mobile responsiveness problem this split menu design creates...
That's right... it turns the 2 separate "Custom Menu" elements into 2 separate hamburger menu icons when shown on tablet and mobile screens.
That's just weird so let's correct it.
To make the split "Custom Menu" elements change to a single "Custom Menu" element on smaller screen sizes, you'll need to add a 3rd menu element that contains all your navigation links together.
Make the split "Custom Menu" elements only visible on desktop and the full "Custom Menu" element visible on tablet and mobile.
That's what I like to call the Thrive Architect mobile responsive split menu hack.
Create Your Double Header Bottom Section
To create the bottom section of this particular double header example, all you have to do is add another Background Section Element filled with a new 3-part "Columns" element beneath your upper double header section.
Add an image in the left column (for the 'Free Report' picture), "Text" element in the middle column for the copy, and a call-to-action button in the right column.
Lastly, don't forget to optimize each of the column elements for tablet and mobile responsiveness so they behave properly on smaller screen sizes as well. For this example, I hid the left column image on mobile to shorten the vertical space of the header in that view.
Deploy Your Double Header Over & Over Again
A very slick feature about the new Header & Footer feature in Thrive Architect is that it automatically saves the header you just built as a template for future use.
That means you can add the headers you build within the Header & Footer editor to any landing page on your website in just a few clicks. Talk about handy!
Check Out Advanced Headers in Thrive Theme Builder!
It's important to note that a landing page header (the subject of this article) is different from the header your WordPress theme uses by default on posts and pages.
The custom Header & Footer feature discussed in this post is ideal for creating customized landing page headers, but isn't the same as your WordPress theme header.
To address this, we created Thrive Theme Builder — our new theme for WordPress — where you have the ability to 100% customize headers across your WordPress theme page templates!
Now It’s Your Turn
You now have several real world examples, conversion goal strategies and Thrive Architect tools to build your own double headers.
Which double header design will you choose for your WordPress website?
Let me know in the comments section below along with any comments or questions you have about creating conversion focused headers!
Sweet! A double header for your landing page is a great feature. Well, even a single header that you can re-use for different landing pages is already great :). Looking forward to the Theme Builder where this functionality can also be applied to the theme as a whole. That paves the way for much more options in header and footer design for the entire WP theme. Can’t wait :).
Many thanks Michiel! Hopefully you got some cool ideas from the post for how to upgrade your header. I agree with you that Theme Builder will also take Header and Footer designs to the next level!
Very cool but I am not clear on how to add “2 custom menu elements” within the right and left column? Can you clarify please? I have squared theme and wish to change theme Colour (shows in all my headers). Can you pls advise how I do this? Many thanks
Hi Michelle, the custom header design showcased in this article is separate from your WordPress Theme design. It’s only available when you’re editing landing pages which disable your WordPress theme design when one of the templates is loaded. I’ll be adding a tutorial screencast to the post soon to help show you step-by-step how to build this particular header design.
This is awesome! I love this tutorial/comparison/inspirational Blogpost!
And off I go to build my double header!
Thank you Matt,
Whoop, whoop! Good luck with your new double header build Alex!
this is awesome! Thank you for this neat tutorial!
I already used thrive headers for building kind of this… the only missing link is the themebuilder. To use the header and footer for every dynamic content page would be just awesome! I really look forward to see this happen.
Have a good time and keep up the awesome work,
Cheers for your comment Alexander! We’re working hard to get Theme Builder released for you as soon as possible.
Can i apply it for both pages and posts? To make a one header for the whole site.
Or only made for pages like the previous?
Hi Abo, the custom Header & Footer feature showcased in this article applies only to pages. The feature isn’t available when editing your posts with Thrive Architect.
How can we add these to Squared Theme header?
Hi Lewis, the Header & Footer feature showcased in this post works independently of your WordPress theme. It’s for your Thrive Architect built landing pages which always disable your Theme settings whenever one of the landing page templates is loaded.
Hey Matt, Mike here from The Membership Guys!
Thanks for including is in this great article – we’ve big fans of Thrive and in fact while our site is custom designed, the CTA you’ve shown from our header actually links to lead gen pages built with Architect 🙂
Keep up the great work!
Hi Mike, thanks so much for reaching out! Happy to hear you liked the article and glad we could showcase your site and great web designs in this post. Thanks again for your comment and for using Thrive Architect for your lead gen pages!
How does this compare to setting up a ribbon on Thrive Leads which pops up when the viewer scrolls?
Hi Eddy, the Custom Header & Footer editor in Thrive Architect is a completely different feature from the Sticky Ribbon feature in Thrive Leads.
When created and applied, the header becomes a permanent part of a landing page where the Sticky Ribbon is a closable overlay that usually has the primary purpose of building your email list. The Sticky Ribbon in Thrive Leads also allows you to A/B test different opt-in form designs (not just Sticky Ribbon style forms) against each other.
This is great. Thanks for these excellent tutorials. I am confused on one point. The examples you give seem to be home pages for the sites. However, as you mentioned, I think, we can’t change the home page on our site until theme builder comes out. So are you saying we should use one of these landing pages as our home page if we want something like this as our homepage? Clearly I’m confused. Please help me see what I’m missing here because I can see why this would be good on my home page but I think I don’t want this on one of my sales pages since it would distract as you mentioned. Thank you for any help in clearing this up for me.
Hi Duke, for sure you can create and setup a landing page design to act as your Homepage with Thrive Architect.
In fact, that’s exactly what I do for all my personal websites. If you choose to build your homepage this way, then of course you can create a custom header and/or footer for that homepage styled landing page as well. Then for your sales page, you can omit the custom header to avoid distracting visitors from the primary conversion goal you’re aiming for.
Thanks, Matt, that makes sense. This is a bit off the topic of your post but on topic with this comment string… So, how do I set a landing page as the homepage? I assume this is rudimentary, but in WP the page marked as my homepage is determined by the theme so the header can’t be changed. Do I use redirect or something else? Thanks
Hello Duke, check out this article
Thanks a ton. Really appreciate it.
Yup, like the article Paul linked to shows, it only takes a few clicks on the WordPress backend to set any page on your site as the homepage.
Hi Matt, I do the same thing on most homepages. The themebuilder awaiting, I was wondering, how you solve the issue of having different headers? Meaning your self designed homepage headers VS themepages (blog,product,shop, 404,…)
Thanks for the inspiration, Matt!
Does anyone have actual data or at least experiences about the results and effects it can have?
Thanks so much Bennet!
At the moment, I don’t have any hard data on the double header designs, but it would be a cool Thrive Optimize landing page A/B test to run…
Very helpful article keep up the good work……Implementing on my web page lets hope for the best…
Just went and created a footer. Super simple.
Not being able to deploy it across my whole site. Super annoying.
Any chance of an ETA for the thrive theme builder?
Loved this guide, my homepage Header now looks amazing and I got rid of the bulky opt-in form I had at the top.
One question: when I tried to move the freebie image overlapping the upper section (same as it’s done in the example, I did it by changing the upper margin to a negative number), my image disappeared underneath the upper section. I ask here just in case someone else has the same problem 🙂
You’ll need to play with the z-index of the elements.
The element with the higher Z-index will be displayed first.
So if you’re background section above the image has a z-index of 5 and the next one has a lower Z-index, it will always overlap.
(Sorry I would need to see the exact page to give better instructions 🙂 )