[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."}

Disposition - Onglets

Utilisez le type de contenu Onglets pour ajouter un ensemble d’onglets à la Page Builder étape. Lorsque vous faites glisser l’espace réservé Onglets du panneau à la scène, un seul onglet par défaut s’affiche initialement. Vous pouvez ajouter d’autres onglets pour créer un ensemble complet. La largeur de l’ensemble d’onglets est déterminée par la largeur de son conteneur parent et par les paramètres de remplissage.

Ensemble d’onglets {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

Lorsque vous utilisez le type de contenu Onglets, vous ajoutez et modifiez des onglets individuels et le conteneur d’onglets qui contient un ou plusieurs onglets. Chaque onglet possède sa propre boîte à outils que vous utilisez pour concevoir des onglets sur l’étape de Page Builder.

Boîte à outils Onglet individuel

Boîte à outils Onglet {width="500" modal="regular"}

Outil
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Cette commande en regard du libellé de l’onglet est utilisée pour déplacer l’onglet individuel vers une autre position dans l’ensemble d’onglets.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier les onglets, qui permet de modifier les propriétés de chaque onglet.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de l’onglet.
Supprimer
Icône Supprimer {width="25"}
Supprime l’onglet du jeu d’onglets.

Boîte à outils Conteneur d’onglets

Boîte à outils Conteneur d’onglets {width="500" modal="regular"}

Outil
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le jeu d'onglets vers un autre emplacement de la grille dans le conteneur parent.
Ajouter
Icône Ajouter {width="25"}
Ajoute un onglet au jeu d’onglets.
(libellé)
Tabs
Identifie le conteneur actuel en tant que jeu d’onglets. Pointez sur la bordure supérieure du conteneur pour afficher la boîte à outils.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier l’onglet , qui permet de modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur d’onglets.
Afficher
Afficher l’icône {width="25"}
Affiche le conteneur d’onglets masqués.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de l’onglet actif.
Supprimer
Icône Supprimer {width="25"}
Supprime l’ensemble d’onglets actuel 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.

Ajout d’un onglet individuel

  1. Dans le panneau Page Builder sous Layout, faites glisser l’espace réservé​ Tabs ​directement vers la scène ou vers une ligne ou une colonne de la scène.

    Faire glisser les onglets sur une ligne {width="600" modal="regular"}

  2. Cliquez sur le libellé Tab 1 pour afficher la boîte à outils de l’onglet individuel et choisissez l’icône Paramètres ( Icône Paramètres {width="20"} ).

  3. Saisissez le Tab Name à utiliser comme libellé.

    Saisie du nom de l’onglet {width="600" modal="regular"}

  4. Si nécessaire, saisissez le Minimum Height de l’onglet .

    Cette valeur peut être un nombre avec une unité CSS valide (par exemple 100px, 50%, 50em, 100vh) ou un calcul (par exemple 100vh - 237px).

  5. Sélectionnez un paramètre de Vertical Alignment pour aligner tous les conteneurs de contenu ajoutés à l’onglet (Haut, Centre ou Bas).

  6. Si nécessaire, définissez les autres options en vous aidant des instructions des sections suivantes :

  7. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Ajouter un ensemble d’onglets

Les étapes suivantes commencent par un onglet individuel et créent un ensemble de trois onglets dans un conteneur d’onglets. Si vous ne disposez pas déjà d’un onglet individuel, suivez les instructions précédentes pour ajouter un seul onglet à l’étape.

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

  2. Cliquez dans le libellé Tab 2 pour afficher le curseur et saisissez votre propre libellé pour l’onglet.

  3. Cliquez à nouveau sur le deuxième onglet de l’étape et sélectionnez l’icône Dupliquer ( icône Dupliquer {width="20"} ).

  4. Cliquez dans le libellé VotreNom Copy pour afficher le curseur et saisissez votre propre libellé pour le troisième onglet.

Correspondance d’un ensemble d’onglets avec la palette {width="600" modal="regular"}

Déplacer un onglet dans la visionneuse

  1. Cliquez sur l’onglet à déplacer.

  2. Sélectionnez l’icône Déplacer ( Icône Déplacer {width="20"} ) qui s’affiche juste avant le texte du libellé de l’onglet et faites-la glisser jusqu’à un nouvel emplacement dans l’ensemble d’onglets.

Ajouter du contenu à un onglet

Vous pouvez ajouter n’importe quel type de contenu à un onglet comme vous le feriez pour une ligne. Suivez les étapes ci-après pour ajouter un type de contenu texte à titre d’exemple.

  1. Cliquez sur l’onglet où vous souhaitez ajouter le contenu.

  2. Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Texte vers l’onglet.

  3. Saisissez ou collez du texte dans l’éditeur et utilisez la barre d’outils de l’éditeur pour le mettre en forme selon vos besoins.

    Voir Éléments - Texte pour plus d’informations sur l’utilisation du type de contenu texte.

    Modification du contenu texte ajouté dans l’onglet {width="500" modal="regular"}

  4. Dans le coin supérieur droit, cliquez sur Save.

Modifier les paramètres d’onglets individuels

  1. Pointez sur un onglet individuel pour afficher la boîte à outils et choisissez l’icône Paramètres ( icône Paramètres {width="20"} ).

  2. Si nécessaire, modifiez l’un des paramètres de base de l’onglet :

    • Tab Name - Saisir le texte révisé du libellé de l’onglet. Vous pouvez également modifier le libellé directement sur l’étape.

    • Minimum Height - Saisissez en pixels si vous souhaitez remplacer la hauteur automatique. Par exemple, vous pouvez définir la hauteur minimale pour qu’elle corresponde à la hauteur d’une image d’arrière-plan afin de vous assurer que l’image complète est visible.

    • Vertical Alignment - Sélectionnez la position verticale des conteneurs de contenu ajoutés à l’onglet.

  3. Modifiez les autres paramètres si nécessaire à l’aide des sections suivantes pour plus de détails.

  4. Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Contexte

  • Background Color - Spécifiez la couleur d’arrière-plan 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. Ce paramètre détermine la couleur d’arrière-plan de la ligne. Vous pouvez également régler l’opacité de la couleur.

    Aucune couleur (par défaut) {width="200"}

    Vous pouvez saisir une valeur de trois façons :

    • Un nom de couleur prédéfini, tel que White

    • Valeur hexadécimale de la couleur, telle que #ffffff

    • Valeur rgba de la couleur, avec le pourcentage d’opacité, tel que rgba(255, 255, 255, 0.75)

    Pour sélectionner une couleur, cliquez sur l’échantillon à gauche de la zone Aucune couleur.

    Choix d’un échantillon de couleur {width="600" modal="regular"}

    Si vous cliquez sur la zone de couleur pour ouvrir à nouveau le sélecteur de couleurs, la zone située sous le curseur affiche les valeurs actuelles rouge, vert, bleu et alpha (rgba). Le dernier nombre indique le pourcentage d’opacité actuel sous la forme d’une décimale. Vous pouvez utiliser le curseur pour ajuster l’opacité ou saisir la valeur décimale souhaitée.

    Définition de l’opacité {width="600" modal="regular"}

    note note
    NOTE
    Page Builder prend également en charge un calque de transparence, ou couche alpha, dans les images d’arrière-plan qui peuvent être utilisées pour créer des arrière-plans avec différents degrés d’opacité.
  • Background Image - Si nécessaire, utilisez les outils fournis pour choisir une image d’arrière-plan à appliquer à l’onglet :

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Outil Description
    Upload Télécharge un fichier image de votre ordinateur local dans la galerie, puis l’applique comme image d’arrière-plan pour l’onglet.
    Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan pour l’onglet.
    Icône Appareil photo {width="25"} Vous permet de faire glisser l’image vers la mosaïque de la caméra ou d’accéder à l’image dans votre système de fichiers local.
  • Background Mobile Image - Si nécessaire, utilisez les mêmes outils pour choisir une image d’arrière-plan différente à utiliser pour l’affichage sur les appareils mobiles.

  • Background Size - Choisissez la manière dont l’image d’arrière-plan est mise à l’échelle par rapport à la largeur de l’onglet :

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Cover L’image d’arrière-plan couvre toute la largeur de l’onglet.
    Contain L’image d’arrière-plan est limitée à la largeur de la zone de tabulation.
    Auto Applique la taille de la feuille de style active.
  • Background Position - Choisissez le mode d’ancrage de l’image d’arrière-plan par rapport à l’onglet : Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Choisissez le type de pièce jointe pour déterminer le déplacement de l’image d’arrière-plan par rapport à la page de défilement :

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Description
    Scroll L’image d’arrière-plan jointe est synchronisée pour se déplacer vers le bas lors du défilement de la page.
    Fixed (Non disponible pour les appareils mobiles) L’image d’arrière-plan ne se déplace pas lorsque le conteneur défile sur l’image et est fixe à la position d’arrière-plan spécifiée.
  • Background Repeat - Définissez sur Yes pour répéter l’image d’arrière-plan afin de remplir l’espace disponible dans l’onglet.

Avancé

  • Pour contrôler l’alignement horizontal des conteneurs de contenu ajoutés à l’onglet, 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 les conteneurs de contenu le long de la bordure gauche de l’onglet, en tenant compte de la marge intérieure spécifiée.
    Center Aligne le conteneur de contenu au centre de l’onglet, en tenant compte de la marge intérieure spécifiée.
    Right Aligne le conteneur de contenu le long de la bordure droite de l’onglet, en tenant compte de la marge intérieure spécifiée.
  • Définissez le style de Border appliqué aux quatre côtés du conteneur d’onglets :

    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 :

    Couleur de bordure {width="600" modal="regular"}

    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.

    La ligne de l’exemple suivant a un rayon de bordure de 15.

    Ligne avec un rayon de bordure de 15 {width="500"}

  • (Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur de colonnes.

    Séparez plusieurs noms de classe par un espace.

  • Saisissez les valeurs, en pixels, du Margins and Padding pour spécifier les marges extérieures et la marge intérieure de la colonne.

    Saisissez chaque valeur correspondante dans le diagramme de conteneur d’onglets.

    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

Modifier les paramètres du jeu d'onglets

  1. Passez la souris sur la bordure supérieure du conteneur de jeux d’onglets pour afficher la boîte à outils et choisissez l’icône Paramètres ( icône Paramètres {width="20"} ).

  2. Si nécessaire, modifiez la Default Active Tab.

    Sélectionnez l’onglet de l’ensemble qui doit être actif lors du chargement de la page.

  3. Saisissez la Minimum Height, en pixels, si vous souhaitez remplacer la hauteur automatique du jeu de tabulations.

  4. Pour positionner les onglets de navigation dans la partie supérieure de l’ensemble d’onglets, choisissez l’Tab Navigation Alignment (Left, Center ou Right).

    Onglets de navigation alignés à droite {width="500" modal="regular"}

  5. Définissez les Options avancées pour le jeu d’onglets :

    • Pour contrôler le positionnement du jeu d’onglets 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 le jeu d’onglets le long de la bordure gauche du conteneur parent, en tenant compte de la marge intérieure spécifiée.
      Center Aligne le jeu d’onglets au centre du conteneur parent, en tenant compte de la marge intérieure spécifiée.
      Right Aligne le jeu d’onglets le long de la bordure droite du conteneur parent, en tenant compte de la marge intérieure spécifiée.
    • Définissez le style de Border appliqué aux quatre côtés du conteneur d’onglets :

      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 d’onglets.

      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 d’onglets.

      Saisissez les valeurs correspondantes dans le diagramme de conteneur d’onglets.

      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.

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