Gutenberg vs. Elementor: ThemeIsle Actually Attempted to Build Their New Site With Both — Here’s What Happened

ThemeIsle's main website was long due for a redesign — an opportunity to find out if a real-world business website can be built using Gutenberg and WordPress' out-of-the-box tools. This is their case study.

Yes, you’re reading this right. We – ThemeIsle – are probably one of the few teams that have decided to use the WordPress block editor, Gutenberg, to build the core of our pages during our big redesign a couple of months ago. Some things worked well, and other things went wrong.

But as you can imagine, it’s a little more complicated than that, and we believe that you could benefit from our experience.

But first, just in case you’re not familiar with us, let me explain who we are and why you should care?

ThemeIsle is the company behind some of the most popular themes in the WordPress directory. And yes, I have data to back me up! Just take a peek into the Popular tab of the WordPress directory. Long story short, a company that makes a living by building themes should also have a pretty neat website of their own. That’s where the Gutenberg ordeal comes into play.

About Gutenberg, many of us know what it is, and our experiences with it have been either more or less successful. The WordPress team has been promoting it as the next big thing in website building, but is that really the case? More importantly, do you actually believe this enough to risk your next project and potentially waste hours of your time trying to build things in Gutenberg vs. doing it in, say, Elementor?

This post should give you an answer and save you some headaches.

The Backstory

Our business’ main website at ThemeIsle.com was long due for a redesign. The recent refreshed the look of our blog only further helped our main site stand out like a sore thumb. It wasn’t a good image, and especially since we’re in the business of convincing people that we know WordPress design – we’re selling themes after all.

A redesign is always stressful, challenging, and means taking a gamble. However, it also presented us with an opportunity to find out if an actual, real-world business website can be built using Gutenberg and WordPress’ out-of-the-box tools. This a gamble.

Building With Gutenberg in Practice

In all honesty, Gutenberg is great.

But…This is only true if what you want to build is a somewhat normal web page that’s only a variation on your theme’s main design.

When you actually start using Gutenberg as a design tool in itself and attempt to construct new page elements with it, – elements that have not been prepared in your theme – then this is when the problems begin.

Granted, we did manage to build our homepage with both Gutenberg (see example a) and Elementor (see example b), and they both look very similar, but the experience was far from the same.

The Usual Difficulties While Using Gutenberg

Gutenberg is rather tricky. The problem is that it’s default out-the-box abilities, are still fairly basic. It’s great for some things, and unfortunately, not that great for anything else.

For instance, if all you want is to craft a good-looking blog post, you’re likely to do build it quicker with Gutenberg than with Elementor.

Even when you copy and paste your text from another writing tool, Gutenberg will understand each individual element and convert it into its corresponding block. Paragraphs become paragraph blocks, subheadings become heading blocks, and so on. If you want to, you can just realign some stuff, make your images pop, and you’re done. Perfect!

But that’s about it in terms of what Gutenberg can do effectively.

While there are quality built-in blocks in Gutenberg, plus tons of third-party plugins will give you new blocks of their own, all this still doesn’t help much if you want to use Gutenberg as a complete website design tool.

Gutenberg vs. Original Layouts

In our case, we still constantly found ourselves hitting a wall whenever we wanted to do something more original with our homepage content – something for which there was no block available.

To effectively design a site with Gutenberg, you must be ready to modify the existing blocks and manually code new blocks to suit your needs. This requires React skills and a deep understanding of JavaScript (yes, Matt, you warned us, we know).

Let me put this another way. If you don’t know how to create new elements for Gutenberg using code, when you hit that brick wall, you won’t be able to go over it if at all.

I’m not much of a coder myself, and I’m aware that many of you will be quick to point out that I know that “building a block” for Gutenberg is easy. However, building a block is more complex than a paragraph, especially if you want it to look the same everywhere, and behave the same no matter what screen/device is being used to view it, is far from easy.

Moreover, while Gutenberg UI is okay for working on posts, it turns out that it’s not really that WYSIWYG(what you see is what you get) -friendly when working with custom blocks and elements.

For example, this is what I see when working on the ThemeIsle homepage design in Gutenberg:

While all the content elements seem to be there, the frontend styles, backgrounds, and colors don’t translate into the editor’s UI.

This creates another disadvantage when working on the design. You have to save and refresh the page continually. Technically, you could always implement all of the styling in the backend, but that would take up additional work hours spent on things that the user won’t even see.

