Your Elementor Header Footer Tutorial

Before you even think about building your custom header or footer, you’ve got to make a crucial decision: which tools are you going to use? This is a fundamental choice that sets the stage for your entire project.

Your main path splits in two here. You can either go all-in with the Elementor Pro Theme Builder, or you can stick with the free version of Elementor and pair it with a specialized addon, like the ‘Header, Footer & Blocks’ plugin or the one built into our own Exclusive Addons. This decision really shapes your budget, what features you’ll have at your fingertips, and your overall workflow.

Choosing Your Header and Footer Toolset

Jumping into a web design project without the right tools is like trying to build a house with just a hammer. You might get a wall up, but it’s not going to be professional or built to last. When it comes to custom headers and footers in WordPress, Elementor is your foundation, but you need to pick the right toolkit to build on top of it.

The two main approaches come with different costs and capabilities. Let’s break them down so you can figure out what makes the most sense for your project.

Comparing Your Main Options

First up, you have the option to upgrade to Elementor Pro. This is a seriously powerful, all-in-one solution. It unlocks the Theme Builder, which gives you total control over every single part of your site—not just headers and footers, but also archive pages, single post templates, and more. It’s a fantastic choice for professional developers and agencies who are juggling multiple projects and want everything under one roof.

The other route is to use the free version of Elementor and beef it up with a third-party plugin. This is the perfect strategy if you’re working with a tighter budget or just need to build a custom header and footer for one or two sites. Plugins like ‘Header, Footer & Blocks for Elementor’ or the features packed into Exclusive Addons give you exactly what you need without the full price tag of a Pro license. For a more detailed walkthrough, you can follow our complete guide on how to create an Elementor header and footer using this method.

This image really drives home just how much time you save using a builder like Elementor compared to the old-school way of coding everything by hand.

As you can see, a visual builder can take a task that used to eat up hours and shrink it down to just a few minutes. That’s a huge win for efficiency.

Elementor Pro vs Free Plugin + Addon: A Quick Comparison

The core difference isn’t just about cost—it’s about workflow and scale. Elementor Pro offers a completely unified environment, which is great for complex projects. On the other hand, the free plugin-and-addon combo provides a more modular, budget-friendly solution for more targeted needs.

This table should clear things up:

Ultimately, both paths get you to the same destination: a beautiful, custom header and footer. Your choice just depends on the journey you want to take and the tools you prefer to use along the way.

The Popularity of Visual Design

There’s no denying the massive shift toward visual design tools. Elementor’s incredible growth, now powering over 10.1 million websites with just its core plugin, is proof enough.

But what’s even more telling is that the Elementor Pro version—the one with the Theme Builder we’re talking about—is active on over 3.6 million sites. That’s a massive number, and it confirms what many of us have known for years: users overwhelmingly prefer having direct, visual control over trying to wrestle with complicated code.

Alright, let’s get down to business. Theory is great, but building something tangible is where the real learning happens. Whether you’re working with Elementor Pro or a free addon, the actual process of creating a custom header is surprisingly similar. You’ll be using the familiar drag-and-drop editor, starting from a blank slate and adding the pieces you need, one by one.

The goal here isn’t just to make something that works. We want to craft a header that makes a powerful first impression on every visitor.

Your starting point is the WordPress dashboard. If you’ve got Elementor Pro, you’ll navigate to Templates > Theme Builder. For those of us using a plugin like ‘Header, Footer & Blocks for Elementor’, there’s a dedicated menu for it, usually tucked under Appearance. No matter which path you take, the next step is to create a new template and—this is important—specify that it’s a “Header.”

This simple selection is what tells WordPress, “Hey, use this awesome design I just made as the header for my entire site.” It’s a critical step that you don’t want to miss.

Laying Out Your Header Structure

Once you’re inside the Elementor editor, the first thing you’ll do is set up the basic structure. Take a moment to think about the layout you’re aiming for. Are you going for a classic look with a logo on the left and navigation on the right? Or maybe something more complex, like a three-column layout that includes a logo, menu, and a prominent call-to-action button?

