5 superpositions de masques et de motifs d'arrière-plan que vous pouvez appliquer à votre image d'arrière-plan

Publié: 2022-08-08

Avec la dernière version de la fonctionnalité de masque d'arrière-plan et de motif d'arrière-plan de Divi, vous pouvez créer des sections de héros uniques pour votre site Web. Une section héros est la première section de votre site Web et c'est la première chose que vos visiteurs voient avant de faire défiler votre site Web, il est donc important d'être accrocheur ! La combinaison des options d'image d'arrière-plan, de masque d'arrière-plan et de motif d'arrière-plan de Divi nous permet de créer des sections de héros convaincantes afin que votre site Web fasse une excellente première impression.

Cet article vous montrera comment créer cinq masques d'arrière-plan uniques et des superpositions de motifs que vous pouvez appliquer à une image d'arrière-plan pour créer des sections de héros vraiment époustouflantes. Ce didacticiel couvrira les étapes essentielles nécessaires à la création de chaque section de héros et vous donnera les outils dont vous avez besoin pour créer une section de héros saisissante pour votre site Web en quelques minutes.

Nous utiliserons des photos gratuites du pack de mise en page de cours en ligne dans cet exemple. Pour utiliser les mêmes images, faites défiler jusqu'en bas de cet article pour télécharger les images en pleine résolution.

Commençons!

Ce que nous créons

Voici un bref aperçu des cinq sections de héros que nous allons créer dans cet article aujourd'hui.

Les designs sont subtils, simples et pourtant percutants.

Téléchargez la mise en page GRATUITEMENT

Si vous souhaitez télécharger le modèle de mise en page préconçu à partir de ce didacticiel, vous devez d'abord le télécharger à l'aide du 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis ! 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éabonné" ou ne recevrez pas 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 de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous 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.

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 !

Comment télécharger et utiliser les mises en page

Pour importer la mise en page de la section dans votre bibliothèque Divi, procédez comme suit :

Accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer en haut de la page.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation.
Choisissez le fichier de téléchargement sur votre ordinateur (assurez-vous d'abord de décompresser le fichier et d'utiliser le fichier JSON).
Cliquez ensuite sur le bouton d'importation.

Une fois que vous avez importé avec succès les mises en page, elles seront visibles dans votre bibliothèque Divi et pourront être utilisées dans Divi Builder.

Passons maintenant au tutoriel !

Ce dont vous avez besoin pour commencer

Avant de commencer, vous devez :

Installez et activez le thème Divi.
Créez une nouvelle page, publiez-la et cliquez sur le bouton "Utiliser le Divi Builder" pour modifier la page sur le front-end à l'aide du Visual Builder.
Choisissez l'option "Construire à partir de zéro".

Nous avons maintenant une toile vierge pour commencer à concevoir !

Comment créer 5 superpositions de masques et de motifs d'arrière-plan à appliquer à une image d'arrière-plan

Tout d'abord, créons la section Héros

Tous nos exemples de conception utilisent la même structure de section, de ligne et de colonne, alors configurons-les maintenant.

1. Créer une structure de mise en page

Ajoutez une ligne à votre page, puis cliquez sur l'icône verte "+" pour afficher la structure des colonnes et sélectionnez la première colonne, la colonne pleine largeur.

2. Ajouter un espacement de section

Maintenant que nous avons défini notre ligne et notre colonne, il est temps d'ajouter un espacement à la section.

Sous l'onglet Espacement, mettez à jour les éléments suivants :

Bureau : 400 pixels en haut et 400 pixels en bas
Tablette : 200 pixels en haut et 200 pixels en bas ; 25px gauche et droite
Téléphone : 50 pixels en haut et 50 pixels en bas ; 25px gauche et droite

Comment concevoir la section Héros #1

Concevons la première section de héros.

1. Ajouter du texte d'en-tête

Cliquez sur l'icône grise "+" pour faire apparaître la bibliothèque de modules. Faites défiler jusqu'au texte et cliquez pour charger.

Saisissez le texte du titre, puis sous l'onglet Texte du titre, configurez ces paramètres :

Famille de polices : Work Sans
Couleur de la police : Blanc #ffffff
Taille de police:
- Bureau : 3 rem
- Tablette : 2,2 rem
- Téléphone : 1.4rem

2. Ajouter un module de bouton

Ajoutez un bouton et configurez ces paramètres :

Sous le type d'onglet Texte : En savoir plus
Sous l'onglet Alignement, choisissez : Centrer
Cliquez sur Utiliser des styles personnalisés puis configurez :
- Taille du texte du bouton :
  - Bureau : 20 px
  - Tablette : 16px
  - Téléphone : 14px
