Code by Day | Explore By Weekend

How To Add A Clickable Icon Button To A Divi Blurb Module Tutorial by Pee Aye Creative

How To Add A Clickable Icon Button To A Divi Blurb Module

In this tutorial you will learn how to create a fun and attractive clickable Divi Blurb module using an icon as a button.

Adjust Divi Blurb Module Design Settings

You can design and customize the style of your Divi Blurb however you want. The example style I am using is simply based on the inspiration site I mentioned, but by all means do your own thing. We actually use a very similar type of blurb on our website home page, so go check that out if you never saw it. On that example, we had a border and changed the background and text colors on hover. The most important part to match what I have is to adjust the padding like so:

  • Padding Top: 30px
  • Padding Bottom: 75px
  • Padding Left/Right: 25px

Add An Arrow Icon Button And Hover Effect To The Divi Blurb

The icon is the highlight of this tutorial, so let’s get that added. We will also be added some other effects to the Blurb, and so the entire CSS snippet is needed. For the icon, we will be using the simple right direction arrow that comes with the ETModules font family which is built into Divi. This is really handy having the icon already loaded, we just need to position it and tell it how to look and act.

So now it’s time to add the CSS, which adds some of the remaining effects that were not possible with existing Divi settings. Open the Divi Blurb module settings and go to the Advanced tab to the Custom CSS IDs & Classes toggle and add a custom CSS class called “pa-blurb-icon-button.” This way the CSS snippet below will only affect blurb modules with that class. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*add a transition effect*/

.pa-blurb-icon-button {
	transition: box-shadow .2s ease-in-out;
}


/*add an arrow icon in the bottom right corner*/

.pa-blurb-icon-button:after {
	font-family: ETModules;
	content: "";
	font-size: 36px;
	color: #1a73e8;
	position: absolute;
	bottom: 26px;
	right: 25px;
	transition: all .2s ease;
}


/*add the box shadow on hover*/

.pa-blurb-icon-button:hover {
	box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
	transition: box-shadow .2s ease-in-out;
}


/*adjust the icon on hover*/

.pa-blurb-icon-button:hover:after {
	color: #174ea6;
	bottom: 30px;
	transition: all .2s ease;
}

Let’s take a look at what we have just added. The first part of the code simply adds the transition effect, which makes a nice smooth hover effect.

The next snippet is the actual icon, and we have code to define the icon, the color, position, and transition.

Next is the hover effect for the entire blurb. The reason we do this is because the box shadow settings in the Divi Blurb module are missing the hover effects. So that’s why we need to add the box shadow with CSS instead.

The last snippet changes the color and position of the icon when you hover over any part of the blurb. The inspiration blurbs on the Google Workspace site do not have the icon move, but I like this effect.

Be sure to watch the video to see all of the CSS and design settings in action with better explanations than are possible here in writing. Let me know in the comments if you enjoyed this and will be using this type of Divi Blurb effect on your site!

15
Last updated Apr 7, 2021 @ 8:16 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

Leave A Response!

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Staff DiviLab
1 month ago

Hello and thank you for the many insights provided with your tutorials.
I wanted to point out a small error in the code:

content: “24”;

I think the right code is this one:
content:”\24″;

In this way I have the desired result and suggested in your tutorial.
Congratulations again!

Hemant Gaba
Hemant Gaba
Reply to  Staff DiviLab
1 month ago

Oh yes, the slash got missed in the code. Thank you for your feedback. 🙂

Mark
Mark
8 days ago

You mentioned that you could have the clickable blurb(s) link to another page on your website, however, I would like it to reveal a text or other blurb module on the SAME page. Specifically, I would like to stack 2-4 clickable blurbs vertically in the left column, and when you click each blurb it reveals a corresponding text or blurb in the right column… essentially it looks/acts like a vertical “tabbed” interaction. As a result, do you have any instructions for how to link a clickable blurb to reveal a module on the same page?

Asset 7

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 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart