--- title: "Thèmes : l'identité visuelle de votre site" description: "Définissez le logo, le favicon, les couleurs, les typographies et les boutons appliqués à tout votre site pour une identité visuelle cohérente." url: https://docs.vivlab.com/sections/themes-brands --- # Thèmes La section **Thèmes** regroupe tous les éléments visuels qui définissent l'identité de votre site : logo, favicon, palette de couleurs, typographies, formes des boutons et modèles d'images de partage pour les réseaux sociaux. Les réglages définis ici s'appliquent automatiquement à l'ensemble de votre site ([pages vitrines](https://docs.vivlab.com/sections/pages.md), [fiches produits](https://docs.vivlab.com/sections/products.md), [articles de blog](https://docs.vivlab.com/sections/blogs-articles.md), e-mails et [factures](https://docs.vivlab.com/sections/invoices.md)) pour garantir une identité cohérente partout. Venez ici lorsque vous mettez en place votre identité visuelle au lancement, que vous renouvelez votre charte graphique, ou simplement pour ajuster une couleur ou une police spécifique. ::: details Lire les étapes de la vidéo 1. — Dans « Formes & couleurs », ouvrez « Formes des boutons ». 2. — Choisissez « Tout arrondi ». 3. — Vérifiez l’aperçu du bouton, puis enregistrez. 4. — La forme arrondie est enregistrée dans le thème. ::: Vos modifications sont enregistrées en une seule fois avec **Enregistrer** en haut de la page, ou annulées avec **Annuler**. ## Logo Votre logo est utilisé dans la barre de navigation, le pied de page, les e-mails transactionnels et l'en-tête de vos [factures](https://docs.vivlab.com/sections/invoices.md). Le renseigner ici évite d'avoir à le dupliquer dans chaque module. Importez votre fichier dans le cadre prévu. Privilégiez un fichier vectoriel ou en haute résolution avec un fond transparent pour qu'il s'intègre proprement sur toutes les surfaces. ## Favicon Le favicon est la petite icône affichée dans l'onglet du navigateur à côté du titre de la page. Il renforce la reconnaissance de votre marque lorsque plusieurs onglets sont ouverts et apparaît également dans les favoris du visiteur. Importez une image au format carré, en .png, avec des dimensions d'au moins 100 × 100 pixels pour une bonne lisibilité. ## Comportement du site Cette section regroupe les réglages qui modifient le comportement général de votre site côté visiteur. Activez **Désactivation du clic droit sur votre site** pour bloquer le menu contextuel sur toutes les pages de votre site. Cela protège vos contenus (textes, images) du copier-coller et du téléchargement rapide par clic droit. Lorsque l'option est active, un message le confirme dans la section. ## Couleurs & polices Cette section regroupe la palette de couleurs de votre marque et les polices d'écriture utilisées par votre site. Le bloc **Palette de couleurs** enregistre les couleurs principales de votre marque. Elles sont proposées en raccourci dans tous les sélecteurs de couleur de l'éditeur visuel, ce qui vous évite de ressaisir les codes hexadécimaux à chaque modification d'une page ou d'un article. Cliquez sur une pastille pour modifier la couleur, ajoutez une nouvelle couleur en cliquant sur la pastille vide, ou supprimez une couleur devenue inutile via l'icône correspondante. Le bloc **Polices Google** définit la police de quatre éléments : **Titre** (H1), **Sous-titre** (H2), **Paragraphe** et **Bouton**. Cliquez sur le nom de la police pour ouvrir la bibliothèque : recherchez parmi les polices proposées ou importez votre propre fichier avec **Charger une police**. Un aperçu sous chaque élément affiche le rendu de votre sélection. ## Formes & couleurs Cette section définit la forme par défaut des boutons et la couleur d'accentuation utilisée partout sur votre site (boutons d'action, liens, éléments mis en avant). Centraliser ce choix garantit un rendu homogène d'une page à l'autre. Choisissez la **Formes des boutons** dans la liste (Carré, Légèrement arrondi ou Tout arrondi), puis définissez la **Couleur d'accentuation**. Privilégiez une couleur vive ou sombre qui contraste avec le blanc pour une bonne visibilité. Un aperçu **Exemple de bouton** juste à côté vous permet de valider le rendu avant d'enregistrer. ## Aperçu social Cette section choisit le modèle d'image utilisé lorsqu'un lien de votre site est partagé sur les réseaux sociaux ou dans une messagerie. La police et le logo de ces images proviennent de votre thème de marque. Quatre types de pages ont chacun leur réglage : **Page d'accueil & pages standard**, **Fiches produit** (la photo du produit est incluse dans l'image), **Catégories** (nom de la catégorie et échantillon de produits) et **Articles de blog** (l'image de couverture de l'article sert de fond). Trois modèles sont proposés pour chaque type sous forme de miniatures : cliquez sur celui que vous préférez. Le sélecteur affiché à côté de chaque type change la page, le produit, la catégorie ou l'article utilisé dans les miniatures.