Sélectionner une page


Les onglets sont un excellent moyen de consolider les informations et d’améliorer l’expérience utilisateur de votre côté. Divi vous permet de créer n’importe quel nombre d’onglets qui ont fière allure dans des colonnes de toutes tailles. Les boutons de tabulation sont empilés en ¼ colonnes et restent visibles. Pour les tailles plus grandes, les touches de tabulation sont sur une ligne horizontale. Tout type de contenu peut être placé dans un onglet car le contenu de l’onglet est contrôlé à l’aide de l’éditeur de publication WordPress standard.

Voir une démo en direct de ce module

Voici comment ajouter un module d’onglets à votre page

Avant de pouvoir ajouter un module d’onglets à votre page, vous devez d’abord sauter dans Divi Builder. Une fois le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module d'onglets

Après être entré dans Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi doubler et section Éléments.

Module d'onglets

Trouvez le module onglet dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules peut être recherchée. Ainsi, vous pouvez également taper le mot «onglets», puis appuyer sur Entrée pour rechercher et ajouter automatiquement le module d’onglets! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: teneur, conception et Avancée.

Exemple de cas d’utilisation: ajout d’onglets pour organiser les fonctions du produit

Les onglets sont parfaits pour consolider et organiser votre contenu. Une utilisation courante des onglets consiste à présenter les fonctionnalités d’un produit. Si votre produit comporte trois fonctionnalités ou plus, les organiser dans des onglets offrira une meilleure expérience utilisateur afin que l’utilisateur puisse facilement traiter le contenu.

Dans cet exemple, je vais vous montrer comment ajouter un module d’onglets à une page de produit pour présenter les fonctionnalités du produit.

Module d'onglets

Tout d’abord, ajoutez une nouvelle section et une nouvelle ligne avec une disposition 1/2 1/2 colonne. Dans la colonne de gauche, ajoutez l’image de votre produit au format 510 x 510 à l’aide du module image.
Module d'onglets

Ajoutez le module d’onglets dans la colonne de droite. Dans l’onglet Contenu des Paramètres du module d’onglets, cliquez sur Ajouter un nouvel élément pour afficher les paramètres de votre premier onglet spécifique. Mettez à jour les paramètres de l’onglet sur l’onglet Contenu comme suit:

Titre: [add the title or label of your tab]
Teneur: [add the main body content of your tab]

Module d'onglets

Enregistrez les paramètres de l’onglet et répétez ce processus pour créer deux autres onglets.

Module d'onglets

Après avoir créé vos onglets, accédez à l’onglet Conception dans les paramètres de l’onglet et changez la couleur du texte de l’onglet en # 0c71c3 (bleu).

Module d'onglets

Vous disposez désormais d’un module d’onglets efficace que vous pouvez utiliser pour afficher des informations sur vos produits.

Module d'onglets

Onglets Options de contenu

Dans l’onglet « Contenu », vous trouverez tous les éléments de contenu du module, par ex. B. Texte, images et symboles. Tout ce qui contrôle Quoi apparaît dans votre module et est toujours sur cet onglet.

Module d'onglets

Ajouter un nouvel élément

C’est ici que vous ajoutez de nouveaux onglets à votre module d’onglets. Cliquez sur « Ajouter un nouvel élément » pour ouvrir une toute nouvelle liste de paramètres de thème (y compris Contenu, Thème, Avancé) pour votre nouvel onglet. Voir ci-dessous pour les paramètres des onglets individuels.

Après avoir ajouté votre premier onglet, vous verrez une barre grise étiquetée avec le titre de votre onglet. La barre grise contient également trois boutons que vous pouvez utiliser pour modifier les paramètres de l’onglet, dupliquer l’onglet ou supprimer l’onglet.

Lorsque vous avez ajusté les paramètres de votre premier onglet et que vous souhaitez conserver le style pour le reste des onglets, cliquez sur l’icône / le bouton en double. Une nouvelle barre grise apparaîtra sous le premier onglet. Cliquez ici pour modifier le contenu du nouvel onglet et répétez ce processus pour le reste de vos onglets.

Couleur d’arrière-plan de l’onglet actif

Cette option vous permet d’ajouter une couleur d’arrière-plan à vos onglets actifs. Un onglet est considéré comme actif lorsqu’il est cliqué ou sélectionné. Par défaut, la couleur d’arrière-plan de votre onglet actif est le blanc et correspond à la couleur d’arrière-plan blanc par défaut du contenu de votre onglet.

