Top 10 Kadence Blocks & Theme Tutorials for Beginners

by | Jun 12, 2021 | Gutenberg, How To's, Kadence | 5 comments

This article is greatly composed of videos by other creators and has been crafted to help learn how to build websites with the Kadence Theme and Kadence blocks. As time passes, we will be updating these resources, removing redundant videos and adding new content.

Be sure to thank the creators by subscribing to their channels and liking their videos.

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. 

The Top Ten Kadence Blocks & Theme Tutorials List

The Future of Web Design with WordPress

After years working with page builders like Elementor and Divi I can clearly see that Gutenberg is the future.

Why?

Short answer; speed. Ultimately, Gutenberg is a 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.

Most likely the heavy market share Divi, Elementor and possibly a few others share will 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.

If you’re considering truly uping your web design game, you should be looking hard at the lifetime Kadence membership. Pay once, and get the pro Kadence blocks for Gutenberg, along with the pro Kadence theme.

It’s only a matter of time before Kadance removes the ability to buy the lifetime, pay once and user forever option.

*If this button stops working, it’s because you waited too long and they no longer offer a lifetime option.  Sorry.

*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!)

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 then I have making this article.

By using affiliate links from creators you are helping them fund the creation of more tutorials.

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 > Generate Blocks

The THEME.

Basically, the Kadence theme is far more advanced, allowing for way more options than the Generate Press theme.

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 less issues in the future and better future proofing your website.

A

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.
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 haha :).

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.

Start with Gutenberg

If you haven’t worked with Gutenberg, I think it’s important to firstly 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 since the inception of Gutenberg, thus bypassing it’s use all together.
General Gutenburg Tut

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 the and install from the available options.

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 or 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

Short but sweet video on how to utilize the new Wireframes pre-built content areas by Kadence.

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 actions etc

Dynamic Sidebars

 

Popups / 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 for well produced videos, good energy and information given. Give this guy a sub, you won’t regret it.
In depth Gutenberg / Kadence Tut

*Pro Version Centric

Takes you through desiging 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.

Bonus+ 2 Mobile Design Tip

A comparison video but at the end he shows how to do 2 columns on mobile. Also, the site design he does is viable to learn from albeit done on two different builders.

Tutorials by other creators

This list will likely grow, but in the meantime there’s 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 focus on the header, sticky header and header features. 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 principals.

*New: 2.5 Hrs Kadence Site Build

This guy appears to do a good job of a full site built with free Kadence theme and free Kadence blocks. I’ve only watched a bit of it, so comment below if you found it helpful and also sub his channel of course.

Elements & Hooks / Advanced

*Pro Version Only

Using custom elements in header

There’s more to it then that, 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 that it’s mostly general header design info.

Kadence Blocks Tut

This is a fantastic resource of documentation on the Kadence blocks. Use the search function (CMD+F) to find what you need quickly. For a beginner, I think it’s worth reading this entire page (jumping down to “Included Blocks and Extensions” section and going from there).

Video: From the same author, this video breaks down all the same info and although his monotone voice kills me, It’s worth watching for the sake of really driving home all the new knowledge you’re acquiring.

Kadence Theme & Gutenberg

*Free version only

At over 2.4 hours, this is the longest tutorial video I’ve found.

Kadence Theme install at 0:17:00 mark.

Kadence Bloks install at 1:00:19

Overall: It’s good, but really drawn out and covers a LOT of non-kadence related info. Also slooow. I watched it at 1.5 speed.

Building blocks

Really only starts at the 10 minute mark for learning about reusable blocks.

Author features his site where you can download pre-made kadence blocks for use on your site.

Kadence Site Build

*Free versions used only.

Same author as above. A bit slow, but a good walk through of building with the Kadence them and Blocks.

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 tutorial on these integrations.

*much more coming soon.

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.
MisterGeko has a few other cool Kadence videos on his YouTube channel. Check him out and subscribe.

How to create custom templates for posts

*Pro version only
Using dynamic content and the hooks feature within Kadence elements, Jack Cao goes in depth showing how to make beautiful layouts for your wordpess posts. He also has a few awesome tips and tricks within the video that help when working with Kadence for web development in general.  Be sure to also give him a sub & like while watching. 

Kadence WooCommerce Design ‘How To’

As of now (August 2021) I’m really not very happy with what Kadence offers for WooCommerce. Luckily though, there are some awesome creators out there making tutorials on how to create really awesome features using Kadence with Woocommerce.
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.

Don’t forget to give him a sub & like while watching.

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.

There’s also a step by step article by WP Crafter to go along with this video. Check it out and even get the CSS here.

New Kadence Released Features

As the awesome devs behind Kadence theme and blocks continue to drop amazing new features, this section will help you find resource on how to implement them.
The ‘how-to’ by the Kadence team

*Pro version only
Covers the basics of conditional headers quite well. Certainly the proper starting point if you have Kadence pro.

One the best resources I’ve seen on using the conditional headers is actually a step-by-step article from Start Blogging 101.

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 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. alayers style view of all elements 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 viola, 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:

  1. Give the modal a custom ID and plug that ID into the custom button’s link (#CUSTOMID)
  2. Give the custom button the additional CSS Class “modal-trigger”
  3. *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

Much needed work-around 😉

Thanks again 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 great deal of media settings and here’s how to use it as your own advanced image block: 

Add the info box block. 

Turn off the Title and Text options (simple switch in each their settings drop downs)

Swap the background to fully transparent but be sure to do this on both desktop and hover tabs.  

Under ‘media’, use the dropdown to select “image” instead of icon.

From there you can control a ton of aspects, most importantly for me was “max width”.  

Advanced image blocks

Second option

The Kadence Row Block can be added within a section. Do so, and then add your image block within that row block. From there, you can control the side of the image based on device (Desktop, Tablet, Mobile).

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 then I have making this article.

By using affiliate links from creators you are helping them fund the creation of more tutorials.

Share This

5 Comments

  1. Philip Yap

    Thanks for the good work! extremely useful!

    Reply
  2. Philip

    Any more tutorials focusing on mobile customization?

    Reply
    • IdeaSwell

      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.

      Reply
  3. dan best

    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.

    Reply
    • IdeaSwell

      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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

five × two =

More IdeaSwell Articles

SHARE YOUR CART