Une telle bannière ne sera pas visible dans l’éditeur, mais vous la verrez dans l’aperçu et sur le site web en ligne 💡 <\/p>\n<\/div>
\n<\/p>
Bannière avec texte statique au-dessus du menu de navigation<\/h1>
Cette bannière ressemble à ceci :<\/p>
\n<\/p>
![\"Une](\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2022\/12\/ef57b651-0a4f-4280-b910-516926ec6d83.jpg\")
<\/div>Copiez le code ci-dessous et collez-le dans le champ Code personnalisé<\/a><\/b> des paramètres d’intégration de votre site web.<\/p> \n<\/p> REMARQUES <\/b>:<\/p> Remplacez la phrase This is the text inside the banner<\/i> <\/b>par votre propre texte avant d’enregistrer les modifications<\/p>\n<\/li>\n Si vous avez des connaissances en CSS<\/a><\/b>, vous pouvez également personnaliser la taille et les couleurs de la bannière en modifiant des attributs spécifiques<\/p>\n<\/li>\n<\/ul> \n<\/p> Cette bannière ressemble à ceci :<\/p> \n<\/p> Copiez le code ci-dessous et collez-le dans le champ Code personnalisé<\/a><\/b> des paramètres d’intégration de votre site web.<\/p> \n<\/p> REMARQUES <\/b>:<\/p> Remplacez les phrases This is the first text<\/i> <\/b>one et This is the second text<\/i><\/b> par votre propre texte avant de sauvegarder les modifications<\/p>\n<\/li>\n Si vous avez des connaissances en CSS<\/a><\/b>, vous pouvez également personnaliser la taille et les couleurs de la bannière en modifiant des attributs spécifiques<\/p>\n<\/li>\n<\/ul> \n<\/p> Cette bannière ressemble à ceci :<\/p> \n<\/p> Copiez le code ci-dessous et collez-le dans le champ Code personnalisé<\/a><\/b> des paramètres d’intégration de votre site web.<\/p> \n<\/p> REMARQUES <\/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>Bannière avec texte courant au-dessus du menu de navigation<\/h1>
![\"Une](\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2022\/12\/9cf70a3e-a420-4f1c-ae4f-4fa4c382896a.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>Bannière avec texte statique au bas d’un site web<\/h1>
![\"Une](\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2022\/12\/e32982da-e0a1-4afb-aa27-424fe95b0b66.jpg\")
<\/div>