Com a ajuda de um código personalizado, você pode adicionar banners em vários lugares do seu site.

Esse banner não estará visível no editor, mas você o verá na visualização e no site ativo 💡

Como adicionar um banner estático no topo do site

O banner estático ficará assim:

Um banner com texto estático acima do menu de navegação do site

Vá até as Configurações de integrações e cole o código abaixo na seção Código customizado.

OBSERVAÇÕES

No código abaixo, substitua as palavras This is the text inside the banner pelo texto que você quer que apareça no seu banner
Se você tem conhecimento em CSS, também vai poder editar os atributos específicos para personalizar o tamanho e as cores do banner

<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>

Como adicionar um banner animado no topo do site

O banner animado ficará assim, com os textos passando da esquerda para a direita:

Um banner com texto contínuo acima do menu de navegação do site

Vá até as Configurações de integrações e cole o código abaixo na seção Código customizado.

OBSERVAÇÕES

No código abaixo, substitua as frases This is the first text e This is the second text pelos os textos que você quer que apareçam no seu banner
Se você tem conhecimento em CSS, também vai poder editar os atributos específicos para personalizar o tamanho e as cores do banner

<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>

Como adicionar um banner estático no final da página

O banner estático ficará assim no final das páginas do site:

Um banner com texto estático na parte inferior de um site

Vá até as Configurações de integrações e cole o código abaixo na seção Código customizado.

OBSERVAÇÕES

No código abaixo, substitua a frase This is the text inside the banner pelo texto que você quer que apareça no seu banner
Se você tem conhecimento em CSS, também vai poder editar os atributos específicos para personalizar o tamanho e as cores do banner

<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>