Comment changer le style de plusieurs éléments au survol ou au clic dans Divi

Finalement, dans le monde de la conception Web, les codeurs et les non-codeurs chercheront à ajouter des personnalisations et des fonctionnalités plus avancées à leurs sites Web Divi. Habituellement, cela implique l'utilisation de Javascript/JQuery pour modifier le style des éléments de la page pour différentes raisons. Vous souhaiterez peut-être faire apparaître un formulaire de contact lorsque vous cliquez sur un bouton. Ou vous voudrez peut-être changer une image lorsque vous survolez un lien.

Dans ce tutoriel, nous allons vous montrer comment changer le style de plusieurs éléments au survol ou au clic dans Divi. Tout d'abord, nous allons profiter des options de conception intégrées de Divi pour concevoir une disposition de section. Ensuite, nous présenterons un simple extrait de jQuery que vous pouvez utiliser en combinaison avec un CSS personnalisé pour ajuster le style de n'importe quel élément de cette section lorsque vous survolez ou cliquez sur un bouton. Cela peut sembler compliqué (surtout pour les débutants), mais vous serez peut-être surpris de voir à quel point c'est simple à accomplir.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Voici la conception de la disposition de la section modifiée lorsque vous survolez le bouton.

Et voici la même conception de disposition de section modifiée en cliquant sur le bouton. Notez que le texte du bouton change également au clic.

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.

Partie 1 : Conception de la disposition de la section

Pour commencer, créez une nouvelle ligne à deux colonnes.

Paramètres de section

Avant d'ajouter des modules, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #ffffff

• Style de séparateur supérieur : voir capture d'écran
• Couleur du séparateur supérieur : #ffffff
• Hauteur du diviseur supérieur : 5vw

• Style de diviseur inférieur: même
• Couleur du séparateur inférieur : #ffffff
• Hauteur du diviseur inférieur : 5vw

• Rembourrage: haut 6vw, bas 6vw

Avant l'image

Dans la colonne de gauche de la ligne à deux colonnes, ajoutez un nouveau module d'image.

Ensuite, téléchargez l'image que vous souhaitez mettre en valeur. Pour ce didacticiel, nous utilisons une image du pack de mise en page Learning Management (LMS) qui mesure environ 800 pixels sur 550 pixels.

Sous l'onglet Conception, mettez à jour l'alignement et activez l'option Forcer toute la largeur.

• Alignement de l'image : centre
• Forcer la pleine largeur : OUI

Après l'image

Ensuite, nous allons créer une autre image que nous afficherons lorsque nous survolerons/cliquerons sur un bouton.

Pour créer l'image, dupliquez le module image précédent.

Ensuite, téléchargez une nouvelle image. L'image doit être de la même taille que l'autre image car elle remplacera l'autre image au survol/clic.

Pour cette image, nous allons lui donner une position absolue. Cela entraînera l'image directement au-dessus de l'autre image sans occuper d'espace réel sur la page.

• Position : Absolu

Sous l'onglet Conception, modifiez l'opacité sous les options de filtre afin que l'image soit complètement invisible.

• Opacité : 0%

Ajouter un en-tête de texte

Dans la colonne de droite, ajoutez un nouveau module de texte.

Collez ensuite le code HTML suivant dans la zone de contenu du corps :

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Notez que certains mots du texte sont entourés de balises span. C'est ainsi que nous pouvons cibler et styliser ces mots plus tard avec du CSS personnalisé.

Sous l'onglet Conception, mettez à jour les options de style H3 comme suit :

• Police de la rubrique 3 : Montserrat
• Titre 3 Poids de la police : Ultra gras
• Titre 3 Style de police : TT
• Titre 3 Taille du texte : 65 px (ordinateur de bureau et tablette), 40 px (téléphone)
• Espacement des lettres de l'en-tête 3 : 0.8em
• Titre 3 Hauteur de ligne : 1,3 em

Cela prend en charge la disposition de la section qui contient les éléments de conception que nous modifierons lors du survol/clic sur un bouton. Dans cette section suivante, nous allons ajouter le bouton que nous utiliserons pour initier les changements de style.

Créer une section pour le bouton

Créez une nouvelle section régulière sous la section actuelle.

Ajoutez ensuite une ligne à une colonne à la section.

Ajouter un bouton

Dans la colonne, ajoutez un nouveau module de boutons.

Changez le texte du bouton pour lire "Voir après".

Passez à l'onglet Conception et mettez à jour la conception du bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #ffffff
• Arrière-plan du bouton : #4b4baf
• Arrière-plan du bouton (survol): #67ddc1
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 4px
• Police des boutons : Montserrat
• Poids de la police du bouton : semi-gras
• Style de police des boutons : TT

Partie 2 : Ajout de classes CSS aux éléments

Maintenant que notre conception est en place, nous allons accomplir le reste des modifications de conception à l'aide de code personnalisé (CSS et JQuery). Mais avant de commencer à ajouter notre code personnalisé, nous devons ajouter des classes CSS à tous les éléments que nous souhaitons modifier en survolant/cliquant sur le bouton.

Ajouter une classe CSS à la section

Pour ajouter une classe CSS à la section, ouvrez les paramètres de la section et cliquez sur l'onglet avancé. Saisissez ensuite la classe CSS suivante :

• Classe CSS : et-change-style_section

Ajouter une classe CSS aux images

