Utilisation des arrière-plans de module pour afficher des images de parallaxe en ligne avec Divi

L'utilisation d'arrière-plans de parallaxe en ligne CSS peut vraiment aider à améliorer l'apparence de votre site Web et ce didacticiel en est l'exemple parfait. Nous utiliserons plusieurs arrière-plans de modules pour créer un résultat étonnant et cohérent qui montre plusieurs parties de votre image d'arrière-plan. Vous pourrez également télécharger le fichier JSON gratuitement !

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 de parallaxe en ligne GRATUITEMENT

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

Commençons à recréer

Ajouter une nouvelle section

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Ajouter une nouvelle ligne

Structure des colonnes

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

Paramètres de la colonne 1

Espacement

Ajoutez une valeur de remplissage supérieure à la première colonne.

• Rembourrage supérieur :
  • Ordinateur de bureau : 2vw
  • Tablette + Téléphone : 6vw

Paramètres de la colonne 2

Espacement

Ajoutez également une valeur de remplissage supérieure à la deuxième colonne.

• Rembourrage supérieur :
  • Ordinateur de bureau : 4vw
  • Tablette + Téléphone : 6vw

Colonne 4 Paramètres

Espacement

Ignorez la colonne 3 et ajoutez des valeurs d'espacement à la colonne 4.

• Rembourrage supérieur
  • Ordinateur de bureau : 19vw
  • Tablette : 0vw
  • Téléphone : 1vw
• Rembourrage gauche et droit
  • Ordinateur de bureau et tablette : 1vw
  • Téléphone : 0vw

Ajouter le 1er module de texte à la colonne 1

Ajouter du contenu H2

Maintenant, ajoutez le premier module de texte à la colonne 1. Insérez du contenu H2 de votre choix.

Texte d'en-tête

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Niveau du texte de l'en-tête : H2
• Police H2 : EB Garamond
• Style de police H2 : TT
• Couleur du texte H2 : noir #oooooo
• Taille du texte H2 :
  • Ordinateur de bureau : 3.1vw
  • Tablette : 5.4vw
  • Téléphone : 10vw
• Hauteur de la ligne H2 :
  • Desktop + Tablette : 1.1em
  • Téléphone : 1.3em

Espacement

Ensuite, ajoutez un peu d'espacement au module.

• Rembourrage supérieur :
  • Ordinateur de bureau : 4vw
  • Tablette + Téléphone : 0vw
• Rembourrage gauche :
  • Ordinateur de bureau et tablette : 1vw
  • Téléphone : 2vw
• Rembourrage droit
  • Ordinateur de bureau et tablette : 1vw
  • Téléphone : 0vw

Ajouter le 2e module de texte à la colonne 1

Ajouter du contenu

Maintenant, ajoutez un deuxième module de texte sous le premier. Insérez du contenu de paragraphe.

Texte

Passez à l'onglet Conception et modifiez les paramètres de texte comme suit :

• Police du texte : EB Garamond
• Couleur du texte : gris foncé #3d3d3d
• Taille du texte:
  • Ordinateur de bureau : 1vw
  • Tablette : 2.2vw
  • Téléphone : 3.8vw
• Hauteur de la ligne de texte : 1,8 em

Espacement

Ajustez ensuite les paramètres d'espacement du module.

• Rembourrage inférieur :
  • Téléphone : 4vw
• Rembourrage gauche :
  • Ordinateur de bureau + tablette : 1.4vw
• Rembourrage droit :
  • Ordinateur de bureau : 1.3vw
  • Tablette + Téléphone : 1.7vw

Ajouter un module de bouton à la colonne 1

Ajouter du contenu

Pour compléter la première colonne, ajoutez un module de boutons. Insérez une copie.

Ajouter un lien

Ajoutez également un lien au bouton.

Bouton

Passez à l'onglet Conception et stylisez les paramètres des boutons en conséquence :

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2vw
  • Téléphone : 4vw
• Couleur du texte du bouton : gris foncé #3d3d3d
• Largeur de la bordure du bouton : 1px
• Police des boutons : EB Garamond

Espacement

Ensuite, ajustez les paramètres d'espacement du bouton.

• Marge supérieure:
  • Ordinateur de bureau + tablette : 1vw
• Marge inférieure :
  • Téléphone : 5vw

Ajouter le 1er module de texte à la colonne 2

Ajouter du contenu

Passons à la colonne suivante ! Ajoutez un module de texte avec du contenu H4 de votre choix.

Fond

Continuez en ajoutant une image de fond. Téléchargez une image d'arrière-plan de parallaxe CSS pour le bureau et utilisez une image normale sur des écrans de plus petite taille (sans parallaxe CSS).

• Fond d'écran : image
  • Parallaxe : CSS
• Arrière-plan de la tablette + du téléphone : image

Survol en arrière-plan

Ensuite, ajoutez un arrière-plan dégradé au survol uniquement.

• Survol d'arrière-plan : Dégradé de couleur
• Dégradé de couleur 1 : jaune doré clair #edba63
• Dégradé de couleur 2 : jaune doré #ed9d12
• Direction du gradient : 23 degrés
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Texte d'en-tête

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

• Niveau d'en-tête de texte : H4
• Police H4 : EB Garamond
• Couleur du texte H4 : Blanc #ffffff
• Taille du texte H4 :
  • Ordinateur de bureau : 2.3vw
  • Tablette : 4.5vw
  • Téléphone : 8.5vw

Espacement

Ensuite, ajustez l'espacement.

• Marge supérieure:
  • Téléphone : -6vw
• Rembourrage supérieur :
  • Ordinateur de bureau : 15vw
  • Tablette : 22vw
  • Téléphone : 43vw
• Rembourrage inférieur :
  • Ordinateur de bureau + tablette : 1vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau et tablette : 1.5vw
  • Téléphone : 5vw

