Comment créer des transitions de page animées avec le générateur de thème de Divi

Normalement, lorsque les visiteurs naviguent de page en page sur votre site Divi, la transition se fait instantanément. Maintenant, et s'il y avait un moyen d'animer ces transitions de page ? Avec Theme Builder de Divi, c'est sûr, sans avoir besoin de code personnalisé ! Dès que vos visiteurs quittent une page pour en entrer une autre, vous pouvez faire appliquer une animation. Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment créer ces transitions de page animées. Plus encore, nous partagerons également trois exemples différents que vous pouvez appliquer immédiatement à votre prochain projet. Vous pourrez également télécharger gratuitement les fichiers modèles JSON !

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.

Transition de page animée #1

Bureau

Mobile

Transition de page animée #2

Bureau

Mobile

Transition de page animée n°3

Bureau

Mobile

Téléchargez les modèles de pages GRATUITEMENT

Pour mettre la main sur les modèles de pages gratuits, vous devrez d'abord les 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. Accédez à Divi Theme Builder et ajoutez un nouveau modèle de page

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

La première chose que vous devrez faire est d'aller dans votre Divi Theme Builder et de cliquer sur « Ajouter un nouveau modèle ».

Utiliser le modèle sur toutes les pages

Utilisez le nouveau modèle sur toutes les pages (ou les pages auxquelles vous souhaitez que la transition s'applique).

• Utiliser sur : toutes les pages

Commencer à créer le corps du modèle

Ensuite, commencez à créer le corps personnalisé de votre modèle de page.

2. Créer un corps de page à l'aide du module de contenu de publication

Paramètres de section

Espacement

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et supprimez tout le rembourrage supérieur et inférieur par défaut.

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

Visibilité

Pour nous assurer qu'aucune barre de défilement horizontale n'apparaît lorsque l'animation se produit, nous devrons masquer les deux débordements de section dans l'onglet avancé des paramètres de section.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur du conteneur de section.

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

Espacement

Nous supprimons également le rembourrage supérieur et inférieur par défaut de la ligne. À ce stade, les conteneurs de section, de ligne et de colonne ont exactement la même taille. Il n'y a aucun espace entre les conteneurs. C'est important pour ce qui va arriver dans la prochaine étape ; ajouter le contenu dynamique de la page.

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

Ajouter un module de contenu de publication à la colonne

Le seul module dont nous avons besoin pour faire apparaître le contenu de la page de manière dynamique est le module Post Content. Allez-y et ajoutez ce module à la colonne de votre ligne. Grâce aux paramètres de section et de ligne que nous avons appliqués dans les parties précédentes de cet article, le contenu dynamique de la page occupera toute la largeur et la hauteur du conteneur de section.

3. Appliquez la transition de page animée de votre choix

Recréer la transition de page animée #1

Paramètres de section

Couleur de l'arrière plan

Il est temps d'appliquer les transitions de page animées ! Nous partageons trois exemples différents, mais avec les options intégrées de Divi, les possibilités d'animation sont infinies. Pour appliquer la première transition de page animée, ouvrez le conteneur de section et ajoutez une couleur d'arrière-plan.

• Couleur de fond : #d8cdbe

Animation

Nous appliquons également les paramètres d'animation suivants à la section :

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de ligne

Couleur de l'arrière plan

Ouvrez ensuite les paramètres de ligne et ajoutez la couleur d'arrière-plan suivante :

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

Animation

Continuez en appliquant l'animation suivante à la ligne :

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 500 ms
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de colonne

Couleur de l'arrière plan

Passons au conteneur suivant que nous allons animer, qui est le conteneur de colonnes. Ouvrez les paramètres de la colonne et ajoutez une couleur de fond blanc.

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

Animation

Ajoutez également une animation personnalisée à la colonne.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 1200 ms
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres du module de contenu de publication

Animation

Enfin, nous animerons le module de contenu de publication (contenant tout le contenu dynamique de la page).

• Style d'animation : Fondu
• Délai d'animation : 2500 ms
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Recréer la transition de page animée #2

Paramètres de section

Couleur de l'arrière plan

Vous voulez plutôt créer la deuxième animation ? Ouvrez les paramètres de la section et utilisez la couleur d'arrière-plan suivante :

• Couleur de fond : #d8cdbe

Animation

Ensuite, appliquez une animation personnalisée à la section.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de ligne

Fond dégradé

Ouvrez ensuite les paramètres de ligne et utilisez l'arrière-plan dégradé suivant pour cela :

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Animation

Ajoutez également une animation personnalisée à votre ligne.

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Délai d'animation : 800 ms
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de colonne

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de colonne de la ligne et utilisez une couleur d'arrière-plan blanche.

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

Animation

Continuez en ajoutant une animation à la colonne.

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 2000 ms
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres du module de contenu de publication

Animation

Enfin, ouvrez les paramètres du module de contenu de publication et utilisez les paramètres d'animation suivants :

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

Recréer la transition de page animée n°3

Paramètres de section

Fond dégradé

Passons à la prochaine et dernière transition de page animée ! Ouvrez les paramètres de la section et utilisez l'arrière-plan dégradé suivant :

• Couleur 1 : #d8cdbe
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 20 %
• Position finale : 20 %

Animation

Passez à l'onglet de conception de la section et modifiez les paramètres d'animation en conséquence :

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Intensité de l'animation : 10 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de ligne

Fond dégradé

Ensuite, ouvrez les paramètres de ligne et appliquez un arrière-plan dégradé :

• Couleur 1 : #ffffff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 50 %
• Position finale : 50 %

Animation

Modifiez également les paramètres d'animation de la ligne.

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Délai d'animation : 1000 ms
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres de colonne

Couleur de l'arrière plan

Continuez en ouvrant les paramètres de la colonne. Changez la couleur de fond.

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

Animation

Appliquez également les paramètres d'animation suivants à la colonne :

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Délai d'animation : 1500 ms
• Courbe de vitesse d'animation :
• Répétition de l'animation : une fois

Paramètres du module de contenu de publication

Animation

Et terminez la troisième transition de page animée en appliquant les paramètres d'animation suivants au module de contenu de publication :

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

6. Enregistrez toutes les modifications du générateur de thème et prévisualisez le résultat

Une fois que vous avez créé le corps de votre modèle de page et ajouté la transition de page animée de votre choix, vous pouvez enregistrer toutes les modifications apportées par Theme Builder et afficher le résultat sur votre site Web !

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.

Transition de page animée #1

Bureau

Mobile

Transition de page animée #2

Bureau

Mobile

Transition de page animée n°3

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer des transitions de page animées avec les options intégrées de Divi et Theme Builder uniquement. C'est un excellent moyen d'ajouter un autre niveau d'interaction à votre site Web, sans avoir besoin de code supplémentaire. Vous avez également pu télécharger gratuitement les exemples de fichiers JSON de modèle ! 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.