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.
▶️ Please watch the video above to get all the exciting details! 👆
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about 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: "\24";
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!
Is there another option in terms of the icon source, as when you disable WordPress emojis in Divi performance options, it breaks the icon and defaults to a $.
Hi Nick,
I guess right now the setting is on and that is why I am not able to spot the issue on your website. This is strange because in the code the icon that is being used is a Divi icon and not related to WordPress emojis at all. Could you please disable the WordPress Emojis setting again and let us know so that I can analyze why the icons are breaking?
Just to add to this, i have been chatting with the divi team and they said that a conflict has been caused with the new update and the dynamic icons option in the performance tab. turning it off fixes it for now.
Hi Hemant, I had another go enabling the WordPress emojis and it’s working ok now, it may have been a clash with a caching plugin at the time.
Having said all that, the latest Divi Icons update has broken the CSS it seems, the same issue has come back with the icon displaying as the $.
I added the icon from the new pack onto a page and see it comes up as the $ in the code in inspect, I replaced the \24 with “$”. which then displays ok in the visual editor but not on the live page, any ideas?
For now, I have rolled back the update.
Hey Nick,
As you rolled back the update so I am not able to see the issue happening on the URL provided and also you have not mentioned what version you have rolled back to. So what I think that issue might be happening due to the Performance Tab options, so please try disabling them and see if the issue goes or not.
Let me know how it goes.
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.
Thanks Nelson for your prompt reply. That would be great, looking forward to learning more from you regarding such tutorials as what I describe seems to be a fairly common interaction that I’m seeing across many websites, especially when the designers have to efficiently present a lot of info in a limited space. The trick is to make it responsive so it looks great both on desktop and mobile. Thanks again, your tutorials and supporting info are awesome!
I’m really happy to hear that Mark!
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. 🙂