PaaS uniquement

Éléments - Code d’HTML

Dernière mise à jour : 5 mai 2025
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Utilisateur ou utilisatrice

Utilisez le type de contenu HTML Code pour ajouter des fragments de code d’HTML, CSS et JavaScript à l’ Page Builder étape. Par exemple, vous pouvez ajouter un HTML personnalisé, déclarer une classe CSS qui peut être appliquée à un élément de la page. Vous pouvez également ajouter un fragment de code pour un logo, un bouton ou une bannière que vous avez reçu d’un fournisseur tiers.

Boîte à outils Code HTML

Boîte à outils de code d’HTML

OutilIcôneDescription
Déplacer Icône Déplacer Déplace le conteneur Code HTML vers un autre emplacement valide de la page.
Paramètres Icône Paramètres Ouvre la page Modifier le code de l’HTML dans laquelle vous pouvez modifier les propriétés du conteneur.
Masquer Icône Masquer Masque le conteneur Code HTML.
Afficher Icône Afficher Affiche le conteneur Code d’HTML masqué.
Dupliquer Icône Dupliquer Effectue une copie du conteneur Code HTML.
Supprimer Supprimer l’icône Supprime le conteneur Code HTML et son contenu de l’étape.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajouter un code HTML

L’exemple suivant montre comment incorporer le code Google Font et déclarer des classes d’en-tête personnalisées qui remplacent la feuille de style actuelle.

Étape 1 : Sélection d’une police Google

  1. Rendez-vous sur le site Google Fonts et sélectionnez la famille de polices que vous souhaitez utiliser.

  2. Copiez le code généré à incorporer dans la section <head> de la page et collez-le temporairement dans un éditeur de texte.

    • Incorporer le code de police
    • Règle CSS

  3. Ajoutez la règle font-family à chaque classe d’en-tête, en englobant les classes d’en-tête dans une balise <style>.

    Ce code est collé dans Page Builder.

    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Étape 2 : Ajout du code à la page

  1. Dans la barre latérale Admin de votre boutique, accédez à Content > Elements>Pages.

  2. Recherchez la page dans laquelle la police doit être disponible et ouvrez-la en mode d’édition.

  3. Faites défiler l’écran vers le bas et développez la section Content.

  4. Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé HTML Code sur une ligne, une colonne ou un ensemble d’onglets sur la scène.

    Utilisez la ligne guide rouge pour positionner le séparateur avant ou après un autre conteneur de contenu dans la ligne, la colonne ou le jeu de tabulations.

    Glissement d’un espace réservé de code d’HTML vers l’étape

  5. Pointez sur le conteneur d’HTML pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( Icône Paramètres ).

  6. Dans la zone de texte, collez le code incorporé des polices Google et les déclarations de style que vous avez préparées.

    Pour faciliter la lecture, vous pouvez saisir quelques espaces pour mettre le code en retrait.

    Code et styles d’HTML

  7. Mettez à jour les paramètres restants si nécessaire (voir Modification des paramètres de code d’HTML pour plus d’informations).

  8. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

    La nouvelle police s’affiche lorsque la page est affichée via un navigateur.