5 Inspiring Website Header & Footer Designs

Don't settle for a premade default header and footer. Elementor enables you to easily customize your header and footer to get a unique and personalized website. Here are a few excellent examples created by our UX designer.

The very first encounter your customers and users have with your brand begins with your site’s header. This is a 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 – 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 made-up corporate websites that we created.

1. Header & Footer for a Law Office

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. Header & Footer for a Construction Company

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. Header & Footer for a Boat Rental Company

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

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

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.

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.

Liked This Article?

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

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 google
Share on twitter
Share on linkedin

Comments

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

Leave a Reply