Skip to Main Content

5 headers to inspire your web design

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to find the best headers to inspire your design?

In the past, a “header” in web design generally referred to the strip always present at the top of websites that contains the logo, the navigation bar, and perhaps some contact information and the search bar. Nowadays, a "header" more often refers to the entire space above the home page.

Improve the quality of your pages by discovering How to Improve Poor Blog Pages

Unless someone found your website through a blog sharing on social media or a referral to another website, chances are they are there through the page. Home. And the first thing they'll definitely see is your header.

By designing a website to meet visitor expectations and improve comfort by making the experience a little more predictable, you can effectively improve click-through and conversion rates.

Now, think about this header space on this homepage.

headers to inspire your design

Most people rely on home pages to give them an overview of what a business or website can do, which means you can't afford to waste this opportunity to meet that expectation. Of course, home page header design may be unique to your brand, but the elements found there shouldn't really be. Visitors expect that scrolling is not necessary in order to find out what a website will do for them. Essentially, your header should be a 10 second story proving to be of value to your visitors.

So what are you going to do with this space to capture the interest of your visitors?

We will talk about some trends in 2017 header design, how to make use of this highly visible real estate and take a look at some interesting examples of headers.

5 header trends

It's not as if your visitors are unaware of their ability to scroll down a page or click through a navigation to learn more about your website. But why should they be forced to do this? There is enough room in the header to display the short message that tells them what to know. And if 50 words or less is not enough, it is not necessarily the rest of the document that will say more.

First and foremost, the homepage header can make or break first impressions of your visitors.

If you are struggling to find a way to introduce your website to this location, perhaps you will find inspiration in the following header design trends of 2017:

1. Oversized hero image

Cleverbird creative

Thanks to the modular style of web design in order to be responsive, most of the designs are now divided into separate sections and blocks. This style of design manages to blend well with the full-width images that populate many websites.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

See also: How to create a full width page on WordPress

Take for example the Cleverbird Creative website. It uses a singular and striking image layered with simple text to welcome visitors. There are no mistakes in what they see here: simplified in beauty.

2. Image slider

Image slider

I think there was a time, not too far in the past, when many of us saw the slider as a viable part of design. So many designers have done a great job in using them in the headers.

There are sliding images that automatically scroll with high resolution images and others that ask visitors to take control of this experience themselves.

3. Using parallax animation

Using parallax animation

Parallax scrolling is still growing strongly and the header has proven to be the perfect place to display this kind of “illusion” visual on web design. What you'll see more recently, however, is the designer giving a parallax effect to scroll a transient border, probably to surprise visitors with the unexpected result.

4. Video background

Video background

Video backgrounds are another such recent trend that really works best when applied to the homepage header. The one on the "28" website does a great job of setting the mood for the restaurant's website, showing off videos of the front and back of the dining establishment.

See also: Adding video backgrounds on WordPress: pros and cons

5. Hidden navigation

Hidden navigation menu

Although it can be argued that the hamburger menu belongs to websites read on mobile devices (as initially planned), it must be said however that in the context of minimalist navigation several websites often use it. The rehabstudio website is a good example of this. As you re-enter the navigation can be visible, your immediate attention is drawn to the exciting visuals with the plus symbol… and then you realize that there are little touches of animation surrounding it.

Read also: How to give style to your navigation menus

That's all for these different sources of inspiration. What do you think ?

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Post Layout: News Ticker

This premium WordPress addon from Visual Composer will allow improve your WordPress site by offering him the possibility of making urgent or important announcements on your website. This is an extension that will no doubt be ideal for magazine websites. Post layout news ticker

Its main features include: 

3 scroll types Classified, support for 3 locations where you can place your ads, the ability to hide or display the featured image, personalization of ad sources, a fully customizable and responsive layout, Multilingual supportEtc. ...

Download | DemoWeb hosting

2. Smush It

WP Smush is a popular WordPress image compression plugin. It automatically compresses images upon upload and can also be used to compress and optimize already existing images. 

smush

You will also be able to set a maximum image resolution and your images will be reduced to more reasonable sizes while being compressed. The free version of this plugin does not require you to create an account to use the publisher's compression server. 

Do not hesitate to consult the 7 WordPress plugins to optimize the SEO of images on your website

The Bulk Optimizer feature will also allow you to optimize up to 50 images at a time, and you can re-run the Bulk Optimizer to compress more images.

Download Demo | Web hosting

3. FAQPlus

FAQPlus is surely one of the best feature-packed premium WordPress FAQ plugins on this list. The amount of customization it puts at your disposal is impressive.

Faqplus

Among its features you will find that it supports the Visual Composer plugin. It is fully responsive and compatible with several browsers. It offers different types of FAQs, in particular: FAQs in question and answer format.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's all for this tutorial, I hope it will allow you to personalize your web design by taking inspiration from these 5 headers.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

Feel free to share the tip with your friends on your social networks. But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

... 

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share3
tweet
Save1