Sélectionner une page


Le basculement est 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 de bascules qui ont fière allure dans des colonnes de toutes tailles.

Voir une démo en direct de ce module

Comment ajouter un module bascule à votre page

Avant de pouvoir ajouter un module bascule à votre page, vous devez d’abord sauter dans le 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 Activer 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.

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.

Divi-Toggle-Module-3

Trouvez le module bascule 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 « bascule », puis appuyez sur Entrée pour trouver et ajouter le module bascule automatiquement! 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: page FAQ

Une page FAQ est l’un des meilleurs endroits pour consolider les informations à l’aide du module bascule. De cette façon, l’utilisateur peut voir rapidement la question qu’il souhaite poser sans lire des tonnes de texte. Dans cet exemple, je vais vous montrer comment utiliser le module bascule pour créer une zone FAQ moderne pour votre page FAQ en quelques minutes.

À l’aide de Visual Builder, ajoutez une nouvelle section avec une ligne pleine largeur (1 colonne). Ajoutez ensuite un module de séparation à la ligne. Dans l’onglet Contenu des paramètres du module de séparation, sélectionnez Afficher le séparateur.

Dans l’onglet Conception, entrez les options suivantes:

Couleur: # 000000 (noir)
Style de diviseur: solide
Position du diviseur: centré verticalement
Poids du diviseur: 4px
Hauteur: 1

Ensuite, ajoutez un module à bascule sous le séparateur que je viens de créer sur la même ligne. Dans la bascule des paramètres du module, mettez à jour les éléments suivants:

Onglet Contenu

Titre: [enter your title]
Teneur: [enter your content]
Statut: Fermer
Couleur d’arrière-plan de la bascule ouverte: #ffffff
Couleur d’arrière-plan de la bascule fermée: #ffffff
Couleur d’arrière-plan: #ffffff

Onglet Conception

Couleur de l’icône: # 000000
Ouvrir la couleur du texte à bascule: # 000000
Basculer la couleur du texte fermé: # 000000
Police du titre: Open Sans, Bold
Taille de la police du titre: 24px
Couleur du texte du titre: # 000000
Police du corps: Open Sans
Taille de la police du corps: 18px
Couleur du corps du texte: # 666666
Hauteur de la ligne du corps: 1.6em
Utiliser la bordure: OUI
Largeur de la bordure: 0px
Rembourrage personnalisé: haut 2px, bas 2px

Après avoir enregistré votre paramètre pour le module de bascule, dupliquez le module de séparation que vous avez créé et placez-le sous le module de bascule. Cela encadrera la bascule avec une ligne de séparation supérieure et inférieure. Ensuite, dupliquez votre module à bascule et placez-le derrière la ligne de séparation inférieure. Puisqu’il s’agit d’un module de commutation double, tous les paramètres de conception ont été transférés vers le nouveau module de commutation. Tout ce que vous avez à faire est de mettre à jour le contenu du nouveau module à bascule. Continuez ensuite à dupliquer les modules de division et les modules de commutation et mettez à jour le contenu de vos modules de commutation jusqu’à ce que vous ayez terminé toutes les sections FAQ.

C’est ça. Vous avez maintenant une section FAQ moderne où vous pouvez utiliser le module bascule pour consolider vos questions et réponses.

Après avoir vu le module bascule en action, plongez dans TOUS les paramètres dans les sections suivantes. Nous avons donné un aperçu détaillé de ce que vous pouvez trouver dans les onglets individuels des paramètres du module, ainsi qu’une explication des différentes fonctions.

Basculer les paramètres de contenu du module

Divi-Toggle-Module-2

L’onglet Contenu du module bascule est divisé en groupes de paramètres suivants (qui basculent également!).

texte

Ici, vous pouvez ajouter le titre et le contenu de la bascule.

Statut

Ce paramètre vous permet de choisir si vous souhaitez que votre commutateur apparaisse ouvert ou fermé par défaut.

Contexte

Ici, vous pouvez modifier la couleur d’arrière-plan pour la bascule ouverte et la couleur d’arrière-plan pour la bascule fermée. Vous pouvez également les définir facilement de la même manière en définissant l’option de couleur d’arrière-plan. Il existe également la possibilité de définir ou de télécharger une image d’arrière-plan.

Étiquette d’administrateur

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

Les paramètres de conception pour la commutation du module

Divi-Toggle-Module-4

Les paramètres de conception du module de bascule ont été regroupés dans les bascules déroulantes suivantes dans l’onglet Conception.

symbole

Ici, vous pouvez changer la couleur de l’icône de bascule.

texte

Ici, vous pouvez définir la couleur du texte à bascule ouvert et fermé.

Texte du titre

Ici, vous pouvez ajuster la police, le poids, la taille, la couleur, l’espacement, la hauteur de ligne, etc. du texte du titre.

Masse

Ici, vous pouvez ajuster la police, le poids, la taille, la couleur, l’espacement, la hauteur de ligne, etc. du texte principal.

bord

Vous pouvez utiliser un cadre ici. Si vous décidez d’utiliser un cadre, vous pouvez également choisir sa couleur, modifier sa largeur et choisir son style.

distance

Dans la zone d’espacement, vous pouvez ajouter un remplissage 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.

Les paramètres avancés du module de commutation

Divi-Toggle-Module-5

Dans l’onglet Avancé de votre module bascule, vous pouvez ajouter un ID CSS et une classe uniques. Vous pouvez également ajouter du CSS personnalisé à divers sélecteurs CSS prédéfinis (et présélectionnés) dans le module Curseurs vidéo à partir de la liste déroulante CSS personnalisé. Et enfin, dans la liste déroulante de visibilité, vous pouvez ajuster la visibilité de votre module sur les téléphones, tablettes et ordinateurs de bureau.





Source link

Recent Posts