Kadence Theme tutorial: How to Create Complex Headers with Kadence Pro?

In this Kadence theme tutorial I‘m going to show you how to create complex headers with the Kadence Pro theme. Why? Well, today I had a bit free time in my hand and I wanted to see how powerful the Kadence header builder actually is. Therefore, I looked for an example which seemed a bit more complicated than most of the sites over there.

Kadence theme

SAVE 10% COUPON: SIMPLEHACKS

So, I browsed in Themeforest and found a theme called Porto which had on demo I wanted to recreate with Kadence. See the screenshot below.

Kadence Theme tutorial: How to Create Complex Headers with Kadence Pro?

Now, that seems like a good challenge, does it? Therefore, I created for myself a brand new WordPress site and added only these plugins:

* I needed this only for exporting the template which you can download below.

Take a look at the screenshot here below. This show you what did I accomplish within the 30 minutes. Pretty similar, don’t you think?

Kadence Theme tutorial: How to Create Complex Headers with Kadence Pro?

If you would like to know how I did it then take a look at this video here below.

Otherwise, you can download the export files and import them to your site. If you don’t know how to import Kadence settings then take a look at the video (this part starts at 28:34)

In order to import it you your site you need to:

  • unzip the .zip file
  • install Kadence Pro Addon
  • install and activate Kadence Addons by going Appearance >> Kadence
  • install and activate Kadence Blocks plugin
  • optional: if you need Wishlist on your site then install TI Woocommerce Wishlist plugin
  • import “kadence-theme-export.dat” file by going to Customizer >> Import/Export. You need the Kadence Starter Templates plugin to be installed

Other files are optional. For example,. if you need a below header section like shown in the video (see the screenshot above) then just copy everything inside the right file and paste it to the editor.

Kadence Theme Tutorial Video: How to Create Complex Headers with Kadence Pro?

CSS used in the video

Search from styling

form.woocommerce-product-search input[type="search"] {
    border-radius: 50px;
}

Wishlist styling

.top_wishlist-heart.top_wishlist-.no-txt:before {
	font-size: 2em;
}
/* Sticky header icon color */
.site-header-upper-inner-wrap.child-is-fixed .top_wishlist-heart.top_wishlist-.no-txt:before {
	color: #fff;
}

Woocommerce store notice styling

p.demo_store, .woocommerce-store-notice {
    padding: 0.5em;
    font-size: 15px;
}

Kadence account icon for sticky header


.site-header-upper-inner-wrap.child-is-fixed .kadence-svg-iconset {
	color: #fff;
}

Useful tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72