2 façons de créer des bascules Afficher plus personnalisées dans Divi

Afficher plus de bascules peut être utile pour de nombreuses applications différentes sur un site Web. Traditionnellement, les bascules Afficher plus sont utilisées pour afficher plus de texte lorsque vous cliquez sur un lien Afficher plus (comme les bascules Lire plus). Ceci est utile pour garder la conception initiale plus compacte et concise, laissant au visiteur le soin de cliquer pour plus d'informations s'il en a besoin.

Dans ce tutoriel, nous allons vous montrer deux façons de créer des bascules Afficher plus personnalisées pour votre site Divi. La première consiste à transformer un module de bascule Divi en un basculement d'affichage plus qui se trouve sous un module, prêt à afficher/masquer le texte d'ajout. La deuxième méthode consistera à créer une bascule show more qui peut afficher/masquer des lignes ou des modules Divi entiers. Comme vous pouvez l'imaginer, cela ouvre la porte pour afficher ou masquer pratiquement tout contenu que vous voulez !

Commençons.

Aperçu

Voici un aperçu des autres bascules que nous allons construire dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

1ère méthode : créer une bascule Show More à l'aide d'un module Divi Toggle

Tout d'abord, ajoutez une ligne à deux colonnes à votre section.

Dans la colonne de gauche, ajoutez un module de présentation.

Sous le module de présentation, ajoutez un module à bascule. Nous allons transformer le module de bascule en un afficher plus de bascule afin qu'il affiche / masque plus de texte sous le module de présentation lorsque vous cliquez sur le bascule.

Pour ce faire, ouvrez les paramètres du module à bascule et mettez à jour le texte du titre :

• Titre : Afficher plus

Sous l'onglet Conception, mettez à jour les éléments suivants pour supprimer les styles par défaut :

• Couleur d'arrière-plan à bascule ouverte : rgba(0,0,0,0);
• Couleur d'arrière-plan à bascule fermée : rgba(0,0,0,0);

• Remplissage : 0px en haut, 0px en bas, 0px à gauche
• Largeur de la bordure : 0px

Sous l'onglet Avancé, mettez à jour le CSS personnalisé pour les éléments suivants :

Pour l' élément principal …

display:flex;
flex-direction: column;
align-items: flex-end;

Pour le titre à bascule …

order:2;
padding-right:25px !important;

Pour le contenu à bascule …

order:1;
padding: 0px;

Ce titre à bascule et ce contenu à bascule sont classés différemment à l'aide de la propriété order avec display:flex. Maintenant, le titre cliquable se trouve sous le contenu afin qu'il fonctionne comme une bascule Afficher plus.

Maintenant, ajoutez la classe CSS suivante au module bascule :

• Classe CSS : et-readmore-toggle

Ceci est nécessaire pour cibler le module avec notre code JQuery que nous ajouterons pour modifier le texte du titre en cliquant sur la bascule.

Nous avons nettoyé le module à bascule et retiré tout le rembourrage afin que la bascule se trouve directement sous le module de présentation ci-dessus. Cependant, il y a encore trop de marge inférieure dans le texte de présentation supérieur, de sorte que le texte à l'intérieur de la bascule sera trop éloigné du paragraphe précédent.

Ouvrez les paramètres du module de présentation au-dessus de la bascule et mettez à jour la marge :

• Marge inférieure : 10px ;

Nous sommes maintenant prêts à ajouter le JQuery nécessaire pour modifier le texte du titre à bascule pour lire "Afficher plus" ou "Afficher moins" lorsque vous cliquez dessus.

Pour ajouter le code, ajoutez un module de code sous le module bascule.

Collez ensuite le JQuery suivant en veillant à envelopper le code dans les balises de script nécessaires.

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

Voici le résultat.

Cette conception est évidemment basique. N'hésitez pas à ajouter plus de design à la bascule en utilisant les options Divi intégrées pour répondre à vos besoins.

2nd Way: Construire un Show More Basculer pour afficher/masquer n'importe quel module ou ligne Divi

