Le bloc Onglets vous permet d'organiser et d'afficher du contenu sur plusieurs panneaux interchangeables 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, ce qui rend vos pages claires, concises et faciles à lire.
Le bloc prend en charge les dispositions horizontales et verticales des onglets, les icônes par onglet, le contenu enrichi dans chaque panneau et une suite complète de commandes de style pour les couleurs, la typographie, les bordures et le remplissage des onglets. Les modèles prédéfinis vous permettent d'appliquer un aspect soigné en un seul clic, tandis que l'onglet Avancé vous offre un contrôle précis sur chaque détail visuel.
Ajouter le bloc Onglets à vos pages
Suivez ces étapes pour ajouter un bloc Onglets à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-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 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 le libellé qui apparaîtra sur chaque bouton d'onglet. Cliquez sur n'importe quel élément d'onglet existant pour le développer et modifier son nom, son icône et son contenu.
- Icône : vous pouvez attribuer une icône à chaque onglet à l'aide du sélecteur d'icônes. L'icône apparaît à côté du libellé de l'onglet dans la barre d'onglets.
- Contenu : saisissez le contenu du corps pour chaque onglet. Chaque onglet dispose de sa propre zone de contenu indépendante.
- Ajouter un nouvel élément : cliquez sur ce bouton pour ajouter des onglets supplémentaires au bloc.
- Supprimer / Dupliquer : chaque élément de l'onglet comprend des options permettant de le supprimer ou de créer une copie avec les mêmes paramètres et le même contenu.
- Masquer l'icône de l'onglet : activez ou désactivez cette option pour afficher ou masquer les icônes de tous les onglets à la fois.
- Couleur des icônes : définissez une couleur pour toutes les icônes des onglets à l'aide du sélecteur de couleurs.
- Taille de la police : ajustez la taille de la police des libellés des onglets.
- Espace entre : définit l'espace entre les boutons d'onglet adjacents.
- Alignement : choisissez l'alignement horizontal de la barre d'onglets : à gauche, au centre ou à droite.
Étape 2a : Choisissez un style de modèle
Dans l'onglet Modèles, vous pouvez appliquer un style visuel prédéfini à votre bloc Onglets en un seul clic. Sept designs prédéfinis sont disponibles, allant d'un style minimaliste par défaut à des options plus décoratives avec des bordures, des arrière-plans et des icônes. La sélection d'un modèle met instantanément à jour les couleurs, les bordures et la mise en page du bloc afin de les adapter au design choisi.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, la section Styles vous permet de contrôler entièrement l'apparence de la barre d'onglets et des panneaux de contenu :
Styles de la barre d'onglets :
- Disposition des onglets : basculez entre l'affichage 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, l'épaisseur, le style, la hauteur de ligne, l'espacement des lettres et la casse des lettres pour les libellés des onglets.
- Couleur de l'onglet : choisissez la couleur du texte pour les libellés 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éfinit la couleur du texte de l'onglet actuellement sélectionné.
- Arrière-plan de l'onglet actif : définit la couleur d'arrière-plan de l'onglet actuellement sélectionné.
- Rayon de l'angle des onglets : arrondissez les angles des boutons d'onglets à l'aide d'un curseur de 0 à 100.
- Style de bordure : choisissez un style de bordure pour les boutons d'onglet : pleine, pointillée ou en pointillés.
- Largeur 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.
- Remplissage des onglets : 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, l'interligne, l'espacement des lettres et la casse pour le texte du corps du panneau d'onglets.
- Contenu Arrière-plan : définissez la couleur d'arrière-plan de la zone du panneau de contenu.
- Couleur du texte : définissez la couleur du texte dans le panneau de contenu.
- Rayon de la bordure du contenu : arrondissez les coins du cadre 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 : pleine, pointillée ou en pointillés.
- Couleur de la bordure du contenu : choisissez la couleur de la bordure du panneau de contenu.
- Largeur de la bordure du contenu : définissez l'épaisseur de la bordure de chaque côté (haut, droite, bas, gauche) du panneau de contenu.
- Remplissage du contenu : contrôlez l'espacement intérieur dans le panneau de contenu.
- Ombre du texte : ajoutez une ombre au texte du panneau de contenu, avec des préréglages de taille allant de Aucune à 2X Grande.
L'onglet Avancé fournit également des commandes 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, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Onglets à votre page ! Les onglets constituent un moyen efficace de présenter un grand nombre de contenus dans un format compact et convivial, qui permet de maintenir l'intérêt des visiteurs sans les submerger avec une longue page à faire défiler. Testez différentes dispositions horizontales et verticales, différents styles de modèles et différentes combinaisons de couleurs pour créer une section à onglets qui s'intègre parfaitement à votre design.