Éléments - En-tête

Les niveaux d’en-tête établissent une hiérarchie qui organise le contenu et aide les moteurs de recherche à indexer chaque page. Utilisez la variable En-tête type de contenu dans la variable Page Builder étape pour ajouter un conteneur de texte avec un niveau d’en-tête de H1 à H6 à l’étape. Les en-têtes sont formatés selon la feuille de style associée au thème actif.

La variable En-tête du contenu dans le champ Content ​peut être utilisée pour ajouter un en-tête H1 en haut de la page. Cependant, le champ est hérité de la version précédente de Commerce et est fourni pour prendre en charge le contenu plus ancien. Ce champ ne tire pas parti de Page BuilderFonctionnalités avancées de . Il est recommandé de laisser le champ En-tête de contenu vide et d’utiliser la variable Page Builder Type de contenu d’en-tête pour ajouter des en-têtes de n’importe quel niveau à la page.

L’exemple suivant illustre l’affichage de l’en-tête de contenu et du type de contenu En-tête lors du formatage par le thème Luma.

Niveaux d’en-tête et d’en-tête du contenu sur le storefront {width="700" modal="regular"}

Vous pouvez faire glisser un en-tête depuis la Éléments de la Page Builder d’un panneau à une ligne, une colonne ou un ensemble d’onglets sur l’étape. Le niveau d’en-tête et l’alignement peuvent être contrôlés à partir de la barre d’outils de l’éditeur sur la scène ou à l’aide de la fonction Paramètres ( Icône Paramètres {width="20"} ).

NOTE
Si vous apportez des modifications importantes à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour empêcher l’expiration de la session pendant que vous travaillez.

Éditeur d’en-tête

Editeur d’en-tête avec barre d’outils {width="500" modal="regular"}

Barre d’outils Conteneur d’en-tête

Comme pour tous les conteneurs de contenu, la boîte à outils s’affiche lorsque vous placez le pointeur de la souris sur le conteneur.

Barre d’outils Conteneur d’en-tête {width="500" modal="regular"}

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur d’en-têtes vers un autre emplacement valide sur la page.
(label)
En-tête
Identifie le conteneur actif comme en-tête.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier l’en-tête dans laquelle vous pouvez modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur d’en-tête.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur d’en-têtes masqué.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur d’en-tête.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur d’en-têtes et son contenu de la scène.
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 en-tête

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

    Faire glisser un en-tête vers la scène {width="600" modal="regular"}

  2. Dans l’éditeur, saisissez le texte du titre au-dessus de la balise Edit Heading Text espace réservé.

    Par défaut, le texte de l’en-tête se voit attribuer un type d’en-tête de niveau 2 (H2).

    Espace réservé dans l’éditeur d’en-tête {width="500" modal="regular"}

  3. Dans la barre d’outils, choisissez le type d’en-tête approprié entre H1 et H6.

  4. Modifiez l’alignement, si nécessaire.

Modification des paramètres d’en-tête

  1. Pointez sur le conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

    Barre d’outils d’en-tête {width="500" modal="regular"}

  2. Mettre à jour le contenu de l’en-tête (Heading Type et Heading Text) si nécessaire.

    Vous pouvez également mettre à jour ce contenu dans l’éditeur d’en-tête.

  3. Mettez à jour le Advanced ​selon les besoins.

    • Pour contrôler le positionnement de l’en-tête dans le conteneur parent, choisissez une Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      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.
    • Définissez la variable Border style appliqué aux quatre côtés du conteneur d’en-tête :

      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 layout-auto
      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 d’en-têtes.

      Saisissez les valeurs correspondantes dans le diagramme.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      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
  4. Lorsque vous avez terminé, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

Dupliquer un en-tête

Pour un en-tête formaté avec des paramètres spécifiques, il est plus efficace de le dupliquer plutôt que de recommencer avec un nouvel espace réservé.

  1. Pointez sur le conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’option Dupliquer ( Icône Dupliquer {width="20"} ).

    Le doublon apparaît juste en dessous de l’original.

    Duplication d’un conteneur d’en-tête {width="500" modal="regular"}

  2. Pointez sur le nouveau conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’option Déplacer ( Icône Déplacer {width="20"} ).

    Déplacement d’un en-tête {width="500" modal="regular"}

  3. Sélectionnez l’en-tête et faites-le glisser jusqu’à ce que la ligne directrice rouge marque la nouvelle position.

    Les bordures supérieure et inférieure de chaque conteneur apparaissent sous forme de lignes tirets lorsque l’en-tête est déplacé.

    Déplacement du titre dupliqué en position {width="500" modal="regular"}

  4. Si vous souhaitez modifier le niveau d’en-tête, cliquez sur le texte de l’en-tête et choisissez le nouveau niveau dans la barre d’outils de l’éditeur.

    Choix d’un nouveau niveau d’en-tête {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d