How to add a clickable icon button to a Divi blurb module?

by | Nov 27, 2023 | Tips & Tricks, Tutorials | 0 comments

Join us in this tutorial as we will guide you through the process of incorporating an icon button into the Divi Blurb module. This simple addition serves as a clear indicator to users that the blurb is clickable. Together, we’ll make your Divi Blurb modules more engaging and user-friendly. Let’s dive in!

Step 1. Customize Design Settings for Divi Blurb Module

Unleash your creativity by designing and personalizing the style of your Divi Blurb just the way you like it. The power is in your hands to make it uniquely yours! If you prefer to adopt our approach, here are the design settings we suggest:

  • Padding Top: 40px
  • Padding Bottom: 80px
  • Padding Left/Right: 30px
Divi Blurb Module Design Settings

Divi Blurb Module Settings

Step 2: Enhance Your Divi Blurb with a Stylish Arrow Icon Button and Hover Effect!

Let’s talk about the main thing in this tutorial – the icon. We’ll show you how to add it, along with some other cool effects for your Blurb. And guess what? We’re using a simple right-direction arrow from the Divi ETModules font family. It’s like having an easy button for icons – it’s already there, ready for you to put it where you want and make it look just how you like!

Now Let’s Add the Custom CSS Code Snippet

Now, let’s bring in the CSS to give your Blurb those extra effects that the regular Divi settings couldn’t handle. Go to your Divi Blurb module settings, then head to the Advanced tab. In the Custom CSS IDs & Classes toggle, add a custom CSS class named ‘blurb-icon-button’.

The CSS code snippet gives your Blurb those extra effects that the regular Divi settings couldn't handle

Adding a Custom CSS Class to the Divi Blurb Module

This neat trick ensures that the CSS code we’ll use next will only impact the Blurb modules with that specific class. Ready to make your Blurb stand out? Let’s do it!

.blurb-icon-button {
    transition: box-shadow .2s ease-in-out;
}
/*add an arrow icon in the bottom right corner*/
.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*/
.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*/
.blurb-icon-button:hover:after {
    color: #174ea6;
    bottom: 30px;
    transition: all .2s ease;
}

Where To Paste The CSS Code

Paste the above code in your Divi>Theme Options>Custom CSS code box.

 By inserting CSS code in the Divi Dashboard, you can tailor the design and behavior of your website components to meet your specific preferences and requirements

Adding CSS code to the Divi Dashboard

Final Result

Adding a clickable icon button to the Divi Blurb module, enhance user interaction and engagement

Divi Blurb Module with a Clickable Icon Button

Conclusion:

In this tutorial, we’ve empowered you to add a clickable icon button to your Divi Blurb module, enhancing user interaction and engagement. By following the simple steps outlined above, you can not only customize the design settings of your Divi Blurb but also elevate it with a stylish arrow icon and a captivating hover effect.

To take your Blurb to the next level, we introduced a neat CSS trick, allowing you to seamlessly incorporate additional effects that standard Divi settings might miss. By adding a specific custom class, ‘blurb-icon-button,’ you gain control over the targeted application of CSS code.

The provided CSS snippets bring life to your Blurb with a transition effect, a right-direction arrow icon, and a subtle box shadow on hover. These touches not only enhance visual appeal but also serve as intuitive indicators for users.

Now, armed with this newfound knowledge, you’re ready to make your Divi Blurb modules stand out and leave a lasting impression on your website visitors. If you have any questions or want to share your experiences, feel free to drop a comment below.

Read More: How To Increase The Divi Blurb Content Width

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares