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
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’s ► Add New.
Now search for ‘Elementor Header & Footer’ and click ‘Install’ & ‘Activate’.
We have successfully installed the plugin on our site
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 the Elementor plugin, click this link to download ➜ 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 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 ► Appearance ► Header Footer & Blocks ► Add New
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”
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.
And now you can select a layout for 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.
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.
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
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”
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.
And now you can select a layout for 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 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.
COMMENTS