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 savoir comment mettre un module Blurb de Divi en surbrillance tout en floutant les autres ?

Quel que soit le type de site Web que vous construisez, il y a de fortes chances qu’à un moment donné, vous souhaitiez afficher une liste de différents services, étapes et plus encore. 

L’un des moyens les plus simples d’aborder la création d’une telle liste de manière attrayante consiste à utiliser le module Blurb de Divi. Les modules Blurb vous permettent de structurer magnifiquement le contenu de la liste tout en vous offrant des possibilités de conception infinies.

Dans ce tutoriel, nous allons aller plus loin et vous montrer comment mettre en surbrillance un module Blurb au survol et flouter les autres que vous avez affichés. C’est un excellent moyen de mettre l’accent sur un module Blurb à la fois, sans laisser les autres modules Blurb distraire le lecteur. 

Allons-y.

Aperçu

Avant de plonger dans ce tutoriel, examinons rapidement le résultat sur différentes tailles d’écran.

Ordinateur de bureau

mettre un module Blurb de Divi en surbrillance tout en floutant les autres

Version mobile

mettre un module Blurb de Divi en surbrillance tout en floutant les autres

Commençons la conception avec Divi

Ajouter une nouvelle section

Couleur de l’arrière plan

Commencez par ajouter une section régulière à une nouvelle page ou à celle sur laquelle vous travaillez. 

Vous pouvez aussi consulter : Divi : Comment créer une section membres de l’équipe sous forme de carrousel

Ouvrez les paramètres de la section et modifiez la couleur d’arrière-plan.

  • Background : #eaeaea

Spacing

Ajoutez également des valeurs d’espacement.

  • Margin (Top, Bottom, Left et Right) : 2vw
  • Padding (Top et Bottom) : 0px

Border

Complétez les paramètres de la section en ajoutant un rayon de bordure.

  • Rounded Corners (Tous les coins) : 20px

Ajouter une nouvelle ligne

Structure de la colonne

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Sizing

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et modifiez les paramètres de dimensionnement.

  • Equalize Column Heights : YES
  • Width : 90 %
  • Max Width : 1 580 pixels
  • Min Height : 500 px (Desktop), auto (Tablet et Phone)

Custom CSS (Main Element)

Alignez le contenu de la colonne en ajoutant une seule ligne de code CSS à l’élément principal de la ligne.

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.

align-items: center;
module Blurb de Divi

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Le seul module que nous utilisons tout au long de ce didacticiel est un module Blurb.

Cependant, vous pouvez remplacer ce module par n’importe quel module de votre choix tant que vous ajoutez la classe CSS que nous partagerons dans les étapes à venir. 

Ajoutez le premier module Blurb à la colonne 1 et insérez le contenu de votre choix.

Sélectionnez l’icône

Sélectionnez ensuite une icône.

  • Use Icon : YES
  • Icon : Voir capture d’écran

Background Gradient (Hover)

Ensuite, utilisez un dégradé d’arrière-plan uniquement au survol.

  • Gradient Stops
    • 20% : #ffffff
    • 80% : #0f1bff
  • Gradient Type : Linear

Paramètres de l’icône (Desktop)

Passez à l’onglet Design du module et modifiez les paramètres de l’icône comme suit :

  • Icon Color : #ffffff
  • Image/Icon Rounded Corners : 50px
  • Image/Icon Border Width : 5px
  • Border Color : #ffffff
  • Image/Icon Placement : Top
  • Image/Icon Alignment : gauche

Paramètres de l’icône au survol

Modifiez les différentes couleurs des icônes au survol.

  • Icon Color (Hover) : #0f1bff
  • Image/Icon Background Color (Hover) : #f7f7f7

Paramètres du texte du titre

Continuez en modifiant les paramètres du texte du titre.

  • Title Font : Source Sans Pro
  • Font Weight : Bold
  • Title Font Style : TT (majuscule)

Paramètres du texte du titre au survol

Modifiez la couleur du texte du titre au survol.

  • Title Text Color : #ffffff

Paramètres du texte de description (Desktop)

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.

Viennent ensuite les paramètres du corps du texte.

  • Body Font : Open Sans
  • Body Line Height : 2em

Paramètres du texte de description au survol

Utilisez une couleur de texte au survol.

  • Body Text Color (Hover) : #ffffff

Spacing

Ensuite, accédez aux paramètres d’espacement et ajoutez des valeurs de remplissage personnalisées.

  • Padding (Top, Bottom, Left et Right) : 50px

Box Shadow (Desktop)

Nous utilisons également une ombre de boîte.

  • Box Shadow Blur Strength : 80px
  • Box Shadow Spread Strength : -20px
  • Shadow Color : rgba(255,255,255,0.18)

Box Shadow (Hover)

Changez la couleur de l’ombre au survol.

  • Shadow Color : rgba(0,0,0,0.18)

Classe CSS

Et pour que l’effet de flou se produise, nous devrons attribuer une classe CSS à notre module Blurb. Plus tard dans l’article, nous utiliserons cette classe CSS dans du code JQuery.

  • CSS Class : blurb-item

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé le module Blurb dans la colonne 1, vous pouvez le cloner deux fois et placer les doublons dans les colonnes restantes de la ligne.

Cloner toute la ligne

Vous pouvez cloner la ligne autant de fois que vous le souhaitez, en fonction du nombre de modules Blurb que vous souhaitez afficher sur votre page.

Personnalisez les modules Blurb individuellement

Bien sûr, vous devrez modifier le contenu individuel de chaque module Blurb.

Ajouter une nouvelle ligne

Structure de la colonne

Ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Spacing

Ouvrez les paramètres de ligne et supprimez tous les rembourrages supérieur et inférieur par défaut. Cela aidera à réduire l’espace occupé par cette rangée.

  • Padding (Top et Bottom) : 0px

Ajouter le module Code à la colonne

Insérer du code JQuery et CSS

Ajoutez un module Code à la colonne de la ligne et insérez du code JQuery et CSS pour que l’effet se produise. 

N’oubliez pas de mettre le code JQuery entre les balises de script et le code CSS entre les balises de style comme vous pouvez le voir dans l’écran d’impression ci-dessous.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
 
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
 
});
});

Lire également : Divi : Comment créer une section Témoignages sous forme de grille

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Ordinateur de bureau

mettre un module Blurb de Divi en surbrillance tout en floutant les autres

Version mobile

mettre un module Blurb de Divi en surbrillance tout en floutant les autres

Télécharger DIVI Maintenant !!!

Conclusion

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les modules Blurb que vous partagez sur votre site Web

Plus précisément, nous vous avons montré comment mettre en évidence un module Blurb au survol en brouillant les autres que vous avez affichés. 

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.

N’hésitez pas à consulter également 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 :