black friday 50% off sales
BLACK FRIDAY MEGA SALE 50% OFF
Days :
Hours :
Mins :
Seconds
Logo

How to Display Gutenberg Blocks in Elementor

If you have been designing WordPress websites for a while then you must have heard the name of Elementor and Gutenberg Blocks. Elementor is a very easy to use drag and drop website builder plugin that makes it very easy to build a WordPress website. It is the favorite tool of many website developers. 

It is very easy to customize a WordPress webpage by using Elementor. The website builders can play around with various features of the Elementor plugin to build an amazing website. The Gutenberg blocks can also be added to a webpage by using Elementor. The combination of Gutenberg Blocks and Elementor gives many more features to play with to the website builders. 

Displaying a Gutenberg Post Block using Elementor

The process can be a little confusing but we have made it really simple for you by explaining all the different steps that are involved with it. 

Step 1: Installing the plugins

You need to install both the plugins Gutenberg Post Blocks and Elementor from the plugin library. You can access it by clicking on plugins and then going to add new. Activate the plugins after installing them. 

Gutenberg Blocks
Gutenberg Blocks

Step 2: Making a saved template in Gutenberg post blocks

When you are inside your WordPress dashboard you need to first click on the Post Blocks menu. From there select the saved templates option. 

Post Blocks Settings Menu
Post Blocks Settings Menu

In the beginning, there are no saved templates by default in the Gutenberg Post Blocks. You have to make one by clicking on the Add New Template button

Saved Templates
Saved Templates

You can add a title which is the name of the template that you will be creating. 

Add new title
Add new title

You can now use the Gutenberg post blocks to make a template and then save it. When you click on the “+: button a pop up appears that shows the popular Grid layout of the Gutenberg Post Blocks. You can use all the blocks that are present in the Gutenberg Post Block to make the template. 

Gutenberg Blocks List
Gutenberg Blocks List

After you have finished editing the template you would need to publish it so you can use it later in the Elementor plugin. You can also preview the template before you publish it to be sure. 

Publish Posts
Publish Posts

Step 3: Using the saved template in Elementor 

Elementor is used to build any WordPress webpage. You can go to your desired WordPress webpage from the pages section in your WordPress dashboard. You can also create a new page and edit it with Elementor. Select the page you want to edit and choose Edit with Elementor option. The page would become ready to be edited in a few minutes. 

If it is a brand new page you can add a new section by clicking on the “+” button and selecting a layout. 

Drag Widget Here
Drag Widget Here

After the layout is selected you would need to add the template that you have saved in Gutenberg Post Block. You can use the search widget to easily get the template. Type in “Gutenberg Post Block” in the search box and it would appear. 

Elementor Gutenberg Post Blocks Addons
Elementor Gutenberg Post Blocks Addons

You just need to drag and drop that in the new section that you created by using Elementor. A new drop-down would appear which would allow you to select the Gutenberg Block from all the templates that you have saved.

Saved Templates
Saved Templates

You just need to select the template and you would see that it is automatically being populated on the webpage. To finalize it you just need to press the update button and it will be published. 

How to edit the Gutenberg block template

You cannot directly edit the template using Elementor. You would need to go back to the saved templates option of the Post Blocks menu. From there you can edit existing templates, delete them and create new templates. You would just need to publish it there once and it would be set in all the webpages where the template has been used. 

Advantages of using Gutenberg Blocks in Elementor

WordPress Gutenberg blocks are a very helpful tool when it comes to website building. It amplifies the ability of Elementor. 

Conclusion 

The use of Elementor makes it easier for website builders to make an amazing WordPress page. However, it becomes easier to display the blog post on your website in a grid layout by using Gutenberg Post Block. Since you can use the blocks of Gutenberg Post Block as saved templates in Elementor it makes designing much simpler now. You just need to make a template once and use it whenever you need it with Elementor. 

Written byAsir Muntasir

I have been doing SEO Content Writing for over two years. I am also experienced in technical writing and want to learn more about its various dimensions.

Leave a Reply

Click slaes tag Mega Sales, Don’t waste this discount.

Black

Friday

Let’s Grab the Deals.