How to Create Custom Headers and Footers in WordPress Using Elementor and Elementor Header & Footer Builder

Creating custom headers and footers for your WordPress site can significantly enhance its look and functionality. While Elementor Pro offers advanced features for this purpose, you can achieve great results using the free version of Elementor along with the Elementor Header & Footer Builder plugin. In this guide, we’ll walk you through the process step-by-step. For a more detailed tutorial, you can watch my YouTube video here.

Step 1: Install and Activate Elementor

First, ensure you have Elementor installed and activated on your WordPress site. If you haven’t done this yet, follow these steps:

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for “Elementor”.
4. Click Install Now, then activate the plugin.

Step 2: Install and Activate Elementor Header & Footer Builder

To create custom headers and footers without Elementor Pro, you’ll need the Elementor Header & Footer Builder plugin. Here’s how to install it:

1. In your WordPress dashboard, go to Plugins > Add New.
2. Search for “Elementor Header & Footer Builder”.
3. Click Install Now, then activate the plugin.

Step 3: Create a Custom Header

1. In your WordPress dashboard, navigate to Appearance > Elementor Header & Footer Builder.
2. Click Add New and select Header from the Template Type drop-down menu.
3. Name your header template and click Create Template.

Designing Your Header

1. Use the Elementor drag-and-drop editor to add elements such as logos, navigation menus, search bars, and social icons.
2. Customize each element to match your site’s branding by adjusting colors, fonts, and sizes.
3. Once you’re satisfied with your design, click Publish.
4. Set the display conditions to determine where your header will appear (e.g., on the entire site or specific pages).
5. Click Save.

Step 4: Create a Custom Footer

1. Navigate to Appearance > Elementor Header & Footer Builder again.
2. Click Add New and select Footer from the Template Type drop-down menu.
3. Name your footer template and click Create Template.

Designing Your Footer

1. Use the Elementor editor to add elements such as copyright text, navigation links, contact information, and social media icons.
2. Customize each element to fit your site’s style.
3. Once you’re happy with your footer design, click Publish.
4. Set the display conditions for your footer and click Save.

Step 5: Preview and Adjust

After creating your custom headers and footers, preview your site to ensure everything looks perfect. Check the design on different devices to make sure it’s responsive and adjust any elements as needed.

Conclusion

By using the free version of Elementor alongside the Elementor Header & Footer Builder plugin, you can create unique and professional headers and footers for your WordPress site without the need for Elementor Pro. Follow the steps outlined above to enhance your website’s appearance and functionality.

For a more detailed, step-by-step video tutorial, be sure to watch my YouTube video here. Happy designing!