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.
I used the quick jquery code and unfortunately it disabled the builder. I tried to dequeue the script but that didn’t work so eventually I had to revert to the db to the previous day’s back-up. Can’t say I’m keen to try the long version now.
The quick way is preferred and works, I use it in many sites – it’s jQuery so I cant see why you had to restore from a backup, possibly you had a caching issue – also worth checking is any errors in the browser developer console window – that always assists in troubleshooting
I love it when somebody comes up with a simple solution – and it still works in 2020. That means it’s great coding on your part and on BB’s. Thanks, this simple snippet is just what I needed!
This is great. I used the first method and am now trying to make the background column color change on hover. This is the css I am using but nothing happens:
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 used the quick jquery code and unfortunately it disabled the builder. I tried to dequeue the script but that didn’t work so eventually I had to revert to the db to the previous day’s back-up. Can’t say I’m keen to try the long version now.
The quick way is preferred and works, I use it in many sites – it’s jQuery so I cant see why you had to restore from a backup, possibly you had a caching issue – also worth checking is any errors in the browser developer console window – that always assists in troubleshooting
I love it when somebody comes up with a simple solution – and it still works in 2020. That means it’s great coding on your part and on BB’s. Thanks, this simple snippet is just what I needed!
This is great. I used the first method and am now trying to make the background column color change on hover. This is the css I am using but nothing happens:
.click-col a:hover {
background: #000000 !important;
}
Try without the link tag
.click-col:hover {
background: #000000 !important;
}
Thank you Neil! That worked perfectly!
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