With the help of custom code, you can add various banners to your website:

NOTE: Such a banner won't be visible within the editor, but you'll see it in the preview and on the live website

Banner With Static Text Above the Navigation Menu

This banner looks like this:

A banner with static text above the website's navigation menu

Copy the code below and paste it into the Custom code field in your website's integrations settings.

NOTES:

Replace the phrase This is the text inside the banner with your own text before saving the changes
If you know CSS, you can also customize the banner size and colors by editing specific attributes

<style>
    header {
        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;
    }
    #bannerTop p {
        color: #fff;
    }
    @media screen and (max-width: 920px) {
        header {
            padding-top: 9.9vh;
        }
        #bannerTop {
            height: 10vh;
        }
    }
</style>
<script>
    const bannerText = 'This is the text inside the banner';
    const topBanner = document.createElement('div');
    topBanner.id = 'bannerTop';
    topBanner.insertAdjacentHTML("afterbegin", `<p>${bannerText}</p>`);
    setInterval(() => {
        if (!document.querySelector('#bannerTop')) {
            document.querySelector('main').prepend(topBanner);
        }
    });
</script>

Banner With Running Text Above the Navigation Menu

This banner looks like this:

A banner with static text at the bottom of a website

Copy the code below and paste it into the Custom code field in your website's integrations settings.

NOTES:

Replace the phrases This is the first text and This is the second text with your own text before saving the changes
If you know CSS, you can also customize the banner size and colors by editing specific attributes

<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>`);
    setInterval(() => {
        if (!document.querySelector('#movingBannerTop')) {
            document.querySelector('main').prepend(topMovingBanner);
        }
    });
</script>
<style>
    header {
        padding-top: 4.9vh;
    }
    #movingBannerTop {
        z-index: 20;
        position: fixed;
        top: 0;
        width: 200%;
        height: 5vh;
        background-color: #CF8D6D;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    #movingBannerTop p {
        color: #fff;
        display: inline-block;
        white-space: nowrap;
        animation: banner-animation 20s linear infinite;
        width: 100%;
        position: absolute;
    }
    #bannerTextOne {
        animation-delay: 0s !important;
    }
    #bannerTextTwo {
        animation-delay: 10s !important;
        visibility: hidden;
    }
    @keyframes banner-animation {
        0% {
            transform: translateX(-10%);
        }
        50% {
            visibility: visible;
        }
        100% {
            transform: translateX(100%);
            visibility: hidden;
        }
    }
    @media screen and (max-width: 920px) {
        header {
            padding-top: 9.9vh;
        }
        #movingBannerTop {
            height: 10vh;
        }
        #movingBannerTop p {
            animation: banner-animation 10s linear infinite;
        }
        #bannerTextTwo {
            animation-delay: 5s !important;
            visibility: hidden;
        }
    }
</style>

Banner With Static Text at the Bottom of a Website

This banner looks like this:

Copy the code below and paste it into the Custom code field in your website's integrations settings.

NOTES:

Replace the phrase This is the text inside the banner with your own text before saving the changes
If you know CSS, you can also customize the banner size and colors by editing specific attributes

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