The Challenge Of Converting From A Page Builder To Gutenberg Blocks For Your Whole Site

I recently completed the transition process for this website from a theme based on BuddyBoss and Elementor and over to a fully block-based design using Kadence Themes.

It took quite a bit of work to make this transition, I must say. There’s no magic button that will automatically convert a website over to blocks. There is a reasonably good conversion option for content if you have been using the Classic Editor to write your content. But, converting content built with a page builder over to blocks is much more difficult. Converting your entire site design is even more so.

In this article, I simply want to tell you what it was like to make the switch. I’ll also give some advice that might make it easier for you if you decide to do the same.

Why I Did It And The Results

I fully documented why I decided to make the switch in my post: Page Builders Vs Gutenberg Blocks: Why I’m Switching Away From BuddyBoss To Kadence Theme.

It boiled down to two primary issues for me:

• I was having some annoying issues with the BuddyBoss/Elementor combo, such as disappearing background colors.
• I wanted to solve several performance issues.

Over time, the site had gotten too bloated. The BuddyBoss platform was putting unnecessary load on things even though I was barely using any of the features (only the forums). Also, since the BuddyBoss theme was rather barebones in multiple departments, I ended up using Elementor to do quite a bit of customization across the site.

The result was a lot of bloat and a lot of redundant code.

Before I Made The Switch…

It showed in the performance numbers on Pagespeed Insights:

The bloat showed up in massive page sizes, too. Without any serious optimization, my homepage alone was over 850KB.

After I Made The Switch

Now that the site has been fully converted to blocks and the Kadence Theme, the scores are drastically improved.

A perfect 100 score on desktop for PageSpeed Insights and all core web vitals well within the green:

And a mobile score I could have never dreamed of before…

The page size on the homepage reduced by about 74%.

Note that the content on the site remained mostly the same. All I did was switch out the underlying theme and built with blocks instead of Elementor.

This is why I decided to re-build the site and switch all to native Gutenberg blocks. By doing this, I have vastly streamlined the underlying code which makes the site look as it does. The performance scores are now damn near perfect and all of my core web vitals are well within the green. At least in terms of technical SEO, I should be good to go in terms of our Google overlords. 😉

Preparing To Switch To Gutenberg From A Page Builder

There is no magic button to make a switch like this. Essentially, the site had to be re-built.

Any content which was created with native WordPress (either Classic Editor or blocks) would carry over just fine, however anything which relied on my previous theme (BuddyBoss) or the page builder (Elementor) would need to be re-built.

There were several aspects of the site which depended on BuddyBoss. Namely…

• The forums were utilizing the BuddyBoss plugin and the BuddyBoss theme was styling it.
• The look and feel of all of my courses (in Learndash) was being handled by the BuddyBoss theme.
• Certain page elements were using BuddyBoss components from Elementor, such as the Dashboard Icons.
• Notifications and account profiles relied on BuddyBoss.

Additionally, there was quite a bit which was relying on Elementor:

• Numerous pages throughout the site were built with Elementor and using the Elementor template.
• Numerous aspects of the theme were built using Elementor’s Theme Builder, including the design of blog posts, reviews and other custom post types.

So, to be able to remove BuddyBoss, the BuddyBoss theme and Elementor would require a lot of rebuilding.

Putting Together A Game Plan

I first took the site into staging in order to run some experiments. In the staging site, I ripped out BuddyBoss and activated Kadence Theme just to see what happens.

I left Elementor in place because it works just fine with Kadence. In fact, I could have just left Elementor there if I wanted, but ultimately I was doing this to go “full native” with the block editor so removing Elementor was the ultimate goal.

But, with Elementor still there and Kadence as the new theme, I took stock in what would need to be re-built immediately.

• The header and footer would need to be re-built using Kadence since BuddyBoss was no longer there.
• I would need to build new templates for Learndash courses since BuddyBoss was no longer there styling the courses.
• Any BuddyBoss specific Elementor widgets (like the Dashboard Icons) were now missing, so I’d need to develop a Plan B.
• The forums were offline since BuddyBoss was gone.
• Any code placed into my BuddyBoss child theme was now missing, so several custom features were no longer working.

