Estos banners no serán visibles en el editor, pero sí en la vista previa y en el sitio web activo 💡 <\/p>\n<\/div>
\n<\/p>
Banner con texto estático encima del menú de navegación<\/h1>
Este banner tiene el siguiente aspecto:<\/p>
\n<\/p>
![\"Un](\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/01\/8cb680bd-5bc7-492d-8401-d6b8799c302f.jpg\")
<\/div>Copie el código siguiente y péguelo en el campo Código personalizado<\/a><\/b> de la configuración de integraciones<\/b> de su sitio web.<\/p> \n<\/p> NOTAS<\/b><\/p> Sustituye la frase This is the text inside the banner<\/i><\/b> por tu propio texto antes de guardar los cambios<\/p>\n<\/li>\n Si sabes CSS<\/a><\/b>, también puedes personalizar el tamaño y los colores del banner editando atributos específicos<\/p>\n<\/li>\n<\/ul> \n<\/p> Este banner tiene el siguiente aspecto:<\/p> \n<\/p> Copie el código siguiente y péguelo en el campo Código personalizado<\/a><\/b> de la configuración de integraciones<\/b> de su sitio web. <\/p> \n<\/p> NOTAS<\/b><\/p> Sustituye las frases This is the first text<\/i><\/b> y This is the first text<\/i><\/b> por tu propio texto antes de guardar los cambios<\/p>\n<\/li>\n Si sabes CSS<\/a><\/b>, también puedes personalizar el tamaño y los colores del banner editando atributos específicos<\/p>\n<\/li>\n<\/ul> \n<\/p> Este banner tiene el siguiente aspecto:<\/p> \n<\/p> Copie el código siguiente y péguelo en el campo Código personalizado<\/a><\/b> de la configuración de integraciones<\/b> de su sitio web. <\/p> \n<\/p> NOTAS<\/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>Banner con texto corrido encima del menú de navegación<\/h1>
![\"Un](\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/01\/eeadf45d-b074-4647-991d-fafc6fc8f6ce.jpg\")
<\/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>Banner con texto estático en la parte inferior del sitio web<\/h1>
![\"Un](\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/01\/c114f010-1289-40c4-8f39-4240cec29dd7.jpg\")
<\/div>