Test Page 25

GSAP

This page is animated by Greensock GSAP

CSS Border Radius

BB Photo module

BB HTML module

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

CSS Mask

BB Photo module

BB HTML module

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Columns layout with CSS Flexbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Columns layout with CSS Grid

Heading

Custom field value

Heading

Custom field value

Heading

Custom field value

Heading

Custom field value

Heading

Custom field value

HTML markup

<div class="av-columns-layout">
    <div class="av-col-1">Heading</div>
    <div class="av-col-2">Custom field value</div>
    <div class="av-col-1">Heading</div>
    <div class="av-col-2">Custom field value</div>
    <div class="av-col-1">Heading</div>
    <div class="av-col-2">Custom field value</div>
    <div class="av-col-1">Heading</div>
    <div class="av-col-2">Custom field value</div>
    <div class="av-col-1">Heading</div>
    <div class="av-col-2">Custom field value</div>
</div>

Custom CSS

.av-columns-layout {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
    width: fit-content;
    margin: 0 auto;
}
.av-columns-layout [class*="av-col"] {
    padding: 10px 100px 10px 20px;
}
.av-columns-layout .av-col-1 {
    background-color: red;
    font-weight: 700;
    color: white;
}
.av-columns-layout .av-col-2 {
    background-color: #e7e7e7;
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
    .av-columns-layout {
        grid-template-columns: 1fr;
    }
}

Toggle element visibility from a button

BB elements

Set custom classes on:

The toggler button: av-visibility-toggler
The target element to change visibility on: av-visibility-target

Let the button's label empty in the module UI, it will be dynamically set by the JS ("Show/Hide Element").

Custom CSS

/* Initially hide the target element */ 

body:not(.fl-builder-edit) .av-visibility-target {
    display: none;
}

Custom JS

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

    // Vars
    var Toggler = '.av-visibility-toggler a';
    var Target = '.av-visibility-target';
    var showText = 'Show Element';
    var hideText = 'Hide Element';

    if( !$('body').hasClass('fl-builder-edit') ) {

        // Init toggler text
        $(Toggler).html(showText);

        // Toggle target visibility & update toggler text
        $(Toggler).on('click', function(e) {
            e.preventDefault();
            $(Target).slideToggle(500, "swing"); 
            if( $(e.target).html() == showText ) {
                $(this).html(hideText);
            } else {
                $(this).html(showText);
            }
            
        });
        
    }
    
});

TEC Events order by Start Date

Séminaire
5 mai

Colloque
1er mai – 14 à 16 h

Forum des associations
1er mai – 13 à 18 h

PP Content Grid module (Carousel mode)

PowerPack Flip Box with image only (face & back)

Titre en avant

Description en avant

PP Flip Box module Settings

General tab: Icon Type > Image (face image)
Back Content Tab: Insert an image in the Content field (back image)

Custom CSS

.av-flip-box .pp-flipbox {
    padding: 0;
}
.av-flip-box .pp-flipbox .pp-icon-wrapper, 
.av-flip-box .pp-flipbox-image {
    margin: 0;
}
.av-flip-box .pp-flipbox-image img, 
.av-flip-box .pp-flipbox-description p img {
    object-fit: cover;
    width: 100%;
    height: auto;
}
.av-flip-box .pp-flipbox-back .pp-flipbox-description {
    height: 100%;
}

GSAP

CSS Border Radius

Heading

Heading

Heading

Heading

CSS Mask

Heading

Heading

Columns layout with CSS Flexbox

Columns layout with CSS Grid

Toggle element visibility from a button

TEC Events order by Start Date

Séminaire 5 mai

Colloque 1er mai – 14 à 16 h

Forum des associations 1er mai – 13 à 18 h

PowerPack Flip Box with image only (face & back)

Titre en avant

Séminaire
5 mai

Colloque
1er mai – 14 à 16 h

Forum des associations
1er mai – 13 à 18 h