Do you want to play with the settings of the Header and Footer builder of the Kadence WordPress theme? Let me explain the preferences and customize a simple Header & Footer to offer a smooth site navigation for your readers.
This user-friendly, drag-and-drop builder of the Kadence theme allows us to create a Header & Footer that matches our brand identity without any coding knowledge. The pre-built elements also speed up the design process.
Glad you want to enhance your website’s visual appeal using this best WordPress theme. Kadence theme offers complete control over the elements to generate an ideal top and bottom design for your web asset. You must check its Free Vs Pro comparison!
Now, let’s see how to use this design builder!
How to use the Kadence header builder?
Step 1: Log into 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 do some customizations to get 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 setting 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 modifying their color, size, and other options. These settings are available under the “Design” tab.
Note: I have shown only a few setting preferences. Some more options are available, and you may fix 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 everything for your website.
I hope you will use this Kadence header builder wisely to get a unique design that will attract your readers’ attention.
Kadence Footer Builder
Step 1: Log into 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 interchange the Widget elements’ positions according to your needs. 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 that you can dive deep into the personalization of your business branding.
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
- Customized header with your preferred color, background, spacing, borders, and margins
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.
Footer Builder Features
Like the header builder of the Kadence theme, the footer builder has fantastic settings for designing your site footer with widgets, social media, icons, logo, and 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
- 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 for extensive customization without needing to code.
FAQs
1. How to add 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 codes. The scripts will go global for all the pages.
2. How to edit the header and footer in the Kadence theme?
Kadence theme contains an intuitive header and footer builder with in-depth customization settings. 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.
Wrapping Up The Kadence Header Footer Builder
The Header and Footer builder of the Kadence theme is a must-use WordPress tool because of its feasibility and customizability. I admire its advanced features and dynamic layouts, which nudge me to use them for my client websites.
As the theme is optimized for speed performance, you don’t need to worry about the custom header, and the footer will slow down your site. Even though the builder is user-friendly, some sophisticated features might need a bit of a learning curve. Be prepared!
I like in-depth theme settings options and hence, presented this tutorial with clear screenshots. If you experience any issues or need help to use the Kadence header footer builder, contact me through the comment section. I’ll do my best to get things done!
