Choisissez une palette pour votre site, puis personnalisez les couleurs de certains éléments.

Utilisez les palettes de couleurs et les thèmes de couleurs pour personnaliser le style des couleurs de votre site, que vous préfériez un thème en noir et blanc ou des combinaisons de couleurs audacieuses.

Ces options de couleur sont disponibles sur les sites de la version 7.1. Les sites de la version 7.0 ont des paramètres de couleur différents.

Vidéo sur la modification des couleurs du site

Regardez cette vidéo pour une présentation de la palette de couleurs et des thèmes de couleurs de votre site.

Changer les couleurs à l’aide de palettes de couleurs sur l’ensemble du site

Tous les sites Squarespace utilisent une palette de cinq couleurs pour un style visuel cohérent. Vous pouvez modifier immédiatement les couleurs de votre site en personnalisant la palette ou en sélectionnant une autre palette dont les couleurs sont appliquées à l’ensemble de votre site.

Modifier votre palette de couleurs

Pour modifier la palette de couleurs sélectionnée :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur ＞ à côté de Couleurs.
3. Cliquez sur Modifier la palette. Les palettes utilisent cinq couleurs ; la plupart incluent le noir et le blanc pour le texte.
4. Cliquez sur l’une des couleurs de la palette, puis cliquez sur les curseurs du sélecteur de couleurs et faites-les glisser pour la modifier. Si vous connaissez le code hexadécimal, RGB ou HSL de la couleur que vous souhaitez utiliser, vous pouvez le saisir dans le champ en dessous.
5. Répétez ces étapes pour chaque couleur de la palette, puis cliquez sur Enregistrer.

Définir une nouvelle palette de couleurs

Pour définir une nouvelle palette de couleurs :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur ＞ à côté de Couleurs.
3. Cliquez sur Modifier la palette, puis choisissez :
   • 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 trois 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.
4. Cliquez sur Save (Enregistrer).

Modifier les couleurs des sections avec des thèmes

Votre palette définit les couleurs de votre site ; les thèmes de couleurs de votre site utilisent ces couleurs dans différentes combinaisons. Chaque palette comporte dix thèmes de couleurs, ce qui vous permet de donner à vos sections un look unique tout en restant cohérent.

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. Consultez nos bonnes pratiques en matière d’accessibilité lorsque vous choisissez les couleurs.

Définir le thème d’une section

Pour sélectionner un thème de couleurs pour une section :

1. Ouvrez le panneau Pages.
2. Cliquez sur la page que vous souhaitez modifier, puis sur Modifier en haut à gauche.
3. Cliquez sur Modifier la section dans la section que vous souhaitez modifier.
4. Cliquez sur Couleurs, puis sur un thème de couleurs.
5. Cliquez sur Save (Enregistrer).

Remarque : lorsque vous choisissez un nouveau thème de couleurs, toutes les couleurs de cette section sont modifiées, y compris les modifications de couleurs du texte effectuées dans la barre d’outils du bloc Texte.

Comment déterminer le thème utilisé dans une section de page ?

Pour connaître le thème de couleurs utilisé dans une section :

1. Ouvrez le panneau Pages.
2. Cliquez sur la page que vous souhaitez modifier.
3. Faites défiler l’aperçu de votre site et consultez les étiquettes du thème de couleurs qui apparaissent en haut à droite de chaque section.

Pourquoi l’étiquette de mon thème de couleurs est-elle vide ?

Si un encadré vide apparaît à la place de l’étiquette du thème, la couleur de police est peut-être la même que la couleur d’arrière-plan, ce qui rend le texte invisible. Pour rendre visible l’étiquette du thème :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur ＞ à côté de Couleurs.
3. Cliquez sur le thème qui apparaît vide dans le menu Couleurs.
4. Cliquez sur Titre (grand) et changez de couleur.
5. Cliquez sur Save (Enregistrer).

Quels thèmes sont utilisés dans les autres zones du site ?

D’autres zones de votre site ont des paramètres de thème de couleurs spécifiques :

• Barre d’annonce : si l’en-tête de votre site a un thème de couleurs, la barre d’annonce suit le même thème. Sinon, il suit le thème de couleurs par défaut.
• Pages intégrées : les pages de site intégrées, comme la page du panier ou la page 404 par défaut, suivent le thème de couleurs par défaut de votre template.
• Bouton de menu de superposition sur appareils mobiles : définissez un thème de couleurs pour la superposition sur appareils mobiles lorsque vous modifiez l’en-tête de votre site.
• En-tête du site : définissez un thème de couleurs ou une couleur personnalisée pour l’en-tête de votre site.

Changer les couleurs d’éléments spécifiques du site

