Utiliser le builder 2 Chapitre 2

UTILISER LE BUILDER 2

CHAPITRE 2 : ONGLETS

MODULE 6

Le module ONGLETS

Les onglets sont un excellent moyen de consolider les informations et d'améliorer l'expérience utilisateur sur votre page.

À l'aide de Divi, vous pouvez créer un nombre illimité d'onglets qui seront parfaits dans n'importe quelle colonne de taille.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/tabs/

Les onglets sont un excellent moyen de consolider les informations et d'améliorer l'expérience utilisateur sur votre page.

En utilisant Divi, vous pouvez créer n'importe quel nombre d'onglets qui seront superbes dans une colonne de n'importe quelle taille.

Pour les tailles plus grandes, les boutons de tabulation sont disposés en ligne horizontale.

N'importe quel type de contenu peut être placé dans un onglet car le contenu de l'onglet est contrôlé à l'aide de l'éditeur d'articles WordPress standard.

Comment ajouter un module d'onglets à votre page

Avant de pouvoir ajouter un module d'onglets à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.

Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.

Une fois que vous êtes entré dans le 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 qu'à l'intérieur des rangées. Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.

Localisez le module d'onglets dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez aussi taper le mot "onglets" et cliquer sur "entrer" pour trouver et ajouter automatiquement le module d'onglets ! Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation :

ajout d'onglets pour organiser les caractéristiques du produit

Les onglets sont parfaits pour consolider et organiser votre contenu.

Une utilisation courante des onglets est de mettre en valeur les caractéristiques d'un produit.

Dans la colonne de droite, ajoutez le module Onglets. Sous l'onglet Contenu des Paramètres du module Onglets, cliquez sur "Ajouter un nouvel élément" pour afficher les paramètres de votre premier onglet spécifique. Mettez à jour les paramètres des onglets sous l'onglet Contenu comme suit:

