Modifiez les polices, les couleurs et la disposition de votre site.
Utilisez les options du panneau Styles du site pour effectuer des modifications de style sur votre site. Vous pouvez soit modifier les styles généraux pour apporter des modifications qui s’appliqueront à l’ensemble de votre site et obtenir un aspect homogène, soit personnaliser des sections spécifiques.
Ce guide explique comment utiliser les options de style appelées « ajustements » pour modifier l’apparence de votre site. Nous vous recommandons d’essayer les différentes options de design disponibles lorsque vous créez votre site. En testant plusieurs polices, couleurs et paramètres de page, vous pourrez vous faire une idée de ce qui est possible et créer un design qui vous plaira.
Conseil : outre nos guides et nos tutoriels vidéo, nous proposons deux webinaires Getting Started with Squarespace (Se lancer avec Squarespace). Au cours de ces sessions, nous vous expliquerons comment créer des templates à l’aide du Kit de design Squarespace avec IA, parcourir les options de site, domaine et e-mail, préparer le contenu du site, concevoir une page d’accueil et définir le style des couleurs et des polices. Les webinaires durent généralement une heure et vous pouvez vous inscrire même si vous n’avez pas de site ou de compte Squarespace.
Regarder une vidéo
Différences entre les options de style des versions 7.1 et 7.0
Le fonctionnement des changements de style diffère selon la version de votre site. Dans les sections ci-dessous, cliquez sur l’onglet correspondant à votre version afin de voir les étapes pertinentes pour votre site.
Version 7.1
Dans la dernière version de Squarespace, vous pouvez utiliser le panneau Styles du site pour effectuer la plupart de vos modifications de style, notamment les changements de police, de couleur et d’espacement. Les modifications que vous apportez dans le panneau Styles du site s’appliquent généralement à l’ensemble du site, mais vous pouvez apporter des modifications plus spécifiques en personnalisant le style de certaines sections ou zones de texte.
Dans la version 7.1, tous les sites utilisent le même template. Ils disposent tous des mêmes options de style et fonctionnalités. Ils utilisent également tous des sections pour ajouter du contenu aux pages.
L’option pour changer de template n’existe donc pas dans la version 7.1. Vous pouvez toutefois suivre les étapes décrites dans ce guide pour modifier l’apparence de votre site.
Version 7.0
Dans la version 7.0, la version précédente de Squarespace, chaque template possède ses propres options de style et paramètres par défaut. Le panneau Styles du site de chaque template propose des ajustements différents. Les options sont regroupées dans différentes sections, comme En-tête du site et Contenu principal. Pour en savoir plus, consultez le guide de votre template.
Trouver un ajustement de style
La marche à suivre pour trouver un ajustement de style dépend de la version utilisée par votre site et selon que vous modifiez votre site sur un ordinateur ou dans l’application Squarespace.
Pour ouvrir le panneau Styles du site, cliquez sur l’icône en forme de pinceau en haut à droite pendant que vous modifiez une page.
Vous pouvez ensuite cliquer sur Thèmes pour parcourir les packs prédéfinis, tels que Professionnel, Audacieux et Enjoué. Lorsque vous sélectionnez l’un des packs, votre police, votre couleur et vos boutons sont remplacés par ceux du pack. Après avoir sélectionné un pack prédéfini, vous pouvez toujours modifier les styles individuels en cliquant sur l’élément du site que vous souhaitez changer, par exemple les polices ou les couleurs. Ce guide contient des informations plus détaillées sur chaque panneau.
Pour fermer le panneau Styles du site, double-cliquez sur l’aperçu de la page, cliquez sur l’icône en forme de pinceau ou cliquez sur Fermer en haut du panneau. Vos modifications de style resteront intactes jusqu’à leur enregistrement ou leur annulation.
Avec le panneau Styles du site fermé, vous pouvez effectuer des modifications plus précises en modifiant une section spécifique. Pour personnaliser le style d’une section, survolez la section avec votre souris, puis cliquez sur Modifier la section ou sur l’icône crayon. Les styles de section remplacent les styles de l’ensemble du site.
Ici, vous pouvez également choisir différentes dispositions pour vos sections Disposition automatique, Collection et Galerie. Si vous modifiez le style d’une section Collection, ces changements seront appliqués à toutes les dispositions de ce type. Prenons un exemple : si vous disposez de deux sections Blog qui utilisent une disposition de type mosaïque, les modifications apportées au style seront appliquées aux deux sections.
Pour ouvrir le panneau Styles du site :
- Ouvrez le panneau Pages.
- Cliquez sur la page à laquelle vous souhaitez appliquer un style. Pour les éléments à l’échelle du site comme le pied de page, ouvrez n’importe quelle page. Pour les éléments de collection, ouvrez n’importe quel élément du type concerné (un billet de blog ou un élément sur le produit, par exemple).
- Cliquez sur Site web dans le coin supérieur gauche du panneau Pages, sur Design, puis sur Styles du site.
- Dans le panneau Styles du site, cliquez sur un ajustement pour apporter des modifications.
Vous ne pouvez pas modifier le site tant que le panneau Styles du site est ouvert. Pour ajouter ou supprimer des contenus, fermez le panneau Styles du site et ouvrez le panneau Pages.
Le panneau Styles du site affiche les options de la page sur laquelle vous vous trouvez. Toute modification apportée à ces ajustements s’appliquera à toutes les pages de ce type sur votre site. Par exemple, si vous personnalisez le style d’une page Boutique, la même modification s’appliquera à toutes les pages Boutique de votre site.
Astuce : le style de chaque page de couverture peut être modifié séparément.
Dans le panneau d’aperçu, cliquez dans une zone de la page pour afficher uniquement les ajustements de style disponibles pour cette zone et masquer les autres ajustements. La zone de surlignage du style apparaît autour de l’élément sur lequel vous avez cliqué. Affichez à nouveau l’ensemble des options en cliquant sur Tout afficher. Ce raccourci est disponible dans la plupart des templates et pour la plupart des zones de votre site.
Voici à quoi cela pourrait ressembler avec le template Brine :
Pour certains ajustements, vous pouvez faire glisser l'élément dans l'aperçu pour ajuster les paramètres :
Le fonctionnement des changements de style dans l’application diffère selon la version de votre site.
Styles de la version 7.1 dans l’application
À l'aide des Styles du site, vous pouvez appliquer des modifications de style sur votre site avec un simple clic, y compris des modifications de police, de couleur et d'espacement. Les modifications que vous apportez dans les Styles de site s'appliquent généralement à l'ensemble du site, mais vous pouvez apporter des modifications plus précises en personnalisant le style de certaines sections ou zones de texte.
Pour réaliser des changements de style :
- Appuyez sur n’importe quelle page de votre site, puis appuyez sur Aperçu.
- Appuyez sur Modifier dans le coin supérieur gauche.
- Appuyez sur l’icône en forme de pinceau pour ouvrir le panneau Styles du site.
- Appuyez sur l’aspect du site à personnaliser, par exemple les polices ou les couleurs.
- Utilisez les options qui figurent dans le panneau pour personnaliser cette zone.
- Dans Polices, appuyez sur Sans empattement, Avec empattement ou Mixte pour consulter les packs de polices correspondants à chaque type. Appuyez sur le nom d’une police pour modifier la taille de base.
- Dans Couleurs, choisissez Accent, Clair et Foncé pour nuancer chaque thème de couleurs.
Astuce : vous pouvez également ouvrir le panneau Styles du site à partir de l’onglet Paramètres.
Pour personnaliser le style d’une section :
- Appuyez sur la page que vous souhaitez modifier, puis sur Aperçu.
- Appuyez sur Modifier, puis sur la section que vous souhaitez personnaliser.
- Appuyez sur l’icône crayon dans la barre d’outils de la section.
- Appuyez sur Format, Arrière-plan ou Couleurs, puis choisissez un nouveau style.
- Appuyez surOK, puis sur Enregistrer les modifications.
Styles de la version 7.0 dans l’application
Effectuez des modifications de style dans le panneau Styles du site :
- Appuyez sur Plus, sur Pages, puis sur la page à laquelle vous souhaitez appliquer les modifications. Le panneau Styles du site affiche alors les options correspondant à la page que vous modifiez ainsi qu’un aperçu de vos changements. Si vous modifiez une fonctionnalité qui concerne l’ensemble du site, comme les menus de navigation ou un pied de page, vous pouvez ouvrir n’importe quelle page.
- Appuyez sur ..., puis sur Styles du site.
- Le panneau Styles du site affiche la liste des ajustements de style. Appuyez sur un ajustement pour apporter des modifications.
Polices et couleurs
Les sections ci-dessous expliquent comment changer les polices et les couleurs de votre site.
Polices
La marche à suivre pour modifier les polices dépend de la version de votre site.
Pour modifier une police, ouvrez le panneau Styles du site, puis cliquez sur > à côté de Polices.
Dans le panneau Polices, vous pouvez choisir un pack de polices à appliquer à l’ensemble du texte de votre site ou modifier la police qui s’applique à des types de texte spécifiques. Pour en savoir plus, consultez l’article Modifier les polices de caractères.
Dans n’importe quelle zone de texte, vous pouvez également changer le format du texte en titre, texte de paragraphe ou texte monospace, ou encore ajouter un lien.
- Les liens sont toujours soulignés.
- Lorsque les visiteurs cliquent sur un lien, des pointillés apparaissent autour afin de rendre votre site plus accessible à tous.
Pour modifier les polices et les tailles, utilisez les ajustements Typographie ou Police dans le panneau Styles de site. Pour en savoir plus, consultez l’article Modifier les polices.
Couleurs
La marche à suivre pour modifier les couleurs dépend de la version de votre site.
Pour modifier les couleurs de votre site, ouvrez le panneau Styles du site, puis cliquez sur > à côté de Couleurs.
Grâce aux palettes de couleurs sélectionnées, vous pouvez modifier simultanément toutes les couleurs de votre site ou personnaliser individuellement les couleurs de chaque élément du site. Pour en savoir plus sur la modification des couleurs d’un site et d’une section, consultez l’article Modifier les couleurs. Pour passer en revue les bonnes pratiques en matière d’accessibilité, consultez l’article Créer du contenu accessible pour un site.
Pour modifier les couleurs, sélectionnez n’importe quel ajustement Styles de site doté d’un cercle de couleur à côté de son nom. Pour en savoir plus, consultez l’article Modifier les couleurs. Pour passer en revue les bonnes pratiques en matière d’accessibilité, consultez l’article Créer du contenu accessible pour un site.
Disposition
Les sections ci-dessous expliquent comment changer la disposition et l’espacement de votre site.
En-tête
Les visiteurs utilisent l’en-tête dans la partie supérieure de la page pour naviguer sur votre site. La marche à suivre pour modifier l’en-tête dépend de la version de votre site.
Pour modifier l’en-tête de votre site, cliquez sur Modifier en haut à gauche de l’aperçu de votre site, puis survolez l’en-tête avec votre souris et cliquez sur Modifier l’en-tête du site. Utilisez les options de l’éditeur pour personnaliser le titre ou le logo de votre site et les liens de navigation. Vous pouvez également ajouter une icône panier, des icônes sociales et un bouton d’appel à l’action.
Pour obtenir des informations plus détaillées, consultez l’article Créer un en-tête de site.
Le style de l’en-tête de votre site dépend de votre template. Pour en savoir plus sur les paramètres d’en-tête disponibles, consultez le guide de votre template.
Certains templates proposent des fonctionnalités spécifiques pour les en-têtes. Pour obtenir la liste des fonctionnalités disponibles, consultez l’article Créer un en-tête de site.
Pied de page
La marche à suivre pour personnaliser le style de votre pied de page dépend de la version de votre site.
Pour personnaliser le style du pied de page :
- En haut à gauche, cliquez sur Modifier.
- Survolez le pied de page avec votre souris, puis cliquez sur Modifier le pied de page.
- Cliquez sur la Modifier la section ou sur l’icône en forme de crayon pour effectuer des changements de style.
Pour en savoir plus, consultez l’article Modifier les pieds de page.
Le style du pied de page de votre site dépend de votre template. Pour en savoir plus sur les paramètres de pied de page disponibles, consultez le guide de votre template.
Pour en savoir plus sur les différentes options de pied de page disponibles par template, consultez l’article Modifier les pieds de page.
Espacement et marge intérieure
La marche à suivre pour modifier l’espacement dépend de la version de votre site.
Pour modifier l’espacement de votre site, ouvrez le panneau Espacement.
Ces ajustements modifient l'espacement dans toutes les pages de votre site :
- Largeur de la page (max.) - Modifiez la largeur maximale possible des pages de votre site. La largeur réelle dépend de votre navigateur et de votre appareil. Cet ajustement n’affecte pas l’espacement dans l’en-tête de votre site.
- Marge du site : modifiez la largeur de la marge de chaque côté de votre site. Selon la valeur du paramètre Largeur de la page, cet ajustement peut ne pas avoir d’effet visible sur le contenu de votre page. Cet ajustement affecte l’ensemble de votre site, y compris l’en-tête. Dans les sections Galerie, la marge intérieure en haut et en bas de la page change également en fonction de la largeur de la marge.
Vous pouvez modifier l’espacement de chaque section à l’aide de l’éditeur de section.
De nombreux ajustements de style liés à la taille, comme la marge intérieure, l’espacement, la largeur et les bordures, se trouvent sous le titre Tailles et valeurs. En fonction de votre template, ils peuvent également être disponibles dans d’autres sections.
Pour modifier une taille, survolez un ajustement de taille avec votre souris, puis utilisez le curseur ou saisissez un chiffre dans le champ.
Barres latérales (version 7.0)
Les sites de la version 7.1 n’incluent pas de barres latérales.
Si votre template est doté d’une barre latérale, vous pouvez modifier son apparence dans le panneau Styles du site. Par exemple, avec certains templates, vous pouvez déplacer la barre latérale à gauche ou à droite. Pour trouver les ajustements de style de la barre latérale, cliquez sur la barre latérale dans l’aperçu de la page ou recherchez le titre Barre latérale dans le panneau Styles du site.
Images et animations
Les sections ci-dessous expliquent comment personnaliser le style des blocs Image et des bannières, modifier les valeurs de proportion des images et appliquer des animations.
Blocs Image
La marche à suivre pour personnaliser le style des blocs Image dépend de la version de votre site. Certaines dispositions de blocs disposent de leurs propres paramètres de style en ce qui concerne les polices, les couleurs et les boutons dans le panneau Styles du site.
Pour en savoir plus sur les styles des blocs Image pour les deux versions, consultez l’article Blocs Image.
Bannières
La marche à suivre pour modifier les bannières dépend de la version de votre site.
Vous pouvez créer une image de bannière sur n’importe quelle page en ajoutant une section de bloc avec une image d’arrière-plan en haut de la page.
- Si vous ne voulez ajouter qu’une image à votre bannière, commencez par une section vide.
- Tout bloc ajouté à la section se superpose sur la bannière.
- Pour modifier la hauteur, cliquez sur Modifier la section ou sur l’icône en forme de crayon.
- Lors du choix d’une image d’arrière-plan, suivez nos conseils relatifs au format d’image.
Pour en savoir plus, consultez l’article Ajouter des images de bannière.
La plupart des templates prennent en charge les bannières de pages, que vous pouvez ajouter dans les paramètres de votre page.
- Pour découvrir toutes les options de bannière par famille de templates, consultez l’article Ajouter des images de bannière.
- Pour en savoir plus sur les paramètres de bannière spécifiques à votre site, consultez le guide de votre template.
Rapport d'aspect
La valeur de proportion d’une image correspond au rapport entre sa largeur et sa hauteur exprimé sous forme chiffrée, comme 3:4. Lorsque vous choisissez un ajustement de valeur de proportion, l’image est recadrée de manière à s’adapter à cette forme (comme 1:1 Carré), généralement autour du point focal.
- Dans la version 7.1, vous pouvez modifier la valeur de proportion d’une image dans les éditeurs de section et de bloc.
- Dans la version 7.0, vous pouvez modifier la valeur de proportion d’une image dans le panneau Styles de site et dans les éditeurs de blocs.
- Dans les deux versions, vous pouvez utiliser l’éditeur d’images intégré pour modifier la valeur de proportion d’une image après l’avoir chargée sur votre site.
Si la valeur de proportion est réglée sur Auto, les images seront remaniées afin de s’adapter au mieux à la page. Elles peuvent s'afficher dans un ordre différent de celui dans lequel elles ont été chargées. Pour en savoir plus, consultez l’article Comprendre les valeurs de proportion.
Animations
Pour ajouter un intérêt visuel, vous pouvez utiliser le panneau Animations pour animer subtilement votre contenu au fur et à mesure que les visiteurs parcourent votre site. Pour en savoir plus, consultez l’article Animations à l’échelle du site.
Arrière-plan
La marche à suivre pour modifier l’arrière-plan dépend de la version de votre site.
Pour changer l’arrière-plan :
- Utilisez le panneau Couleurs pour changer l’arrière-plan du site.
- Utilisez l’éditeur de section pour modifier la couleur de l’arrière-plan d’une section ou bien y ajouter une image ou vidéo d’arrière-plan. Cela inclut les sections des pieds de page.
- Lorsqu’une section a une image d’arrière‑plan définie sur Insertion, vous pouvez définir la couleur du contour de l’insertion.
- Lorsqu’il est transparent, l’arrière-plan de l’en-tête est de la même couleur que celui de la section du haut. Si vous voulez définir un thème de couleurs différent pour votre en-tête, désactivez la transparence dans l’éditeur d’en-tête.
Vous pouvez définir la couleur d'arrière-plan de votre zone de contenu principale dans Styles de site. Certains templates permettent également d'ajouter une couleur d'arrière-plan à l'en-tête, au pied de page et à d'autres espaces autour de votre contenu. Pour en savoir plus, consultez la page Modifier les couleurs.
Certains templates disposent d’une image d’arrière-plan ajoutée à partir du panneau Styles du site pour l’ensemble du site ou pour des pages spécifiques. Pour ajouter une image de ce type, cliquez sur l’ajustement Image d’arrière-plan ou sur l’icône de l’image correspondante dans le panneau Styles du site. Vous pouvez charger votre propre image ou rechercher et ajouter une image d’archive. Pour en savoir plus, consultez l’article Ajouter des images d’arrière-plan à l’ensemble du site dans la version 7.0.
Boutons
La marche à suivre pour personnaliser le style des boutons dépend de la version de votre site et elle est différente si le bouton apparaît sur l’ensemble du site ou uniquement sur une page ou une section particulière.
Pour obtenir les étapes détaillées de tous les scénarios, consultez l’article Personnaliser les boutons.
Produits
La marche à suivre pour personnaliser le style des produits dépend de la version de votre site.
Pour modifier le style de votre page Boutique principale, ouvrez les styles de section de votre boutique. Vous pouvez explorer les options pour modifier la mise en forme, l’arrière-plan et les couleurs des sections.
Pour personnaliser le style des produits, ouvrez les styles de site de la page Informations sur le produit. Ces paramètres affectent les pages individuelles dʼinformations du produit. Notez que certaines de ces options ne s’appliquent qu’aux produits comportant plusieurs images. Certaines modifications peuvent donc ne pas apparaître si votre produit n’en comporte qu’une.
Pour en savoir plus, consultez l’article Personnaliser les pages Boutique.
Les options de style de vos produits dépendent du template de votre site et elles sont différentes si votre template utilise une page Boutique classique, avancée ou unique.
Pour obtenir la liste détaillée des options de style des produits, consultez l’article Personnaliser les pages Boutique.
Masquer ou afficher des fonctionnalités
La marche à suivre pour masquer ou afficher les éléments et fonctionnalités du site dépend de la version de votre site.
Vous pouvez masquer certaines fonctionnalités de design telles que les icônes sociales, les bannières et les pieds de page en supprimant le bloc ou la section, ou en masquant l’en-tête et le pied de page. Ouvrez l’éditeur de section pour parcourir les différentes options de cette section de la page.
Dans certains templates, vous pouvez masquer des fonctionnalités de design comme les titres de page, les icônes sociales, les bordures, les bannières et les pieds de page. Ces ajustements se trouvent généralement dans la section Options du panneau Styles du site.
Enregistrer ou annuler des modifications
Vous pouvez enregistrer les modifications de style, annuler la modification précédente ou réinitialiser les zones de votre site vers leurs styles par défaut.
Enregistrer des modifications
Une fois vos modifications apportées au style et au contenu, cliquez sur Enregistrer dans le coin supérieur gauche de l’éditeur de page. Ce changement est irréversible. Vous pouvez rétablir les styles par défaut, mais vous ne pouvez pas restaurer les modifications de style précédentes après les avoir enregistrées.
Annuler des modifications
Vous pouvez annuler la plupart des modifications de style de deux manières différentes :
- Cliquez sur la flèche Annuler située en haut du panneau. La dernière modification de style apportée est ainsi annulée. Cliquez dessus plusieurs fois pour annuler successivement plusieurs modifications. Vous pouvez également cliquer sur la flèche Rétablir afin de rétablir une modification.
Conseil : Si vous modifiez les styles de site sur la version 7.1, vous pouvez fermer le panneau Styles du site pour modifier le contenu de votre page et également annuler ou rétablir votre dernier changement de style.
- Dans certains panneaux, cliquez sur le point en regard de l’ajustement que vous avez modifié. Cette opération annule l’ajustement pour revenir à la dernière modification enregistrée. Les points restent visibles jusqu’à l’enregistrement des modifications.
Astuce : si vous effectuez un changement de style et que vous l’annulez, l’option Enregistrer ne s’affichera pas. Cette option s’affiche uniquement si vous modifiez et conservez un ajustement.
Réinitialiser les styles par défaut
Vous pouvez réinitialiser certaines options de style aux valeurs par défaut du site. Cela rétablit la zone comme initialement définie lorsque vous avez lancé votre site pour la première fois. Après avoir enregistré, cette modification n’est pas réversible.
Pour obtenir des étapes détaillées, consultez Recommencer vtre site.
Ajouter du CSS personnalisé
Tous les sites Squarespace contrôlent automatiquement le CSS de votre site sans code personnalisé. Toutefois, si vous maîtrisez le code CSS et que vous ne trouvez pas une modification dont vous avez besoin dans le panneau Styles du site, vous pouvez ajouter du code CSS dans l’éditeur CSS.
Le CSS personnalisé peut interférer avec la fonctionnalité de votre site et aucun code personnalisé n'est pris en charge par Squarespace.
Aide supplémentaire
En plus de nos guides, nous offrons d’autres ressources pour vous aider à modifier le style de votre site :
- Consultez la FAQ sur les modifications de style pour découvrir les réponses aux questions les plus fréquentes.
- Assistez à un webinaire d’une heure sur les premiers pas avec Squarespace pour apprendre les bases de la configuration de votre site, comme la création de pages et l’ajustement des styles du site.
- Rejoignez Circle, le programme de partenariat de Squarespace pour les web designers professionnels, pour accéder à un forum de questions-réponses privé où vous pouvez poser des questions sur l’utilisation du code personnalisé.
- Faites appel à un designer indépendant via Squarespace Marketplace afin de personnaliser le design de votre site.
Plus d’informations sur la version 7.0
Pour en savoir plus sur les modifications de style dans la version 7.0, regardez cette vidéo.