Introduction
In this template tutorial, we are going to learn how to create a basic header template and how to display this new header on all pages of the website. The header is an important part of your website, as it displays critical information such as your logo or site/business name and your navigation menu. It’s also the first thing your visitors will see when entering your web page. So let’s get started!
Requirements
For the header template we are building, you will need the following:
- Your website logo
- Your website main menu
- Elementor Pro
Elementor templates are created using the Elementor Theme Builder which is part of the plugin’s Pro version. Without Elementor Pro this tutorial will not work! You can find an alternative solution to create a header template without the Pro version in this tutorial.
Preparations
1) Create and upload your logo.
If you already have your logo created and uploaded to the WordPress media folder on your website, you can skip this step. Otherwise, let’s continue. There are many free online websites that can help you create a nice looking logo. My recommendation would be canva.com. You will find many templates and icons to help you on your way.
When you are finished creating your logo, download it in high-quality PNG format (you can select “transparent background” if you have a Canva Pro account). Before uploading your new logo to your website, convert it to the WEBP format using the free tool RomeoLight Webp Conv. This will reduce your logo’s file size while keeping 100% of the quality. You can read about RomeoLight Webp Conv in this review.
2) Create your main navigation menu
Your navigation menus are created in the WordPress dashboard, under Appearance, in the menu settings. You will have to create a new menu. For this template tutorial, I have named the main navigation menu ” Home Navigation”. You can however name yours whatever you like. Now you will need to add the pages you want in your navigation.
For the header we will be creating today, I selected 3 standard pages namely the About page, the Blog page and the Contact page but you can add any page you find important enough to be displayed in your header navigation menu. Now save your menu (remember you can always return here to adjust your menu later).
Creating The Basic Header Template
Now that the preparations are out of the way, we can start creating our basic header template using the Elementor Theme Builder. You can access the theme builder in your WordPress dashboard under Templates, Theme Builder. Inside the theme builder, select “HEADER” and then “ADD NEW”. I named the template “Basic Header Template” but you can choose any name you like. Then click “Create Template”.
When the Elementor Page Builder has loaded, the library screen will display. You can find and use any of the pre-made header templates provided by the Elementor team. However, for this template tutorial, we’ll create our own and you can just close the library screen.
The first step will be to assign your uploaded logo image as the site logo in the global site settings. To access the global site settings, click the hamburger icon top left of the Elementor menu bar and select site settings. Under settings, select the site identity tab. Here you can select/change your site name, site description (tag line), logo and favicon. Add your logo image from the media library and click update. Then click “back to editor”.
Back in the editor, we’ll start by adding a new section with a single column. Leave the column settings to “boxed” and all other settings to default. Now select the style tab. Here we’ll add a section background colour. (Note: the default style will leave the section transparent and you’ll see the “page background colour) For this template tutorial, I have used a dark background colour (#1c1c1c).
Next, we’ll drag the “site logo widget” in the section. Go to the widget’s style tab and set the width of the size required. I am using a square logo in this tutorial and have set the width to 100px (100 pixels). Next, select the “advanced tab” and go to the positioning settings. Set the width settings to “inline (auto)”.
So far, your section will include only the logo and the style set in the section settings.
Now, we’ll drag the “nav menu widget” in the section. In the content settings, you’ll need to select the navigation menu you created at the beginning of the tutorial. We’ll leave the layout horizontal and for this header template, I have changed the pointer to none (you can choose your preferred pointer, ex. underline, if you want). The mobile breakpoint, we’ll leave to tablet, but activate the “full width” option and set “toggle align” to the right.
In the style settings, you’ll find the typography options to change the menu items text size, font and colour. you can select a different colour for hover and active menu items. For this tutorial, I have set the colour to white so it stands out nicely on the dark background. We’ll set the “horizontal padding” to 0px (0 pixels) and the “space between to 30px (30 pixels).
Now, we’ll go to the advanced tab, select the positioning settings and set the width to “inline (auto)”.
Your header will now have the required widgets but look a bit weird. Don’t worry, we’ll fix that next!
To set the correct position of the widgets in your header, we’ll go to the “column settings” and set the vertical-align option to “middle” and the horizontal-align option to “space in between”.
Now you have a nice looking header navigation on the desktop view, but how will it look on tablet and mobile? Let’s have a look and see what changes we need to do in the settings on mobile view.
To open the responsive settings, click the responsive icon at the bottom of the Elementor menu (you’ll see a tooltip appearing when you hover over the icons). Once you have opened “responsive mode” a new top bar will be visible on the editor screen. By default, this will display 3 screen options to choose from, desktop, tablet and mobile. However, Elementor allows you to add extra breakpoints to optimize your website even further. You can read about additional breakpoints in this article.
Select the mobile phone icon in the responsive mode bar at the top of your screen. You’ll see that the editor screen now displays a phone screen. First, we are going to change the size of the logo when displayed on a mobile screen. Select the site logo, click on the Style tab and set the width 25% smaller (I used 100px on desktop mode so will use 75px on mobile). If you do not want to change the size of your logo, you can skip this step.
Now select your nav menu widget and go to the Style tab. First, we’ll change the colour and size of the “toggle button”. For this tutorial, I have set the colour of the button to white and the background colour to “transparent” to make it stand out on the dark section background (you can choose any colour you like). The size, I have set to 32px.
Next, we’ll change the “dropdown menu” settings. These settings affect the sub-menu items (on desktop mode) and the entire menu (on mobile and tablet mode). Let’s start by clicking the toggle button so you can see the dropdown menu on the editor screen.
First, we’ll change the background colour of the dropdown menu (I have set it to the same colour as the header section background #1c1c1c). Now change the text colour ( I have set it to white so it stands out on the dark background). You can also change the hover and active menu items colour, but for this tutorial, I will not use these options ( the default colours you set will apply).
You will notice that the dropdown menu overlaps with the logo, making it look cut off and ugly. We’ll correct this by changing the distance the dropdown menu will use to open. The distance needed depends on the size of your logo. If you have followed the tutorial and used the same settings as me, the distance would be 38px (if you have used another size for the logo, you can adjust accordingly).
Now switch to “tablet view mode” and set the exact same settings for all the widget items in your section (logo size, toggle button and dropdown menu).
You have now successfully created a basic header template. All that remains now is to assign this template to display on all pages and posts of your website. To do this, click the publish button at the bottom of the Elementor menu. Then click “add condition”. By default, Elementor will assign the template to the entire site. You can change these display conditions in the future, should you decide to create multiple header templates specific to certain parts of your website. Now save and close.
Conclusion
That’s all for this tutorial on how to create a basic header template. I hope you have enjoyed it. You can find other tutorials on “basic templates” in my blog.
For the next step, I would recommend “How To Create A Basic Footer Template“.
Thanks for reading this tutorial and see you next time!
Download This Template
You can download the template that was just created in this tutorial ” free of charge ” and use it on your website.
The template is in JSON format and can be uploaded to your templates in Elementor Pro.
For more information, head over to the download page.
One Response
This is great!