Design et widgets

Sur cette page

L’apparence de tout votre site (couleurs, polices, boutons, effets) se règle en un seul endroit : l’onglet Design de l’éditeur. Les extras présents sur tout le site, comme les boutons de chat et la barre d’annonce, se trouvent dans l’onglet Widgets. Les modifications s’affichent instantanément dans l’aperçu et sont mises en ligne quand vous cliquez sur Publier.

Thèmes prêts à l’emploi

Dans l’éditeur, ouvrez l’onglet Design (panneau de gauche).
Sous Couleurs, les Thèmes prêts à l’emploi proposent des palettes complètes : Orange, Bleu nuit, Citron vert néon, Rose, Violet, Studio clair et Noir et blanc.
Cliquez sur l’un d’eux pour l’appliquer. Vous pouvez ensuite ajuster n’importe quelle couleur ci-dessous.

Astuce : partez du thème le plus proche de votre marque, puis changez seulement la Couleur d’accent pour la couleur de votre marque. Cela suffit souvent.

Couleurs

Couleur	Où elle est utilisée
Arrière-plan	Le fond de la page.
Cartes / surfaces	Les cartes, les boîtes et les sections plus claires.
Lignes et bordures	Les cadres et les séparateurs.
Texte principal	Les titres et le texte courant.
Texte secondaire	Le texte plus petit et plus discret.
Couleur d’accent (boutons, détails)	Les boutons, les mises en valeur, les liens, les icônes.
Texte sur la couleur d’accent	Le texte des boutons ; vérifiez qu’il reste lisible sur l’accent.
Couleur de la lueur	La douce lueur derrière les images et les sections.
Cartes claires (prix)	Les cartes de prix claires de Formules et tarifs.

Typographie

Police des titres et Police du texte : choisissez parmi une liste de polices web ; l’aperçu les charge au fur et à mesure.
Graisse des titres : de normale à extra-grasse.
Espacement des lettres des titres : des titres plus serrés ou plus aérés.
Taille du titre : agrandir ou réduire tous les titres.
Taille du texte : la taille de base du texte courant.
Petits libellés en majuscules : indique si les petits libellés au-dessus des titres sont en majuscules.

Formes

Arrondi des cartes et Arrondi des boutons : de carré à entièrement arrondi.
Apparence des boutons : Couleur unie, Dégradé ou Contour.
Largeur du contenu : la largeur maximale du contenu sur les grands écrans.

Effets et animations

Intensité de la lueur : la force de l’effet de lueur (0 le désactive).
Animation au défilement : la façon dont les sections apparaissent au défilement : Sans animation, Fondu, Apparition par le bas, Zoom ou Mise au point.
Les cartes se soulèvent au survol : les cartes montent légèrement sous la souris.
Grain de film sur le site : un léger effet de texture.
Défilement fluide : un défilement doux quand un lien mène à une section.

CSS personnalisé

Sous Avancé, le champ CSS personnalisé vous permet d’ajouter votre propre CSS pour des changements de design qui ne sont pas disponibles dans les réglages. Exemple :

.btn { text-transform: uppercase; }

Le CSS personnalisé s’adresse aux utilisateurs avancés. Si quelque chose ne va plus, supprimez ce que vous avez ajouté ou utilisez Ctrl+Z.

Le design de chaque section

Chaque section a aussi sa propre apparence dans Modifier → Apparence : arrière-plan (aucun, carte, lueur, accent), espacement, alignement du titre et image de fond avec assombrissement. Beaucoup de sections ajoutent leurs propres options, comme les colonnes, le style des cartes ou la forme des images. Voir Sections et éléments.

Widgets

Ouvrez l’onglet Widgets. Il comporte trois groupes : Boutons de chat, Barre d’annonce et Autre.

Boutons de chat

Des boutons flottants dans le coin de l’écran permettent aux visiteurs de vous contacter en un geste.

Activez Afficher les boutons de chat.
Sous Canaux, cliquez sur Ajouter un élément pour chaque canal et choisissez le Canal :
- WhatsApp, Viber, Telegram, Messenger, Instagram ;
- Appel, SMS, E-mail ;
- Autre lien (n’importe quelle adresse https://…, avec votre propre icône).
Remplissez Numéro, nom d’utilisateur ou adresse :
- WhatsApp, Viber et Appel : votre numéro au format international, par exemple +381601234567 ;
- Telegram et Instagram : votre nom d’utilisateur ;
- E-mail : votre adresse e-mail ;
- Autre lien : une adresse https://… complète.
Ajoutez si vous le souhaitez un Message prérempli (WhatsApp), un Texte à côté du bouton (facultatif) et une Couleur (vide = couleur de la marque).

Choisissez ensuite le comportement des boutons :

Réglage	Ce qu’il fait
Texte du bouton principal	Le texte du bouton principal (par défaut Chat).
Disposition	Un seul bouton (ouvre un petit menu avec tous les canaux) ou Tous les boutons (empilés).
Côté de l’écran	Droite ou Gauche.
Afficher le texte à côté des boutons	Affiche les libellés à côté des icônes.
Pulsation (attire l’attention)	Une douce animation de pulsation.
Apparaît après	Le délai en secondes avant l’apparition des boutons.
Afficher sur mobile / Afficher sur ordinateur	Où les boutons sont visibles.

Barre d’annonce

Une fine barre tout en haut du site, pour vos actualités ou vos offres (Livraison offerte cette semaine, Nouvelle formation disponible).

Activez Afficher une barre en haut du site.
Rédigez le Texte et, si vous le souhaitez, un Texte du lien (facultatif) avec Le lien mène à.
Choisissez le Style : Accent, Sombre ou Claire.
Décidez si Le visiteur peut la fermer.

Autre

Bouton « retour en haut » : un petit bouton qui ramène en haut des pages longues.
Barre de progression du défilement en haut : une fine ligne qui se remplit à mesure que le visiteur fait défiler la page.

Conseils

Vérifiez aussi vos couleurs en mode Téléphone, et assurez-vous que le texte est lisible sur chaque fond.
Ne mélangez pas plus de deux polices ; celle des titres et celle du texte suffisent.
Un ou deux canaux de chat valent généralement mieux que cinq.

Vous ne trouvez pas de réponse ?

Écrivez-nous, nous répondons sous un jour ouvré.

Contact