With the help of custom code, you can add a banner to your website.
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
<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>
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');
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;
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(100%);
visibility: hidden;
}
100% {
transform: translateX(-100%);
visibility: visible;
}
}
@media screen and (max-width: 920px) {
@keyframes addPadding {
to {
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 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>