fonctionnalités courantes
afficher un écran d'accueil temporaire 
afficher un écran d'accueil temporaire
Voici comment afficher un écran d'accueil (par exemple pour vos sites en constructions).
Ajoutez le code suivant dans la partie "Paramètres du site > Code javascript (avancé)
const message = `En construction... Revenez très prochainement !`;
const textColor = '#2b2b2b';
window.onload=()=> { document.body.innerHTML=`<p style="height:100%;width:100%;background:white;display:flex;justify-content:center;align-items:center;color:${textColor};font-size:clamp(22px,4vw,60px);font-weight:700;padding:50px;text-align:center;flex-direction: column;">${document.title}<i>${message}</i></p>`;};if(document.body)document.body.innerHTML=''Attention à partir de cet instant vous devrez ajouter ?nojs à la fin de l'URL de votre site pour passer votre écran d'accueil et accéder à votre site.
exemple : https://monsite.eco devient https://monsite.eco?nojs
Soyez libre de changer le message ou la couleur du texte à votre convenance.
Pour retirer cet écran d'accueil lorsque votre site sera prêt à être dévoilé, il vous suffira de supprimer ce bout de code. Ajouter vos réseaux sociaux dans le menu
Ajouter vos réseaux sociaux dans le menu
Ajoutez le code suivant dans la partie "Paramètres du site > Code javascript (avancé)
Pensez ensuite à recharger la page afin d'appliquer les changements.
Il vous suffira de retirer ou remplir les variables du début pour les afficher / masquer.
const rss= 'https://monsite/feed.xml'
const twitch= 'https://www.twitch.tv/...'
const linkedin = 'https://www.linkedin.com/...'
const mastodon= 'https://...'
const bluesky= 'https://bsky.app/profile/...'
const discord = 'https://...'
const youtube = 'https://youtube.com/...'
const facebook = 'https://facebook.com/...'
const instagram= 'https://instagram.com/...'
window.addEventListener("load",(event) => {
setTimeout(()=>{
document.querySelector(".rnav").insertAdjacentHTML('afterend', `<nav class="social-navigation" role="navigation" aria-label="Menu réseaux sociaux">
<div class="menu-reseaux-sociaux-container"><ul>
${typeof rss!== 'undefined' ? '<li class="menu-item"><a href="'+rss+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Facebook</span><svg viewBox="0 0 26 26" width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path d="M23.085 2.915q-1.246-1.247-3.002-1.247H5.918q-1.756 0-3.003 1.247T1.668 5.918v14.164q0 1.756 1.247 3.003t3.003 1.247h14.164q1.756 0 3.003-1.247t1.247-3.003V5.918q0-1.756-1.247-3.003M8.67 20.001q-.554.553-1.336.553A1.82 1.82 0 0 1 6 20.001a1.82 1.82 0 0 1-.554-1.335q0-.783.554-1.336a1.82 1.82 0 0 1 1.335-.553q.783 0 1.336.553.553.554.553 1.336 0 .78-.553 1.335m5.599.405a.47.47 0 0 1-.34.148h-1.888a.47.47 0 0 1-.472-.442q-.163-2.273-1.786-3.896T5.888 14.43a.47.47 0 0 1-.443-.472V12.07q0-.191.148-.34a.44.44 0 0 1 .354-.132q3.423.192 5.843 2.612t2.612 5.843a.44.44 0 0 1-.133.353m5.666 0a.47.47 0 0 1-.34.148h-1.888a.44.44 0 0 1-.325-.133.5.5 0 0 1-.147-.324 11.4 11.4 0 0 0-1.645-5.578 11.8 11.8 0 0 0-4.11-4.109 11.4 11.4 0 0 0-5.577-1.645.5.5 0 0 1-.325-.147.44.44 0 0 1-.132-.325V6.404q0-.19.147-.339a.4.4 0 0 1 .34-.132q2.272.073 4.39.826a14.1 14.1 0 0 1 3.836 2.058 15.7 15.7 0 0 1 3.024 3.025 14.1 14.1 0 0 1 2.059 3.836q.752 2.117.826 4.39a.35.35 0 0 1-.133.338"/></svg></a></li>':''}
${typeof instagram!== 'undefined' ? '<li class="menu-item"><a href="'+instagram+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Instagram</span><svg class="svg-icon" width="26" height="26" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.671.31.42.163.72.358 1.035.673s.51.615.673 1.035c.123.317.27.794.31 1.671.043.949.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.671-.163.42-.358.72-.673 1.035s-.615.51-1.035.673c-.317.123-.794.27-1.671.31-.949.043-1.233.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.671-.31a2.8 2.8 0 0 1-1.035-.673 2.8 2.8 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.949-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.671.163-.42.358-.72.673-1.035s.615-.51 1.035-.673c.317-.123.794-.27 1.671-.31.949-.043 1.234-.052 3.637-.052M12 3c-2.444 0-2.751.01-3.711.054-.958.044-1.612.196-2.184.418a4.4 4.4 0 0 0-1.594 1.039c-.5.5-.808 1.002-1.038 1.594-.223.572-.375 1.226-.419 2.184C3.01 9.249 3 9.556 3 12s.01 2.751.054 3.711c.044.958.196 1.612.418 2.185.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.267.054 3.711.054s2.751-.01 3.711-.054c.958-.044 1.612-.196 2.185-.418a4.4 4.4 0 0 0 1.594-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.375-1.227.418-2.185.044-.96.054-1.267.054-3.711s-.01-2.751-.054-3.711c-.044-.958-.196-1.612-.418-2.185A4.4 4.4 0 0 0 19.49 4.51c-.5-.5-1.002-.808-1.594-1.038-.572-.222-1.227-.375-2.185-.418C14.751 3.01 14.444 3 12 3m0 4.378a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m4.804-8.884a1.08 1.08 0 1 0 .001 2.161 1.08 1.08 0 0 0-.001-2.161"/></svg></a></li>':''}
${typeof facebook!== 'undefined' ? '<li class="menu-item"><a href="'+facebook+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Facebook</span><svg class="svg-icon" width="26" height="26" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10"/></svg></a></li>':''}
${typeof twitch!== 'undefined' ? '<li class="menu-item"><a href="'+twitch+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Twitch</span><svg class="svg-icon" width="26" height="26" aria-hidden="true" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z"></path></svg></a></li>':''}
${typeof linkedin!== 'undefined' ? '<li class="menu-item"><a href="'+linkedin+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">LinkedIn</span><svg class="svg-icon" width="26" height="26" aria-hidden="true" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg></a></li>':''}
${typeof mastodon!== 'undefined' ? '<li class="menu-item"><a href="'+mastodon+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Mastodon</span><svg class="svg-icon" width="26" height="26" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c141.284 0 256 114.563 256 256 0 141.284-114.563 256-256 256C114.716 512 0 397.437 0 256 0 114.716 114.563 0 256 0zm134.506 175.487c-4.177-31.049-31.239-55.52-63.32-60.261-5.412-.801-25.918-3.717-73.421-3.717h-.354c-47.516 0-57.709 2.916-63.121 3.717-31.188 4.61-59.669 26.596-66.579 58.014-3.323 15.472-3.678 32.627-3.06 48.361.879 22.566 1.05 45.091 3.101 67.564a317.689 317.689 0 007.395 44.317c6.567 26.924 33.157 49.331 59.208 58.474a158.807 158.807 0 0086.622 4.57 126.28 126.28 0 009.367-2.561c6.988-2.22 15.173-4.701 21.191-9.063a.692.692 0 00.275-.525V362.6a.667.667 0 00-.066-.277.652.652 0 00-.721-.341 240.065 240.065 0 01-56.213 6.569c-32.58 0-41.342-15.46-43.849-21.895a67.833 67.833 0 01-3.812-17.259.611.611 0 01.054-.289.62.62 0 01.441-.361.644.644 0 01.293.006 235.518 235.518 0 0055.293 6.568c4.479 0 8.947 0 13.426-.12 18.732-.524 38.478-1.484 56.907-5.083.461-.091.921-.17 1.314-.288 29.073-5.583 56.739-23.104 59.55-67.472.104-1.748.368-18.296.368-20.108.012-6.16 1.983-43.699-.289-66.763zm-46.057 34.885v77.139H313.88v-74.867c0-15.761-6.569-23.8-19.929-23.8-14.689 0-22.045 9.511-22.045 28.291v40.981h-30.383v-40.981c0-18.78-7.371-28.291-22.058-28.291-13.281 0-19.915 8.039-19.915 23.8v74.867h-30.556v-77.139c0-15.761 4.025-28.283 12.072-37.565 8.303-9.26 19.193-14.014 32.711-14.014 15.645 0 27.468 6.016 35.35 18.033l7.607 12.767 7.62-12.767c7.881-12.017 19.705-18.033 35.323-18.033 13.506 0 24.395 4.754 32.724 14.014 8.041 9.274 12.056 21.796 12.048 37.565z"></path></svg></a></li>':''}
${typeof bluesky!== 'undefined' ? '<li class="menu-item"><a href="'+bluesky+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Bluesky</span><svg class="svg-icon" width="26" height="26" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 452.266"><path d="M110.985 30.442c58.695 44.217 121.837 133.856 145.013 181.961 23.176-48.105 86.322-137.744 145.016-181.961 42.361-31.897 110.985-56.584 110.985 21.96 0 15.681-8.962 131.776-14.223 150.628-18.272 65.516-84.873 82.228-144.112 72.116 103.55 17.68 129.889 76.238 73 134.8-108.04 111.223-155.288-27.905-167.385-63.554-3.489-10.262-2.991-10.498-6.561 0-12.098 35.649-59.342 174.777-167.382 63.554-56.89-58.562-30.551-117.12 72.999-134.8-59.239 10.112-125.84-6.6-144.112-72.116C8.962 184.178 0 68.083 0 52.402c0-78.544 68.633-53.857 110.985-21.96z"></path></svg></a></li>':''}
${typeof discord!== 'undefined' ? '<li class="menu-item "><a href="'+discord+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Discord</span><svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" width="26" height="26" viewBox="0 0 512 512"><path d="M256 0c141.385 0 256 114.615 256 256S397.385 512 256 512 0 397.385 0 256 114.615 0 256 0zm104.932 160.621a250.428 250.428 0 00-62.383-19.182 173.883 173.883 0 00-7.966 16.243 232.557 232.557 0 00-34.619-2.603c-11.569 0-23.195.879-34.622 2.58-2.334-5.509-5.044-10.971-7.986-16.223a252.58 252.58 0 00-62.397 19.222c-39.483 58.408-50.183 115.357-44.833 171.497a251.49 251.49 0 0076.502 38.398c6.169-8.327 11.695-17.192 16.386-26.417a161.682 161.682 0 01-25.813-12.319c2.164-1.569 4.281-3.186 6.325-4.756 23.912 11.231 50.039 17.088 76.473 17.088 26.436 0 52.562-5.857 76.475-17.089 2.069 1.688 4.186 3.305 6.325 4.755a162.693 162.693 0 01-25.86 12.352 183.969 183.969 0 0016.387 26.397 250.498 250.498 0 0076.553-38.392l-.006.007c6.277-65.104-10.725-121.53-44.941-171.558zM205.78 297.63c-14.908 0-27.226-13.53-27.226-30.175 0-16.645 11.889-30.293 27.178-30.293 15.29 0 27.511 13.648 27.25 30.293-.262 16.645-12.008 30.175-27.202 30.175zm100.439 0c-14.933 0-27.202-13.53-27.202-30.175 0-16.645 11.889-30.293 27.202-30.293 15.313 0 27.44 13.648 27.178 30.293-.261 16.645-11.984 30.175-27.178 30.175z"></path></svg></a></li>':''}
${typeof youtube!== 'undefined' ? '<li class="menu-item"><a href="'+youtube+'" target="_blank" rel="noreferrer"><span class="screen-reader-text">Youtube</span><svg class="svg-icon" width="26" height="26" aria-hidden="true" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg></a></li>':''}
</ul></div></nav>
`)
},500)
})
et le CSS suivant dans la partie "Styles personnalisés (avancé)" :
.social-navigation{
width: 100%;
padding: 15px;
a{
--icons-color: black;
color: var(--icons-color);
stroke:var(--icons-color);
fill:var(--icons-color);
display: inline-block;
padding: 0 6.6px;
text-decoration: none;
border-bottom: 1px solid transparent;
/* changer la couleur au survol*/
&:hover{--icons-color: white; }
}
ul{
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding-left: 0;
}
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal !important;
border: 0;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
} Faire une section avec un fond coloré
Faire une section avec un fond coloré
Insérez le code suivant dans les styles de vos vignettes.
overflow:visible!important;
will-change:unset!important;
animation:none!important;
opacity:1!important;
&:before{
content: "";
pointer-events:none;
position: absolute;
background:#fff;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
top: 0px;
bottom: 0%;
z-index: -1;
}
Vous pouvez aussi déclarer une classe depuis les styles du site ou de la page afin de l'appliquer à vos vignettes.
Afin d'éviter le chevauchement du fond des vignettes avec les vignettes suivantes, nous réinitialisons leur valeurs de will-change et animation. Plus d'infos à propos du "stacking context".
Appliquez des formes à vos vignettes
Appliquez des formes à vos vignettes
Vous pouvez "découper" votre vignette avec par exemple un masque SVG via la propriété mask-image.
Insérez par exemple le code suivant dans les styles de vos vignettes.
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1182 1301' role='img' aria-hidden='true'%3E%3Cpath d='M969.797 10.15c44.464 1.46 89.04 3.08 133.38-.633 33.753-2.827 62.832-12.09 72.6 23.795 10.194 37.45-.523 89.883 1.18 129.345l4.72 171.272c2.347 197.53-8.84 394.9-9.523 592.448l.836 203.07c.565 47.22 24.16 132.67-40.54 140.27-15.618 1.834-31.38-.25-47.056-1.507-162.526-13.032-328.52 28.697-491.667 32.163a2776.42 2776.42 0 01-301.541-9.988 2765.78 2765.78 0 01-157.816-18.425c-26.613-3.886-98.774-6.165-118.52-26.952-23.065-24.28-13.3-69.178-9.536-98.673 5.44-42.745 8.86-85.493 11.52-128.63 6.033-97.835-7.62-195.84-6.667-293.862 1.143-117.075 5.723-184.65-.378-301.563-3.122-59.817 2.9-169.11-2.117-228.788-3.54-42.2-14.384-123.63-4.842-165.632C12.117-8.81 137.387 1.262 162.75 1.28l291.472.633 515.574 8.24z' fill='%231519d3' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
Vous pouvez encoder vos SVG via par exemple le site suivant : https://yoksel.github.io/url-encoder/
Vous pouvez aussi déclarer une classe depuis les styles du site ou de la page afin de l'appliquer à d'autres vignettes.
Ajoutez des décorations
Ajoutez des décorations
Vous pouvez ajouter n'importe quelle forme pour décorer vos vignettes via un SVG et la propriété mask-image.
Insérez par exemple le code suivant dans les styles de vos vignettes.
--quoteShape:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg%3E%3Cg%3E%3Cpath d='M96.6,29.5C51.9,49.8,10,97.9,10,160.1c0,38.4,24.4,66.3,54.4,66.3c31.4,0,47.5-23.7,47.5-45.4c0-25.1-17.5-44.7-43.3-44.7c-7.7,0-15.4,2.1-19.6,5.6c0-30.7,24.4-67,62.1-85.9L96.6,29.5z M230.6,29.5c-44.7,20.2-87.3,68.4-87.3,130.6c0,38.4,25.1,66.3,55.1,66.3c31.4,0,47.5-23.7,47.5-45.4c0-25.1-17.5-44.7-44-44.7c-7.7,0-14.7,2.1-18.9,5.6c0-30.7,24.4-67,62.1-85.9L230.6,29.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
overflow:visible!important;
&::after,&::before{
pointer-events:none;
position:absolute;
content:"";
width: 50px;
height: 50px;
background: black;
mask-image: var(--quoteShape);
}
&::after{
top: -25px;
left: -15px;
}
&::before{
bottom: -25px;
right: -15px;
transform:rotate(180deg);
}
Retirer l'effet flou sur le bas de la page
Retirer l'effet flou sur le bas de la page
1. Appuyez sur 
site puis Styles personnalisés (avancé) et ajoutez le code CSS suivant :
site puis Styles personnalisés (avancé) et ajoutez le code CSS suivant :/* retrait de l'effet flou en pied de page */
.botbar::before{
backdrop-filter: none!important;
mask-image: none!important;
-webkit-backdrop-filter: none!important;
-webkit-mask-image: none!important;
}