Is there any way to make a custom box clickable?


#1

I love custom boxes versatility, but I have not found the way to add a link to the entire element. So, is there any way to make a custom box clickable?


Make Custom Box Clickable
#2

Hello,

Please follow the steps below:

  1. Add “make-it-clickable” class to Extra Class field in Custom Box settings. Please check the screenshot for more detail http://prntscr.com/bspr9q

  2. Please go to Theme Options > Advanced > Custom CSS and paste the following code:

.make-it-clickable {
cursor: pointer;
}

  1. Go to Theme Options > Advanced > Custom JS and paste the following code:

jQuery(".make-it-clickable").click(function () {
window.open(
http://www.example.com’,
’_blank’
);
});

Do not forget to change URL according to your needs.

Best regards,
Artbees Support.


Link on all area of Icon box / Image Box / Custom box
#3

I remember wanting this feature back in 15’ along with everyone else. I can’t believe it hasn’t been implemented yet. This javascript did not work for me.


#4

Hello @Ken_O_039_Connell,

We need to check your settings.
Could you please create a ticket https://themes.artbees.net/new-ticket and provide WP Dashboard credentials?

Thank you.
Best regards,
Artbees Support.


#5

For all who struggled as well:
Clickable Custom Boxes (or Icon Box Gradient etc.) are possible with the code above. :slight_smile:
Just be sure you get the correct quotation marks in the jQuery-snippet. Copy&Paste will not work.


#6

Here is EXACTLY how you do it…

Add “make-it-clickable” class to Extra Class field in Custom Box settings.

Please go to Theme Options > Advanced > Custom CSS and paste the following code:

.make-it-clickable {
cursor: pointer;
}

Go to Theme Options > Advanced > Custom JS and paste the following code:

jQuery(".make-it-clickable").click(function () {
window.open(
http://www.google.com”, “_self”);
});

Do not forget to change URL according to your needs. if you want it to open in a new window replace “_self” with “_blank”

Keep a close eye on quotation marks as code editors can be finicky with them. you should be able to copy and paste this code into the Jupiter theme options though without issue.


#7

Still not working for me. What in the world I’m I doing wrong here. The CSS part is fine. Still can’t get it to link.


#8

It is definitely the quotation marks. When coding there are different quotation marks that don’t translate from text to code editors. If you look closely the quotation marks around “make it clickable” are straight up and down but the link quotes are at an angle. That is your problem. Manually change out the quotes but just typing them directly into the editor.

Here is what it should look like. Notice the link is yellow, not green and dark blue.


#9

Got it sorted out finally. it’s around the url and target window, not " .

jQuery(".make-it-clickable").click(function () {
window.open(
http://jwww.google.com’, ‘_self’);
});