Overall, Gutenberg is excellent so long as what you want to do is place some ready-made blocks on a page canvas, and have everything displayed within the rules set by your theme. From that perspective, Gutenberg is a better TinyMCE. If you want to build something more advanced with it, however, you should be ready for what you’re getting yourself into.

Switching to Elementor

As you saw, we built our homepage both in Gutenberg and in Elementor.

But why?

We don’t like doubling our workload unless we absolutely have to, so the reason had to be good. The Gutenberg version of the page didn’t meet our expectations, and we could only go so far with coding and patching certain aspects of the page. But the final straw was when we tried to make the pages look good on mobile.

Additionally, the Gutenberg ecosystem is changing a bit too fast for our taste. We were worried that our in-Gutenberg design, and everything that we had coded ourselves, might not survive future updates.

Gutenberg No More

That’s why we decided to redo the homepage in Elementor even though we had completed 80% of the design in Gutenberg. We didn’t do this because Elementor is better. We did it because we find it more familiar to use than Gutenberg.

We previously used Elementor to build the Optimole homepage (we wrote about it here on this blog). We also experimented with building news aggregator sites with it, tweaking the default single post templates, plus loads of other things I’m not going to list here.

The Learning Curve

The thing is that new tech like Gutenberg always comes with a learning curve, even if the tool in question is portrayed as an easy-to-use thing. When the project is big enough, even the most straightforward tools will prove troublesome, and especially once you start bending them to fit your specific needs.

Working on a bigger project is challenging in itself, but if on top of that, you also decide on using a completely new tool, then the challenge gets escalated to a whole new level. The lesson is that you should always factor how much learning that new tool will cost you in resources.

This is why Elementor came out on top for us during the ThemeIsle redesign. With Elementor, everything was just more predictable, and we didn’t have to worry about tweaking things in the source code. Every modification to the appearance of the page was available via the UI.

You don’t have to learn React, and you don’t have to worry about mobile appearance all that much either. And, most importantly of all, you get a true WYSIWYG interface when working on a page, no matter how complex that page might be.

Using Gutenberg on Production Sites

In the end, I’m sure that we could have completed the redesign in Gutenberg as well, but the time investment required to do so would have been too much. Gutenberg is certainly capable of doing awesome things, but it still requires more sophisticated skills from the person wielding it.

It can be fun using the new block editor but don’t expect it to be a stress-free experience. Unless, as I said earlier, all you need is to make a blog post look cool.

The only positive thing we took out of the whole experience was that it forced us to examine Gutenberg really carefully, try to understand it, and see what it’s like using it in a real-life scenario. As for the effect, sadly, not great.

The Bottom Line

You should indeed use Gutenberg when working on WordPress sites; you just have to learn its limitations (or rather your limitations with it).

Gutenberg is here to stay. Even if you hate it now, you certainly can’t avoid it forever. We might as well learn how to live with it and use it for things it is good at.

And if you’re a developer with a WordPress plugin on your hands, then you really need to look into how to adapt it for Gutenberg (here’s a guide, part 1 and part 2). Take an example from Elementor – there are now Elementor blocks available in Gutenberg.

About the Author

Karol K
Karol K
Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,203,082 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

