How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Feb 10, 2020 | Everything Divi for WordPress




Creating valuable blog posts takes time and effort. Besides finding the best topics to write about in your niche, it’s also important to keep readers engaged and allow them to find the information they’re looking for quickly. Now, a good way to approach this kind of user experience is by sharing a visual summary box at the end of your blog post, right before the final thoughts. With Divi’s new layout blocks, you can now effortlessly create a summary box with Divi’s built-in options. In this tutorial, we’ll guide you through the process and you’ll be able to download the layout’s JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Mobile

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Download The Summary Box Divi Layout Block for FREE

To lay your hands on the free hero summary box Divi layout block, you will first need to download it 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!

Importing The Layout Block JSON

Upload Layout to Divi Library

To import the JSON file you were able to download above, go to your Divi Library in the backend of your WordPress dashboard and click on ‘Import & Export’.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Then, select the JSON file inside your download folder and click on ‘Import Divi Builder Layouts’.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-1 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add New Divi Block Block Inside Gutenberg Post

Once your layout has been imported, you can go to your Gutenberg post and add a new Divi layout block.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-2 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Import JSON File From Saved Layouts

Then, click on ‘Load From Library’, navigate to ‘Your Saved Layouts’ and select the layout to import the summary box to your blog post. That’s it!

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-3 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-4 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Let’s Start Recreating!

Use Sixth Theme Builder Pack Post Template

Download Sixth Theme Builder Pack

The summary box we’ll recreate throughout this tutorial matches the sixth free theme builder pack’s post template perfectly. Go to the blog post and download the entire pack.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-5 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Go to Divi Theme Builder

Then, go to the Divi Theme Builder.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-6 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Upload Post Template

Click on the icon in the top right corner and upload the theme builder pack’s post template. Make sure you change all theme builder changes afterward.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-7 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Open Existing Gutenberg Post or Create New One

Now, once you’ve added the matching post template, it’s time to create the summary box. Open or create a new post using Gutenberg.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-8 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add Summary H2 Title

Near the ending of the blog post, we’ll add a new H2 title.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-9 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add New Inline Divi Block

Then, we’ll add a new Divi layout block.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-10 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Build New Layout Inside Divi Block

Once you’ve added the block, you’ll get two options. Choose to build a new layout.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-11 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Section Settings

Background Color

Inside the Divi layout block editor, you’ll notice a section. Open that section and use a white background for it.

  • Background Color: #FFFFFF

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-12 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Spacing

Move on to the section’s design tab and add some custom margin and padding values.

  • Top Margin: 100px
  • Left Margin: -10% (Desktop), 0% (Tablet & Phone)
  • Right Margin: -10% (Desktop), 0% (Tablet & Phone)
  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-13 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Border

Add some border radius too.

  • Bottom Left: 16px
  • Bottom Right: 16px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-14 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Box Shadow

Along with a subtle box shadow.

  • Box Shadow Blur Strength: 60px
  • Box Shadow Spread Strength: 10px
  • Shadow Color: rgba(0,0,0,0.08)

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-15 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-16 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire section container’s width.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-17 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Spacing

Remove the row’s default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-18 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Column 1 Settings

Background Color

Next, open the column 1 settings and use a white background color for it.

  • Background Color: #FFFFFF

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-19 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Spacing

Add some custom padding values too.

  • Top Padding: 70px
  • Bottom Padding: 70px
  • Left Padding: 70px
  • Right Padding: 70px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-20 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Box Shadow

Continue by adding a subtle box shadow with a different default and hover shadow color.

  • Box Shadow Blur Strength: 50px
  • Default Shadow Color: rgba(0,0,0,0)
  • Hover Shadow Color: rgba(0,0,0,0.15)

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-21 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Hover Transform Scale

On hover, we slightly want to scale the column as well.

  • Right: 105%
  • Bottom: 105%

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-22 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Hover Z Index

Complete the column settings by adding a hover z index.

  • Hover Z Index: 11

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-23 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add Text Module #1 to Column

