Elementor is the most popular page builder that comes with lots of functionalities and allows the users to create a stylish header and footer without using coding. What you need is only a header and footer addon plugin.
Let’s dive into details to learn how we can use this Elementor Add-on to create a header and footer style of our kind.
- Why should you go for the Elementor Page builder?
- How to install Elementor free and pro versions
- How to create your customized Header and Footer section with Elementor Pro
- Decide the main layout of your custom header and Footer with Elementor
- Add your Logo or your site identity
- Insert the menu
- Place the search field
- Create the Footer section with Elementor
- Publish your custom header and footer
- Check the Responsiveness of your header and footer section
- Wrapping up
Why should you go for the Elementor Page builder?
Elementor is the most advanced page builder that enables its users to create stunning designs and layouts using its premium elements. Specifically, it helps the beginners who are not aware of any coding skills. The users can use Elementor’s drag’n drop editor to move around the widgets and elements.
Elementor is a visual page builder that helps its users to see how their pages are going to look like without switching the mode.
Another big reason to choose Elementor is that most of the stuff can be done without the need to pay. Their free version is more than capable of offering good site editing solutions. However, we will cover both the free and pro versions so that you can choose any of them for doing the job.
Elementor key features that make it worthy:
- Supports drag and drop feature
- Comes with tons of template
- 90+ widgets
- Responsive support
- No coding required
- Offers redo and undo
- Offers autosave.
How to install Elementor free and pro versions
Before we get started you need to match the pre-requisite to work with Elementor. First, you need to install a compatible theme. The good news is that most of the available themes are compatible and hence you do not have to worry about it much. However, if you want compatibility out of the box, you need to use any of the following: Hestia, Neve, Astra, OceanWP, GeneratePress, and Genesis. These themes are completely compatible with Elementor and should work without any problem. However, if you have a different theme, you need to check the theme’s official documentation and see if its compatibility with Elementor.
In case your theme doesn’t support the Elementor Header, Footer and Blocks Plugin, then you can opt to add support for the theme using the methods provided by them. You can go to “Theme Suppor tab” and then choose any of the available method provided with them.
It is easy to install Elementor. If you are opting for the free version then you can download the free Elementor version from WordPress.org.
Once you have it downloaded, you need to go to your site’s backend.
From there, Go to: wp-admin > Plugins > Add new > Elementor > install and activate.
Elementor Pro can be downloaded from Elementor.com for $49 with a one-year subscription plan. They also offer other plans which are aimed towards more site. The free version can also be download from their site or the WordPress plugin store. Anyway, you can download the Elementor Pro version from the link below.
How to create your customized Header and Footer section with Elementor Pro
In this section, we will learn how to create a customized header and footer. However, let’s start with the header creation first.
To create a header section Move to
WP admin > Templates > Add new Template.
Now from the popup menu, select the template you want to create. Here we are about to create a header section, therefore, select the header template.
Elementor pro comes with some pre-made header templates; you can select any one of them or go for creating a header from scratch. The templates come handy as they provide an easy way to get started with your design. However, if you want to start from scratch, you can also do so by choosing a blank canvas.
Decide the main layout of your custom header and Footer with Elementor
Before creating a custom header, you should decide a rough layout of your desired Header and footer section. There are plenty of ideas you can get by looking at the pre-made header section layout.
You can select any type of header section; the most popular and modern looking header is with a site logo on the leftmost corner, a menu bar in the center and a search bar section on the right.
There are limitless options, and you can create any sort of layout, which you like the most.
I have selected the pre-made header template no.7. That’s the most popular and straightforward way to use a header for the WordPress website. You can simply copy the header template name and paste in the Templates > Header > search template > paste the copied header name.
Once you got your desired header template, then click on the option “Edit with Elementor,” and you will enter into the Elementor Pro header builder section.
Once you have selected your desired header section, then move on to the next step where you’ll need to choose the block structure.
Scroll on the Layout section by clicking on the blue tab
I have selected the three sections layout, which comes under my desired design.
In the layout section, you can also go for a full stretched layout, or you can set a fixed width while creating the custom header section. However, this functionality purely depends upon what your theme allows. Go with the best-suited layout for your header.
Add your Logo or your site identity
If you haven’t added your Logo on your WordPress site, you’ll have to assign your Logo on WordPress site first.
Go to: WordPress > Customizer > site identity > select your logo.
Alternatively, you can go to the Elements > site logo, and it will add your Logo automatically.
You can also control the behavior of your Logo. How is it going to look when clicked on. Also, you can adjust its size and alignment. You can align it to the left, right, or center and change its pixels to whatever size you prefer.
Insert the menu
You’ll see a “Nav Menu” block in the Elementor Sidebar. You can drag’n drop the Nav menu to the header section and place it wherever you like to see it.
You can create a menu in WordPress, under the
Appearance > Menu tab
Once you have added the desired menu, it will automatically populate within the template.
If you haven’t created any menu yet, head over the menu section and create a list so it could be included in your template.
The following are the sections which can be adjusted.
Menu: you can select as many menu categories as you can. Like I have chosen two major menus, one is dedicated to men, and the other one is dedicated to women with sub categories like jeans, shirts, shoes, etc.
Layout: choose the way you like to present your menu, either Horizontal, vertical, or Dropdown.
Align: The menu can be aligned in the center, right, or left, or you can also use a stretch option to fill the whole available gap.
Pointer: This section helps you in highlighting your menu. You can choose to underline, hover, or any other highlighting option.
Animation: use this option to highlight your menu either by faded, hover, tilt, or anything appealing to get attention.
Here, I want to share some extra customization options, such as if you like to add more customizes styling options, go for the free NavMenu Add-on for Elementor. With the NavMenu add on you can get some extra styling menu blocks that will help you in creating the header and footer section.
When you have finalized your menu bar, select the pages and posts where you want to show your menu bar and edit the names of posts and pages in the menu.
Place the search field
Once you are done with the general layout of your menu, the next step is to add a search bar block from the Elementor sidebar. You can simply drag’n drop the search field element and place it wherever you like.
The search form has a setting area, where you can adjust its skin, placeholder, alignment, and size.
Skin: change the search field skin to Classic, Minimal or Full Screen
Placeholder: this field can be left empty, or you can put in something like “search here” quote.
Alignment: adjust the arrangement and size.
Now create the Footer section
Create the Footer section with Elementor
The same method is to be followed for the footer section creation.
Step 1: select the template > Add new > choose type of template > choose footer.
Step 2: once you have selected the template, next is to select “Edit with Elementor.”
step 3: select the structure of the footer section.
Choose the first one.
Step4: Select the background color to be black and then click on the section you’ve created and add another column in it and then add your desired menu in it.
Add a search bar and then the social share icons in the third and last part.
Finally, you have created your custom header and footer section.
Publish your custom header and footer
To go live, set everything well, the last step is to select where do you want to display your menu either on the entire site or just on some specific pages. The ideal condition is choosing the “entire site.” Just save and close your settings to see the final step.
Check the Responsiveness of your header and footer section
This is the most critical step, and you have to check the Responsiveness of your header and footer section. Because mostly a full-width menu cannot accommodate the mobile view, that’s why you have to be sure how your design will look like on the Mobile screen. You can adjust the mobile and tab version by using the responsive switches at the bottom of the Elementor sidebar area.
There are multiple ways you can check the responsiveness of your header and footer. For instance, you can check the tools such as Browserstack, CrossBrowser Testing, and Google Resizer to test the responsiveness of your sites in the best possible way. You can also choose to do it manually by trying it on different devices.
I hope this tutorial may have helped you in creating your custom header and footer section quickly with the Elementor pro version. WordPress comes with incredible functionalities; however, it allows limited variations for the header and footer section, which is finally overcome with the Elementor Pro page builder. Now, you can demonstrate your site’s vision in a better way with much better control on your site elements. Moreover, Elementor has enhanced its functionalities with the help of free addons, which allows its users to customize their websites using more advanced features.