create custom header footer elementor

How To Create Custom Header & Footer in WordPress

Learn how you can create a custom header & footer section for your website using Elementor. Let’s say you have 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.

 

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

So let’s get started.

To create your custom header & footer section

First, you need to install a plugin on your WordPress site

To install the plugin, go to WordPress Dashboard ► Plugin’sAdd New.

javascript 3

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

javascript 4

We have successfully installed the plugin on our site

seo databese 5

Once you’ve installed the plugin, in order to make the plugin work, You need to install the ‘Elementor’ plugin on your website.

javascript 5

To install the Elementor plugin, click this link to download ➜ Elementor

Now to upload the downloaded plugin. Go to WordPress Dashboard ► Plugin’sAdd NewUpload Plugin

rty 5

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

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

To create a custom header, 2 step
Step 1: Create a header block
Step 2: Design the header section

 

Step 1: Create a header block

To create a block, Go to WordPress Dashboard ► AppearanceHeader Footer & BlocksAdd New

c 1

Now give a name to your block and select ‘Header’ in the type of template. Then the type of template “Header”, then the display on “Enter website” then user roles “(Basic) ALL

c 2

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

Step 2: Design the header section

Step 2 visit to Design the header section Click ‘Edit with Elementor’ and it will take you to the Blank Page. will you design a header section to select a layout for the header section? should select the layout section and you will get different types of layout which you can use for you to have the type of layout you want.

c 3

And now you can select a layout for your header by clicking the plus icon.c 4

c 5

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.

ahead of Next mobile to responsive it please go back to Elemento click here and then select mobile will immediately be able to see the mobile.

c 6

 

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

Go to the 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 a custom footer, 2 step
Step 1: Create a footer block
Step 2: Design the Footer section

Step 1: Create a footer block

To create a footer block, as you did before Go to WordPress Dashboard ► Appearance ► Header Footer & Blocks ► Add New

c 7

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

Now give a name to your block and select ‘Footer’ in the type of template. Then the type of template “Footer”, then the display on “Enter website” then user roles “(Basic) ALL

java

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

Step 2: Design the Footer section

Step 2 visit to Design the Footer section Click ‘Edit with Elementor’ and it will take you to the Blank Page. will you design a header section to select a layout for the “Footer” section? should select the layout section and you will get different types of layout which you can use for you to have the type of layout you want.

java 1

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

c 8

java 2

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 for your website.

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

To get the Elementor pro plugin, click this link  ➜ Elementor pro

Choose a plan, fill up the required details & make the purchase. Now download the plugin and install it on 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 for your website using Elementor.

Leave a Reply

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