In this Divi tutorial, I’m going to show you how to replicate some Google style clickable Divi blurbs as found on Google’s Gsuite pages. You are welcome to use the CSS snippets or download the free Divi Layout .json file.

Step 1

Add the section, rows, and modules

 

  • Add a standard section
  • Add a row with three 1/3 columns
  • Add a blurb module to each column

Step 2

Adjust the design settings

 

  • Change the section background color to #f2f2f2
  • Change each blurb background color to #ffffff
  • Add an image to each blurb

Step 3

Add the custom CSS code

 

Go to Divi>Theme Options>Custom CSS and add the following code and hit save.

Step 4

Add the custom Javascript code

 

Go to Divi>Theme Options>Integrations and look for the first code section called “Add code to the < head > of your blog”. Paste the following code into their and save.

The End

Enjoy your new design!

 

Please leave any comments below and be sure to subscribe. We have a lot of tutorials in progress to be posted, so by joining the list, we will email you when they come out.

Free Download

Download the .json Divi Layout!

 

Nelson Lee Miller

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, and building websites with Divi.

Pin It on Pinterest