How To Create Custom Header & Footer in WordPress

Elementor Plugin ➜ https://websitelearners.com/get/website-elementor

Get Elementor Pro ➜ https://wl.tools/elementor-pro

Get our NEW Course ➜ https://link.websitelearners.com/WordPress-Course

Learn WordPress and create any Website in less than 7 days with our "Make A Pro Website" WordPress course.

Learn how you can create a custom header & footer section to your website using Elementor.

Let’s say you’ve a website and instead of using the default header & footer of your theme,

You can design your own header & footer section by following our simple steps.

So let’s get started.

Table of contents :

0:00 Intro

0:53 Install Elementor Plugin

2:46 How to Create Custom Header

10:10 How to Optimize Your Design for Mobile View

11:42 How to Create Custom Footer

19:24 How to Import Premade Header & Footer Design Using Elementor Pro

To create a custom header & footer, first you need to install a plugin.

To install the plugin, go to WordPress Dashboard ► Plugin’s ► Add New

Now search for ‘Elementor Header & Footer’ and click ‘Install’ & ‘Activate’.

Once you’ve installed the plugin, in order to make the plugin work,

You need to install the ‘Elementor’ plugin on your website.

To install Elementor plugin, click this link to download ➜
https://websitelearners.com/get/website-elementor

Now to upload the downloaded plugin,

Go to WordPress Dashboard ► Plugin’s ► Add New ► Upload Plugin

Once you’ve uploaded the plugin, Click ‘Install’ & ‘Activate’

Now once you’ve installed both the plugin’s, first let’s see how you can create a custom header.

===== Part 1 =====

To create custom header,

Step 1 : Create a header block

To create a block,

Go to WordPress Dashboard ► Appearance ► Header Footer & Blocks ► Add New

Now give a name to your block and select ‘Header’ in type of template.

Now select where you want to display the header and who can see it and click ‘Publish’.

Step 2 : Design the header section

To design the header section, Click ‘Edit with Elementor’

And now you can select a layout to your header by clicking the plus icon.

You can choose a background color by going to the style tab.

And now can now design the header by adding elements like logo, menu, button etc.

Once you’ve designed your header, just click ‘Publish’.

And now you’ve successfully created your header.

Now if you want to change the look of your header in mobile view,

Go to elementor editing page of your header and change the responsive mode to ‘Mobile’.

Now make the necessary changes and click ‘Publish’.

All the changes done in mobile view will only be applied to mobile.

===== Part 2 =====

Now let’s see how you can create a custom footer.

To create custom footer,

Step 1 : Create a footer block

To create a footer block, like you did before

Go to WordPress Dashboard ► Appearance ► Header Footer & Blocks ► Add New

Now give a name to your block and select ‘Footer’ in type of template.

Now select where you want to display the header and who can see it and click ‘Publish’.

Step 2 : Design the Footer section

To design the footer section, Click ‘Edit with Elementor’

And now you can select a layout to your footer by clicking the plus icon.

Now you can start designing your footer by adding elements like heading,
text, social icons, menu, lists, copyright etc.

Once you’ve designed your footer, just click ‘Publish’.

And now you’ve successfully created your footer.

Now you know how you can create a custom header & footer to your website.

Next let’s see how you can import premade header & footer design instead of creating from scratch using Elementor Pro.

To get elementor pro plugin, click this link ➜ https://wl.tools/elementor-pro

Choose a plan, fill up the required details & make the purchase.

Now download the plugin and install it to your WordPress site.

Once you’ve installed the plugin, click ‘Connect & Activate’.

To import the design, go to WordPress Dashboard ► Templates ► Add New

Choose header/footer from the type of template & give a name to it.

Now click ‘Create Template’ & choose the design you want and click ‘Insert’.

And the design will be imported to your site.

You can also customize any element in the design.

Once you’re done with changes, click ‘Publish’.

And now your premade design will be applied to your site.

So that’s it guys.

This is how you can create a custom header & footer section to your website using Elementor.

------------------------------