Introducing Elementor Blocks for Gutenberg

Wondering how Elementor and Gutenberg will work together? Easily add Elementor templates as Gutenberg blocks using this standalone plugin.

#Gutenberg & #Elementor - the perfect combo!

Gutenberg is WordPress’ new post editor, scheduled for release in the next couple of months, when WordPress version 5.0 is introduced. Gutenberg is currently in Beta, and is available in the repository as a plugin.

A few months ago, we released an update featuring full compatibility between Elementor and Gutenberg. Today, we are excited to take the Elementor-Gutenberg integration even further!

Introducing Elementor Blocks for Gutenberg! Elementor Blocks is a separate plugin, downloadable from the WordPress repository (it will be eventually incorporated within the core of our plugin). It allows you to embed Elementor templates inside the Gutenberg editor with one click.

How It Works

There are various situations where you might want to add Elementor templates to Gutenberg. One use case is when you are writing your blog post, and want to insert a Call to Action box that you previously designed in Elementor.

Here is how to do it:

  • First, go to the WordPress repo, and search for Elementor Blocks for Gutenberg. Then go ahead and install and activate the plugin.
  • Inside the Gutenberg editor, add the Elementor Block.
  • Then, choose the template, and it will automatically preview in Gutenberg.

If you want to edit the template you added, click on the ‘Edit Template with Elementor’ button.

Elementor VS PLUS Gutenberg

Since many of our users are anxious and confused concerning Gutenberg, this is a good opportunity to discuss Gutenberg, Elementor, and how we see the future and co-existence of each editor.

In the future, will Gutenberg replace Elementor?

The answer is simple – absolutely not!

At Elementor, it has been our ongoing mission to provide the fastest, easiest and most useful way to build and design websites. This is what has driven us since Elementor first launched, over two and a half years ago, and will continue to guide us in the future.

Fortunately, a huge following of people share our vision, and have helped make our vision come true.

Elementor was launched in a saturated market, with many page builder and website builder alternatives. We managed to become the leaders of our market by offering the best solution, and we plan to continue to lead the way.

We will continue in our mission in full collaboration with WordPress.

Websites Lead by Design

For the absolute majority of web creators, including myself, WordPress is the one and only platform for creating websites.

The market domination of WordPress over other CMSs has become a commonly known fact.

There was just one factor lacking in WordPress: the need to code every small change.

This is not only true for WordPress. Up until recent years, building websites has been a developer-led field.

With WordPress, the ‘code-first’ approach can be seen in its ‘Code is Poetry’ tagline, as well as in the way in which themes are customized. Making changes to a theme either required the designer to hire a developer, or learn development skills on her own.

But thankfully, this trend is changing, giving designers full autonomy to realize their vision.

We were fortunate to bring about this change to WordPress. By empowering designers to build websites on their own, we relieved many of their past headaches.

We are pleased to see a more visual experience coming to the WordPress post editor, making WordPress even more powerful than before.

Great News for Developers

Elementor, Gutenberg, and the veer towards code-free website customization, presents a huge improvement for developers.

Instead of being tied up in endless menial tasks like button or headline customization, and having to hand-hold the designer every step of the process – developers can now focus on greater challenges.

This improvement creates a positive loop. Developers have time to build more tools, which in turn help the designers workflow.

In short, the more time developers have to develop Gutenberg and Elementor related solutions, the better. This holistic approach gives developers the chance to create custom tools to help clients and designers they work with.

Gutenberg will help creators build richer content without being micro-managed by developers.

And this… is exactly where Elementor Blocks for Gutenberg steps in. By helping creators incorporate their Elementor designs inside Gutenberg, the optimal workflow is achieved. First, you design beautiful sections in Elementor, then easily insert them when writing your blog posts in Gutenberg.

Conclusion

Elementor Blocks is a huge step forward, in terms of integrating Elementor’s capabilities into WordPress’ new editor.

Be one step ahead of everyone else. Build sharper Gutenberg content with Elementor Blocks now!

Liked This Article?

We have a lot more where that came from! Join 430,504 subscribers who stay ahead of the pack.

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

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

comments - 35 Responses

35 Responses

  1. Fantastic…!! your mail answered two questions I was doing during my breakfast:
    What would be the next step in the development of Elementor and how to make my work compatible with Gutenberg in WP 5.0?
    Thank you very much, once again I am happy to have chosen it among so many publishers.

  2. Thanks Ben. Why use Gutenberg if I can build great single post templates in Elementor and insert CTA into the posts using my own Elementor CTA templates and shortcodes? I guess I’m still confused. Gutenberg looks like the right idea, put not as sophisticated as Elementor. Definitely confusing.

    1. Design the single post template in Elementor, then write the blog post in Gutenberg. Have a CTA template you want to embed? Use Elementor Blocks for Gutenberg to add it.

  3. So with WordPress 5.0 we will not be able to use a drag and drop on the page we are building, but have to build the template, then insert the template into a Gutenberg block?

    The extra step is unfortunate, but it is understandable. Premium Elementor Addons does something like that for their Premium Tab addon, and it is cumbersome to have to go to My Templates to edit the page, so (if I am understanding this correctly), hopefully this “build template, then insert into block” is a temporary thing, and we get the live page builder on WordPress 5.0 soon. It won’t be a deal breaker, just inconvenient, and Elementor has SPOILED us with how convenient it is, haha.

    1. I think you can choose Elementor as the main editor, or the new Gutenberg. if you choose to use Gutenberg then you have the bonus option of being able to insert a Elementor template.

      It is a complemented bonus rather than a choose between.

  4. If I understood correctly, first we would have to design the element in a normal page with Elementor and save it as a template and then we could insert it in Gutenberg, is that right? You can not create directly in Gutenberg, right?

  5. This is great! Just a couple of questions—what happens when a template gets deleted? Do you have to go back in to edit each post so an error message is not displayed? And, will you be able to schedule? Use ides:

    Ideally, this would be great to use a global widget (or several) that turn on/of as CTAs and promotions end or start up.

  6. This is great news. Gutenberg sorely needs extensions, and I’m glad you all are stepping up, and making it easy to not have to choose one or the other.

  7. As I can’t give a flying [fill in the blank] about Gutenberg, I am wondering how long Elementor stays compatible with non-Gutenberg versions of WP?

  8. What should I install a new plugin for, if I can solve it via shortcodes? Totally superfluous. I thought you will design blocks yourself which I will use in Gutenberg. Somehow superfluous this plugin.

  9. What about phase 2, 3 and 4 of Gutenberg, when Gutenberg as announced will emerge quickly to a whole page builder?

    No more need for Elementor then? Or will Elementor become a block library?

  10. Will we be able to “Edit in Elementor” like we do now, once WP5 is released or is it only through Gutenberg using the blocks. Elementor is much more intuitive.

  11. This is really amazing to read this informative update about the all new introduction of Blocks for Gutenberg. I really loved the way Gutenberg is defining the art of editing in WordPress editor along with Elementor. Keep up the great work!

  12. Hi Ben! Thanks for the new info. For Elementor users like me (who are WP-newbies, non-coders, non-designers) who take more of a “wait-and-see” approach versus the braver beta-tester types, can I simply create blog posts in current Elementor (with WP’s Classic Editor plugin activated, but not really used)?

    Then later, when the Gutenberg Blocks feature is added to your core update for Elementor … and WP releases a core update where Gutenberg replaces Classic as its editor … will such posts that I created ‘old-style’ be retained/intact?

Leave a Reply