Switching to Kadence and Gutenberg from Astra and Elementor

Introduction

I’m sure you’ve heard the old saying, “The shoemakers children don’t have any shoes.”  In discussions with WordPress site builders I often hear comments about the need to update their own sites.  They are so busy working on other people’s websites that their own is neglected.  I’ve been building websites since 1994 and I’ve learned, sometimes the hard way, that it is important to periodically update or refresh your sites.  I’m not referring to security or product updates, which need to be done continuously, but to a review of the software, functionality and design.

Why update?  There are several reasons that have motivated me:

• I try things out or change solutions and old cruft gets left behind. For example, I may have installed some JavaScript to connect with a 3rd party service and months after I’ve stopped using it I find that the JavaScript is still being loaded on the site. A review of the site finds those things and removes them.
• My knowledge has grown and I can now do it better. This is a big one. Sites I build with WordPress today look much nicer than sites I built a few years ago.
• There are new solutions available that do a better job, help me create a better looking result, or are more efficient.
• I’ve found more cost-effective solutions. I can save money by making changes.

For those reasons, and perhaps for the fun of site building, I’ve been thinking about updating the WebTNG website for a few months. There is a lot that I want to do, but I’ve decided to break it down into stages so that it is more manageable. The first stage is to replace Elementor with Gutenberg and Astra with Kadence. Whoa! What’s up with that?

The decision to move from Elementor to Gutenberg was the result of two things. First, all of my sites use Elementor. It is easy to use and there are so many third party addons that as I site builder, I have extreme flexibility. However, when looking at its use on WebTNG, I realized that I wasn’t really using Elementor as much as I was on other sites. I was using it for the Contact page and for creating the single page post template using the Elementor Pro theme builder. I wasn’t using any of the advanced widgets or dynamic data functionality. This got me thinking that perhaps I was being lazy and I should check out the alternatives.

I was one of those people who were worried about Gutenberg with WordPress 5 was first released. I installed the Classic Editor plugin and avoided Gutenberg. However, about 9 months ago I gave Gutenberg another try and I found that the 3rd party ecosystem of block collections was starting to mature and it was easier to create longer posts using Gutenberg. Since then I’ve created all of my regular posts using Gutenberg.

In relation to themes, Astra is the number 1 theme on WordPress.org. It is a good general purpose theme. However, I recently looked at some of the most popular themes and found that Kadence was one of the best for working with Gutenberg. If I’m going all in on Gutenberg then I want the best compatibility possible. This lead me to the Kadence theme.

Video Version

If you would like the full step-by-step guide then please watch the video version. I realized that it would take a hundred screenshots to capture all of the settings and changes in this process, so the text version is a higher level walk-through.

Challenge Accepted!

A couple of weeks ago Davinder Singh Kainth in the Web Creators Community Facebook Group mentioned that he had disabled the Classic Editor plugin on one of his sites and that he planned to do that on a few more. A number of other developers, designers, and site builders, including myself, mentioned the idea of moving from a page builder to just using Gutenberg. I decided to take this as a challenge and go ahead and make the move.

Plugins Involved

Before starting, I was thinking that I could eliminate 5 plugins: Astra Pro, the Central Color Palette, Elementor, Elementor Pro, and PowerPack Elements. The Central Color Palette plugin is great. It provides a central palette for the Customizer, Elementor, and Gutenberg. But I was removing Elementor and the color palette in the Kadence theme carries over into Gutenberg, so it wouldn’t be needed any longer.

I had installed Elementor, Elementor Pro, and PowerPack Elements all at once when I switched from Beaver Builder two years ago, but hadn’t really used PowerPack Elements.

I also had Ultimate Addons for Gutenberg and Toolset installed, so I was thinking that I could create a single post template with Toolset to replace the one I had created with Elementor.

Let’s Get Started — Replacing the Contact Form

The free version of Elementor comes with a contact form widget. It is really, really easy to use and I had used it on WebTNG. This is what that page looked like:

Thinking about a replacement, Contact Form 7 is the most popular contact form solution, but by default it does not save entries to the database. You need to also use the Flamingo addon for that. I have used Fluent Forms on another site and have been very happy with it. It is a newer form solution than many of the others, but the team has been improving it at a fast rate and there is a very active Facebook group. There is a free version and a premium version, but for a contact form, the free version has everything I need.

I installed the Fluent Forms plugin. There is a Fluent Forms settings menu. I knew that I’d want to add reCaptcha, so I entered by keys there before starting.

This is what you see when you go to the All Forms link after install.

I clicked the big blue button and when you do you see the starter templates that come with the free version.

I clicked on the Contact Form template and was taken into the form editor. The first thing I did was click the pencil icon on the top left. There you get a dialog to change the name of the form. I changed it from “Contact Form Demo” to just “Contact Form”. There is a red asterisk next to the required fields. I click on each of the fields that wasn’t required and made them required.

I click opened the panel for the Advanced Fields and dragged the reCaptcha field in just above the submit button.

I then clicked on the Submit Form button and changed the text to “Send”. I didn’t see an option to add an icon. I then changed the style to “Custom” and made the button look like the button style for the site.