Click the little plus icon to add a new section, and then choose your column layout. For most projects, a two-column section is the perfect starting point. You can easily adjust the column widths by dragging the divider between them. A very common and effective setup is to give the logo column a 25% width and the navigation menu the remaining 75%.

Pro Tip: Don’t stress about getting the column widths perfect on the first try. The beauty of building with Elementor is its flexibility. You can add, remove, or resize columns at any point as your design evolves.

Adding Essential Header Elements

With your basic structure in place, it’s time for the fun part: adding the widgets that bring your header to life. This is where your design starts to take shape.

• Site Logo: Grab the Site Logo widget from the left-hand panel and drop it into your left column. If you’ve already set up a logo in the WordPress Customizer (Appearance > Customize), it should pop up automatically. If not, no big deal—you can upload one directly from the widget’s settings.
• Navigation Menu: Now, for the right column, pull in the Nav Menu widget. Elementor will then ask you to choose which menu you want to display from the ones you’ve created under Appearance > Menus in WordPress.
• Call-to-Action (CTA): Want to add a button? Just drag the Button widget into that same right column, maybe right next to your menu. Customize the text to something that encourages action, like “Get a Quote” or “Contact Us.”

Using addons for this is incredibly common. In fact, the ‘Header, Footer and Blocks for Elementor’ plugin is active on over 1,051,000 live websites around the world, with a huge user base of over 431,000 in the United States alone. This just goes to show how many people rely on this method to break free from theme limitations. You can check out more stats on plugin adoption trends at BuiltWith if you’re curious.

You’ve built a gorgeous new header, but the real magic happens when you decide exactly where it shows up. That’s where display conditions come into play. This feature turns your header from a simple, static part of your site into a dynamic tool for guiding your visitors. After all, you don’t always want the exact same header on every single page.

When you’re ready to go live and hit “Publish” on your header template, Elementor will immediately ask you to set these conditions. This is the critical moment where you tell WordPress which parts of your site should use this new design. It’s far more than a simple on/off switch; think of it as a sophisticated rulebook for your site’s layout.

Setting Your First Display Rule

Most of the time, your starting point will be applying the header to the Entire Site. This is the go-to global setting. It ensures your branding stays consistent across the board, from your “About Us” page all the way to individual blog posts. It’s a simple, one-click way to roll out your new design everywhere.

But the real power lies in layering multiple, more specific conditions on top of that. You can stack rules to create highly targeted experiences. For instance, you might have one main header for your entire site but need a completely different, simplified version for a specific marketing campaign’s landing page.

Display conditions are your secret weapon for creating a tailored user journey. A minimalist header for a checkout page can reduce distractions and boost conversions, while a unique header for a landing page can reinforce its specific marketing message.

Real-World Scenarios for Conditions

Thinking beyond the basic “Entire Site” rule opens up a whole new world of design possibilities. You can craft a much smoother user experience by matching your header’s design to the purpose of the page.

Here are a few practical examples to get you thinking:

• A Unique Blog Header: You could create a slightly different header that only appears on your single post pages and blog archive. Maybe this version includes a prominent search bar or quick links to popular categories.
• A Focused Landing Page Header: For a specific landing page, you could design a streamlined header with no navigation at all. This keeps visitors locked in on the main call-to-action without giving them an easy exit.
• A Secure Checkout Process: It’s common practice to implement a completely stripped-down header for the WooCommerce checkout flow. Removing all navigation links can significantly minimize cart abandonment by keeping the customer focused on completing their purchase.

This level of control is also crucial for more complex navigation setups. If your site has a lot of pages and needs more advanced menus, you can build an Elementor mega menu and then use these very same display conditions to decide precisely where it appears. Once you get the hang of display conditions, you can pair powerful widgets with surgical-like precision.

Crafting a Professional and Useful Footer

While headers get all the glory, the footer is some of the most valuable real estate on your entire website. I’ve seen it time and time again—visitors, especially those hunting for specific information, instinctively scroll right to the bottom. Let’s build a footer that does more than just hold a copyright notice; let’s turn it into a navigation and trust-building powerhouse.

