Utiliser le builder 2 Chapitre 1

UTILISER LE BUILDER 2

CHAPITRE 1 : BASCULE

MODULE 6

Le module Toggles

Les bascules 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 de bascules qui seront superbes dans n'importe quelle colonne de taille.

Comment ajouter un module de bascule à votre 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 Activer 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 bascule 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 également taper "basculer", puis appuyer sur Entrée pour trouver et ajouter automatiquement le module basculant! 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 :

Une page FAQ est l'un des meilleurs endroits pour consolider les informations à l'aide du module de basculement.

Pour cet exemple, je vais vous montrer comment vous pouvez utiliser le module de basculement pour concevoir une section FAQ moderne pour votre page FAQ en quelques minutes.

À l'aide du Visual Builder, ajoutez une nouvelle section avec une rangée pleine largeur (1 colonne). Ajoutez ensuite un module Diviseur à la rangée. Sous l'onglet Contenu des Paramètres du Module Diviseur, sélectionnez l'option "Afficher le Diviseur".

Sous l'onglet Design, saisissez les options suivantes :

Couleur: #00000000 (noir)

Style de séparation: Solide

Position du diviseur: centré verticalement

Poids du diviseur: 4px

Hauteur: 1

Ajoutez ensuite un module de basculement sous le Diviseur que je viens de créer dans la même rangée. Dans les Paramètres du module de basculement, mettez à jour ce qui suit.

Onglet contenu

Onglet Design

Titre :[entrez votre titre][enregistrez votre titre

Contenu :[entrez votre contenu][entrer votre contenu

État : Fermer

Ouvrir Basculer

Couleur d'arrière-plan : #ffffff

Couleur d'arrière-plan à bascule fermée : #ffffff

Couleur d'arrière-plan : #ffffffff

Couleur de l'icône : #000000

Ouvrir Basculer

Couleur du texte : #000000

Commutation fermée

Couleur du texte : #00000000

Titre Police de caractères : Open Sans, en gras

Titre Taille de la police : 24px

Couleur du texte du titre : #000000

Body Font : Open Sans

Taille de police du corps : 18px

Couleur du corps du texte : #66666666

Hauteur de ligne du corps : 1.6em

Utiliser la bordure : OUI

Largeur de bordure : 0px

Garnissage personnalisé : Haut 2px, Bas 2px

Après avoir sauvegardé votre réglage pour le module de commutation, dupliquez le module de division que vous avez créé et placez-le sous le module de commutation. Ceci encadrera le Toggle avec une ligne séparatrice supérieure et inférieure.

Ensuite, dupliquez votre module Toggle Module et placez-le après la ligne de séparation inférieure. Comme il s'agit d'un module Toggle dupliqué, tous les paramètres de conception ont été reportés sur le nouveau module Toggle et il vous suffit de mettre à jour le contenu du nouveau module Toggle.

Ensuite, continuez le processus de duplication des modules de diviseurs et des modules Toggle et mettez à jour le contenu de vos Toggles jusqu'à ce que vous ayez terminé la section FAQ.

Voilà, c'est ça. Vous disposez maintenant d'une section FAQ moderne utilisant le module Basculer pour consolider vos questions et réponses.

Maintenant que vous avez vu le module de basculement en action, plongez dans TOUS ses réglages dans les sections ci-dessous. Nous avons fourni un récapitulatif détaillé de ce que vous trouverez dans chaque onglet des paramètres du module et une explication de ce que chacun fait.

Paramètres du contenu du module de bascule

Paramètres du contenu du module de bascule

Texte

État

Contexte

Étiquette Admin

Paramètres de conception du module de basculement

Icône

Texte

Titre

C'est ici que vous pouvez changer la couleur de l'icône de basculement.

Ici, vous pouvez régler la couleur du texte à bascule ouvert et fermé.

Ici, vous pouvez régler la police du texte du titre, le poids, la taille, la couleur, l'espacement, la hauteur des lignes et plus encore.

Texte du corps

Bordure

Ici, vous pouvez régler la police du corps du texte, le poids, la taille, la couleur, l'espace- ment, la hauteur des lignes et plus encore.

Ici, vous pouvez choisir d'utiliser une bordure. Et si vous choisissez d'utiliser une bordure, vous pouvez également sélectionner sa couleur, changer sa largeur et choisir son style.

Dans la zone d'espacement, vous pouvez ajouter un rembourrage personnalisé en haut, à droite, en bas ou à gauche de la bascule. Vous pouvez également modifier ces valeurs pour les ordinateurs de bureau, les tablettes ou les appareils mobiles.

Réglages avancés du module de basculement

Enfin, dans le menu déroulant de visibilité, vous pouvez régler la visibilité de votre module sur les téléphones, les tablettes et les ordinateurs de bureau.

MERCI