Example Sites Built with Kadence Theme & Blocks
These are actually real-world, live sites we’ve built using the Kadence theme and Kadence Blocks
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.
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.
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
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.
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.
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
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
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).
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.