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 ListClick an option below to jump down to the video.
Example Sites Built with Kadence Theme & Blocks
These are actually real-world, live sites we’ve built using the Kadence theme and Kadence Blocks
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 here 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
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 matter for the page builder? Technically it doesn’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.
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)
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.
call to action elements
Built right into the Kadence theme is the advanced Dynamic Sidebar feature. Here’s how to use it.
Popups / Kadence Modals
100% Core Knowledge / Must Watch
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
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
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.
Can’t change nav/link color in header
If you run into this issue, it’s likely because you’ve installed a starter template. The trick here is to enable the “Transparent Header”. From there, simply go into the transparent header’s settings and you will be able to adjust the nav color.
Finding rows and sections to select their settings within a Kadence or Gutenberg built page
Simple trick: install a plugin called “Blocks Navigation”. This will allow you to see the layers of all elements/blocks within the page.
Advanced Gallery Columns on Mobile
Under “Columns” you’ll see “Linked” or “Individual”. Click on the Individual and then you will see the options to select columns based on screen size for the gallery.
Don’t ask me what “Linked Vs. Individual” even means, because I have no clue lol.
Import/Export Theme Customizer Settings
Weird process: For some odd reason you’ll need to first install the Kadence Starter templates. From Appearance, go to Kadence and then hit the top right tab for “Starter Templates”. Hit install. You don’t actually have to install one of the templates, but it must populate the database with them.
Next, go to the “Customize” option for the theme and voila, you will see at the bottom “Import/Export”. Simply export, and then on the other build, you will have to again install the starter templates and then Import accordingly.
Style / Design of Text Elements in the Footer
You’ll notice that preset elements, like the ‘copyright’ widget in the footer have their own design tab. Meanwhile, other ‘widget’s of text have no such design tab.
The trick here: Look for the gear icon all the way to the left of the row. Title and base text color and size settings are controlled in the row settings ‘design’ tab.
Using custom buttons or links to trigger modal pop-ups
I ran into a major issue here that took me a good minute to figure out: If you make a modal popup (pro version of Kadence) and want to trigger the popup with a custom button (or advanced button) on a page, you’ll need to do THREE things:
Give the modal a custom ID and plug that ID into the custom button’s link (#CUSTOMID)
Give the custom button the additional CSS Class “modal-trigger”
*This is the part I had to figure out: You’ll also need to add the modal’s shortcode to the page you are triggering it to. In the modal, under “link settings” turn off “show link”. Then on the page with the custom button, insert the shortcode anywhere on the page.
*note: on the modal, you also need to set the Element settings (where page settings normally are) to:
Display Settings: Entire Site.
User Settings: All Users.
Advanced image blocks
*April 2022 Update: Kadence has released an “Advanced Image Block” however it is still completely lacking in functionality so I’m still using the solution below.
Thanks to Jack Cao, here’s one of the best solutions for the lack of a good, feature-rich image block in both Gutenberg and Kadence:
Kadence’s Info Box block has a lot of media settings and here’s how to use it as your own advanced image block:
Step 1: Add the info box block.
Step 2: Turn off the Title and Text options (simple switch in each of their settings dropdowns)
Step 3: Swap the background to fully transparent but be sure to do this on both desktop and hover tabs.
Step 4: Under ‘media’, use the dropdown to select “image” instead of an icon.
From there you can control a ton of aspects, most importantly for me was “max-width”.
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.
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!