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

Utilisez les blocs Code pour ajouter du code personnalisé à une page, à un billet de blog, à une barre latérale, à un pied de page ou dans une autre zone de contenu. Les blocs Code sont très pratiques si vous souhaitez intégrer des widgets tiers ou personnaliser vos pages au-delà des possibilités offertes par d’autres blocs. Vous pouvez également utiliser les blocs Code pour restituer du code HTML et Markdown ou afficher des extraits de code.

Pour découvrir comment choisir le bloc le plus adapté à votre contenu personnalisé, consultez l’article Blocs Intégration et blocs Code.

Quel que soit le forfait, les blocs Code prennent en charge le texte brut, le code HTML, le code Markdown et le code CSS entouré des balises <style></style>.

L’ajout de code JavaScript ou d’iframes aux blocs Code est une fonctionnalité Premium disponible avec les forfaits Entreprise et Commerce.

Regarder une vidéo

Ajouter un bloc Code

Pour ajouter un bloc Code :

  1. Modifiez une page ou un billet de blog, cliquez sur un point d’insertion, puis sélectionnez Code dans le menu. Pour en savoir plus, consultez l’article Ajouter des blocs.
  2. Ajoutez votre code dans la zone de texte.
  3. Si vous utilisez le bloc Code pour afficher des extraits de code, cochez l’option Afficher la source.
  4. Cliquez sur Appliquer pour enregistrer vos modifications.

Ajouter le code

Si vous utilisez le bloc Code pour restituer le code, sélectionnez HTML ou Markdown dans le menu déroulant.

Saisissez ou collez le code dans la zone de texte, puis supprimez le texte d’espace réservé <p>Bonjour le monde !</p>. Pour coller le code, copiez-le puis cliquez dans la case et appuyez sur Ctrl + V (Windows) ou Cmd + V (Mac).

Par défaut, les blocs Code définis sur CSS ou JavaScript affichent le code sous forme de texte. Pour restituer le code CSS ou JavaScript dans les blocs Code, sélectionnez HTML dans le menu déroulant. Ensuite, pour CSS, placez le code entre les balises <style> </style>. Pour JavaScript, placez le code entre les balises <script> </script>.

Remarque : les blocs Code sont limités à 400 Ko, soit environ 300 000 caractères.

Afficher la source

Si vous utilisez le bloc Code pour afficher des extraits de code, cochez l’option Afficher la source.

Cette option est utile pour afficher des exemples de code, car les blocs Code formatent automatiquement les extraits de code pour des raisons de lisibilité, ce qui en fait une meilleure solution qu’un bloc Texte.

Remarque : l'option Afficher la Source est toujours cochée pour les options CSS, JavaScript et Plain Text (Texte Clair).

Prévisualiser du code intégré

Par mesure de sécurité, il peut arriver que le code ne s’affiche pas lorsque vous êtes connecté(e), même si les visiteurs peuvent le voir. Si le code que vous avez ajouté à un bloc Code ne s’affiche pas, cliquez sur Aperçu en mode sans échec pour visualiser l’élément incorporé.

Résolution de problèmes

Quelques astuces à retenir si vous rencontrez des problèmes avec les blocs Code :

  • Votre code peut également ne pas s'afficher si vous l'avez ajouté à une page située dans un Index. Pour effectuer un test, retirez la page de l'Index dans la section Pages, puis déconnectez-vous de votre site.
  • Le chargement Ajax peut créer des problèmes avec le code personnalisé. Vous pouvez désactiver Ajax pour vérifier si le problème persiste.
  • Si des problèmes de bloc Code vous empêchent de modifier votre site, désactivez les scripts dans l’aperçu pour modifier ou supprimer le code.

Si vous rencontrez toujours des problèmes, nous vous conseillons de prendre contact avec la source (par exemple, le service vous ayant communiqué le code pour un widget), car elle connaît la façon dont il est censé fonctionner.

Remarque  : l'ajout de code personnalisé n'est pas pris en charge par notre service d'assistance. Autrement dit, nous ne somme pas en mesure de vous aider concernant la configuration de code personnalisé ou la résolution de problèmes associés. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ou son entière compatibilité avec Squarespace, notamment 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 tierces peuvent également causer des problèmes d'affichage avec les futures mises à jour de notre plateforme. Bien que nous ne soyons pas en mesure de vous assister à ce sujet, de nombreuses ressources peuvent vous orienter dans la bonne direction :
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 89 sur 248