Test Page 27

BB 2.8 Box module

Box module Layers mode

COL 1

COL 2

COL 3

COL 4

original-3516ff90c83f5dd11e129ad80ad5b028.jpg?resize=1600x1200

original-1063154453abe4de864093b5f578f65a.jpg?resize=2048x2048

original-903c61d4db237e614588ab35fc08ad9d.jpg?resize=2048x1536

original-5bac44a88819cf9ac9df5eb1ca0fc8a9.jpg?resize=1600x1200

mmj_final.png?resize=800x600&vertical=center

Center module in a multi-columns row

COL 1

COL 2

COL 3

COL 4

CIRCLE

Custom CSS

body:not(.fl-builder-edit) .av-absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.av-absolute-center {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: 100px;
    background-color: rgba(255,255,255,.5);
    border-radius: 100%;
}
.av-absolute-center h3 {
    margin-bottom: 0;
}

BB Post module: Open Post in PP Modal

Following the PowerPack doc here.

Test article 12

Test article 11

Test article 10

Toggle Video sound from a button

Custom JS

(function($){
  $(document).ready(function(e){
    
    $('.my-button a').on('click', function(e) {
        
        $('.mejs-button.mejs-volume-button > button').click();
        e.preventDefault();
        
        $iconItem = $(this).find('i');
        if( $iconItem.hasClass('fa-volume-mute') ) {
            $iconItem.removeClass('fa-volume-mute').addClass('fa-volume-up');
        } else {
            $iconItem.removeClass('fa-volume-up').addClass('fa-volume-mute');
        }
        
    });

  });
})(jQuery);

BB Post module Count

Test article 3

TOTAL POST COUNT: 12

Custom PHP

add_action( 'fl_builder_posts_module_after_posts', 'av_display_post_count', 10, 2 );
function av_display_post_count( $settings, $query ) {
	if ( 'av-post-count' == $settings->id ) :
        if( ($query->current_post + 1) < ($query->found_posts) ) :
        	echo 'TOTAL POST COUNT: ' . $query->found_posts;
    	endif;
	endif;
}

Open BB Theme Off-canvas menu from a link

Works on mobile view only: 768px wide and less.

Same with BB plugin Menu module here.

Custom JS

jQuery(document).ready(function($) {
    
    $('.av-open-mobile-menu a').on('click', function(e) {
        e.preventDefault();
        $('.fl-page').toggleClass('fl-nav-offcanvas-active');
        e.stopPropagation();
    });

});

BB Callout modules: Equal height & Button to bottom

Each module in a separate column

Callout module copy… Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

Callout module Heading

Callout module copy… Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3 columns / Custom class: av-callout-col
1 BB Callout module in each column.
Columns equal height set in BB Columns settings > Style tab.
Modules equal height / Button to bottom: custom CSS below.

Custom CSS

.av-callout-col .fl-module-callout, 
.av-callout-col .fl-module-callout .fl-module-content,
.av-callout-col .fl-module-callout .fl-callout, 
.av-callout-col .fl-module-callout .fl-callout-content, 
.av-callout-col .fl-module-callout .fl-callout-text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.av-callout-col .fl-module-callout .fl-callout-button {
    margin-top: auto;
}

All modules in the same column

Custom CSS

.av-multi-callout-col .fl-col-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.av-multi-callout-col .fl-module-callout, 
.av-multi-callout-col .fl-module-callout .fl-module-content, 
.av-multi-callout-col .fl-module-callout .fl-callout, 
.av-multi-callout-col .fl-module-callout .fl-callout-content, 
.av-multi-callout-col .fl-module-callout .fl-callout-text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.av-multi-callout-col .fl-module-callout {
    flex: 0 1 33.33%;
}
.av-multi-callout-col .fl-module-callout .fl-callout-button {
    margin-top: auto;
}

/* --- RESPONSIVE --- */

@media (max-width: 1080px) {
    .av-multi-callout-col .fl-module-callout {
        flex-basis: 50%;
    }
}
@media (max-width: 810px) {
    .av-multi-callout-col .fl-module-callout {
        flex-basis: 100%;
    }
}

BB 2.8 Box module

COL 1

COL 2

COL 3

COL 4

Center module in a multi-columns row

COL 1

COL 2

COL 3

COL 4

CIRCLE

BB Post module: Open Post in PP Modal

Test article 12

Test article 11

Test article 10

Toggle Video sound from a button

BB Post module Count

Test article 12

Test article 11

Test article 10

Test article 9

Test article 8

Test article 7

Test article 6

Test article 5

Test article 4

Test article 3

Open BB Theme Off-canvas menu from a link

BB Callout modules: Equal height & Button to bottom

Each module in a separate column

Callout module Heading

Callout module Heading

Callout module Heading

All modules in the same column

Callout module Heading

Callout module Heading

Callout module Heading