The form was designed, so I clicked the save button and then the top “Settings & Integrations” menu link and then the “Form Settings” option. I changed the default after form submission option and toggled on the option to not allow an empty form submission.

I clicked Save Settings and then clicked the “Settings & Integrations” menu and the “Email Notifications” option.

I toggled on to enable it and then clicked the blue button with the gear icon to go into the settings.

I tweaked the defaults so it would be easier to recognize the email in my inbox and then clicked the Save Notification” button.

Now I just needed to add the form to the page. I went to the Contact page in the WordPress admin and clicked the button “Back to WordPress Editor”. This stops using Elementor and reverts to Gutenberg.

I added a new block below the text blurb and found the Fluent Forms block in the list.

I selected the Contact Form from the drop down and Updated the page.

This is the final form.

I tested the form out and everything worked fine.

Replacing the Single Post Template Created with Elementor

Overview

The next thing I needed to do was to replace the single post template that I had created with Elementor. I created a template because there were two features I wanted at the top of my posts by default: some social share buttons and a Table of Contents. I had previously been using the Monarch social share plugin from Elegant Themes, but switched to using an Elementor widget so I could eliminate a plugin. I also had added a Table of Contents Elementor widget because my posts tend to be long and I think a table of contents makes it easier to get around.

At the bottom of the template there were also two features: a next / previous navigation and an accordian that had my affiliate disclosure statement.

Since this was the last step, I went ahead and disabled the Elementor-related plugins. I saw the Astra theme, which is what I’ve been using, has a very simple previous / next post navigation option. Unfortunately it does not show the post name.

The Toolset Option

I’ve used Toolset on the WebTNG website for years for creating Custom Post Types with the Toolset Types plugin and displaying them using Toolset Views. Last December Toolset released Toolset Blocks. This allows you to create content templates and archive templates using the Gutenberg editor. The initial release of Toolset Blocks was very promising, but had a lot of rough edges. Since then, Toolset has continued to improve, so I thought I’d give this a try.

Now I already had Toolset Types and Toolset Blocks installed. In the WordPress admin I went to the Toolset, Content Templates menu and clicked the Add New button. You go into the Gutenberg editor, but for creating the Toolset content template. At the top is the place where you can set the preview content. On the right bottom are the Astra Toolset settings. Astra has an integration with Toolset, so some of the major Customizer options can be set in the editor to apply to the template.

I realized that for creating a Content Template for Posts, I could just use the theme’s featured image, title, and post meta. So I started with the Social Share block. I had three choices: the core block, one from Ultimate Addons, and one from Toolset. The core version was very basic. The Ultimate Addons version had the most social network options and you could customize the button colors. The Toolset version has a fair number of social networks and you could choose which content to share, but not many options for styling the buttons. I decided to go with the Ultimate Addons version and this is what it looked like.

I then added the Ultimate Addons Table of Contents block and tweaked the settings to it.

Then I added the Toolset Single Field block and set it to show the post content.

The Table of Contents wasn’t being generated, but I was thinking that would happen when the page was loaded on the front. I went to the bottom of the page and added the Ultimate Addons FAQ & Schema block. I changed the content and made it so it would only have one panel. Also, this block has a ton of style options, so I made a lot of adjustments. This is what it looked like in the editor.

I updated it and went to view it on the front. Yikes, the Ultimate Addons blocks didn’t render correctly.

It appears that CSS styles for Ultimate Addons weren’t being loaded. I contacted Toolset support and learned that there was an issue and was told that the developers were looking into it. Sadly, for the time being, I’d need to go with the Toolset version of the Social Share Icons and remove the other three blocks until there was a fix.

Moving from Astra to the Kadence Theme

Here is a screenshot of what the home page looked like with the Astra theme.

I was able to make the switch from Elementor pretty easily and quickly on the live site (I did test previously on a testing site). However, changing themes would take a while as I walked through the panels in the Customizer. I did a little testing and found that the Customizer Export / Import plugin, created by the Beaver Builder team, worked well with the Kadence theme. This would allow me to do the customization on a development site and copy it over to the live site.

So I downloaded and installed the Kadence theme and Kadence Child theme from the Kadence website. I activated the child theme and took a look at the front-end. It was very different and bar-bones. I jumped into the Customizer.

Kadence Customizer Sections

Theme settings are logically organized in the Customizer. In the screenshot below, Header, Footer, Page Layout, and Blog Posts contain the settings as you would expect. The Custom Post Types section has the same settings as you see for the Blog Posts, but one group for each Custom Post Type. That is a nice feature as it allows you to set the layout and design per Custom Post Type. The last 4 items are standard WordPress.

The first section, the General section, contains settings for Layout, Sidebar, Colors, Buttons, Typography, Scroll To Top, Social Links, and Performance.

Kadence Color Palette

I usually start by setting the site colors. The Kadence palette is somewhat unique. There is a link below the colors with information about how it works, but basically, the left two colors are accent colors, the next 4 colors are text colors, and the last 3 for backgrounds. If you set up the colors carefully then they will be automatically applied through the site in a way that makes sense. When you see a globe icon on a color, such as for Site Background in the screenshot, that indicates it comes from the gloabl palette. You can override the automatic colors as desired.

