Comment utiliser les arrière-plans dégradés comme masques d'image d'arrière-plan avec Divi

Si vous êtes familiarisé avec les logiciels de retouche d'images, tels que Photoshop, vous connaissez probablement aussi les masques. Les masques vous aident à réunir deux couches et à créer un résultat unique. Avec Divi, vous pouvez faire preuve de créativité et créer votre propre type de masques à l'intérieur de vos pages en utilisant des arrière-plans dégradés en combinaison avec des images d'arrière-plan. Dans ce didacticiel, nous allons vous montrer étape par étape comment créer 8 masques d'arrière-plan différents pour tout type de conception sur laquelle vous travaillez. Ce didacticiel vous aidera à apporter des modifications rapides à la conception de vos pages sans avoir à toucher à aucun logiciel de retouche d'image.

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.

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Espacement

Ajoutez une nouvelle section à votre page, ouvrez les paramètres de la section et ajoutez un rembourrage haut et bas personnalisé.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter le module Blurb à #1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Nous aurons besoin de 8 modules Blurb au total. Nous allons commencer par le premier, apporter les modifications générales et le cloner 7 fois par la suite avant d'apporter des modifications uniques à chaque module Blurb. Ajoutez un nouveau module Blurb à la première colonne et ajoutez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez ensuite les paramètres de texte.

• Orientation du texte : Centre
• Couleur du texte : foncé

Paramètres du texte du titre

Ouvrez également les paramètres du texte du titre et modifiez les choses.

• Police du titre : Antic Didone
• Taille du texte du titre : 23 px
• Hauteur de la ligne de titre : 1,5 em

Boîte ombre

Enfin, ajoutez également une ombre de boîte subtile au module Blurb.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner le module Blurb 7 fois et placer 4 doublons dans la deuxième colonne

Une fois que vous avez effectué toutes les modifications générales, vous pouvez continuer et cloner le module Blurb 7 fois. Placez quatre des doublons dans la deuxième colonne de la ligne et laissez-en trois dans la première.

Modifier le module de présentation n° 1

Fond dégradé

Nous pouvons maintenant commencer à ajouter des paramètres uniques à chacun des modules Blurb. Ouvrez le premier module Blurb dans la colonne 1 et ajoutez-y un arrière-plan dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 45 %
• Position finale : 45 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Une fois que vous avez ajouté l'arrière-plan dégradé, vous pouvez également ajouter l'image d'arrière-plan et la combiner avec les paramètres d'arrière-plan suivants :

• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Enfin, ajoutez un rembourrage personnalisé pour que tout se mette en place.

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

Modifier le module de présentation #2

Fond dégradé

Passons au module Blurb suivant (le premier module de la deuxième colonne) et ajoutons un arrière-plan dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : en haut à droite
• Position de départ : 45 %
• Position finale : 45 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Continuez en ajoutant une image d'arrière-plan combinée aux paramètres d'arrière-plan ci-dessous.

• Position de l'image d'arrière-plan : en haut à droite
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et terminez la conception en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 350px
• Rembourrage inférieur : 100px
• Remplissage gauche : 50px
• Rembourrage droit : 200 px (ordinateur de bureau et tablette), 50 px (téléphone)

Modifier le module de présentation n° 3

Fond dégradé

Passons au troisième module de présentation (le deuxième module de présentation dans la première colonne). Ouvrez les paramètres et ajoutez un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : en haut à gauche
• Position de départ : 45 %
• Position finale : 45 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Continuez en ajoutant une image de fond ensuite.

• Position de l'image d'arrière-plan : en haut à gauche
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et ajoutez un rembourrage personnalisé au module pour qu'il prenne sa forme.

• Rembourrage supérieur : 350px
• Rembourrage inférieur : 100px
• Rembourrage gauche : 200 px (ordinateur de bureau et tablette), 50 px (téléphone)
• Rembourrage droit : 50 px

Modifier le module de présentation n° 4

Fond dégradé

Passons au deuxième module dans la deuxième colonne ! Ouvrez les paramètres du module Blurb et ajoutez un arrière-plan dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 45 %
• Position finale : 45 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Continuez en ajoutant une image de fond ensuite.

• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et terminez la conception en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

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

Modifier le module de présentation #5

Fond dégradé

Passons au module suivant, qui est le troisième module de la première colonne. Ouvrez le module et ajoutez un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Gauche
• Position de départ : 35 %
• Position finale : 35 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Continuez en ajoutant une image d'arrière-plan en combinaison avec les paramètres d'arrière-plan suivants :

• Position de l'image d'arrière-plan : en haut à gauche
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et ajoutez également des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px
• Rembourrage gauche : 240 px (ordinateur de bureau et tablette), 150 px (téléphone)
• Rembourrage droit : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)

Modifier le module de présentation n°6

Fond dégradé

Passons au troisième module de la deuxième colonne ! Ouvrez les paramètres et ajoutez un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Direction du gradient : 140 degrés
• Position de départ : 60 %
• Position finale : 60 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Ajoutez ensuite une image d'arrière-plan avec les paramètres d'arrière-plan correspondants.

• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et complétez la conception en utilisant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 350px
• Remplissage gauche : 50px
• Rembourrage droit : 200 pixels (ordinateur de bureau et tablette), 50 pixels (tablette)

Modifier le module de présentation n°7

Fond dégradé

Le module Blurb suivant dans la colonne 1 utilise l'arrière-plan dégradé suivant :

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Direction du gradient: 220deg
• Position de départ : 60 %
• Position finale : 60 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Ajoutez également une image de fond.

• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et ajoutez les valeurs de remplissage personnalisées nécessaires dans les paramètres d'espacement.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 350px
• Rembourrage gauche : 200 px (ordinateur de bureau et tablette), 50 px (téléphone)
• Rembourrage droit : 50 px

Modifier le module de présentation n°8

Fond dégradé

Passons au dernier module Blurb ! Ouvrez les paramètres et ajoutez un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Droite
• Position de départ : 35 %
• Position finale : 35 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Téléchargez ensuite l'image d'arrière-plan.

• Position de l'image d'arrière-plan : en haut à gauche
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Et terminez la conception et le didacticiel en ajoutant un rembourrage personnalisé aux paramètres d'espacement du module.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px
• Rembourrage gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)
• Rembourrage droit : 240 px (ordinateur de bureau et tablette), 170 px (téléphone)

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.

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment faire preuve de créativité avec les options intégrées de Divi. Plus précisément, nous avons utilisé des arrière-plans radiaux et des images d'arrière-plan pour créer des masques d'arrière-plan. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!