Google Style Clickable 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.

/*PEE-AYE CREATIVE BLOG – GOOGLE STYLE BLURBS #1
—————————————————*/

/*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: “\24”;
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;
}

/*VISIT PEEAYECREATIVE.COM FOR MORE DIVI RESOURCES
—————————————————*/

Please share this post!

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.

You Earned A Reward

For a limited time, we are offering our best blog readers a random CRAZY big 20% off coupon to use on any of our child themes! Just subscribe and we'll send you the code!

Nice, we're sending you the code now!

0

Your Cart