Add Link Tag to Whole Column in Beaver Builder Layout
To add a link to a whole column in a Beaver Builder layout you need to use some jQuery to add the link tag markup to make the whole column clickable.
This post has 2 solutions the first is the simpler one with no CSS just some jQuery – the second one is more long winded.
Quick jQuery Way
It is preferable to probably just redo the layout as html from scratch in a html module, but if you need to present the layout in a Beaver Builder way so its content is easy to change for someone else then use jQuery.
So in the above layout, there are 3 columns, each column has a heading module with a link and a column background image, the user wants the whole background of the column to be a link – which is the same as the heading link. The column initially has no padding and equal heights are disabled.
The column’s contents are wrapped rather than the column itself – with the column set to have zero padding, that’s set in the CSS.
Give each column a generic and unique class – ie link-col and link-col-1, link-col and link-col-2 etc
In the above-commented jQuery code, each column is targetted, its first link is set to a variable which is then used in the link mark up a tag to surround the fl-module content.
We also have to give the element some height and center things so a big of flexbox is needed – for the height, you can either set a fixed height or use padding – really depends on the content.