Hyperlink a Column

[verobeachmarketing]

How can I set a link for the entire column of background and text etc? If they click anywhere etc.

[RubberDuckers]

/* Column click for services */

(function($){
  $('<a id="columnID" href="[URL]">').insertBefore('.columnClass');
  $('.columnClass').prependTo( $('#columnID') );

})(jQuery);

[verobeachmarketing]

I tried this but I guess I do not know how to look up the column ID…

https://dev.alliancepropertysystems.com/

COMMERCIAL MANAGEMENT

box and I put the JS in main site

[jade]

Hi @verobeachmarketing,

If you want to follow the suggestion made by @RubberDuckers, please add a class to the column that you want to be linked:

The code previously suggested makes use of the class columnClass so you can add that class to the column.

Hope this helps.

[RubberDuckers]

Thanks for clarifying that @Jade and sorry I didn’t see your reply @verobeachmarketing
You can change the class/IDs to whatever you want, I’ve used it a few times on a page before so they need to be separate classes/IDs for separate links.

Let us know if you get it working!

[jade]

Thanks for helping out, @RubberDuckers.

[verobeachmarketing]

brilliant thank you

[jade]

You’re most welcome, @verobeachmarketing.

[verobeachmarketing]

Once I did this the boxes margin are now off and the boxes became wider. Curious as to why they don’t have a margin option to change. Can you help me fix that formatting?

[friech]

Hi @verobeachmarketing

Columns are not designed to be a link, outer or inner wrapping it with an anchor tag <a> tag will break its structure since it’s now using flex styling. For that, I recommend doing that grid in Essential Grid with custom source, then use its skin editor tool to create a skin applicable for your design.

Extension - Essential Grid
Customize the look of your Essential Grid Items with the Item Skin Editor.

Alternatively, if your column does not have complex content, then you can do the Button trick. To do this add a button to your column, make that button width and height 100% this will make the button take up the entire column, then set your button backgrounds to transparent, this will create an illusion that your column is a link.

Button element can have a graphic, a primary text, and a secondary text so this might work if you only have basic content on your column.

• 

<br ./>

Cheers!

[verobeachmarketing]

I removed the linking stuff. How can I get margin on the bottom for mobile?

[ruenel]

Hello @verobeachmarketing,

You will need to apply a bottom margin for each column so that on smaller screens when the columns stack up below each other, the bottom margins will become a gap beneath each of the collapsed columns.

Hope this helps.