Choisissez un jeu de couleurs pour votre site, puis appliquez des couleurs spécifiques aux différentes sections de page.
Que vous préfériez un thème en noir et blanc ou des combinaisons de couleurs audacieuses, vous pouvez utiliser le panneau Styles du site et les styles de section pour modifier les couleurs de votre site.
Ce guide vous explique brièvement comment changer la couleur des différents éléments de votre site.
Regarder une vidéo
Avant de commencer
- Les changements de couleur effectués dans le panneau Styles du site sont appliqués à l’ensemble de votre site. La modification dʼun élément de page, tel que le texte dʼun bouton, est appliquée à tous les endroits utilisant ce thème (version 7.1) ou sur toutes les pages (version 7.0).
- Dans les blocs Texte de la version 7.1, vous pouvez modifier la couleur d’une certaine partie du texte, comme une lettre ou un mot dans une phrase. Dans la version 7.0 ou dans les autres zones de texte, vous devez utiliser un bloc Markdown.
- Si vous savez coder, vous pouvez essayer de limiter vos modifications de couleur à des éléments précis par CSS. Gardez à l’esprit que notre service d’assistance ne couvre pas les questions liées au code personnalisé.
- Si votre site utilise la version 7.0, la modification de couleurs s’effectue différemment. Consultez la section ci-dessous pour connaître les étapes à suivre.
- Pour obtenir des conseils sur le choix des meilleures couleurs pour votre site, consultez l’article Choisir les bonnes polices et couleurs.
- Pour passer en revue les bonnes pratiques en matière d’accessibilité, consultez l’article Créer du contenu accessible pour un site.
Modifier les couleurs à l’échelle du site
Pour modifier toutes les couleurs de votre site, choisissez une palette de couleurs :
- Lors de la modification d'une page, cliquez sur l'icône pinceau en haut à droite, puis cliquez sur Couleurs.
- Cliquez sur Modifier la palette pour choisir une nouvelle palette de couleurs. Vous pouvez choisir parmi ces types de palettes de couleurs :
- Préréglages - Choisissez parmi un ensemble de palettes prédéfinies dans des couleurs sélectionnées.
- À partir de l’image : chargez une image pour générer une palette basée sur les couleurs dominantes de cette image.
- À partir de la couleur : choisissez une couleur primaire à l’aide du sélecteur de couleurs et générez des palettes pour compléter cette couleur.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.
Important :
- Toutes les palettes incluent toujours le noir et le blanc, qui sont les couleurs généralement utilisées pour le texte.
- Lorsque vous générez une palette à partir d'une image, les couleurs sont tirées des trois couleurs les plus dominantes de l'image.
- Quelle que soit la palette, vous pouvez utiliser l’éditeur de palette pour personnaliser chaque couleur de la palette.
Modifier les couleurs de la section
Votre palette de couleurs génère différents thèmes de couleurs pour vos sections de page. Après avoir défini les couleurs à l’échelle du site, vous pouvez modifier le thème de couleur de la section de votre choix afin de lui donner un aspect unique.
Pour confirmer le thème attribué à une section, procédez comme suit :
- Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis sur Couleurs.
- Faites défiler l’aperçu de la page et passez en revue les étiquettes de thèmes de section pour chaque section.
Remarque : si vous voyez un champ vide dans une section au lieu d’une étiquette de thème, la couleur de votre Titre (grand) est probablement définie sur la même couleur que la couleur d’arrière-plan de section. Pour voir l’étiquette du thème, cliquez sur le thème qui apparaît également vide dans le menu Couleurs, puis modifiez la couleur du Titre (grand). Consultez la section suivante pour obtenir des instructions détaillées.
Pour modifier le thème de couleur d’une section :
- Ouvrez le panneau Pages.
- Sélectionnez la page que vous souhaitez modifier et cliquez sur Modifier en haut à gauche.
- Cliquez sur Modifier la section ou sur l’icône en forme de crayon pour la section que vous souhaitez modifier.
- Dans l’onglet Couleurs, cliquez sur un thème pour l’appliquer à cette section.
- Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.
Remarque : la modification du thème de couleurs d’une section réinitialise toutes les couleurs de cette section, y compris les modifications de couleurs du texte effectuées dans la barre d’outils du bloc Texte.
Types de thèmes
Le type de thème (1 ou2) détermine quelle couleur s'applique au texte principal d'une section et quelle couleur s'applique aux autres éléments :
- Lightest 1, Light 1, Dark 1 et Darkest 1- Le texte et les titres sont en noir ou blanc et d'autres couleurs s'appliquent à l'arrière-plan et aux plus petits éléments du site.
- Plus clair 2,Clair 2,Sombre 2 et Plus sombre 2 - La couleur sur le côté gauche de la palette s’applique à tous les textes et titres, et les autres couleurs s’appliquent à l’arrière-plan et aux plus petits éléments du site.
- Vif - La couleur sur le côté gauche de la palette s'applique soit au texte (Vif 1 ) soit à l'arrière-plan (Vif 2) et d'autres couleurs s'appliquent à l'arrière-plan et aux plus petits éléments du site.
Dans certains cas, les couleurs du texte et des boutons sont par défaut en blanc ou en noir afin d’offrir un meilleur contraste avec la couleur d’arrière-plan.
Thèmes pour les autres zones du site
Suivez les étapes ci-dessous pour trouver les thèmes de couleurs pour ces zones de votre site :
- Barre d’annonce - La barre d’annonce correspond toujours au thème de couleur de votre en-tête.
- Bouton de menu Superposition pour appareils mobiles - Les couleurs de superposition pour appareils mobiles sont définies dans votre en-tête.
- Arrière-plan de section - Ouvrez le panneau Couleurs et recherchez l’étiquette du thème, puis cliquez sur ce thème pour ouvrir toutes les couleurs. Recherchez la couleur en regard de Arrière-plan de section.
- Pages intégrées - La page 404 par défaut, la page du panier, la page de confirmation de commande et la page de recherche intégrée sont autant d’éléments qui utilisent le thème de couleurs par défaut de votre template.
Personnaliser les couleurs du thème
Vous pouvez personnaliser n’importe quel thème en définissant des couleurs spécifiques pour les différents éléments de site. Toute modification apportée aux couleurs d’un thème s’applique à toutes les zones de votre site utilisant le thème en question.
Pour modifier un thème :
- Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis sur Couleurs.
- Cliquez sur le thème que vous souhaitez modifier.
- Cliquez sur l’ajustement que vous souhaitez modifier, puis choisissez une autre couleur. Vous pouvez utiliser une couleur prédéfinie dans l’onglet Palette ou cliquer sur Personnaliser pour utiliser le sélecteur de couleurs. Vous devrez peut-être faire défiler la page pour voir tous les ajustements.
- Utilisez le curseur d’opacité pour modifier la transparence.
- Pour annuler une modification avant d’effectuer l’enregistrement, cliquez sur l’icône annuler en haut du panneau ou sur le point situé à côté de l’ajustement concerné.
Vos modifications sont conservées pendant que vous modifiez d’autres contenus de la page. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.
Lorsque vous modifiez les couleurs d’un thème, n’oubliez pas que :
- Si vous ne savez pas quel thème vous devez modifier, recherchez l’étiquette du thème de couleur dans la zone de la page à modifier.
- Le menu Modifier le thème affiche tous les ajustements de couleur possibles pour votre site, même si la page que vous modifiez ne contient pas ces éléments. Par exemple, vous aurez accès à toutes les options de couleur de blog même si vous modifiez une page Disposition.
- Si une section comporte une image d’arrière-plan, utilisez l’ajustement de la superposition d’arrière-plan pour définir l’opacité de la couleur de superposition. Si la section utilise une couleur ou une vidéo d’arrière-plan, utilisez l’arrière-plan de section pour définir la couleur d’arrière-plan.
Le sélecteur de couleurs
Le sélecteur de couleurs vous permet de choisir une couleur personnalisée pour un élément de votre site. Un rond situé à côté du nom de chaque ajustement de couleur indique la couleur actuelle de l’élément.
Pour choisir une nouvelle couleur, cliquez sur le cercle de couleur à côté de l’ajustement que vous souhaitez modifier. Cliquez sur le curseur inférieur pour sélectionner une couleur, puis cliquez sur le carré juste au-dessus pour choisir une nuance.
Si vous connaissez la valeur de la couleur souhaitée, vous pouvez également cliquer sur le champ de valeur pour le modifier. Le champ de valeur accepte les formats suivants :
- HEX : ex. : #FFFFFF
- RVB ou RGBA : ex. : rgba (255, 0, 149, 1)
- HSL/HSLA : ex. : hsla (325, 100%, 50%, 1)
- HTML (doit être en minuscules) : ex. : blanc
Pour trouver la valeur de couleur recherchée, vous pouvez consulter des sites externes comme color-hex.com ou imagecolorpicker.com.
Conseil : le champ de valeur s’affiche automatiquement lorsque vous utilisez le curseur de couleur pour trouver une couleur. Vous pouvez copier et coller ce code pour ajouter la même couleur à d’autres réglages dans le thème.
Transparence
Pour modifier la transparence d’une couleur, utilisez le curseur d’opacité en faisant glisser le cercle sous le sélecteur de couleur. Le curseur d’opacité est particulièrement utile dans le cas des couleurs de superposition, qui s’affichent sur les images.
- Dans la version 7.1, vous ne pouvez changer que la transparence des couleurs de palette.
- Dans la version 7.0, certains ajustements de couleurs ne comportent pas de curseur d’opacité.
Conseil : si vous utilisez le curseur d’opacité pour rendre la couleur d’arrière-plan d’une section transparente, la couleur d’arrière-plan du thème de couleurs par défaut de votre template peut apparaître.
Modifier la couleur du contour de l’insertion
Lorsqu’une section possède une image d’arrière-plan, vous pouvez afficher cette image en mode Pleine page ou en mode Insertion.
- L’option Pleine page étend l’image d’un bord à l’autre de la fenêtre de votre navigateur, couvrant toute la largeur de votre site.
- L'option Insertion met l'image légèrement en retrait et crée un contour autour cette dernière.
Lorsque l’image est définie sur Insertion, vous pouvez modifier la couleur du contour :
- Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis sur Couleurs.
- Cliquez sur le thème de couleur de la section que vous souhaitez modifier.
- Sous Tout le site, cliquez sur Contour de l’insertion et choisissez une couleur.
- Vos modifications sont conservées pendant que vous modifiez d’autres contenus de la page. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.
Modifier les couleurs d’arrière-plan des blocs
Les couleurs d’arrière-plan des blocs ne sont prises en charge que sur les sites qui utilisent la version 7.1.
Certains blocs incluent une fonction de couleur d’arrière-plan. C’est un excellent moyen de faire ressortir un bloc ou d’améliorer la visibilité des blocs qui se chevauchent dans l’Éditeur intuitif. Ajoutez des couleurs d’arrière-plan aux blocs suivants en activant le bouton Arrière-plan dans l’onglet Design du bloc :
- Blocs accordéon
- Blocs Formulaire
- Blocs Newsletter
- Blocs Citation
- Blocs Sommaire
Vous pouvez également activer les couleurs d’arrière-plan sur les blocs Texte en cliquant sur l’icône arrière-plan du bloc dans la barre d’outils de texte.
Après avoir activé l’arrière-plan, cliquez sur Couleur pour sélectionner une couleur dans la palette de couleurs de votre site ou une couleur personnalisée. Créez des blocs avec des couleurs d’arrière-plan identiques ou attribuez à chaque bloc une couleur unique.
Thèmes de couleurs par défaut
Chaque template de la version 7.1 possède un thème de couleurs par défaut, qui s’applique automatiquement aux pages intégrées et aux zones suivantes de votre site :
- Écran Accès refusé
- Barre d'annonce
- Page de recherche intégrée
- Page 404 par défaut
- En-tête dynamique sur une image ou une vidéo d’arrière-plan
- Page de confirmation de commande
- Page d’aperçu rapide des produits
- Sections avec une image ou une vidéo d’arrière-plan
- Page du panier
Vous ne pouvez pas attribuer un thème différent à ces zones de votre site, mais vous pouvez apporter des modifications au thème par défaut pour personnaliser ces pages. Pour trouver le thème par défaut de votre template :
- Ajoutez une section vierge à une page.
- Ouvrez le panneau Styles du site.
- Cliquez sur Couleurs et recherchez l’étiquette du thème. Le thème de couleurs par défaut est attribué aux nouvelles sections.
Astuce : un autre moyen de déterminer le thème de couleurs par défaut est d’ouvrir l’une des pages système, appuyer sur / et rechercher les styles du site. Vous pouvez accéder au panneau Couleurs et consulter l’indicateur du thème à partir de là.
Espace entre la section et le pied de page
Sur les pages comportant une seule section ou les pages très courtes, un espace peut apparaître entre la dernière section de la page et le pied de page. La couleur de l'espace sera la même que celle définie par défaut pour l'arrière-plan de la section de votre thème.
Lorsque l'espace est d'une couleur différente, par exemple, lorsque votre section et votre pied de page utilisent des thèmes de couleur différents de ceux définis par défaut, la différence sera plus visible.
Pour résoudre ce problème, définissez la couleur de votre thème par défaut pour l’arrière-plan de section sur la même couleur que celle de l’arrière-plan de la section de votre page ou du thème du pied de page.
Astuce : si vous faites correspondre la couleur de votre thème par défaut pour l’arrière-plan de section à celle de l’arrière-plan de votre page, votre page aura une apparence cohérente lors du chargement.Les couleurs d’arrière-plan sont chargées avant les images.
Modifier les couleurs dans la version 7.0
Si votre site utilise la version 7.0, la modification des couleurs de votre site s’effectue différemment.
Conseil : les pages de garde possèdent leurs propres options de style.
Ouvrez le panneau Design, puis cliquez sur Styles du site pour définir manuellement les couleurs de votre site en ajustant le style. Les modifications spécifiques dépendent du template de votre site. Consultez les guides relatifs à votre template pour obtenir une aide plus approfondie sur la modification des couleurs de votre site.
Pour changer les couleurs d’un site de la version 7.0, accédez d’abord à la page que vous souhaitez modifier. Certains ajustements ne s’affichent que lorsque vous êtes sur la page en question : rendez‑vous donc sur la page à modifier pour voir les ajustements dont vous avez besoin. Vous pouvez également prévisualiser vos modifications sur la page au fur et à mesure que vous les effectuez.
Pour trouver des ajustements spécifiques à un élément de la page, cliquez sur l’élément souhaité dans l’aperçu. Le panneau Styles du site affiche uniquement les ajustements de style pour cet élément et masque les autres. Ce raccourci est disponible dans la plupart des templates et pour la plupart des zones de votre site. Cliquez sur Tout afficher pour afficher de nouveau tous les ajustements de la page.
Pour cela :
- Ouvrez le panneau Pages et cliquez sur la page que vous souhaitez modifier.
- Lorsque l’aperçu de votre site affiche la bonne page, revenez dans le panneau Site web.
- Cliquez sur Design, puis sur Styles du site.
- Faites défiler la page vers le bas pour voir tous les ajustements que vous pouvez appliquer à la page affichée. Cliquez sur l’ajustement que vous souhaitez modifier, puis choisissez une autre couleur.
- Utilisez le curseur d’opacité pour modifier la transparence.
- Cliquez à l’extérieur de la fenêtre de couleur pour fermer le sélecteur de couleur.
- Pour annuler une modification avant d’effectuer l’enregistrement, cliquez sur l’icône annuler en haut du panneau ou sur le point situé à côté de l’ajustement concerné.
- Cliquez sur Enregistrer en haut du panneau.
Modifier les couleurs d’arrière-plan
Les familles de templates ci-dessous proposent des zones d’arrière-plan personnalisables :
| Famille de templates | Zones d’arrière-plan |
| Adirondack |
|
| Avenue |
|
| Aviator |
|
| Bedford |
|
| Brine |
|
| Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
| Montauk |
|
| Native |
|
| Pacific |
|
| Skye |
|
| Supply |
|
| Tremont |
|
| Wells |
|
| Wexley |
|
| York |
|
Important :
- Les couleurs d’arrière-plan ne sont pas conservées lorsque vous changez de template.
- Certains templates acceptent également les images d’arrière-plan.
- Dans certains templates, une bannière peut s’afficher derrière l’en-tête.
- Quand vous êtes connecté(e), l’arrière-plan devient blanc lorsqu’une page se charge, indépendamment de la couleur définie dans le panneau Styles du site. Les visiteurs ne voient pas ce changement.
Pour plus d'aide, consultez le guide de votre template.
Regarder une vidéo
Cette vidéo concerne la version 7.0.