Comment créer un effet de défilement d'arrière-plan à double couche avec Divi

Si vous cherchez un moyen de faire ressortir votre site Web, vous voudrez peut-être apprendre à créer des arrière-plans à double couche. La création d'arrière-plans à double couche vous aidera à donner vie à votre image d'arrière-plan grâce au mouvement. Dans le tutoriel d'aujourd'hui, nous allons vous montrer comment créer un design d'arrière-plan double couche avec Divi. Ce tutoriel contient trois parties :

1. Préparation de deux fichiers image dans Adobe Photoshop
2. Création du design dans Divi
3. Application des effets de défilement pour animer l'arrière-plan

Vous pourrez également télécharger gratuitement les fichiers JSON et 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.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la 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 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 !

1. Créez des fichiers image dans Photoshop

Choisissez l'image du produit avec un arrière-plan propre et ouvrez-la dans Photoshop

Dans la première partie de ce tutoriel, nous allons créer les fichiers images que nous utiliserons tout au long du tutoriel Divi. Pour les créer, nous utiliserons Adobe Photoshop, mais n'hésitez pas à utiliser tout autre logiciel de retouche d'image de votre choix. L'effet d'image d'arrière-plan à double couche fonctionnera mieux si l'image avec laquelle vous travaillez a :

1. Une mise au point claire sur un objet à l'intérieur de l'image
2. Un fond propre

L'image ci-dessous est un parfait exemple. Vous pouvez trouver ce fichier image dans le dossier zippé partagé dans la zone de téléchargement de cet article.

Dupliquer le calque

Une fois que vous avez ouvert l'image dans Photoshop, clonez une fois le calque d'origine. Nous allons travailler sur le calque dupliqué.

Masquer le calque d'origine

Pour vous assurer de voir le résultat au fur et à mesure que nous avançons dans le didacticiel, masquez le calque d'origine.

Créer un PNG à partir de la sélection d'objets dans l'image

Utiliser l'outil de sélection rapide sur la plaque

Au total, nous aurons besoin de deux fichiers image pour le tutoriel :

1. un PNG de l'objet, en l'occurrence la plaque
2. un JPEG de l'arrière-plan sans l'objet

Nous séparons l'objet de son arrière-plan, afin de pouvoir les manipuler individuellement une fois dans l'environnement Divi.

Pour commencer à sélectionner l'objet, choisissez « l'outil de sélection rapide » dans la barre d'outils et essayez de couvrir le plus possible l'objet.

Sélectionner + Masquer la sélection

Vous remarquerez que la sélection d'objets n'est toujours pas assez bonne. Vous pouvez affiner l'apparence de votre sélection en utilisant l'option "Sélectionner et masquer" lorsque vous cliquez avec le bouton droit sur la sélection. Une fois là-bas, vous pouvez jouer avec l'opacité, la douceur, etc.

Créer un masque de calque à partir de la sélection

Bien que nous ayons créé une sélection fluide, il y a encore des parties à l'intérieur de l'objet qui ne sont pas encore sélectionnées. Nous ajouterons manuellement ces pièces à notre sélection en cliquant sur le bouton de masque de calque que vous pouvez voir dans l'écran d'impression ci-dessous :

Finetune Selection Inside Mask avec des pinceaux

Une fois votre masque de calque créé, vous pouvez commencer à utiliser un pinceau pour modifier le masque de calque. Assurez-vous que votre masque de calque est sélectionné.