Add Number to Content Box

Time to add modules, starting with a first Text Module. Add a number to the content box.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-24 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Gradient Background

Then, add a gradient background.

  • Color 1: #ff5e92
  • Color 2: #ffd4b6
  • Gradient Direction: 165deg

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-25 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Text Settings

Move on to the module’s design tab and modify the text settings as follows:

  • Text Font: Poppins
  • Text Color: #ffffff
  • Text Size: 26px
  • Text Alignment: Center

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-26 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Sizing

Assign a width and height next.

  • Width: 150px
  • Height: 150px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-27 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Border

Add some border radius too.

  • Bottom Left, Top Right & Bottom Right: 100px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-28 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Main Element CSS

To center the text in our container, we’ll need to add a few lines of CSS code to the module’s main element in the advanced tab.

display: flex; align-items: center; justify-content: center;

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-29 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Position

And we’ll complete the module settings by repositioning the module.

  • Position: Absolute
  • Location: Top Left

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-30 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add Text Module #2 to Column

Add H3 Content

On to the next Text Module. Add some H3 content of your choice.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-31 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

H3 Text Settings

Change the module’s H3 text size next.

  • Heading 3 Text Size: 23px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-32 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Spacing

Modify the spacing settings too.

  • Top Margin: 100px
  • Bottom Margin: 20px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-33 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add Divider Module to Column

Visibility

The next module we need is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-34 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Line Settings

Move on to the module’s design tab and change the line settings as follows:

  • Line Color: #ff5e92
  • Line Style: Solid
  • Line Position: Top

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-35 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Sizing

Modify the module’s sizing too.

  • Divider Weight: 2px
  • Width: 20%

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-36 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Add Text Module #3 to Column

Add Content

On to the next and last Text Module. Add some content of your choice.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-37 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Clone Column

Once you’ve completed the column and all its modules, you can clone the entire column.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-38 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Default Box Shadow Color

Open the column 2 settings and change the default shadow color.

  • Shadow Color: rgba(0,0,0,0.06)

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-39 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Text Module #1 Gradient Background

Open the first Text Module in column 2 next and change the gradient background.

  • Color 1: #7e5ce6
  • Color 2: #25b8ee

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-40 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Text Module #1 Border

Modify the module’s border settings too.

  • Top Left, Bottom Left & Bottom Right: 100px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-41 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Text Module #1 Position

And reposition the module in the advanced tab.

  • Loaction: Top Right

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-42 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Divider Color

Continue by opening the Divider Module settings. Change the line color to match it with the new color palette.

  • Line Color: #7e5ce6

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-43 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change All Content

Last but not least, change all module content in column 2.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-44 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Clone Entire Section Twice

Once you’ve completed the entire first section, you can clone it twice.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-45 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Spacing of First Duplicate Section

Open the first duplicate section’s settings and change the margin values accordingly:

  • Left Margin: -5% (Desktop), 0% (Tablet & Phone)
  • Right Margin: -5% (Desktop), 0% (Tablet & Phone)

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-46 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change Spacing of Second Duplicate Section

Open the second duplicate too, remove all margin values and add some bottom margin instead.

  • Bottom Margin: 100px

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-47 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Change All Content

Last but not least, change all module content.

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-48 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Save Layout to Divi Library for Reuse

If you’re planning to use this summary box inside other blog posts, make sure you save it to your Divi Library so you can easily access it! That’s it!

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post-49 How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Mobile

how-to-include-a-summary-box-divi-layout-block-in-your-gutenberg-post How to Include a Summary Box Divi Layout Block in Your Gutenberg Post

Final Thoughts

In this post, we’ve shown you how to add a summary box to your Gutenberg post with Divi’s new layout blocks. Summary boxes are a great and visual way to help your visitors find the information they are looking for. You were able to download the layout’s JSON file for free as well! If you have any questions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Source

WordPress Development

SEO NEWS

seo news

Domain Registration
GET YourName.com Today

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.