Tutorial & code

Clickable Columns

This is one of our favorite snippets that makes a whole column clickable to the link (anchor tag) added to it. It's flexible alternative to the Beaver Builder Callout and Call to Action modules.

VIDEO
CODE

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

This uses JavaScript placed in the advanced tab of the row containing the column.

  1. If you move the column out of the row it will not work.
  2. You can also cut and paste the code and add it to the page layout if preferred.
  3. The column needs to have “clickable-col” in the columns advanced tab under CSS Class. (see image).

Bb Clickable Column

This is  kindly supplied with permission by Carlos Velasco a developer on the Beaver Builder team. The original source is here.

Extra Note: If you want to use this across the whole of your site you can added the JS to your Global settings.

Beaver Builder Flexiblecall Outs

Of course if your theme allows,  you can added via the Customizer or create your own JS file for you child theme.

Benefits:

  1. It’s a solution for Beaver Builder Lite users who don’t have the Call-Out and Call to Action modules.
  2. You can achieve more complex layouts. Particularly since Beaver Builder V. 2.2 added more styling options for individual modules and we have child columns.
  3.  It’s more of a point and click experience for clients. Perhaps more intuitive than going to tabs with the Call-Out and Call to Action modules.
  4. I find clicking individual module snappier that complex modules with tabs. We also completely disable unused modules with this trick.

See the Clickable Columns template in action.

Example

Code

CSS 

/* Here's some optional hover over effects. Delete if not used */

.clickable-col .fl-col-content:hover{
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.3); /* Horizontal/Vertical/Blur/Spread/Color */
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

.clickable-col .fl-col-content{
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

/* See here for a visual editor: https://cssgenerator.org/box-shadow-css-generator.html */

.clickable-col .fl-col-content:hover {
transform: translateY(-8px);
transition: all .4s ease-in-out;
}

.clickable-col.fl-col-content {
transition: all .4s ease-in-out;
}

/* To stop the hover on child column */

.no-effect .fl-col-content:hover{
transform:none;
box-shadow:none;
}

JavaScript 

/**
 * Makes a BB Column clickable.
 * Pre-requisite: There must be an A Tag contained within the column element.
 */
(function($){
    // Exit if BB layout is in edit mode.
    if ( 'undefined' != typeof window.FLBuilderConfig ) {
        return;
    }
    
    $('.clickable-col').css('cursor', 'pointer');
    $('.clickable-col').on('click', function(event){
        $(this).find('a')[0].click();
    });

    $('.clickable-col a').on('click', function(event){
        event.stopPropagation();
    });
})(jQuery);

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off

--------------------------------------------------------------

 

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

2 Comments

  1. Jeff Jeff on December 10, 2021 at 9:34 pm

    I added this code in but can’t seem to figure out where to put the link. I’m using a flipbox to mimic playing cards but want each one to link out to it’s own page.

    Reply
  2. NIcola NIcola on August 31, 2022 at 12:03 pm

    Hi, is there a way to add an overlay to the column on hover?

    Reply

Leave a Comment