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
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!
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.
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.
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.
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.
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 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.
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.
Thanks so much for the code, this help is appreciated. It does make the boxes clickable with a hover effect
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.