So there in the staging site, I dived into the Customizer and started to tweak my settings to turn Kadence into something that resembles the Blog Marketing Academy.

It was definitely a different experience having to make such heavy use of the Customizer. I was so used to using BuddyBoss’s settings screens to control this stuff before, but a full block-based theme relies heavily on the Customizer.

For the Learndash courses, I made use of Kadence Elements (available on their Pro version) to create custom templates for the courses, modules and lessons. It took me awhile to figure this out because working with blocks still felt like a pretty foreign world to me. But, through a lot of trial and error, I figured it out.

For the forums, I pondered the idea of simply getting rid of the forums for the sake of simplicity. However, I ultimately decided to keep them. The good thing is that BuddyBoss is a fork off of BBPress and BuddyPress. This means that I can slip BBPress in there and all of the forums would continue to work without any lost content. When I installed BBPress, the forums came back to life with a few needed adjustments.

And for the code, rather than set up a child theme for Kadence, I decided to switch over to Code Snippets. It is much more user-friendly and alleviates my use of a child theme. I moved all of my custom code into snippets and – bingo! – all my little geeky code customizations came back to life.

At this point, I had the data I needed to make this transition work.

• I found (more or less) which components of the site would need to be fully re-built in order to have basic functions.
• I found how to keep the forums alive without BuddyBoss.
• I confirmed that all of my Elementor pages and templates would continue to work just fine until I was able to re-build them with blocks.
• I found I could use Code Snippets to maintain all of the custom code stuff that would be missing once my child theme was gone.

I would, however, need to do this all on the live site. Right out in the open.

I could not sync my staging site back to the live site in this case because of the activity happening on the live site. People are buying things, clients are scheduling things, and people are subscribing to the email list. I don’t want to overwrite that stuff.

So, I used the staging site to test things and develop a game plan. But ultimately, this switch was going to happen in the open.

Implementation

Back on the live site, I first ran a full backup as well as cloned the entire site to a second staging site on Cloudways. Just in case. 🙂

Then, I let ‘er rip. I deactivated the BuddyBoss plugin and theme, activated Kadence Theme and Kadence Blocks (both pro versions), and activated BBPress.

The site immediately looked… interesting. 😉 But, since I had figured out so much in staging, I was then ready to go in there and make the necessary changes pretty quickly. I would later go in and do some tweaks and improvements, but my first-level goal was just to make sure things were working.

I even used the Customizer Export/Import plugin to quickly move all of the Customizer settings I figured out in staging over to the live site. That was a massive time saver.

Once the site was functioning on Kadence, the next project was going to be re-building everything I had in Elementor using exclusively blocks. This part would take me several days, however I could take my time because all of the Elementor components were working fine. It involved…

• One by one re-building Elementor theme templates using Kadence Elements, then de-activating the Elementor template so Kadence could take over.
• One by one, going through every page of this site that was built with Elementor and re-building it with blocks. In some cases, I re-built it right in place by switching it back to the WordPress editor and re-building. In other cases, I cloned the page, re-built it in private, then simply replaced the Elementor version with the new one when it was done.

Slowly, all of the Elementor pages and content was being replaced with block-based stuff. The site was going native. 🙂

Finally, when I confirmed that all Elementor pages were re-built and all Elementor templates were no longer in use, I trashed all of the Elementor templates, trashed the Default Kit (thereby removing all the Elementor variables from the database), and deactivated Elementor.

Life After The Switch

I already mentioned above just how much faster the site is now on the front-end. But, the benefits go much further than that when it comes to admin on the backend.

For one, the WP admin has gotten a LOT faster. It is much faster and easier to make content changes and generally get around the admin panel.

The interesting thing, too, is that I’m still using pretty much the same amount of plugins. In terms of quantity, the number is the same. Yet, things are noticeably snappier.

Part of it (and unrelated) is that I think I was having some issue with the object cache on the site. Interestingly, when I turn off the object caching altogether, things got much faster. Weird!

But, I also think not having BuddyBoss in there makes a difference. The code footprint of the site is significantly smaller.