21 Responses

  1. Hey,

    If anyone is wondering why the page looks like this: https://elementor.com/blog/wp-content/uploads/sites/9/2020/02/ThemeIsle-Gutenberg-Copy.png, since Gutenberg is true to that with custom coding/blocks can do much better, it is because, the developer working on the website wasn’t really familiar with React or Gutenberg, so he approached things is what he thought is a simple way. In the meantime, we’ve learned a lot ( this was the whole point), we just wanted to explain a bit our challenges and our journey from an editor-wise perspective.

  2. Karol, thanks for the write up. You have confirmed my thoughts about the current state of the Gutenberg editor. Not a fan of editing source code or performing custom code if there is another solution out there (such as Elementor) that can accomplish the same thing out of the box. It was great to see a side by side comparison. I went over to your new website and had a play around. Very polished, well done.

  3. I recently redesigned a couple of my sites, and decided to try going “full Gutenberg.” I used your Neve theme.

    There were a lot of limitations and frustrating UI issues with Gutenberg. I was able to get something I was happy with, but I agree Gutenberg really isn’t ready for use as a site designer at this point.

  4. Very interesting. I have inherited 5 WooCommerce based sites, all of which are running on out of date and unsupported ‘premium’ wordpress themes (e.g. developers are no longer releasing updates so WooCommerce templates are a year or two behind, WP Bakery and other plugins bundled with the theme no longer updating etc). There’s also plugin soup, so I am never really sure which plugin is responsible for which element. So, I have proposed that we use Storefront theme for redesign. In theory all the content should be easy to move over and restyle but there will be visual editor detritus (presentation layer shortcodes mixed in with the content) etc.

    So I am wondering, do contempory visual editors like Elementor do any better than Guttenburg at keeping the styling and presentation layers free from such detritus?

    1. From my experience, if you’re not using any third-party add-ons on top of Elementor, then you can move any Elementor-made page from theme to theme. It’s going to look at same as long as the main page template of the theme is capable. In case of trouble you can always switch to Elementor’s blank page canvas template.

  5. There are many themes that don’t use elementor but they use other editors like WpBakery, Gutenberg and classic editor. But elementor is so good for me 🙂 UX on the1st place

  6. Yes, Definitely Elementor is One of Best Page Builder We Use for Homepage and Landing Page Design. But as a Basic User sometime We Need to Install Multiple Add-ons for Needed tweaks.

    BTW Loving Elementor Pro.

  7. Hey Karol, I agree that Gutenberg still has a long way to go before it could even be considered as a website builder, especially for beginners.

    I do enjoy using Gutenberg to format blog posts, although Elementor is something I’m going to be focusing on to build small business websites.

  8. At it’s current development stage, Gutenberg is not a real site builder like Elementor, so this not a completely fair comparison.

    That said, the Full Site Editing feature is in the works for Gutenberg, and will bring a lot more to the table regarding visual site building, with the great benefit of being part of core.

  9. Hey Karol,
    Thanks for this write up! It came at a good timing, since I’m planning to migrate from an older theme to a newer theme that is compatible with Elementor.

    One question, did you redesign your site from scratch using Elementor, or just changed themes and adapted to Elementor as your primary page builder?
    This is what I’m debating right now, so some input would be great please!!
    Thank you

  10. I’ve been building wordpress sites since 2007, more a developer than a designer. My view is that elementor is great if you’re a pure web designer with graphic arts background. Perfect if you’ve few coding skills, making a marketing website that won’t change a lot.

    The issues start when you want to add new posts or articles to get more traffic. i.e. More a blogsite. Elementor and other similar tools are not good at this and add in a design element when really all the client wants is a simple editor to write text, add an image etc. He’s not ‘designing’ he’s adding simple content. Layout is irrelevant.

    But coming from the old wordpress editor to gutenberg has been frustrating. There are still some compatibility issues when trying to upgrade an older wordpress site and theme when moving to gutenbery. Elementor has far few problems here, although I’ve seen some dropoff in site speed with the additional coding overhead. WPBakery is the same. More code, more problems, slower performance, no matter what you do with caching etc etc….

    I think every project needs to be looked at on it’s merits. Some sites, like that I made for my daughters hair salon and a friends small shop site, elementor with a pre-loaded theme was perfect. We had the site up and running quickly, at minimal cost.

    But other more complex ecommerce or elearning sites with complex workflow needs, dynamic home pages and where the client wanted to write a lot of blog content themselves, I would start with a simple clean genesis/astra theme framework + gutenberg and lots of custom css as needed. But, we’re more a coder which explains my bias…

    1. When it comes to giving a client tool to just add new content, Gutenberg is kind of perfect for it, as long as the theme on the site is able to handle all the Gutenberg elements correctly.

  11. I hate Gutenburg… From my personal experience, I consider it’s a gutenBUG…
    I hope WP will make it better soon or remove it at all. 🙁

  12. Karol, very good research and wrap up 🙂
    I was about to build our website in Gutenberg, but we switched to Elementor just for one page – the homepage. And it was a great experience. Next, I will reuse the homepage elements to rebuild our WordPress Monthly Retainer page. This should be easy now once I have the styling of the block in place.

  13. I dont like Gutenberg!! See the elevate number of download the CLASSIC EDITOR… Why WP dont give back the Classic editor? And Elementor should be the same great editor!

    1. @user-5e1df0b29b5fb

      I agree they should have “included” a proper theme builder (like elementor) and modify all the “old part” like widget menu footer and so on.
      no need to reinvent the wheel and create disconfort to many people.

  14. Thanks for this article. So I am wondering if you have considered or tried working in ClassicPress? If no, what’s keeping you from moving in that direction? I have one foot in WP with Gutenberg, one foot in CP and one foot in Drupal, which is where I started once the CMS world took over vanilla editors, which is where my journey began long ago. I’m just not feeling comfy with Gutenberg as I like working under the hood but I do not have the time to really master React.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,203,082 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.