[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Éléments - Diviseur

Utilisez le type de contenu Diviseur pour ajouter une règle comme saut visuel entre les sections de contenu de la Page Builder étape. Vous pouvez spécifier la couleur, l’épaisseur et la largeur de la ligne de séparation. Vous pouvez également contrôler l’alignement, définir les marges intérieures et le format de la bordure du conteneur. Par défaut, la ligne de séparation est une règle de lisière qui étend toute la largeur du conteneur, avec la possibilité d’une marge intérieure.

Diviseur par défaut dans un conteneur sans bordure {width="500" modal="regular"}

Bien que la plupart des conteneurs de séparateur soient invisibles, l’exemple suivant montre comment afficher le conteneur avec une bordure en tirets rouges afin que vous puissiez voir la relation entre le séparateur, la marge intérieure et le conteneur. Vous pouvez ajuster la marge intérieure en haut et en bas du séparateur pour contrôler l’espacement entre les éléments.

Diviseur avec remplissage dans le conteneur avec bordure en tirets {width="500" modal="regular"}

NOTE
Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils du séparateur

Outil
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur du séparateur vers un autre emplacement valide sur la page.
(libellé)
SÉPARATEUR
Identifie le conteneur courant comme un élément diviseur.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier le séparateur, qui permet de modifier les propriétés du séparateur et de son conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur du séparateur.
Afficher
Afficher l’icône {width="25"}
Affiche le conteneur de séparateur masqué.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur du séparateur.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur du séparateur 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 séparateur

  1. Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Divider vers une ligne, une colonne ou un ensemble d’onglets sur la scène.

    Utilisez la ligne directrice rouge comme référence lorsque vous positionnez le séparateur avant ou après un autre conteneur de contenu sur la scène.

    Faire glisser un séparateur sur la scène {width="600" modal="regular"}

    Dans l’exemple suivant, le séparateur marque le début d’une nouvelle section de texte.

    Séparateur séparant les sections de texte {width="500" modal="regular"}

  2. Pour spécifier les paramètres du nouveau diviseur, procédez comme suit.

Modifier les paramètres du séparateur

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

    Boîte à outils du séparateur {width="500" modal="regular"}

  2. Modifiez le Line Color de division à l’aide de l’une des méthodes suivantes :

    Cliquez ensuite sur Apply.

    Définition de la couleur de la ligne {width="600" modal="regular"}

  3. Saisissez le Line Thickness en pixels.

  4. Pour indiquer l’unité de mesure, saisissez la Line Width suivie de px ou de %.

    Définition de la couleur, de l’épaisseur et de la largeur des lignes {width="600" modal="regular"}

  5. Mettez à jour les paramètres Advanced ​selon vos besoins.

    • Pour contrôler le positionnement du séparateur dans le conteneur parent, choisissez l’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 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 séparateur.

      Diviseur avec alignement au centre {width="600" modal="regular"}

    • Définissez le style de Border appliqué aux quatre côtés du conteneur du séparateur :

      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 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 du séparateur.

      Saisissez les valeurs correspondantes dans le diagramme.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      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
  6. Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

    Séparateur centré sur une ligne {width="500" modal="regular"}

Dupliquer un séparateur

Pour un séparateur formaté avec des paramètres spécifiques, il est plus efficace de faire un doublon, plutôt que de recommencer avec un nouvel espace réservé.

  1. Pointez sur le conteneur de séparateur pour afficher la palette et choisissez l’icône Dupliquer ( icône Dupliquer {width="20"} ).

    Le conteneur du séparateur en double s’affiche juste en dessous de l’original.

    Diviseur dupliqué {width="500" modal="regular"}

  2. Pointez sur le nouveau conteneur de séparateur pour afficher la boîte à outils et choisissez l’icône Déplacer ( Icône Déplacer {width="20"} ).

    Déplacement d’un séparateur {width="500" modal="regular"}

  3. Sélectionnez et faites glisser le séparateur 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 en tirets lorsque le séparateur est déplacé.

    Mise en place du séparateur dupliqué {width="500" modal="regular"}

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