Kadence Theme And Elementor

The Kadence theme is one of the best page builder friendly themes to use with Elementor.  I am going to go out on a limb here and say that in some cases, it is THE best Elementor theme. In this post I amm going to provide an overview of the Kadence theme, show how it works well with Elementor, and explain the use cases where it is a standout option.

Video Version

Overview of the Kadence Offerings

Free Theme

There is a free version of the Kadence theme available in the WordPress theme directory. The free version of the theme was just launched from the developer’s website early in 2020 and was accepted into the WordPress theme directory in November 2020. Kadence already have more than 20,000 active installs and 76 five star reviews.

Pro Options

The pro version of the theme was released in October 2020 and is sold on the Kadence website. It is available either standalone or as part of the Kadence membership. Both options are available for an annual subscription or a single lifetime purchase.

There are a number of plugins included in the membership option. For Elementor users with a WooCommerce store, the Kadence WooCommerce Elementor plugin might be of interest. It allows you to create custom layouts for your product pages as well as custom archive and checkout pages.

Notable Features

Kadence joins a number of other popular Elementor friendly themes that are known as being fast and lightweight. These include Astra, GeneratePress, the Page Builder Framework, Neve, and OceanWP. In addition to being fast and lightweight, there are a number of other notable features.

Customize It Your Way

OceanWP used to be the free theme with the most Customizer options, but Kadence has more. Also, many people find the Customizer options for the OceanWP theme to be confusingly organized, but the ones for the Kadence theme are easier to find.

There are, however, a few things that catch new users unaware. For example, here are some of the option settings on the Page Layout tab of the Customizer. There is a Design tab which shown another panel of options and the down arrows on the Title Elements likewise reveal more options.

Additionally, there are options reveals by setting toggles.

Toggling on the Show Featured Image option reveals options for the featured image.

Showing featured image options when toggled on is logical and grouping of options under the Design tab or under the title elements also makes sense, but it is easy for new users who have not seen that type of organization before.

Single and Archive Layout Options for Each Custom Post Type

If you have Custom Post Types defined on your site then you are able to use the Customizer to set the layout and design options for the single and archive versions of each one with the same settings that are available for the single post and blog archive.

Here is a screenshot of the top level of the Customizer. You can see there is a section showing for Custom Post Types.

When you open that option then you see a panel available for the single layout and archive settings for each Custom Post Type.

These options are nice because often for Custom Post Types the featured images may be a different size, you may not want to show post meta, or you may want the archive displayed differently. There are usually custom fields associated with Custom Post Types and you usually must create a theme template to display them. The pro version of the Kadence theme has a feature called Elements which has the option to hook into the single post content and display a section at various places. If your custom fields are simple then it may be possible to use this Elements feature. We will look at that later in the review.

Kadence Global Color and Global Font System

Kadence has a more advanced color system than most themes. You set global colors in the Customizer under the General tab. Note the highlighted color dot that as a globe. This shows that Kadence is using the color from the global color palette.

The Kadence color palette has nine places for setting colors. Each place is tied by default to a use, which is explained in a help doc. This means that colors are linked and if you use colors from the global palette and change them, then they will be changed anywhere that color place is used. Thus Kadence has a global color palette and linked colors and this feature helps to maintain design consistency across the site.

It is not only colors. Kadence font choices are also globally linked. And there is more, Kadence Starter Sites is free in the WordPress plugin directory. The layouts and pages in the starter sites also use the Kadence global colors and fonts, which means that you can import these and maintain your brand colors and fonts.

Header and Footer Builder

Another standout feature of the Kadence theme are the Header and Footer builders. This type of feature exists in a few other WordPress themes, such as the Neve theme. The Astra theme is also adding this feature.

The header and footer builders are integrated into the theme Customizer and when you navigate to those sections you enter the builder interface. On the left is a list of items you can use in the header. At the bottom of the screen are three rows where you can place elements via drag and drop. If a row is empty it will not show. Note in the left panel the right arrows on the placed elements and the design tab. These are places where you can go to set options. Note the row cogs on the bottom panel and the item cogs on the placed items. These are also places where you can set options.

