Le bloc d'onglets vous permet d'organiser et d'afficher du contenu sur plusieurs panneaux sélectionnables sur une seule page SeedProd. Au lieu d'empiler toutes vos informations verticalement, les onglets permettent aux visiteurs de naviguer instantanément entre les sections, gardant ainsi vos pages claires, ciblées et faciles à lire.
Le bloc prend en charge les mises en page d'onglets horizontales et verticales, les icônes par onglet, le contenu texte enrichi dans chaque panneau, et une suite complète de contrôles de style pour les couleurs, la typographie, les bordures et le remplissage des onglets. Des modèles prédéfinis vous permettent d'appliquer un aspect soigné en un clic, tandis que l'onglet Avancé vous donne un contrôle granulaire sur chaque détail visuel.
Ajouter le bloc d'onglets à vos pages
Suivez ces étapes pour ajouter un bloc d'onglets à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Onglets dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc d'onglets pour ouvrir ses paramètres. Dans l'onglet Contenu, la section Onglets vous permet de créer et de gérer tous vos panneaux d'onglets :
- Nom de l'onglet : Entrez l'étiquette qui apparaît sur chaque bouton d'onglet. Cliquez sur un élément d'onglet existant pour le développer et modifier son nom, son icône et son contenu.
- Icône : Attribuez éventuellement une icône à chaque onglet à l'aide du sélecteur d'icônes. L'icône apparaît à côté de l'étiquette de l'onglet dans la barre d'onglets.
- Contenu : Entrez le contenu du corps pour chaque panneau d'onglet. Chaque onglet a sa propre zone de contenu indépendante.
- Ajouter un nouvel élément : Cliquez sur ce bouton pour ajouter des panneaux d'onglets supplémentaires au bloc.
- Supprimer / Dupliquer : Chaque élément d'onglet comprend des options pour le supprimer ou en créer une copie avec les mêmes paramètres et le même contenu.
- Masquer l'icône de l'onglet : Activez cette option pour afficher ou masquer les icônes sur tous les onglets à la fois.
- Couleur de l'icône : Définissez une couleur pour toutes les icônes d'onglets à l'aide du sélecteur de couleurs.
- Taille de la police : Ajustez la taille de la police des étiquettes d'onglets.
- Espace entre : Définissez l'écart entre les boutons d'onglets adjacents.
- Alignement : Choisissez l'alignement horizontal de la barre d'onglets : Gauche, Centre ou Droite.
Étape 2a : Choisir un style de modèle
Dans l'onglet Modèles, vous pouvez appliquer un style visuel prédéfini à votre bloc d'onglets en un seul clic. Sept styles prédéfinis sont disponibles, allant d'un style minimal par défaut à des options plus décoratives avec des bordures, des arrière-plans et des traitements d'icônes. La sélection d'un modèle met à jour instantanément les couleurs, les bordures et la mise en page du bloc pour correspondre au design choisi.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, la section Styles vous donne un contrôle total sur l'apparence de la barre d'onglets et des panneaux de contenu :
Styles de la barre d'onglets :
- Mise en page des onglets : Basculez entre Horizontal (onglets disposés en ligne) et Vertical (onglets empilés dans une colonne à côté du panneau de contenu).
- Typographie des onglets : Définissez la police, la taille, le poids, le style, la hauteur de ligne, l'espacement des lettres et la casse des étiquettes d'onglets.
- Couleur de l'onglet : Choisissez la couleur du texte pour les étiquettes d'onglets inactifs.
- Couleur d'arrière-plan de l'onglet : Définissez la couleur d'arrière-plan des onglets inactifs.
- Couleur de l'onglet actif : Définissez la couleur du texte pour l'onglet actuellement sélectionné.
- Arrière-plan de l'onglet actif : Définissez la couleur d'arrière-plan de l'onglet actuellement sélectionné.
- Rayon de bordure de l'onglet : Arrondissez les coins des boutons d'onglet à l'aide d'un curseur de 0 à 100.
- Style de bordure : Choisissez un style de bordure pour les boutons d'onglet — Uni, Pointillé ou Tirets.
- Épaisseur de la bordure : Définissez l'épaisseur de la bordure sur chaque côté (Haut, Droite, Bas, Gauche) des boutons d'onglet.
- Couleur de la bordure : Choisissez la couleur de la bordure des boutons d'onglet.
- Marge intérieure de l'onglet : Contrôlez l'espacement intérieur (Haut, Droite, Bas, Gauche) à l'intérieur de chaque bouton d'onglet.
Styles du panneau de contenu :
- Typographie du contenu : Définissez la police, la taille, l'épaisseur, le style, la hauteur de ligne, l'espacement des lettres et la casse du texte du corps du panneau d'onglets.
- Arrière-plan du contenu : Définissez la couleur d'arrière-plan de la zone du panneau de contenu.
- Couleur du texte : Définissez la couleur du texte à l'intérieur du panneau de contenu.
- Rayon de bordure du contenu : Arrondissez les coins de la boîte du panneau de contenu à l'aide d'un curseur de 0 à 100.
- Style de bordure du contenu : Choisissez un style de bordure pour le panneau de contenu — Uni, Pointillé ou Tirets.
- Couleur de la bordure du contenu : Choisissez la couleur de la bordure du panneau de contenu.
- Épaisseur de la bordure du contenu : Définissez l'épaisseur de la bordure sur chaque côté (Haut, Droite, Bas, Gauche) du panneau de contenu.
- Marge intérieure du contenu : Contrôlez l'espacement intérieur à l'intérieur du panneau de contenu.
- Ombre du texte : Ajoutez une ombre au texte du panneau de contenu, avec des préréglages de taille allant de Aucun à 2X Large.
L'onglet Avancé fournit également des contrôles pour l'espacement (marge et remplissage), les attributs CSS personnalisés, la visibilité des appareils et les animations d'entrée.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Onglets et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Onglets à votre page ! Les onglets sont un moyen puissant de présenter une grande quantité de contenu dans un format compact et convivial, en gardant les visiteurs engagés sans les submerger avec une longue page de défilement. Expérimentez avec les mises en page horizontales et verticales, les styles de modèles et les combinaisons de couleurs pour créer une section à onglets qui s'intègre parfaitement à votre design.