Kadence Theme And Elementor

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.

Kadence Theme On WordPress Org

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.

Kadence Annual Packages
Kadence annual subscription packages
Kadence Lifetime Packages
Kadence lifetime packages

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.

Kadence Woocommerce Elementor

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.

Customizer Options For The Free Kadence Theme
Customizer options for the free Kadence theme

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.

Customizer Tab And Down Arrow Option Reveals

Additionally, there are options reveals by setting toggles.

Toggle Option Reveals

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

Featured Image Options Shown On Toggle

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.

Top Level Of Customizer Link 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.

Single Layout And Archive Options 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.

Kadence Global Color Palette
Kadence global color settings

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.

Kadence Palette Uses
From the help doc explaining the color positions and default uses

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.

Kadence Starter Templates

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.

Kadence Header Builder
Kadence header builder

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

Kadence Footer Builder
Kadence footer builder

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.

Kadence Color Palette And Gutenberg Integration

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

Kadence Page Setting Overrides

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.

Elementor Global Color Palette

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.

Kadence Theme Colors In Elementor

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.

Kadence Pro Addons

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.

Starting To Create Hooked Element

I add a row of emojis and save it.

Adding A Bunch Of Emojees

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.

Adding The Display Rules

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.

Displayed On The Front

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:

  • Kadence has a huge number of well organized Customizer options.
  • There are layout and style options for the single and archive templates for Custom Post Types.
  • Kadence has a powerful and easy to use Header and Footer Builder.
  • The Kadence Pro Elements feature works well with Elementor.
  • The Kadence global colors and fonts are truly global, working across the Customizer, Elementor, and Gutenberg, currently the only theme to do so. The global design system also works with the Kadence Starter Sites templates.
  • Kadence also has standout Gutenberg integration, especially if using Kadence Blocks, which puts it at the top of choice themes to use with Elementor when the site will have a blog or content marketing component.

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

0 0 votes
Article Rating

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mike Palmer
Mike Palmer
Guest
March 31, 2021 1:07 pm

Thank you for a very clear review. I have only been using WordPress for just over a year, and up until now I have been using Elementor Free and OceanWP for its flexibility, but Kadence looks pretty good. I will have to give it a try.