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 |
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 |
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 :
- Découvrez les recommandations pour l’utilisation de code personnalisé.
- Lisez notre guide général sur les personnalisations basées sur du code.
- Rendez-vous sur le forum Squarespace, notre espace 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é.