2 façons de créer des boutons switch personnalisés pour afficher plus d’informations dans Divi

Les boutons d’affichage supplémentaire peuvent s’avérer utiles pour de nombreuses applications différentes sur un site Web. Traditionnellement, ces boutons sont utilisés pour afficher plus de texte lorsque l’on clique sur un lien « show more » (comme les boutons « read more »). Cela permet de conserver un design initial plus compact et concis, laissant au visiteur le soin de cliquer pour obtenir plus d’informations s’il en a besoin.

Dans ce tutoriel, nous allons vous montrer deux façons de créer des Toggles Show More personnalisés pour votre site Divi. La première méthode consiste à transformer un module à bascule Divi en un bouton à bascule « Show More » qui se trouve sous un module, prêt à afficher/masquer un texte supplémentaire. La deuxième méthode consiste à créer un module à bascule qui peut afficher/masquer des rangées ou des modules Divi entiers. Comme vous pouvez l’imaginer, cela ouvre la porte à l’affichage ou au masquage de tout le contenu que vous souhaitez !

Coup d’œil rapide

Voici un aperçu des boutons d’affichage supplémentaires que nous allons créer dans ce tutoriel.

[et_bloom_locked optin_id= »optin_3″] Télécharger [/et_bloom_locked]

Pour importer 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 d’importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez 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 en front-end (visual builder).
3. Choisissez l’option « Build From Scratch ».

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

1ère méthode : création d’un bouton Afficher plus à l’aide d’un module Toggle de Divi

Tout d’abord, ajoutez une rangée de deux colonnes à votre section.

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

Sous le module de présentation, ajoutez un module de basculement. Nous allons transformer le module à bascule en un module à bascule permettant d’afficher ou de masquer davantage de texte sous le module de présentation lorsque vous cliquez sur le module à bascule.

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

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

• Open Toggle Background Color : rgba(0,0,0,0) ;
• Closed Toggle Background Color : rgba(0,0,0,0) ;

• Rembourrage : 0px haut, 0px bas, 0px gauche
• Border Width : 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 basculant..

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

Pour le Toggle Content..

order:1 ;
padding : 0px ;

Ce titre à bascule et ce contenu à bascule sont ordonnés différemment à l’aide de la propriété order avec display:flex. Le titre cliquable se trouve maintenant sous le contenu, de sorte qu’il fonctionne comme un bouton à bascule « Afficher plus ».

Ajoutez maintenant la classe CSS suivante au module de basculement :

• Classe CSS : et-readmore-toggle

Elle est nécessaire pour cibler le module avec notre code JQuery que nous ajouterons pour modifier le texte du titre lorsque vous cliquez sur le bouton de basculement.

Nous avons nettoyé le module de basculement et supprimé tout le padding afin que le basculement se trouve directement sous le module de présentation supérieur. Cependant, il y a encore trop de marge inférieure dans le blurb supérieur, de sorte que le texte du basculeur sera trop éloigné du paragraphe précédent.

Ouvrez les paramètres du module de texte d’accompagnement situé au-dessus du basculeur et mettez à jour la marge :

Nous sommes maintenant prêts à ajouter le code JQuery nécessaire pour modifier le texte du titre de la bascule afin qu’il indique « Show More » ou « Show Less » lorsqu’on clique dessus.

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

Collez ensuite le code JQuery suivant en veillant à l’entourer des 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.

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

Deuxième méthode : création d’un bouton Afficher plus pour afficher/masquer n’importe quel module ou rangée Divi

Si la première méthode utilisant le module de basculement vous semble un peu trop restrictive, la méthode suivante vous intéressera. Nous allons construire un bouton personnalisé que vous pouvez utiliser pour afficher/masquer un module Divi ou même une rangée entière !

Création d’un bouton Afficher plus pour un module Divi

Voici comment procéder.

Tout d’abord, créez une autre rangée de deux colonnes comme vous l’avez fait dans le premier exemple.

Ajoutez ensuite un module d’information à la colonne 1.

Sous le module blurb, nous allons ajouter un module de formulaire de contact.

Ce formulaire de contact sera le module que nous afficherons/masquerons en cliquant sur le bouton « show more ».

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 « show more » 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 « show more », 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 bouton et ajoutez la classe CSS suivante :

• Classe CSS : et-show-more-toggle

Puis modifiez le texte du bouton pour qu’il devienne « Show More ».

Nous sommes maintenant prêts à ajouter le code nécessaire pour faire fonctionner notre bouton à bascule « Show More ».

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

Collez d’abord le CSS suivant dans le module de code en veillant à entourer le code des 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 ;
  }

Puis, sous le CSS, collez le JQuery suivant en veillant à entourer le code de 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. Veillez à supprimer la troisième colonne vide et le module de code supplémentaire qui a été reporté avec la duplication.

Voici le résultat.

Création d’un bouton Afficher plus pour une rangée Divi

Maintenant que nous disposons de nos boutons d’affichage supplémentaires pour un module Divi, nous allons ajouter un nouveau bouton d’affichage supplémentaire pour activer la rangée entière.

Tout d’abord, créez une nouvelle rangée d’une colonne pour accueillir notre nouveau bouton.

Copiez ensuite l’un des modules de bouton Afficher plus existants et collez-le dans la nouvelle rangée. Ouvrez ensuite les paramètres du bouton et modifiez l’alignement du bouton :

Puisque nous voulons cibler la rangée comme étant le contenu que nous voulons afficher/masquer, ouvrez les paramètres de la rangée contenant les boutons d’affichage supplémentaires pour les modules de formulaire de contact. Ajoutez ensuite la classe CSS suivante à la rangée :

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

Voici le résultat.

Résultats finaux

Voici les résultats finaux pour les trois boutons « show more » que nous avons construits.

Réflexions finales

L’objectif de ce tutoriel était de vous montrer quelques méthodes pour créer vos propres boutons d’affichage supplémentaire dans Divi. Nous espérons que l’une d’entre elles vous sera utile à l’avenir et que vous n’aurez pas à utiliser un plugin. Bien que nous n’ayons pas ajouté de designs spectaculaires à ces exemples, cela ne veut pas dire que ce n’est pas possible. Avec cette fonctionnalité en place, vous pouvez vous amuser à concevoir ces boutons « show more » à l’aide du constructeur de Divi. Vous pouvez également utiliser certaines de nos mises en page préétablies pour les expérimenter.

J’ai hâte de lire vos commentaires.

À la vôtre !