The New Way to Build Website Header & Footer [5 Inspiring Examples]

You don't need to use code to fix your header!
In this post, you will learn about the revolutionary new way to edit your site's WordPress header using Elementor Theme Builder. Watch the creative header speed art videos I created for this post.

website header

It’s true – 

You no longer need to use code to edit your website’s header!

As a web designer, editing website headers has always been a huge deal for me.

You had to use code – and I prefer designing over coding any day.

Honestly, I fell in love with the way you can edit and customize headers visually in Elementor. I was so inspired, that I decided to create not one but 5 videos showing how I design different headers and footers in Elementor.

So what is a website header, and why is it so important?
The header is the top area that consistently appears throughout your site’s pages and posts. Some websites have different headers for different sections of the site.

The very first encounter your customers and users have with your brand begins with your site’s header. 

This is your website’s hook. 

The header is also the business’ branding label – the logo, colors, and overall brand language. This is why web designers invest serious time designing this area with both originality and efficiency.

Headers also contain functional options such as site navigation, site search, shopping cart (for sales sites) and more.

Footers often receive fairly marginal attention, which is really a wasted potential since the footer repeats itself on every page of the site. Depending on the settings you choose, you can display useful and important information, such as newsletter registration, copyright information, terms of use and privacy, a Sitemap and Contact info, a map, navigation, important phone numbers, etc.

In the past, editing required designers to use the template’s ready-made options. When building a website, the last thing you want to do is give your customers a ready-made template that is not custom-built to fit their brand design. Rather, the goal is to build a tailored branded design for your customers.

Today, Elementor gives you both the control and possibility of easily designing headers and footers that are uniquely personalized for each screen.

Combine any feature that comes to mind inside your header – titles, pictures, forms, logos, navigation, share buttons, shopping cart, search, etc.

In this post, we’ll show you examples of headers and footers from various inspiring website examples that we created.

1. How to Add a Search Box, Menu and Logo in the Header Area

This header is suitable for sites with more complex navigation. It has a top bar and another central navigation menu. The footer design also 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 and header contain numerous features they do not appear overloaded, because there is a clear design division in the regions.

2. How to Add Social Media Icons to Your WordPress Header

In this second example, we show how easy it is to add social media icons to any WordPress header using Elementor.

The process is simple:

1. In your WordPress admin, Go to Templates > Theme Builder

2. Click ‘Add New’ and choose ‘Header’

3. Search for the ‘Social Icons’ widget and drag it in

4. Style the widget however you like. (See this tutorial for more info)

Social Media in WordPress header

The ‘hidden’ navigation in the Hamburger, and on the other side the contact details and location are highlighted with large icons. The header also has a top bar with social network buttons.

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.

3. Create a Menu in the Header and Footer Using Elementor's Menu Widget

In this design, I demonstrate 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 that have internal navigation on long landing pages (Or, instead of creating navigation you can simply drag in an icon or any other widget and give it an anchor link.) There is also the use of a ship in the header and footer, that looks sort of like waves.

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

4. Header & Footer for a Travel Agency

Want to change the header text? This example shows how it is done.

Here, large background images are used to extend a full-screen-width. The menu appears at the bottom while only part of it is sticky.

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.

5. Header & Footer for a Gallery

If you wanted to play with the color of your headers, this example will show you how. The design shows uses of bright orange colors set upon a dark grey background. 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.

6 Elementor Header Tricks and Best Practices You Should Know

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

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

3. 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 how to do it.

4. We recently release a guide concerning how to create a Sticky Header in WordPress – be sure to check it out.

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

6. Create an Elementor transparent header by using Elementor’s Motion Effects or by following this video guide.

Conclusion: Edit Your Own Header in WordPress

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.

Need more inspiration? Check out the Envato Elements plugin, which offers dozens of header templates for Elementor, as well as over 2,000+ free templates, each with its own header.

As we demonstrated in this post, you really don’t have to settle for the premade header and footer templates that the theme you’re using provides. With Elementor’s Theme Builder you can create a customized header and footer that will perfectly fit your website’s needs. 

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

About the Author

David Markus
David Markus
David Markus is a UX designer at Elementor, with 8 years of experience in graphic, web and mobile design. He is happily married with two sons and another little-redheaded munchkin. He sports a distinguished beard and a coiffed French mustache, loves to play the drums, travel, and is passionate about typography.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

36 Responses

  1. Unfortunately not so good looking in mobile devices… please focus more especially menu component. I am happy with page designs components, thanks Elementor!

  2. Thank for sharing! It will be great to create a repository for others to share their templates/snippets that can be load shared or load from Elementor.

  3. First and third one are the best because they provide with clear navigation along with good color combination. Providing good navigation and mostly at one place is quite good strategy because user does not has to scroll a lot on your website and he/she can easily get to the page where the desired content is placed.

  4. I agree with you. Sometimes we don’t get what we need in the themes that we use on our website. So we have to make customizations and create a different design to match our specifications. So we have to make sure which theme we choose and how it will fulfil our requirements.

  5. First and third are the best because they provide clear navigation and a good combination of colors. Providing good navigation and mostly at one place is a good strategy because the user doesn’t have to scroll a lot on your website and can easily reach the page where the desired content is placed.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.