Titre:[ajouter le titre ou l'étiquette de votre onglet].

Contenu:[ajouter le contenu du corps principal de votre onglet].

Exemple d'utilisation :

ajout d'onglets pour organiser les caractéristiques du produit

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

Exemple d'utilisation :

ajout d'onglets pour organiser les caractéristiques du produit

Une fois que vos onglets ont été créés, allez dans l'onglet Design de vos Paramètres des onglets et changez la couleur de l'onglet Texte en #0c71c3 (bleu).

Exemple d'utilisation :

ajout d'onglets pour organiser les caractéristiques du produit

Maintenant, vous disposez d'un module d'onglets eﬃcace que vous pouvez utiliser pour aﬃcher des informations sur vos produits.

Options de contenu des onglets

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.

Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Ajouter un nouvel élément

C'est ici que vous ajoutez de nouveaux onglets à votre module Onglets.

En cliquant sur "Ajouter un nouvel élément", vous ouvrirez une toute nouvelle liste de paramètres de con- ception (y compris le contenu, le design et les options avancées) pour votre nouvel onglet.

Après avoir ajouté votre premier onglet, vous verrez apparaître une barre grise avec le titre de votre onglet sous forme d'étiquette. La barre grise comporte également trois boutons qui vous permettent d'éditer les paramètres de l'onglet, de dupliquer l'onglet ou de le supprimer.

Si vous avez personnalisé les paramètres de votre premier onglet et que vous souhaitez conserver le style dans le reste de vos onglets, cliquez sur l'icône/bouton double. Vous verrez apparaître une nouvelle barre grise sous le premier onglet. Cliquez pour modifier le con- tenu du nouvel onglet et répétez cette opération pour le reste de vos onglets.

Onglet actif Couleur

d'arrière-plan

Cette option vous permet d'ajouter une couleur de fond à vos onglets actifs. Un onglet est considéré comme actif lorsqu'il a été cliqué ou sélectionné.

Par défaut, la couleur d'arrière-plan de l'onglet actif est blanche et correspond à la couleur d'arrière-plan blanc par défaut du contenu de l'onglet.

Onglet Couleur

d'arrière-plan inactif

Cette option vous permet d'ajouter une couleur de fond à vos onglets inactifs. Un onglet est considéré comme inactif lorsqu'il n' a pas été cliqué ou sélectionné.

Par défaut, la couleur d'arrière-plan de l'onglet inactif est grise, contrairement à la couleur d'arrière-plan blanc par défaut de l'onglet actif.

Ce contraste de couleur d'arrière-plan pour les onglets actifs et inactifs facilite la navigation entre les onglets.

Couleur de fond

Image de fond

Étiquette Admin

Cette option vous permet de modifier la couleur de fond du contenu du module d'onglet.

Cette option vous permet d'ajouter une image de fond du contenu du module d'onglet.

Par défaut, votre module vidéo apparaîtra avec l'étiquette "Vidéo" dans le constructeur. L'étiquette Admin vous permet de changer cette étiquette pour une identification facile.

Options de conception

des onglets

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Onglet Options de conception du texte

Options de conception du corps du texte

Utiliser la bordure

Ces options contrôlent le style de votre texte d'onglet (ou titre) pour tous les onglets de votre module.

Les options comprennent la police de tabulation, la taille de la police de tabulation, la couleur du texte de l'onglet, l'espacement des lettres de tabulation et la hauteur de la ligne de tabulation.

Ces options contrôlent le style du corps de texte de vos onglets (texte saisi dans le contenu de vos différents onglets).

Les options comprennent la police de corps, la taille de la police, la couleur du corps, l'espacement des lettres et la hauteur de la ligne de corps.

Sélectionnez "OUI" pour cette option si vous souhaitez ajouter une bordure à votre module d'onglets.

Une fois que "OUI" est sélectionné, vous verrez des options de style supplémentaires pour votre bordure, y compris la couleur, la largeur et le style de bordure.

Onglets Options avancées

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.

ID CSS et classes

CSS personnalisé

Visibilité

Ceci peut être utilisé pour ajouter un identifiant CSS unique ou une classe à votre module d'onglets.

Celles-ci peuvent ensuite être utilisées dans votre feuille de style ou dans la boîte Options Thème Personnalisées CSS pour appliquer un style personnalisé au module.

Les ID CSS peuvent également être ciblés avec des liens d'ancrage pour lier à certaines zones de votre page.

Ici, vous pouvez ajouter des CSS personnalisés à votre module d'onglets.

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

Options de contenu

des onglets individuels

Intitulé

Contenu

Couleur

de fond

Image

de fond

Ceci peut être utilisé pour ajouter un identifiant CSS unique ou une classe à votre module d'onglets.

Celles-ci peuvent ensuite être utilisées dans votre feuille de style ou dans la boîte Options Thème Personnalisées CSS pour appliquer un style personnalisé au module.

Les ID CSS peuvent également être ciblés avec des liens d'ancrage pour lier à certaines zones de votre page.

Ici, vous pouvez ajouter des CSS personnalisés à votre module d'onglets.

Ici, vous pouvez ajouter une couleur de fond pour votre onglet.

Options de conception

des onglets individuels

Onglet Texte

Texte du corps

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

Cette option vous permet de concevoir le corps du texte de votre onglet.

Les options comprennent la police, la taille de la police, la couleur du texte, l'espacement des lettres et la hauteur de la ligne.

Options avancées

des onglets individuels

CSS personnalisé

Ici, vous pouvez ajouter des CSS personnalisés à l'onglet spécifique que vous éditez.

Ce CSS ne sera appliqué qu'à cet onglet.

MERCI

Utiliser le builder 2 Chapitre 2

More creations to inspire you

HISTORY OF THE EARTH

WWII TIMELINE WITH REVIEW

SPANISH: PARTES DE LA CASA WITH REVIEW

THE EUKARYOTIC CELL WITH REVIEW

PRIVATE TOUR IN SÃO PAULO

FACTS IN THE TIME OF COVID-19

AUSSTELLUNG STORYTELLING

Transcript