- This topic has 9 replies, 2 voices, and was last updated 6 years, 3 months ago by
.
Hi, hope everything is going well.
I am trying to have nice icon boxes linked to an url, but I can’t find exactly what I want as a result (exemples of what I tried)
I would like to have in each column : 1 icon + 1 heading + 1 text paragraph. And I would like to link each of these 3 elements to the same URL.
So when the client will clic randomly at the icon, or at the heading or at the text, he will be redirected to the url.
I have tried several styles of icons, but there is ONLY one element which is linked to the URL (either the icon or heading), but I thing this is not UX friendly since you never know where the client will clic.
Is there any way to link the 3 elements (1 icon + 1 heading + 1 text paragraph) to the same URL?
thank you in advance
Best regards
I hope you are well today and thank you for your question.
You can try achieving this by using the custom CSS solution posted in the following topic.
https://support.shufflehound.com/forums/topic/onclick-icon-of-iconbox/#post-16621
Best regards,
Shufflehound teamHi, thank you very much, now the entire iconbox is linked to anothe page!
However, With your CSS code, I have the heading at the end (see picture). I am really not familiar with CSS, and I don’t know how to change the order of the items. I would like to have first the icon, then the heading, then the text at the end.
Can you also tell me which content element I can use to link the text (heading or paragraph) to an URL?
Thank you a lot for your help!
Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?
Yes sure, this is my url: http://www.clarawebdigital.com/
In the first 2 boxes, I linked the box to an URL. The last 3 other boxes haven’t yet an URL linked but I will do it later.
Thank you for your help
I tried to access your shared site but it is requesting password to access it so could you please share it?
You can share it privately by adding them in the box having text “Click here to share private content. Only you and forum moderators will bee able see it.”
Hi, I hope everything is going well. I desactivated the password protection in my website to facilitate the access to it.
I also send you 2 pictures of Icon boxes with the title at the end when I add an url (exemple of the 2 first icon boxes). When I don’t add URL in the icon box, the title is at the top.
I would like to have the title at the top of the icon box even when I add an URL.
If you need further information, please let me know
Thank you in advance
Solution for this topic
Please also try using below CSS code.
#page-container .sh-iconbox-title a h3 { position: absolute; top: 15px; left: 65px; }Solution for this topic
Hello, thank you for your answer.
The extra code CSS you gave me works very well on computers but is not responsive… So what I did was:
1/ I put the title in the content box (see picture)
2/ I use this code
#page-container .sh-iconbox-title a { position: absolute; bottom: -25px; left: 0; height: 100%; width: 100%; padding-top: 140px; } #page-container .sh-iconbox-icon { margin-bottom: 50px; }And like this is working on all the devices 😉
Thank you for your help
You are most welcome here 🙂
