Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Réaliser des changements de style

Utilisez les options des panneaux Styles du site et Design 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.

Regarder une vidéo

Cette vidéo concerne la version 7.1. Pour une vidéo sur la version 7.0, consultez la section Aide supplémentaire.

Différences entre les options de style des versions 7.1 et 7.0

Le fonctionnement des modifications de style diffère selon la version de votre site. Dans les sections ci-dessous, cliquez sur l’onglet correspondant à votre version pour afficher 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 précises en personnalisant le style de certaines sections ou zones de texte. Pour des modifications de style plus avancées, comme la personnalisation de votre écran de verrouillage ou de votre page de paiement, utilisez le panneau Design.

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 précédente de Squarespace, 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.

Dans la version 7.0, chaque template dispose de ses propres options de style et de ses propres paramètres par défaut. Pour en savoir plus, consultez le guide de votre template.

Trouver un ajustement de style

L’accès aux ajustements de style dépend de la version de votre site.

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.

paintbrush_icon.png

Cliquez ensuite sur l’élément du site que vous souhaitez modifier, par exemple les polices ou les couleurs. Ce guide contient des informations plus détaillées sur chaque panneau. Vous pouvez également ouvrir le panneau Styles du site à partir du Menu principal en cliquant sur Design, puis sur Styles du site.

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 l’icône en forme de crayon. Les styles de section remplacent les styles de l’ensemble du site.

edit_a_section.png

Ici, vous pouvez également choisir différentes dispositions pour vos sections de collection et sections de galerie. Si vous modifiez le style d’une section de collection, ces changements seront appliqués à toutes les dispositions de ce type. Prenons un exemple : si vous disposez de deux sections de 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 :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Ouvrez 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 produit, par exemple).
  3. Revenez dans le Menu principal et cliquez sur Design, puis sur Styles du site.
  4. 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. Pour obtenir la liste complète des ajustements de votre template, consultez le guide des ajustements de style de votre template.

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 :

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Pour certains ajustements, vous pouvez faire glisser l'élément dans l'aperçu pour ajuster les paramètres :

drag-spacers.gif

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 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 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 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.

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 afficher 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 :

  1. En haut à gauche, cliquez sur Modifier.
  2. Survolez le pied de page avec votre souris, puis cliquez sur Modifier le pied de page.
  3. Cliquez sur l’icône crayon pour effectuer des modifications 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 Éditer 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 Styles du site, puis cliquez sur 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 de 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 des 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 l’icône crayon et changez la hauteur de la section.
  • 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.

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. Pour 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.

Depuis le panneau Styles de site, certains templates permettent d'ajouter une image d’arrière-plan à l’ensemble du site ou à 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 d’image correspondante dans le panneau Styles de 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.

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 afficher 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 y trouverez des options pour modifier le format, l’arrière-plan et les couleurs des sections.

Pour personnaliser le style des produits, ouvrez le panneau Styles du site, puis cliquez sur Produits. 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. Il se peut donc que vous ne constatiez pas de changements 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. Vous pouvez également consulter tous les ajustements des produits dans le guide des ajustements de style de votre template.

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. 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. Pour afficher la liste de ces options, consultez le guide des ajustements de style de votre template.

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 que vous avez effectué toutes les modifications de style et de contenu et que vous aimez le résultat, survolez Terminé dans le coin supérieur gauche de l’éditeur de page puis cliquez sur Enregistrer. Cette modification n’est pas réversible. Bien que vous puissiez toujours revenir aux styles par défaut, vous ne pouvez pas restaurer les modifications de style précédentes après l’enregistrement.

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.

style_dot.png

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 obtenir des réponses aux questions les plus fréquentes.
  • Assistez à un webinaire d’une heure intitulé Se lancer 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.
Conseil : embauchez un expert Squarespace pour vous aider à personnaliser la conception de votre site. Apprenez-en davantage sur les services d'experts disponibles via Squarespace Marketplace.

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.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 96 sur 285
Réaliser des changements de style