With the help of custom code, you can add a banner to your 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 Random 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

<style>
.banner p {
color: white;
text-align: center;
}
.banner {
position: fixed;
top: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
background-color: #CF8D6D;
}
header.block-header {
padding-top: 5vh;
}
@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
header.block-header {
padding-top: 10vh;
}
}
</style>
<script>
const fixedBanner = document.createElement('div');
const paragraph = document.createElement('p');
fixedBanner.appendChild(paragraph);
paragraph.innerText = 'Random text';
fixedBanner.classList.add('banner');
document.body.prepend(fixedBanner);
</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 phrase Random text number one and Random text number two 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>
.movingText p {
color: white;
text-align: center;
display: inline-block;
}
.movingText p:first-child {
margin-right: 100vw;
}
.banner {
position: fixed;
top: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
background-color: #000;
}
header.block-header {
padding-top: 5vh;
}
@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
header.block-header {
padding-top: 10vh;
}
}
</style>
<script>
const movingBanner = document.createElement('div');
const movingDiv = document.createElement('marquee');
const firstParagraph = document.createElement('p');
const secondParagraph = document.createElement('p');
movingBanner.appendChild(movingDiv);
movingDiv.appendChild(firstParagraph);
movingDiv.append(secondParagraph);
firstParagraph.innerText = 'Random text number one';
secondParagraph.innerText = 'Random text number two';
movingDiv.classList.add('movingText');
movingDiv.setAttribute('loop', 'infinite');
movingDiv.setAttribute('scrollamount', '15');
movingBanner.classList.add('banner');
document.body.prepend(movingBanner);
</script>


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

<style>
.banner p {
color: black;
}
.banner {
position: fixed;
bottom: 0;
width: 100vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
background-color: rgba(99, 58, 58, 0.7);
justify-content: center;
}
</style>
<script>
const bannerBelow = document.createElement('div');
const closeBtn = document.createElement('span');
bannerBelow.setAttribute('id', 'banner');
bannerBelow.setAttribute('class', ‘banner’);
bannerBelow.innerHTML = '<p>Random text</p>';
bannerBelow.appendChild(closeBtn);
document.body.appendChild(bannerBelow);
</script>
Did this answer your question?