Divi block on Gutenberg

Divi block on Gutenberg: Creating valuable blog posts takes time and effort. Along with finding the best topics to write in your niche, it’s also important to keep readers engaged and allow them to quickly find the information they’re looking for.

Now a good way to approach this type of user experience is to share 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.

Divi block on Gutenberg

Divi block on Gutenberg: Use the post template from the sixth theme pack

Download Sixth Theme Builder Pack

The summary box that we will recreate throughout this tutorial is a perfect match for the post template for the sixth free theme builder pack. Go to the blog post and download the entire pack.

Go to Divi Theme Builder

Then go to the Divi Theme Builder.

Download the post template

Click the icon in the upper right corner and download the post template from the Theme Building Pack. Make sure to edit any changes to the theme builder afterward.

Open an existing Gutenberg post or create a new one

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

Add H2 title summary

Towards the end of the blog post, we’ll add a new H2 title.

Add a new Divi block online

Then we will add a new Divi layout block.

Create a new layout inside the Divi block on Gutenberg

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

Section Parameters

Background color

Inside the Divi layout-block editor, you will notice a section. Open this section and use a white background for it.

  • Background Color: #FFFFFF

Spacing

Switch to the section design tab and add custom margin and padding values.

  • Top margin: 100px
  • Left margin: -10% (office), 0% (tablet and phone)
  • Right margin: -10% (office), 0% (tablet and phone)
  • Top padding: 0px
  • Bottom padding: 0px

Frontier

Also add a border radius.

  • Bottom left: 16px
  • Bottom right: 16px

Shadowbox

With a subtle shadow of a box.

  • Box Shadow Blur Strength: 60px
  • Box shadow propagation force: 10px
  • Shadow color: rgba (0,0,0,0,08)

Add a new row

Column structure

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

Sizing

Without adding a module yet, open the row settings and let the row occupy the entire width of the section container.

  • Use custom gutter width: Yes
  • Gutter width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max width: 100%

Spacing

Then remove the default top and bottom padding from the row.

  • Top padding: 0px
  • Bottom padding: 0px

Column 1 settings

Background color

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

  • Background Color: #FFFFFF

Spacing

Also add custom padding values.

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

Shadow box

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)

Hover transformation ladder

On hover, we also want to scale the column slightly.

  • Right: 105%
  • Low: 105%

Hover Z Index

Complete the column parameters by adding a hover index z.

  • Z hover index: 11

Add text module # 1 to column

Add a number to the content area

It’s time to add modules, starting with a first text module. Add a number to the content area.

Gradient background

Then add a gradient background.

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

Text settings

Go to the module design tab and change the text settings as follows:

  • Text font: Poppins
  • Text color: #ffffff
  • Text size: 26px
  • Text alignment: center

Sizing

Then assign a width and height.

  • Width: 150 px
  • Height: 150px

Frontier

Also, add a border-radius.

  • Bottom left, top right, and bottom right: 100 pixels

Main CSS element

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

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

Position

And we will finish the module settings by repositioning the module.

  • Position: absolute
  • Location: top left

Add text module # 2 to column

Add H3 content

Let’s move on to the next text module. Add any H3 content of your choice.

H3 text parameters

Then change the size of the H3 text of the module.

  • Heading 3 Text Size: 23px

Spacing

Also, change the spacing settings.

  • Top margin: 100px
  • Bottom margin: 20px

Add a separation module to the column

Visibility

The next module we need is a separation module. Make sure the “Show Separator” option is enabled.

  • Show separator: Yes

Sizing

Also, change the sizing of the module.

  • Divider Weight: 2px
  • Width: 20%

Add text module # 3 to column

Add content

Let’s move on to the next and final text module. Add the content of your choice.

Read more: How to create segmented circular menu using Divi Blurbs

Cloning column

Once you have completed the column and all of its modules, you can clone the entire column.

Change the default box-shadow color

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

  • Shadow color: rgba (0,0,0,0,06)

Change the gradient background of text module # 1

Open the first text module in the next 2 columns and change the gradient background.

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

Change the border of text module # 1

Also, change the border settings of the module.

  • Top left, bottom left, and bottom right: 100 pixels

Change the position of text module n ° 1

And reposition the module in the advanced tab.

  • Location: top right

Change the color of the separator

Continue by opening the settings for the separation module. Change the color of the line to fit the new color scheme.

  • Line Color: # 7e5ce6

Change all content

Finally, edit all the content of the module in column 2.

Clone the entire section twice

Once you have completed the first section, you can clone it twice.

Change the spacing of the first duplicate section

Open the settings from the first duplicate section and change the margin values ​​accordingly:

  • Left margin: -5% (desktop computer), 0% (tablet and phone)
  • Right margin: -5% (office), 0% (tablet and phone)

Change the spacing of the second duplicate section

Also, open the second duplicate, remove all margin values, and add a bottom margin instead.

  • Bottom margin: 100px

Change all content

Finally, modify all the content of the module.

Save the layout in the Divi Library to reuse it

If you plan to use this summary box in other blog posts, be sure to save it to your Divi library so you can access it easily! That’s it!

Final thoughts for Divi block on Gutenberg

In this article, we have shown you how to add a summary box to your Gutenberg article with the new layout blocks from Divi. Summary boxes are a great visual way to help your visitors find the information they’re looking for.

 

For website maintenance service contact us.

Leave a comment

echo "";