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
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.
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
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
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.
Where do you specify the links that you want each column to go to?
It copies the first link it finds in the module – so it may be a button link or a headline link etc
Hey,
This is interesting! Anyhow, I’m not a developer so I am not sure how to edit the jQurey. I’ve named my column class link-col-1, but where do I add the link here? and what do you mean by “set a variable”?
jQuery(document).ready(function($) {
$(‘.link-col-1’).each(function() { // Target a column class
var content_link = $(this).find(‘a’).first().attr(‘href’); // Set a variable for the first link in the column
$(‘.link-col-1 .fl-module’).wrap(‘‘); // Wrap a tag around the module content with the variable
});
I have updated the post regards where to add the class – the variable captures the link address and is then re-used in the jQuery