Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment créer un effet d’arrière-plan flou transparent sur Divi

Blair2004 Tutoriels Divi Apr 23, 2021

Avez-vous déjà voulu ajouter un effet de fond flou transparent spécial à votre site Web? Eh bien, c’est possible avec Divi. En fait, l’utilisation de ce design frais rend votre arrière-plan et le texte de premier plan se démarquer bien.

Dans ce tutoriel, nous allons montrer comment créer un effet de fond transparent en utilisant Divi. Cela sera fait en utilisant la propriété de filtre de fond sur CSS qui nous aidera à créer de tels effets en une seule ligne de code.

Commençons.

Aperçu du résultat final

Afin que vous sachiez où nous allons, voici un coup d’oeil rapide à ce que nous allons concevoir tout au long de ce tutoriel.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Création d’un fond flou sur Divi

Ainsi, nous allons vous montrer une méthode plus facile pour créer un fond flou en utilisant le Propriété CSS filtre en toile de fond. C’est facile parce que nous avons juste besoin d’avoir une seule ligne de code pour avoir le résultat souhaité sur Divi. Cependant, seuls quelques navigateurs ne supportent pas cet effet (en particulier IE).

Le but de cet effet n’est pas seulement de brouiller l’arrière-plan, mais aussi de brouiller le contenu derrière l’élément. Cette propriété (filtre de fond) peut le faire en appliquant un filtre à l’élément derrière l’élément cible.

Voici comment le faire.

Ajoutons une image de fond sur Divi Builder

Tout d’abord, ajoutez une ligne d’une colonne à la section.

Ouvrez les paramètres de la section et donnez-lui une image de fond.

Ajout de la couleur d’arrière-plan de ligne et du filtre de fond

Ensuite, ouvrons les paramètres de la ligne et ajoutons une couleur de fond blanc semi-transparente comme suit :

background-color: rgba(255,255,255,0.3)

Sous l’onglet conception, mettez à jour la taille et l’espacement de la ligne comme suit :

  • Largeur: 90%
  • Largeur maximale: 900px
  • Rembourrage: 5% en haut, 5% en bas, 5% à gauche, 5% à droite

Sous l’onglet avancé, ajouter le CSS suivant à l’élément principal :

-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);

Cela ajoutera un filtre flou 10px à la toile de fond de l’élément. Remarquez comment l’image d’arrière-plan de la section est brouillée par l’effet même si le CSS est appliqué à la ligne. Vous pouvez augmenter ou diminuer la quantité de flou en changeant la valeur pixel dans le CSS.

Ajout de contenu avec un module texte

Pour fournir du contenu pour notre arrière-plan givré, ajoutez un module texte à la colonne de la ligne.

Ensuite, coller le HTML suivant au corps sous l’onglet texte:

<h2>Blurred Background</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Pour polir la conception, mettons à jour les styles de texte comme suit :

  • Poids de police de texte : semi-gras
  • Couleur de texte : #33345b
  • Taille du texte: 16px
  •  Hauteur de la ligne de texte: 2em
  • Cap 2 Font: Poppins
  • Cap 2 Font Weight: Bold
  • Cap 2 Font Style: TT
  • Cap 2 Alignement de texte: Gauche
  • Cap 2 Couleur de texte: #33345b
  • Cap 2 Taille du texte: 70px (bureau), 40px (tablette), 25px (téléphone)
  • Cap 2 Espacement des lettres: 2px
  • Cap 2 Hauteur de ligne: 1.3em

Résultat final

Voici le résultat final. Nous pouvons dis-le’était assez facile non?

Dans ce tutoriel, nous vous avons montré comment créer un effet de fond en verre givré ou un effet de verre de fond flou sur Divi. Pour donner un nouveau look, vous pourriez envisager de changer l’image de fond. Vous pouvez trouver des images sur pexels. Voyons maintenant ce que vous allez créer avec votre propre imagination.

N’hésitez pas à partager cela avec votre ami au Suivez-nous pour rester à jour avec les tutoriels récents et les ressources.