Clickable Blurb Module in Divi Theme

How does the Blurb Module work?

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

scrren§

The part of the Blurb, which actually’s going to be clickable is an icon and the title. You can see it on the demo page I’ve set up.

scrren3

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.

scrren2

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

scrren4

Opening link in new tab

If you want your links to open in separate tab, just change the class to blurb_click_newtab 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 atribute 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;}

See demo page » 

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen