Utiliser l'Éditeur CSS

Ajoutez du code CSS personnalisé pour personnaliser les polices, les couleurs et les arrière-plans au-delà des options intégrées de Squarespace.

Dernière mise à jour le 31 janvier 2025

Si vous avez des connaissances en matière de codage et que vous souhaitez personnaliser votre site au-delà des options de style intégrées, vous pouvez ajouter du code CSS à l’aide de l’Éditeur CSS.

Le CSS ne devrait être utilisé que pour modifier les polices de caractères, couleurs et arrière-plans. Toute autre modification CSS risquerait de nuire à votre site.

Regarder une vidéo

Restrictions

  • Référez-vous à nos recommandations sur les éléments à modifier ou non avec le CSS dans FAQ sur le code personnalisé.
  • Dans la version 7.0, le CSS personnalisé n’est pas transféré lorsque vous changez de template. Si vous retournez au template précédent, le CSS ajouté y sera toujours présent.
  • Le système de vérification de la syntaxe de l’éditeur CSS Squarespace est un analyseur qui teste ce qui va réellement fonctionner dans différents navigateurs. Même si votre code ne présente aucune erreur dans le validateur CSS, l’analyseur signalera toute ligne susceptible de ne pas fonctionner comme prévu. Si une erreur de syntaxe est relevée, vérifiez si le CSS est saisi et formaté correctement et s’il ne manque rien.

Remarque

le code personnalisé (y compris le CSS) n’est pas pris en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour sa configuration ni pour son dépannage. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design réactif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Les personnalisations CSS peuvent également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

Ajouter un code CSS

Pour ajouter du code CSS :

  1. Ouvrez le panneau CSS personnalisé.
  2. Pour ouvrir l’éditeur dans une fenêtre extensible, cliquez sur Ouvrir dans une nouvelle fenêtre. La fenêtre se fermera si vous quittez le panneau CSS personnalisé.
  3. Ajoutez votre code.
  4. Lorsque vous avez terminé, cliquez sur Enregistrer pour publier vos modifications.

Des numéros de ligne s’affichent à gauche pour vous aider à repérer les différents morceaux de code. Les erreurs de syntaxe s’affichent en bas, en rouge.

KB Guide Image

Charger des fichiers (facultatif)

Utilisez la zone de chargement pour charger des ressources comme les images personnalisées ou les fichiers de police :

  1. Cliquez sur Fichiers personnalisés. (Dans la version 7.0, le texte du bouton est Gérer les fichiers personnalisés). 
  2. Cliquez sur Ajouter des images ou des polices ou faites glisser des fichiers dans cette zone pour charger votre fichier.

Astuce

si la zone de chargement des fichiers ne s’ouvre pas, autorisez les fenêtres pop-up dans votre navigateur.

Types de fichiers acceptés

Les formats d'images et de polices de caractères admis dans la section Fichiers Personnalisés sont les suivants :

  • .jpg
  • .png
  • .gif
  • .ttf
  • .otf
  • .woff

Les fichiers au format .svg ne sont pas admis.

Utiliser les fichiers personnalisés

Pour utiliser les fichiers :

  1. Entrez votre code à l’endroit où vous souhaitez indiquer l’URL du fichier.
  2. Placez le curseur à l’endroit où vous souhaitez intégrer l’URL dans le code.
  3. Cliquez sur le fichier.

L’éditeur CSS collera automatiquement l’URL directe de ce fichier pour que vous puissiez l’indiquer dans votre code.

Fichiers personnalisés et protocole SSL

En fonction du statut d'activation du protocole SSL, l'URL du fichier sera considérée comme sécurisée ou non. Si vous modifiez les paramètres SSL d'un site, nous vous recommandons de mettre à jour l'URL du fichier de manière à ce qu'elle y corresponde. Par exemple, si vous décidez d'activer le protocole SSL :

  1. Ouvrez l'Éditeur CSS.
  2. Cliquez sur Gérer les fichiers personnalisés.
  3. Cliquez sur le fichier.
  4. Faites débuter l'URL par https.
  5. Cliquez sur Enregistrer.
add-the-s.png
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.