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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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: "\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!

Last updated Aug 31, 2021 @ 10:59 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

11 Comments

  1. Staff DiviLab

    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!

    Reply
    • Hemant Gaba

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

      Reply
  2. Mark

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • Mark

        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!

  3. nick

    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 $.

    Reply
    • Hemant Gaba

      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?

      Reply
      • nick

        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.

      • Hemant Gaba

        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.

      • nick

        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.

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart