How to create your own stylish header

  • Creating or designing an image for the header is not very difficult. You just need a bit of imagination or creativity, and use a image editing softwarre program like Photoshop. But calm down, if your level is not professional, you have plenty of free image editing programs such as Gimp. 
  • Here you are a few tips to create headers with style. 

    The first thing you have to be clear about is what you want to communicate. Make yourself comfortable, grab a paper and write what you would like to communicate in your header. 


    The style is the look that will have your header. Would you like a
    retro look? modern? minimalist? 
    The style you choose is essential, since it depends much on fonts, colors or elements that you use. 


    The choice of colors is very important. The first thing you have to think is the message you want to communicate: If your intention is to create a corporate header, you should use a range equal or similar to the colors of your shop. This will make it more integrated and harmonic. 

    One tip: so your head is completely integrated in your web, better use the same background color that the page has.

    However if your intention is to highlight a particular product or any external link, it is best that the header much contrast with the web. For example, if your page background is white and your header´s background color is red, the contrast will be very high. So, you´ll manage to attract the user's attention, since the objective is he clicks on the image to take him/her to the product advertised. 

    Messages are an essential part to the success of your header. Make sure that they´re clear and concise, short sentences with a good font size. Do not put too small and long texts. Today's media and the abundance of information have make our brain used to process information quickly. 

    Before you invest time reading a web page, the user will skim the content to determine if it´s worth reading, and if no message arrives him or doesn´t catch his/her attention, will run to another page. So remember: short and concise sentences. 


    Fonts that combine will create a good integration of the design. Try not to overdo with the types of fonts that you use, normally simplicity is more attractive. 
    You can find plenty of free fonts on sites like,Urban Fonts or Font Squirrel 


    You need to know the width in pixels of your page to create a header with the correct size. Anyway, Oleoshop can adjust your header to the width of the page automatically. Tip: create your images a little larger than the original since this way you ensure that the image looks with good quality on any screen. If it is a header to 100% of the page the recommended width is1920 pixels. 
  • I hope these ideas help you.


The Oleoshop team

Oleoshop is the ecommerce platform in the cloud that allows you to create your online store quickly and easily, and get amazing results.

search posts

Last posts

This website stores data as cookies to enable the necessary functionality of the site, including analytics and personalization. You can change your settings at any time or accept the default settings.

cookies policy


Necessary cookies help make a web page usable by activating basic functions such as page navigation and access to secure areas of the web page. The website cannot function properly without these cookies.


Personalization cookies allow the website to remember information that changes the way the page behaves or the way it looks, such as your preferred language or the region in which you are located.


Statistical cookies help web page owners understand how visitors interact with web pages by collecting and providing information anonymously.


Marketing cookies are used to track visitors on web pages. The intention is to show ads relevant and attractive to the individual user, and therefore more valuable to publishers and third-party advertisers.