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

summary box

Mobile

summary box

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.

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

summary box

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

summary box

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.

summary box

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!

summary box

summary box

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.

summary box

Go to Divi Theme Builder

Then, go to the Divi Theme Builder.

summary box

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.

summary box

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.

summary box

Add Summary H2 Title

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

summary box

Add New Inline Divi Block

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

summary box

Build New Layout Inside Divi Block

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

summary box

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

summary box

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

summary box

Border

Add some border radius too.

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

summary box

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)

summary box

Add New Row

Column Structure

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

summary box

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%

summary box

Spacing

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

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

summary box

Column 1 Settings

Background Color

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

  • Background Color: #FFFFFF

summary box

Spacing

Add some custom padding values too.

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

summary box

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)

summary box

Hover Transform Scale

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

  • Right: 105%
  • Bottom: 105%

summary box

Hover Z Index

Complete the column settings by adding a hover z index.

  • Hover Z Index: 11

summary box

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.

summary box

Gradient Background

Then, add a gradient background.

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

summary box

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

summary box

Sizing

Assign a width and height next.

  • Width: 150px
  • Height: 150px

summary box

Border

Add some border radius too.

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

summary box

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;

summary box

Position

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

  • Position: Absolute
  • Location: Top Left

summary box

Add Text Module #2 to Column

Add H3 Content

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

summary box

H3 Text Settings

Change the module’s H3 text size next.

  • Heading 3 Text Size: 23px

summary box

Spacing

Modify the spacing settings too.

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

summary box

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

summary box

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

summary box

Sizing

Modify the module’s sizing too.

  • Divider Weight: 2px
  • Width: 20%

summary box

Add Text Module #3 to Column

Add Content

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

summary box

Clone Column

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

summary box

Change Default Box Shadow Color

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

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

summary box

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

summary box

Change Text Module #1 Border

Modify the module’s border settings too.

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

summary box

Change Text Module #1 Position

And reposition the module in the advanced tab.

  • Loaction: Top Right

summary box

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

summary box

Change All Content

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

summary box

Clone Entire Section Twice

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

summary box

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)

summary box

Change Spacing of Second Duplicate Section

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

  • Bottom Margin: 100px

summary box

Change All Content

Last but not least, change all module content.

summary box

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!

summary box

Preview

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

Desktop

summary box

Mobile

summary box

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.


LEAVE A REPLY

Please enter your comment!
Please enter your name here