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>