The footer builder is very similar and works in the same way.

The pro version of the Kadence theme adds additional items for use in the header and footer builders, such as Account, Contact, and additional widget, menu, HTML and button items.

Kadence Has Deep Gutenberg Integration

Kadence has one of the best, if not the best, integration with the Gutenberg block builder. The global color palette set in the Customizer is also available in Gutenberg.

Like many advanced themes, global layout options from the Customizer can be overridden on a page by page basis.

I performed a test of 11 themes to test their Gutenberg compatibility using the WordPress theme unit test data from the theme review team to test if theme styled blocks consistently. At that time, Kadence, GeneratePress, and the eStar theme were the three that performed the best. The Hello theme, which is a popular choice for Elementor site builders, has zero integration with Gutenberg, making it a poor choice if the Elementor site will include a blog.

Kadence Integrates with Elementor Global Colors

The Elementor page builder introduced its own global color palette during the summer of 2020. Just like with the Kadence theme, the Elementor global colors are linked to their use, so that if you change them the all places they are used with be updated with the new value.

Unfortunately, the Elementor global colors are “global” only within Elementor, and do not connect out to the theme Customizer or to Gutenberg. That means that when building an Elementor site you may need to set colors in two or three places: in Elementor, the theme Customizer, and if there is a blog, then also in Gutenberg. In the past, I’ve used the good Central Color Palette plugin to create a universal color palette, but unfortunately it is not (yet?) compatible with Elementor’s new global colors.

The Kadence theme has added integration between its Customizer and Elementor. As far as I know, it is the only theme to have do so, though others may follow suit. Kadence does this by adding another panel below the Elementor color panel. The Theme Global Colors are synced with the Customizer so you can change them in Elementor and the change is reflected in the Customizer and vis-a-versa. When you use the Theme Global Color palette, the colors are also linked, so when they are changed, all places they are used are also changed.

Features of Kadence Pro

The Kadence Pro addon brings some more features to the theme. In addition to more header items, the pro version has an Ultimate Menu module that lets you use an icon with menu items, create multicolumn dropdowns, custom backgrounds for dropdowns, custom content for dropdowns and mega-menus. Hooked Elements provides a large number of theme hook locations where you can add content and this comes with a number of display condition options: location, user, user roles, based on page or post, a date range, and more. There is a module to “fix” elements so they remain in a fixed position when the user scrolls, a WooCommerce modules, and the option to load scripts in the header or footer.

You Can Use Elementor with Kadence Pro Elements

One thing that is cool for Elementor users is that you can use Elementor to create the content for the Hooked Elements. When you go to create the hooked element you can create it with Gutenberg, using HTML, or Elementor. See the Edit with Elementor button.

I add a row of emojis and save it.

Back in the Hooked Elements editor, I add the display rules, setting it to show on the entire site and to show before the header.

And here it is on the front. Kind of a silly example, but as you can see, you could use this to display something meaningful, like a notice at the top of the site.

Discussion and Conclusions

I’ve made the case for using the Kadence theme on Elementor sites, but some people will wonder, what about the Hello Theme? The Elementor team created the Hello Theme as a lightweight, striped down and minimal theme for times when you want to build everything using Elementor Pro. That include the headers, footers, and all of the theme templates.

I think the Hello Theme can be a good choice in those situations, if there is not going to be a blog or content marketing component. As I mentioned above, the Hello Theme has zero integration between the Customizer and, more importantly, between Elementor and Gutenberg. It would be difficult for users to maintain design consistency across the site without that type of synchronization. So, the Hello Theme would not be my choice for Elementor sites that will have a blog or a content marketing component.

Kadence is one of a handful of fast, lightweight quality themes that works well with Elementor. In this review we have looked at several features that helps Kadence standout from the others:

Have you tried out the Kadence theme? Have you used it with Elementor? If so, please share your experiences in the comments.