[pierrejdtParticipant]

Hi,

I would like to know how can I put a link in my column (who’s only a picture) to make it clickable on its whole surface ? And has I have 4 different column, can I insert a different link in those differents columns ?

The url is : http://www.traiteur-paca.com/prestations-entreprises/ and you have the model in the picture in the attachments.

Thanks a lot !!

Attachments:

You must be logged in to view attached files.

[Paul RModerator]

Hi,

Please use image shortcode in a text element intead of adding it as background to your column.

eg.

<a href="#">[image type="thumbnail" src="http://www.traiteur-paca.com/wp-content/uploads/2017/01/0161.jpg" alt="Buffet"]</a>

Change href with your link.

Hope that helps

[pierrejdtParticipant]

Thanks, but the thing is that the columns allow me to have the same image size, and here I don’t have the good size at all…

[JoaoModerator]

Hi There,

To make columns clickable you can follow this.

Add a class name to each column like class-1,class-2…

Then add the following cod in Costomize -> Custom -> JavaScript :

jQuery(".class-1").wrap("<a href='#'></a>");

jQuery(".class-2").wrap("<a href='#'></a>");

Hope it helps.

We would loved to know if this has work for you. Thank you.

[pierrejdtParticipant]

Hello,

So I’ve to replace the “#” with my link ?

[JoaoModerator]

Yes Sir! 🙂

Let us know how it goes.

Joao

[pierrejdtParticipant]

Hmm.. Nothing happens..

[JoaoModerator]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[pierrejdtParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

As your colums got wrapped by an <a> All your columns became a last column, so the margin was dissapering.

To fix that I added to Cornerstone > Settings > Custom > CSS

@media(min-width: 769px) {
  .x-column.x-sm.x-1-4.cs-ta-center.class-1, .x-column.x-sm.x-1-4.cs-ta-center.class-2, .x-column.x-sm.x-1-4.cs-ta-center.class-3 {
    margin-right: 4%;
  }
}

You just need now to update your URLS on Cornerstone > Settings > Custom > JS

Hope it helps

Joao

[pierrejdtParticipant]

Thanks Joao it’s work well!!

[JoaoModerator]

Glad to hear it,

Cheers

[Author]

Posts