Comment synchroniser Expanding Copy on Scroll avec Divi

Lorsque l'accent d'une certaine section est mis sur la copie, il est important de s'assurer que la copie ne passe pas inaperçue. Il existe de nombreuses techniques que vous pouvez utiliser pour mettre votre copie à l'honneur, mais dans ce didacticiel, nous allons vous montrer comment synchroniser l'expansion de la copie lors du défilement à l'aide des nouveaux effets de défilement de Divi. Au fur et à mesure que les utilisateurs font défiler, une autre partie de la copie apparaît, leur permettant de lire étape par étape le contenu que vous fournissez. 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 GRATUITEMENT The Expanding Copy on Scroll Layout

Pour mettre la main sur la copie extensible sur mise en page de défilement, 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 !

1. Créer une conception de section

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 : #151515

Espacement

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

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

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

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

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

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

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu

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

Paramètres de texte

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

• Police du texte : Livvic
• Poids de la police de texte : gras
• Couleur du texte : #f1f1f1
• Taille du texte : 170 px (ordinateur de bureau), 100 px (tablette), 70 px (téléphone)
• Hauteur de la ligne de texte : 1 em

• Longueur horizontale de l'ombre du texte : 0,06 em
• Longueur verticale de l'ombre du texte : 0 em
• Couleur de l'ombre du texte : rgba (79,79,79,0,74)
• Alignement du texte : centre (bureau), gauche (tablette et téléphone)

Cloner le module de texte deux fois

Clonez le module de texte deux fois.

Modifier le contenu

Modifiez le contenu des deux modules de texte en double.

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne juste en dessous de la précédente en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

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

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la ligne.

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

Frontière

Ajoutez ensuite une bordure supérieure.

• Largeur de la bordure supérieure : 1px
• Couleur de la bordure supérieure : #4c4c4c

Paramètres de colonne

Espacement

Nous apportons également quelques modifications aux paramètres des colonnes. Ouvrez les paramètres et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 5vw
• Rembourrage inférieur : 10vw
• Rembourrage gauche : 6vw
• Rembourrage droit : 6vw

Frontière

Utilisez également une bordure droite.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #4c4c4c

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module Blurb à la colonne avec le contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône de votre choix.

Paramètres des icônes

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

• Couleur de l'icône : #a3acff
• Alignement Image/Icône : Gauche

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Police du titre : Livvic
• Poids de la police du titre : gras
• Couleur du texte du titre : #c1c1c1
• Taille du texte du titre : 35px

• Longueur horizontale de l'ombre du texte du titre : 0,06 em
• Longueur verticale de l'ombre du texte du titre : 0em
• Couleur de l'ombre du texte du titre : rgba (79,79,79,0,74)

Paramètres du corps du texte

Nous apportons également quelques modifications aux paramètres du corps du texte.

• Couleur du corps du texte : #878787
• Taille du corps du texte : 16px
• Hauteur de la ligne du corps : 2,4 em

Titre du texte de présentation CSS

Et nous allons créer de l'espace autour du titre avec une seule ligne de code CSS que nous ajouterons au titre de présentation dans l'onglet avancé.

margin: 30px 0 40px 0;

Cloner la colonne entière deux fois

Une fois que vous avez terminé la colonne entière et le module Blurb, vous pouvez cloner la colonne entière deux fois.

Supprimer la bordure de la colonne 3

Ouvrez les paramètres de la colonne 3 et supprimez la bordure droite.

• Largeur de la bordure droite : 0px

Modifier le contenu

Et modifiez le contenu du module Blurb pour chaque doublon.

2. Ajouter des effets de défilement

Section

Mise à l'échelle vers le haut et vers le bas

Il est temps d'ajouter des effets de défilement, en commençant par la section. Utilisez l'effet de défilement de mise à l'échelle vers le haut et vers le bas avec les valeurs suivantes :

• Activer la mise à l'échelle vers le haut et vers le bas : Oui
• Échelle de départ : 70 %
• Échelle moyenne : 100 %
• Échelle finale : 100 %

Module de texte #1

Entrée et sortie en fondu

Ensuite, ouvrez le premier module de texte dans la première ligne de votre section et ajoutez un effet de fondu entrant et sortant.

• Activer les fondus entrants et sortants : Oui
• Opacité de départ : 0%
• Opacité moyenne : 0% (à 55%)
• Opacité finale : 100 % (à 71 %)

Mise à l'échelle vers le haut et vers le bas

Utilisez également un effet de mise à l'é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 : 0% (à 47%)
• Échelle moyenne : 100 % (à 56 %)
• Échelle de fin : 100 % (à 64 %)

Étendre les effets de défilement du module de texte n°1

Continuez en étendant les effets de défilement aux deux autres modules de texte de la colonne.

• À : Tous les textes
• Tout au long : cette colonne

Module de présentation n° 1

Mise à l'échelle vers le haut et vers le bas

Ensuite, nous ajouterons un effet de défilement de mise à l'échelle vers le haut et vers le bas au module Blurb dans la colonne 1.

• Activer la mise à l'échelle vers le haut et vers le bas : Oui
• Échelle de départ :
  • Ordinateur de bureau : 0 %
  • Tablette et téléphone : 100 %
• Échelle moyenne : 100 % (à 33 %)
• Échelle de fin : 100 % (à 64 %)

Étendre les effets de défilement du module 1 Blurb

Terminez le didacticiel en étendant l'effet de défilement à tous les modules Blurb de la rangée et le tour est joué !

• À : tous les articles de présentation
• Tout au long : cette ligne

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 ce tutoriel, nous vous avons montré une manière créative de synchroniser la copie expand dans votre section Divi. C'est un excellent moyen de mettre en évidence le texte et de permettre aux visiteurs de lire les différentes parties de votre section étape par étape. 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.