A header is an easy overview of what can be found on your website, it should be easy to use for both desktop and mobile.

In this tutorial we are going to discuss the following points:
Global Information
Header effects
Add logos, call to actions

1. Global Informations

All of our templates have a header design, these can be easily adjusted via Elementor. When you change the header, it does that all over the website, or you must have set it differently.

A header must clearly and quickly indicate what your website is about and where they can find what they come to your website for.

2. Header Effects

In your header, you can add various effects such as:

Sticky headers
Having a sticky means that if the audience on your website continues to display the header while scrolling down. This can be applied to both desktop and mobile.

Watch the video to add a sticky effect to your header

Transparent header
A transparent header ensures that your header looks better on a video or slide bar.

Make sure you don’t forget to make your header visible again while scrolling, watch the video on how you can do this.

Mobile header
Your mobile header is perhaps the most important 80% of the audience visiting your website will do this on their phone.

3. Add logos, call to actions

Logos and call to actions in your header can be an addition to your website, a logo builds trust and recognition and a call-to-action button such as “let’s connect” ensures that people contact you. This only requires balance, adding too much to your header causes distraction and looks unprofessional.

Logo requirements

Adding a logo is essential for your website, but there are some rules not to make your header too big, but also not to make your logo disappear into thin air.

– PGN. format with transparent background
– rectangular shape logo
– Max file size of 150kb


Use a horizontal logo or company name. This ensures that the header remains clean and uncluttered.