Make a Complete Module Clickable (make a div a link)?

Is there anyway to make a whole module clickable (e.g. callout) including background color etc? I know that you can have a call to action button or link but I want to make the whole div a link. Also,

I want to make sure it is SEO friendly and clean code

1 Like

Hi David,

No, that isn’t possible with the BB module settings. Typically, if you set a link though in say the callout module, both the image and heading would be clickable which is pretty typical. Would you mind showing me a use case to where an entire column should be clickable? Totally game to take a look to see what we can do!

Best,
Billy

Hello,

I have a similar request. Just wondering if it’s possible to make an entire callout module linkable to a URL page (or the entire column)? I’ve created a NEWS page and added some custom CSS to the child theme to make each callout/column change colors on hover. Right now, only the header title is linkable. I’d like to make the entire callout box/ or column linkable.

http://www.itechfit.com/news/

please help,
Chris V

Hey Billy,

I’m very interested in this feature and am trying to make it work in the builder or with custom css on callout boxes.

I have two client requests now for clickable boxes with a hover function and image/colour background, like this site:

http://www.midkent.ac.uk/

Thanks Kat

Hey Chris/Kat,

Hang tight for a day, we’re going to provide some CSS and jQuery snippets to accomplish both of what you need! Back soon!

Best,
Billy

Oops, sorry David, this will apply for you as well to your original request! :slight_smile:

That’s great news!

BIG thank you Billy! You are brilliant!

Kat

FWIW, I’ve got a similar use case: http://mnvotesinfo.sos.state.mn.us/

In that one, it’s a hover overlay with text/links.

Interested to see what comes of this!

Hey guys,

Try this jQuery snippet. This should turn the entire callout module into a link. If you’re using the BB theme, just place this directly under Theme Customizer > Code > JS Code. You may need to apply additional styling since this will transform the texts to links.

jQuery(document).ready(function() {
  var callout_link = jQuery('.fl-callout').find('a').first().attr('href');
  jQuery('.fl-callout-content').each(function() {
    jQuery(this).wrapInner('<a></a>');
    jQuery('.fl-callout-content a').attr('href',callout_link);
  }); 
});

Let us know how it goes!

Ben

Sorry for my hasty reply, it seems it just gets the first link and applies it to all Callout modules. Checking for other solutions. :slight_smile:

Ben

Hey guys,

Here’s the correct code for making the entire Callout module a link. You still have to place a link under the Call to Action tab since that is where the link for the entire module will be based. Again, this snippet goes to the Javascript Code part.

jQuery(document).ready(function() {
  jQuery('.fl-callout').each(function() {
    var callout_link = jQuery(this).find('a').first().attr('href');
    jQuery(this).wrapInner('<a></a>');
    jQuery(this).find('a').first().attr('href',callout_link);
  }); 
});

You could also use the CSS snippet below to darken the image when you hover over the entire Callout module.

.fl-callout .fl-photo-content a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s;
}
.fl-callout:hover .fl-photo-content a:before {
  opacity: 1;
}

Let us know how it goes! :slight_smile:

Ben

[Content Hidden]

Hey Kat,

Since you’re applying a background color to the column itself, we could change the jQuery code to add the link to the entire column instead. You’ll need to add an additional class to each column you’ll want this to apply to. In the example below, the class added is home-boxes.

jQuery(document).ready(function() {
  jQuery('.home-boxes').each(function() {
    var callout_link = jQuery(this).find('a').first().attr('href');
    jQuery(this).wrapInner('<a></a>');
    jQuery(this).find('a').first().attr('href',callout_link);
  }); 
});

Here’s the CSS to remove the underline and change the background on hover.

.home-boxes a:hover {
  text-decoration: none;
}
.home-boxes:hover .fl-col-content {
  background: red;
}

Hope this helps!

Ben

Hi Ben

Sorry for the delay in getting back on this, but I can’t get it to work. I have entered the js above and the following css:

.home-boxes a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s;
}

.home-boxes:hover a:before {
  opacity: 1;
}

.home-boxes a:hover {
  text-decoration: none;
}

I removed the .fl-photo-content as the I don’t use a photo image for these boxes (see link above for what’s happening) and it seemed to work when applied to a callout box with an image (over the image only) but I was hoping to have the hover effect work on the column background and text for the blue callout boxes.

Thanks for any help if doable?

Kat

Hey Kat,

Try adding the class to the column instead of the module and see if it helps.

Ben

Hey Ben

Thanks for helping, I tried this and it has had no effect other than to add margins to all but the first callout box (take a look, it’s there now). Also when I removed the JS code from the customiser the effect was unchanged, the effect also renders the page builder column commands unresponsive so it’s not working for me. I know this is outside of bb ordinary help Ben so I’ll see if I can find a different solution.

Kat

Hey Kat,

Actually, since you’re applying the background on the column, try this instead. Place a class on the columns you want this to be applied to. For this example, the class used is col-link.

jQuery(document).ready(function() {
  jQuery('.col-link').each(function() {
    var callout_link = jQuery(this).find('a').first().attr('href');
    jQuery(this).wrapInner('<a></a>');
    jQuery(this).find('a').first().attr('href',callout_link);
  }); 
});
.col-link:hover .fl-col-content {
  background: red;
}

Ben

1 Like

Hey Ben

Thanks so much for the code, this help is appreciated. It does make the boxes clickable with a hover effect :slight_smile:

Little issue still though - the margins are being overridden somehow and the spacing looks odd, each background is a different size to fitting the text rather than the specified 20% column width I think(?), but not when the builder is switched on - it looks good then.

Kat

Hey Kat,

This should be final. :slight_smile: Sorry, should have tested it thoroughly myself.

jQuery(document).ready(function() {
  jQuery('.col-link .fl-col-content').each(function() {
    var callout_link = jQuery(this).find('a').first().attr('href');
    jQuery(this).wrapInner('<a></a>');
    jQuery(this).find('a').first().attr('href',callout_link);
  }); 
});
.col-link .fl-col-content:hover {
  background: red;
}

Ben

1 Like