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

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