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.
