The Ultimate Guide for Creating an Elementor Header and Footer 

What is a Header?

Header from 1dea website with a clean, well-organized layout

The website header is the uppermost part of your webpage and is typically consistent across the entire site, although some sites feature different headers for various sections. It’s the first thing users see on any page of your website, be it the homepage, about page, or a single post. A well-designed header can capture the user’s interest immediately, encouraging them to continue exploring your site.

Headers are important for reinforcing your business’s brand identity. They often include key branding elements such as your company logo, selected typography, brand colours, and overall brand language. Beyond just aesthetics, they serve practical purposes too. They house essential elements like navigation menus, search functions, shopping carts for e-commerce sites, call-to-action (CTA) buttons, and more. These components not only improve the overall user experience but also play an essential role in boosting conversion rates.

What is a Footer?

A well made website footer with services, contact details, and social media icons.

The footer is the section found at the bottom of every webpage. Similar to headers, footers are usually consistent across the entire website, appearing on every page and post. Despite often being overlooked, footers are as important as headers since they are found everywhere on the site.

A strategically designed footer can serve many purposes, depending on how it’s set up. It’s an ideal place to offer valuable and essential information like:

• Newsletter sign-up options

• Copyright details

• Terms of use

• Privacy policies

• Sitemap

• Contact details

• Social icons or social links

• Maps

• Additional website navigation links.

Leveraging this space effectively can enhance the user experience and provide visitors with easy access to important information.

What do you need to create an Elementor Header and Footer?

Step 1: Install Elementor

To get started, navigate to your WordPress admin dashboard, then to Plugins → Add New. In the search box, enter “Elementor” and proceed to install and activate it.

Install and activate Elementor plugin in WordPress dashboard

Keep in mind, the ability to customize footers and headers directly in Elementor without the use of add-ons requires Elementor Pro. But if you’re using the free version, don’t worry! There’s a free Elementor add-on like ElementsKit that you can use and that’s exactly what we’ll cover here on this blog. 

Step 2: Install ElementsKit

ElementsKit is a plug-in made by Elementor that offers a wide range of add-ons and widgets that can enhance Elementor. It also offers a header and footer builder module packed with features that let you edit your Elementor headers and footers exactly to your liking. Equipped with a variety of Elementor header and footer templates, enabling you to design your site’s header and footer with just a few clicks. 

Moreover, it supports the creation of multilingual websites in WordPress, making it a popular choice with over 1 million active users.

To get started with ElementsKit, the installation process is straightforward:

• Head over to your WordPress admin dashboard.
• Navigate to Plugins → Add New.
• Search for “ElementsKit” in the search box.
• Proceed to install and activate the plugin.

Install ElementsKit plugin: Navigate to Plugins → Add New.

How to make Elementor Header (or Elementor Footer) with ElementsKit

Designing and modifying headers and footers in WordPress using ElementsKit is straightforward and requires only a few steps. However, before you start crafting your headers, it’s important to set up a Mega Menu. Once that’s in place, you can effortlessly incorporate your menu details into your Elementor header using our navigation menu widget.

Set up your header and footer

Starting with the creation of a WordPress header or footer in just a few simple steps:

1. Navigate to ElementsKit: First, head over to your WordPress Dashboard, and select > ElementsKit. Then, click on > Header Footer.

Access ElementsKit: Go to WordPress Dashboard, select ElementsKit, then Header Footer

2. Access Builder Page: This action will direct you to the header and footer builder page. Here, you should click on ‘Add New’ to begin setting up your Elementor header or footer template, including its name, user roles, and other essential details.

Go to Builder Page: Access header/footer builder, click Add New to set up Elementor template.

Go to Builder Page: Access header/footer builder, click Add New to set up Elementor template.

3. Set Up Your Template Settings: Upon clicking Add New, the Template Settings tab will open. You’ll need to fill in various fields here, such as Title and Type of Template (choosing either Header or Footer). Additionally, you’ll specify Conditions to determine where your header or footer will appear – be it across the entire site, on a singular page, or in archives. After making your selections, click on the Publish button.

Now that you’ve successfully created your header or footer, you’re all set to start customizing it to fit your site’s needs!

Customize your header or footer:

To edit your Elementor header or footer template, simply click on the “Edit with Elementor” button. This step is your key to adding the header or footer into your website seamlessly.

Edit header/footer template: Click ‘Edit with Elementor’

