How to add different links to each column

Support
#1

Hi Guys,

After searching throughout the forum and the web I’ve not been able to find a solution that works - I wish to make my columns clickable links please help!

p.s some of the other answers I tried for similar questions on the forum seem to completly break the layout

Many thanks,
Zenako

3 columns each their own link to a different page
#2

Hi There,

Add the following code to Cornerstone JS

jQuery("#column-link-1").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-2").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-3").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-4").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>");

Then add the respective IDs to each column : column-link-1 , column-link-2 , column-link-3 , column-link-4

Please add the following code to Cornerstone CSS

 .x-section .x-container.marginless-columns .x-column {
    float: left;
 }

Hope it helps

#3

Hi Joao,
please write the solution that the link to be opened in new tab. I was trying to insert target="_blank" but the jquery does not work anymore.

Thank you

#4

Hi There,

Update the JS code given to this:

(function($) {
$("#column-link-1").wrap("<a href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
$("#column-link-2").wrap("<a href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
$("#column-link-3").wrap("<a href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
$("#column-link-4").wrap("<a href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>");
})(jQuery);

Cheers!

1 Like
Link a Row or Column
#5

It works, thank you.

Have a nice day

#6

Hi @gigiberlog,

Happy to hear that.

Feel free to ask us again.

Thanks.

1 Like
#7

Hi guys

Same problem here, but different.
Missplacement of columns after adding the JS like shown above These tre columns (intro, sprint, stafett) are not marginless on my page and should look like the ones below in the picture attached. How to modify the css you suggested to Zenako? or other solutions?

Thanks for the support.

#8

And is it possible to also add a hover to the columns?

#9

Hi,

Since the columns are being wrapped you need to apply the same css to your link by adding the column class to it.

eg.

(function($) {
$("#column-link-1").wrap("<a class='x-column x-1-3' href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
$("#column-link-2").wrap("<a class='x-column x-1-3' href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
$("#column-link-3").wrap("<a class='x-column x-1-3' href='http://www.example.co.uk/get-in-touch/' target='_blank'></a>"); 
})(jQuery);

I added class='x-column x-1-3' to make the links behave like a column.

After that add this in Custom > CSS

.linked-column {
   width:100% !important;
  margin:0 !important;
}

Hope that helps.

#10

I still cannot make this work. The first lot of code lost the spacing between my marginless columns. But the second set of code squashed the columns by putting in way too much space. Please help!

#11

Hello There,

Thanks for updating in! This might not work in your set up. Please try a different approach and do the following:
1.) Please edit your page back in Cornerstone.
2.) In each of your columns, go to the “Customize” tab and add a unique ID column-1, column-2, column-3 for the column. For example:

3.) Find the Cornerstone custom js section, Custom JS and insert the following custom js code

(function($){
 $(document).ready(function($) {
  $("#column-1").append("<a href='https://google.com/'></a>"); 
  $("#column-2").append("<a href='https://facebook.com/'></a>"); 
  $("#column-3").append("<a href='https://twitter.com/'></a>"); 
 });
})(jQuery);

4.) And then

#column-1, #column-2, #column-3 {
    position: relative;
}

#column-1 > a,
#column-2 > a,
#column-3 > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

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

#12

Yes! Thank you so much - this has worked.
:grinning: