Top 10 Kadence Blocks & Theme Tutorials for Beginners
This article is greatly composed of videos by other creators and has been crafted to help learn building websites with the Kadence Theme and Kadence blocks.
Be sure to thank the creators by subscribing to their channels and liking their videos.
The Top Ten Kadence Blocks & Theme Tutorials List
Click an option below to jump down to the video. *There are nearly 30 videos within this article. The above list of 10 is merely our top favorites.My #1 tip for those new to Kadence
If you haven’t yet built with Gutenberg, start there. Learn how Gutenberg works and then you’ll be ready to learn how Kadence is like adding lasers to a shark.
SHOP KIT 2.0 Is Awesome!
Special update 9/19/22: I’ve been working with the new shop kit 2.0 for a few weeks now on a new project and can say that this truly separates Kadence from all other block builder add-ons on the market today.
Creating custom product and category layouts and even customizing the product loop layout along with custom cart up-sell content based on products in the cart, new product gallery options, and more, Kadence is a powerful contender in the marketplace of Gutenburg-based Woocommerce customization plugins/addons.
To learn more about Shop Kit 2.0, I recommend two videos and the first is only available on the iThemes website. The video is primarily Ben, the founder of Kadence going through the new Shop Kit. Check it out.
Example Sites Built with Kadence Theme & Blocks
These are actually real-world, live sites we’ve built using the Kadence theme and Kadence Blocks
Go Pro!
If you’re considering truly boosting your web design game, you should be looking hard at the lifetime Kadence membership. Pay once, and get Kadence Blocks Pro for Gutenberg, along with the Kadence Pro theme.
It’s only a matter of time before Kadance removes the ability to buy the lifetime, pay once, and user forever option.
*Disclaimer, any links to purchase Kadance add-ons are affiliate links and I do make a small percentage of the sale. However, if you don’t use my links, it’s all money to Kadence (and honestly I’m okay with that too, Kadance rocks!)
Why Kadence Over The Other Options?
Although it was a very difficult choice for me between Kadence and Generate Blocks, it really boils down to mobile design along with ‘future proofing’ my builds. I’ll elaborate more on this in the coming weeks. For now, this video by Jack Cao sums it up quite well.
UPDATE: After more research, it appears there are much easier ways to do multiple columns on mobile than what Jack Cao demonstrates in this video. Could be a recent update, but worth noting.
Reason #2 for Kadence
The THEME.
Basically, the Kadence theme is more user-friendly, allowing for a much quicker development time of advanced features like the sticky and/or transparent header.
Why’s this important for the page builder? Technically it isn’t. However, anytime you can have a congruent theme and blocks addon, you are likely setting yourself up for fewer issues in the future and better future-proofing your website.
On the flip side, Generate Press is more developer friendly and does currently have more ‘global’ settings, allowing users to do more without entering into the Child Theme for style settings.
Looking to convert your website to blocks with Generate Blocks?
Kyle with Ogal Web Design does a great job walking users through the steps in this extremely well-made tutorial with video content as well: How to Convert Your Website to Blocks
The Tuts
Gutenberg, Kadence Blocks & Kadence Theme Tutorials for Beginners. Watched and reviewed by a guy who’s been using Divi for way too long. Enjoy.
Start with Gutenberg
If you haven’t worked with Gutenberg, it’s very important to first understand how it works without an add-on such as Kadence. This is especially true if you’ve been using a page builder like Elementor or Divi.
This is a fairly general Gutenberg tutorial so be sure to do some research and look to really sharpen your skills with the primary blocks framework before you learn about Kadence.
Kadence Theme & Kadence Blocks Tutorials
Installing the Starter Kadence Page Templates
Go to Plugins -> Add New -> Do a search for “Starter Templates by Kadence WP”. Install and activate. From there, choose your builder (Gutenberg if you’re using Kadence). You will then be directed to browse and install from the available options.
When it comes to learning how to work with Kadence, practicing with the starter templates is a crucial shortcut and depending on the project, many of these templates are viable as real-world solutions.
Special Mention: WIREFRAMES!
Just this July Kadence released a new feature; Wireframes. They also put out a magnificent tutorial on how to use them. I HIGHLY recommend this for anyone using Kadence Blocks.
Free & Pro
Wireframes by Kadence work whether you are a free or premium user. If using the free option, you will just need to subscribe do the Kadence email list when prompted to do so. See the video below for more info.
Intro to Wireframes
Only 10 minutes long but CliftonWP gets to the point and is very easy to follow. Well done video.
Tutorials by Kadence WP
*The dev company behind the software (https://www.youtube.com/c/KadenceWP)
There are 14 total videos in the playlist, plus they’ve also got a separate video on the countdown timer here.
Lots of great videos here and many I’d consider a ‘must-watch for beginners. Some however are very geared at other functions like Elementor integrations and not really beginner focused. I’ve pulled some of the vids out of the playlist and posted them below if I felt they were crucial to learning the Kadence blocks or theme systems.
10 Minute Intro Course
Likely just about the best starting point if you’re new to Kadence.
Copy Pages made with Kadence
May seem non-important / not beginner content, but to me, this is core to better understanding how the overall system works.
Floating elements
call to action elements
Dynamic Sidebars
Built right into the Kadence theme is the advanced Dynamic Sidebar feature. Here’s how to use it.
Popups / Kadence Modals
*Pro Only
100% Core Knowledge / Must Watch
Tutorials by Jack Cao
Giving Mr. Cao a special shout-out here as his videos were my favorite thanks to the excellent production quality, good energy, and easily digestible information. Give this guy a sub, you won’t regret it.
In depth Gutenberg / Kadence Tut
*Pro Version Centric
Takes you through designing an entire magazine-style site with Kadence theme and blocks.
Over an hour long.
Kadence Blocks *Pro Tut
Some cross-over of info, and the previous video is newer. Worth watching both though as repetition is great for memorizing new aspects and he gets deep into using the Kadence Modal feature.
Coa’s Kadence Tutorial Playlist
Here’s Jack Coa’s playlist for Kadence related tutorials. Highly recommend.
Tutorials by other creators
This list will likely grow, but in the meantime, there are some great resources here. If you’re a creator and would like me to feature your tutorial on this page, please let me know 🙂
Kadence Theme *Free Version
In-depth tutorial on the free version of the Kadence theme with most focuses on the header, sticky header, and header features. This is a great tutorial I’d recommend for anyone new to using the Kadence theme, whether you’ve got Pro or not.
Gutenberg with Kadence Blocks
*Free Version / no pro coverage
Really only gets into using pre-made templates and then spends a great deal of time trying to create an exact replica of another design. Still useful and well made, but I would have liked to see him get into more of the functionalities Kadence offers.
Proper Block Design
I especially like this one as although he only works on these pricing tables, he gets into properly designing them for desktop and mobile along with good design principles.
2.5 Hrs Kadence Site Build
This guy appears to do a good job of a full site built with the free Kadence theme and free Kadence blocks.
Elements & Hooks / Advanced
*Pro Version Only
Using custom elements in the header
There’s more to it than custom elements, but this is the best part of the video in my opinion as it really opens up the design options for Kadence-built headers.
This really only starts at the 17-minute mark, prior to that it’s mostly general-header design info.
Contact form Kadence Blocks
Really basic and just goes over the options of the Free & Pro version. Suppose it’s somewhat helpful but not really a tut I’d recommend if you’re just trying to learn the overall systems.
Advanced Kadence integration Tuts
Kadence features a wide array of integration options and more and more other big developers are releasing updates allowing their software to work with Kadence. In this section, you can find tutorials on these integrations.
The new Lottie Block
*Pro Only
Give your website some advanced motion with the all-new Kadence Lottie Block.
*Video updated/swapped with CliftonWP’s new video as he’s easier to follow and goes more in-depth than the other option. Keep em’ coming, Clifton!
Read more about the new Lottie Block here.
Conditional Headers with Kadence
*Pro version only
Covers the basics of conditional headers quite well. Certainly, the proper starting point if you have Kadence pro.
One of the best resources I’ve seen on using conditional headers is actually a step-by-step article from Start Blogging 101. Read the article here.
Adding Custom Content via Elements
*Pro Only
Toolset & Dynamic Content w/ Kadence Blocks
By MatchlessWeb, this video goes over the basics and some advanced elements when integrating the very powerful Toolset with Kadence Blocks.
Kadence with Dynamic Content (ACF)
Take the power of Kadence to the next level when you introduce a proper dynamic content system with ACF and the Kadence hooked elements functions.
Kadence WooCommerce Design ‘How To’
Here in April of 2022, Kadence still has a hill to climb when it comes to the WooCommerce functionality but luckily they moving quickly. Here’s what I could find on Kadence and WooCommerce.
In-Depth Kadence w/ WooCommerce Build
CliftonWP for the win! Uploaded in late 2021, this is the most recent complete site build with Kadence and WooCommerce. It’s done entirely with the free version of Kadence theme and blocks.
At just over 2 hours long, this video truly hits all aspects of what’s possible with the free version of Kadence with WooCommerce
Kadence & WooCommerce full site build
IdeaSpot (nice name btw 😉 ) goes deep on this 22-minute tutorial getting into everything from transparent headers to custom product template design and even the cart and checkout pages.
Use Kadence to create custom WooCommerce product templates
*Pro version only
Once again, by using dynamic content and the hooks feature within Kadence elements, Jack Cao shows how to use custom fields to create unique and professional product templates for WooCommerce. Although this video is done in 30 minutes, i’d suggest setting aside a few hours to follow along if you plan on building as you watch.
Use Kadence to Create Epic My Account Page
Starting with the traditional Kadence Info Box blocks and some styling, WP Crafter uses Kadence’s Visibility settings to show or hide a super sleek ‘My Account’ page.
Mini ‘How To’s’ on small issues I’ve run into working with Kadence
These notes are as much for my own reference as yours.
Creator?
If you’re a creator and have made a Kadence tutorial you’d like featured on this page, please comment below and we will check it out. If it’s proper, we will add it along with a link to your channel or site.
How to Support the Creators:
If you don’t use my affiliate link, use a link from one of the creators featured in this article. To find their affiliate link open the ‘more info’ drop-down within their YouTube video page. Most of them will have links to buy Kadence in the video descriptions. In fact, if you found their video extremely helpful, I’d prefer you use their affiliate link. They spent more time creating those videos than I have to make this article.
By using affiliate links from creators you are helping them fund the creation of more tutorials.
Bonus Tip: Kadence Support Group on Facebook
One of my favorite resources for searching to find a solution (via the group’s search function) and posing an issue I can’t seem to solve is the Kadence Users Facebook Group. Be sure to join if you’re using Kadence Theme or Blocks. And no, I’m not an admin or mod so don’t ask me to help if you break the rules or join :).
The Future of Web Design with WordPress
After years of working with page builders like Elementor and Divi I can clearly see that Gutenberg is the future.
Why?
Short answer; speed. Ultimately, Gutenberg is just another page builder, but one that is built by the same developers who built WordPress. Thus it is extremely fast for both development and front-end users. Plugins that integrate as seamlessly as possible such as Kadence and Generate Blocks have a huge step up in the game as they surgically infuse their software with this native system. Other builders like Divi bypass this system almost entirely, adding a great deal of unnecessary code (resources) required for their functionality.
The heavy market share Divi, Elementor, and possibly a few others share will likely keep them alive for many years to come. However, as more developers see the appeal of Gutenberg and near-seamless integrations like Kadence, they will slowly make the change over to these systems. Hence, much like other designers, I can clearly see that Gutenberg is the future of WordPress-based web design.
If you’d like to read more about why I think Gutenberg and Kadence are the future of web design with WordPress, here’s the article I wrote on Medium.com.
The Future of IdeaSwell.com
You may be wondering “if Kadence and Gutenberg are so great, why is your site built with… Divi?!”. At the end of the day, my only excuse is ‘time’. I simply don’t have the time to redevelop my site however I can assure you, it’s on my priority list.
April 6, 2022 update: As I write this update, I am transitioning this very blog from the Divi builder to Gutenberg. It’s the last blog post on my list. Small pages have been transitioned and large pages are next. Once all the posts and pages are complete I will be swapping the theme over to Kadence. Hence, if you’re reading this the transition is still in progress. Cross your fingers for me, it’s a giant task
April 15th update: It has begun! Theme and page now fully Gutenberg, however, I still have my work cut out as I ripped the bandade off before having it all ready. Motivation, that’s why!
Thanks for the good work! extremely useful!
Any more tutorials focusing on mobile customization?
I’ll be coming out with a full tutorial of my own making here in the coming months, but in the meantime I’ll keep an eye out for tuts by other creators and try to keep this list updated.
Just another low life affiliate marketer who recommends one theme (for money) but doesn’t
use it himself/herself.
But smart enough to say they are too busy to switch.
How ARE we supposed to believe you? Seriously.
AT LEAST USE THE F***ING PRODUCT.
Hi Mr. Best. I’ve actually only used Kadence with Gutenberg since I found it, and for my last 7 site builds. I’ll be updating my portfolio in the coming weeks but if you’re in the Kadence FB group, search my name and you’ll see my post with links to my last four site builds, all done with Kadence. I get where you’re coming from, but affiliate marketing is a great way to inspire creators to make content that helps others. Some certainly take advantage of the system, but I assure you, I’ll only recommend products I use, and would recommend my own brother to use.
I’m still used to writing content using the classic editor on WordPress. I even get irritated sometimes when I have to manage a client website using Gutenberg and other page builders. But, after reading up on Kadence and other Gutenberg add-ons, I must say that it makes sense to start learning how to use them. Reviews and tutorials like this really help.