How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Divi’s Layout Block can be used as a reusable image layout block for adding Divi-styled images to Gutenberg blog posts. This combines the powerful design options and functionality of Divi (for creating beautiful images) with the convenience of writing posts (and adding blocks) with Gutenberg.

In this tutorial, we will demonstrate how to use the Divi Layout Block to design a few stunning image layouts. Then we will add those layouts as reusable blocks in Gutenberg. With this technique, we will be able to add just about any Divi design feature to our images (backgrounds, lightbox, filters, animations, scroll effects, and much more). Then we can use that fabulous design as a convenient image template for adding images to future posts created with Gutenberg.

Let’s get started!

Sneak Peek

Download the Reusable Image Layout Blocks for FREE

To lay your hands on the layout blocks from this tutorial, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Use the Download to Import these Layout Blocks on Your Site

To import these reusable Divi Image Layout Blocks to your site, first, you need to unzip the download file. There you will find the three JSON files you will need to import to your site.

Go to edit a post using the default editor (Gutenberg). Open the “More Tools & Options” menu at the top right of the page and select “Manage all Reusable Blocks”.

Then click the Import from JSON button. Choose one of the JSON files from the download folder and click the import button.

[…]

 



This article was written by Jason Champagne and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top