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.
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.
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 > Generate Blocks
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.
The Future of IdeaSwell.com
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
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.
*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 actions etc
Popups / Modals
100% Core Knowledge / Must Watch
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
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.
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
*much more coming soon.
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
Advanced Gallery Columns on Mobile
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.