Clicking “Edit with Elementor” will navigate you to the Elementor Dashboard. Here, you’ll see four distinct icons: Add new container, add template, add ElementsKit templates, and starter templates.

Navigate to Elementor Dashboard: Click ‘Edit with Elementor’, then Elements Kit icon.

Click the third option — ElementsKit icon —- to see the Elementor template Library provided by ElementsKit. Now, you can still create your own header from scratch, but for this guide, we’ll focus on using the templates. 

How to customize your header starting with a template 

Once you click the ElementsKit icon and the template library shows up, select your ideal Elementor header template by clicking on “Sections.” For easier navigation, click on “Category” in the left-hand corner to filter through to your desired section. 

Within the “Select Header” section, you’ll find a variety of default header templates. Choose a template design that appeals to you.

Choose Elementor header template: Click ‘Sections’, filter by category, select desired design.

Remember, all ElementsKit layouts are fully customizable to suit your specific needs.

Once you’ve selected a template, a Nav Menu icon will become visible on your header template. Following this, the Elementor Header title you previously entered in your WordPress dashboard will show up in the select menu section. Clicking on this header title will reveal all your mega menu items.

To preview, simply click on the eye icon in Elementor. This allows you to see how your header will look live on your website.

How to customize your footer starting with a template

The process for integrating both headers and footers into your website is almost similar, with one small distinction for footers. When creating a footer, simply choose a footer template from the search category in ElementsKit, enter your details, and that’s it—straightforward and hassle-free!

What can I customize on my site’s header?

In the customization menu, you have the freedom to shape the appearance of your site’s header. This includes selecting from various layouts, adjusting the width, choosing a background colour, customizing the menu, and fine-tuning the appearance and style of each component.

Image By: Elementor

Header

Explore the range of control options available for tailoring your site header to match your site’s theme and style:

Control Options:

• Site Logo: Use this option to display or hide your logo or title.
• Tagline: Toggle to show or hide your site’s tagline.
• Menu: Decide whether to display or conceal your navigation menu.
• Layout: Options include Default, Inverted, or Centered layouts.
• Width: Select either a full-width or boxed layout.
• Gap: Adjust the margin gaps in percentages or pixels.
• Background Type: Choose between classic or gradient backgrounds.
• colour Customization: Use the colour picker to set your background colour(s).
• Image: Upload or select an image from your media library or upload a new one. Customize its display using standard image controls like position, attachment, repeat, and size.

Site Logo

Control Options:

• Type: Use the dropdown menu to choose between displaying a title or a logo.
• Text colour: If you’ve chosen to display text, select its colour using the colour picker, manually inputting a value, or opting for dynamic colour choices.
• Typography: For text titles, adjust the font size and family to fit your design.
• Logo Width: If you’re using a logo, adjust its size with the slider in percentage, pixels (PX), or viewport height (VH).

Tagline

• Text colour: Select the tagline colour using the colour picker, manual input, or dynamic choices.
• Typography: Customize the font size and family for your tagline to fit your site’s design.

Menu

Control Options:

• Menu Selection: Use the dropdown to choose which menu you want to display. Menus can be set up in WP menus.
• Menu Layout: Opt for either a horizontal layout or a dropdown menu.
• Breakpoint: Determine the breakpoint for displaying the toggle menu.
• colour: Select your menu’s colour using the picker, input, or dynamic choices.
• Toggle colour: Pick the toggle button’s colour with the colour picker, input, or dynamic options.
• Typography: Adjust the menu’s font size and family according to your preference.

What can I customize on my site’s footer?

Image By: Elementor

Footer

Control Options:

• Site Logo: Switch on/off to display or conceal your logo or title.
• Tagline: Toggle to show or hide your tagline.
• Menu: Toggle to make your menu visible or hidden.
• Copyright: Toggle to display or hide the copyright text in the footer.
• Layout: Select your preferred layout from Default, Inverted, or Centered options.
• Width: Choose between a full-width or boxed layout.
• Gap: Adjust the margin gaps in percentage or pixels.
• Background Type: Choose for either classic or gradient background styles.
• colour: Use the colour picker to set your background colour(s).
• Image: For a classic background, select an image from your media library or upload one. Then, adjust it using standard controls for position, attachment, repeat, and size options.

Site Logo

Control Options:

