Comment diriger les visiteurs de manière convaincante vers le bas de la page avec les paramètres d'animation intégrés de Divi

L'un des principaux objectifs des sections de héros est de convaincre les gens de continuer à faire défiler la page et de découvrir plus de contenu et d'informations que vous avez partagé. Avec les options d'animation intégrées de Divi, vous pouvez ajouter des animations interactives à votre page qui vous aideront à diriger les visiteurs de manière convaincante vers le bas de la page. Dans ce didacticiel, nous allons inciter les visiteurs à faire défiler jusqu'à la section des services à l'aide d'icônes fléchées qui les mènent à la section des services.

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

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter la section #1

Couleur de l'arrière plan

Créez une nouvelle page et ajoutez-y une section régulière. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #0f0f0f

Diviseur inférieur

Continuez en ajoutant un séparateur inférieur à la section.

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 30px
• Répétition horizontale du diviseur : 10x (ordinateur de bureau), 4x (tablette et téléphone)

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 269 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)
• Rembourrage inférieur : 674 pixels (ordinateur de bureau), 200 pixels (tablette et téléphone)

Ajouter une rangée

Structure des colonnes

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

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne, accédez aux paramètres de dimensionnement et activez l'option « Make This Row Fullwidth ».

• Faire cette ligne en pleine largeur : Oui

Ajouter un module de texte

Ajouter du contenu

Le seul module dont nous avons besoin dans cette ligne est un module de texte. Allez-y et ajoutez du contenu H1 de votre choix.

Paramètres de texte d'en-tête

Modifiez ensuite les paramètres du texte de l'en-tête.

• Police de titre : Didact Gothic
• Poids de la police d'en-tête : gras
• Alignement du texte de l'en-tête : Centre
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 170 px (ordinateur de bureau), 50 px (tablette et téléphone)
• Hauteur de la ligne de cap : 0,8 em

• Longueur verticale de l'ombre du texte de l'en-tête : 1,5 em
• Couleur de l'ombre du texte de l'en-tête : rgba(0,0,0,0.11)

Ajouter la section #2

Couleur de l'arrière plan

Continuez en ajoutant la deuxième section à la page. Modifiez la couleur d'arrière-plan dans les paramètres de la section.

• Couleur d'arrière-plan : #0f0f0f

Diviseur supérieur

Ajoutez également un séparateur supérieur à la section.

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 30px
• Répétition horizontale du diviseur : 10x (ordinateur de bureau), 4x (tablette et téléphone)

Espacement

Et augmentez les valeurs d'espacement dans les paramètres d'espacement.

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

Ajouter une rangée

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne, accédez aux paramètres de dimensionnement et apportez quelques modifications.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2

Ajouter un module de présentation

Sélectionnez l'icône

Le premier module dont nous aurons besoin dans la première colonne est un module Blurb. La seule partie de l'élément du module Blurb dont nous avons besoin est l'icône. Sélectionnez l'icône de flèche qui pointe vers le bas.

Paramètres des icônes

Ensuite, allez dans l'onglet conception et modifiez les paramètres de l'icône.

• Couleur de l'icône : #4ffcff
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 150 px

Espacement

Pour augmenter la portée de l'icône, nous devrons ajouter une marge supérieure négative. Cela permettra au module Blurb de chevaucher la section précédente et permettra à l'animation entre deux sections de se dérouler en douceur. Pour compenser la marge personnalisée, nous ajouterons également un rembourrage supérieur personnalisé. Cela garantira que l'icône reste exactement dans la même position qu'avant. La seule chose qui change est la taille et la portée de l'ensemble du module.

• Marge supérieure : -550px
• Rembourrage supérieur : 550px

Animation

Enfin, ajoutez une animation au module Blurb à l'aide des paramètres suivants :

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 3000 ms
• Délai d'animation : 1200 ms
• Intensité de l'animation : 100 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Animation d'image/icône : pas d'animation

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Le prochain module dont nous avons besoin dans la première colonne est un module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

Continuez en modifiant les paramètres de texte.

• Police du texte : Didact Gothic
• Poids de la police de texte : gras
• Couleur du texte : rgba(255,255,255,0,03)
• Taille du texte : 350px
• Orientation du texte : Centre

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu

Ajoutez un deuxième module de texte à la première colonne avec un contenu H3 de votre choix.

