A Fun Way To Make Blurbs Clickable
The inspiration for this tutorial comes from a page in Google’s Workspace website. We are basically copying the idea, and you can take a look for yourself so see what you think. I love showing you how versatile Divi can be, and I thought some of you would enjoy creating this. So in this tutorial I will show you how to add an icon button to the Divi Blurb module which perfectly indicates to the user that the blurb is clickable.
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!
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!
Oh yes, the slash got missed in the code. Thank you for your feedback. 🙂
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?
Hi Mark, I don’t have anything like that yet, it is not necessarily relevant to this one. We do plan to do some tutorials about clicking and showing and hiding other things.