Custom columns

Align buttons to columns bottom

Column #1

Optatur aut lam ea quaepellores ad que non evellaciume cor molo comni atemodit recuptas non cum reperio offic to erit occus eost eos dem ere vid que se dio. Pudis perchit atusdae nobit, quodiae alicatquas et inteni qui doloria vendunda pra parum quam es estrum seria ipicili gendant.

Aligned button

Column #2

Tia qui ommolorae praeper sperit liaecessequi in poratur restius utas re, excest, si il molut modigni ssitin raturi aut eruptatior aspitatem. Disi ra nos is rehenis aute peribus sed quassequi utatqua.

Aligned button

Column #3

Aut eruptatior aspitatem. Disi ra nos is rehenis aute peribus id ut aut idesequamus ea vercid et qui te disqui voluptaqui cus, uta possum estio quasperi in eat lanihit quasper ferionse dolores cimpos reperore sed quassequi utatqua etusandandam adis debisquias verio bea consequ.

Aligned button

CSS

This simple trick works because the columns are set to Equal height, what makes the button's parent wrapper flexboxed.

.av-col-vertical-align .fl-col-content .fl-module-button {
    margin-top: auto;
}

Scale column backgound image on hover

Rollover me!

CSS

.av-scale-bg .fl-col-content {
    position: relative;
    overflow: hidden;
}
body:not(.fl-builder-edit) .av-scale-bg .fl-module {
    z-index: 1;
    position: relative;
}
body:not(.fl-builder-edit) .av-scale-bg .fl-col-content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    background-size: cover;
    transform-origin: center;
    transition: transform .4s ease-out;
}
.av-scale-bg .fl-col-content:hover::after {
    transform: scale(1.2);
}

Show column on click

Show column #1

Show column #2

Show column #3

Reset

Column #1

Column #2

Column #3

CSS

body:not(.fl-builder-edit) [class*="toggle-section-"] {
    display: none;
}

This snippet requires to set a custom attribute on BB Buttons to target the columns.
The attribute is set from the Button module GUI thanks to BBCustomAttributes plugin.

jQuery(document).ready(function($) {

    $(".av-toggle-button a").on("click",function(e){
        
        // Disable links
        e.preventDefault();

        // Reset all columns visibility
        $("[class*='av-toggle-section-']").hide();
        
        // Get target from clicked button attribute
        var target = $(this).closest(".av-toggle-button").attr('target');

        // Toggle target visibility
        $('.' + target).slideDown();

    });

    $(".av-reset-button a").on("click",function(e){
        e.preventDefault();
        $("[class*='av-toggle-section-']").slideUp();
    });

});

Columns carousel with slick.js (work in progress)

This columns carousel is made with the slick.js plugin.
Decrease the browser's width to see the columns framed in a carousel and horizontally scrollable.

Column #1

Column #2

Column #3

HTML

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

CSS

@media (max-width: 768px) {
    .av-col-carousel .fl-col {
        clear: none;
        width: unset !important;
    }
    .av-col-carousel .fl-col-small {
        max-width: none;
    }
}

jQuery(document).ready(function($) {
    $('.av-col-carousel .fl-col').removeClass('fl-col');
    $('.av-col-carousel > div > div > div').slick({
        slidesToShow: 3,
        slidesToScroll: 3, 
        infinite: true, 
        dots: false,
        responsive: [
            {
                breakpoint: 992, 
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2, 
                }
            },
            {
                breakpoint: 768, 
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1, 
                    infinite: true, 
                }
            }
        ]
    });
});

Custom columns

Custom columns

Align buttons to columns bottom

Column #1

Column #2

Column #3

Scale column backgound image on hover

Rollover me!

Show column on click

Column #1

Column #2

Column #3

Columns carousel with slick.js (work in progress)

Column #1

Column #2

Column #3

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box