Si le premier show more toggle utilisant le module toggle vous semble un peu trop limitatif, cette méthode suivante vous intéressera. Nous allons créer une bascule Afficher plus personnalisée que vous pouvez utiliser pour afficher/masquer et un module Divi ou même une ligne entière !

Construire une bascule Show More pour un module Divi

Voici comment procéder.

Tout d'abord, créez une autre ligne à deux colonnes comme vous l'avez fait dans le premier exemple.

Ajoutez ensuite un module de présentation à la colonne 1.

Sous le module de présentation, nous allons ajouter un module de formulaire de contact.

Ce formulaire de contact sera le module que nous afficherons/masquerons en cliquant sur un bouton Afficher plus.

Pour cibler ce module dans le code, ouvrez les paramètres du formulaire de contact et ajoutez la classe CSS suivante :

• Classe CSS : et-show-more-content

Nous devrons également cibler le conteneur parent du module que nous voulons afficher/masquer. Cela nous permettra d'ajouter plusieurs instances de basculement sur la page si nécessaire. Dans ce cas, le conteneur parent de ce module de formulaire de contact est la colonne 1. Ouvrez les paramètres de la colonne 1 et ajoutez la classe CSS suivante :

• Classe CSS : et-show-more-container

Pour créer le bouton bascule Afficher plus, ajoutez un module de bouton sous le module de formulaire de contact.

Vous pouvez concevoir le bouton comme vous le souhaitez. Lorsque vous avez terminé, ouvrez les paramètres du module de boutons et ajoutez la classe CSS suivante :

• Classe CSS : et-show-more-toggle

Modifiez ensuite le texte du bouton pour lire « Afficher plus ».

Nous sommes maintenant prêts à ajouter le code nécessaire pour que notre bascule show more fonctionne.

Sous le bouton, ajoutez un module de code afin que nous puissions déposer nos CSS et JQuery.

Collez d'abord le CSS suivant à l'intérieur de la zone de code en veillant à envelopper le code dans les balises de style nécessaires :

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

Ensuite, sous le CSS, collez le JQuery suivant en veillant à envelopper le code dans les balises de script :

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

Pour équilibrer notre conception, dupliquez la colonne 1 pour créer une autre colonne identique. Assurez-vous de supprimer la troisième colonne vide et le module de code supplémentaire qui a été reporté avec le doublon.

Voici le résultat.

Créer une bascule Afficher plus pour une ligne Divi

Maintenant que nous avons notre afficher plus de bascules pour un module Divi, construisons-nous sur cela pour ajouter un nouveau spectacle plus bascule pour basculer toute la ligne.

Tout d'abord, créez une nouvelle ligne à une colonne pour contenir notre nouveau bouton.

Copiez ensuite l'un des modules de boutons Afficher plus existants et collez-le dans la nouvelle ligne. Ouvrez ensuite les paramètres des boutons et modifiez l'alignement des boutons :

• Alignement des boutons : Centre

Puisque nous voulons cibler la ligne comme contenu que nous voulons afficher/masquer, ouvrez les paramètres de la ligne contenant les bascules Afficher plus pour les modules de formulaire de contact. Ajoutez ensuite la classe CSS suivante à la ligne :

• et-afficher-plus-de-contenu

Et nous devons également ajouter une classe CSS personnalisée au conteneur parent de la ligne (qui est la section). Ouvrez les paramètres de la section et ajoutez la classe CSS suivante :

• et-show-more-container

Voici le résultat.

Résultats finaux

Voici les résultats finaux des trois autres bascules que nous avons construites.

Dernières pensées

Le but de ce tutoriel était de vous montrer quelques méthodes pour créer votre propre afficher plus de bascules dans Divi. Espérons que l'un d'entre eux vous sera utile plus tard afin que vous n'ayez pas à utiliser un plugin. Bien que nous n'ayons pas ajouté de designs spectaculaires à ces exemples, cela ne veut pas dire que cela ne peut pas être fait. Avec cette fonctionnalité en place, vous pouvez vous amuser à concevoir ces afficher plus de bascules à l'aide du constructeur Divi. Ou vous pouvez même utiliser certaines de nos mises en page prédéfinies pour expérimenter également.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!