Wrap Divi Blurb Module in Link

If the Divi Blurb module has a link assigned, find it and move it, so it wraps the entire Blurb content.

by Jon Fuller

HTML

<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_blurb_5 et_pb_blurb_position_top">
	<div class="et_pb_blurb_content">
		<div class="et_pb_main_blurb_image"><a href="#test"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated" style="color: #0c71c3;">X</span></a></div>
		<div class="et_pb_blurb_container">
			<h4><a href="#test">Blurb with Icon and Link</a></h4>

			<p style="text-align: center;">Blurb content text would go right here if you had some.</p>

		</div>
	</div> <!-- .et_pb_blurb_content -->
</div>

<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_blurb_5 et_pb_blurb_position_top">
	<div class="et_pb_blurb_content">
		<div class="et_pb_main_blurb_image"><a href="#tester2"><img src="https://hub.freshysites.com/wp-content/uploads/2017/08/FS-Hub.svg"></a></div>
		<div class="et_pb_blurb_container">
			<h4><a href="#tester2">Blurb with Image and Link</a></h4>

			<p style="text-align: center;">Blurb content text would go right here if you had some.</p>

		</div>
	</div> <!-- .et_pb_blurb_content -->
</div>

<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_blurb_5 et_pb_blurb_position_top">
	<div class="et_pb_blurb_content">
		<div class="et_pb_blurb_container">
			<h4><a href="#test3">Blurb with Link, but NO Icon/Image</a></h4>

<p style="text-align: center;">Blurb content text (<strong><a href="#0">THIS IS A CONTENT LINK</a></strong>) would go right here if you had some.</p>

		</div>
	</div> <!-- .et_pb_blurb_content -->
</div>

<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_blurb_5 et_pb_blurb_position_top">
	<div class="et_pb_blurb_content">
		<div class="et_pb_main_blurb_image"><a href="#test4"><img src="https://hub.freshysites.com/wp-content/uploads/2017/08/FS-Hub.svg"></a></div>
		<div class="et_pb_blurb_container">

			<p style="text-align: center;">This is a blurb with...

CSS

a { color: red; }
img { width: 100px; margin-left: auto; margin-right: auto; }
.et_pb_blurb { text-align: center; background-color: yellow; }
/* you should add this CSS (below) to your theme */
.et_pb_blurb > a { color: inherit; }

JavaScript

jQuery(function($){
	// If a Divi Blurb module has a link around the blurb image or the blurb title, then move the link so it wraps the entire blurb
    $('.et_pb_blurb').each(function() {
		var blurb_content = $('.et_pb_blurb_content', this);
		var blurb_image_link = $('.et_pb_blurb_content .et_pb_main_blurb_image a', this);
		var blurb_title_link = $('.et_pb_blurb_content .et_pb_blurb_container h4 a', this);
		// if blurb has an image link and a title link, unwrap both links, and then wrap the image link around the entire content
		if ( $(blurb_image_link).length && $(blurb_title_link).length ) {
			blurb_image_link.contents().unwrap();
			blurb_title_link.contents().unwrap();
			blurb_content.wrap(blurb_image_link);
		}
		// otherwise, if blurb has only an image link, unwrap it, and then wrap it around the entire content
		else if ( $(blurb_image_link).length ) {
			blurb_image_link.contents().unwrap();
			blurb_content.wrap(blurb_image_link);
		}
		// otherwise, if blurb has only a title link, unwrap it, and then wrap it around the entire content
		else if ( $(blurb_title_link).length ) {
			blurb_title_link.contents().unwrap();
			blurb_content.wrap(blurb_title_link);
		}
    });
});