Hyperlink an Icon on a template using HubL

[aiellog]

I am using a template for a landing page that has most parts of it interactable simply through the design editor however, there are these icons on the template such as a cog, or mobile phone that are just static and not interactable. I want to be able to hyhperlink these icons so that when clicked they redirect to certain pages. I looked into the html version of the template and found a line of code:

{% custom_widget "kula_offer_default_icon_1" widget_name="Kula Offer - Icon", column_width="one-third", icon_custom_class="fa-cog", caption="<strong>Plenty of Settings</strong><br />Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers." %}

that seems to be where the icon exists however, I can't figure out a way to hyperlink the icon. Is it possible to do this from editing this line of code, if not, what would I have to do to hyperlink an icon on the template? 

Thanks in advance.

[AntonB]

Hi @aiellog,

try this:

<a href="YOUR LINK GOES HERE">{% custom_widget "kula_offer_default_icon_1" widget_name="Kula Offer - Icon", column_width="one-third", icon_custom_class="fa-cog", caption="<strong>Plenty of Settings</strong><br />Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers." %}</a>

you can insert a text-widget/-module inside the href="" part to have the ability to insert custom links. 

you could also insert some boolean options to have something like "open in new tab" or rel="nofollow"

to do add a boolean widget to your module( For example: "Open in new Tab?"). Your code should look something like this

<a href="" {% if module.open_in_new_tab %}target="_blank"{% endif %}><!-- YOUR MODULE CODE --> </a>

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[aiellog]

@AntonB

Thank you for your response however, I tried what you suggested :

<a href="https://www.datamotion.com">{% custom_widget "kula_offer_default_icon_1" widget_name="Kula Offer - Icon", column_width="one-third", icon_custom_class="fa-cog", caption="<strong>Plenty of Settings</strong><br />Kitoum allows offers a wide-assortment of settings that you can adjust to create completely bespoke web-based offers." %}</a>

and still when I hover over the icon in live preview nothing changes, I still can't click the icon as you can see in the attached image.

[AntonB]

Hi @aiellog,

hmm strange... Could you please provide a preview link(the one without preview options) from the page/template?

regards

Anton

[aiellog]

@AntonB

https://preview.hs-sites.com/_hcms/preview/template/multi?domain=undefined&portalId=219987&tc_device...

[AntonB · Accepted solution]

After some deeper research on the template(Kitoum_eBook_Template) here's the solution/tutoial to add a custom link to the icon module.

1. add a text widget to the module

2. give it a name (and a "prefilled" link)

3. copy the value of the widget

4. insert it into the "href part" and publish the changes. 

5. open your page(which uses the template) and click on the certain module. You'll find the link-field at the very bottom on the left side

6. change the value of it, save it and you're ready to go

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[AntonB]

@aiellog,

I've checked your page with the google inspector(CMD+Option+I on Mac; STRG+Shift+I on Windows) and couldn't find the link you've inserted. Did you applied/published the link?

Also I've tried to insert a link manually with the inspector(working only till I reload the page). It worked - but it's not the best solution to apply the link to the module code. A better way would be to apply the link to following div:

<div class="kula-offer-icon">

this is the div which contains the icon.

Can you see/edit it in your module/template? If yes, apply the link as following

<a href="YOUR LINK">
<div class="kula-offer-icon">
<i class="fa {{probably-the-icon-widget}}"></i>
</div>
</a>

regards

Anton