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.


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!

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

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

Liked This Article?

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

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


54 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.

      1. Hi Ben

        It just did exactly the same with Astra theme. The trouble I tried to solve to how to reflect the blog post template design(CSS) on Gutenberg editor? If you can help, it will save me a lot of time. Thank you.

  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?

      1. Hello Ben,
        My wife wanted me to set her up with a website where people could comment on her videos as Google/Youtube has been getting snippy for a few years now with Christian videos.

        I really didn’t want to start a new project and take the time to take her descriptions from youtube and video URLs and titles and create a page for a video blah blah blah.

        I found a free WP theme in the WP theme repository that is good on its own but it comes with the free version of Elementor.

        I must say how impressed I am. For my web site, I had been using a purchased theme from Elementor Theme Forest and it cost me $39 then I was using the pro version of WP Bakery Page Builder. I hate the pop up for all the text blocks because if you pull the extend button down to make it bigger it has a nasty habit of closing the box and you have to keep messing with it over and over to make it big enough to see your tools and what you are writing.

        I’ve built a bigger and better website in 2 days than I did in a month with a pro theme and pro page builder.

        I hurt my back so I’m on disability payments which are much less than regular salary so while I can’t afford to buy the full version of Elementor yet, I will definitely when I’m back to work.
        As of February 2020, you don’t need Guttenberg, you can do far more with Elementor than you could dream of doing with Guttenberg, in half the time. I’m in 7th heaven with the full-screen feature for the text block.
        The only thing I wish you’d change is making the ‘add media’ button available but that’s a very minor issue.

        I can’t believe that Elementor works as well as it says on the front end.
        No matter what back builder I’ve used, Working on the front end is a pain and working on the back end requires you to work blindly and ineffectively with 10x’s more revisions. Elementor’s front end is the way to go for sure.

        “Where we’re going, we don’t need Guttenberg…… “

  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?

  13. Are there any plans to go the other way and be able to insert Gutenberg blocks into Elementor built pages? I am working with Crossword Compiler which has a block to insert a Crossword Puzzle into a page and it would be nice to be able to use it with Elementor as well.

  14. Thank you so much. I was afraid that Gutenberg is not compatible with Elementor. Will my previous web pages that I have created with Elementor still work when I upgrade to WordPress 5.0?

  15. Previously you couldn’t edit in Visual Composer a page that had been edited in Elementor… but it looks like now with Gutenburg you can switch between the two? How does that work exactly? The video moved very quickly over this point.

  16. I just wish I could use Elementor with my iPad. Technology is becoming more and more mobile and I love Elementor but it would be even more amazing if it worked with mobile technology like the ipad

  17. Hello,

    Hope you are doing great!

    I am facing an issue, I want to edit the block only but I am not able to edit. It only allows me to edit the template. Please have a look at and let me know if there is any way so that I can edit block only.

  18. Thanks for sharing this tutorial. Can you also please guide me how can I create a block template? I am doing the same using this resource but it’s giving an error and I am having some programming lines in front end. This is the code
    add_action( ‘init’, function() {
    $args = array(
    ‘public’ => true,
    ‘label’ => ‘News’,
    ‘show_in_rest’ => true,
    ‘template_lock’ => ‘all’,
    ‘template’ => array(
    array( ‘core/paragraph’, array(
    ‘placeholder’ => ‘Breaking News’,

Leave a Reply

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

Want to learn how to build better websites?

Join 1,384,778 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.