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!
48 Responses
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.
Thanks! Glad to have you with us
You guys amaze me. Seriously.
That is seriously rad!
Luvin’ it!
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.
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.
So, can I use a form in posts for Content upgrades?
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.
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.
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?
That is right. Design it in Elementor, then add it in Gutenberg
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.
The template will simply not be displayed. The schedule idea is interesting, thanks for the suggestion
great stuff..
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.
Amazing work as usual by Elementor team…. cheers
Exactly what i need for my blog. Will wait till embedded in the elementor core plugin.
That’s why I love Mondays!!!
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?
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.
great … I will test as soon as possible.
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?
As we wrote, we will continue to be the best design tool for WordPress. We keep evolving Elementor, making sure it stays ahead of the game.
This makes a lot of sense 🙂 Sharing with our audience now.
What he said. 🙂
Well done!
Really Cool Stuff. Loved it completely.
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.
Excited to see what’s next 🙂
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!
Elementor is so far ahead of Gutenberg, I don’t think Gutenberg will ever catch up.
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?
Just use Elementor. It will always remain in tact.
You are welcome too thank you too
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.
I’d be interested in this too. I can see a lot of use cases.
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?
Elementor Blocks do not work yet in WP 5.0 – unfortunately :/
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.
汉化 就好了。或者支持微信付款
It’s a really cool implementation. Love it!
Really Cool Stuff.
Keep Sharing Ben
It does not seem to work anymore with WordPress 5.1. There is no Elementor Block left in the library.
Greetings.
Rip I guess 5.1 must have broken it then :D. Will you be able to add these cool [code] sections into wordpress with this by the way?
Hi Horst, please contact our support.
Nice article
Hello,
is the plugin obsolete now with WordPress at version 5.2?
THX!