Thèmes de site web et personnalisation de marque
Le thème de votre site web détermine l'apparence générale de votre site. Des couleurs et polices aux styles de boutons et mises en page, la personnalisation du thème vous permet de créer une expérience de marque unique qui reflète l'identité de votre entreprise.
Accéder aux paramètres du thème : Allez dans Website → Configuration → Personnaliser → Thème ou cliquez sur l'icône de palette de peinture en mode Édition.
Sélectionner un thème
Odoo propose des thèmes conçus par des professionnels pour vous aider à démarrer :
- Naviguez vers Website → Configuration → Paramètres
- Cliquez sur Choisir un thème dans la section Website
- Parcourez les thèmes disponibles avec des aperçus en direct
- Cliquez sur un thème pour le prévisualiser sur votre site
- Cliquez sur Utiliser ce thème pour l'appliquer
Important : Changer de thème peut affecter la mise en page de votre contenu existant. Vérifiez toujours vos pages après avoir changé de thème et effectuez les ajustements nécessaires.
Personnalisation des couleurs
Les couleurs sont fondamentales pour l'identité de votre marque. Le Website Builder offre une gestion complète des couleurs :
Couleurs du thème
Définissez votre palette de couleurs principale qui s'applique à l'ensemble du site web :
| Type de couleur | Utilisation | Recommandations |
|---|---|---|
| Primaire | Couleur principale de la marque, boutons, liens, accents | Votre couleur de marque principale |
| Secondaire | Boutons alternatifs, éléments moins proéminents | Complémentaire à la couleur primaire |
| Alpha (Arrière-plan 1) | Arrière-plans de page principaux | Généralement blanc ou très clair |
| Beta (Arrière-plan 2) | Arrière-plans de sections alternées | Gris clair ou teinte subtile |
| Gamma (Arrière-plan 3) | Sections mises en évidence, pieds de page | Plus foncé ou contrastant |
| Delta (Arrière-plan 4) | Sections spéciales | Zones de fonctionnalités |
| Epsilon (Arrière-plan 5) | Arrière-plans supplémentaires | Variation supplémentaire |
Couleurs de statut
Couleurs sémantiques qui communiquent une signification :
- Succès (Vert) : Confirmations, actions terminées
- Info (Bleu) : Messages d'information
- Avertissement (Jaune/Orange) : Mises en garde, avis importants
- Danger (Rouge) : Erreurs, alertes critiques
Définir les couleurs
- Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleur
- Choisissez parmi :
- Préréglages de thème : Schémas de couleurs prédéfinis
- Roue chromatique : Choisissez visuellement n'importe quelle couleur
- Valeur hexadécimale : Entrez les codes couleur exacts
- Valeurs RGB : Contrôle précis des couleurs
- Les couleurs se mettent à jour instantanément sur l'ensemble de votre site
Paramètres de typographie
Les polices transmettent la personnalité et améliorent la lisibilité :
Configuration des polices
| Paramètre | S'applique à | Options |
|---|---|---|
| Police de titre | H1, H2, H3, H4, H5, H6 | Google Fonts, polices système, téléchargement personnalisé |
| Police de corps | Paragraphes, listes, texte général | Google Fonts, polices système, téléchargement personnalisé |
| Police de bouton | Texte des boutons | Hérite généralement du corps ou du titre |
| Police de navigation | Éléments de menu | Correspond souvent à la police de titre |
Sources de polices
- Google Fonts : Plus de 1000 polices gratuites, chargées automatiquement depuis le CDN Google
- Polices système : Arial, Helvetica, Times, Georgia - chargement rapide, aucune requête externe
- Polices personnalisées : Téléchargez vos propres polices de marque (WOFF, WOFF2, TTF, OTF)
Options de typographie
- Taille de police de base : Taille de texte par défaut (généralement 16px)
- Échelle des titres : Ratio entre les niveaux de titre
- Hauteur de ligne : Espace entre les lignes (1.5 est lisible)
- Espacement des lettres : Espace entre les caractères
Styles de boutons
Les boutons guident les actions des utilisateurs. Configurez-les pour correspondre à votre marque :
Forme des boutons
- Carré : Coins vifs (rayon de 0px)
- Légèrement arrondi : Arrondi subtil (4-8px)
- Arrondi : Courbes notables (12-16px)
- Pilule : Extrémités complètement arrondies (9999px)
Variantes de boutons
- Rempli/Solide : Couleur d'arrière-plan avec texte contrastant
- Contour : Bordure uniquement, arrière-plan transparent
- Plat : Pas de bordure, style minimal
États des boutons
| État | Quand | Changement de style typique |
|---|---|---|
| Par défaut | Apparence normale | Style de base |
| Survol | Souris sur le bouton | Plus foncé/clair, ombre, agrandissement |
| Actif | En cours de clic | Apparence enfoncée |
| Focus | Navigation au clavier | Anneau de contour |
| Désactivé | Non cliquable | Grisé, opacité réduite |
Style des liens
Configurez l'apparence des liens sur l'ensemble de votre site :
- Couleur du lien : Généralement la couleur principale de la marque
- Couleur visité : Nuance légèrement différente (optionnel)
- Couleur au survol : Nuance plus foncée/différente au passage de la souris
- Soulignement : Toujours, jamais ou au survol uniquement
- Décoration : Style de soulignement (solide, pointillé, tirets)
Mises en page
Contrôlez la structure générale de vos pages :
Largeur du conteneur
- Pleine largeur : Le contenu s'étend sur toute la fenêtre
- Contenu : Largeur maximale avec marges latérales (1140px, 960px, etc.)
- Étroit : Contenu plus serré pour la lisibilité (720px)
Disposition de l'en-tête
- Standard : Barre de navigation classique
- Fixe : Reste visible lors du défilement
- Transparent : Transparent sur les images héros
- Hamburger : Menu réduit sur tous les appareils
Disposition du pied de page
- Simple : Une seule ligne de liens
- Multi-colonnes : Sections organisées
- Étendu : Plusieurs lignes avec du contenu
- Minimal : Copyright uniquement
Personnalisation avancée
CSS personnalisé
Pour les utilisateurs avancés, ajoutez du CSS personnalisé :
- Allez dans Website → Configuration → Personnaliser → Éditeur HTML/CSS
- Ajoutez votre CSS dans la section de feuille de style personnalisée
- Les styles s'appliquent à toutes les pages
Variables CSS
Remplacez les variables du thème pour un contrôle précis :
:root { --primary: #votre-couleur; --secondary: #votre-couleur; --font-family-base: "Votre Police"; }Liste de vérification de cohérence de marque
Avant la publication
- ☐ Logo téléchargé et correctement dimensionné
- ☐ Les couleurs primaire et secondaire correspondent aux directives de la marque
- ☐ Les polices sont cohérentes sur toutes les pages
- ☐ Les styles de boutons sont uniformes
- ☐ Favicon téléchargé (icône d'onglet du navigateur)
- ☐ Image d'aperçu des réseaux sociaux définie
- ☐ Apparence mobile testée
- ☐ Le contraste des couleurs respecte les normes d'accessibilité
Bonnes pratiques
- Moins c'est plus : Limitez-vous à 2-3 couleurs et 2 polices maximum
- Contraste : Assurez-vous que le texte est lisible sur tous les arrière-plans
- Cohérence : Utilisez les mêmes styles sur toutes les pages
- Test : Prévisualisez sur plusieurs appareils et navigateurs
- Accessibilité : Utilisez les recommandations de ratio de contraste WCAG (4.5:1 pour le texte)