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 the framework WordPress lives on. 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 integrate with this default system. Other builders like Divi bypass this system entirely, adding a great deal of unnecessary code (resources) required for their functionality.

Why Kadence Over The Other Options?

At the end of the day, it was a very difficult choice for me here, but it boils down to mobile design along with ‘future proofing’ my builds. I’ll elaborate more on this in the coming weeks. For now, the following video by Jack Cao sums it up quite well.

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.

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

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.

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.

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 🙂
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.

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
Building blocks
Contact form Kadence Blocks
SHARE YOUR CART