How to Create Custom Headers & Footers With Elementor?

Elementor’s new Header & Footer Builder plugin now allows you to customize the header and footer in ways that have never been possible before, thanks to Sticky Header, 25+ brand-new stunning header-footer blocks, and full WordPress theme compatibility.

A header and a footer are essential components of any website design. They not

only play an important part in delivering a positive user experience by allowing for easier navigation throughout the site, but they’re also crucial marketing tools that may be used to promote your brand. That isn’t all headers and footers are also useful tools for promoting your company’s brand. CTAs may be tucked away nicely in these areas. In the past, tasks like removing the space between the header and the body in WordPress required going into the PHP files of the theme. Now, this task has become much simpler with Elementor’s Theme Builder.

Let’s take a deeper look into how Elementor Theme Builder gives you a powerful way to edit your site’s header and footer.

What Is a Header?

A header is the very top section of a website. It usually contains the site’s logo and navigation menu. The header may also contain a search bar, social media icons, and other elements.

Not only can headers play an integral part in maintaining your business’s public image, but they also often contain practical features such as website navigation, search bars, carts (for e-commerce), call-to-action buttons, and other additions that make the browsing experience more fluid and increase the likelihood of a conversion.

What Is a Footer?

A footer is the very bottom section of a website. It usually contains copyright information, links to important pages such as the home page, terms and conditions, and a contact form. Footers are generally much less complex than headers and often appear as simple text blocks on a white background.

1. Install Elementor free and pro

  • Simply go to your wp-admin > Plugins > Add New and enter “Elementor” in the input box.
  • Install and activate it.

You can download the Pro from your customer profile after you subscribe to Elementor.com

You’ll need to generate a new API key for your copy of Elementor Pro. To do that, click on the ‘view websites’ button (it’s in the screenshot above), and then add your website address there. You’ll get a license key that you’ll need to enter when activating Elementor Pro later.

Head back to your wp-admin panel and then go to Plugins → Add New. From there, upload the Elementor Pro archive file manually. After it’s done uploading, proceed to install and activate it.

Elementor and Elementor Pro are now operational.

2. Create a blank header or footer template

From the WordPress admin menu, select Templates. Nothing should be there yet.

Select “Add New Template” from the drop-down menu. Select either Header or Footer, as well as any other customizations you desire, from the pop-up window. if you want to name your template, do so here.

This is when the fun begins! Elementor will launch, and you’ll be able to get started. To make things go faster, Elementor will offer a list of ready-made header and footer designs as an option. You can either select one of them or start from scratch with your header or footer. It’s entirely up to you whether you want to use one of the offered templates or create your header or footer from scratch.

3. Prepare the basic format of your header and footer

Before you can create custom headers and footers with Elementor, you need to choose the main layout for your header or footer.

As an example, We build a modern header with the logo in the center, a menu on the left, and a search box on the right. But feel free to design any other type of header–there are no limitations regarding design other than what you can include in your headers or footers.

To start, click the main customization button of your header to display the Layout section in this sidebar.

4. Add a logo

Adding a logo is straightforward, as long as your existing theme follows the WordPress standard procedures for logos. Pick the Site Logo block from the sidebar in Elementor. Place it where you want it. It should immediately provide your current logo.

5. Add a menu

The process of adding a menu is the same as with a logo. Pick the Menu block from the sidebar and place it in your header template.

6. Add a search field

We  will finish our  design by choosing the Search Form block and dragging it to the right column of my header design.

8. Publish your header/footer

Lastly, you can either add your new header/footer to all the pages on your site or just choose specific pages. To do this, go to Elementor > PUBLISH. From there, a popup will ask where you want to display your header or footer.
5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WPZOOM Themes

Recent Posts

Follow Me

Weekly Tutorial

Subscribe Now

The latest on what’s in the IT industry,
in your inbox every morning.