Comment raconter votre histoire sur Scroll avec Divi

Votre page à propos est l'une des pages les plus importantes de votre site Web. Cela permet aux gens de mieux vous connaître et de décider s'ils sont à l'aise pour passer à l'étape suivante. Si vous cherchez un moyen simple d'inclure la narration dans votre page à propos, vous adorerez ce didacticiel. Nous utiliserons les effets de défilement de Divi pour créer une transition de narration fluide lors du défilement. Dès qu'une partie de l'histoire s'estompe, une autre partie s'estompe. Cela donne aux visiteurs le sentiment de lire une histoire intéressante. 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

Abonnez-vous à notre chaîne Youtube

Téléchargez l'histoire de la page À propos sur la mise en page de défilement GRATUITEMENT

Pour mettre la main sur l'histoire de la page gratuite sur la mise en page de défilement, vous devez 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 !

1. Créer la première section plein écran de la page

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une première section à votre page à propos. Ouvrez les paramètres de la section et changez la couleur d'arrière-plan en noir.

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

Dimensionnement

Tournez ensuite la section en plein écran en ajoutant une hauteur minimale dans les paramètres de dimensionnement.

• Hauteur minimale : 100 vh

2. Ajouter une ligne animée

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur du conteneur de section en modifiant les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ensuite, ajoutez un peu de rembourrage à gauche et à droite sur différentes tailles d'écran.

• Rembourrage gauche : 20 vw (ordinateur de bureau), 10 vw (tablette et téléphone)
• Rembourrage droit : 20vw (ordinateur de bureau) 10vw (tablette et téléphone)

Animation

Pour augmenter l'effet de narration, nous utiliserons également une animation de fondu pour la ligne.

• Style d'animation : Fondu
• Durée de l'animation : 3000 ms
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Position

Et enfin, nous nous assurerons que la ligne est positionnée au centre du conteneur de section en modifiant les options de position.

• Position : Absolu
• Lieu : Centre

3. Insérer un titre avec des effets de défilement

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H1

Le seul module dont nous avons besoin dans cette ligne est un module de texte avec du contenu H1.

Titre 1 Paramètres de texte

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

• Police de titre : Nunito
• Poids de la police d'en-tête : semi-gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 7vw (ordinateur de bureau), 9vw (tablette), 11vw (téléphone)

Mouvement vertical

Nous ajouterons également une subtile animation verticale.

• Activer le mouvement vertical : Oui
• Décalage de départ : 0 (à 50 %)
• Décalage moyen : 10 (à 100 %)
• Décalage de fin : 10

Effet de défilement d'entrée et de sortie en fondu

Avec un effet de fondu entrant et sortant.

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

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

Enfin, nous utiliserons également 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 : 100 % (à 40 %)
• Échelle moyenne : 95 % (à 74 %)
• Échelle de fin : 90 %

4. Cloner la section entière une fois et inclure le texte de description avec des effets de défilement

Modifier l'en-tête et la copie du contenu

Une fois que vous avez terminé la première section, vous pouvez la cloner entièrement. Ouvrez le module de texte à l'intérieur du conteneur de section en double et utilisez une copie H2.

Modifier les paramètres de texte du module de texte H2

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

• Police du titre 2 : Nunito
• Titre 2 Poids de la police : semi-gras
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 5vw (ordinateur de bureau), 7vw (tablette), 8vw (téléphone)
• Titre 2 Hauteur de ligne : 1 em (ordinateur de bureau), 1,2 em (tablette et téléphone)

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Ensuite, ajoutez un autre module de texte à la colonne avec un contenu de description de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module de texte comme suit :

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

Espacement

Utilisez également une marge supérieure.

• Marge supérieure : 8vw

Effet de défilement d'entrée et de sortie en fondu

Ensuite, passez aux effets de défilement dans l'onglet avancé et utilisez les paramètres de fondu entrant et sortant suivants :

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

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

Ajoutez é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 : 100 % (à 40 %)
• Échelle moyenne : 95 % (à 74 %)
• Échelle de fin : 90 %

5. Clonez la deuxième section autant de fois que vous le souhaitez

Modifiez le contenu au fur et à mesure

Une fois que vous avez terminé la deuxième section de votre page, vous pouvez la cloner autant de fois que vous le souhaitez, en fonction du scénario de votre page à propos. Assurez-vous de modifier le contenu de chaque section.

6. Remplir la page avec la section CTA

Espacement du module de texte de la description du changement

Complétez la page à propos avec une section CTA à la fin. Ouvrez le module de texte de description et modifiez la marge supérieure et inférieure.

• Marge supérieure : 4vw
• Marge inférieure : 4vw

Ajouter un module de boutons

Ajouter une copie

Ensuite, ajoutez également un module de boutons avec une copie de votre choix.

Paramètres des boutons

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

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 100 pixels
• Police des boutons : Nunito
• Poids de la police du bouton : gras

Espacement

Complétez les paramètres du module de boutons en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

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 raconter une histoire sur votre page à propos en utilisant les effets de défilement intégrés de Divi. L'effet que nous avons créé permet à des copies consécutives d'entrer et de disparaître, donnant aux visiteurs l'impression de lire une histoire. 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.