Help Needed: Need to make "Services" clickable

[samaven]

HI All,

I need to make the services section clickable and open a new page. This would be used to describe the services offered.

Can anybody suggest how can I do that?
I am new to wordpress and hence any help would be of great value to me.

Best
Samaven

[Veena]

You can go to the page section edit window and add corresponding links to each services.

To add a link, highlight the text which should be linked and click the link icon. This will open a link window dialogue box in which you can enter the URL address of the link (services page link that you need) and an alternate title, which shows up when the viewer mouses over the linked text in the actual page.

[samaven]

What i am looking for is to make the each service section (as shown on demo page – including the icon, heading and text) clickable, like one rectangular clickable area.

The above given solution is not the ideal solution because of the following reasons:
1) It changes the formatting of that particular services section because of the introduction of anchor tag
2) It makes the icon and text clickable but the space between lines is still unclickable and this results in a not so pleasing user experience. The mouse pointer changes from hand icon to arrow and then back to hand icon as we move between lines of the services paragraph.

I am looking for a solution using which i can make the each services section clickable. Something like this:

<div onclick=”location.href=’http://www.google.com&#8217;;” style=”cursor:pointer;”>…</div>

i tried the above solution in the following two ways:
1) I tried using the above solution in the existing ‘text block’ component for each services section, but then it removes the onclick handler.
2) I tried using ‘raw html’ component with the above solution, but that results in the icon shortcode not being translated (it is written as it is to the html page and the icon is not displayed)

plus i am not sure about how SEO friendly the above solution is.

so if you could please give me a solution keeping the above mentioned points in mind.

[Veena]

If you want text also clickable pls inlude paragraph also in the anchor tag.
And if you want to change the color of active or visited area,can use custom CSS as below

#services .fourcol a, a:active, a:visited {
color: brown;
}

Now we can’t give more customization than this.

[samaven]

<p> inside tag did not work. The text block does not allow that for some reason.
I finally used the above mentioned solution (using <div> ) inside raw HTML VC component and used <span class=”icon-name”> instead of the icon shortcode. It worked for me. Updating this post just in case somebody else is also looking for a similar solution.

[Veena]

Thank You for your thoughtfulness.

[Author]

Posts