• L'utilisation d'un pinceau noir (#000) supprimera des parties de votre masque de calque
• L'utilisation d'un pinceau blanc (#fff) ajoutera des parties arrière de votre masque de calque

Utilisez un pinceau qui n'a pas trop de dureté, vous n'avez donc pas besoin d'être très précis.

Masque à double contrôle avec calque coloré

Vous pouvez toujours vérifier votre masque de calque en plaçant un calque de couleur en dessous. Les couches colorées le trahiront plus facilement si vous avez manqué un endroit.

Enregistrer la sélection PNG en tant que fichier image séparé

Créer un nouveau fichier

Maintenant que vous avez la sélection PNG de votre objet, vous pouvez cloner l'intégralité du calque afin de pouvoir toujours y revenir. Dans la partie suivante, nous utiliserons le calque dupliqué pour créer l'image d'arrière-plan sans l'objet.

La taille de notre objet est bien plus petite que la taille initiale du fichier, nous allons donc créer un nouveau fichier pour notre objet et l'importer.

Ajuster la sélection dans un nouveau fichier

Copiez-collez le calque avec son masque de calque dans le nouveau fichier que vous avez créé.

Exporter pour le Web

Et exportez-le pour le Web au format PNG.

Compresser le fichier image

Les fichiers PNG avec des arrière-plans transparents ont tendance à avoir une taille de fichier plus importante, il est donc recommandé de compresser le fichier à l'aide d'un outil de votre choix.

Supprimer l'objet dans l'image d'origine

Sélectionnez le masque de calque

Retour au fichier Photoshop initial ! Là, nous allons créer l'image de fond sans l'objet. Nous utilisons la couche supérieure à l'intérieur de notre fichier pour le faire. Tout d'abord, assurez-vous que votre masque de calque est sélectionné.

Inverser le masque

Ensuite, allez dans les propriétés de ce calque et cliquez sur « Inverser ».

Appliquer un masque de calque

Vous remarquerez maintenant que l'objet est transparent à l'intérieur du calque initial. Nous allons appliquer le masque de calque à notre calque en cliquant avec le bouton droit et en sélectionnant "Appliquer le masque de calque".

Remplir l'espace vide à l'aide de l'outil de clonage

Nous avons encore un trou au milieu, que nous devons combler. C'est là que l'outil de clonage est utile. Sélectionnez une taille de pinceau de votre choix et remplissez l'image. Vous n'avez pas besoin d'être très précis avec cela, dans le tutoriel Divi, nous allons placer l'objet par-dessus.

Enregistrer l'image sans objet

Exporter pour le Web

Une fois que vous avez terminé l'image d'arrière-plan sans l'objet, vous pouvez l'enregistrer en tant que fichier JPEG avec une qualité de 70 %.

Compresser le fichier image

Assurez-vous également de compresser cette image.

2. Créez un effet de fond à double couche dans Divi

Ajouter une nouvelle section

Télécharger l'image d'arrière-plan

Une fois que vous avez les deux fichiers images à portée de main, il est temps de passer à Divi ! Ouvrez une nouvelle page et ajoutez une nouvelle section. Téléchargez l'image d'arrière-plan que vous avez créée dans la première partie du didacticiel.

Espacement

Passez à l'onglet de conception de la section et appliquez des valeurs d'espacement personnalisées. La marge inférieure que nous ajoutons nous aidera à voir l'effet se mettre en place. Normalement, cette marge sera remplacée par les sections suivantes de votre conception.

• Marge inférieure : 100vh
• Rembourrage supérieur :
  • Bureau : 100 pixels
  • Tablette et téléphone : 50px
• Rembourrage inférieur :
  • Bureau : 100 pixels
  • Tablette : 600px
  • Téléphone : 500px

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la largeur et la largeur maximale. Ces paramètres permettront à la rangée de toucher les côtés gauche et droit du conteneur de sections à tout moment. De cette façon, nous pouvons nous assurer que les images PNG et d'arrière-plan ont le même équilibre sur toutes les tailles d'écran.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Accédez ensuite aux paramètres d'espacement de la ligne et supprimez tous les rembourrages supérieurs et inférieurs par défaut.

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

Position

Ensuite, repositionnez toute la rangée.

• Position : Absolu
• Emplacement:
  • Bureau : Centre
  • Tablette et téléphone : bas au centre
• Décalage vertical :
  • Bureau : /
  • Tablette et téléphone : 30 vh

Ajouter un module d'image à la ligne

Télécharger une image PNG

Une fois que vous avez terminé les paramètres de ligne, ajoutez un module Image à la ligne et téléchargez le fichier PNG que vous avez créé dans la première partie du didacticiel.

Alignement

Passez à l'onglet Conception et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur:
  • Ordinateur de bureau : 36 %
  • Tablette et téléphone : 60 %

Ajouter la ligne n° 2

Structure des colonnes

Ensuite, ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #ffffff

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur: 90%
• Largeur maximale : 550px
• Alignement des lignes :
  • Bureau : Gauche
  • Tablette et téléphone : Centre

Espacement

Ensuite, appliquez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 11%
• Rembourrage inférieur : 11%
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Décalage horizontal

Nous ajoutons également un décalage horizontal aux paramètres de position.

• Décalage horizontal :
  • Ordinateur de bureau : 5 %
  • Tablette et téléphone : 0%

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un premier module de texte contenant du contenu H2.

Paramètres de texte H2

Stylisez le texte H2 comme suit :

• Police de titre 2 : Kumbh Sans
• Titre 2 Taille du texte :
  • Bureau : 90px
  • Tablette : 60px
  • Téléphone : 45 pixels

Ajouter le module de texte n° 2 à la colonne 1

Ajouter un contenu de description

Ajoutez un autre module de texte juste en dessous du précédent et insérez le contenu de description de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence :

• Police du texte : Kumbh Sans
• Hauteur de la ligne de texte : 2 em

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le dernier module dont nous avons besoin dans cette colonne est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20px
• Couleur du texte du bouton : #6b6443
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Kumbh Sans
• Poids de la police du bouton : gras
• Afficher l'icône du bouton : Oui
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : non

Boîte ombre

Incluez également une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 2px
• Couleur de l'ombre : #6b6443

3. Ajouter des effets de défilement

Mouvement vertical de l'image

Dans la dernière partie de ce didacticiel, nous nous concentrerons sur l'ajout des effets de défilement au module Image contenant le fichier image PNG. Ouvrez les paramètres du module, accédez à l'onglet avancé et appliquez les paramètres de mouvement vertical suivants :

• Activer le mouvement vertical : Oui
• Décalage de départ :
  • Bureau : 0
  • Tablette & Téléphone : 4 (à 0%)
• Décalage moyen :
  • Bureau : 0
  • Tablette et téléphone : 0 (à 97 %)
• Décalage de fin :
  • Bureau : 0
  • Tablette & Téléphone : -2 (à 100%)

Mouvement horizontal de l'image

Nous terminons notre conception en utilisant les paramètres de mouvement horizontal suivants :

• Activer le mouvement horizontal : Oui
• Décalage de départ :
  • Bureau : 0 (à 0%)
  • Tablette et téléphone : 0
• Décalage moyen :
  • Ordinateur de bureau : 0 (à 65 %)
  • Tablette et téléphone : 0 (à 97 %)
• Décalage de fin :
  • Bureau : -10 (à 100 %)
  • Tablette et téléphone : 0

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 créer un arrière-plan à double couche et l'animer avec les effets de défilement intégrés de Divi. Dans la première partie du didacticiel, nous avons préparé les fichiers image dans Adobe Photoshop. Dans la deuxième partie du didacticiel, nous nous sommes concentrés sur l'utilisation des fichiers image dans Divi pour créer un design réactif. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, 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.