Comment créer un design de fond en verre dépoli dans Divi

L'ajout d'un arrière-plan en verre dépoli pour votre site Web peut être un nouvel élément de conception qui fait ressortir vos arrière-plans et votre texte de manière unique. L'astuce pour créer un effet d'arrière-plan en verre dépoli est de flouter l'arrière-plan derrière l'élément cible. En d'autres termes, nous voulons mélanger deux éléments de manière à ce que l'arrière-plan cible ressemble à du verre dépoli qui révèle une version floue de l'arrière-plan derrière l'élément.

Dans ce tutoriel, nous allons vous montrer trois méthodes pour créer un design de fond en verre dépoli dans Divi. Tout d'abord, nous présenterons la puissante propriété CSS background-filter qui créera des arrière-plans givrés avec une seule ligne de CSS. Ensuite, nous vous montrerons deux autres méthodes qui impliquent la superposition d'éléments Divi (avec des styles d'arrière-plan et des filtres) pour créer de superbes motifs d'arrière-plan givrés.

Commençons!

Aperçu

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

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord les 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 !

Abonnez-vous à notre chaîne Youtube

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.

Comment créer des motifs de fond en verre dépoli dans Divi

Méthode 1 : Création d'un fond de verre dépoli à l'aide de la propriété CSS Backdrop-Filter`

Dans ce premier exemple, nous allons montrer la méthode la plus simple pour créer un design d'arrière-plan en verre givré à l'aide de la propriété CSS toile de fond-filter. C'est facile car nous n'avons besoin que d'une ligne de CSS pour obtenir le résultat que nous voulons. L'inconvénient est qu'il existe actuellement quelques navigateurs qui ne prennent pas en charge le filtre de fond (IE et Firefox).

L'objectif de la conception d'arrière-plan givré n'est pas simplement de brouiller l'arrière-plan de l'élément cible, mais de brouiller l'arrière-plan derrière l'élément. La propriété background-filter peut le faire en appliquant un effet de filtre de flou à l'élément en dessous (ou derrière) l'élément cible.

Voici comment procéder.

Ajout de l'image d'arrière-plan de la section

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

Ouvrez les paramètres de la section et donnez-lui une image d'arrière-plan.

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

Ensuite, ouvrez les paramètres de ligne et ajoutez une couleur de fond blanc semi-transparent comme suit :

• Couleur d'arrière-plan : 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 : 900 pixels
• Rembourrage : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite

Sous l'onglet avancé, ajoutez le CSS suivant à l'élément principal :

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

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

Ajouter du contenu avec un module de texte

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

Collez ensuite le code HTML suivant dans le corps sous l'onglet texte :

<h2>Frosted Glass 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 peaufiner la conception, mettons à jour les styles de texte comme suit :

• Poids de la police de texte : demi-gras
• Texte Couleur du texte : #33345b
• Taille du texte du texte : 16px
• Hauteur de la ligne de texte : 2 em
• Police de la rubrique 2 : Poppins
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Style de police : TT
• En-tête 2 Alignement du texte : à gauche
• Titre 2 Couleur du texte : #33345b
• Titre 2 Taille du texte : 70px (ordinateur de bureau), 40px (tablette), 25px (téléphone)
• Espacement des lettres de l'en-tête 2 : 2px
• Titre 2 Hauteur de ligne : 1,3 em

Résultat

Voici le résultat final. Je t'avais dit que ce serait facile !

Méthode 2: Création d'un fond de verre dépoli à l'aide de modules de parallaxe et de couches

Pour cette prochaine méthode, nous allons faire preuve d'un peu de créativité dans la façon dont nous créons l'effet de fond de verre dépoli dans Divi. Bien que ce ne soit pas aussi facile à créer, le côté positif est que la conception est prise en charge sur tous les navigateurs. Donc, si vous recherchez une solution de repli fiable pour le filtre de fond, cela devrait fonctionner.

Voici comment procéder.

Ajout d'une section avec une image d'arrière-plan de parallaxe

Tout d'abord, créez une nouvelle section régulière sous celle que nous venons de créer.

Ajoutez ensuite une ligne à une colonne à la section.

Donnez à la section une image d'arrière-plan avec un effet de parallaxe en utilisant la méthode CSS :

• Utiliser l'effet de parallaxe : OUI
• Méthode de parallaxe : CSS

Ajout du même contenu que le module de texte précédent

Ensuite, copiez le module de texte de la première section/exemple ci-dessus et collez-le dans la ligne de la nouvelle section.

Paramètres de colonne

Ensuite, ouvrez les paramètres de la colonne contenant notre module de texte en double et mettez à jour le remplissage comme suit :

• Rembourrage : 10 % en haut, 10 % en bas, 10 % à gauche, 10 % à droite

Sous l'onglet Avancé, mettez à jour la visibilité du débordement comme suit :

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter un calque d'image d'arrière-plan flou avec un module de texte

Maintenant que notre contenu et notre image de parallaxe d'arrière-plan de section sont en place, nous devons ajouter le premier des deux modules de texte (ou calques) qui constitueront l'arrière-plan givré derrière notre contenu.

Tout d'abord, nous allons ajouter un module de texte qui servira de calque d'image floue.

Allez-y et ajoutez un nouveau module de texte sous le module de texte existant.

Déplacez le module de texte au-dessus du module de texte contenant le contenu du texte.

Retirez ensuite le contenu du corps pour qu'il reste vide. Nous n'aurons besoin de ce module que pour une image de fond.

Ensuite, ajoutez la même image d'arrière-plan au module de texte en utilisant le même effet de parallaxe CSS :

• Utiliser l'effet de parallaxe : OUI
• Méthode de parallaxe : CSS

Parce que nous utilisons le même effet de parallaxe CSS sur l'image d'arrière-plan, vous ne remarquerez pas l'arrière-plan de l'image car il montre la même image dans la même position fixe de l'arrière-plan de la section.

Sous l'onglet conception, ajoutez le filtre suivant au module de texte :

• Flou : 10px

Nous avons maintenant une version floue de l'image d'arrière-plan de parallaxe.

Ensuite, donnez au module de texte une position absolue :

• Position : Absolu

Maintenant que le module est dans une position absolue, nous pouvons mettre à jour le style de taille afin que le module s'étende sur toute la largeur et la hauteur de la colonne.

• Largeur : 100 %
• Hauteur : 100 %

Maintenant, l'image floue est en place et nous pouvons voir l'effet de verre dépoli entrer en vigueur.

Ajout de la superposition d'images floues avec un autre module de texte

L'étape suivante consiste à ajouter un autre module de texte au-dessus du module de texte d'image floue pour servir de superposition de lumière pour compléter la conception.

Pour créer la superposition, dupliquez le module de texte de l'image floue.

Ouvrez les paramètres du module de texte en double et supprimez l'image d'arrière-plan.

Ajoutez ensuite la couleur de fond suivante :

• Couleur d'arrière-plan : rgba (255,255,255,0,5)

Sous l'onglet Conception, ramenez le filtre de flou à 0px.

Découvrez maintenant le résultat final.

Méthode 3 : Création d'un arrière-plan en verre dépoli à l'aide de tailles d'image réelles et de modules en couches

L'effet de parallaxe avec l'arrière-plan givré est cool, mais vous ne voudrez peut-être pas vous limiter à l'effet de parallaxe pour créer des arrière-plans givrés. Le même effet peut être obtenu en utilisant des images d'arrière-plan dans leur taille réelle.

Pour cette dernière méthode, nous allons créer des motifs de fond dépoli au niveau de la colonne en utilisant des images à leur taille réelle. Le processus est similaire à la méthode 2 ci-dessus. L'avantage est que vous pouvez utiliser cette méthode pour créer des arrière-plans givrés sur plusieurs colonnes d'une ligne Divi.

Dupliquer la section précédente

Pour démarrer la conception, dupliquez la deuxième section contenant notre deuxième exemple.

Mettre à jour l'arrière-plan de la section

Ouvrez les paramètres de la section, supprimez l'image d'arrière-plan et ajoutez la couleur d'arrière-plan suivante :

• Couleur de fond : #33345b

Mettre à jour l'arrière-plan et le remplissage de la colonne

Ensuite, ouvrez les paramètres de colonne et ajoutez la même image d'arrière-plan utilisée pour l'exemple précédent. Seulement cette fois, assurez-vous que la taille de l'image d'arrière-plan est définie sur Taille réelle :

• Image d'arrière-plan : taille réelle

Ensuite, mettez à jour les paramètres de colonne avec un nouveau remplissage comme suit :

• Rembourrage : 10 % en haut, 10 % en bas, 15 % à gauche, 15 % à droite

Mettre à jour l'image du module de texte d'image floue

Ensuite, ouvrez les paramètres du module de texte d'image floue et ajoutez la même image utilisée pour l'arrière-plan de la colonne en veillant à définir la taille de l'image d'arrière-plan à la taille réelle :

• Utiliser l'effet de parallaxe : NON
• Taille de l'image d'arrière-plan : taille réelle

Modifier la taille et l'emplacement de la position des modules d'image floue et de texte superposé

Pour créer l'espacement nécessaire autour du module de texte d'image floue d'arrière-plan et du module de texte de superposition, utilisez la multisélection pour sélectionner les deux modules et mettez à jour les options de dimensionnement comme suit :

• Largeur: 80%
• Hauteur : 80 %

Ensuite, mettez à jour l'emplacement de la position absolue au centre :

• Emplacement : centré

Voici le résultat final.

Créer plusieurs dispositions de colonnes avec des ajustements mineurs

Vous pouvez même dupliquer la colonne pour une mise en page à deux colonnes. Vous devrez ajuster la taille du texte de l'en-tête et le remplissage des colonnes pour vous assurer que l'arrière-plan givré se trouve derrière le contenu. Et vous pouvez changer les images d'arrière-plan utilisées pour la colonne et le module de texte d'image floue selon vos besoins.

Voici un exemple de la disposition à deux colonnes.

Résultat final

Voici le résultat final de tous les exemples.

Dernières pensées

Dans ce tutoriel, nous vous avons montré trois méthodes pour créer des motifs de fond dépoli dans Divi. Certains d'entre vous trouveront peut-être plus facile de personnaliser d'abord les images dans Photoshop pour ce genre de chose. Mais avec Divi, ce n'est pas nécessaire. La première méthode tire parti de la propriété CSS background-filter et est de loin la solution la plus simple et la plus puissante. Mais jusqu'à ce que cette propriété soit adoptée par tous les navigateurs, vous pouvez utiliser les deux autres méthodes de ce tutoriel qui utilisent le constructeur Divi. Dans l'ensemble, l'effet de fond givré peut vraiment être incroyable.

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

À votre santé!