Hyperlink an Icon on a template using HubL

SOLVE
Highlighted
New Contributor

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.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

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

Bildschirmfoto 2018-11-08 um 22.33.21.png

 

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

Bildschirmfoto 2018-11-08 um 22.35.56.png

 

3. copy the value of the widget

Bildschirmfoto 2018-11-08 um 22.37.22.png

 

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

Bildschirmfoto 2018-11-08 um 22.38.18.png

 

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

Bildschirmfoto 2018-11-08 um 22.40.54.png

 

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
Reply
0 Upvotes
6 Replies
Occasional Contributor

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

 

Reply
0 Upvotes
New Contributor

@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.

Screen Shot 2018-11-08 at 11.41.23 AM (2).png

 

Reply
0 Upvotes
Occasional Contributor

Hi @aiellog,

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

 

regards

Anton

Reply
0 Upvotes
Occasional Contributor

@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

 

Reply
0 Upvotes
Occasional Contributor

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

Bildschirmfoto 2018-11-08 um 22.33.21.png

 

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

Bildschirmfoto 2018-11-08 um 22.35.56.png

 

3. copy the value of the widget

Bildschirmfoto 2018-11-08 um 22.37.22.png

 

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

Bildschirmfoto 2018-11-08 um 22.38.18.png

 

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

Bildschirmfoto 2018-11-08 um 22.40.54.png

 

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
Reply
0 Upvotes