Couleur d’arrière-plan de l’onglet inactif

Cette option vous permet d’ajouter une couleur d’arrière-plan à vos onglets inactifs. Un onglet est considéré comme inactif s’il n’est pas cliqué ou sélectionné. Par défaut, la couleur d’arrière-plan de votre onglet inactif est gris par opposition à la couleur d’arrière-plan blanc de l’onglet actif. Ce contraste de couleur d’arrière-plan pour les onglets actifs et inactifs permet une navigation plus facile entre les onglets.

Couleur de l’arrière plan

Cette option vous permet de changer la couleur d’arrière-plan du contenu du module d’onglets.

image de fond

Cette option vous permet d’ajouter une image d’arrière-plan du contenu du module d’onglets.

Étiquette d’administrateur

Par défaut, votre module vidéo est affiché avec une étiquette qui lit «Vidéo» dans le générateur. Avec l’étiquette d’administrateur, vous pouvez modifier cette étiquette pour une identification facile.

Options de conception d’onglets

L’onglet Conception contient toutes les options de style du module, telles que: B. Polices, couleurs, tailles et espacement. Sur cet onglet, vous pouvez modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Module d'onglets

Options de conception d’onglets

Ces options contrôlent le style du texte (ou du titre) de votre onglet pour tous les onglets de votre module. Les options incluent la police des onglets, la taille de la police des onglets, la couleur du texte des onglets, l’espacement des tabulations et la hauteur de la ligne de tabulation.

Options de conception du corps du texte

Ces options contrôlent le style du texte principal de vos modules d’onglets (le texte qui est entré dans le contenu de vos onglets individuels). Les options incluent la police du corps, la taille de la police du corps, la couleur du corps du texte, l’espacement des lettres du corps et la hauteur de la ligne du corps.

Utiliser le bord

Choisissez OUI pour cette option si vous souhaitez ajouter une bordure à votre module d’onglets. Une fois « OUI » sélectionné, des options de style supplémentaires pour votre cadre apparaîtront, notamment la couleur du cadre, la largeur du cadre et le style du cadre.

Onglets Options avancées

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module, que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre thème enfant.

Module d'onglets

ID CSS et classes

Cela peut être utilisé pour ajouter un identifiant ou une classe CSS unique à votre module d’onglets. Ceux-ci peuvent ensuite être utilisés dans votre feuille de style ou dans le champ CSS personnalisé pour les options de thème pour appliquer un style personnalisé au module. Les identifiants CSS peuvent également être fournis avec des liens d’ancrage pour créer des liens vers des zones spécifiques de votre page.

CSS personnalisé

C’est ici que vous pouvez ajouter du CSS personnalisé à votre module d’onglets.

Visibilité

Ici, vous pouvez choisir de masquer (ou désactiver) votre module d’onglets sur certains appareils. Vous pouvez désactiver le module sur le téléphone, la tablette et / ou le bureau.

Options de contenu pour les onglets individuels

Module d'onglets

Titre

Cette option sert de titre à votre onglet. Il s’agit du texte de l’onglet sur lequel les utilisateurs cliquent pour basculer dans le module Live Tag.

teneur

Ici, vous entrez le texte principal de votre onglet avec l’éditeur wysiwyg intégré.

Couleur de l’arrière plan

Ici, vous pouvez ajouter une couleur d’arrière-plan pour votre onglet.

image de fond

Ici, vous pouvez ajouter une image d’arrière-plan pour votre onglet.

Options de conception pour les onglets individuels

Module d'onglets

Texte de l’onglet

Cette option vous permet de concevoir le texte de l’onglet qui sera le titre de votre onglet. Les options incluent la police, la taille de la police, la couleur du texte, l’espacement des lettres et la hauteur de ligne.

Masse

Cette option vous permet de concevoir le texte principal de votre onglet. Les options incluent la police, la taille de la police, la couleur du texte, l’espacement des lettres et la hauteur de ligne.

Options avancées pour les onglets individuels

Module d'onglets

CSS personnalisé

C’est ici que vous pouvez ajouter du CSS personnalisé à l’onglet que vous modifiez. Ce CSS n’est appliqué qu’à cet onglet.





Source link

Recent Posts