How To Create Custom Header & Footer in WordPress

𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗼𝗿 𝗣𝗹𝘂𝗴𝗶𝗻 ➜ https://websitelearners.com/get/website-elementor

𝗚𝗲𝘁 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗼𝗿 𝗣𝗿𝗼 ➜ https://wl.tools/elementor-pro

𝗖𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗼𝘂𝗿 𝗲𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗰𝗼𝘂𝗿𝘀𝗲 ➜ https://websitelearners.com/wordpress-course

𝗟𝗲𝘁 𝘂𝘀 𝗮𝗱𝗱 𝗲𝘅𝘁𝗿𝗮 𝗳𝗲𝗮𝘁𝘂𝗿𝗲𝘀 𝘁𝗼 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://shop.websitelearners.com/websitelearners/We-will-add-extra-features-to-your-website-and-improve-its-functionality%0A

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ➜ https://webspacekit.com

𝗛𝗼𝘄 𝘁𝗼 𝗠𝗮𝗸𝗲 𝗠𝗼𝗻𝗲𝘆 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://websitelearners.com/ebook/top-5-ways-to-monetize-your-website/

𝗩𝗼𝘁𝗲 𝗳𝗼𝗿 𝗼𝘂𝗿 𝗻𝗲𝘅𝘁 𝘃𝗶𝗱𝗲𝗼➜ https://topics.websitelearners.com/websitelearners#/ideas

𝗣𝗼𝘀𝘁 𝗜𝘀𝘀𝘂𝗲𝘀 𝗛𝗲𝗿𝗲 ➜ https://wltalk.com/post/1575116645

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.

𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀 :

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.

𝗣𝗮𝗿𝘁 𝟭

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.

𝗣𝗮𝗿𝘁 𝟮

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.

———————–
📢 𝗧𝗵𝗲 𝗧𝗼𝗼𝗹𝘀 𝘄𝗲 𝘂𝘀𝗲:

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗯𝗲𝘀𝘁 𝘁𝗼𝗼𝗹𝘀 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://websitelearners.com/tools/

𝗩𝗶𝗱𝗲𝗼 𝗚𝗲𝗮𝗿 𝗪𝗲 𝗨𝘀𝗲➜ https://kit.co/websitelearners/video-gear-we-use/

𝗢𝘂𝗿 𝗩𝗶𝗱𝗲𝗼 𝗘𝗱𝗶𝘁𝗶𝗻𝗴 𝗧𝗼𝗼𝗹 ➜ https://bit.ly/2Od546p