How can I create a hyperlink that covers the whole area of a column, a content band or a container?

I want to set different hyperlinks on specific columns. The links should cover the whole area then. Columns have the options for ID, Style and Class.

Is it possible to integrate these links there?

Best,
Paul

Yes, that’s possible but you need to input your links manually in classic mode > text tab

eg.

<a href="http://yourlink.com">[column type="1/2"] Place your content in here. [/column]</a>

or

<a href="http://yourlink.com">

[content_band style="color: #333;" bg_color="#ffddea" border="all" inner_container="true"] [custom_headline style="margin-top: 0;" level="h4" looks_like="h3"]Cool Headline[/custom_headline] <p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.</p> [/content_band]

</a>

http://screencast.com/t/ANBnTFRt

Hope that helps.

Thanks for writing in!

No, the above code won’t display any error message. If you have any questions or concerns, feel free to post here and we’d be happy to provide further assistance!

Thanks.

http://5fc.288.myftpupload.com/

Look under the first content band. I have it set up as 2 columns, each column is 110% width because otherwise there would be white margins. Under it i have a full column. these columns are not surrounded by containers or content bands. Look at the code below. When i take the and move it outside of the columns the images shift and overlap each other. How can i make these columns / images links without screwing up the page layout. [column type=”one-half” link=”true” href=””] doesnt work either.

[/content_band]
[column type=”one-half”]

[/column]
[column type=”one-half” last=”true”]

[/column]
[column]

[/column]
[content_band]

Thanks for writing in! You can use the text element to insert the images inside an anchor tag instead of your current setup that will allow you to make the whole area clickable. If we are misunderstanding what you would like to happen, please explain a bit further and perhaps provide an example link. Would you mind providing us with login credentials as well so we can take a closer look at your set up? 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.

Using the instructions from this topics I was able to turn my columns into hyperlinks. Which is great.

However, whenever I go back to Cornerstone, everything does get overwritten….

Is there a way to avoid this?

Thanks for the updates. What we can recommend in doing this in Cornerstone is by using a custom javascript. Please follow on this step.
1] Please turn on the advance controls
2] Select which column you would like to link and insert a custom class linked-column for example
3] Insert the following custom JS in the settings tab (in Cornerstone), Settings > Custom JS

(function($){
  $('<a id="column-link" href="#my-link">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#column-link') );
})(jQuery);

Please make sure that you have inserted the correct link #my-link for example.

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

This is absolutely wonderful!!! Thank you very much!

Is it possible to add a bit of code to the JS that makes the colors in the column change too, when the mouse hovers over it? That way it is even more clearer to the user that the box is actually a link.

Say for example that on hover over, the background color (and perhaps text color too) change, or some kind of semi-transparency effect for both appears?

And another question too: I will have many more similar links. Should I then add the code as follows:

(function($){
  $('<a id="link1" href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
})(jQuery);
(function($){
  $('<a id="link2" href="#people">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

or should it also work if I do it this way:

(function($){
  $('<a href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
  $('<a href="#people">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

Kindest regards,

Tristan

No need to add jS code for hover color, just add following CSS :

.linked-column:hover:before {
    background-color: rgba(255,255,255,0.5);
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
.linked-column:hover a {
    color: red !important;
}

Hope it helps.