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 du panneau 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. Lorsque vous parcourez ce guide, 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, les ajustements de style sont triés par type dans le panneau Design. Les modifications que vous effectuez dans le panneau Design s’appliquent à l’ensemble du site, mais vous pouvez également réaliser des modifications plus précises en personnalisant des sections ou des zones de texte spécifiques.

Tous les sites de la version 7.1 partagent le même template, avec les mêmes fonctionnalités et les mêmes options de style. Leurs sections permettent également d'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, vous deviez utiliser le panneau Styles de site pour personnaliser le style. Le panneau Styles de site de chaque template propose des ajustements différents. Les modifications sont regroupées dans différentes sections, comme En-tête 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 effectuer des modifications qui s’appliqueront à tout le site, utilisez les options du panneau Design. Dans le menu principal, cliquez sur Design, puis sur l’élément du site que vous souhaitez modifier, par exemple Polices ou Couleurs. Utilisez ce guide pour obtenir des informations plus détaillées sur chaque panneau. 

Vous pouvez effectuer des modifications plus précises en modifiant une section spécifique. Pour personnaliser le style d’une section, modifiez la page, survolez la section avec votre souris, puis cliquez sur l’icône 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, et qu’elles utilisent chacune 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 article de blog ou un produit, par exemple). 
  3. Retournez au menu principal puis cliquez sur Design, puis sur Styles de site
  4. Dans le panneau Styles de site, cliquez sur n'importe quel ajustement pour y 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 de 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 Produits, la même modification s'appliquera à toutes les pages Produits de votre site. Pour obtenir la liste complète des ajustements de votre template, consultez le guide des ajustements des styles du site de votre template.

Astuce : le style de chaque page de couverture peut être modifié séparément.

Cliquez sur une zone de page pour n'afficher que 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 sélectionné. Vous pouvez revenir à l'ensemble des options en cliquant sur Tout afficher. Ce raccourci est disponible dans la plupart des templates et la plupart des zones de votre site. 

Voici à quoi cela ressemble 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

Vous pouvez effectuer des modifications de style dans l’application Squarespace sur les deux versions de Squarespace. 

Remarque : Dans la version 7.1, le panneau de style de l’application Squarespace est intitulé Styles de site et Éditeur de style, mais les options correspondent à celles du panneau Design sur ordinateur. 

Pour personnaliser le style d’une page :

  1. Appuyez sur Pages, puis sur la page à laquelle vous souhaitez que les modifications soient appliquées. L’application affiche alors les options correspondant à la page que vous consultez ainsi qu’un aperçu de vos modifications. 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.
  2. Appuyez sur la barre d’aperçu pour réduire l’aperçu de la page.
  3. Appuyez sur Paramètres, puis sur Styles du site
  4. Le panneau Éditeur de style affiche à partir du bas de l’écran la liste des sous-panneaux et des ajustements de style. Appuyez sur un ajustement pour effectuer des modifications.

Modifier les polices

La marche à suivre pour modifier les polices dépend de la version de votre site. 

Pour modifier une police, cliquez sur Design, puis sur Polices.

Dans le panneau Polices, vous pouvez choisir un pack de polices à appliquer à tout le 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, 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.

Modifier les couleurs

La marche à suivre pour modifier les couleurs dépend de la version de votre site.

Pour modifier les couleurs de votre site, dans le menu principal, cliquez sur Design, puis 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.

Ajouter des animations (version 7.1)

Les animations ne sont disponibles pour l’ensemble du site que dans la version 7.1. Si votre site utilise la version 7.0, vous pouvez ajouter des animations aux blocs Image et aux blocs Citation.

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.

personnaliser les boutons ;

La marche à suivre pour personnaliser le style des boutons dépend de la versionde votre site et et du fait que le bouton apparaisse 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.

Modifier l’espacement et la 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, dans le menu principal, cliquez sur Design, puis sur Espacement.

Utilisez ces ajustements :

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

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.

Modifier la valeur de proportion d’une image

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.

Personnaliser le style des produits

La marche à suivre pour personnaliser le style des produits dépend de la version de votre site. 

Pour personnaliser le style des produits, ouvrez les options de style dans le panneau Design :

  1. Dans le Menu principal, cliquez sur Design.
  2. 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 Produits.

Les options de style de vos produits dépendent du template de votre site, et du fait que que votre template utilise une page Produits classique, avancée ou unique.

Pour obtenir une liste détaillée des options de style des produits, consultez l’article Personnaliser les pages Produits. Vous pouvez également consulter tous les ajustements des produits dans le guide des ajustements de style de votre template

Personnaliser le style des 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 Design.

Pour en savoir plus sur les styles des blocs Image des deux versions, consultez l’article Blocs Image

Modifier l’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.

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.

Définir le style des 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.

Certains templates disposent d’une image de bannière pour l’ensemble du site que vous pouvez ajouter à partir du panneau Styles du site. Cliquez sur l’ajustement Image de bannière, sur l’ajustement Image d’en-tête ou sur l’icône de l’image correspondante dans le panneau Styles du site.

Pour ajouter des images à des pages spécifiques, ouvrez les Paramètres de la Page, puis cliquez sur l'onglet Médias et chargez votre image.

Pour en savoir plus, consultez l’article Ajouter des images de bannière.

Personnaliser l’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 dans le coin supérieur 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

Personnaliser le style du 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.

Modifier une barre latérale (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.

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 de 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 des modifications de style, annuler la modification précédente ou réinitialiser l’ensemble de votre site pour revenir à ses styles par défaut.

Enregistrer des modifications

Quand vous êtes satisfait(e) des modifications effectuées, cliquez sur Enregistrer en haut à gauche. Les modifications apparaîtront sur votre site actif.

Cette modification n’est pas réversible. Si vous avez la possibilité de revenir aux styles par défaut de votre site, vous ne pouvez pas rétablir les valeurs 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 l’icône Annuler située en haut du panneau. Cette action annule la dernière modification de style apportée. Cliquez dessus plusieurs fois pour annuler successivement plusieurs modifications. Vous pouvez également cliquer sur l’icône Rétablir afin de rétablir une modification.

theme_-_undo_and_redo.png

  • Dans certains panneaux, cliquez sur le point situé à côté de l’ajustement que vous avez effectué. Cela annulera une modification de style spécifique, dans n’importe quel ordre. Les points restent visibles jusqu’à ce que vous enregistriez les modifications.

style_dot.png

Remarque : si vous effectuez un changement de style et que vous l’annulez, l’option Enregistrer ne s’affichera pas en haut du panneau. Cette option s’affiche uniquement si vous modifiez et conservez un ajustement.

Réinitialiser les styles par défaut

Pour certaines options de style du panneau Création, vous pouvez réinitialiser le 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 instructions détaillées, consultez l'article Démarrer

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

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 : 66 sur 194
Réaliser des changements de style