Pro way to make Classic Feature Box

[artthescience]

Hi there,

I am trying to make the following:

I need the image and the text to link.

What is the best way to do this? Headline? Button? Please provide detailed steps or link to detailed steps to the best way to do this. I did not see a way to make the image linkable using the Headline element. I have no idea how to make this using the Button Element.

Thank you

[jumar]

Hello @artthescience,

Thanks for writing in!

You can achieve the clickable feature box with your Headline or Text element.

First, you need to add feature-box-1, feature-box-2 and feature-box-3 class names to the class field of your Headline/Text element.

After that, add the following code into Pro > Theme Options > JS:

jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="http://officinacasona.com/link-1/" target="_blank"/>');
	$(".feature-box-2").wrap('<a href="http://officinacasona.com/link-2/" target="_blank"/>');
	$(".feature-box-3").wrap('<a href="http://officinacasona.com/link-3/" target="_blank"/>');
}); 

You can add more lines if you wish to. Just copy+paste one line and update the link inside the <a /> tag.

E.g. $(".feature-box-4").wrap('<a href="http://officinacasona.com/link-4/" target="_blank"/>');

The code above pertains that each link when clicked will open the page on a new tab.

Hope this helps.

[artthescience]

Thank you!

Is there a way to achieve this with a Button Element such that I can upload a primary and secondary image?

[nico]

Hi @artthescience,

Not sure what you want to achieve. Would you mind sharing us more details.

Thanks.

[artthescience]

Of course!

I would like to have the image change to a secondary image on hover and be a link with the text underneath as a link as well.

Basically a feature box where the image and text both link and change on hover over.

Thank you.

[christian]

Hey @artthescience,

What you need is readily available using the Button element. The image and text within the button are packaged as a link. See https://youtu.be/nJ1j7tqrOYI

If I’m not understanding you correctly, please give us more details and images.

Thanks.

[artthescience]

That’s perfect! Thank you so much

[jade]

You’re most welcome!