Esse banner não estará visível no editor, mas você o verá na visualização e no site ativo 💡 <\/p>\n<\/div>
\n<\/p>
Como adicionar um banner estático no topo do site<\/h1>
O banner estático ficará assim:<\/p>
\n<\/p>
![\"Um](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/7f1db466-1ede-46f5-b844-fc31ec9ee2f7.jpg\")
<\/div>Vá até as Configurações de integrações<\/b> e cole o código abaixo na seção Código customizado<\/a><\/b>.<\/p> \n<\/p> OBSERVAÇÕES<\/b><\/p> No código abaixo, substitua as palavras This is the text inside the banner<\/i><\/b> pelo texto que você quer que apareça no seu banner<\/p>\n<\/li>\n Se você tem conhecimento em CSS<\/a><\/b>, também vai poder editar os atributos específicos para personalizar o tamanho e as cores do banner <\/p>\n<\/li>\n<\/ul> \n<\/p> O banner animado ficará assim, com os textos passando da esquerda para a direita:<\/p> \n<\/p> Vá até as Configurações de integrações<\/b> e cole o código abaixo na seção Código customizado<\/a><\/b>.<\/p> \n<\/p> OBSERVAÇÕES<\/b><\/p> No código abaixo, substitua as frases This is the first text<\/i><\/b> e This is the second text <\/i><\/b>pelos os textos que você quer que apareçam no seu banner<\/p>\n<\/li>\n Se você tem conhecimento em CSS<\/a><\/b>, também vai poder editar os atributos específicos para personalizar o tamanho e as cores do banner<\/p>\n<\/li>\n<\/ul> \n<\/p> O banner estático ficará assim no final das páginas do site:<\/p> \n<\/p> Vá até as Configurações de integrações<\/b> e cole o código abaixo na seção Código customizado<\/a><\/b>.<\/p> \n<\/p> OBSERVAÇÕES<\/b><\/p>\n
<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><\/code><\/pre>Como adicionar um banner animado no topo do site<\/h1>
![\"Um](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/cb692eb6-6108-456f-9a32-1ddda86055de.gif\")
<\/div>\n
<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;
padding-left: 100%;
position: absolute;
}
#bannerTextOne {
animation: bannerAnimationOne 20s linear infinite;
}
#bannerTextTwo {
animation: bannerAnimatioTwo 20s linear infinite;
}
@keyframes bannerAnimationOne {
0% {
transform: translateX(0);
visibility: visible;
}
50% {
transform: translateX(-100%);
visibility: hidden;
}
100% {
transform: translateX(-100%);
visibility: hidden;
}
}
@keyframes bannerAnimatioTwo {
0% {
transform: translateX(0);
visibility: hidden;
}
50% {
transform: translateX(0);
visibility: visible;
}
100% {
transform: translateX(-100%);
visibility: visible;
}
}
@media screen and (max-width: 920px) {
@keyframes addPadding {
to {
padding-top: 9.9vh;
}
}
#movingBannerTop {
height: 10vh;
}
#bannerTextOne {
animation: bannerAnimationOne 15s linear infinite;
}
#bannerTextTwo {
animation: bannerAnimatioTwo 15s linear infinite;
}
}
<\/style><\/code><\/pre>Como adicionar um banner estático no final da página<\/h1>
![\"Um](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/6cc5c3d4-2bda-4419-bfb4-dc3f285c01c3.jpg\")
<\/div>