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.

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

2 Comments

  1. Fred Gabe on October 19, 2018 at 11:57 am

    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
    });

    • Neil Gowran on October 20, 2018 at 5:08 am

      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

Leave a Comment