Clickable Blurb Module in Divi Theme

by | Divi Tutorials | 52 comments

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 » 

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

52 Comments

  1. Chus

    Hi Ania!

    First of all, thanks for the tip, it’s just what I was looking for… now, I tried to add that JS in the Theme Options and nothing happens (at least on the latest version, Divi 3.0.2), so I’m looking at the code on your sample page and I can see that you’ve a link to a JS file (skrypty.js) wich includes the blurb_click function… it’s a little bit confusing, at least for a newbie like me 🙂

    Reply
    • Ania Romańska

      Hi Chus. I’m running Divi 3.0.2 here also and the code works. It’s not that important where exactly you put this script as long as its visible on the page.. I had it in custom .js file from my child theme just to make things easier for me to access. You can put the code in the “Code Module” in Divi Builder on the page where the blurbs are, but it should work from the “Integration Tab” in Divi Theme Options as well.

      I’m not sure why it doesn’t work for you – you can email me at hello[at]divilover.com with link to the site you’re working on – so I can have a look and try to help 🙂

      Reply
  2. Jane

    Hi – Thanx so much for this tutorial. The script works in that you can click anywhere on the blurb and it will go to the URL.

    However, one weird thing is happening for me. My mouse cursor does not change to a hand until I reach the icon/heading text.

    Do you know why?
    Jane

    Reply
    • Ania

      Hi Jane,
      I’ve updated the article – it just needs one simple css rule to change mouse cursor.
      .blurb_click:hover {cursor: pointer;}

      Reply
      • Jaybee

        Thanks for this, I have a similar question. I’ve managed to get it work but the link url popup that appears at the bottom left of the browser when you hover over a link only works on the icon/title. Is there anyway of getting it to appear for the whole clickable area? Thanks

      • Ania

        It may be possible, but I’m not sure. Try googling jquery status bar change – it should get you started. Sorry I couldn’t be of more help.

  3. Karin

    Can’t get it done… I put everything in just as stated above. Nothing happens.

    🙁

    Reply
    • karin

      Yes. It works 🙂 Grazi mille

      Reply
  4. Jason

    hi I added this code to Custom CSS in Divi theme options
    .blurb_click:hover {cursor: pointer;}
    .blurb_click_newtab:hover {cursor: pointer;}

    it works… but that code displays below the footer at the front end of the website… any clues?

    Reply
    • Ania

      Hi Jason,

      It looks like you’ve added the code in the wrong place. It should go to Divi Theme Options -> General Tab (not Integration) -> Custom CSS at the bottom.

      Hope it helps 🙂

      Reply
      • Jason

        thanks so much for your awesome code…

        i’m still getting the code at the end of the footer…

        in custom CSS i have this

        jQuery(document).ready(function($) {
        $(“.blurb_click”).click(function() {
        window.location = $(this).find(“a”).attr(“href”);
        return false;
        });
        });

        .blurb_click:hover {cursor: pointer;}

        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;
        });
        });

        .blurb_click_newtab:hover {cursor: pointer;}

      • Ania

        The jQuery parts should go to Integration Tab and css part: .blurb_click:hover {cursor: pointer;} and .blurb_click_newtab:hover {cursor: pointer;} should go to custom css.

  5. Luka

    Hi Ania. Thank You so much for this tutorial it helped me a lot. I was wondering if you could tell me how to add animation to the transition? Right now when I click on the blurb icon by default it translates to part of the page that I linked to with a nice transition, but when I click on the background it just pops to that part of the page. I would like to add the same transition as the blurb icon has. I hope you understand what I’m asking. Thank you once again.

    Reply
    • Ania

      Hi Luka,
      Sorry, I’m not that good with javascript to make this kind of adjustment.

      Reply
  6. Tyrone

    Just wanted to say thank you. Worked perfectly.

    Reply
  7. RustyA

    Hi Ania:

    Thank you for this tutorial. I am trying to turn a CTA module into a clickable link. I used your code but changed it from blurb to cta. I was successful in creating the link, but it does not open to the location I have indicated. Do you have any suggestions?

    Thanks again.

    Reply
    • Ania

      Hi RustyA,

      If there is a link inside a CTA module (if you filled out the Button URL input) it should work even without the class name change. Can you share a link?

      Reply
      • Jovan

        It will work with CTA module, but you need to add some text to the button name, and then to add “display:none;” to the button css in the advanced tab .

  8. Zion

    Good post Ania, how possible is it to make the Blurb open in a pop-up window.

    Instead of opening in another tab or window. I’m wondering if you have more ideas to this

    Reply
  9. Cliff

    Great solution!

    Just a tip for anyone else who, like me, has a bunch blurbs and want them all to be clickable: rather than adding the class name to each blurb, you can add it to the row or container instead and have it apply to all of the blurbs inside.

    Just change the line of JS code to:
    $(“.blurb_click .et_pb_blurb”).click(function() {

    and the CSS to:
    .blurb_click .et_pb_blurb:hover {cursor: pointer;}

    Reply
    • Ania

      Thank you very much Cliff, I’m sure this will be useful to others 🙂

      Reply
  10. Michiel

    Hi there!

    Your post is amazing! Just what I was looking for (:

    I have one question, I would like to make a row clickable. I put the same CSSclass and everything and so far it works. But I haven’t ofcourse a place to put a link in, how can I add the link to wich the row links to?

    Thnx (:

    Reply
    • Ania

      Hi Michiel,

      You would need to add any link inside that row. It can be a link inside a text module, code module or any module with link (like blurb, image etc.)

      Reply
      • Michiel

        Thank you so much!! You can see the result at my website (:

  11. nicolas

    Hello,

    thank you for this tutorial !

    When i click on the mouse wheel button to open a new tab like on any other link, with this code, it runs the all scroll option like if i had clicked on a non-link element.

    How could we correct it please ?

    Thank you.

    Reply
    • Ania

      Hi Nicolas,
      Could you be more specific about your issue? Share an URL maybe? I’m not sure if I understand you correctly –
      when I click on the blurb with mouse wheel it opens in a new tab (same as it would with normal link).

      Reply
      • Nicolas

        Hello,

        actually when you click on the blurb but not on the icon or the linked text with the mouse wheel, it doesn’t open a new tab but activates the all scroll function.
        I tried on your demo to see if it was only on my website (in local so i can’t share an url) but it’s the same.

        Thank you.

      • Ania

        Yes, you are right, I see now. Unfortunately I won’t be of much help, as I don’t have a solution for this. You would need to use mousedown instead of click event, but I don’t know what the exact function should look like.

  12. Nicolas

    Ok thank you for your quick reply !

    Have a nice day !

    Reply
  13. Christian

    Thanks Ania,

    Is there a way to make this work for the testimonial module as well? I’d like to be able to click on the images and have a new tab open…

    Thank you!

    Reply
    • Ania Romańska

      Yes, this should work the same way with the Testimonial, but you need and url somewhere inside the module (like the website field or a text link inside the description).

      Reply
  14. Simon

    I don’t get it to work. When I click at the Blurb i only get the link undefined.

    Reply
    • Ania Romańska

      Did you enter a correct URL inside the Blurb settings?

      Reply
    • bo

      I have the same problem. It was working, but not anymore. I’m working local, so can’t show you but I add an url like this:
      /about/

      And it goes to /undefined

      So you don’t have this problem? I thought it might be caused by an update.

      Reply
      • Bo

        Me again, just discovered something. If there is a title in the title field it works in my case.
        When I moved the title inside the content area and let the title field empty, then it went to /undefined.

  15. Dominic

    Hi there, thanks so much for this! I’m noticing that if I click within the blurb but not the title, it doesn’t use the easing scroll function? Have you had this issue? Try some of these: https://neweve.enablewebdev.com/donate

    Reply
    • Ania Romańska

      Hi Dominic,
      If you want the Blurb to scroll to an anchor on the same page use a class blurb_anchor_click and this code:

      $(".blurb_anchor_click").each(function () {
      var anchorLink = $(this).find("a").attr("href");
      $(this).click(function() {
      $('html, body').animate({
      scrollTop: $(anchorLink).offset().top
      }, 1000);
      });
      });

      Reply
      • saki

        Hello Ania, thanks so much for sharing !
        It works for me but the ease in and out scroll as Dominic…
        Sorry (a bit newbie in javascript…), how mix the first code wich make the bloc clickable and this one to have the easing effect back in the scroll ?
        Thks in advance for your answer 🙂

      • Ania Romańska

        It is either the “scroll to” link or “open different page” link. The scroll link uses the JS from my comment and a custom class of blurb_anchor_click – you can add both pieces of JS and give your blurbs different class depending on what the link should do, or you can use just one of them. Hope this helps.

  16. saki

    The point is not to scroll to an anchor or open different page, sorry if I didn’t explain clearly my request.
    The point is we loose the ease-in and ease-out effect in the scroll if we click on the block and not the title as Dominic said and as you can see on his link https://neweve.enablewebdev.com/donate/

    If you click on the Title or icon of the second tile (named Check my Mail), you have a smooth scroll (and no # in the url), but if you click on the Blurb you have a fast scroll (and you see the anchor # in the url).

    So our question is, can we get back the smooth scroll effect ?

    Thanks again so much for your help

    Reply
    • Ania Romańska

      Like I said, with the blurb_anchor_click class you’ll have a smooth scroll. But I don’t think it is possible to remove the # from the url using this method.

      Reply
  17. Hassan

    Hi,
    Thank you for this wonderful tutorial. I followed your steps, however, when I click on any blurb it goes to undefined link. Not to the one I added in the blurb module settings.

    Please advise

    Reply
    • Ania Romańska

      Make sure you add some content to the title, as by default the link doesn’t work if there is no title set in the Blurb settings.

      Reply
      • Hassan

        That was quick!
        Thank you Ania. Adding a space to the title fixed the issue

  18. Jody Heath

    Hi, thanks for the tutorial. You know how when hovering over links, the status bar pops up the web address on the bottom of your screen? What code would I add to force the web address to also pop up in the status-bar on just hovering over the blurb module?

    Reply
    • Ania Romańska

      Hi Jody,

      It may be possible, but I’m not sure. Try googling jquery status bar change – it should get you started. Sorry I can’t be of more help.

      Reply
  19. Avi

    Hello Ania
    Thanks for this tutorial, it works fine on v3.2.2
    1. I have noticed that the link address does not show on Chrome/Edge lower part as a regular link, as the icon link, can this be fixed?
    2. How do I add another attribute to the code such as “title=” ?
    3. I have tried Cliff’s idea to use the code for a row, but it doesn’t work. I names the row class css, changes the code and css and nada.
    I also tried to use classes .et_pb_row_0.et_pb_row instead of what Cliff suggested, each and together, still no success.
    Will appreciate your help
    Thanks, Avi

    Reply
    • Ania Romańska

      1. It may be possible, but I’m not sure. Try googling jquery status bar change – it should get you started.
      2. Maybe something like blurbLink.attr(“title”, “Your Title”);
      3. Cliff’s suggestion was to use when you have multiple blurbs on one page and don’t want to add a CSS class to each one separately, but rather target each blurb inside a section or row.

      Reply
  20. Russell Smith

    Nice, this is exactly the quick fix I was looking for!

    I think the Divi blurbs should be fully clickable by default.

    Thanks for this!

    Reply
  21. Michiel van Hemel

    Hi!

    Thank you so much for the tutorial! There’s one problem appearing at my website: the mobile version turns completely white when I add the blurb_click to a module on the page. It works on the desktop version, but when I look at my phone, there isn’t a page. Do you know how to resolve this?

    Thank you

    Reply
  22. Hannah

    Thanks Ania, this works perfectly! I applied it to a CTA module where my client had asked for a clickable title and it worked like a charm 🙂

    Reply

Submit a Comment

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

Shares

Pin It on Pinterest