Comment créer des transitions de copie de parallaxe avec les options collantes de Divi

Lorsque vous recherchez des moyens créatifs de pimenter la conception de vos pages, les effets de parallaxe peuvent s'avérer utiles. Ils apportent cette interaction supplémentaire sur le défilement sans être trop invasifs. Si vous cherchez un moyen d'étendre cet effet de parallaxe à plusieurs sections de votre page, vous allez adorer ce didacticiel. Aujourd'hui, nous allons vous montrer comment créer des transitions de copie de parallaxe avec les options persistantes de Divi. Dès que les visiteurs défilent devant une certaine section, la copie défile avec l'image d'arrière-plan de parallaxe, ce qui donne un effet vraiment soigné. Dès que la section suivante en ligne est atteinte, la copie est alors remplacée par un autre titre. Le résultat que nous recherchons est parfait pour toutes les tailles d'écran et 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 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 !

https://youtu.be/uZCD0__Apjk

Abonnez-vous à notre chaîne Youtube

1. Créer la structure de l'élément

Ajouter une nouvelle section

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Cet effet fonctionnera particulièrement bien si vous avez du contenu au-dessus et en dessous de la mise en page que nous sommes sur le point de créer.

Ajouter une nouvelle ligne

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 les paramètres de dimensionnement comme suit :

• Égaliser les hauteurs de colonne : Oui
• Largeur : 95%
• 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

Image d'arrière-plan de la colonne

Maintenant que nous avons modifié les paramètres généraux de la ligne, nous allons également appliquer des paramètres personnalisés à la colonne à l'intérieur de notre ligne. Commencez par ouvrir les paramètres de la colonne.

Téléchargez une image d'arrière-plan et activez un effet de parallaxe dessus.

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

Espacement des colonnes

Ensuite, accédez à l'onglet Conception et appliquez un rembourrage inférieur personnalisé.

• Rembourrage inférieur : 50vh

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 module de texte contenant 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 de la rubrique 2 : Montserrat
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Style de police : majuscule
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte :
  • Ordinateur de bureau : 9vw
  • Tablette : 14vw
  • Téléphone : 15vw

Filtres

Nous activons également un mode de fusion dans les paramètres des filtres.

• Mode de fusion : superposition

Ajouter un module de bouton à la colonne 1

Ajouter une copie

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

Ajouter un lien

Ensuite, insérez un lien.

Paramètres des boutons

Ensuite, passez à l'onglet de conception du module et modifiez les paramètres des boutons en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Ordinateur de bureau : 2vw
  • Tablette et téléphone : 7vw
• Couleur du texte du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 0,06vw

• Police des boutons : Karla
• 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

Ajoutez également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 8 %
• Rembourrage inférieur : 8 %

Position

Et complétez les paramètres du module en repositionnant le module dans le coin inférieur droit de la colonne.

• Position : Absolu
• Emplacement : En bas à droite

2. Étapes nécessaires pour l'effet

Activer le module de texte collant

Maintenant que nous avons mis en place les bases de notre conception avec tous les éléments nécessaires, il est temps d'activer la transition de copie de parallaxe. Pour ce faire, nous utiliserons les options collantes intégrées de Divi sur le module de texte. Ouvrez les paramètres du module, accédez à l'onglet avancé et appliquez les paramètres persistants suivants :

• Position collante : coller au sommet
• Décalage supérieur collant: 150px
• Limite collante inférieure : section
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Modifier l'espacement du module de texte

Défaut

Maintenant que nous avons activé les options collantes sur ce module, nous pouvons appliquer des styles collants. Par défaut, le module sera placé au-dessus de la colonne elle-même. Et à cause de la couleur du texte blanc du module, il se fondra dans la couleur d'arrière-plan de la section et donnera l'impression qu'il n'y a pas de texte du tout. Pour créer ce positionnement, nous utiliserons une marge supérieure négative sur différentes tailles d'écran.

• Marge supérieure:
  • Ordinateur de bureau : -10vw
  • Tablette : -14vw
  • Téléphone : -15vw

Collant

Une fois que le module de texte est devenu collant, nous voulons qu'il revienne en vue. Pour nous assurer que cela se produise, nous ramènerons cette marge supérieure à « 0vh » dans un état collant.

• Marge supérieure collante : 0vh

Espacement des sections

Nous aurons également besoin d'espace en haut et en bas de notre section, afin que l'arrière-plan et le module de texte puissent fusionner en couleur. Pour ce faire, nous allons à nouveau ouvrir les paramètres de la section et appliquer un rembourrage haut et bas personnalisé.

• Rembourrage supérieur : 10vh
• Rembourrage inférieur : 10vh

Cloner la section entière autant de fois que souhaité

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

Modifier le contenu et les liens

Assurez-vous de modifier le contenu et les liens pour chaque module à l'intérieur des sections en double et vous avez terminé !

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 options persistantes de Divi. Plus précisément, nous vous avons montré comment créer des transitions de copie de parallaxe qui vous permettent d'étendre l'effet de parallaxe dans plusieurs sections de votre page. 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.