Give Your Site’s Headers a Conversion Focused Job To Do

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!

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:

1. A Logo or Brand Identity, and...
2. 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...

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.

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.

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.

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.

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.

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.

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.

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

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.

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...

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.

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.

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.

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.

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.

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.

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.

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.

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?”:

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.

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:

skype:Your.Skype.Handle?chat

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?

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...

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.

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.

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.

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:

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!