Clickable Blurb Module in Divi Theme

Posted by George Nicolaou

On 2 Sep, 2017
George Nicolaou - Senior Web Developer

If you define an URL in Blurbs Module general settings tab, like this:Divi Developer Cyprus - George Nicolaou - Clickable Blurb Module in Divi Theme 1

 

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

Divi Developer Cyprus - George Nicolaou - Clickable Blurb Module in Divi Theme 3

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.

Divi Developer Cyprus - George Nicolaou - Clickable Blurb Module in Divi Theme 5

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).
Divi Developer Cyprus - George Nicolaou - Clickable Blurb Module in Divi Theme 7

 

 

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

UPDATE: You’ll probably want hand cursor to appear when mouse hovers over blurb. To do this you’ll have to add this bit of CSS.

.blurb_click:hover {cursor: pointer;}

0 Comments

Submit a Comment

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

Pin It on Pinterest

Share This
Divi Theme Code SnippetsClickable Blurb Module in Divi Theme