How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

February 11, 2020

The Divi Layout Block continues to be a useful ugrade to the Divi Theme, allowing us to add any Divi Layout to a blog post within the Gutenberg editor. We can even convert a Divi Layout Block into a reusable block in Gutenberg just like any other WordPress block. This opens the door for streamlining some helpful Divi Layout designs into the normal flow of writing a post in Gutenberg.

In this tutorial, we are going to demonstrate how to create a reusable Divi Layout Block for Gutenberg blog posts. To illustrate this, we will build a section divider for our example reusable Divi layout block for this post. But, we can easily apply this same technique to create a reusable Divi layout block for just about anything from the Divi builder.

Let’s get started.

Creating a Divi Layout Block for a Gutenberg Blog Post

Create or Edit a Blog Post

To start, we need to create a new blog post or edit an existing one. For this example, let’s add some mock content to the post title and body using a few Heading and Paragraph Blocks. Then add a featured image and choose “No Sidebar” for the Page Layout under the Divi Page Settings.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Add Inline Divi Layout Block

Once we have the bulk of the post created, all we need to do is add a new Divi Layout Block anywhere we want within the post content area.

To add it, hover over the area we want to add the email optin. Then click the blue plus icon to add a new block. In the popup block list, select the Divi Layout block.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-1 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Build New Layout Within the Divi Layout Block

Once the Divi Layout Block has been selected, we will have the option to either “Build New Layout” or “Load from Library”. Since we need to build a new divider for our example, choose the option, “Build New Layout”.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-2 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Design a Layout Using the Divi Layout Block Editor

Once we select the Build New Layout button, we can design our Divi layout inside the layout block editor.

For this example, we will build a custom separator or divider using Divi’s section shape dividers and a gradient background. This is strickly a design element that we will be able to turn into a reusable layout block for a convenient way to add section dividers within a Gutenberg post.

To create the section divider design, open the section settings and update the following:

  • Gradient Background Left Color: #ddd6f3
  • Gradient Background Right Color: #faaca8
  • Gradient Direction: 90deg
  • Start Position: 30%

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-3 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

  • Top Divider Style: see screenshot
  • Top Divider Color: #ffffff
  • Top Divider Height: 50px

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-4 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

  • Bottom Divider Style: see screenshot
  • Bottom Divider Color: #ffffff
  • Bottom Divider Height: 50px
  • Bottom Divider Flip: Horizontal

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-5 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

  • Height: 100px
  • Padding: 0px top, 0px bottom

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-6 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Once the design is complete, make sure to save the Divi layout block.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-7 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Now the Divi Layout Block section divider will show up inside the WordPress post editor.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-8 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Bear in mind that the spacing above and below the Divi layout of the layout block might be appear greater on the backend than on the frontend.

Now we are ready to convert this Divi layout block into a reusable layout block in order to make it easy to add this same section divider in future posts.

But before we do that, it may help to know what a reusable block is in WordPress.

What is a Reusable Layout Block

A reusable layout block in WordPress’ default Block Editor (Gutenberg) is a lot like a global element in Divi. The block can be used multiple times but the content and appearance stays exactly the same for all instances. And when we edit the reusable layout block, the change is applied to all instances of the layout block sitewide. Once a layout block is made reusable in WordPress, the block will be available in the list of blocks when writing the post. This makes it really convenient to add the same layout block multiple times throughout multiple blog posts.

Turning the Divi Layout Block into a Reusable Layout Block

To make our Divi Layout Block a reusable block, hover over the layout block and open the settings menu by clicking the three-dots icon. Then from the list, select the option, “Add to Reusable Blocks”.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-9 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Then give the reusable block a name and click the save button to save the block as as a reusable block.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-10 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Now when we add a new block inside the blog post, we can find our new reusable layout block within the list (under the Reusable category toggle). Simple click the reusable layout block and it will be added to the post.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-11 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Now if we look on the live post, we can see two instances of the same exact section divider.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-12 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Once we use the reusable block multiple times throughout the post or site, we can edit one of the instances of the reusable layout block and those changes will be applied to all of the instances of the block sitewide.

To edit the reusable layout block, hover over the block and click the edit button at the top right of the block.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-13 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Then select (click on) the layout within the reusable block and click the edit icon in the top menu that appears. We can also click the edit layout link under the block tab in the right sidebar.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-14 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Then change the design of the layout however we want. For this example, we can change the colors used for the gradient background.

After saving the layout, make sure to click the save button at the top right of the reusable layout block. Then update the post and view the changes on the live site.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-15 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

You will notice the design changes are updated for all instances of the reusable layout.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-16 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Tip: Using a Reusable Layout Block as a Template

There are times when we want to use a modified version of the reusable layout block on our post. This allows us to add a reusable layout block to the post as a starting template so we can customize the layout block for a specific instance without affected the reusable block sitewide.

To use a reusable layout block as a template, first add the reusable block to the post.

Then open the block menu and select the option, “convert to regular block”.

how-to-create-a-reusable-divi-layout-block-for-gutenburg-blog-posts-17 How to Create a Reusable Divi Layout Block for Gutenburg Blog Posts

Now we can edit the layout for a specific design for this instance without affecting the other reusable blocks.

Final Thoughts

Creating reusable Divi Layout Blocks can be helpful, especially for Divi design elements like a section divider. This allows us to use the divider repeatedly throughout our posts. Not only does it streamline the process of writing a post, but it also gives us the power to update the design of the block sitewide much easier. In this post, we showed how to add a section divider as a reusable block, but this same technique can be used to create endless reusable Divi layout blocks for countless other reasons.

Can you identify useful ways to incorporate reusable Divi Layout Blocks into your own blog posts?

I look forward to hearing from you in the comments.

Cheers!


Source

Share this article:
 

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:

Related Posts

How to Stack and Animate Text using Divi Scroll Effects

How to Stack and Animate Text using Divi Scroll Effects

Using Divi’s scroll effects to stack and animate text on scroll is a unique design technique that can be used to bring life to your page headings. The trick is to use Divi’s position options to stack letters absolutely so that they sit directly on top of each other....

How to Hire a Virtual Assistant for Your Business

How to Hire a Virtual Assistant for Your Business

Busy professionals can always use more hours in their day, and deciding to hire a virtual assistant (VA) is one of the best and most recommended ways to create that time. VAs provide just about every type of support service you can think of that can be performed...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

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.