Paramètres de texte d'en-tête

Et modifiez les paramètres du texte du titre dans l'onglet Conception.

• Police de la rubrique 3 : Didact Gothic
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 40 pixels (ordinateur de bureau), 30 pixels (tablette et téléphone)
• En-tête 3 Espacement des lettres : -1px

Ajouter un module diviseur à la colonne 1

Visibilité

Le module suivant nécessaire dans la première colonne est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Continuez en changeant la couleur du séparateur dans l'onglet design.

• Couleur : #ffffff

Dimensionnement

Apportez également quelques modifications aux paramètres de dimensionnement.

• Largeur : 59 %
• Alignement du module : Centre

Animation

Et ajoutez également une animation au module.

• Style d'animation : diapositive
• Direction d'animation : Centre
• Durée de l'animation : 2000 ms
• Intensité de l'animation : 10 %
• Courbe de vitesse d'animation :

Ajouter le module de texte n° 3 à la colonne 1

Ajouter du contenu

Le prochain et dernier module dont nous avons besoin dans la première colonne est un autre module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

Continuez en modifiant les paramètres de texte.

• Police du texte Poids : Léger
• Couleur du texte : #b7b7b7
• Taille du texte : 18px
• Hauteur de la ligne de texte : 1,8 em
• Orientation du texte : Centre

Animation

Et ajoutez une animation au module.

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Intensité de l'animation : 20 %
• Courbe de vitesse d'animation :

Cloner les modules 3 fois et placer les doublons dans les colonnes restantes

Maintenant que nous avons terminé de modifier tous les modules de la colonne 1, nous pouvons cloner tous les modules de la première colonne 3 fois et placer les doublons dans les colonnes restantes.

Modifier le contenu du module

Modifiez le contenu des doublons.

Ajouter un délai d'animation aux modules de séparation des doublons

Ajoutez également un délai d'animation à chacun des doublons du module Divider.

• Module diviseur en colonne 2 : 400 ms
• Module diviseur en colonne 3 : 800 ms
• Module diviseur en colonne 4 : 1200 ms

Ajouter un délai d'animation aux doublons du module de texte n°3

Faites la même chose pour le dernier module de texte de chaque colonne.

• Dernier module de texte dans la colonne 2 : 400 ms
• Dernier module de texte dans la colonne 3 : 800 ms
• Dernier module de texte dans la colonne 4 : 1200 ms

Personnaliser l'icône de présentation #2

Couleur de l'icône

Nous modifions également la couleur et l'animation de l'icône de présentation pour chacun des doublons. Ouvrez le module Blurb dans la colonne 2 et changez la couleur de l'icône.

• Couleur de l'icône : #ff6b86

Animation

Modifiez également les paramètres d'animation.

• Type d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 2000 ms
• Délai d'animation : 800 ms
• Intensité de l'animation : 62 %
• Opacité de démarrage de l'animation : 100 %
• Animation d'image/icône : pas d'animation

Personnaliser l'icône de présentation n° 3

Couleur de l'icône

Continuez en ouvrant le module Blurb dans la colonne 3 et changez la couleur de l'icône.

• Couleur de l'icône : #ffe500

Animation

Modifiez également les paramètres d'animation.

• Type d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 1000 ms
• Délai d'animation : 600 ms
• Intensité de l'animation : 69 %
• Opacité de démarrage de l'animation : 100 %
• Animation d'image/icône : pas d'animation

Personnaliser l'icône de présentation n°4

Couleur de l'icône

Ouvrez le dernier module Blurb, dans la colonne 4, et changez la couleur de l'icône.

• Couleur de l'icône : #00ff9d

Animation

Et terminez la conception en modifiant les paramètres d'animation dans l'onglet conception.

• Type d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 3000 ms
• Délai d'animation : 400 ms
• Intensité de l'animation : 100 %
• Opacité de démarrage de l'animation : 100 %
• Animation d'image/icône : pas d'animation

Dernières pensées

Dans cet article, nous vous avons montré comment diriger de manière convaincante les visiteurs vers le bas de la page à l'aide des paramètres d'animation de Divi. L'idée de base est d'utiliser des modules Blurb pour leurs icônes et d'augmenter leur portée d'animation jusqu'à la section des héros. Vous pouvez utiliser cette approche sur tout type de site Web que vous créez et devenir aussi créatif que vous le souhaitez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!