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







Ajout d’un onglet individuel
-
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.
-
Cliquez sur le libellé Tab 1 pour afficher la boîte à outils de l’onglet individuel et choisissez l’icône Paramètres (
-
Saisissez le Tab Name à utiliser comme libellé.
-
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 exemple100vh - 237px
). -
Sélectionnez un paramètre de Vertical Alignment pour aligner tous les conteneurs de contenu ajoutés à l’onglet (Haut, Centre ou Bas).
-
Si nécessaire, définissez les autres options en vous aidant des instructions des sections suivantes :
-
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.
-
Pointez sur le conteneur d’onglets pour afficher la boîte à outils et sélectionnez l’icône Ajouter (
-
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 (
-
Cliquez dans le libellé VotreNom Copy pour afficher le curseur et saisissez votre propre libellé pour le troisième onglet.
Déplacer un onglet dans la visionneuse
-
Cliquez sur l’onglet à déplacer.
-
Sélectionnez l’icône Déplacer (
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.
-
Cliquez sur l’onglet où vous souhaitez ajouter le contenu.
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Texte vers l’onglet.
-
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.
-
Dans le coin supérieur droit, cliquez sur Save.
Modifier les paramètres d’onglets individuels
-
Pointez sur un onglet individuel pour afficher la boîte à outils et choisissez l’icône Paramètres (
-
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.
-
-
Modifiez les autres paramètres si nécessaire à 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.
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.
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.
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.
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. 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 :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.
-
(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
-
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 (
-
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.
-
Saisissez la Minimum Height, en pixels, si vous souhaitez remplacer la hauteur automatique du jeu de tabulations.
-
Pour positionner les onglets de navigation dans la partie supérieure de l’ensemble d’onglets, choisissez l’Tab Navigation Alignment (
Left
,Center
ouRight
). -
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
-
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.