If you visited The WP Inn before I wrote this post, you may recall that it looked a little different back in the day. That was when I was using Elementor to style the site.
As of (shortly before) publishing this post, The WP Inn is Elementor-free.
Why? Read on.
Elementor vs Gutenberg
I started this site shortly before the WordPress folks upgraded us all to WP 5.0, also known as Gutenberg. I wanted to style it easily for myself and for the folks (likely you) who are part of the DWA course.
So I installed Elementor and even paid for and installed Elementor Pro, so I could really do it “right”.
I don’t regret doing that. Elementor is a cool WP plugin, but – for my purposes – now that Gutenberg is here, I don’t really need it anymore.
If you installed Elementor and like it, there’s nothing wrong with continuing to use it. Maybe you’ve made stylistic changes to your site that Gutenberg (and related plugins) can’t handle…yet.
Here’s what I went through to switch from an Elementor-based site to a Gutenberg-only site.
First, I deactivated the Elementor and Elementor Pro plugins. I had also installed Essential Addons (EA) for Elementor. After deactivating the Elementor plugins, this plugin reminded me that it needed them to operate properly. That’s what I deactivated EA too.
Note that I didn’t delete these plugins right away. (I still haven’t.) I thought I better keep them in place in case something went wrong after turning them off.
Fortunately, everything was and is fine.
I did have to do a little tweaking to get things to look the way I wanted them to.
Getting The WP Inn Back in Shape
The site that you see as of this writing is not exactly the same as the Elementor version…but it’s close.
The previous version had rounded, blue rectangles enclosing each post introduction on the home page. The header and menu at the top was arranged differently, and the welcoming text near the top of the home page also had its own rounded rectangle, instead of the blue box you now see.
I added one plugin called Advanced Gutenberg. It’s made by the same folks who created the Astra theme, which this site also uses.
I needed this plugin to get the Featured Image to appear along with the text of each Post shown in the main body of the Home Page. The widget that comes with Gutenberg can put your Posts there, but it can’t include the pictures.
Other tweaks I made (since I was playing with the look of the site anyway) include making the text larger (20pt), removing the Category references in the Recent Post widget in the right sidebar, and changing the About page to block style (on the backend).
Removing Elementor was, for the most part, a graceful transition to the Gutenberg block style. (One exception was the About page mentioned just above.)
The most work I had to do was with the Home page. Without Elementor, the four posts that had been showing there were converted to straight HTML.
When I tried to work with each, I clicked a Preview button, that I was offered, on each block. After that, I couldn’t easily get back to the HTML, nor could I make any changes to the text. (The Featured Images were gone too.)
In the end, this didn’t matter too much, because of Advanced Gutenberg as mentioned above.
The biggest challenge was getting rid of those four blocks. I couldn’t see any way, at first, to delete them.
Eventually, I found this Block Navigation icon way at the top of the editing page.
When you click this icon, you get a dropdown that shows each block in your post or page. I clicked on each of the troublesome blocks in the list (This acted like a link that took me to the block itself.) and then was able to delete each in turn. I think this is a bit of a glitch in Gutenberg, but it’s not one you’re going to run across very often, if ever.
That’s pretty much it.
One of the reasons I wanted to try this was because I’m using the Astra theme. Many (DWA) WP users are using GeneratePress. Astra is apparently a strong competitor of that theme. It’s good to know that you can do a lot, if not all, of the things you can do in GeneratePress in Astra too – including removing Elementor.