The good news is that the process for creating a footer template is nearly identical to creating a header. You’ll navigate to your template builder (whether in Elementor Pro or your chosen addon) and create a new template, but this time, you’ll designate it as a Footer. From there, you just need to set the display conditions, likely choosing Entire Site to make sure it appears on every single page.

Designing a Multi-Column Footer Layout

A cluttered footer is a useless footer. Seriously. The key to an effective design is organization, and from my experience, the best way to achieve that is with a multi-column layout. A three or four-column structure is perfect for creating a clean, logical way to separate different types of information.

To get started, just add a new section and select your preferred column count. Don’t stress about getting the spacing perfect right away; you can easily drag the column dividers to adjust the widths as you add your content. A pretty common and effective approach is to have a wider column for a brief “About Us” blurb and then narrower, equal-width columns for your link lists.

A well-structured footer acts as a secondary sitemap, guiding lost visitors and offering them clear next steps. By organizing information logically, you reduce bounce rates and keep users engaged with your content.

Adding Essential Footer Elements

Once your columns are in place, it’s time to populate them with useful widgets. Think about what a user who has scrolled all the way to the bottom of a page might be looking for.

• Secondary Navigation: Use the Icon List or Text Editor widget to create lists of important links. These are often different from your main navigation and can include links to your blog, career page, FAQ, or support center.
• Contact Information: Dedicate a column to your physical address (if you have one), phone number, and business email. The Google Maps widget is also a fantastic addition for local businesses to build trust.
• Legal Pages: This one is non-negotiable. Your footer absolutely must include clear links to your Privacy Policy and Terms of Service. This is a major trust signal for both your users and search engines.
• Social Proof: Use the Social Icons widget to link directly to your social media profiles. It’s a simple way to reinforce your brand presence across different platforms.

Including a Call to Action

Your footer is the final touchpoint on a page, making it a prime location for one last conversion opportunity. Instead of letting the user’s journey fizzle out, give them something to do. A newsletter signup form is a classic and highly effective choice here.

You can also use the Button widget to create a compelling CTA. To really make it stand out, play around with the different styles and options offered by addon packs. You can find more inspiration on how to design an effective button in our guide to the Elementor call to action widget. After adding your main elements, finish things off with a simple Text Editor widget at the very bottom for your copyright notice.

Advanced Techniques for Responsive Design

It’s one thing to build a beautiful header on a desktop. It’s another thing entirely to make sure it doesn’t fall apart on a smaller screen. Honestly, this is where you can spot the difference between a good website and a truly professional one. Getting your responsive design right isn’t just an extra task; it’s absolutely essential for a smooth user experience on any device.

Let’s get into some of the more advanced tricks that can really make your designs pop. We’ll look at practical tweaks like creating a sticky header that follows users as they scroll and implementing a transparent header for that slick, modern feel. These might seem like small details, but believe me, they make a huge impact on how people see your site.

Beyond the cool effects, we’ll dive into the most critical part: using Elementor’s responsive modes. This is how you guarantee your header and footer look flawless on tablets and mobile phones—which, let’s face it, is where most of your traffic is probably coming from anyway.

Making Your Header Sticky or Transparent

A sticky header is a game-changer for site navigation. Think about it: by keeping your menu visible while users scroll, you save them the annoyance of having to scroll all the way back to the top just to get to another page. It’s a simple touch that dramatically improves usability.

Setting this up is surprisingly easy. Just select the main section of your header template.

1. Head over to the Advanced tab.
2. Find and open the Motion Effects panel.
3. Switch the Sticky option to “Top.”

You can even tell Elementor which devices to apply this effect on. For instance, you might want the sticky functionality on desktop but disable it on mobile to save precious screen real estate. That’s the kind of granular control that helps you build a better experience.

A transparent header is another design trend I’m seeing everywhere, and for good reason. It lets the header float over your page’s hero section, creating a polished and immersive look right from the start. You’ll find this setting in the section’s advanced options, too. The trick is usually to set a negative top margin, which pulls the content underneath it up behind the header.

Optimizing for Tablet and Mobile Views

Okay, this is where the real work begins. At the bottom of your Elementor editor, you’ll see the Responsive Mode icon. Clicking it opens up views for Desktop, Tablet, and Mobile, letting you preview and tweak your design for each one.

