Logo, couleurs et polices
Cette page rassemble l'identité visuelle de tout votre site : logos, favicon, couleurs, polices, boutons et curseur. Vos pages vitrines, votre boutique, votre blog et chaque page listée dans Thèmes s'en servent. Le logo principal apparaît aussi au paiement, dans les e-mails et sur les factures : il se règle une seule fois ici.
Ouvrez-la depuis la page Thèmes : c'est la première ligne, Logo, couleurs et polices, dans l'onglet Général. La flèche en haut à gauche ramène à la liste.
Que voulez-vous faire ?
- Démarrer avec la configuration guidée
- Changer le logo
- Changer l'icône de l'onglet (favicon)
- Changer la couleur principale du site
- Changer les polices
- Arrondir les boutons
- Personnaliser le curseur
- Plus de situations : Site web, cas pratiques
Comment la page est organisée
La page se lit de haut en bas, en cinq sections numérotées regroupées en trois familles :
- Fondations : 01 Identité (logos et favicon), 02 Couleurs, 03 Typographie.
- Composants : 04 Boutons.
- Comportement : 05 Expérience (curseur, traînée, clic droit).
Sur ordinateur, la colonne de gauche liste ces sections et suit votre lecture ; cliquez sur l'une d'elles pour y aller. Sur mobile, les mêmes sections forment des onglets sous l'en-tête.
Dès que vous modifiez un réglage, Enregistrer et Annuler apparaissent en haut à droite. Rien n'est appliqué au site avant Enregistrer. Si vous quittez la page sans enregistrer, Vivlab vous demande de confirmer.
Sur ordinateur, le bouton ? en haut à droite rejoue la visite guidée de la page, et Info ouvre cette aide à côté de vos réglages.
Démarrer avec la configuration guidée
Tant que vous n'avez ni logo, ni couleur, ni police, la page présente l'identité de marque avec le bouton Définir mon identité de marque. Ensuite, le bouton Configuration guidée en haut de la page relance l'assistant à tout moment.
L'assistant avance en quatre étapes, avec un aperçu en direct de votre site : Logo, Accent (la couleur d'accentuation), Palette (des palettes toutes faites, à ajuster couleur par couleur) et Polices (des combinaisons pour les titres et les paragraphes). Enregistrer mon identité applique vos choix ; chaque réglage reste modifiable ensuite sur cette page.
Changer le logo
Dans Identité, importez votre fichier (vectoriel ou haute résolution, fond transparent) dans Logo principal, et au besoin une version claire pour fonds sombres dans Logo sombre (optionnel), puis enregistrez.
Le logo principal s'affiche dans la navigation, le pied de page, le paiement, les e-mails transactionnels et l'en-tête des factures. Le logo sombre se choisit élément par élément dans l'éditeur avec Utiliser le logo sombre (voir Logo du site) : il ne suit pas le mode sombre du navigateur et ne remplace pas le logo des e-mails ou des factures.
Changer le favicon
Le favicon est la petite icône de votre site dans l'onglet du navigateur, la barre des favoris, les résultats Google et sur l'écran d'accueil d'un téléphone. Dans Identité, importez une image carrée d'au moins 100 × 100 pixels, de préférence un PNG transparent, puis enregistrez. L'aperçu montre l'icône à chacun de ces emplacements ; elle est rognée en carré et redimensionnée selon l'endroit.
Changer la couleur principale
Dans Couleurs, choisissez la Couleur d'accentuation, de préférence vive ou sombre pour rester lisible sur fond blanc, puis enregistrez. Elle colore les boutons d'action, les liens et les éléments mis en avant sur tout le site.
Le Nuancier généré montre les nuances que Vivlab tire de cette couleur, du plus clair au plus foncé ; la case Par défaut est votre couleur elle-même. Cliquez sur une nuance pour copier son code couleur, par exemple pour le coller dans l'éditeur.
Ajoutez aussi vos couleurs de marque à la Palette de couleurs, juste en dessous : la case vide ajoute une couleur, une case existante se modifie ou se supprime. Ces couleurs apparaissent en raccourci dans tous les sélecteurs de couleur de l'éditeur.
La palette ne repeint pas vos pages
Une couleur choisie sur un élément y reste si vous modifiez la palette. Changez-la dans l'éditeur.
Changer les polices
La section Typographie montre d'abord vos deux familles, Titres et Texte courant, puis chaque usage à sa taille réelle sur le site : Titre (H1), Sous-titre (H2), Paragraphe et Bouton.
- Dans Typographie, cliquez sur la police affichée sous l'usage à changer.
- Recherchez une police dans la bibliothèque Google, choisissez-en une de vos polices de marque ou importez votre fichier, puis enregistrez.
Un usage sans police choisie suit le Paragraphe (« Comme le paragraphe »), et le paragraphe sans choix garde la Police par défaut. Les textes sans police choisie à la main dans l'éditeur suivent ces réglages.
Vos polices de marque
Sous les usages, Polices de la marque garde la liste de vos familles de polices. Elles sont proposées en premier chaque fois que vous choisissez une police, ici comme dans l'éditeur.
- Ajouter une police : la dernière case propose les polices que votre site utilise déjà, la bibliothèque Google ou l'import d'un fichier.
- Nom : changez le nom affiché sous la police pour la retrouver facilement. Une police importée prend le nom inscrit dans son fichier.
- Changer ou Retirer : cliquez sur l'aperçu « Aa » pour la remplacer, ou retirez-la de la liste.
Changer la forme des boutons
Dans Boutons, choisissez une Formes des boutons : Carré, Légèrement arrondi ou Tout arrondi, puis enregistrez.
L'aperçu montre vos trois variantes de bouton, Principal, Doux et Contour, Sur fond clair et Sur fond sombre. Leurs couleurs viennent du nuancier généré : changez la couleur d'accentuation pour les faire évoluer ensemble.
Personnaliser le curseur
La section Expérience contient trois interrupteurs indépendants.
- Activez Curseur du site et choisissez un des Modèle de curseur (flèches de couleur, rétro pixel, mains, crayon, baguette magique, stylo-plume, fusée…), ou déposez votre PNG, JPEG, WebP ou SVG dans Importer une image de curseur.
- Enregistrez.
L'image importée est adaptée à 32 × 32 pixels, proportions gardées, avec le point de clic en haut à gauche : placez-y la pointe du dessin, sur fond transparent. Elle reste proposée sous Image personnalisée si vous essayez un autre modèle. Désactivez Curseur du site pour retrouver le pointeur habituel.
Traînée du curseur laisse derrière la souris des copies estompées et lissées du curseur (une flèche blanche sans curseur personnalisé), sauf sur écran tactile et chez les visiteurs qui demandent moins d'animations dans leurs préférences système. Survolez la zone « Déplacez votre pointeur ici pour prévisualiser » pour essayer vos réglages.
| Réglage | Effet | Valeurs |
|---|---|---|
| Taille des particules | Taille des copies du curseur | 2 à 48 px |
| Durée de disparition | Temps avant qu’une copie s’efface | 100 à 2 000 ms |
| Espacement des particules | Distance entre les copies le long du mouvement | 2 à 60 px |
| Opacité | Visibilité des copies au début de leur apparition | 5 à 100 % |
| Lueur | Halo diffus autour des copies, dans leurs couleurs | 0 à 24 px ; 0 désactive le halo |
Désactiver la traînée efface ses réglages
Une fois enregistrée, la traînée réactivée repart avec une taille de 32 px, une disparition en 450 ms, un espacement de 8 px, une opacité de 50 % et aucune lueur.
Désactivation du clic droit sur votre site bloque le menu contextuel sur toutes vos pages pour compliquer la copie de vos images.
Bon à savoir
- L'image affichée quand une page est partagée sur un réseau social ou une messagerie utilise la police et le logo réglés ici. Son modèle se choisit dans Paramètres SEO, Recherche et partage, et dans l'éditeur de la Fiche produit, de la Page d'une catégorie et de la Page d'un article.
- Pour vérifier le résultat, revenez à la page Thèmes : chaque ligne montre un aperçu de sa page, plus grand au survol de la vignette.