How to Create Custom Headers and Footers with Elementor: A Step-by-Step Guide (09)

When building a website with WordPress, the defaultAstra ThemeHeaders and footers may not fulfill all of your needs for the appearance of your website. Fortunately, with theelmentorYou can easily create and customize your own header and footer. This post will detail how to create a customized header and footer in theelmentorGenerate these customized sections in theAstra Themedefault settings to inject more personalization into your website.

We need to go to the Edit with Elementor page first.

Click on the symbol as shown above to enter the global settings

Click on Theme Builder to access the elmentor widget builder.

You can edit the header and footer, as well as individual products or other pages, if you need more customization and DIY this is for you!

We'll start by adding a header, as shown above

Choose a layout you like, the exact details can be changed

Click Insert, download first, we will get a title of the interface, as follows

Then we can change the logo and the menu and the socialization on the right side

Of course you can add new modules, but be aware of the adaptation issues between each device

Check for coordination, especially on mobile

Then all the settings can be adjusted to set the display conditions, if not set, it will prioritize the display of the Astro theme, the following chart

If you directly click on the save also back to the pop-up window to let you set the display conditions, this is just a way to adjust your own!

Display Conditions, more columns saved on the left hand side

Then we click Add Condition to continue setting conditions

You can choose Entire Site (the whole site) or Archives or Singular (actually different types of pages)

Individual recommendations to choose Singular, set the options will be more, but also more complete, and ultimately according to the effect of the settings on the line!

Then click Save & Close

It's now set up to display the entire site, so it will replace the theme's header effect

If we need to delete it, there are also two ways to do so

1, repeat the previous steps to enter the Theme Builder (Theme Builder), after entering the

As shown above, just delete it

2, go to the back end of the site and find the elmentor template (Templates)

Click to delete can be, template is not much, it is relatively easy to find, it is recommended to set up the name of each template, so as to find

Similarly, the steps for creating a footer are the same

Replace it with your content, or columns are not enough in adding a container, that is, a column is all right, and copyright information, etc.

Add the modules you need, and remember to check that the interfaces for each device are coordinated!

Then keep setting the required conditions and you're done, isn't it simple!

But if you have Astra theme, it is not recommended to use elmentor's custom generator, because the theme's will work better, this kind is more suitable for players who don't have no good theme or only have elmentor, and have a certain level of proficiency for elmentor, otherwise it may conflict with the theme, and you may need more time to troubleshoot

summarize

With the above steps, you have mastered how to create and customize headers and footers with Elementor. While the Astra theme offers nice default settings, Elementor's Custom Builder is certainly a powerful tool for users looking to personalize their website design. In the next installment, we will continue to explore more tips on using Astra theme in conjunction with Elementor to help you better optimize the design and functionality of your website.