Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Souhaitez vous changer le style de plusieurs éléments Divi lors du survol ou après un clic ?

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 tirerons parti 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 à réaliser.

Commençons!

Aperçu

Voici un bref aperçu de la conception que nous allons réaliser dans ce tutoriel.

Modification des éléments au survol du bouton

changer le style de plusieurs éléments Divi lors du survol ou après un clic

Modification des éléments après clic sur le bouton

changer le style de plusieurs éléments Divi lors du survol ou après un clic

Commençons par créer une page avec Divi Builder

Consulter également : Divi : Comment créer un menu de roue tournante au survol

A partir du tableau de bord de WordPress, rendez vous sur Pages > Add New pour créer une nouvelle page.

lignes Divi converties en onglets

Donnez lui un titre qui a du sens pour vous et cliquez sur Use Divi Builder

Cliquez ensuite sur Start Buiding (Build From Scratch)

lignes Divi converties en onglets

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 :

  • Background : #ffffff

Ajoutons un séparateur de section

  • Divider (Top)
    • Style : voir capture d’écran
    • Color : #ffffff
    • Height : 5vw
  • Divider (Bottom)
    • Style : voir capture
    • Color : #ffffff
    • Height : 5vw
    • Padding (Top et Bottom) : 6vw

Image (Avant le survol)

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. 

Sous l’onglet Design, mettez à jour l’alignement et activez l’option Force Fullwidth.

  • Image alignment : centré
  • Force Fullwidth : YES

Image (Au survol ou après clic)

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

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

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

Téléchargez ensuite 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 à s’asseoir directement au-dessus de l’autre image sans occuper d’espace réel sur la page.

  • Position : Absolute

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

  • Opacity : 0 %

Ajouter un module Texte

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

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

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

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

Sous l’onglet Design, mettez à jour les options de style H3 comme suit :

  • Heading 3 :
    • Font : Montserrat
    • Font Weight Poids de la police : Ultra Gras
    • Style : TT
    • Text Size : 60 px (ordinateur et tablette), 40 px (téléphone)
    • Letter Spacing : 0,06 em
    • Line Height : 2 em

Dans la section suivante, nous allons ajouter le bouton que nous utiliserons pour initier les changements de style.

Créer une section pour le bouton

Nous devons d’abord créer 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 Button.

Modifiez le texte du bouton pour lire « Suite… ».

Passez à l’onglet Design et mettez à jour le design du bouton comme suit :

  • Use Custom Styles For Button : YES
  • Text Size : 16 px
  • Text Color : #ffffff
  • Button Background (Desktop) : #4b4baf
  • Button Backbround (Hover): #67ddc1
  • Border Width : 0 pixel

Lire aussi : Divi : Comment ajouter une icône hamburger au module Menu

  • Button Letter Spacing : 4px
  • Font : Montserrat
  • Font Weight : Semi Bold
  • Button Font Style : TT
  • Margin (Bottom) : 0px
  • Padding (Top et Bottom) : 1.5em
  • Padding (Left et Right) : 4em

Partie 2 : Ajouter des classes CSS aux éléments

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

Maintenant que notre conception est en place, nous allons effectuer 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 lorsque nous survolons/cliquons 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 Advanced. Saisissez ensuite la classe CSS suivante :

  • CSS Class : et-change-style_section

Ajouter une classe CSS aux modules Image

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 calque modal, 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 module Text

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 module Button

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 ultérieurement.

Partie 3 : Ajouter un code personnalisé pour modifier les styles au survol ou au clic

Maintenant que toutes nos classes CSS sont en place, nous pouvons ajouter le code nécessaire pour changer le style de tous ces éléments lorsque vous survolez/cliquez sur le bouton.

Ajouter un module Code

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

Coller le code jQuery

Ensuite, collez 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 );

Changer le style des éléments avec un CSS personnalisé

Ouvrez le module Code et collez le CSS personnalisé suivant au-dessus du script JQuery, en veillant à l’envelopper dans les balises de style nécessaires.

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

Ensuite, collez le CSS supplémentaire suivant dans les balises de style.

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

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 changer le style de l’élément lorsque la section (ou le bouton) a la nouvelle classe.

éléments Divi lors du survol

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.

changer l'apparence de plusieurs éléments Divi lors du survol ou après un clic

Changer les styles lors du clic

Pour ajouter la fonctionnalité de clic, remplacez le JQuery actuel par ce qui suit (encore une fois, assurez-vous qu’il est encapsulé 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('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

Voici le résultat final.

changer le style de plusieurs éléments Divi lors du survol ou après un clic

Télécharger DIVI Maintenant !!!

Conclusion

Pouvoir cibler et modifier le style de plusieurs éléments sur une page lorsque vous survolez ou cliquez sur quelque chose est une compétence utile dans la 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 connaissances approfondies de code pour obtenir des résultats surprenants !

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

%d blogueurs aiment cette page :