How to add a banner
Learn how to add a banner to your website
Updated over a week ago

With the help of custom code, you can add a banner to your website:

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

Banner With Static Text Above the Navigation Menu

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 have any CSS knowledge, 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:

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 have any CSS knowledge, 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');
const movingText = document.createElement('marquee');
topMovingBanner.id = 'movingBannerTop';
movingText.setAttribute("loop", "infinite")
movingText.scrollAmount = '20';
topMovingBanner.append(movingText);
movingText.insertAdjacentHTML("afterbegin", `<p>${bannerTextOne}</p><p>${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: 100%;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #CF8D6D;
}
#movingBannerTop p {
color: #fff;
display: inline-block;
}
#movingBannerTop p:first-child {
margin-right: 100vw;
}
@media screen and (max-width: 920px) {
header {
padding-top: 9.9vh;
}
#movingBannerTop {
height: 10vh;
}
}
</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 have any CSS knowledge, 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>
Did this answer your question?