In this tutorial, I am going to show you how to create free Elementor headers and footers, and custom blocks in the free version of the elementor page builder.
You can create headers and footers for free in Elementor using the Elementor Header, Footer & Blocks plugin from brainstorm force. This plugin works in both Elementor free and pro.
For this tutorial, I have a WordPress website with a basic header and footer generated Astra theme.
We’re going to replace these with our own header and footer, and we’re going to add a new block to the website, all using the header footer builder plugin. So let’s get started.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
With your free version of Elementor installed and active, go to your Plugins section on the dashboard, click add new then search for the Elementor Header, Footer & Blocks plugin, install and activate it (00:53)
After you install and activate your plugin, go to Appearance > Header Footer Builder (01:31)
Also Read: Make Free Header & Footer using Hello Elementor Theme
Under Header Footers Template click Add New to create a new template, give it a name: Header Template, under Type of Template choose Header.
This plugin gives you the option to create specific headers for different pages on your website, for example, you can create a special header for your blocks, for your archive pages, for your error and search pages, etc.
You can also add display rules, for example, you can create one header and display it on the entire website except for one page.
In this case, we’re using one header for the entire website so under the Display on option, choose Entire website.
Under the User Rules option, you can choose to display your header for example only for people who are logged in or logged out or subscribers, etc. Here we’re not adding any rules.
This plugin also enables you to display your header on your Elementor canvas. Elementor by default does not display any header on the Elementor canvas, but with the header & footer plugin, you can be able to do this when you enable the Enable Layout for Elementor Canvas Template option.
When you’re done setting this up, click the Publish button (03:47).
After you publish your header click the Edit with Elementor button to open it up in Elementor.
The Elementor Header Footer & Blocks plugin gives you a number of new widgets that were originally not available in the free version of Elementor, for example, the navigator widget, the site logo, etc, and you can use these when you’re creating your header (04:21).
However for this tutorial, I’m not going to create a header from scratch, I’m going to use one of the header templates that are already imported.
Click the folder (🗀) icon to select and insert a header template from the Templates Library (05:40)
Under the Header Footer & Block section, drag a Navigation Menu to the column (06:11)
Select the navigation and in the Edit Navigation Menu area on the left, under Menu, select the menu you want to display, in this case; Primary Menu.
Note: You should have your menu(s) already created in WordPress.
To create a menu, go to your WordPress dashboard, under Appearance > Menus. Here you can create your menu, add menu items to it and save it. Then it will be echoed in your Elementor editor and you can use it.
After choosing the menu you want to use, select it and under Style > Typography, change the text color to white under Normal, on Hover, set it to a yellow, and on Active set it to green.
Elementor Header Responsive Settings
In the responsive mode at the bottom (07:21), select the tablet and mobile devices to see if the header looks okay.
On Mobile; select the hamburger icon (≣), under Content > Layout > Responsive > Alignment, align it to the right.
Under Style, go to Menu Trigger and Close option, change color to white.
On the Tablet; under Content > Layout > Responsive, under Breakpoint change to Tablet. Select the button widget and delete it.
Select the column containing the menu and under Layout, set its Column Width to 60%
Then select the Logo column and give it Column Width of 40%
Select the Logo/Heading, back in the Header Footer & Blocks section in the widgets area, drag the Site Logo widget to the heading column, then delete the logo (08:52)
Under Style, you can change the Width of the logo to about 50%.
Under Content > Alignment, align it to the right.
Do the same for the Mobile view.
On the Desktop, under Content > Alignment, align the logo to the right.
Under Style, reduce the Width of the logo to 20%.
With the Navigation Menu selected, under Style, go to Dropdown, set the Text Color to white and Background color to black, and on Hover, text color yellow.
Under Content > Layout, under Alignment align it on the right
When you’re done, preview changes (11:50)
When you’re done editing the header to your preference, click the Update button at the bottom, this header will then show on the entire website just like we set it up at the beginning.
To Read: How to Install WordPress Locally using LocalWP
Back on your WordPress dashboard, Under Header Footers Template click Add New to create a new section, give it a name: Footer, under Type of Template, choose Footer and under the Display on option, choose Entire website.
Click the Publish button then Edit with Elementor.
In the Elementor editor, just like with the header, here you can also create your footer from scratch. But we’re just going to use an available footer template from the Templates Library (13:22)
When you click the Update button, this new footer will replace the Astra-generated footer on the website.
If you want to add any other content to your footer you can use the widgets available in the widgets area.
Remember you can only access the free Elementor widgets since you’re using the free version, and those provided by the Header Footer & Blocks plugin. You have no access to the Elementor Pro widgets.
Select the footer section, under Advanced, unlink the Padding values then give it 20pixels at the Top and 10pixels at the Bottom.
Update.
To Read: Create a Free Sticky Transparent Header in Elementor
Back to the WordPress dashboard, under Header Footers Template click Add New to create a new template, give it a name: Before Footer, under Type of Template, choose Before Footer, and under the Display on option, choose FrontPage. Click the Publish button then Edit with Elementor.
Click the folder (🗀) icon to select and insert a block template (a call to action section) from the Templates Library (16:46)
When you click the update button, this new section will appear before the footer, only on the front page of the website because we set it to display on only the front page.
If you want it to display on the entire website, back on your dashboard you can just change your Display on to Entire Website.
You can even add an Exclusion rule and exclude the Contact page for example, so that this section can appear on all pages except the contact page (18:08).
You can also use custom sections of blocks with the header footer plugin.
To do this:
When you go to add new, name it Custom Block, and on the Type of Template option choose Custom Block.
Here, you’ll be given a Shortcode (19:36), which you can copy and use on any section where you want to display your custom block.
After copying your shortcode, publish the section then edit with Elementor.
In your Elementor editor, choose a template from your Templates Library and insert it (20:01)
Drag an image widget to the section, under Content > Image, select and insert an image from your Media Library (20:14)
Open up any page with Elementor, under the Pages option on your dashboard (21:02)
In this case, I’m going to open up the Portfolio page with Elementor.
In the Elementor editor, scroll down to the section where you want your custom block to appear, add click the (+) to add a new 1 column section.
In the new section, drag the Shortcode widget from the widgets area (21:18).
Under Content > Shortcode, paste the shortcode you copied then click the Apply button (21:19)
Update then preview the website.
Also Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus
In closing
That’s how you can create free elementor headers and footers, and blocks for your Elementor website as well as display them the way you want, based on the different display rules you set, using the header footer & blocks plugin.Â
If you have any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
