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.

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.

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

• Kadence Pro theme addon
• Kadence Blocks
• Kadence Starter Templates *
• TI Woocommerce Wishlist

* 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?

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