No web design is complete without a proper header and footer. Check out these amazing examples of great headers and footers, and even better — learn how to make them. 

website header

Headers and footers are almost always underrated features, but they can add great value to your users and a touch of uniqueness to your design. 

Any website, from a simple blog to photography and ecommerce websites can benefit from well-designed headers and footers. 

We’ve collected several examples of excellent headers and footers with great functionality. 

The beauty of these examples is that you no longer need to code to edit your website’s header or footer, and instead, can utilize Elementor’s visual customization via the Elementor Theme Builder.

But first, what are headers and footers, and why are they important to your website design? 

What Is a Header?

The header is the top area that consistently appears throughout your site’s web pages and posts. There are also websites that have different headers for different sections of the site.

The first impression your users will get of your website — whether they’ve reached your homepage, about page, or any other individual post — is through your header design. And, if designed well, it will draw the user’s attention and serve as a hook for them to keep scrolling and read on. 

The header can also play an important role in promoting your business’ brand identity 

by incorporating elements like the company logo, typography, colors, and the overall brand language. 

Headers also contain functional options like site navigation, site search, a shopping cart (for sales sites), call to action (CTA) buttons, and other functions that enhance the user experience and increase conversion rates. 

What Is a Footer?

Footers, just like the headers, appear consistently throughout the website, on all pages and posts, but, unlike headers, they appear at the bottom. 

Footers often receive fairly marginal attention, which is really a wasted potential since the footer repeats itself on every page of the site. They are just as important as the headers. 

Your footer design, depending on the settings you choose, can display useful and important information, such as newsletter registration, copyright information, terms of use and privacy, a sitemap, contact information, maps, website navigation, and much more. 

Website Header Examples 

1. The Best Header for Navigation

We encourage you to experiment with the Theme Builder, you’ll be amazed at how fast this process is. Try it - It's FREE!

This page header is suitable for sites with more complex navigation. It has a top bar and another central navigation menu. It also includes a search function, for the more direct navigation. As a bonus, you can see the business’ logo on the left, together with the business’ colors. This classic, business-like header gives the impression of professionalism. 

2. The Mobile-Friendly Header

The header section has a ‘hidden’ navigation in the Hamburger, and on the other side, the contact details and location are highlighted with large icons. It also has a top bar with social network buttons. Take note of how slim and minimalistic the header is, allowing for certain information to stand out. Furthermore, this minimalism plays an important role when it comes to mobile browsing since with just a few tweaks, you can make this header look amazing on the mobile screen. 

3. The Artistic Header

In this design, you can see an example of an unconventional use case – navigation not via the traditional menu, but rather using an icon with a link. This can be used on sites with a small number of pages or those that have internal navigation on long landing pages. There is also the use of a ship in the header, that looks sort of like waves, and the overall header size is bigger, to make it stand out more.

4. The Enchanting Header

example of the enchanting header

This is another example of the creative use of the header. Here, you can see a large background image area used to extend a full-screen-width making this look one, continuous image, without breaking the atmosphere of the page. 

5. The Minimalist Header

The design shows uses of bright orange colors set upon a dark grey background. It gives the impression of cleanliness and order. If you wanted to switch the colors around or use gradients instead, it will take you only a few seconds to achieve the desired result.

Website Footer Examples

1. The Extra Long Footer

example of the extra long footer

This footer design puts an emphasis on design with complex navigation. On the left side it has a column with a logo and details, and on the right, there’s a navigator, contact, newsletter, and social buttons.

What’s key to emphasize here is that even when the footer contains numerous features it does not appear overloaded, because there is a clear design division in the regions. 

Watch the video tutorial.

2. The Mobile-Friendly Footer

The footer’s substantial size is eye-catching, its large area is filled with a video form background form and with a contact form. Again, the contact information and location are positioned in a place that really stands out.

When designing a header or a footer, don’t forget to take mobile devices into consideration, and understand how the design may differ on them. 

Watch the video tutorial

3. The Artistic Footer

example of the artistic footer

The footer has a large area with a video background and complex navigation. An image was also added in a separate area and attached it to the center to get a suitable design effect. 

Watch the video tutorial.

4. The Enchanting Footer

The footer has a large image above the navigation area, with the bottom area being the background color of the image, containing basic navigation in several columns, a contact form, and more. 

Watch the video tutorial.

5. The Minimalist’s Footer

example of the minimalists footer

The simple footer offers little in terms of information, however it takes a large space and implements uneven geometrical shapes to enforce the sense of artistic freedom and a connection abstract art. 

Watch the video tutorial.

Tips for Creating Headers and Footers in Elementor

  1. You can change the header image and even set the featured image to be displayed dynamically, a different image for each page, using the Featured Image widget. You can also use the Conditions feature to create several headers and use each one per category or other conditions. For example, you can build one purple header for your health category and another pink header for your teen category. The possibilities are endless here.
  1. If you want to add code to your header in WordPress, simply follow the process of building your header using Elementor, then place an HTML widget inside the header. After this step, paste the code or CSS you want to insert. This is a simpler and safer method for placing code or CSS to your header and is more recommended than trying to add code to ‘header.php’ or ‘functions.php’.
  1. In order to remove a header or footer in a specific WordPress page, use Elementor’s built-in ‘Blank Canvas’ template. Here is a quick guide on how to do it.
  1. We recently released a guide concerning how to create a Sticky Header in WordPress – be sure to check it out.
  1. I wrote this earlier but it’s important enough to repeat: place ANY widget or element in the header using Elementor. Some recommended yet uncommon widget choices for headers include: social media buttons, video, slider and call to action widgets.
  1. Create an Elementor transparent header by using Elementor’s Motion Effects or by following this video guide.

Edit Your Own Header in WordPress With Elementor

Website header design is paramount to the success of your business, and the great thing about the Theme Builder, as opposed to any theme you download, is that you are always only a few clicks away from changing your site’s header, or even designating a certain header just to a particular area of your site.

With Elementor’s Theme Builder and its responsive design, you get control over all design elements which will enable you to create a customized header and footer that will perfectly fit your needs and make a truly great website. 

We encourage you to experiment with the Theme Builder, you’ll be amazed at how fast this process is.

Try it – It’s FREE!