Base de connaissances

Bénéficiez d'un hébergement web expert

Optez pour la fiabilité et l'expertise de SiteGround pour votre site web !

Accueil / Ecommerce / Comment utiliser le composant Code

Comment utiliser le composant Code

Résumez cet article avec :
Dernière mise à jour : Jul 02, 2026 1 min de lecture

Website Builder offre une large gamme de composants qui peuvent ajouter diverses fonctionnalités pour étendre la fonctionnalité de vos pages. Cependant, vous pouvez aller un pas plus loin et ajouter des composants de code personnalisé pour intégrer des applications tierces, JavaScript, CSS, Markdown ou HTML qui peuvent offrir à votre site web un design et des outils uniques.

Voici comment procéder :

  1. Accédez à Site Admin > Website Builder et appuyez sur Éditer le site web.
    Bouton Éditer le site web pour accéder à l'éditeur visuel de Website Builder
  2. Ouvrez la section Pages et séléctionnez une page existante ou créez-en une nouvelle avec le bouton Ajouter nouveau.
    Section Pages dans Website Builder où vous pouvez sélectionner une page existante ou utiliser Add New pour créer une nouvelle page


  3. Passez la souris sur la section où vous allez ajouter le composant et appuyez sur le bouton + AJOUTER dans le coin supérieur gauche pour ouvrir la fenêtre Ajouter un composant.
    Une section de page sélectionnée dans Website Builder où le bouton Add pour ajouter un composant est mis en évidence
  4. Sélectionnez le composant Code.
    La fenêtre Ajouter un composant sur une page dans Website Builder où vous pouvez sélectionner le composant Code
  5. Cliquez et maintenez la boîte du composant pour activer la vue en grille de la section. Ensuite, déplacez la boîte à votre position préférée et relâchez-la.
    Vue en grille pour une section de Website Builder où vous pouvez changer la position d'un composant
  6. Cliquez sur le composant et sélectionnez l’icône crayon (Modifier) dans la barre d’outils au-dessus.
    Une barre d'outils de composant qui apparaît lorsqu'un composant est sélectionné. L'icône Edit (crayon) est sélectionnée
  7. Une nouvelle fenêtre Modifier le code s’ouvrira où vous pourrez écrire ou coller votre code personnalisé.
    Un composant de code dans Website Builder où vous pouvez voir le code et le design visuel
  8. Si le code est trop volumineux et que vous avez besoin de plus d’espace de travail, appuyez sur l’icône d’agrandissement dans le coin inférieur droit.
    Un composant de code dans Website Builder avec un bouton d'agrandissement mis en évidence pour augmenter la zone de travail
  9. Pour revenir à la vue standard, fermez la fenêtre Mofiider le code.
    Un espace de travail agrandi d'un composant de code
  10. Utilisez le bouton Afficher le code source pour basculer entre l’affichage du code et l’affichage du résultat dans le bloc de composant.
    Composant de code avec un basculeur Afficher le code source activé qui affiche soit le code soit le résultat dans la boîte de composant

IMPORTANT ! Les scripts de code personnalisé ne s’exécutent pas lorsque vous êtes dans Website Builder. Pour les exécuter, ouvrez la page en mode Aperçu.

Partager cet article