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 have any CSS knowledge, you can also customize the banner size and colors by editing specific attributes

<style>
.block-header {
top: 5vh !important;
}

@media screen and (max-width: 920px) {
.block-header {
top: 10vh !important;
}

}

.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;
}

@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
}

.marginBlock {
height: 5vh;
}

@media screen and (max-width: 920px) {
.marginBlock {
height: 10vh !important;
}
}
</style>

<script async data-rehype>
setTimeout(() => {
const newDiv = document.createElement('div')
const paragraph = document.createElement('p')
newDiv.appendChild(paragraph)
const text = "Random text"
paragraph.innerText = text
newDiv.classList.add('banner')
const bodyTag = document.body
bodyTag.appendChild(newDiv)

const marginBlock = document.createElement('div')
marginBlock.classList.add('marginBlock')
bodyTag.prepend(marginBlock)
}, 500);
</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>
.block-header {
top: 5vh !important;
}

@media screen and (max-width: 920px) {
.block-header {
top: 10vh !important;
}

}

.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;
}

@media screen and (max-width: 920px) {
.banner {
height: 10vh !important;
}
}

.marginBlock {
height: 5vh;
}

@media screen and (max-width: 920px) {
.marginBlock {
height: 10vh !important;
}
}
</style>

<script data-rehype>
setTimeout(() => {
const newDiv = document.createElement('div');
const movingDiv = document.createElement('marquee');
const firstParagraph = document.createElement('p');
const secondParagraph = document.createElement('p');

newDiv.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");

newDiv.classList.add('banner');
const bodyTag = document.querySelector('body');
bodyTag.appendChild(newDiv);

const marginBlock = document.createElement('div');
marginBlock.classList.add('marginBlock');
bodyTag.prepend(marginBlock);
}, 500);
</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 async data-rehype>
setTimeout(() => {
const newDiv = document.createElement('div')
const closeBtn = document.createElement('span')

newDiv.setAttribute('id', 'banner')
newDiv.setAttribute('class', 'banner')
newDiv.innerHTML = `<p>Random text</p>`
newDiv.appendChild(closeBtn)
document.body.appendChild(newDiv)

const bodyTag = document.body
bodyTag.appendChild(newDiv)
}, 500);
</script>
Did this answer your question?