On this Kadence theme tutorial I‘m going to point out you learn how to create complicated headers with the Kadence Professional theme. Why? Nicely, as we speak I had a bit free time in my hand and I needed to see how highly effective the Kadence header builder really is. Due to this fact, I regarded for an instance which appeared a bit extra difficult than a lot of the websites over there.
So, I browsed in Themeforest and located a theme referred to as Porto which had on demo I needed to recreate with Kadence. See the screenshot beneath.
Now, that looks as if problem, does it? Due to this fact, I created for myself a model new WordPress web site and added solely these plugins:
- Kadence Professional theme addon
- Kadence Blocks
- Kadence Starter Templates *
- TI Woocommerce Wishlist
* I wanted this just for exporting the template which you’ll obtain beneath.
Check out the screenshot right here beneath. This present you what did I accomplish throughout the half-hour. Fairly related, don’t you suppose?
If you need to understand how I did it then check out this video right here beneath.
In any other case, you’ll be able to obtain the export information and import them to your web site. Should you don’t know learn how to import Kadence settings then check out the video (this half begins at 28:34)
With a view to import it you your web site you could:
- unzip the .zip file
- set up Kadence Professional Addon
- set up and activate Kadence Addons by going Look >> Kadence
- set up and activate Kadence Blocks plugin
- non-obligatory: in case you want Wishlist in your web site then set up TI Woocommerce Wishlist plugin
- import “kadence-theme-export.dat” file by going to Customizer >> Import/Export. You want the Kadence Starter Templates plugin to be put in
Different information are non-obligatory. For instance,. in case you want a beneath header part like proven within the video (see the screenshot above) then simply copy every little thing inside the precise file and paste it to the editor.
Kadence Theme Tutorial Video: Methods to Create Advanced Headers with Kadence Professional?
CSS used within the video
Search from styling
type.woocommerce-product-search enter[sort="search"] {
border-radius: 50px;
}Wishlist styling
.top_wishlist-heart.top_wishlist-.no-txt:earlier than {
font-size: 2em;
}
/* Sticky header icon colour */
.site-header-upper-inner-wrap.child-is-fixed .top_wishlist-heart.top_wishlist-.no-txt:earlier than {
colour: #fff;
}Woocommerce retailer discover 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 {
colour: #fff;
}
