This Review covers the Kadence Theme and Kadence Blocks. We also discuss the impact of Kadence on web design in general and the growing influence of Gutenberg on the Web Design industry.
Web Development Trends
We’re seeing the beginnings of a trend towards faster websites. This is partly driven by the Google Core Web Vitals update (see our article on Helter Skelter Digital for detail) but also for improved customer experience.
There is a growing realisation that the trend in viewing websites is towards mobile and has been for some time. The problem is that 4G coverage is not wholly reliable and even if it was, does not match the speed of broadband. So a slow site will be slower on Mobile.
Add to this the fact that according to Kissmetrics 40% of people will move away from a web page if it hasn’t loaded within three seconds and you can start to understand the drivers behind the trend.
Google Core Web Vitals
Core Web Vitals is a set of measurements that taken together impact a page’s Google Ranking since May 2021. The set will continue to evolve but currently includes Loading Time, Time to Interactive and Visual Stability.
The actual metrics that you can look out for in your page performance tests are:
Largest Contentful Paint (LCP): this measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when a page first starts loading.
First Input Delay (FID): this measures time to interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): measures visual stability. Complex pages have a tendency to shift content around while more content is being loaded. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
The advantage of this approach were many, speed of development and separation of theme from content making it easier to update. These two alone made it possible for newcomers to the industry to compete on price with the traditional custom design houses.
The disadvantages were inflexibility and performance. As the themes became more bloated with functionality, the sheer volume of code required to load across the network grew and grew. Soon sites were taking five seconds or more to load.
A few forward thinking developers released that flexibility could be introduced by abstracting certain functionality away from the theme and providing it as a plugin, a Page Builder. The most well known examples are Divi, Elementor and WPBakery.
These companies, Elegant Themes and WPBakery, became incredibly popular, combining real flexibility with speed of development. It became possible to have the best of both worlds – unrestricted design and competitive pricing. For a while at least.
Next Generation Builders
Recently, a new generation of page builders has hit the shelves, with a much more properly integrated approach. This has only been possible with the introduction of the Gutenberg project by WordPress in 2020, so we can’t really blame the previous generation for not participating, they did what they could with the tools they had available.
Prominent in this new landscape are Kadence and GeneratePress, lightweight, highly performant themes that leverage the Gutenberg WordPress Editor.
Check out my SEO Case Study to see the difference using Kadence Theme made to a Divi based website.
What is Gutenberg?
The Gutenberg project has the material advantage of being designed and implemented by the same team as WordPress itself. It has been bundled with every release of WordPress since v5.0
In a nutshell, Gutenberg replaces the old (classic) editor with a Block Editor in which content is added in blocks rather than content areas.
Why is this so revolutionary?
It’s revolutionary because the block can encapsulate different types of functionality and styles. Instead of grafting function in the form of plugins and styles attached to an ever growing number of classes, doing this at block level is much more economical in terms of the amount of code loaded into the page. So fast.
Also it brings the WordPress experience into line with competitors like Squarespace and Wix. So way more accessible to a new generation of designers.
Gutenberg offers an ever growing number of specialised blocks, out of the box.
|Audio||Embed a simple audio player.|
|Buttons||Drive behaviour with action buttons.|
|Categories||Display a list of all categories.|
|Classic||Use the classic WordPress editor|
|Code||Display code snippets that respect your spacing and tabs.|
|Columns||Add a block that displays content in multiple columns, then add whatever content blocks you’d like to the columns.|
|Cover||Add an image or video with a text overlay – great for headers.|
|Embed||Embed videos, images, tweets, audio, and other content from external sources.|
|File||Add a link to a downloadable file.|
|Gallery||Display multiple images in a gallery.|
|Heading||Introduce new sections and organize content to help visitors and Google understand the structure of your content.|
|Image||Insert an image.|
|Latest post||Display a list of your most recent posts.|
|List||Create a bulleted or numbered list.|
|Paragraph||The basic building block of all narrative.|
|Pull quote||Give special visual interest to a quote from your text.|
|Quote||Give quoted text visual emphasis.|
|More||Adds a “Read more” element|
|Separator||Create a break between ideas or sections with a horizontal separator.|
|Shortcode||Insert additional custom elements with shortcodes.|
|Spacer||Add white space between blocks and customize height.|
What is Kadence Theme?
Kadence Theme is a lightweight, astonishingly fast WordPress theme that has been engineered from the ground up to integrate with and build upon the functionality offered by Gutenberg blocks.
As WordPress is right behind Gutenberg and devoting considerable resource to advancing it, its safe to assume that a theme based on Gutenberg will be more future proof than one built on an alternative technology.
Kadence theme comes in a two different flavours.
The free version is actually outstanding, the customiser offers adjustments in six areas out of the box and immediately shows just how well designed this theme is.
- Global Colors
- Header Layout
- Page Layout
- Footer Layout
For a start, Colors, Branding and Typography are controlled site wide, in one place. No more hunting to find out why an element is a certain colour, it will either be a global setting in the customiser or a local setting.
You can set Headers, Footers and Page Layout at Site level. Again, no repetition, easy to find and edit.
Kadence Theme Pro builds on the features available in Kadence Free and offers a year of support and update entitlement.
Page Builder Compatibility
Remember that Kadence Theme is just a theme that like Astra, for example, is built for speed and unlike Astra, integrated with WordPress. It still needs a Content Builder and apart from Gutenberg and Kadence Blocks, support is built in for the following content building plugins:
What are Kadence Blocks?
Kadence Blocks do exactly what it says on the tin. It is a collection of Gutenberg compatible blocks that extend the functionality already on offer. These consist of design elements and include:
Missing from this screenshot is the Portfolio Grid/Carousel for no other reason than its on the next row down all alone!
These blocks effectively replace the function of the traditional page builder with much leaner code, leveraging the Gutenberg base.
Described as “Gutenberg on Steroids” Kadence Blocks offer fully responsive layouts, accessibility, beautiful design and speed.
Kadence Blocks are marketed in the same way as Kadence Theme. You have a free version that includes
and a Premium version that adds
Ease of Use
Out of the box, Kadence is very straightforward. For novice users, there are pre-built starter themes that can be installed and customised.
The customisation process is very well organised, Once you have chosen a starting point.
Choose site wide colours from a collection of pre programmed colour combinations (You can add your own too).
Choose typography from a collection of font pairings. (You can add fonts as well).
Then you can change the header for desktop/tablet and mobile using the drag and drop header editor. You’ll have three rows in three columns and you can drag widgets into available spaces. I’ve put the log on the left, navigation and search on the right.
Getting further into the design aspects, there are two massive labour saving capabilities.
Reusable Blocks can be defined form any existing block in Kadence Theme. This capability is sometimes misunderstood. A reusable block retains the content, so it’s perfect for a newsletter sign up for example where the content remains the same across the site. If you alter the content then it alters everywhere. The workaround is to deploy the section as a reusable block and once its on the page turn it into a normal block, cutting the link to the original.
Cut and Paste
I haven’t seen this in any other theme, but I’m happy to be corrected. In the Kadence visual editor you can select and copy content then paste it into a new page. It simply works.
It’s new and I haven’t tried it yet, but this takes reusability a step further. You can upload sections, multiple blocks combined for a specific layout and import them into a new site. For agencies, this presents real economy.
The visual Editor is organised with wonderful simplicity.
Controls at the top left give me the ability to
- add a new block (plus sign)
- Change from Edit to Select mode
- Revert (Undo)
- Show details including word count and all components on the page
- Show a List View of the components
- Access the Design Library of reusable components.
Controls on the right give me access to various settings consistently across the page/block. No more hunting for settings in obscure locations, click on the block, go to settings.
Moving along the row, there are Post Settings and Kadence Block Controls
Kadence Theme is the first theme I’ve used that comes close to delivering on the “No Code” promise. It’s not perfect, but every block can be edited as html and extra stylesheet classes can be added from the settings menu on the right.
The Kadence Theme strikes a nice balance between being intuitive and straightforward and allowing an expert to get under the covers and customise.
Who are the Competitors?
This is the million dollar question because if I read the signs correctly, Kadence Theme and maybe GeneratePress have a head start on the competition in that they are totally in step with WordPress futures.
In terms of pure speed, Oxygen and Astra are both fast themes that I have used. neither seem like the best bet for future proof design though. I’ve read that Neve is fully integrated with Gutenberg but it lacks the breadth of Kadence.
There are a lot of themes claiming Gutenberg compatibility. Usually this means they support the Gutenberg editor which is not quite the same thing.
I’m more excited by Kadence than I have been for a long time. I’ve used a lot of themes, including Astra, Divi, Oxygen and Semplice. All of them are good, they all have their faults. I haven’t enjoyed working with a theme as much as Kadence Theme with Kadence Blocks in a very long time.
Kadence Theme is evolving rapidly. A recent introduction is Kadence Cloud which allows me to save complex reusable layouts into the cloud so that I can reuse them easily on different sites. Some people are marketing these components as standalone, downloadable elements.
By the way, I don’t expect Elegant Themes, Elementor et al to sit on their hands and watch their market disappear. However they are in a difficult spot. Marketed on capability that is not based on Gutenberg they face an engineering job that is more than daunting, it will take serious investment and temporarily opting out of the feature race on which they’ve built their reputations.
It’s for these reasons that we’ve adopted Kadence Theme with Kadence Blocks as our go to web design tool for the company. This site was built with Kadence, as was Helter Skelter Digital
We have a couple of clients now asking us about converting their sites to Kadence Theme. I can see this turning from a trickle into a flood for these reasons.
How to Buy
Firstly, when you buy Kadence Theme or Blocks, you are licensed for unlimited sites from the off. This is majorly competitive. At just $79 for the theme on its own, this is a gift for anyone starting an agency right now. If I didn’t already have one I’d be doing it myself!
You can buy Kadence Premium on its own or as part of an Essential Bundle which includes Kadence Blocks Pro or as a full bundle which includes
Similar to Kadence Theme, you can buy Kadence Blocks on their own and use them with any Gutenberg compatible theme or buy as part of an Essential Bundle with the Theme and Starter Templates.
Finally you can buy a Kadence membership deal that entitles you to all of the themes and Kadence Blocks. This is currently available as a lifetime deal and includes all future products and upgrades.
Add our Insight direct to your mailbox!
Actionable tips to put your website and your photography front and centre..