Comment créer des animations qui se chevauchent en retard avec Divi

Publié: 2019-04-12

Une grande partie du succès de votre site Web dépend de votre capacité ou non à impressionner vos visiteurs. Non seulement avec vos produits ou services, mais aussi avec la façon dont vous communiquez et la qualité de votre site Web. Parce qu'avouons-le, les sites Web sont souvent les premières impressions. Et comme pour tout autre type de première impression, vous voulez qu'il laisse un bon arrière-goût.

Maintenant, si vous cherchez un moyen unique de mettre une partie de votre contenu sous les projecteurs, la création d'animations qui se chevauchent subtilement pourrait être exactement ce que vous recherchez. Ces animations qui se chevauchent subtilement sont un peu comme un diaporama pour vos visiteurs. Ils n'ont pas besoin de faire défiler ou de cliquer sur quoi que ce soit, le contenu s'affiche simplement de manière élégante.

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

animations superposées

Mobile

animations superposées

Approcher

Nous allons commencer par ajouter tous les éléments de conception dont nous avons besoin dans un ordre vertical, sans chevauchement
Comme nous ajoutons tous les éléments de conception, nous ajouterons également des animations personnalisées avec un certain délai d'animation
Ces retards d'animation n'auront de sens qu'une fois que vous aurez parcouru la dernière partie du didacticiel qui se concentre sur les chevauchements
Une partie importante de ce didacticiel consiste à utiliser des modules de séparation en forme avec la même couleur d'arrière-plan que la section pour faire "disparaître" le contenu de la ligne en cas de retard
Vous pouvez appliquer cette technique à tout type de conception sur laquelle vous travaillez une fois que vous avez compris les différentes étapes nécessaires pour que l'approche fonctionne.

Commençons à créer !

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par créer une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section et ajoutez un arrière-plan.

Couleur d'arrière-plan : #f3f3ec

animations superposées

Ajouter la ligne n° 1

Structure des colonnes

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

animations superposées

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran. La raison pour laquelle nous faisons cela est de nous débarrasser de tout l'espacement des pixels par défaut. Dans les étapes à venir, nous ajouterons tout l'espace dont nous avons besoin en utilisant une unité de fenêtre à la place.

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

animations superposées

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Commençons à ajouter des modules ! Le premier module dont nous avons besoin est un module de texte avec du contenu H2. N'oubliez pas que ce module « disparaîtra » après quelques secondes, vous devez donc le garder court, pertinent et mémorisable.

animations superposées

Paramètres de texte H2

Ensuite, allez dans l'onglet conception et modifiez les paramètres de texte H2.

Police de la rubrique 2 : Poppins
Titre 2 Couleur du texte : #333333
Titre 2 Taille du texte : 5vw

animations superposées

Espacement

Créez l'espace que vous souhaitez en utilisant des rembourrages à gauche et à droite dans les paramètres d'espacement.

Rembourrage gauche : 15vw
Rembourrage droit : 39vw

animations superposées

Ajouter un module diviseur à la colonne

Visibilité

Passons au module suivant, qui est un module diviseur. Nous utilisons ce module pour faire "disparaître" le module de texte. Il y a quatre choses dont nous aurons besoin pour cela; une couleur d'arrière-plan (qui est de la même couleur que la section afin que vous ne puissiez pas le remarquer), un rembourrage suffisant (pour vous assurer que vous pouvez chevaucher tout le contenu du module précédent), un chevauchement vertical (pour couvrir tout le module zone), et un délai d'animation (pour laisser le temps au premier module de briller avant de prendre le relais). Une fois que vous avez ajouté le module diviseur, assurez-vous de désactiver l'option « Afficher le diviseur ».

Afficher le diviseur : Non

animations superposées