Éléments - Code HTML
Utilisez le type de contenu Code HTML pour ajouter des fragments de code HTML, CSS et JavaScript à l’étape Page Builder. Par exemple, si vous souhaitez ajouter un HTML personnalisé, déclarez une classe CSS pouvant ê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






Ajout de code HTML
L'exemple suivant montre comment incorporer du code Google Font et déclarer des classes d'en-tête personnalisées qui remplacent la feuille de style actuelle.
Étape 1 : choisir une police Google
-
Rendez-vous sur le site Google Fonts et sélectionnez la famille de polices que vous souhaitez utiliser.
-
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
-
Ajoutez la règle de famille de polices à chaque classe d’en-tête, en plaçant les classes d’en-tête dans une balise
<style>
.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 : ajouter le code à la page
-
Dans la barre latérale Admin de votre boutique, accédez à Content > Elements>Pages.
-
Recherchez la page où la police doit être disponible et ouvrez-la en mode d’édition.
-
Faites défiler vers le bas et développez la section Content .
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé HTML Code vers une ligne, une colonne ou un ensemble d’onglets sur la scène.
Utilisez la ligne directrice rouge pour positionner le séparateur avant ou après un autre conteneur de contenu dans l’ensemble de lignes, colonnes ou onglets.
-
Pointez sur le conteneur HTML pour afficher la boîte à outils et choisissez l’icône Paramètres (
-
Dans la zone de texte, collez le code des polices Google incorporées et les déclarations de style que vous avez préparés.
Pour faciliter la lecture, vous pouvez saisir quelques espaces pour mettre le code en retrait.
-
Mettez à jour les paramètres restants si nécessaire (voir Modifier les paramètres de code HTML pour plus d’informations).
-
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 consultée via un navigateur.
Étape 3 : prévisualiser la page
-
Dans la section Currently Active, définissez Enable Page sur
Yes
. -
Dans le coin supérieur droit, cliquez sur la flèche Save et choisissez Save & Close.
-
Recherchez la page dans la grille et sélectionnez View dans la colonne Actions.
Modifier les paramètres de code d’HTML html-settings
-
Pointez sur le conteneur HTML pour afficher la boîte à outils et choisissez l’icône Paramètres (
-
Dans la zone de texte, modifiez le code selon vos besoins.
Les codes HTML, CSS et JavaScript sont pris en charge. Vous pouvez saisir ici des extraits de code appartenant à la section
<head>
de la page.L’éditeur propose é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 pour insérer un widget à l'emplacement du curseur dans la zone de texte HTML. Insérer une image… Cliquez pour insérer une image téléchargée ou une image de la Galerie à la position 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. -
Mettez à jour les paramètres Advanced selon vos 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 la marge intérieure spécifiée. Center
Aligne la liste au centre du conteneur parent, en tenant compte de la marge intérieure spécifiée. Right
Aligne le bloc le long de la bordure droite du conteneur parent, en tenant compte de la marge intérieure spécifiée. Dans l’exemple suivant, les options sont définies pour utiliser un alignement centré pour le bloc de code rendu.
-
Définissez le style de Border 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 tirets. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne continue. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous la forme d’une ligne rainurée. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne crantée. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne insérée. Outset
La bordure du conteneur s’affiche sous la forme d’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 Spécifiez la couleur en choisissant une nuance, 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) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur.
Séparez plusieurs noms de classe par un espace.
-
Saisissez les valeurs, en pixels, du 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 conteneur Description Margins Quantité d’espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
Padding Quantité d’espace vide appliqué au bord intérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
-