fonctionnalités courantes

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.…

Ajouter vos réseaux sociaux dans le menu

Ajoutez le code suivant dans la partie "Paramètres du site > Code javascript (avancé)

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(()=…

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;
backdrop-filter:none!important;
opacity:1!important;
&:before{
    content: "";
    pointer-events:none;
    position: absolute;
    background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    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…

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.…

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.4…

Retirer l'effet flou sur le bas de la page

1. Appuyez sur site

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