How to Create a Custom Header and Footer Using a Plugin in Elementor

Elementor is a versatile WordPress page builder that allows you to create stunning website designs without any coding knowledge. One of the most important aspects of any website’s design is its header and footer. While Elementor Pro provides built-in features for customizing headers and footers, even users of the free version can achieve this using plugins. In this guide, we’ll show you how to create a custom header and footer in Elementor using a plugin.

Step 1: Install the Custom Header & Footer Builder in Elementor Plugin

To create custom headers and footers, you’ll need a plugin that extends Elementor’s functionality. The “Elementor Header & Footer Builder” plugin is one of the best tools for this purpose.

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins > Add New.
3. In the search bar, type “Elementor Header & Footer Builder”.
4. Click Install Now and then Activate.

Step 2: Create a New Header Template

Once the plugin is installed, you can create a custom header.

1. In your WordPress dashboard, go to Appearance > Header Footer Builder.
2. Click Add New and choose “Header” as the type of template.
3. Give your template a name (e.g., “Custom Header”).
4. Set the display condition for your header, such as applying it to the entire site or specific pages.
5. Click Edit with Elementor to open the Elementor editor.

Step 3: Design Your Header

1. Inside Elementor, start building your header by adding sections and widgets. Common widgets include:
   • Site Logo: Add your logo to represent your brand.
   • Nav Menu: Include a menu for navigation.
   • Search Bar: Add a search bar for user convenience.
   • Icons: Add icons for social media or contact links.
2. Customize the design using Elementor’s styling options. Adjust colors, fonts, spacing, and other design elements to match your brand.
3. Once satisfied, click Publish.

Step 4: Create a New Footer Template

The process for creating a footer is similar to creating a header.

1. Navigate to Appearance > Header Footer Builder.
2. Click Add New and select “Footer” as the type of template.
3. Name your template (e.g., “Custom Footer”).
4. Define where the footer should appear, such as on all pages or specific ones.
5. Click Edit with Elementor to design your footer.

Step 5: Design Your Footer

1. Use Elementor widgets to build your footer. Common elements include:
   • Copyright Text: Add a copyright notice.
   • Social Media Icons: Link to your social media profiles.
   • Footer Menu: Provide secondary navigation options.
   • Contact Information: Include your business address, email, and phone number.
2. Style the footer to align with your overall website design.
3. Click Publish when done.

Step 6: Verify Your Custom Header and Footer

Once you’ve created and published your custom header and footer, visit your website to ensure they’re displaying correctly. Check different pages and devices to confirm responsiveness and functionality.

Tips for Designing Effective Headers and Footers

• Keep It Simple: Avoid clutter and focus on essential elements.
• Maintain Consistency: Use colors and fonts that align with your brand identity.
• Optimize for Mobile: Ensure your header and footer look good on all screen sizes.
• Add Call-to-Actions (CTAs): Use buttons like “Contact Us” or “Shop Now” to guide users.