Test Page 28 - Avanti : démo Beaver Builder

2 full width columns: 1 with boxed content

When a background color is required on the boxed content column.

Heading

Lorem ipsum odor amet, consectetuer adipiscing elit. Aenean vulputate magna pretium enim sodales ipsum sociosqu ipsum. Alacinia non lacus nibh venenatis. Sem cursus ridiculus dictumst curabitur dis cras. Quis blandit sodales rutrum maecenas imperdiet duis varius.

Eu himenaeos luctus massa fermentum sagittis nostra amet maecenas. Per rhoncus duis magnis vivamus nullam. Est sollicitudin consectetur litora dapibus cras consequat. Massa dictumst vivamus ligula congue diam.

CSS

@media (min-width: 811px) {
    .fl-col-content {
        align-items: end !important;
    }
    .fl-col-content > * {
        max-width: 470px;    
    }
}

2 columns: 1 boxed / 1 full width

Only if the boxed content column has no background.

Heading

CSS

@media (min-width: 811px) {
    justify-content: end;
    .fl-col-content {
        max-width: 550px;    
    }
}

Exclude child terms from BB Post module Taxonomy filter (hierarchical)

With a hierarchical Taxonomy having, for instance, test as a parent term and test child as its child term.
When applying a Taxonomy filter to a BB Post module with the parent term selected (Match these categories…: test), the grid displays posts having the parent term OR the child term (only).

In other words, despite the child term is not set in Match these categories…, the filter still includes posts having only the child term and not the parent term assigned

The custom PHP filter below is required to exclude posts having only the test child term.

Now a post like Test article 10 with test and test child terms assigned logically shows up in the grid.
While a post like Test article 9 with only test child doesn't.

Test article 11

Posted in Test

Test article 10

Posted in Test, Test Child

Test article 7

Posted in Grid, Test

Test article 6

Posted in Grid, Test

Test article 5

Posted in Grid, Test

Test article 4

Posted in Grid, Test

Test article 3

Posted in Grid, Test

Test article 2

Posted in Grid, Test

Test article 1

Posted in Grid, Test

PHP

add_filter( 'fl_builder_loop_query_args', 'av_filter_by_term' );
function av_filter_by_term( $query_args ) {
    
    if ( 'av-filter-by-term' == $query_args['settings']->class ) {
    
        $query_args = array(
            'post_type' => 'post',
            'tax_query' => array(
                array(
                    'taxonomy' => 'category',
                    'field'    => 'slug',
                    'terms'    => 'test',
                    'include_children' => false
                )
            ),                          
        );
        
    }
    
    return $query_args;

}

BB Box module: Grid

300px

1fr

300px

grid-column: 1/-1

CSS Drop Cap

Veniam nisi ut sunt sint enim reprehenderit consequat qui. Pariatur eiusmod occaecat elit voluptate cupidatat do proident. Sunt aliqua nostrud dolor. Eu pariatur voluptate deserunt quis. Fugiat. Ex ut aute tempor minim. Non incididunt mollit dolore fugiat dolore do aliqua.

Lorem labore laboris id consectetur in. Consequat sint ea ex nulla aute ullamco. Officia magna laborum excepteur deserunt. Magna excepteur cillum cillum amet. Minim nisi aliquip aliquip ad ullamco. Nostrud consequat in duis nisi qui Lorem excepteur dolore ipsum. Anim mollit labore ut laborum aute nulla dolore cupidatat. Ex excepteur duis ea commodo non.

Duis exercitation ipsum commodo proident duis Lorem et laborum occaecat. Ea ea et nisi est incididunt irure amet minim. Ad commodo velit sit velit. Exercitation anim anim exercitation sint ipsum proident duis et. Aute proident ex duis irure sit ipsum fugiat aute aliqua.

CSS

.my-drop-cap p:first-child:first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 1;
    font-weight: 700;
    margin-right: .25em;
}

CSS tabs sliding underline

Click tab labels below to see the underline moving to the clicked tab.

Source: https://codepen.io/everdimension/pen/xZLggo

HTML

<ul class="av-tabs">
    <li class="active"><a href="#">Tab 1 label</a></li>
    <li><a href="#">Tab 2 label</a></li>
    <li><a href="#">Tab 3 label</a></li>
    <li class="av-underline"></li>
</ul>

CSS

ul.av-tabs {
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid black;
}
ul.av-tabs li {
    text-align: center;
    width: 33.333%;
}
ul.av-tabs li.av-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background-color: black;
	transform-origin: 0 0;
	transition: transform .3s;
}
ul.av-tabs li a {
    display: block;
    padding: 20px;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    color: black;
    transition: width .3s, right .3s;
}

ul.av-tabs li:first-child.active ~ .av-underline {
	transform: translateX(0) scaleX(0.333);
}
ul.av-tabs li:nth-child(2).active ~ .av-underline {
	transform: translateX(33.333%) scaleX(0.333);
}
ul.av-tabs li:nth-child(3).active ~ .av-underline {
	transform: translateX(calc(33.333% * 2)) scaleX(0.333);
}

jQuery(function($) {
    $("ul.av-tabs li").click( function(e) {
        e.preventDefault();
        $(this).siblings().removeClass("active");
        $(this).addClass("active");
    })
});

Custom BB Photo module (Zack Pyle)

Animate On Scroll WP Plugin