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

Feb 15, 2020 | Everything Divi for WordPress




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

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

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

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-1 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

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

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-2 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Repeat this process to import all three JSON files.

Once done, add a new block within Gutenberg. We will be able to find the imported Reusable layout blocks under the Reusable option toggle. Simply click the one you want to add it to your post.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-3 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

That’s it!

Let’s get to the tutorial, shall we?

What We Need to Get Started

To get started, we will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new post in WordPress and use the default editor (Gutenberg) to add some mock content (title, headings, paragraphs, featured image, etc.). Basically we need a test post to build the Divi styled image layout blocks.

After that, we are ready to start.

Part 1: Creating the Fullwidth Image with Caption Reusable Divi Layout Block

Add Divi Layout Block

To start, add a Divi Layout Block to your post.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-4 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then click “Build New Layout”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-5 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Designing the Divi Image Layout

In the Layout Block Editor, begin designing the layout by adding a one-column row.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-6 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

The Image Module

Add an image module to the row.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-7 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then update the settings as follows:

  • Open in Lightbox: YES

This will allow our image to show in a lightbox on click.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-8 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

  • Image Overlay: ON
  • Overlay Icon Color: #ffffff
  • Hover Overlay Color: rgba(120,47,130,0.57)

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-9 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

To create some space around our image, update the row settings as follows:

  • Use Custom Gutter Width: YES
  • Gutter Width: 1
  • Width: 90%
  • Max Width: 90%
  • Padding: 5% top, 5% bottom

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-10 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

This will give us 5% of spacing around the image. This will also be the space that will display the background gradient we will add to the section.

Open the section settings and update the design with a background gradient as follows:

  • Gradient Background Left Color: #782f82
  • Gradient Background Right Color: #fe756b
  • Gradient Direction: 90deg

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-11 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

To make the image extend beyond the blog post content container a little, we can give the section a custom width as follows:

  • Width: 110%
  • Max Width: 100%
  • Margin: -5% left
  • Padding: 0px top, 0px bottom

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-12 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Finally, give the section a creative touch by adding an inner box-shadow as follows:

  • Box Shadow: see screenshot
  • Box Shadow Horizontal Position: 5vw
  • Box Shadow Vertical Position: 5vw
  • Shadow Color: rgba(255,255,255,0.7)

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-13 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

If we want to have an image layout without a caption, we can stop here, but to add a caption to the image layout, add a text module below the image.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-14 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then add some filler content to serve as the caption text.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-15 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then update the following text settings:

  • Text Font: Montserrat
  • Text Font Weight: Semi Bold
  • Text Text Color: #ffffff
  • Width: 80%
  • Module Alignment: right
  • Margin: 5% top

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-16 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

When finished, make sure to save the layout with Ctrl + S or open the settings bar at the bottom and click “Save & Exit”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-17 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Adding the Image Layout to Reusable Blocks

To add the layout to reusable blocks, click the “More Options” menu above the block and select “Add to Reusable Blocks”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-18 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Give the reusable block a name and click “Save”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-19 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Now the fullwidth image with caption layout has been added to reusable blocks and will be available from the block list when building a post.

Don’t forget to update/save the post to save the changes.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-20 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Part 2: Creating the Left Image with Caption Reusable Divi Layout Block

Now the fullwidth image with caption layout has been added to reusable blocks, we can use that block to create our left image with caption layout.

Convert Reusable Block to Regular Block

To start, open the “More Options” menu at the top of the reusable block containing the fullwidth image layout. Then select “Convert to Regular Block”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-21 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Don’t worry, this won’t remove the layout block we just created from reusable blocks (there is an option for that though). This will simply make the reusable block a regular block so that we can edit and use the block for a single instance.

Update Layout

Once the block is regular, click the Edit Layout button above the block.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-22 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

In the layout editor, open the section settings and update the width as follows:

  • Width: auto
  • Max Width: 500px

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-23 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

That’s all we need to do inside the layout editor. Make sure to save and exit the layout.

With the block selected, open the main settings sidebar and select the block tab to show the block settings. Under the advanced toggle, add the following class:

  • Addition CSS Class: alignleft

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-24 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

This class is native to WordPress and it will float the block to the left which will also float our image to the left of the content inside our post.

After the class has been added, open the block’s “More Options” menu and click “Add to Reusable Blocks.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-25 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Give the Reusable block a name (ie. “Left Image with Caption”) and click save.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-26 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Now the Left Image with Caption layout block has been added to the list of reusable blocks for easy access.

Part 3: Creating the “Right Image with Caption” Reusable Divi Layout Block

So far we have a fullwidth image with a caption layout block and a left image with caption layout block. Now we can add the right image with the caption layout block.

Convert Reusable Block to Regular Block

To do this, open the “More Options” menu on the left image with caption reusable block. Then select “Convert to Regular Block”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-27 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Update Layout

Once the block is a regular layout block, click to edit the layout.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-28 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then open the section settings and take out the left margin.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-29 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Save and exit the layout editor.

Then update the block’s additional CSS class with the following:

  • Additional CSS Class: alignright

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-30 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

After the Class has been added, add the layout block to Reusable Blocks.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-31 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

And give the Reusable Block a name (ie. “Right Image with Caption”) and Save it.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-32 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Now click one of the blue plus icons under a block in the post to add a new block. Then in the block list popup, open the Reusable toggle. We now have our three reusable image layout blocks ready to be used.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-33 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Part 4: Using the Reusable Image Layout Blocks on a Post.

Although we have our Image Layout Blocks created, they exist (for our purposes) only as a template to jumpstart the process of adding an image to a post. Therefore, each time we want to add an actual image to a post using these layout blocks, we will need to first convert it to a regular block before adding the image and caption to the layout.

Here’s how to do it.

Step 1: Add the Reusable Layout Block

Add one of the Reusable Divi Image Layout Blocks to the post.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-34 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Step 2: Convert it to a Regular Block

The open the “More Options” menu and select “Convert to Regular Block”.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-21 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Step 3: Edit the Layout Block with a new Image and Caption

Once the block is regular, click to edit the layout.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-22 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Update the layout with an image of your choice.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-35 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Then update the caption text within the text module.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-36 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Step 4: Save the Layout Block

Once finished, save and exit the layout editor.

how-to-build-reusable-image-layout-blocks-for-adding-divi-styled-images-to-gutenberg-posts-37 How to Build Reusable Image Layout Blocks for Adding Divi-Styled Images to Gutenberg Posts

Continue this same process to add the other two image layouts to the post.

Final Result

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

Final Thoughts

Once we get the hang of using the Divi layout block, it becomes obvious just how valuable it can be to the life of our blog. In this post, we covered how to use the layout block to add some pretty cool Divi-styled images to a Gutenberg blog post. The trick is to save the layouts as a reusable block first. Then when we are ready to add images to a blog post, we can easily convert the reusable block into a regular block so that we can add our image and caption.

Hopefully, this will provide some inspiration to take your blog images to a whole new level.

I look forward to hearing from you in the comments.

Cheers!


Source

eHost managed wordpress hosting



We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.