- Couleur du texte du bouton : Blanc #ffffff
- Couleur de fond des boutons : Noir #1d1d1d
- Largeur de la bordure du bouton : 0
- Rayon de la bordure du bouton : 0
- Espacement des lettres des boutons : 3 points
- Police des boutons : Work Sans
- Style de police des boutons : majuscules

3. Ajouter une image d'arrière-plan

Maintenant que notre contenu est configuré, il est temps de commencer à concevoir l'arrière-plan de la section.

Accédez à la bascule d'arrière-plan et cliquez sur le 3ème onglet, l'onglet image, puis cliquez sur "Ajouter une image d'arrière-plan".
Cela fera apparaître votre médiathèque, où vous pourrez sélectionner une photo ou en télécharger une nouvelle.
Une fois votre photo sélectionnée, cliquez sur le bouton "Télécharger une image" dans le coin inférieur droit.

4. Ajouter un motif de fond

Maintenant que nous avons configuré notre image d'arrière-plan, ajoutons un motif.

Dans l'onglet Arrière-plan, accédez au 5ème onglet, l'onglet Motifs, puis cliquez sur "Ajouter un motif d'arrière-plan".
Sélectionnez Tufted dans le menu déroulant et configurez ces paramètres :
- Couleur du motif - rgba (255,255,255,0.31)
- Transformation de motif : aucune
- Taille du motif : taille réelle
- Origine de la répétition du motif : en haut à gauche
- Répétition de motif : répéter
- Mode de fusion : normal

5. Ajouter un masque d'arrière-plan

Maintenant que nous avons configuré notre image d'arrière-plan et notre motif, ajoutons un masque d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 6e onglet, l'onglet Masque, puis cliquez sur "Ajouter un masque d'arrière-plan".
Sélectionnez Bean dans le menu déroulant et configurez ces paramètres :
- Couleur du masque : rgba(0,0,0,0.36)
- Rapport d'aspect du masque : rectangle horizontal
- Taille du masque : Étirer pour remplir

Voilà! Vous avez maintenant une section héros magnifiquement conçue.

Comment concevoir la section Héros #2

Maintenant, concevons la deuxième section de héros.

1. Ajoutez une image d'arrière-plan et définissez le mode de fusion sur Superposition

Sélectionnez votre image d'arrière-plan, définissez le mode de fusion sur Superposition et ajoutez une couleur de superposition de rgba (10,10,10,0.64).

2. Ajouter un motif de fond

Maintenant que nous avons configuré l'image d'arrière-plan, ajoutons un motif d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 5e onglet, l'onglet Motifs, puis cliquez sur "Ajouter un motif d'arrière-plan".
Sélectionnez Tufted dans le menu déroulant et configurez ces paramètres :
- Couleur du motif - rgba (255,255,255,0.09)
- Transformation de motif : aucune
- Taille de motif: Couverture
- Origine de la répétition du motif : en haut à gauche
- Répétition de motif : répéter
- Mode de fusion : normal

3. Ajouter un masque d'arrière-plan

Maintenant que nous avons configuré notre image d'arrière-plan et notre motif, ajoutons un masque d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 6e onglet, l'onglet Masque, puis cliquez sur "Ajouter un masque d'arrière-plan".
Sélectionnez Caret dans le menu déroulant et configurez ces paramètres :
- Couleur du masque : rgba(0,0,0,0.36)
- Masque de transformation : Aucun
- Rapport d'aspect du masque : rectangle horizontal
- Taille du masque : Étirer pour remplir
- Mode de fusion du masque : Normal

Comment concevoir la section des héros #3

Maintenant, concevons la troisième section de héros.

1. Ajoutez une image d'arrière-plan et définissez le mode de fusion sur Superposition

Sélectionnez votre image d'arrière-plan, définissez le mode de fusion sur Superposition et ajoutez une couleur de superposition de rgba (10,10,10,0.39).

2. Ajouter un motif de fond

Maintenant que nous avons configuré notre image d'arrière-plan, ajoutons un motif d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 5e onglet, l'onglet Motifs, puis cliquez sur "Ajouter un motif d'arrière-plan".
Sélectionnez Diagonal Stripes 2 dans le menu déroulant et configurez ces paramètres :
- Couleur du motif - rgba (0,0,0,0.06)
- Transformation de motif : aucune
- Taille du motif : taille réelle
- Origine de la répétition du motif : en haut à gauche
- Répétition de motif : répéter
- Mode de fusion : normal

3. Ajouter un masque d'arrière-plan

