Élément d'onglet

Qu'est-ce que l'élément Tab ?

Les onglets des sites web s'inspirent des onglets physiques des dossiers papier. Ils permettent d'afficher différentes sections de contenu dans un format compact et facile à parcourir.

Avec la collection Élément d'onglet GemPages, vous pourrez :

• Présentez le contenu dans une mise en page organisée et peu encombrante.
• Permettre aux utilisateurs de basculer entre les contenus sans quitter la section.
• Gardez votre page propre et visuellement attrayante.

Comment ajouter l'élément Tab dans GemPages

Suivez ces étapes pour insérer le Élément d'onglet dans votre page :

Étape 1: De l' Tableau de bord GemPages, ouvrez un modèle à modifier. Vous pouvez rapidement trouver le Languette élément dans la barre latérale gauche de l'éditeur, sous le interactif section. Faites glisser et déposez l'élément à l'endroit de votre choix.

Étape 2: Supprimez les autres éléments tels que Titre, bloc de texte, Image, etc. à l'intérieur de l'onglet pour créer la mise en page de contenu souhaitée.

En cliquant sur l'élément Tab, la configuration sera disponible dans la barre latérale gauche, qui sera abordée dans les sections suivantes.

Configurer le paramètre de l'élément d'onglet

Une fois l'élément Tab sur votre page, ses options de configuration apparaîtront dans le Barre latérale de gauche.

1. L'onglet Paramètres

Mise En Page

• Contrôle la position des onglets par rapport au contenu.
• Par défaut : onglets sur le à gauche du contenu.

Options de mise en page :

• Onglets au-dessus du contenu
• Onglets à gauche du contenu
• Onglets à droite du contenu

La sélection d'une mise en page ouvre la Fenêtre contextuelle de mise en page pour des changements faciles.

Tabs

1. Ordre : Par défaut, l'élément comporte trois onglets. Le titre de l'onglet dans la fenêtre contextuelle reflète son contenu dans la zone de conception.

• Pour ajouter un onglet supplémentaire : Cliquez simplement sur l’option « Ajouter plus ». 
• Pour dupliquer un onglet : passez la souris sur la diapositive souhaitée et cliquez sur l’icône de duplication. 
• Pour supprimer un onglet : passez la souris sur la diapositive spécifique et cliquez sur l’icône de la corbeille.

2. Texte: Le style de texte de chaque contenu d'onglet.

3. Largeur: La largeur de chaque onglet. La valeur par défaut est « Auto », ce qui signifie que la largeur de l'onglet s'ajuste automatiquement à la taille de son contenu.

Options de largeur : lorsque vous cliquez sur le bouton déroulant du champ de saisie Largeur, un menu déroulant comprenant des options de largeur apparaît :

• Auto signifie que la largeur s'adaptera au contenu
• Plein signifie Largeur = 100 % (pleine largeur) -> La largeur de chaque onglet sera remplie avec l'élément

4. Contexte:Définir la couleur d'arrière-plan pour chaque onglet.

5. Frontière: Personnaliser le style de bordure.

6. Alignement des onglets : l'alignement de tous les éléments d'onglet à l'intérieur de l'élément Tab.

• Disposition Haut → Alignement horizontal.
• Disposition Gauche/Droite → Alignement vertical.

7. Effets de survol : les paramètres de chaque onglet lors du survol.

8. État actif : les paramètres de chaque onglet lorsqu'il est actif.

Taille

1. Largeur

Largeur = 1200 px : lorsqu'un onglet est placé pour créer une nouvelle section ou à l'intérieur d'une colonne de section 1

Largeur = 100 % (pleine largeur) : lorsqu'un onglet est placé à l'intérieur d'autres éléments

Options de largeur : lorsque vous cliquez sur le bouton déroulant du champ de saisie Largeur, un menu déroulant comprenant des options de largeur apparaîtra ci-dessous : 

• La valeur par défaut signifie Largeur = 1200px
• Plein signifie Largeur = 100 % (pleine largeur)

2. Rembourrage

• Rembourrage de l'élément.
• L'ajout du remplissage augmentera l'espacement entre le bord de l'élément et la taille réelle de l'élément.

Présentation

1. Couleur

Cliquer sur la liste déroulante Entrée ouvrira le sélecteur de couleurs et ajoutera une couleur par défaut #DDDDDD.

2. Image

Cliquer sur la liste déroulante Entrée ouvrira le sélecteur d'images et ajoutera une image par défaut.

Forme

Ces paramètres de forme concernent l'enveloppe de l'accordéon. 

• Frontière
• CORNER
• Shadow

Option d'affichage

• Activer par défaut : définissez l'un des éléments de l'onglet comme étant initialement sélectionné par défaut.

Aligner

• L'alignement sera désactivé lorsque la largeur de l'élément est de 100 %.
• Sinon, les options d'alignement par défaut sont alignées Centre.

2. L'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.