It doesn’t take long to figure out why people use Elementor.
It’s fast. It’s responsive. It makes it possible to create beautiful-looking WordPress websites with drag-and-drop convenience. And as a storehouse for your dynamic content, there are few better ways to create eye-popping websites without knowing a single line of code.
So why do some people switch to the WordPress Gutenberg Editor? There are a few reasons:
- Content optimization. It’s easy to launch dynamic content in Gutenberg Editor and still get a good score on Google PageSpeed insights. With Elementor, you often need additional page optimization like removing assets to match these results.
- Page size. Because Gutenberg relies less on asset scripts, it loads more quickly and creates a lighter page. You might say it adheres to the principle of “less is more.”
- Speed. With increased page size comes increased speed. As Deepak Ghimire noted in Medium, “Speed matters! And it, now, matters a lot to Google!” Ghimire cited page speed as one of the chief reasons he switched to Gutenberg.
Additionally, the price of Elementor fluctuates. There’s no telling if a new price rise is around the corner. Meanwhile, Gutenberg is free to use.
With that in mind, here are the steps you’ll need to take if you’re considering a switch from Elementor to the WordPress Gutenberg Editor.
Elementor to WordPress Gutenberg Editor: How to Make the Switch
Don’t be intimidated by the list of steps you see—this is simply a way to help you prepare for a step-by-step conversion. Depending on which themes you’re using in Elementor, the process can be much easier than you think. But it never hurts to be thorough.
1. Preparation: Plan the Conversion and Store Your Backups
The first step is preparation. Plan this out before you execute anything—because some of the changes may be irreversible.
During this phase, make sure you save any content you need to permanently store. There’s no reason your website will come to ruin with a simple conversion, but it never hurts to have backups, just in case.
You should also do some research on the version of Elementor you’re running. For example, the Blocksy theme is easy for this conversion, and you can even keep running the theme on your site.
Note: if you want to do a before/after on the performance of your site, the preparation stage is the time to take a speed test and see where you’re at.
2. Prepare Everything on a Staging Website
One reason to prepare your switch to Gutenberg well in advance: you need to consider your customers. If a lot of people are relying on your website being up at a certain time, don’t use it for your updates.
But rather than put up a “we’re closed” sign, you should consider using a staging website to work out the kinks. A week’s worth of a site being down can be devastating for your SEO—and your audience loyalty.
3. Remove Elementor Page Builder
Removing page builder is the first step, but keep in mind: if you’re using a lightweight Elementor theme like Blocksy, you may be able to keep it up.
4. Install Gutenberg Blocks Editor
With the old designs cleared out, you’re free to install Gutenberg Blocks Editor. If you’re using old dynamic content, you may need to edit these into Gutenberg Blocks Editor to get them to look exactly like you want.
However, Gutenberg does a good job of important dynamic content—you may simply need to make a few adjustments to make sure the corresponding “block” matches your intentions.
5. Optimize for speed
Run a speed test on the new site and compare it to the old site. If all goes well, you should notice substantial speed upgrades over the results you were getting in step one.
What About Using Elementor and WordPress Gutenberg at the Same Time?
You might have noticed that in some cases, you can use Elementor and Gutenberg at the same time. Call it “the best of both worlds.” If you prefer the page design elements of Elementor but the dynamic editing of Gutenberg, there’s no reason you should have to choose one or the other.
Here are some ways you can do that:
Stick to Simple Elementor Themes
For click-and-drop web designers, it’s tempting to scroll through endless Elementor themes in search of the “perfect one.” This is counterproductive. What you want is a simple theme. You can always build on it later, and simpler themes tend to let “Elementor do its thing,” as WPApprentice says.
Simply put: the easier you make it to run Elementor, the easier you’re going to find it to integrate with Gutenberg.
Turn Off Elementor for Your Posts
- Elementor > Settings
- Under “Post Types,” uncheck the “Posts” box.
- Save the settings.
The reason you want to do this right away: if you plan on using Gutenberg Editor, you can and should start building within the editor as soon as possible. Leave Elementor “post editing” off and move to the next step.
Use Elementor’s “Pro Theme” Builder
By this point, you should have an idea of what you want your main site to look like. Now use Elementor’s Pro Theme Builder to create templates for posts and pages.
The basic method? Create and edit your posts within Gutenberg once you’ve installed it. Gutenberg will “populate” the Elementor-designed template with the dynamic content you put into Gutenberg. If it sounds a little complicated, think about it this way: Elementor is the frame and Gutenberg is the painting inside it.
Make the Switch to Gutenberg & HostGator
Whether you’re performing a full or a hybrid switch to Gutenberg, it can be easier than you think. The benefits are simple: faster performance, less code, better results in search engines. But the sooner you make the conversion and start plotting out your posts in Gutenberg, the easier you’ll find managing your dynamic content in the future.
And it doesn’t hurt to have WordPress hosting from HostGator in your corner, either, helping make your migration to Gutenberg as easy as a few clicks.
Casey is the Senior Director of Marketing for Hosting and has been in the web hosting space for 7 years. He loves the slopes and hanging out with his kids.