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

View the code on Gist.

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

View the code on Gist.

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

View the code on Gist.

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

Share:

Leave a Reply