Blog - WebSelf

Everything You Need to Know About the Header of Your Website

Image blog WebSelf

The header is the section located on the top of your website as you might already know. Is it possible that you do not know what to put there when you create your website? It is normal. As it is an important section since it appears on all your pages, you surely want it to be in harmony with the rest of your website. We then take the time today to talk about the importance of the header, the rules to follow, as well as showing you some good examples to help you be inspired.

What can you do with your header?

Let’s start with the basics. Most of the time, the header is made up of your logo and your pages, although it is possible to add other items such as your motto, a call-to-action button or your social media badges. It is possible to edit the header’s elements on the website editor by flying over the top of your website. You should then see a little pencil appear on the right. Click on it to open the header editor. You can add content like a title, a picture or a text, as well as increasing or reducing the dimensions of your header. It is also possible to choose the option “Specific header for this page” or “Fixed header” in the header editor. Take the time to familiarize yourself with the header editor in order to create exactly what you have in mind.

Do not forget to create a link that brings people back on your home page if you have a logo in your header. Your visitors expect to be able to quickly go back on your home page by clicking on your logo. To make it possible, go on the header editor, click on your logo, and then on Edit. There will be a little chain symbol located on top of the selected picture. Click on it and then select the Page from my site option, and finally the page where you want people to be sent. It is that easy!

A few rules to follow regarding your header

To start with, you need to remember that your header is not your entire website but only a small part located on the top. In fact, your header should not exceed ¼ of the screen maximum. Furthermore, use your website colors and fonts. This will give a more harmonized and professional look to the whole website. You can have a different header per page but make sure they are similar. For instance, you could have a bigger header for your home page and shorter ones for the other pages.

There are many ways to make a header. You can put your logo on the left side of your header and your pages on the right. It is also possible to put your logo at the center of the page and your pages below. You can add whatever you have in your header but sometimes the less is the best. Be inspired by websites you like and ask for feedback from your friends and family. We found you 3 examples of WebSelf websites with great headers to help you create yours. (All websites are in French.)

Cat’society

What we liked about this header, besides the presence of the logo and its pages, is the small cat picture located on the right with her contact detail. This cat symbol lightly exceeds the rest of the header which brings dynamism to the website.  Otherwise, the website title is there, as well as its motto below. The 3-color rule is also followed.

Agence Véronique Micaëlli

It is not the first time we select Véronique Micaelli Agency’s website as one of our splendid examples. In fact, we find the design of this website both stunning and very professional. You can surely draw inspiration from their header in order to create yours. First, its logo is highlighted because it is located in the center of the home page. We then have the name and all the pages. The header composition gives a very refined touch to this website.

Docteur Laurent Fogel

The third header we show you today is a typical example of what you can do with the header editor. Who said your header needed to be complicated? All pages are clearly there, as well as the logo located top left using another color and font. The font and colors duality creates an interesting contrast which ends up being not too much. The three colors rule is also followed.


In conclusion, we hope we gave you enough information on how to create an awesome header. Take the time to do it seriously since it is the section located on top of your website. Keep in mind that it must not take too much space and that it is a tool that helps your visitors browsing your website. Are you looking for the perfect logo for your website? You can find many articles on how to create an amazing logo on FreeLogoDesign’s blog!

Image blog WebSelf