Code by Day | Explore By Weekend

Google Style Divi Blurbs #1

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.

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.

/*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;
}
8
Last updated Jan 3, 2021 @ 1:18 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Greg
27 days ago

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

Greg

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.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart