How to Edit Headers and Footers with Elementor in WordPress

Elementor, a powerful drag-and-drop page builder for WordPress, makes it easy to design custom headers and footers without needing any coding knowledge. By using Elementor Pro or the Elementor Header & Footer Builder plugin, you can create and edit these areas to give your site a unique look and functionality. Here’s how to edit headers and footers with Elementor in WordPress.

Method 1: Using Elementor Pro

If you have Elementor Pro, editing headers and footers is straightforward using the Theme Builder feature.

Step 1: Install Elementor Pro

1. If you haven’t already, purchase and download Elementor Pro from the Elementor website.
2. In your WordPress dashboard, go to Plugins > Add New and upload the Elementor Pro ZIP file.
3. Click Install Now and then Activate.
4. Ensure that both Elementor and Elementor Pro plugins are active on your site.

Step 2: Access Elementor Theme Builder

1. From the WordPress dashboard, navigate to Templates > Theme Builder.
2. On the Theme Builder page, you’ll see options to create templates for headers, footers, and other theme parts.

Step 3: Create or Edit the Header

1. Click the Header tab in the Theme Builder.
2. To create a new header, click Add New and select Header.
3. A popup will ask you to name the template; give it a name (e.g., “Main Header”) and click Create Template.
4. You can either choose from pre-built header templates or design a header from scratch by dragging and dropping elements like logos, navigation menus, buttons, and more.
   • Add a logo: Use the Image widget to place your logo.
   • Add navigation: Use the Nav Menu widget to create your main menu.
   • Add social icons: Use the Social Icons widget to include social media links.

Step 4: Set Display Conditions

1. After designing your header, click Publish.
2. You’ll be prompted to set Display Conditions, which define where the header will appear on your site (e.g., entire site, specific pages, or posts).
3. Choose where you want the header to be displayed, and click Save & Close.

Step 5: Create or Edit the Footer

1. To create or edit a footer, repeat the process by clicking the Footer tab in the Theme Builder.
2. Click Add New and select Footer.
3. Design your footer using Elementor’s widgets (e.g., add widgets like text, copyright info, contact details, or social icons).
4. After designing, set the Display Conditions (similar to the header) and click Save & Close.

Method 2: Using Elementor Header & Footer Builder (Free Option)

If you’re using the free version of Elementor, you can still create custom headers and footers by installing the Elementor Header & Footer Builder plugin.

Step 1: Install the Elementor Header & Footer Builder Plugin

1. In your WordPress dashboard, navigate to Plugins > Add New.
2. Search for Elementor Header & Footer Builder and click Install Now.
3. After installation, click Activate.

Step 2: Create a New Header Template

1. Once the plugin is activated, go to Appearance > Elementor Header & Footer Builder in the WordPress dashboard.
2. Click Add New to create a new template.
3. In the popup window, choose Header as the type of template.
4. Give your template a name (e.g., “Custom Header”) and click Create Template.

Step 3: Design the Header with Elementor

1. You’ll be redirected to the Elementor editor, where you can design your custom header.
2. Use Elementor’s widgets to add content such as a logo, navigation menu, and social icons.
3. Once you’re satisfied with the design, click Publish.

Step 4: Assign Display Rules

1. After clicking Publish, set the Display Rules to decide where the header will appear (entire site, specific pages, etc.).
2. Save your changes.

Step 5: Create a Footer Template

1. To create a custom footer, go to Appearance > Elementor Header & Footer Builder and click Add New.
2. Select Footer as the type of template.
3. Design the footer using Elementor’s drag-and-drop interface, adding widgets like copyright info, links, and social icons.
4. Set the Display Rules to specify where the footer will appear, then save your changes.

Customizing the Header and Footer

Whether you’re using Elementor Pro or the free plugin, you can fully customize the design of your headers and footers:

• Add a sticky header: Enable the sticky option for the header in the advanced settings, ensuring the header stays visible when scrolling.
• Responsive design: Use Elementor’s responsive settings to adjust how your header and footer appear on mobile and tablet devices.
• Add dynamic content: For Elementor Pro users, you can insert dynamic content like login buttons, shopping carts, or search bars.

Conclusion

Using Elementor to create and edit headers and footers in WordPress is an easy and powerful way to customize your site’s design without coding. With Elementor Pro, you can fully control the header and footer with the Theme Builder, while the free Elementor Header & Footer Builder plugin offers a similar experience for users without the Pro version. By following these steps, you can build a professional and unique website header and footer in no time.