Clickable Blurb Module in Divi Theme



Posted by George Nicolaou

On 2 Sep, 2017

If you define an URL in Blurbs Module general settings tab, like this:

The part of the Blurb, which actually’s going to be clickable is an icon and the title.

But I like my blurbs to be clickable as a whole. So how can we do it?

How to make it clickable?

There is an easy javascript (jQuery) method. We don’t want all the blurbs to behave this way, so we need to add custom class, which we can than target with js. Lets add a custom class blurb_click to modules “Custom CSS” tab.

Than we need this piece of code:

<script type="text/javascript>
jQuery(document).ready(function($) {
$(".blurb_click").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
</script>

Add this code to the <body> element in Theme Options (Integration tab).

Opening link in new tab

If you want your links to open in separate tab, just change the class to <strong>blurb_click_newtab</strong> and use the code below:

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".blurb_click_newtab").click(function() {
var blurbLink = $(this).find("a");
blurbLink.attr("target", "_blank");
window.open(blurbLink.attr("href"));
return false;
});
});
</script>

The script we’ve added basically just looks for a link inside a div and applies that links href attribute to click function. It’s better not to have any other links in a description field of the Blurb Module