Maintenant que nous avons ajouté une image d'arrière-plan et un motif, ajoutons un masque d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 6e onglet, l'onglet Masque, puis cliquez sur "Ajouter un masque d'arrière-plan".
Sélectionnez Triangles dans le menu déroulant et configurez ces paramètres :
- Couleur du masque : rgba (10, 10, 10, 0,61)
- Transformation de motif : aucune
- Rapport d'aspect du masque : rectangle horizontal
- Taille du masque : Étirer pour remplir
- Mode de fusion du masque : Normal

Comment concevoir la section Hero #4

Maintenant, concevons la quatrième section de héros.

1. Ajouter une image d'arrière-plan

Sélectionnez votre image de fond.

2. Ajouter un motif de fond

Maintenant que nous avons ajouté notre image d'arrière-plan, ajoutons un motif d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 5e onglet, l'onglet Motifs, puis cliquez sur "Ajouter un motif d'arrière-plan".
Sélectionnez Smiles dans le menu déroulant et configurez ces paramètres :
- Couleur du motif - rgba (0,0,0,0.2)
- Transformation de motif : aucune
- Taille de motif: Couverture
- Origine de la répétition du motif : en haut à gauche
- Répétition de motif : répéter
- Mode de fusion : normal

3. Ajouter un masque d'arrière-plan

Maintenant que notre image d'arrière-plan et notre motif sont appliqués, ajoutons un masque d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 6e onglet, l'onglet Masque, puis cliquez sur "Ajouter un masque d'arrière-plan".
Sélectionnez Corner Lake dans le menu déroulant et configurez ces paramètres :
- Couleur du masque : rgba (10, 10, 10, 0,61)
- Transformation de masque : horizontale
- Rapport d'aspect du masque : Rectangle horizontal
- Taille du masque : couverture
- Position du masque : centre gauche
- Mode de fusion du masque : Normal

3. Configurer les paramètres de ligne

Avant de partir, cette section de héros a des styles de ligne uniques. Mettons cela en place.

Dimensionnement :
- Largeur : 80 %
- Largeur maximale : 800 pixels
Alignement des lignes :
- Bureau : Par défaut
- Tablette : Centre
- Téléphone : Centre
Espacement:
- Gauche : 20vw

Comment concevoir la section Hero # 5

Maintenant, concevons la cinquième section de héros.

1. Ajouter une image d'arrière-plan

Sélectionnez votre image de fond.

2. Ajouter un motif de fond

Maintenant que nous avons configuré notre image d'arrière-plan, appliquons un motif d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 5e onglet, l'onglet Motifs, puis cliquez sur "Ajouter un motif d'arrière-plan".
Sélectionnez Croix dans le menu déroulant et configurez ces paramètres :
- Couleur du motif – #ffffff
- Transformation de motif : aucune
- Taille du motif : taille personnalisée
- Largeur du motif : 10 px
- Hauteur du motif : 10 px
- Origine de la répétition du motif : en haut à gauche
- Répétition de motif : répéter
- Mode de fusion : normal

3. Ajouter un masque d'arrière-plan

Maintenant que nous avons une image d'arrière-plan et un motif appliqués, ajoutons un masque d'arrière-plan.

Dans l'onglet Arrière-plan, accédez au 6e onglet, l'onglet Masque, puis cliquez sur "Ajouter un masque d'arrière-plan".
Sélectionnez Diagonal Pills dans le menu déroulant et configurez ces paramètres :
- Couleur du masque : rgba (10, 10, 10, 0,61)
- Transformation de masque : horizontale
- Rapport d'aspect du masque : Rectangle horizontal
- Taille du masque : couverture
- Position du masque : centre gauche
- Mode de fusion du masque : Normal

3. Configurer les paramètres de ligne

Avant de partir, cette section de héros a des styles de ligne uniques. Mettons cela en place.

Dimensionnement :
- Largeur : 80 %
- Largeur maximale : 800 pixels
Alignement des lignes :
- Bureau : Par défaut
- Tablette : Centre
- Téléphone : Centre
Espacement:
- Droite : 18vw

Obtenez plus de masques d'arrière-plan et de motifs !

Si vous voulez plus de modèles comme celui-ci, consultez ces 12 modèles de masques et de motifs de fond gratuits à télécharger.

Dernières pensées

Concevoir une section héros unique et accrocheuse pour votre site Web est facile avec les nouvelles options de masque d'arrière-plan et de motif de Divi. Chaque fonctionnalité comporte de nombreuses options qui vous permettent de créer des arrière-plans vraiment créatifs. De plus, vous pouvez ajouter des motifs d'arrière-plan et des masques à n'importe quel élément Divi Builder ! Les options de conception sont infinies.