À l’aide du code personnalisé, vous pouvez ajouter une bannière à votre site web 👇

Bannière avec texte statique au-dessus du menu de navigation

Cette bannière ressemble à ceci :

Copiez le code ci-dessous et collez-le dans le champ Code personnalisé des paramètres d’intégration de votre site web.

REMARQUES :

• Remplacez la phrase This is the text inside the banner par votre propre texte avant d’enregistrer les modifications

• Si vous avez des connaissances en CSS, vous pouvez également personnaliser la taille et les couleurs de la bannière en modifiant des attributs spécifiques

<script>
    const bannerText = 'This is the text inside the banner';
    const topBanner = document.createElement('div');

    topBanner.id = 'bannerTop';
    topBanner.insertAdjacentHTML("afterbegin", `<p>${bannerText}</p>`);

    setTimeout(() => {
        requestAnimationFrame(() => {
            document.body.append(topBanner);
        })

        setTimeout(() => {
            requestAnimationFrame(() => {
                topBanner.classList.add('visible');
            })
        }, 50);
    }, 1500);
</script>

<style>
    header {
        animation-delay: 1.5s;
        animation-duration: .4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        animation-name: addPadding;
    }

    @keyframes addPadding {
        to {
            padding-top: 4.9vh;
        }
    }

    #bannerTop {
        z-index: 20;
        position: fixed;
        top: 0;
        width: 100%;
        height: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #CF8D6D;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: all .3s ease;
    }

    #bannerTop.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #bannerTop p {
        color: #fff;
    }

    @media screen and (max-width: 920px) {
        #bannerTop {
            height: 10vh;
            flex-direction: column;
        }

        @keyframes addPadding {
            to {
                padding-top: 9.9vh;
            }
        }
    }
</style>

Bannière avec texte courant au-dessus du menu de navigation

Cette bannière ressemble à ceci :

Copiez le code ci-dessous et collez-le dans le champ Code personnalisé des paramètres d’intégration de votre site web.

REMARQUES :

• Remplacez les phrases This is the first text one et This is the second text par votre propre texte avant de sauvegarder les modifications

• Si vous avez des connaissances en CSS, vous pouvez également personnaliser la taille et les couleurs de la bannière en modifiant des attributs spécifiques

<script>
    const bannerTextOne = 'This is the first text';
    const bannerTextTwo = 'This is the second text';
    const topMovingBanner =  document.createElement('div');

    topMovingBanner.id = 'movingBannerTop';
    topMovingBanner.insertAdjacentHTML("afterbegin", `<p id="bannerTextOne">${bannerTextOne}</p><p id="bannerTextTwo">${bannerTextTwo}</p>`);

    setTimeout(() => {
        requestAnimationFrame(() => {
            document.body.append(topMovingBanner);
        })
        setTimeout(() => {
            requestAnimationFrame(() => {
                topMovingBanner.classList.add('visible');
            });
        }, 50);
    }, 1500);
</script>

<style>
    header {
        animation-delay: 1.5s;
        animation-duration: .4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        animation-name: addPadding;
    }

    @keyframes addPadding {
        to {
            padding-top: 4.9vh;
        }
    }

    #movingBannerTop {
        z-index: 20;
        position: fixed;
        top: 0;
        width: 100%;
        height: 5vh;
        background-color: #CF8D6D;
        overflow: hidden;
        display: flex;
        align-items: center;
        opacity: 0;
        transform: translateY(-100%);
        transition: all .3s ease;
    }

    #movingBannerTop.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #movingBannerTop p {
        color: #fff;
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        position: absolute;
    }

    #bannerTextOne {
        animation: bannerAnimationOne 20s linear infinite;
    }

    #bannerTextTwo {
        animation: bannerAnimatioTwo 20s linear infinite;
    }

    @keyframes bannerAnimationOne {
        0% {
            transform: translateX(0);
            visibility: visible;
        }

        50% {
            transform: translateX(-100%);
            visibility: hidden;
        }

        100% {
            transform: translateX(-100%);
            visibility: hidden;
        }
    }

    @keyframes bannerAnimatioTwo {
        0% {
            transform: translateX(0);
            visibility: hidden;
        }

        50% {
            transform: translateX(0);
            visibility: visible;
        }

        100% {
            transform: translateX(-100%);
            visibility: visible;
        }
    }

    @media screen and (max-width: 920px) {
        @keyframes addPadding {
            to {
                padding-top: 9.9vh;
            }
        }

        #movingBannerTop {
            height: 10vh;
        }

        #bannerTextOne {
            animation: bannerAnimationOne 15s linear infinite;
        }

        #bannerTextTwo {
            animation: bannerAnimatioTwo 15s linear infinite;
        }
    }
</style>

Bannière avec texte statique au bas d’un site web

Cette bannière ressemble à ceci :

Copiez le code ci-dessous et collez-le dans le champ Code personnalisé des paramètres d’intégration de votre site web.

REMARQUES :

• Remplacez la phrase This is the text inside the banner par votre propre texte avant d’enregistrer les modifications

• Si vous avez des connaissances en CSS, vous pouvez également personnaliser la taille et les couleurs de la bannière en modifiant des attributs spécifiques

<script>
    const bannerText = 'This is the text inside the banner';
    const bannerBottom = document.createElement('div');
    const bannerCloseButton = document.createElement('span');

    bannerBottom.id = 'bottomBanner';
    bannerBottom.append(bannerCloseButton);
    bannerBottom.insertAdjacentHTML("beforeend", `<p>${bannerText}</p>`);

    bannerCloseButton.addEventListener('click', () => {
        bannerBottom.style.display = 'none';
    })

    setInterval(() => {
        if (!document.querySelector('#bottomBanner')) {
            document.querySelector('main').append(bannerBottom);
        }
    });
</script>

<style>
    #bottomBanner {
        background-color: rgba(255, 0, 0, 0.7);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5vh;
        z-index: 15;
    }

    #bottomBanner p {
        color: #000;
    }

    #bottomBanner span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 1rem;
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: .2s;
    }

    #bottomBanner span:hover {
        background-color: #fff3;
    }

    #bottomBanner span:before {
        transform: rotate(315deg);
    }

    #bottomBanner span:after {
        transform: rotate(45deg);
    }

    #bottomBanner span:before,
    #bottomBanner span:after {
        background-color: #000;
        position: absolute;
        top: 14px;
        left: 6px;
        width: 20px;
        height: 2px;
        content: '';
        border-radius: 2px;
    }

    @media screen and (max-width: 920px) {
        #bottomBanner {
            height: 10vh;

        }
    }
</style>