Disposition - Onglets

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

{width="600" modal="regular"}

Cliquez sur le libellé Tab 1 pour afficher la boîte à outils à onglets individuelle et sélectionnez l’icône Paramètres ( {width="20"} ).

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

{width="600" modal="regular"}

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

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

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

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

• Background
• Advanced

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

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

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

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

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

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

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

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

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

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 textuel.

{width="500" modal="regular"}

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

Passez la souris sur un onglet pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).

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

• Tab Name - Entrez 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.

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

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

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

Si nécessaire, modifiez le Default Active Tab.

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

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

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

{width="500" modal="regular"}

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

• Pour contrôler le positionnement de l’ensemble d’onglets 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 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 le style 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 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 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 le Margins and Padding afin de 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

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