The best part? Changes you make in one mode generally don’t mess up the others. This gives you total freedom to tailor the layout for each screen size.

On mobile, your main goal should be a clean, functional, and clutter-free interface. This almost always means stripping the header down to its bare essentials: your logo and a hamburger menu icon.

Start by switching over to the mobile view. You’ll probably see your beautiful desktop menu looking cramped or completely broken. The first move is to hide that desktop navigation menu on mobile devices.

• Select your desktop Nav Menu widget.
• Go to the Advanced tab and find the Responsive section.
• Toggle Hide On Mobile to the “On” position.

Building a Functional Hamburger Menu

With the old menu gone, it’s time to bring in a mobile-friendly replacement. Drag a new Nav Menu widget into your header (or a specific “Hamburger Menu” widget if your addon pack has one). By default, Elementor’s own menu widget smartly converts to a hamburger icon on smaller screens.

Now, you can dial in every detail for your mobile visitors:

• Adjust Font Sizes: Text that looks great on a desktop is often way too big for a phone. Click on your text elements and shrink the font size specifically for the mobile view.
• Tweak Column Layouts: That multi-column layout from your desktop version? It’s not going to work here. You’ll want to switch to a single column. Just select a column and, under its Layout tab, change the width for the mobile breakpoint.
• Refine Element Spacing: Use mobile-specific padding and margin settings to give your elements some breathing room. A cramped interface is a usability nightmare.

This level of control is also incredibly important for multilingual sites. Many web creators rely on plugins like the Elementor Header & Footer Builder, which works seamlessly with WPML. This ensures all these responsive tweaks you’ve made apply perfectly across every language on your site. You can find out more about this powerful plugin compatibility on wpml.org.

Frequently Asked Questions

Whenever you dive into a new process like building custom headers, a few questions are bound to pop up. It’s totally normal. To help you get your bearings, we’ve put together answers to some of the most common issues we see people run into when they first start out.

Can I Create a Custom Header with Free Elementor?

Yes, you absolutely can! It’s a common misconception that you need Elementor Pro for this. While the free version of Elementor doesn’t have the Theme Builder, you can easily get the same functionality by pairing it with a good addon.

Plugins like Exclusive Addons or ‘Header, Footer & Blocks for Elementor’ are designed for exactly this. They add a new area, usually under the Appearance tab in your WordPress dashboard, where you can create and manage your header templates. From there, you just use the familiar Elementor editor to design it, piece by piece.

How Do I Make My Elementor Header Sticky?

Making a header “sticky” is a fantastic way to keep your navigation accessible as users scroll down the page. It’s a popular design choice for a reason, and thankfully, it’s incredibly simple to set up in Elementor without touching a line of code.

Here’s all you have to do:

1. Open your header template in the Elementor editor.
2. Click on the main Section that holds everything in your header. You want the outermost blue-bordered container.
3. Head over to the Advanced tab in the settings panel on the left.
4. Open the Motion Effects section and find the Sticky option. Just switch it to “Top.”

Elementor even lets you control this for different devices. You can make the header sticky on desktops but have it behave normally on tablets or phones, giving you fine-tuned control over the user experience.

Why Is My Custom Header Not Showing Up?

This is, without a doubt, the most frequent snag people hit. When your beautiful new header just refuses to appear on the live site, the culprit is almost always one of two things: display conditions or caching.

A custom header or footer is useless if it doesn’t appear where you want it to. Double-checking your Display Conditions is the single most important step after you finish designing your template.

First, go back and edit your header template. You’re looking for the Display Conditions setting. You have to tell Elementor where to show this header. The most common setting is Entire Site, but if that rule isn’t set, Elementor has no idea what to do with your template.

Second, think about caching. If you use a performance plugin like WP Rocket or LiteSpeed Cache, or if your host uses server-side caching, you need to clear it. Your browser might just be showing you an old, stored version of your site. A quick cache purge is often all it takes to make the new header pop right into place.

Ready to build not just headers and footers, but entire websites with total creative control? Exclusive Addons gives you over 108 powerful widgets and extensions to take your Elementor projects to the next level.

Explore the full suite of tools at Exclusive Addons