Inspiration
Gsuite Business Solutions Page
The inspiration for this tutorial comes form a page in Google’s Gsuite marketing website. You can take a look for yourself and see what you think. I thought some of you would enjoy creating this in Divi, so I have the CSS below or you can download the free layout and import it into the Divi Library on your website.
The icon arrow that Google uses is a little differnt, but since I wanted to make this as easy as possible I decided to use the arrow icon from ETMODULES, Divi’s built in icon font.
Your Title Goes Here
Your amazing content goes here. Edit or remove this text inline or in the module Content settings.
Your Title Goes Here
Your amazing content goes here. Edit or remove this text inline or in the module Content settings.
Step 1
Add the section, rows, and modules
- Add a standard section
- Add a row with your desired columns
- Add a blurb module to each column
Step 2
Adjust the design settings
- Add a section background color of #ffffff
- Change each blurb background color to #f6f6f6
- Add an icon to each blurb, use icon font size, and choose 64px
- Add the classes to the CSS tab>CSS Class:
pa-google-style-blurb1
Step 3
Add the custom CSS code
Go to Divi>Theme Options>Custom CSS and add the following code and save. This code adjusts the blurb font, heading, icon position, shadow and cursor on hover, and adds the arrow in the bottom right corner.
/*this styles the heading*/
.pa-google-style-blurb-1 h4 {
line-height: 30px;
color: #444;
font-family: 'Roboto',arial,sans-serif;
font-weight: 400;
margin: 0 0 20px;
}
/*this targets the blurb inner content*/
.pa-google-style-blurb-1 .et_pb_blurb_container {
padding: 20px 24px 48px;
color: #848484;
font-family: 'Roboto',arial,sans-serif;
font-weight: 400;
padding-bottom: 70px;
}
/*this positions the blurb icon*/
.pa-google-style-blurb-1 .et_pb_main_blurb_image {
display: flex;
width: 100%;
float: left;
padding-left: 30px;
padding-top: 30px;
}
/*this adds the arrow icon in the bottom right*/
.pa-google-style-blurb-1:after {
font-family: ETMODULEs;
content: "23";
font-size: 30px;
font-weight: 400;
color: #448aff;
position: absolute;
bottom: 26px;
right: 30px;
}
/*this adds the box shadow and mouse pointer on hover*/
.pa-google-style-blurb-1:hover {
box-shadow: 0 5px 10px rgba(0,0,0,.15);
cursor: pointer;
transition: box-shadow .2s ease-in-out;
}
/*this adds darker blue icon on hover*/
.pa-google-style-blurb-1:hover:after {
color: #2f68c6;
}
Hello,
I’m having trouble getting the arrow to show at the bottom of the blurb.
After I save my CSS Custom code it changes from content: “”; to content: “.”;
The square with a Question mark inside of it that you show above in your code changes to a dot within the quote marks after I click save.
As you can see the code I copied from your post changes it just to a square w/o the question mark.
Is there another value I can put for the content: ?
Thanks
Greg
Hi Greg,
The content should actually be “\23” and I fixed it in the snippet (Divi decided to strip all my \ slash marks in the code).
Thanks for the reply. The value ended up being 24. When I tried 23 the arrow was pointing to the left. So I thought I’d just try 24 and got lucky. Does Elegant Themes publish their Icon values in case I want to do something similar with a different icon? Thanks again.
Yes, you can find them all here: https://www.elegantthemes.com/blog/resources/elegant-icon-font