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

[@KathrynEngland]

Thanks!

[@narayanbiswas2078]

Thanks man ❤❤❤ Love From Bangladesh ❤

[@PeeAyeCreative]

You're welcome!

[@alejandro12692]

Very helpful man thanks

[@PeeAyeCreative]

Glad it helped!

[@caseytruman9782]

Thank you for the tutorial.
do you have a tutorial on adding two clickable buttons within the blurb module?

[@PeeAyeCreative]

I do have one about adding a button, and you could use that to add two with the same method.

[@aniketjoshi7518]

This is cool. Can I add customised button in blurb, like 'read more or click here'.
And can you create video on how you did that copy to clipboard button in your blog.
Thanks man 👍🤘

[@PeeAyeCreative]

Yes I have another one scheduled for a regular buttim in the Blurb content. The copy to clipboard is a specific customization to the code snippet module that I am using, so it would not be relevant unless that is used.

[@aniketjoshi7518]

@@PeeAyeCreative hey man thank you, you are really life saver. 🤘👍

[@selectanimation]

Thanks, for the nice tutorial. (y)
Can you please help to add active or focus function instant of hover...
Actually, I would like to make something when the user clicks on the blurb then it should change the color of icon(arrow).

[@hemantgaba5815]

First please go to the Blurb Module Settings > Advanced > CSS ID & Classes and give a custom class to the blurb. For example, the custom class that you have given is pa-blurb.
After that go to the Divi > Theme Options > Integrations and place the code given below in the panel:
jQuery(document).ready(function(){
jQuery(".pa-blurb").each(function(){
jQuery(this).on("click", function(){
jQuery(this).find(".et-pb-icon").css("color", "#F9E843");
});
})
});
You can change the color code in the above code to get your desired color when someone clicks the blurb. One thing to note here is this color change will only stay if the page is not refreshed and if the page is refreshed after changing the color then the changed color will get back to the default color.

[@PeeAyeCreative]

You can always use "active" instead of "hover" at any point.

[@chiefkibitzer9419]

👍👍

[@PeeAyeCreative]

👍👍