How to Create Header and Footer Using Elementor Free Version | Elementor Resources 127018633120
How to Create Header and Footer Using Elementor Free Version

How to Create Header and Footer Using Elementor Free Version

 

The Header and Footer sections will often dictate the performance of a site in terms of generating leads, supporting visitors or just giving a pleasing vibe to the website. Not just because they’re available to almost every part of the website, but also because they’re the norm of the Internet. If you don’t find the email address or contact page link of a website in their Header or Footer, that’s already a red flag for bad web design.

The Elementor Page Builder also allows us to do that, but with the help of an add-on called Elementor Header, Footer & Blocks. Install it first before starting this tutorial.

headerfooter-tutorial-1

So now that you’ve installed the plugin, let’s begin this tutorial!

Step 1: On the Appearance, you’ll notice a new option to show up named “Header Footer Builder”. Go on and click it.

headerfooter-tutorial-2

Step 2: Upon accessing, then click “Add New” to create a new block.

headerfooter-tutorial-3

Step 3: We’ll first create the Footer. On the “Type of Template”, choose Footer.

headerfooter-tutorial-4

Step 4: This will open a panel that resembles normal pages. Look for the “Edit with Elementor” button and then click it.

headerfooter-tutorial-5

Step 5: Once you’re on Elementor’s visual editor, choose the very first block “Structure”.

headerfooter-tutorial-6

Step 6: Then on the left sidebar, go to “Style” and set the section’s background color in Style/Background Type/Classic.

headerfooter-tutorial-7

Step 7: Right click the section you’ve created and add inner section to column and add another column to it.

headerfooter-tutorial-8

Step 8: Create your desired content for this blocks.

headerfooter-tutorial-9

Step 9: Then on the sidebar Widgets section, search for “Search” and drag it to your section to create a search bar.

headerfooter-tutorial-10

Step 10: Add a spacer below the Search bar.

headerfooter-tutorial-11

Step 11: Now, you add icons below the spacer. Pick any social media icons that you want and go to Style and set their color to white, size to 30 pixels, and then go to Advance and set margin-left to 10. make sure to not link values together. then go to custom positioning still under Advanced then go to width then set to “Inline (auto)”.

Then click the third column and in the Layout, set Vertical Align to Middle and Horizontal Align to Center.

headerfooter-tutorial-12

Step 12: Add another single column and set background color to #222222.

headerfooter-tutorial-13

Then add heading for copyright and set alignment to center and HTML tag to “p” in the Content then go to styles then set Color to white and font size to 14.

Now that we have a Footer, let’s now create the Header.

Step 13: Same procedure as the Footer, you create your Header title and set “Type of Template” as Header, then click “Edit with Elementor” to access the visual editor.

headerfooter-tutorial-14

Step 14: Add again a new section then click the first one for the Single Column.

headerfooter-tutorial-15

Step 15: Add inner section on the section then Right Click on the section then add another column.

headerfooter-tutorial-16

Step 16: On the Widgets section, add an image to the first section. This is where we will place our logo image. Drag the image widget to the section.

headerfooter-tutorial-17

Step 17: Then, let’s add Menu on the second column by dragging the Nav Menu widget.

headerfooter-tutorial-18

Step 18: Click the Nav Menu that you’ve added in the second column and choose the menu that you want. The menu will be created at the customizer.

headerfooter-tutorial-19

Step 19: On the sidebar, set align as centered (the second one).

headerfooter-tutorial-20

Step 20: Now add a button to the last column.

headerfooter-tutorial-21

Step 21: Set the button’s text to “login” and set it’s alignment to right.

headerfooter-tutorial-22

Now our Header is finished!

Thanks for Reaching This Far!:)

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart