Headline Icon link to page on the website?

Support
#1

Hello,

I have this on my homepage, and I am looking for the Href option box or a way to link the individual graphic icons to the corresponding pages?

Alternatively, can I do this with an image if I print screen and re-upload the icons as pngs?

Many thanks!

#2

Hello @discomatt,

Thanks for writing in!

Are you using featured boxes to display the icons and subtitles? There is no option to add a link to the icons. Perhaps you can check out this documentation:

Hope this helps.

#3

Hello!

I have followed the steps in the linked article, and it doesn’t seem to function how I thought it would.
Perhaps you could help, I am looking to make the text under the icon the link, and have achieved this using a href code currently, however the font is now turning black and then white when hovered over/clicked.
I would like this to be white initially, and then #460046 when hovered/clicked.

When I try <font etc - it turns all the text black.
The site is live for you to take a look at, www.pummieproductions.co.uk

Is it possible to add the icon links in as a future update?

Thanks,
Matt.

#4

Hey Matt,

By “doesn’t seem to function how I thought it would”, do you mean it does not function at all? I tested the instruction and it doesn’t work.

Before I give you what works, please note that I personally do not recommend hacking the elements with Javascript if there’s another JS code that has errors, modified element might get affected causing it to malfunction. If you could replicate the Featured Box with V2 elements, that would be ideal. You just need a Button or Social element for the Icon part and V2 Headline for the Text. You just then need to save the elements as a template to reuse them anywhere in your site.

Here’s what makes the Graphic Icon or Image a link on my site. We can’t make the paragraph text a link.

  • Insert the linked-feature-box class to the Featured Boxes that you want to be linked. I just want to emphasize that you use class instead of ID like in the instruction. ID is good for 1 Featured Box only.

--------------------------------------------------------------------------------

  • Make sure the Link Text and Href are set because this is where the icon will get its link from.

--------------------------------------------------------------------------------

  • Copy and paste the JS code below in Theme Options > JS for global application. Or, Content JS for per page application. Remove the old code.
jQuery ( function( $ ) {

  $('.linked-feature-box .x-feature-box-text a').each( function() {
    $( this ).parent().parent().parent().find('.x-feature-box-graphic-inner *').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();
  } );

} );

Hope that helps.

#5

Hi Christian,
Thanks for your reply!

Well, it’s working to the extent that linked text enters more text underneath the paragraph, and the icon is still not linked/nothing happens when hovered over or clicked.

I have attached an example image…

#6

Hi Matt,

To add a hover effect to your text link, please add this to the Page > CSS area.

#linked-feature-box .x-feature-box-title a:hover {
	color: #460046 !important;
}

Hope it helps,
Cheers!

#7

Hey Matt,

Did you follow the exact setup I’ve listed? I checked your site and you’ve not added the linked-feature-box class. The code I’ve provided will remove the Link Text but of course, it’s not working because you haven’t added the class to the featured box.

The instruction I’ve provided will work provided it’s followed correctly and there’s no other scripts conflicting with it.

If the JS method is still hard or it doesn’t work on your site, please replicate the Featured Box with V2 elements instead as I’ve mentioned previously.

Thanks.

#8

Hey Christian,

I did follow you steps yes, I did not update the page after testing though as it didn’t work and as I shown in the screenshot, I got text appearing in underneath the short paragraph.
I am looking to make the title area the link, and the only way I’ve found to do this so far is with the ahref= code in the text input. I will explore the V2 route again if there is no further solution to this after your reply.

Thank you again :slight_smile:

#9

You are most welcome!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.