Éléments - Code de HTML

Utilisez la variable Code HTML type de contenu permettant d’ajouter des fragments de code de HTML, CSS et JavaScript dans la variable 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 Code HTML

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur Code HTML vers un autre emplacement valide de la page.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier le code du HTML dans laquelle vous pouvez modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur Code HTML.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur Code de HTML masqué.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur Code HTML.
Supprimer
Icône Supprimer {width="25"}
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 des Police Google code 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. Visitez le Polices Google et sélectionnez la famille de polices à utiliser.

  2. Copiez le code généré qui doit être incorporé dans le <head> de la page et collez-la 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 encadrant les classes d’en-tête dans une <style> balise .

    Ce code est collé dans Page Builder.

    code language-html
    <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 le Administration barre latérale de votre magasin, 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 Content .

  4. Dans le Page Builder panneau, développer Elements et faites glisser un HTML Code d’un espace réservé à une ligne, une colonne ou un ensemble d’onglets sur l’étape.

    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 de HTML vers l’étape {width="600" modal="regular"}

  5. Passez la souris sur le conteneur HTML pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ), icône .

  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 de HTML {width="500" modal="regular"}

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

  8. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

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

Étape 3 : aperçu de la page

  1. Dans le Currently Active, définissez Enable Page ​to Yes.

    Activer la page {width="600" modal="regular"}

  2. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.

  3. Recherchez la page dans la grille et sélectionnez View dans le Actions ​colonne .

    Aperçu des en-têtes de page avec la nouvelle famille de polices {width="700" modal="regular"}

Modification des paramètres du code de HTML html-settings

  1. Passez la souris sur le conteneur HTML pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

  2. Dans la zone de texte, modifiez le code selon vos besoins.

    Les codes HTML, CSS et JavaScript sont pris en charge. Fragments de code appartenant à la variable <head> de la page peut être saisie ici.

    L’éditeur fournit également des boutons pour insérer des éléments spéciaux dans le code :

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Bouton Description
    Insérer un widget… Cliquez sur pour insérer un widget à la position du curseur dans la zone de texte HTML.
    Insérer une image… Cliquez sur pour insérer une image téléchargée ou une image de la galerie à l’emplacement du curseur dans la zone de texte HTML.
    Insérer une variable… Cliquez pour insérer une variable à la position du curseur dans la zone de texte HTML.
  3. Mettez à jour le Advanced ​selon les besoins.

    • Pour contrôler le positionnement du code dans le conteneur parent, choisissez une Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Option Description
      Default Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
      Left Aligne la liste le long de la bordure gauche du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
      Center Aligne la liste au centre du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
      Right Aligne le bloc le long de la bordure droite du conteneur parent, en tenant compte de toute marge intérieure spécifiée.

      Dans l’exemple suivant, les options sont définies pour utiliser un alignement central pour le bloc de code rendu.

      Diviseur avec alignement central {width="600" modal="regular"}

    • Définissez la variable Border style appliqué aux quatre côtés du conteneur de code :

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      Option Description
      Default Applique le style de bordure par défaut spécifié par la feuille de style associée.
      None Ne fournit aucune indication visible des bordures du conteneur.
      Dotted La bordure du conteneur s’affiche sous la forme d’une ligne pointillée.
      Dashed La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés.
      Solid La bordure du conteneur s’affiche sous la forme d’une ligne pleine.
      Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
      Groove La bordure du conteneur s’affiche sous forme de ligne droite.
      Ridge La bordure du conteneur s’affiche sous la forme d’une ligne à droite.
      Inset La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion.
      Outset La bordure du conteneur apparaît comme une ligne de départ.
    • Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Option Description
      Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
      Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
      Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.
    • (Facultatif) Indiquez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur.

      Séparez plusieurs noms de classe par un espace.

    • Saisissez des valeurs, en pixels, pour la variable Margins and Padding pour déterminer les marges extérieures et la marge intérieure du conteneur de code.

      Saisissez les valeurs correspondantes dans le diagramme.

      table 0-row-2 1-row-2 2-row-2
      Zone de conteneur Description
      Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left
      Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d