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.

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 :

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égrer ?

Le bloc Intégrer extrait le contenu des sites et services externes qui utilisent la norme oEmbed. Vous pouvez utiliser le bloc Intégrer pour afficher sur votre site du contenu basique issu de tiers, tel qu’une publication Facebook ou une vidéo provenant d’un hébergeur 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 de 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 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 :

Si votre code personnalisé n’apparaît pas

Si votre code personnalisé n’apparaît pas, actualisez votre navigateur. Si cela ne résout pas le problème, c’est peut-être parce que :

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

Si vous recevez une erreur CORS

Une erreur CORS (Cross Origin Resource Sharing, ou « partage de ressources entre origines multiples ») se produit si vous utilisez JavaScript pour effectuer des requêtes à partir d’un navigateur. Toutes les requêtes doivent provenir d’une application côté serveur. Nous ne prenons pas en charge les requêtes CORS.

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 :

• W3Schools
• CodeCademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

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 :

• Découvrez les bonnes pratiques pour ajouter un code personnalisé.
• Lisez notre guide général sur les personnalisations basées sur du code.
• Rendez-vous sur Squarespace Forum, notre forum d’échange entre clients et développeurs.
• Trouvez un Squarespace Expert qui vous aidera à créer du code personnalisé pour votre site.
• Découvrez nos forfaits Premium et Entreprise et développez une solution davantage personnalisée pour votre activité.