Kadence Theme Review

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.

Page Builders

In terms of evolution, back in the day sites were hand crafted using HTML, CSS and JavaScript. These sites, ironically, were fast but took months to build and were hellish to update.

When WordPress began to make a impact, a lot of developers saw aa future where the main business of a site could be separated from the look and feel and so a small industry sprang up providing Themes for WordPress. Pre defined page layouts where you could change the content and pictures easily. These themes were built using PHP, CSS and Javascript.

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.

Gutenberg Blocks

WordPress block	Description
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.

Kadence Free

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.

The Customiser

• Global Colors
• Branding
• Typography
• 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 Premium

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

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.

Kadence Cloud

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.

Visual Editor

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)
• Redo
• 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.

Conclusion

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

Services

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

Unlimited Sites

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!

Kadence Theme

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

Kadence Blocks

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.

Membership

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.

Further Reading

Four Best Website Platforms

Set up a Photography Website with WordPress