Disposition - Onglets

Utilisez la variable Onglets type de contenu pour ajouter un ensemble d’onglets dans la variable Page Builder étape. Lorsque vous faites glisser l’espace réservé Onglets du panneau vers 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 de tabulations est déterminée par la largeur de son conteneur parent et par les paramètres de remplissage.

Jeu d’onglets

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.

Toolbox

Lorsque vous travaillez avec l’événement Onglets type de contenu, vous ajoutez et modifiez des onglets individuels et le conteneur d’onglets contenant un ou plusieurs onglets. Chaque onglet comporte sa propre boîte à outils que vous utilisez pour concevoir des onglets sur le Page Builder scène.

Boîte à outils à onglets individuelle

Boîte à outils à onglets

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Ce contrôle en regard du libellé de l’onglet permet de déplacer l’onglet individuel vers un autre emplacement du jeu d’onglets.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier les onglets, dans laquelle vous pouvez 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 du conteneur d’onglets

Boîte à outils du conteneur de tabulation

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace l’ensemble d’onglets vers une autre position sur la grille dans le conteneur parent.
Ajouter
Icône Ajouter {width="25"}
Ajoute un onglet au jeu de tabulations.
(label)
Tabs
Identifie le conteneur actuel en tant que jeu d’onglets. Passez la souris 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 dans laquelle vous pouvez modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur d’onglets.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur d’onglets masqué.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de l’onglet actif.
Supprimer
Icône Supprimer {width="25"}
Supprime le jeu d’onglets actif 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 onglet individuel

  1. Dans le Page Builder panneau sous Layout, faites glisser le Tabs ​espace réservé directement à l’étape ou à une ligne ou une colonne sur l’étape.

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

  2. Cliquez sur le bouton Tab 1 libellé pour afficher la boîte à outils à onglets individuelle et sélectionner la propriété Paramètres ( Icône Paramètres {width="20"} ).

  3. Saisissez le Tab Name que vous souhaitez utiliser comme libellé.

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

  4. Si nécessaire, saisissez la variable Minimum Height pour l’onglet .

    Cette valeur peut être un nombre avec n’importe quelle unité CSS valide (telle que 100px, 50%, 50em, 100vh) ou un calcul (tel que 100vh - 237px).

  5. Choisissez une Vertical Alignment pour aligner les conteneurs de contenu ajoutés à l’onglet (Haut, Centre ou Bas).

  6. Si nécessaire, définissez les autres options à l’aide des sections suivantes :

  7. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

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’un onglet individuel, suivez les instructions précédentes pour ajouter un seul onglet à l’étape.

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

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

  3. Cliquez à nouveau sur le deuxième onglet de la scène et choisissez le Dupliquer ( Icône Dupliquer {width="20"} ).

  4. Cliquez dans le champ YourName . Copy libellé pour afficher le curseur et saisir votre propre libellé pour le troisième onglet.

Correspondance d’un ensemble d’onglets avec la boîte à outils

Déplacer un onglet dans la visionneuse

  1. Cliquez sur l’onglet que vous souhaitez déplacer.

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

Ajouter du contenu à un onglet

Vous pouvez n’importe quel type de contenu à un onglet comme vous pouvez à une ligne. Pour ajouter un type de contenu de texte, procédez comme suit.

  1. Cliquez sur l’onglet dans lequel vous souhaitez ajouter le contenu.

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

  3. Entrez 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 Eléments - Texte pour plus d’informations sur l’utilisation du type de contenu texte.

    Editer le contenu textuel ajouté à l'onglet {width="500" modal="regular"}

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

Modification des paramètres des onglets individuels

  1. Passez la souris sur un onglet pour afficher la boîte à outils et sélectionnez l’option 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 - Saisissez le texte révisé du libellé de l’onglet. Vous pouvez également modifier le libellé directement sur la scène.

    • Minimum Height - Saisissez comme 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 qui sont ajoutés à l’onglet.

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

  4. Lorsque vous avez terminé, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

Contexte

  • Background Color - Spécifiez la couleur d’arrière-plan 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. 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 manières différentes :

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

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

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

    Si vous souhaitez choisir une couleur, cliquez sur l’échantillon à gauche du Aucune couleur de la boîte.

    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 chiffre indique le pourcentage d’opacité actuel sous forme 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 canal alpha, dans les images d’arrière-plan qui peuvent être utilisées pour créer des arrière-plans avec des degrés d’opacité variables.
  • 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 l’ordinateur local vers la galerie, puis l’applique comme image d’arrière-plan de l’onglet.
    Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan de l’onglet.
    Icône Appareil photo {width="25"} Permet de faire glisser l’image sur la mosaïque de l’appareil photo ou de naviguer jusqu’à 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 mise à l’échelle de l’image d’arrière-plan 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 actuelle.
  • Background Position - Sélectionnez la façon dont l’image d’arrière-plan est ancrée par rapport à l’onglet : Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Sélectionnez 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 au fur et à mesure que la page fait défiler.
    Fixed (Non disponible pour les appareils mobiles) L’image d’arrière-plan ne se déplace pas lorsque le conteneur fait défiler 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 qui sont 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 toute marge intérieure spécifiée.
    Center Aligne le conteneur de contenu au centre de l’onglet, en tenant compte de toute 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 toute marge intérieure spécifiée.
  • Définissez la variable Border style 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 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 :

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

    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.

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

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

  • (Facultatif) Indiquez 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 des valeurs, en pixels, pour la variable 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 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

Modification des paramètres du jeu de onglets

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

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

    Sélectionnez l’onglet de l’ensemble que vous souhaitez activer au chargement de la page.

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

  4. Pour positionner les onglets de navigation le long de la partie supérieure du jeu d’onglets, choisissez la variable Tab Navigation Alignment (Left, Center, ou Right).

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

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

    • Pour contrôler le positionnement de l’ensemble d’onglets dans le conteneur parent, sélectionnez 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 toute marge intérieure spécifiée.
      Center Aligne le jeu de tabulations au centre du conteneur parent, en tenant compte de toute 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 toute marge intérieure spécifiée.
    • Définissez la variable Border style 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 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 d’onglets.

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

      Saisissez les valeurs correspondantes dans le diagramme de conteneur des onglets.

      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
  6. Lorsque vous avez terminé, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

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