• Type: Use the dropdown to choose between displaying a title or a logo.
• Text colour: If you select “Text,” pick a colour using the picker, enter a value, or use dynamic options.
• Typography: For text titles, customize the font size and family.
• Logo Width: If “Logo” is chosen, adjust its size with the slider, available in percentage, pixels (PX), or viewport height (VH).

Tagline

Control Options:

• Text colour: Select your preferred colour using the colour picker, entering a value, or opting for dynamic choices.
• Typography: Adjust the font size and family for your tagline to match your site’s style.

Menu

Control Options:

• Menu Selection: Use the dropdown to pick the menu you want to show, set up through WP menus.
• Menu Layout: Choose between a horizontal layout or a dropdown menu.
• Breakpoint: Determine the screen size at which the toggle menu appears.
• Colour options: Select the menu’s colour with the colour picker, manually input a colour, or use dynamic selections.
• Toggle colour: Pick the toggle button’s colour using the same selection methods as above.
• Typography: Customize the menu text by setting the font size and family to suit your design.

Copyright

Control Options:

• Text area: Enter your copyright message here, using either plain text, HTML, or dynamic choices.
• Text Colour: Select the colour for your copyright text using the picker, entering a value, or opting for dynamic options.
• Typography: Adjust the font size and family for the copyright text to align with your site’s aesthetics.

5 tips for creating a good header or footer

When designing headers and footers in Elementor, it’s important to first determine the key elements you want to showcase. The header is the initial point of contact for your site visitors, presenting a prime opportunity to convey the essence of your brand or business.

The footer deserves just as much focus, serving as an ideal spot for essential information that visitors might seek. This includes direct links to your Contact and Career pages, especially for a company website.

Here are some top tips for anyone setting up headers and footers in WordPress using Elementor:

1. Get creative with white or negative space

Web designers are always looking for innovative methods to apply white space in their websites for both design and content purposes. Likewise, white space can be cleverly used in your header design to highlight key elements. For example, strategically placed white space can draw more attention to your logo or make your search bar more noticeable to visitors.

Consider the example of BBC’s website design. They’ve effectively utilized white space to emphasize their brand logo and to ensure the menu is easily navigable, thanks to well-spaced items.

2. Always test responsive on various devices

Making sure your WordPress header design adapts well across various devices is critical, a point you’ve likely heard often. When designing headers and footers in WordPress, it’s essential to verify they maintain their integrity on devices like mobile phones and tablets without any issues.

When working with Elementor to create your header and footer, checking their responsiveness on different devices is straightforward. In your Elementor Editor, just click on the desktop icon located at the bottom. This allows you to preview your design across a range of screen sizes, making sure everything looks great no matter where it’s viewed.

Check responsiveness in Elementor: Click desktop icon for preview.

3. Design custom headers just for mobile devices

If your menu includes numerous navigation links, creating a tailored header design for mobile devices might be essential. It’s important that the content displayed in both desktop and mobile header designs remains consistent. However, for mobile devices, implementing a custom header design that effectively and attractively presents the same content on smaller screens can enhance user experience.

4. Pick fonts and typography that are simple and clear

Subtle and minimalist designs have remained popular in website design for several years, and this trend persists into 2021. This approach emphasizes the importance of simplicity and readability in typography, especially for your WordPress header and footer design.

The header and footer are key areas where visitors quickly search for specific information. Therefore, using straightforward, readable fonts is important to make sure visitors can easily understand whether the website content meets their needs.

5. Keep your design consistent across all pages

Global colours of a website showing consistent design unifies brand across website pages.

Making sure your website sports a unified design across all its pages is important for highlighting your brand and enhancing brand awareness. This unified design approach should span from your header to your footer, adopting a consistent design system throughout your site.

Save time keeping your website's brand design consistent with expert help

And there you have it—a detailed guide on creating and customizing headers and footers in Elementor using ElementsKit. We’ve covered the journey from the initial setup to the intricate process of personalization, making sure that every corner of your website’s top and bottom sections are not just functional but a reflection of your unique brand and vision.

Gone are the days of dedicating hours to customizing your site’s CSS header and footer. With Elementor and add-ons like ElementsKit, crafting headers and footers is effortlessly straightforward.

Taking the steps to customize your website’s headers and footers is a great start, but there’s much more to building a strong online presence. That’s where we can help! We specialize in strategic branding and we can provide you with personalized advice and solutions tailored to your needs. Our professional WordPress website support guidance will help you effectively implement the insights from this blog and make sure your website follows a consistent brand design. Contact us today!