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

ref

Longer 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.

Beaver 3 Col Layout

 

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.

Beaver Builder Add Class To Column

Give each column a generic and unique class – ie link-col and link-col-1, link-col and link-col-2 etc

Add jQuery

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.

Add CSS

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.

Adjusted HTML

Column Mark Up Tag

 

For the CSS/JS you can add CSS to your existing stylesheet, or for both CSS & JS you can either enqueue a script or use the Beaver Builder per page Javascript and CSS areas under the Tools header.

Add Javascript In Beaver Builder