I added the colors from the WebTNG logo and then added various shades of blue (except for white at the far left).

Other General Settings

I didn’t change the layout settings, but set the sidebar to be 25% of the page width.

I applied the theme colors to the button settings, and set the buttons to have a border and slightly rounded corners, like the button for the Contact form.

I didn’t change the Typography settings, but I enabled scroll to top. Note that some of the Customizer panels have a Design tab. I set the colors in the Design tab.

The Social Links area is where you can supply the URL to your social network pages. I added mine. There are more than show in the screenshot. These links are used in the special social menu in the header builder.

The Performance area just has one setting that is on by default. That is to Enable CSS Preload. I left that as is.

Kadence Header Builder

Done with the General sections, I went back to the top level and then to the Header section. The famous Kadence Header Builder is at the bottom. You can drag and drop available items from the left into the rows in the header builder. If a row doesn’t have anything in it then it doesn’t show. Note the little cog icons on the items. That is how you get to the settings area for that item.

Also, if you hover over the row then you will see settings for that row. That is where you would add the background color, borders etc.

I went into the Logo settings and selected my logo. I also went into the Primary Menu area on the right of the middle row and added my main site menu and changed its colors.

I added the Kadence social menu to the top bar and set its colors and the background color of the row. This menu is different than the one that shows in the screen shot above. That one, from my previous site build, was created using Font Awesome. I realized I’ll likely be able to remove the Font Awesome plugin also.

Kadence Footer Builder

The second part of the Kadence builder duo is the footer builder. There is a great deal of flexibility here and I have plans to make my footer more useful, but at the moment I just kept it simple.

The footer copyright settings is just one of the settings options. There are some magic tags you can use. I tweaked what was there and added a link to my Privacy Policy.

Kadence Page Layout Settings

Back to the top level of the Customizer and I went into the Page Layout settings. I didn’t make many changes, but did add a sidebar.

Kadence Blog Archive Settings

Again, back to the top level of the Customizer. The Blog Posts link has two sub-pages: one for the single and one for the archive.

I went into the Archive Layout settings are first. There are really a ton of settings here. I turned off the archive title, set a layout with a sidebar, and set that I wanted two archive columns.

Further down that settings panel are the Post Item Layout. An important thing to note are the little down arrows to the right of some of them. That indicates more settings.

For example, here are the Featured Image settings. I selected the Inherit ratio to accommodate the size of my featured images.

Here is what my Blog archive looks like.

Kadence Single Post Layout

The single post layout options were similar. I selected the page style that had a page header with the title and meta.

There were also the same type of settings for page layout. I picked one with a sidebar. Note that some of the Title Elements have that down arrow indicating more options.

There were other single post settings, such as for picking the aspect ratio of the feature image. There were also a number of feature toggles.

I noticed that there was a nice Post Navigation feature and a Related Posts feature. This helped to replace the nice post navigation I lost when switching away from the Elementor Single Post Template.

Moving the Theme Settings to the Live Site

Withe the Customization done, I installed the Customizer Export / Import plugin on the test site and the live site. I exported for the test site.

I then went to the live site and added the Kadence theme and the child theme. I activated the child theme and the site was unstyled.

I went to the Customizer and imported the settings and everything was applied.

I did noticed that CSS snippets I added to the Extra CSS section of the Customizer didn’t get carried over, so that is something to keep in mind.

Summary and Conclusions

My take-away was that sometimes we turn to our toolkit without thinking. For example, I installed Elementor, Elementor Pro and PowerPack Elements as part of my stack, when they weren’t really needed. This exercise also reinforced my belief that we need to periodically do an audit of our sites because over time there are new solutions that present themselves. For example, Gutenberg is getting better and Toolset Blocks provides a way to integrate dynamic content with the WordPress editor.

In the article I showed how I switched out Elementor by replacing the Elementor contact form with the Fluent Forms version. I also replaced the single post template created in Elementor for a Toolset single post template. In that process I lost some functionality, which I’m hoping I can add back in. Speaking of Toolset, I was a bit disappointed to find there were still some rough edges. Toolset support responded that the developers are looking into the problem, but that leaves me with more work to do on the single post template in the future.

I also replaced Astra Pro with the free Kadence theme. Kadence covered all of the things I needed, it works great with Gutenberg and overall working with the theme was enjoyable. There was a small issue when the comments didn’t show in the blog archive. I reported that and was told it would be fixed in the next update.

Before starting the process I had hoped to remove 5 plugins, but I ended up removing 6: the Astra Pro plugin, Central Color Palette, Elementor, Elementor Pro, the Font Awesome plugin, and PowerPack Elements. I added 1 plugin for the contact form, the free version of Fluent Forms.

Keeps in mind, If you are thinking of changing themes or page builders to take a look at their advanced features to make sure the theme or builder you are moving to has the features you need. For example, the Astra theme has custom layouts which the free version of Kadence doesn’t support. I wasn’t using that feature, so it wasn’t an issue for me.

Feel free to explore the site and let me know what you think of the Kadence theme and of Gutenberg.

Visit the Kadence Website