Comment utiliser des modules d'image à positionnement absolu comme arrière-plans de parallaxe avec zoom arrière avec Divi

Lorsque vous utilisez une image d'arrière-plan dans votre section, il existe plusieurs façons de styliser cette image dès le départ. Vous pouvez utiliser des modes de fusion, des superpositions d'arrière-plan en dégradé et activer les effets de parallaxe. Désormais, avec les nouveaux effets de défilement de Divi, vous pouvez aller plus loin dans l'animation et combiner magnifiquement un effet de zoom arrière avec l'effet de parallaxe pour augmenter un autre type de votre dimension dans votre conception Web. Pour ce faire, nous utiliserons des modules d'image positionnés en absolu et l'unité de largeur de la fenêtre. Dans ce didacticiel, nous vous guiderons tout au long du processus en recréant une belle conception CTA d'étude de cas que vous pourrez également télécharger 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 GRATUITEMENT la disposition des modules d'images à positionnement absolu

Pour mettre la main sur la mise en page gratuite des modules d'images en position absolue, vous devez 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 !

Commençons à recréer !

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

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

Dimensionnement

Passez à l'onglet de conception de la section et modifiez la largeur dans les paramètres de dimensionnement.

• Largeur : 95%
• Alignement de la section : Centre

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Marge supérieure : 5 %
• Marge inférieure : 5 %
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Débordements

Et assurez-vous de masquer les débordements de la section. Il s'agit d'une étape importante pour faire fonctionner le didacticiel. En masquant les débordements, nous nous assurerons que rien ne dépasse le conteneur de section.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H2

Ensuite, ajoutez un premier module de texte avec du contenu H2 de votre choix.

Paramètres de texte H2

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

• Police du titre 2 : Lato
• Titre 2 Épaisseur de la police : Léger
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 4vw (ordinateur de bureau), 8vw (tablette et téléphone)
• En-tête 2 Espacement des lettres : 1px

Espacement

Nous ajouterons également des valeurs d'espacement personnalisées.

• Marge supérieure : 25vw (ordinateur de bureau), 50vw (tablette et téléphone)
• Marge de gauche : 5 %
• Marge de droite : 5 %

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Le prochain module dont nous avons besoin est un autre module de texte. Ajoutez du contenu de description de votre choix.

Paramètres de texte

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

• Police du texte : Lato
• Couleur du texte : #ffffff
• Taille du texte : 0.8vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Hauteur de la ligne de texte : 2,1 em

Dimensionnement

Modifiez ensuite la largeur sur différentes tailles d'écran.

• Largeur : 800 px (ordinateur de bureau), 80 % (tablette), 90 % (téléphone)

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de marge personnalisées aux paramètres d'espacement.

• Marge supérieure : 2%
• Marge inférieure : 2%
• Marge de gauche : 5 %
• Marge de droite : 5 %

Ajouter un module de bouton à la colonne

Ajouter une copie

Passons au module suivant, qui est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Ensuite, passez à l'onglet Conception et stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1.5vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Dégradé de couleur 1 : rgba(255,255,255,0)
• Dégradé de couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Position de départ : 98 %
• Position finale : 98 %

• Largeur de la bordure du bouton : 0px
• Police des boutons : Lato
• Poids de la police du bouton : lourd
• 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

Espacement

Nous utilisons également des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge inférieure : 7vw (ordinateur de bureau), 20vw (tablette), 25vw (téléphone)
• Marge de gauche : 5 %
• Marge de droite : 5 %

Ajouter un module d'image en haut de la colonne

Une fois que vous avez terminé les trois premiers modules de la colonne de votre ligne, il est temps d'ajouter le module d'image en position absolue et de l'utiliser comme image d'arrière-plan de zoom arrière. La première étape consiste à ajouter un nouveau module Image en haut de votre colonne.

Laisser la zone d'image vide

Laissez la zone d'image vide.

Image de fond

Et utilisez plutôt une image d'arrière-plan de parallaxe. Vous pouvez utiliser n'importe quelle image, mais si vous souhaitez recréer exactement le même résultat, vous pouvez trouver les images utilisées dans ce didacticiel en téléchargeant le dossier au début de ce didacticiel.

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

Dimensionnement

Passez à l'onglet conception du module et forcez la pleine largeur.

• Forcer la pleine largeur : Oui

Espacement

Ajoutez également des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 27vw (ordinateur de bureau), 54vw (tablette), 68vw (téléphone)
• Rembourrage inférieur : 27vw (ordinateur de bureau), 54vw (tablette), 68vw (téléphone)

Position

Maintenant, pour nous assurer que le module n'occupe pas d'espace conteneur dans notre colonne, nous allons repositionner l'ensemble du module dans l'onglet avancé.

• Position : Absolu
• Emplacement : en haut à gauche

Mise à l'échelle de l'effet de défilement vers le haut et vers le bas

Et nous allons compléter les paramètres du module en ajoutant un effet de défilement d'échelle vers le haut et vers le bas.

• Activer la mise à l'échelle vers le haut et vers le bas : Oui
• Échelle de départ : 150 % (à 30 %)
• Échelle moyenne : 150 % (à 45 %)
• Échelle de fin : 100 % (à 55 %)
• Déclencheur d'effet de mouvement : milieu de l'élément

Cloner la section entière autant de fois que nécessaire

Une fois que vous avez terminé la première section, vous pouvez la cloner autant de fois que vous le souhaitez.

Modifier la copie pour chaque section en double

Assurez-vous de modifier la copie pour chaque doublon.

Modifier l'image d'arrière-plan du module Image pour chaque section en double

Avec l'image d'arrière-plan du module Image et le tour est joué !

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 faire preuve de créativité avec les nouveaux effets de défilement de Divi. Plus précisément, nous avons utilisé des modules d'image à positionnement absolu ainsi que des arrière-plans de parallaxe pour créer un bel effet de zoom arrière. Nous avons accompagné ce tutoriel d'une belle mise en page CTA d'étude de cas que vous avez pu télécharger 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.