Vous pouvez personnaliser les ajustements de couleur pour des éléments spécifiques dans n’importe quel thème de couleurs. 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 :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur ＞ à côté de Couleurs.
3. Cliquez sur le thème que vous souhaitez modifier. Si vous ne savez pas quel thème vous devez modifier, recherchez l’étiquette du thème de couleurs dans la section à modifier.
4. 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.
5. 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é.
6. 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.

Utiliser le sélecteur de couleurs pour sélectionner une couleur personnalisée

Un rond situé à côté du nom de chaque ajustement de couleur indique la couleur actuelle de l’élément. En général, ces couleurs proviennent de la palette de votre site.

Pour choisir une couleur personnalisée à l’aide du sélecteur de couleurs :

1. Cliquez sur l’ajustement que vous souhaitez modifier.
2. Cliquez sur Personnalisé(e) pour ouvrir le sélecteur de couleurs.
3. Cliquez sur le curseur inférieur pour sélectionner une couleur, puis sur le carré au-dessus pour choisir une teinte. Vous pouvez aussi saisir un code couleur spécifique dans le champ de valeur.
4. Si l’ajustement a un curseur d’opacité, vous pouvez l’utiliser pour modifier la transparence.

Sélectionner une couleur à l’aide d’un code couleur

Si vous connaissez la valeur de la couleur souhaitée, vous pouvez cliquer sur le champ de valeur situé sous le sélecteur de couleurs pour l’ajouter. Pour trouver la valeur de couleur recherchée, vous pouvez consulter des sites externes comme color-hex.com ou imagecolorpicker.com.

Le champ Valeur accepte plusieurs formats différents :

• 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

Astuce : le champ de valeur affiche automatiquement le code couleur lorsque vous utilisez le curseur de couleur pour trouver une couleur. Vous pouvez copier-coller ce code pour ajouter la même couleur à d’autres ajustements du thème.

Modifier la transparence d’une couleur

Pour modifier la transparence d’une couleur personnalisée, utilisez le curseur d’opacité en faisant glisser le cercle sous le sélecteur de couleurs. Le curseur d’opacité est particulièrement utile dans le cas des couleurs de superposition, qui s’affichent sur les images. Les ajustements n’incluent pas tous un 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.

Quels sont les thèmes de couleurs par défaut ?

Chaque site de la version 7.1 possède un thème de couleurs par défaut. Le thème de couleurs par défaut est automatiquement appliqué 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
• Espaces sur une page causés par le défilement horizontal au-delà du bord de la page
• Page d’aperçu rapide des produits
• Page du panier

Comment trouver le thème de couleurs par défaut de mon site ?

Pour trouver le thème par défaut de votre template :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier sur une page, puis sur Ajouter une section.
3. Cliquez sur + Ajouter un élément vide, puis sur Section. Les nouvelles sections commencent avec le thème par défaut.
4. Cliquez sur l’icône pinceau pour ouvrir le panneau Styles du site, puis cliquez sur > à côté de Couleurs.
5. Recherchez l’étiquette du thème dans la nouvelle section.

Est-il possible de changer le thème par défaut du site ?

Non, il n’est pas possible d’attribuer un nouveau thème par défaut à votre site. Cependant, si vous connaissez votre thème par défaut, vous pouvez modifier votre palette de couleurs ou modifier les ajustements de couleur du thème afin de personnaliser vos pages intégrées et les autres sections qui utilisent le thème par défaut.

Comment changer la couleur entre les sections de page et le pied de page ?

Un espace peut apparaître entre la dernière section d’une page et le pied de page, ou sous le pied de page. Ces espaces utilisent la couleur d’arrière-plan de section de votre thème par défaut. Si votre section et votre pied de page n’utilisent pas le thème de couleurs par défaut, ces espaces peuvent être plus visibles.

Pour utiliser la même couleur pour cet espace et les sections de page ou votre pied de page :

1. Ouvrez le panneau Styles du site.
2. Cliquez sur ＞ à côté de Couleurs.
3. Cliquez sur votre thème par défaut.
4. Cliquez sur Couleur d’arrière-plan et modifiez-la pour qu’elle corresponde à la couleur d’arrière-plan de section de votre page ou au thème de couleurs du pied de page.

Astuce : si vous faites correspondre la couleur d’arrière-plan de section de votre thème par défaut à celle de l’arrière-plan de la 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 d’arrière-plan des blocs

Vous pouvez ajouter une couleur d’arrière-plan à certains blocs. 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.

Vous pouvez ajouter des couleurs d’arrière-plan aux blocs suivants :

• Blocs accordéon
• Blocs Formulaire
• Blocs Newsletter
• Blocs Citation
• Blocs Sommaire
• Blocs Texte