Make the whole custom box clickable


#1

Objective:
The whole custom box should be clickable.

Things to consider:
I will be using button inside the box to add a link and JavaScript to make that link clickable for the whole custom box.

Implementation:

  1. Add a custom box using the WPBakery Page Builder. Please checkout this link to add a custom box element/shortcode https://themes.artbees.net/docs/custom-box-shortcode/

  2. Add whatever content you want to add to the box.

  3. After that, to add a link we will add a button element/shortcode to the custom box. Please checkout this link to add a button https://themes.artbees.net/docs/button-shortcode/

  4. Edit the button settings and add the required link to the Button URL option.

  5. In the button settings, scroll down to the bottom and add a custom class called click-custom-box in the Extra Class Name option. Save changes and update the page.

  6. Now, add the below JS to Jupiter -> Theme Options -> Advanced -> Custom JS

(function($){
$('.click-custom-box ').parent('.box-holder').addClass('click-custom-box-holder');
$('.click-custom-box-holder').click(function(e){
e.preventDefault();
var URL = $(this).children('.click-custom-box').children('.mk-button').attr('href');
var target = $(this).children('.click-custom-box').children('.mk-button').attr('target');
window.open(
URL,
target
);
});
})(jQuery);

  1. Also, add the below CSS to Jupiter -> Theme Options -> Advanced -> Custom CSS

    .click-custom-box-holder{
    cursor:pointer;
    }


Is there any way to make a custom box clickable?
Portfolio Hover Colour & Link
#2

Works perfectly - thanks very much!


#3

You’re welcome :slightly_smiling_face:


#4

Thanks for this! Exactly what I needed!