Create Free Elementor Headers and Footers (Elementor Header, Footer & Blocks Plugin)

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. Xc3F8T vL4ymhKlFowN7AySOoczZ4E5unBB709IvO3ihtHvoEUCjkRqRgkJWQx8iX 8340HC fjkGwcjx68mv57ajI91vSCr7zR3RamMoC qDl7YFA5TltgK3aIXNdjTgN62aZHX

5hrvv5U9FHkh4uImRZAt0PQUdBRbEbpLBdMz0QKWtP9Dt6VxqXValpA2Xp0

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.

Video: Create Free Elementor Headers and Footer Tutorial

Install the Elementor Header, Footer & Blocks Plugin

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)

Tbb5wovFOvr1J2I4GIdli2bterW o73WU szNpQ1w4Ej1o CvIW0jshO

After you install and activate your plugin, go to Appearance > Header Footer Builder (01:31)

74AxOtfFWnBapzGXBLP6OwTF DOVDLiXbXvwxe jbmrrSvFYesvn85 TZsStN0BUDctHCDbgLqXIsmu1kLMj3blS LRSoJAp8YqBhSKEEMJi6sQrhJ5f0Da3N2yJcS2ZDdhjkLPe

Also Read: Make Free Header & Footer using Hello Elementor Theme

Create a Header using Elementor Header, Footer & Blocks Plugin

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).

Free Elementor Headers and Footers

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).

YSIyWK QEsWb nmn49pGxeL00ms9zYg90oZzFllWOD0ioIFkjCPZfPaTy V CuijizTNnpDm5VDjd7l5VniZ2b7H K5Nox5sUryF DofIPRZqW61ETRnFNyzjFG1HwIy71KzIc1D

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)

aRvpcmhF8fDljOjPiqK0YUcs01TzFcVku DIxiNB8Jl6EZXjkc5py8aprtMExupFwm3Lt7ostmiUp36jr GCEYPkc9EFl44EfFkKygNOht2febZknJ0ZqRAJ7 DNfzisi0mouDY

Under the Header Footer & Block section, drag a Navigation Menu to the column (06:11)

V7XXPZhf NULPw1FK BGSwQ 4JFgY 5m9yUrljISvWQiZRHfWY R599eWNpCKWMkXe2d8CoRj1zxjjp695UJkcpV90Ccoph yLrTeXzsSFFsuTZ6nw7tAawIcBHbwesusRS4n7qd

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.

5ONl VRCInEEjo3hGVL6InCgqvUOs3gtlqBIzXiN000 opXMnVerMqgzvdFuLZqE rnzelqhG mPQMpsX8ndSE3fWJjZjwkbhYQuQzToDXAhKqzVDPQGXek7u niKKdGSTjZ4cg

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)

NRlF8BaqrAgdXDR7Q04Wywtv1gl gIX0pwIqpyOFt7ux1uU 7v6Fe0u2K095XPlt 8QgegftrS0rt22YT1ooiDqWCrxpexz BNriXFTX2johd fKljumTkWTiFq3AyhTva1DEu E

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)

e88TKepUvxNCQsTddvD857PFTD4NUmPH6GoesrPXgX8QHznZLvwPrEoPBkE8o1AMNzCkvFCEzCblyGyoX DumCsxjd5jRKDVFX5YJ45VMoDDYxblCOUaoSLwM tQi mPfNViCXto

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.

sdIInBF hPmroDCmGky7QEGxyuELwcLxucO4pbmTnab5vTFEmMIUyryjzSYSUjVuCrNH62uNkhntuHuRjS6t3gBN8ON

To Read: How to Install WordPress Locally using LocalWP

Create a Footer using Elementor Header, Footer & Blocks Plugin

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)

m
hE

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.

Q3khYStGkWyOp5mlJ xe5FLxk2MUUARm MLDONlOUrbtSgVA2DqsaFNwOuogCPANfYNmqu0hO0fiZWpBoW3KxCi2z6ybuBwUlVVaYJp0EXyoa4J0Lw3b8EML5Iun8fwspKG EYXE

To Read: Create a Free Sticky Transparent Header in Elementor

Add a Block using Elementor Header Footer & Block Plugin

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)

URWrQ5xHFClgWhA4JZM9fL9f4u5GlORlM GGOTugx4GG0c47FfnqU gmBfNiIRafUyMREbyd gCjt7tIQEtZ6JE1WAWd9I2Mo8msbYNZ iy8kiS1BWJhACtc9n04QblOrYL oyvz
rPMyltKbzH cTkbS3yxxkWR9uPHVlSgug2E2eBaHHxcpxr KH9WDDa1ycBmSZ9cogDTIYfZG u7V9TKyWiw2J3genI3WbhdIqdGTtEIID8k5fq zdmiajaGqKmSAHics NiPRrft

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. 

5OZYKmAsk9MLEQFBW4OFBJq9C3GJfhxMrzT60iaE2kYT wFD1lX1MG8 uiA69V9gJjpZy6tvQ5M kVkSDgBBZNSagl WBDDzlp1bNpaN17RQnn li5XTzhs Prd4c6Yb8y34c0B

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).

free elementor headers and footer and custom blocks

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.

EpTCmSSVMq2IR usxH4gL i3uXoqN3S8e7L6ng40 SXvQam6Sa2Z7zS3eDF8UBIDLaEsgah0FQLQc0B1qW84Vh Ic5JE0oJYQQzCSQ3bg80JmSNYllOlYC0Loi48vgG GdkglM I

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)

giAxnYMAyl1k2uG Lg5 iS0S6HtHa4FaU1z iVOV1GCBUKbIapFFM2rNBDFmrYfgXTlE6lxJq7ZFgewVoFHc3F7qZQyxoSb5hZ2dtfQUU6YRb5L8NgsF mcRNrFuE7YmDBYskl4e

Drag an image widget to the section, under Content > Image, select and insert an image from your Media Library (20:14)

3BRIP9RRt0VJ1c7OD0FGwTXEFT7vgFcgsv8JFcvP8caWFbARsjWmpmDozpPyafkRfB04M7J7zhwb63yJggyORZjn84ddjNPSY4IvhgD9k1EoZMssysefj9jYgbfIc1cJAyWWm5zi

Open up any page with Elementor, under the Pages option on your dashboard (21:02)

Nfsmy11TVbc4ZBKn5fz6sOjb6cFY 3nhO9n3ws84TdB2oot8sFz7Lbe2OkiYmt96eOW BUf6SUYiPTWvPe6zP60qfjkGrnelFtmHoPq

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).

0Fex fPAjwL5i9AlOpE8a9L3rpD1wjbSgn7LtmmfAhn6MpUEsrkAGIxENXUpuVPMY9zJuWdmMmqO0R4MF5ePKIJMh Ed

Under Content > Shortcode, paste the shortcode you copied then click the Apply button (21:19)

bz7aEEwmRDIeGZ

Update then preview the website.

o nI0zFUvxAeZzGyN7kuYg zyZTodvVpr9SRty6GwmN89LefDbdyRdcSylQPsbHOvf9BL UKceuUYr4SkVpZ8erxeDaYj4n7UEWuSz g3JpfU6w6YTyrQvsTpCQleVg N9RedQ98

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users