Frontière

Continuez en stylisant les bordures.

• Coins arrondis : 1vw tous les coins
• Styles de bordure : tous les côtés
• Largeur de la bordure : 0.3vw
• Couleur de la bordure : Blanc #ffffff

Survol de l'échelle de transformation

Complétez les paramètres du module en ajoutant un effet de zoom au survol.

• Échelle de transformation au survol : 102 %

Ajouter le 2e module de texte à la colonne 2

Ajouter du contenu

Ajoutez un deuxième module à la deuxième colonne avec du contenu H4 de votre choix.

Fond

Tout comme le module de texte précédent, ajoutez une image d'arrière-plan de parallaxe CSS sur le bureau et une image d'arrière-plan régulière sur des écrans de plus petite taille.

• Fond d'écran : image
  • Parallaxe : CSS
• Arrière-plan de la tablette + du téléphone : image

Survol en arrière-plan

Ajoutez également un arrière-plan dégradé de survol.

• Survol d'arrière-plan : Dégradé de couleur
• Dégradé de couleur 1 : magenta clair #91463f
• Dégradé de couleur 2 : magenta #910400
• Direction du gradient : 23 degrés
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Texte d'en-tête

Stylisez ensuite les paramètres de texte H4.

• Niveau d'en-tête de texte : H4
• Police H4 : EB Garamond
• Couleur du texte H4 : Blanc #ffffff
• Taille du texte H4 :
  • Ordinateur de bureau : 2.3vw
  • Tablette : 4.5vw
  • Téléphone : 8.5vw

Espacement

Et modifiez les paramètres d'espacement.

• Rembourrage supérieur :
  • Ordinateur de bureau : 15vw
  • Tablette : 21,1 vw
  • Téléphone : 43vw
• Rembourrage inférieur :
  • Ordinateur de bureau + tablette : 1vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau et tablette : 1.5vw
  • Téléphone : 5vw

Frontière

Modifiez également les paramètres de bordure.

• Coins arrondis : 1vw tous les coins
• Styles de bordure : tous les côtés
• Largeur de la bordure : 0.3vw
• Couleur de la bordure : Blanc #ffffff

Survol de l'échelle de transformation

Enfin, ajoutez un effet de zoom au module de texte.

• Échelle de transformation au survol : 102 %

Modules de texte en double de la colonne 2 à la colonne 3

Dupliquer et faire glisser des modules de texte

Clonez les deux modules de texte et placez-les dans la troisième colonne de la ligne.

Ajustez le 1er module de texte dans la colonne 3

Modifier le contenu H4

Ouvrez le premier module de texte en double dans la colonne 3 et modifiez le contenu.

Changer l'arrière-plan pour la tablette et le téléphone

Modifiez ensuite l'image d'arrière-plan sur des écrans plus petits.

Changer le dégradé de couleur au survol

Continuez en changeant les couleurs dans le survol du dégradé.

• Dégradé de couleur 1 : rose rose #cc9293
• Dégradé de couleur 2 : rose #cc9293

Espacement

Enfin, ajustez l'espacement comme suit.

• Marge supérieure:
  • Tablette : -6.4vw
  • Téléphone : 0vw

Ajustez le 2e module de texte dans la colonne 3

Modifier le contenu H4

Tout d'abord, modifiez le contenu.

Changer l'arrière-plan pour la tablette et le téléphone

Ensuite, modifiez l'image d'arrière-plan sur des tailles d'écran plus petites.

Changer le dégradé de couleur au survol

Modifiez également le fond dégradé.

• Dégradé de couleur 1 : pin tendre #5c755c
• Dégradé de couleur 2 : vert pin #4D754D

Ajouter le 1er module de texte à la colonne 4

Ajouter du contenu

En passant à la colonne 4, ajoutez un module de texte. Insérez du contenu H3 de votre choix.

Texte d'en-tête

Passez à l'onglet Conception et modifiez les paramètres de texte H3 comme suit :

• Niveau du texte de l'en-tête : H3
• Police du texte H3 : EB Garamond
• Style de police H3 : TT
• Couleur du texte H3 : noir #oooooo
• Taille du texte H3 :
  • Ordinateur de bureau : 3vw
  • Tablette : 5vw
  • Téléphone : 12vw
• Hauteur de ligne H3
  • Desktop + Tablette : 1em
  • Téléphone : 1.1em

Ajouter le 2e module de texte à la colonne 4

Ajouter du contenu

Ajoutez un autre module de texte sous le premier. Insérez du contenu de paragraphe.

Texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : EB Garamond
• Couleur du texte : gris foncé #3d3d3d
• Taille du texte:
  • Ordinateur de bureau : 1vw
  • Tablette : 2.2vw
  • Téléphone : 3.8vw
• Hauteur de la ligne de texte : 1,8 em

Espacement

Ensuite, ajustez l'espacement.

• Rembourrage inférieur :
  • Téléphone : 4vw
• Rembourrage gauche : 0.9vw
• Rembourrage droit : 2.2vw

Dupliquer le module de bouton de la colonne 1 à la colonne 4

Dupliquez et faites glisser le module de boutons

• Dupliquez le module de boutons dans la colonne 1.
• Faites-le glisser vers la colonne 3 sous les modules de texte.

Espacement

Ajustez quelques valeurs d'espacement dans le module de bouton dupliqué et vous avez terminé !

• Marge inférieure : 0vw
• Marge de gauche:
  • Ordinateur de bureau + tablette : 0.7vw
  • Téléphone : 0.9vw

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

Conclusion

Dans cet article, nous vous avons montré comment créer une conception de parallaxe en ligne avec quatre zones de texte qui montrent une partie différente de la même image. Nous espérons que vous apprécierez ce design et si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous !