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

Une telle bannière ne sera pas visible dans l'éditeur, mais vous la verrez dans l'aperçu et sur le site web en ligne 💡

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

Cette bannière ressemble à ceci :

Une bannière avec un texte statique au-dessus du menu de navigation du site web

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 :

Une bannière avec un texte statique au bas d'un site web

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>