Éléments - Code d’HTML

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :
Page Builder

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

Outil

Icône

Description

Déplacer

{width="25"}

Déplace le conteneur Code HTML vers un autre emplacement valide de la page.

Paramètres

{width="25"}

Ouvre la page Modifier le code de l’HTML dans laquelle vous pouvez modifier les propriétés du conteneur.

Masquer

{width="25"}

Masque le conteneur Code HTML.

Afficher

{width="25"}

Affiche le conteneur Code d’HTML masqué.

Dupliquer

{width="25"}

Effectue une copie du conteneur Code HTML.

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 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

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 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.

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

Dans la barre latérale Admin de votre boutique, accédez à Content > Elements>Pages.
Recherchez la page dans laquelle la police doit être disponible et ouvrez-la en mode d’édition.
Faites défiler l’écran 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 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.

{width="600" modal="regular"}
Pointez sur le conteneur d’HTML pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
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.

{width="500" modal="regular"}
Mettez à jour les paramètres restants si nécessaire (voir Modification des paramètres de code d’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 affichée via un navigateur.

Étape 3 : aperçu de la page

Dans la section Currently Active, définissez Enable Page sur Yes.

{width="600" modal="regular"}
Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
Recherchez la page dans la grille et sélectionnez View dans la colonne Actions.

{width="700" modal="regular"}

Modification des paramètres du code d’HTML html-settings

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

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

Les codes HTML, CSS et JavaScript sont pris en charge. Les fragments de code appartenant à la section <head> de la page peuvent être saisis 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 pour insérer un widget à la position 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 à 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.

Mettez à jour les paramètres Advanced si nécessaire.

Pour contrôler le positionnement du code dans le conteneur parent, choisissez un 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 un alignement central {width="600" modal="regular"}

Définissez le style 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 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 de la bordure :

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 de CSS classes dans la feuille de style actuelle à appliquer au conteneur.

Séparez plusieurs noms de classe par un espace.

Saisissez des valeurs, en pixels, pour le Margins and Padding afin de 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