How to Create Elementor Headers and Footers in the Listdomer Theme

The Listdomer theme, designed specifically for the Listdom directory plugin, offers multiple header and footer options. However, users may want additional customization, including modifying text sizes, logo placement, and integrating mega menus. This guide explains how to fully customize both the header and footer in the Listdomer theme using built-in settings, the Listdomer Header and Footer templates, and Elementor Pro.

Default Header and Footer Options in Listdomer

Listdomer Pro provides five pre-designed header layouts, but these have fixed styles which cannot be adjusted via theme settings. Similarly, the default footer has predefined styles with limited customization. If you need further flexibility, you can create custom headers and footers using Elementor.

Customizing the Header and Footer with the Listdomer Templates

To provide more customization options, the Listdomer theme includes Listdomer Header and Listdomer Footer templates. These templates can be edited with Elementor without requiring Elementor Pro, allowing full control over design and functionality.

Steps to Use the Listdomer Header and Footer Templates:

1. Open Elementor and navigate to Templates > Saved Templates.
2. Locate the Listdomer Header template or Listdomer Footer template and edit it using Elementor’s design tools.
3. Add any elements, including a Mega Menu in the header or custom widgets in the footer.
4. Once satisfied with your design, save the template.
5. Go to Listdomer > Settings > Header Settings or Footer Settings.
6. In the Header Type or Footer Type dropdown, select your newly designed Listdomer template.
7. Save changes and check your site to see the updated header or footer.

The Listdomer Header and Footer templates are automatically added to their respective dropdowns once created, allowing seamless integration with the theme’s settings.

Using Elementor Pro to Create a Custom Header and Footer

If you prefer to design a customized header or footer independently of Listdomer’s built-in options, you can use Elementor Pro.

Steps to Use an Elementor Pro Header or Footer:

1. In your WordPress dashboard, go to Templates > Theme Builder.
2. Click Add New and select Header or Footer.
3. Design your layout using Elementor’s tools, including adding a Mega Menu or footer widgets.
4. Click Publish and set the Display Conditions to Entire Site or specific pages.

Unlike the Listdomer Header and Footer templates, Elementor Pro headers and footers will not appear in the Header Type or Footer Type dropdowns of Listdomer. However, you can still assign them globally or to specific pages using Elementor’s display conditions.

Mega Menu Support in Listdomer

Listdomer does not have built-in Mega Menu functionality. However, you can add a Mega Menu using Elementor Pro or third-party addons like Vertex Addons For Elementor.

To add a Mega Menu:

1. Use Elementor Pro’s Nav Menu widget or a third-party Mega Menu widget.
2. Insert the Mega Menu into the Listdomer Header template or your Elementor Pro header.
3. Assign the header template following the steps above.

Conclusion

For users seeking a fully customized header and footer with Mega Menu functionality, Listdomer provides two main solutions:

• Modify the Listdomer Header and Footer templates and assign them through Header Settings or Footer Settings.
• Design a custom Elementor Pro header and footer and apply them using Display Conditions.

Both approaches allow greater flexibility, ensuring that you can achieve the desired look and functionality for your Listdom-powered directory site.