Ensuite, ouvrez les paramètres de la première image dans la colonne de gauche et ajoutez la classe CSS suivante :

• Classe CSS : et-before-image

Ce sera l'image qui s'affichera "avant" le survol/clic du bouton.

À l'aide du modal des calques, ouvrez les paramètres de la deuxième image (celle qui est masquée avec le filtre d'opacité) et ajoutez la classe CSS suivante :

• Classe CSS : et-after-image

Ce sera l'image qui s'affichera "après" le survol/clic du bouton.

Ajouter une classe CSS au texte

Ensuite, ajoutez la classe CSS suivante au module de texte dans la colonne de droite :

• Classe CSS : et-style-text

Ajouter une classe CSS au bouton

Enfin, ajoutez une classe CSS personnalisée au bouton dans la section inférieure comme suit :

• Classe CSS : et-toggle-button

Nous avons besoin de cette classe pour cibler le bouton pour la fonctionnalité de survol/clic dans le code plus tard.

Partie 3 : Ajouter du code personnalisé pour modifier les styles en survolant ou en cliquant

Maintenant que toutes nos classes CSS sont en place, nous pouvons maintenant ajouter le code nécessaire pour changer le style de tous ces éléments lors du survol/clic sur le bouton.

Ajouter un module de code

Pour ajouter le code, ajoutez un module de code sous le bouton dans la section inférieure.

Coller le code jQuery

Collez ensuite le JQuery suivant. Assurez-vous d'envelopper le code dans des balises de script car nous ajoutons le code à un document HTML (pas un fichier JS).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

Si vous jetez un œil au code, vous devriez reconnaître les classes CSS que nous avons ajoutées au bouton et à la section.

La classe Button (".et-toggle-button") est utilisée pour cibler l'élément qui lancera une fonction au survol.

Au survol, la fonction trouvera l'élément avec la classe de section ".et-change-style_section" et basculera/ajoutera une nouvelle classe (".et-change-style-active") lorsque le curseur survolera le bouton.

Le bouton est également ciblé (via "$this") afin de basculer une nouvelle classe (".et-toggle-button_active") dans l'état de survol.

La clé pour changer les styles de ces éléments au survol consiste à ajouter/basculer ces nouvelles classes CSS supplémentaires à la section et au bouton.

Par exemple, une fois que la section avec la classe ".et-change-style_section" reçoit cette classe supplémentaire (".et-change-style_active"), nous pouvons utiliser Custom CSS pour changer le style de la section qui lui a été attribuée à l'origine via les options Divi intégrées.

Modification du style des éléments avec CSS personnalisé

Ouvrez le module de code et collez le CSS personnalisé suivant au-dessus du script JQuery, en vous assurant de l'envelopper dans les balises Style nécessaires.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Notez que la classe de section initiale est combinée avec la nouvelle classe en tant que sélecteur. Le CSS qui suit ne s'appliquera à la section que lorsque cette nouvelle classe sera attachée. Lorsqu'il n'est pas attaché, le design original sera affiché. Dans cet exemple, la couleur d'arrière-plan de la section change lorsque vous survolez le bouton.

Ensuite, collez le CSS supplémentaire suivant à l'intérieur des balises de style.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Étant donné que la section parent reçoit une classe au survol, vous pouvez cibler les éléments enfants de la section (comme les images) à l'aide de cette même classe CSS. Mais comme il s'agit d'une classe dans un conteneur/une section parent, la classe CSS doit précéder la classe de l'élément que vous cherchez à modifier. Dans cet exemple, la classe CSS (".et-change-style_active") donnée à la section parent vient avant la classe donnée aux images enfants (".et-after-image" et ".et-before-image").

Le CSS de l'image après affichera l'image au survol du bouton. Et le CSS pour l'image avant masquera l'image au survol du bouton. Le résultat est que l'image initiale est remplacée par une nouvelle au survol du bouton.

Collez ensuite le reste du CSS à l'intérieur des balises de style :

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

Ces extraits CSS utilisent le même concept pour modifier le style de l'élément lorsque la section (ou le bouton) a la nouvelle classe.

Résultat final (survol)

Une fois le code ajouté, enregistrez les modifications et ouvrez la page pour afficher le résultat. Remarquez comment les éléments que nous avons ciblés sont modifiés lorsque vous survolez le bouton.

Modification des styles en cliquant au lieu de survoler

Si vous souhaitez modifier le style de ces mêmes éléments lorsque vous cliquez sur le bouton (plutôt que survoler), il vous suffit d'apporter quelques modifications au JQuery. La plupart du code restera le même. La principale différence est que la méthode « hover » est remplacée par « click ». Et nous avons ajouté un extrait de code utile qui modifie le texte du bouton au clic.

Pour ajouter la fonctionnalité de clic, remplacez le JQuery actuel par le suivant (encore une fois, assurez-vous qu'il est enveloppé dans les balises de script) :

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Voici le résultat final.

Dernières pensées

Être capable de cibler et de modifier le style de plusieurs éléments sur une page lorsque vous survolez ou cliquez sur quelque chose est une compétence utile en conception Web. Vous pouvez utiliser cette technique pour une variété de cas d'utilisation (avant et après, CTA, etc.) Bien sûr, cela aide à connaître un peu CSS et JS/JQuery. Mais, comme vous l'avez vu dans ce tutoriel, vous n'avez pas besoin de connaître un ton de code pour obtenir des résultats surprenants !

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

À votre santé!