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

Ajouter du code personnalisé à votre site

Vous n’avez besoin d’aucune compétence particulière en codage ou en design pour créer votre site web sur Squarespace. Lorsque vous ajoutez un bloc, vous ajoutez un code HTML à votre site sans écrire le code vous-même. De même, lorsque vous effectuez des changements de style, vous modifiez le code CSS de votre site. Grâce à la puissance et à la flexibilité de la plateforme Squarespace, vous pouvez résoudre la plupart des problèmes de design avec les options de style intégrées.

Pour personnaliser davantage le style de votre site, vous pouvez utiliser du code personnalisé. Nous vous recommandons fortement de posséder des connaissances en codage avant d’ajouter du code personnalisé. Certains changements de codage seront en conflit avec le code source de votre site et pourront entraîner des difficultés lors de la personnalisation.

Remarque : l’ajout de code à votre site est une modification avancée qui ne fait pas partie des domaines de compétence de l’assistance Squarespace. Si vous utilisez du code personnalisé, il se peut que nous vous demandions de le supprimer pendant que nous réglons d’autres problèmes sur votre site. Savoir si le code personnalisé est à la racine du problème peut être une étape de dépannage importante.

Regarder une vidéo

Comment ajouter du code personnalisé

Squarespace permet d’ajouter à votre site du code côté client. Les options à votre disposition dépendent de votre forfait. Durant la période d’essai, vous avez accès à l’ensemble des options disponibles :

Option Forfait Code pris en charge À propos
Bloc Code (Basique) Tous les forfaits

CSS

HTML

Markdown

Ajouter du code à une page donnée pour modifier sa disposition ou son design.
Bloc Code (Avancé) Forfaits Business et Commerce

CSS

HTML

iframes

JavaScript

Markdown

Ajouter du code à une page donnée pour modifier sa disposition ou son design.
Injection de code Forfaits Business et Commerce

HTML
JavaScript

Ajouter du code appliqué sur l’ensemble de votre site ou une page entière, comme Facebook Pixel ou les services de messagerie instantanée.
Éditeur CSS Tous les forfaits

CSS

Modifier les polices, les couleurs et les arrière-plans. Pas de modification des dispositions.
Bloc Intégration Tous les forfaits

HTML

JavaScript

Intégrer du contenu provenant de sites externes utilisant la norme oEmbed.
Plateforme développeur Squarespace Version 7.0 uniquement avec les forfaits Business et Commerce

CSS
HTML
JavaScript
Markdown

Accéder à l’intégralité du code source de votre template version 7.0, créer des templates personnalisés et ne plus recevoir les mises à jour des templates de Squarespace.

Squarespace ne prend pas en charge le code côté serveur, y compris PHP, Ruby, Ruby on Rails et SQL.

Bloc Code ou bloc Intégration ?

Le bloc Intégration extrait le contenu des sites et services externes qui utilisent la norme oEmbed. Vous pouvez utiliser le bloc Intégration pour afficher sur votre site du contenu basique issu de tiers, tel qu’une publication Facebook ou une vidéo provenant d’un hôte non pris en charge par Squarespace.

Si vous avez un code plus avancé et personnalisable, le bloc Code sera préférable. En effet, celui-ci est polyvalent et peut afficher du code en HTML et Markdown. Vous pouvez également l’utiliser pour afficher des extraits de code. Les blocs Code sont couramment utilisés dans le cas de personnalisations basées sur du code telles que :

  • Intégration de documents via un service comme Issuu
  • Ajout de formulaires non pris en charge via un service comme Wufoo
  • Ajout d’une recherche MLS

HTML, JavaScript et CSS

Découvrez les types de blocs couramment utilisés que vous pouvez ajouter à votre site.

HTML

Ce code est utilisé pour ajouter du contenu sur une page web. Lorsque vous ajoutez un bloc, vous ajoutez du code HTML à votre site.

JavaScript

Ce code est utilisé pour ajouter des fonctions interactives à une page web. Le code JavaScript œuvre en arrière-plan pour faire fonctionner les diaporamas, les curseurs et les lightbox, entres autres.

CSS

CSS est un langage de code utilisé pour ajouter des effets de style et de design à une page web codée en HTML. Tous les templates Squarespace contiennent du code CSS intégré et proposent des ajustements et des options de style. Lorsque vous effectuez des changements dans le panneau Styles du site, vous modifiez le code CSS de votre site. Par conséquent, si vous décidez d’appliquer un code CSS personnalisé à votre site, nous vous conseillons de le faire avec parcimonie.

Vous pouvez utiliser l’éditeur CSS pour personnaliser les éléments suivants :

  • Polices
  • Couleurs
  • Arrière-plans

Vous ne devez pas utiliser CSS pour personnaliser les éléments suivants :

  • Marge intérieure
  • Marges
  • Objets flottants
  • Tailles (de blocs, d’images ou de bannières)
  • Positionnement

Le code CSS personnalisé est limité à 128 000 caractères.

La plateforme développeur Squarespace (version 7.0 uniquement)

Si vous êtes un utilisateur avancé de la version 7.0, vous pouvez utiliser la plateforme développeur Squarespace pour accéder au code source du template de votre site. Cette plateforme a été conçue pour que les développeurs et les agences de design puissent modifier nos templates existants et même créer des templates de A à Z. Si vous désactivez le mode développeur, les modifications par injection de code effectuées sur la plateforme développeur disparaîtront.

Si vous ne pouvez pas coller du code personnalisé

Si vous rencontrez des difficultés pour coller votre code, essayez le raccourci clavier. Cliquez dans la zone où vous souhaitez coller le code, puis appuyez sur les touches suivantes :

PC Mac
Ctrl + V  Commande + V

Si votre code personnalisé n’apparaît pas

Si le code personnalisé n’apparaît pas, plusieurs raisons sont possibles :

  • Vous êtes connecté(e) : par mesure de sécurité, votre code peut ne pas s'afficher dans un bloc Code lorsque vous êtes connecté(e), même si les visiteurs peuvent le voir. Cela se produit lorsque vous essayez de visualiser le code JavaScript intégré au moyen d'une connexion sécurisée (https://). Pour tester ce problème, visitez votre site à partir d'une fenêtre de navigateur privée.
  • Le code se trouve sur une page Index : votre code peut ne pas s'afficher si vous l'avez ajouté à une page située dans un Index. Pour tester ce problème, retirez la page de l'Index dans le panneau Pages, puis visitez votre site à partir d'une fenêtre de navigateur privée.

Si le code ne fonctionne toujours pas, contactez la société à l’origine du code qui saura comment le code doit fonctionner. Sachez que le code issu de tiers ne relève pas des compétences de l’assistance Squarespace. Nous ne sommes donc pas en mesure de vous apporter d’autres solutions.

Ressources de codage

Voici quelques sites web réputés que nous vous recommandons pour découvrir des tutoriels, des résolutions de problèmes et des guides de référence :

Remarque : le code personnalisé 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 adaptatif 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 :
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 117 sur 217
Ajouter du code personnalisé à votre site