How to Make the Whole Divi Blurb Module Clickable

Updated for Divi 5: You don't need any code to make a whole Blurb clickable anymore: the Module Link URL setting does it, and I tested it in Divi 5.18. The same setting exists in Divi 4. The original jQuery method still works in Divi 5 too, so I kept it below for anyone who prefers it.

How does the Blurb Module link work?

The Title Link URL in the Blurb settings (Content → Link) links only the image or icon and the title, not the whole Blurb. The description and the empty space around it are not clickable.

You can see it on the demo page I've set up.

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

How to make the whole Blurb clickable in Divi 5 (no code)

Fill in the Module Link URL field in the Blurb settings: Content → Link → Module Link URL. Divi then makes the entire Blurb clickable, including the description and the padding, and Module Link Target lets you open the link in a new tab.

1. Open the Blurb settings and go to Content → Link.
2. Paste your link into Module Link URL.
3. If the link should open in a new tab, change Module Link Target.
4. Keep the same URL in Title Link URL too, so the title and the rest of the Blurb lead to the same page.

In my Divi 5 test, a click on the description opened the Module Link URL and the mouse cursor turned into a hand over the whole Blurb, without any extra CSS. The same fields are in Divi 4 (Content → Link).

One thing to know: Divi opens the module link with JavaScript, so it isn't a real link that keyboard users can tab to. That's another good reason to keep the Title Link URL filled in.

How to make the Blurb clickable with jQuery

If you prefer code, for example because many of your Blurbs already have a Title Link URL, a few lines of jQuery can make the whole Blurb follow the link that is already inside it. This is the original method from this post, and it still works in Divi 5.

We don't want all the blurbs to behave this way, so we need to add a custom class, which we can then target with JavaScript. Let's add a custom class blurb_click to the Blurb module. In Divi 5: Advanced → Attributes → Add Attribute → CSS Class; in Divi 4: Advanced → CSS ID & Classes.

Then 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> in Divi → Theme Options → Integration (turn on "Enable body code" and paste it into "Add code to the < body >").

In Divi 5, jQuery is loaded in the footer by default. The code still works, because it is wrapped in jQuery(document).ready(): Divi runs it once jQuery has loaded. You can read more about this in my guide on how to add JavaScript and jQuery code to Divi.

Opening the link in a new tab

If you want your links to open in a 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 the Blurb and applies that link's href attribute to the click function. It's better not to have any other links in the description field of the Blurb Module, because the script uses the first link it finds.

Show the hand cursor

You'll probably want the hand cursor to appear when the mouse hovers over the blurb. To do this, add this bit of CSS (Divi → Theme Options → General → Custom CSS):

.blurb_click:hover {cursor: pointer;}

See demo page »