But most importantly, I am now using native WordPress. Gutenberg blocks is how this platform is now intended to work. Elementor was always an additional layer over top of it overwriting things.

When I click to edit content now, I no longer need to hit a separate button to “Edit With Elementor”. I just… edit. When I open the page, there are the blocks and I just do it.

Lastly, a lot of pesky issues were made much easier and simpler on the front-end. Things like:

• Kadence makes things like mobile menus, header arrangements and the like… just easy. It is so much more streamlined.
• I was able to revert back to core theme for many pages (like archives) without having to build custom pages for them with Elementor. This makes it much faster.
• All those stupid background color problems with Elementor are gone now.

There were changes and adjustments I made during this transition to accommodate the new theme and the blocks that were available to me. It has worked out nicely.

Advice For Making This Transition Yourself

There’s no doubt that this can be a lot of work depending on the scale and nature of your site. For some sites, it will be a fairly rapid process. Others… not so much.

If you’re running a site with a lot of customizations, it can take longer. If you’re running a theme built with a page builder (like anything based on Elementor, Thrive Theme Builder, Beaver Builder, etc), then it is going to practically be a re-build for you.

The first thing is to decide if it is even worth doing.

I want to be clear: I have nothing against page-builder based themes. I am still a big fan of Elementor and Thrive Theme Builder. I am still a big fan of BuddyBoss if you’re actually using it for much of what it offers.

If you are having issues with site performance or core web vitals, the first thing to do is to look at some performance optimizations to see if you can handle it with your existing toolset. Between removing some of the more bulky elements from your site’s design and doing some optimizations, you can get good scores using page builders.

However, if you’ve taken your performance numbers and core web vitals as far as you possibly can and it still isn’t good enough, I’m almost positive that switching to all blocks will solve the issue for you.

If you decide to convert, be willing to change some things on your site to suit the new software. Don’t go in with the requirement that your site look exactly the same. There are sometimes things a page builder can do that you just can’t find a Gutenberg block for. You need to be OK with just ditching it when that happens.

Lastly, expect a learning curve.

I work with WordPress for a living yet I was putting off doing full site design with Gutenberg. I was stuck in my ways. I liked the speed and convenience of working with page builders. I just didn’t want to take the time to learn block building.

Working with blocks is just different. At first, it will feel choppy and more difficult than your favorite page builder. You’ll wonder why you’re even bothering with it. It will feel like it isn’t as capable.

But, trust me. It is just a learning curve. Working with the block builder is just another skill you need to get used to. You can build almost anything with blocks that you can with a page builder. HOW you get there will be different, but you can almost always arrive in the same spot.

Just go into it expecting a learning curve. Give yourself time to learn and experiment. Put your site into staging and just give yourself time to goof off with the block builder. Eventually, you’ll get to feel as adept with it as a page builder.

Final Thoughts On Switching To Blocks (Now That It’s Done)

I’m super happy I made the switch. For all of the reasons above.

It has also been fun to tweak the site and make improvements now that I’m fully on the new setup. For instance, I was able to make some nice mega-menus in the header that solve some navigation issues I’ve had for awhile.

The site is faster (by a large margin) and simpler.

I went into this as part of a large content audit I’m doing across the site. Removing outdated content and updating things across the board. Obviously, a big motivation for that is ultimately improving SEO and my standing with Google so traffic goes up. Well…

Hard to make Google happy with my performance and core web vitals not being very good. So, that brought on the technical side of this site audit. Now that that issue has been solved, I can go back to updating content. 🙂

One final word…

I chose Kadence Theme because I liked the features and overall vibe of it. Kadence Theme and Kadence Blocks make a great package for working with the block builder but giving the capability you’d need to move off a page builder.

Kadence isn’t the only option, though. You can also check out tools like Astra, GeneratePress, Blocksy, OceanWP and others. You could even use the stock TwentyTwentyThree theme as a starting point and customize it.

In the end, it is all about the blocks. The core theme will offer certain options in the Customizer, but then you’re building with blocks. And there are plugins that can add more capability to your blocks builder. Feel free to experiment.