When I first started using the Kadence theme on my blogs and client projects, I wasn’t expecting much from its header builder.
Most WordPress themes either lock you into rigid layouts or push you toward page builders like Elementor.
But after building multiple sites from simple blogs to WooCommerce stores, I realized that the Kadence Header and Footer Builder is the most underrated feature in the WordPress ecosystem.
This drag-and-drop builder lets us create a Header & Footer that aligns with our brand identity without any coding knowledge.
This amazing theme offers complete control over the elements to generate an ideal top and bottom design for your business site.
The pre-built elements also speed up the design process. Let me explain the preferences and customize a simple Header & Footer to offer a smooth site navigation for your readers.
In this guide, I’ll walk you through:
- How I personally use Kadence Header Builder in real projects
- What makes it different from Astra and Elementor
- Step-by-step setup guide
If you’re trying to customize your WordPress header or footer without slowing down your site, this will help.
You must also check its Free Vs Pro comparison for a better understanding of the theme features! Now, let’s see how to use this design builder!
Disclosure: We get a commission when you buy a product via our affiliate link at no additional cost.
Table Of Contents
What is Kadence Header Builder? (From Practical Use)
The Kadence Header Builder is a visual drag-and-drop interface inside the WordPress Customizer that lets you design your header layout without writing code.
From my experience, what makes it stand out is not just flexibility, but speed and simplicity. On most sites I build, I use it to:
- Add a logo + primary navigation
- Insert a CTA button (like “Get Quote” or “Start Now”)
- Enable a sticky header for better navigation
- Create a clean mobile header without extra plugins
Unlike many themes, you don’t need Elementor or additional tools to get a professional header.
The footer builder follows the same drag-and-drop approach, but it’s surprisingly powerful. On client websites, I’ve used it to:
- Create multi-column footers
- Add quick navigation links for SEO
- Include social icons and trust elements
- Display dynamic copyright text
One thing I appreciate is that it doesn’t feel bloated; instead, you get flexibility without hurting performance.
How to use the Kadence header builder?
Step 1: Log in to your WordPress Dashboard and go to Appearance > Customize > Header
Step 2: Clicking the header will show two sections (Vertical and Horizontal); the vertical left section has header elements, and the horizontal right section has a header builder. Here is the image for your reference!
Step 3: Look at the standard Kadence header (refer to image). Now, I will make some customizations to give it a unique look.
Default Header
Let me tell you how to use the Header builder of the Kadence WordPress theme to get the output like this!
Simple Customized Header
This sample header has three sections!
Step 4: I’m moving some elements to the header builder section. Check the image below.
Header Top left – Social media icons
Header Top right – Primary Navigation & Search bar
Header Middle – Logo
Header Bottom left – Secondary Navigation Menu
Header bottom right – Signup Button
Step 5: I want to tweak the designs after including the elements.
For example, to change the design of the social icon, you have to click on the settings icon in that element. (Arrow marked in the image)
You may add additional social media icons through the button “Add Social+.“
After inserting your site’s required social media icons, add their links through the “Set Social Links” settings.
I’m now customizing the social media icons by adjusting their colors, sizes, and other settings. These settings are available under the “Design” tab.
Note: I have shown only a few setting preferences. Some additional options are available; you may configure them as per your requirements.
Now, let me change the background color of the Header I’m designing.
For that, I use the top bar settings (Look at the image below)
Under the design tab, we have the option to change the background color of the Header. It has other design settings to customize your site header, not only the color.
Here, I’m changing the background color of my top header section. My header design has 3 sections (top, middle, and bottom – I have shown the sample header at the beginning of the step-by-step guide).
I have changed the background color of the other two sections through the design tab by clicking the settings icon of each section.
Here is the background color code that I have used!
Top Header – F5F6F8
Middle Header – F5F6F8
Bottom Header – 111111
After changing the background color, you can add a suitable menu text color. Go to the bottom menu settings, like the image below.
Modify the menu color, hover color, and current menu color. (Check Reference Image)
Use the “Navigation Colours” option to fix your preferred color combinations. Likewise, change the button text to match your liking.
I’m ending my settings explanations! You should understand that the Kadence theme provides detailed settings to customize every aspect of your website.
I hope you use this Kadence header builder wisely to create a unique design that attracts your readers’ attention.
Step 1: Log in to your WordPress Dashboard and go to Appearance > Customize > Footer
Step 2: Check the Footer builder of the Kadence theme. It has settings similar to those of the header builder.
Step 3: You may rearrange the Widget elements’ positions as needed. Look at the image below!
I hope you are clear with the customization preferences of the Kadence Header and Footer Builder.
Let’s check its unique features so you can dive deep into personalizing your business branding.
Kadence Theme Header Builder Features
The header builder has impressive features! It is possible to design
- Multiple header sections up to three rows with different content and design.
- Different header layouts for different screen sizes
- Transparent and Sticky header for readers’ engagement
- Conditional headers for particular posts and pages based on specific conditions
- Mobile Header customization to avoid clutter on small-screen gadgets
Not only these! This excellent drag-and-drop builder has attractive pre-built layouts and can be integrated with other popular WooCommerce plugins to add e-commerce-related elements.
Like the Kadence theme’s header builder, the footer builder offers powerful settings for designing your site footer with widgets, social media, icons, a logo, and a menu. You can design
- Multiple footer rows of up to three are needed to arrange your content.
- Global footer for your entire site.
- Unique or Conditional footer for particular pages
- A sticky footer that stays at the bottom of the screen when your visitors scroll
The Kadence Header and Footer builder also offers a Global color palette, live editing, and advanced typography, enabling extensive customization without coding.
Kadence vs Astra vs Elementor
I’ve used all three themes extensively. Here is the Header Footer Builder comparison!
| Header Footer Builder | Kadence | Astra | Elementor |
| Built-in | ✅ | ❌ | ❌ |
| Performance | Excellent | Excellent | Moderate |
| Flexibility | High | Medium | Very High |
Frequently Asked Questions
1. How to add a global header and footer in the custom template of the Kadence theme?
The Kadence theme offers complete control over the header and footer design. You can move the required elements to the builder. If you have custom scripts, go to Appearance> Kadence > Enable Header/Footer Scripts to add your code. The scripts will go global for all the pages.
2. How to edit the header and footer in the Kadence theme?
The Kadence theme includes an intuitive header and footer builder with in-depth customization options. You may use the builder to get a personalized design for your WordPress site.
3. Can a unique header be shown on specific blog posts & pages in the Kadence theme?
Yes! You can do it through the Kadence conditional header feature.
Do I need Elementor with Kadence?
No, unless you need advanced landing pages.
What Is The Difference Between Kadence Free and Pro Version For Its Header Footer Builder?
The free version of the Kadence Header and Footer Builder offers all the essential features like drag-and-drop layout, sticky header, transparent header, and mobile customization, which is enough for most basic websites.
The Pro version adds advanced features such as conditional headers, mega menus, and more customization options, making it ideal for complex or client projects. If you’re planning to upgrade, you can also use our exclusive Kadence discount code to get 15% OFF.
Wrapping Up
After using Kadence on multiple projects, I would say it is one of the best header-and-footer-building experiences in a free WordPress theme. It is fast, flexible, and doesn’t force you into extra plugins.
As you can add important pages and links to the header & footer, SEO performance will improve through the engaged site structure. However, avoid too many elements, as this will hurt the user experience.
I hope you are clear with the features and settings of the Kadence header and footer builder. Use this tool to boost your brand’s exposure. If you need any help with the design customization, catch me.
