Comment mettre en évidence un module Blurb survolé en floutant les autres avec Divi

Quel que soit le type de site Web que vous créez, 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 le didacticiel d'aujourd'hui, nous allons aller plus loin et vous montrer comment mettre en évidence un module Blurb survolé en floutant 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. Dès qu'un visiteur passe à un autre module Blurb, celui-ci devient celui en surbrillance. Vous pourrez également télécharger gratuitement le fichier JSON de la mise en page !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition du module Blurb survolé

Pour mettre la main sur la mise en page du module de présentation libre survolé, vous devrez d'abord la 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 !

Commençons à recréer !

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. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Coor de fond : #eaeaea

Espacement

Ajoutez également des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 2vw
• Marge inférieure : 2vw
• Marge gauche : 2vw
• Marge droite : 2vw
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

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

• Tous les coins : 20px

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement. L'activation de l'option « Egaliser les hauteurs de colonne » vous aidera à l'étape suivante qui aligne le contenu de la colonne.

• Égaliser les hauteurs de colonne : Oui
• Largeur: 90%
• Largeur maximale : 1580px
• Hauteur minimale : 500 px (ordinateur de bureau), automatique (tablette et téléphone)

Élément principal

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

align-items: center;

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, mais 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 prochaines étapes. 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.

Survoler l'arrière-plan du dégradé

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

• Couleur 1 : #ffffff
• Couleur 2: #0f1bff
• Type de dégradé : Linéaire
• Position de départ : 20 %
• Position finale : 20 %

Paramètres d'icône par défaut

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

• Couleur de l'icône : #ffffff
• Icône de cercle : Oui
• Couleur du cercle : #ffffff
• Placement des images/icônes : en haut
• Alignement Image/Icône : Gauche

Paramètres de l'icône de survol

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

• Couleur de l'icône : #0f1bff
• Couleur du cercle : #f7f7f7

Paramètres du texte du titre par défaut

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

• Police du titre : Source Sans Pro
• Poids de la police du titre : gras
• Style de police du titre : majuscule

Paramètres du texte du titre de survol

Changez la couleur du texte du titre au survol.

• Couleur du texte du titre : #ffffff

Paramètres de corps de texte par défaut

Viennent ensuite les paramètres du corps du texte.

• Police du corps : Open Sans
• Hauteur de la ligne du corps : 2 em

Paramètres de survol du corps du texte

Utilisez une couleur de texte de survol blanc.

• Couleur du corps du texte : #ffffff

Espacement

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

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ombre de boîte par défaut

Nous utilisons également une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -20px
• Couleur de l'ombre : rgba(255,255,255,0.18)

Ombre de la boîte de survol

Changez la couleur de l'ombre au survol.

• Couleur de l'ombre : 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.

• Classe CSS : élément de présentation

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 la ligne entière

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.

Personnaliser les modules Blurb individuellement

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Espacement

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.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de code à la colonne

Insérer du code JQuery et CSS

Ajoutez un module de 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');

});
});

.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.

Bureau

Mobile

Dernières pensées

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 survolé en floutant les autres que vous avez affichés. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.