Creating and customizing headers and footers is essential to designing a WordPress website. While Elementor Pro offers extensive features, you can achieve this for free by combining the Elementor Free Version with the ElementsKit plugin, a dedicated header and footer builder for Elementor users. This guide walks you through the process step-by-step.
Step 1: Install Elementor Plugin
To get started, ensure that your WordPress website has Elementor installed. Follow these steps:
- Navigate to Plugins → Add New in your WordPress dashboard.
- Search for Elementor.
- Click Install Now, and then activate the plugin.
Note: The free version of Elementor is powerful enough for basic customization. However, for advanced options, consider upgrading to Elementor Pro.
Step 2: Install the ElementsKit Plugin
The ElementsKit plugin is a versatile tool designed for Elementor users, offering a rich library of templates and customization options for headers and footers. To install it:
- Go to Plugins → Add New in your WordPress dashboard.
- Search for ElementsKit.
- Click Install Now and activate the plugin.
Step 3: Create a Custom Header or Footer
Once both Elementor and ElementsKit are installed and activated, you can begin creating your custom header or footer.
Creating and Customizing a Header
- In your WordPress dashboard, navigate to ElementsKit → Header Footer.
2. Click Add New Template and assign a name to your header template.
3. In the template settings:
- Set the Type to Header.
- Define the Display Conditions (e.g., display on the entire site, specific pages, or archives).
4. Activate the template by toggling the Active button, then click Edit Content to open the Elementor editor.
Within the Elementor editor:
- Use ElementsKit’s pre-designed header widgets and templates to build your header quickly.
- Drag and drop widgets like navigation menus, logos, and search boxes.
- Customize the styles, colors, and layout to suit your site design.
Creating and Customizing a Footer
The process for creating a footer is similar to creating a header:
- In ElementsKit → Header Footer, click Add New Content and assign a name to your footer template.
- Set the Type to Footer in the template settings.
- Define the Display Conditions for where the footer will appear (e.g., site-wide, on specific pages, or archives).
- Activate the template and click Edit Content to enter the Elementor editor.
Within the Elementor editor, customize your footer:
- Add widgets like contact information, social media links, and copyright text.
- Use ElementsKit’s pre-designed templates for footers to speed up the design process.
- Enhance your footer with features like a site map or call-to-action buttons.
Step 4: Customize and Edit Your Header and Footer
Once you’ve created your header or footer templates, use Elementor’s visual editor to refine your design.
Tips for Header Customization:
- Add navigation menus with dropdown options or mega menus for more significant sites.
- Include functional elements like a shopping cart icon (for e-commerce websites) or a sticky header effect.
Tips for Footer Customization:
- Include links to privacy policies, terms of service, or other important pages.
- Add visually appealing social media icons with links.
- Use ElementsKit’s advanced widgets for stylish footers that match your branding.
Both header and footer designs can be saved and reused for consistency across your website.
Step 5: Activate and Display Your Custom Header and Footer
Once your design is complete:
- Click the Save button in the Elementor editor.
- Return to the Header Footer management page in ElementsKit.
- Ensure your template is activated and correctly assigned to the desired display conditions.
Your custom header and footer will now appear on your website according to the settings you’ve applied.
Why Use ElementsKit for Elementor Headers and Footers?
ElementsKit enhances the capabilities of Elementor Free by providing the following:
- A drag-and-drop visual editor for easy design creation.
- Pre-designed templates for headers and footers that reduce setup time.
- Advanced widgets such as mega menus, sticky headers, and customizable icons.
Summary
Combining Elementor Free with the ElementsKit plugin lets you easily create and customize professional headers and footers for your WordPress site. The process is intuitive and requires no coding skills, making it accessible to beginners and experts. Whether creating a minimalist header or a feature-rich footer, this combination provides all the tools you need to elevate your website’s design.
Start experimenting today and enjoy the flexibility of creating unique headers and footers tailored to your website’s needs!