É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 le type de contenu Heading dans l’ Page Builder stage 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.
Le champ En-tête de contenu de la section Content peut être utilisé pour ajouter un en-tête H1 en haut de la page. Cependant, le champ est hérité des versions précédentes de Commerce et est fourni pour prendre en charge le contenu plus ancien. Ce champ ne tire pas parti des fonctionnalités avancées de Page Builder. Il est recommandé de laisser le champ En-tête de contenu vide et d’utiliser le type de contenu En-tête Page Builder 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.
Vous pouvez faire glisser un en-tête de la section Eléments du panneau Page Builder vers une ligne, une colonne ou un ensemble d’onglets sur la scène. Le niveau d’en-tête et l’alignement peuvent être contrôlés à partir de la barre d’outils de l’éditeur sur l’étape, ou à l’aide de la commande Paramètres ( {width="20"} ).
Éditeur d’en-tête
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.
Ajouter un en-tête
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Heading sur une ligne, une colonne ou un ensemble d’onglets sur la scène.
{width="600" modal="regular"}
-
Dans l’éditeur, saisissez le texte de titre sur l’espace réservé
Edit Heading Text
.Par défaut, le texte de l’en-tête se voit attribuer un type d’en-tête de niveau 2 (H2).
{width="500" modal="regular"}
-
Dans la barre d’outils, choisissez le type d’en-tête approprié entre H1 et H6.
-
Modifiez l’alignement, si nécessaire.
Modification des paramètres d’en-tête
-
Pointez sur le conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="500" modal="regular"}
-
Si nécessaire, mettez à jour le contenu de l’en-tête (Heading Type et Heading Text).
Vous pouvez également mettre à jour ce contenu dans l’éditeur d’en-tête.
-
Mettez à jour les paramètres Advanced si nécessaire.
-
Pour contrôler le positionnement de l’en-tête dans le conteneur parent, choisissez un 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 le style Border 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 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 d’en-tête.
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
-
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
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é.
-
Pointez sur le conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’icône Dupliquer ( {width="20"} ).
Le doublon apparaît juste en dessous de l’original.
{width="500" modal="regular"}
-
Pointez sur le nouveau conteneur d’en-tête pour afficher la boîte à outils et sélectionnez l’icône Déplacer ( {width="20"} ).
{width="500" modal="regular"}
-
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é.
{width="500" modal="regular"}
-
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.
{width="500" modal="regular"}