Comment appliquer des animations en collision à des éléments de conception avec Divi

L'ajout d'animations aux éléments de conception sur votre page peut certainement vous aider à augmenter l'engagement. Il existe de nombreuses options d'animation disponibles dans Visual Builder de Divi et elles sont assez simples à utiliser. Mais vous pouvez également faire preuve de créativité avec ces animations et les utiliser de manière unique. Dans cet article, nous traiterons trois exemples d'animations en collision que nous recréerons étape par étape, en utilisant uniquement les options intégrées de Divi.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement les trois exemples que nous allons recréer dans ce didacticiel.

Exemple #1 : Collision de texte

Exemple n° 2 : diviseurs en collision

Exemple #3 : Grille de collision

Flotter

Abonnez-vous à notre chaîne Youtube

Recréer l'exemple n° 1 : Texte en collision

Ajouter une section spécialisée

Structure

Commençons par le premier exemple ! Ouvrez une page nouvelle ou existante et ajoutez une nouvelle section de spécialité en utilisant la structure suivante :

Dimensionnement

Sans ajouter de modules ou de ligne, ouvrez les paramètres de la section et activez l'option « Rendre cette section en pleine largeur » dans les paramètres de dimensionnement.

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une ligne à la section des spécialités :

Dimensionnement

Ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

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

Espacement

Modifiez également les valeurs de remplissage personnalisées dans les paramètres d'espacement.

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

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module de texte à la première colonne de la ligne et ajoutez du contenu.

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

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

• Police de titre : Montserrat
• Poids de la police d'en-tête : léger
• Taille du texte du titre : 4.4vw (ordinateur de bureau), 8.2vw (tablette), 40px (téléphone)
• Hauteur de la ligne de cap : 0,7 em

Ajouter un module diviseur à la colonne 1

Visibilité

Le deuxième module nécessaire dans la colonne 1 est un module diviseur. Assurez-vous que le diviseur s'affiche en activant l'option « Afficher le diviseur ».

• Afficher le diviseur : Oui

Couleur

Passez à l'onglet Conception et modifiez la couleur du séparateur.

• Couleur : #000000

Dimensionnement

Diminuez également la largeur du diviseur.

• Largeur : 91%

Espacement

Et ajoutez une marge supérieure pour créer un espace entre le module de séparation et le module de texte.

• Marge supérieure : 30px

Animation

Enfin, ajoutez une animation subtile au module diviseur.

• Style d'animation : diapositive
• Direction de l'animation : Gauche

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passez à la deuxième colonne et ajoutez le deuxième module de texte avec un contenu 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 : Montserrat
• Poids de la police d'en-tête : léger
• Couleur du texte du titre : #3f46ff
• Taille du texte de l'en-tête : 3.8vw (ordinateur de bureau), 6.5vw (tablette), 40px (téléphone)
• Hauteur de la ligne de cap : 0,8 em

Animation

Et ajoutez également une animation à ce module.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 600 ms
• Intensité de l'animation : 10 %

Ajouter la ligne n° 2

Structure des colonnes

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

Ajouter les modules restants

Ajoutez les autres modules que vous souhaitez afficher dans cette nouvelle ligne et modifiez-les selon vos besoins.

Recréer l'exemple n° 2 : Entrer en collision des diviseurs

Ajouter une section spécialisée

Structure

Passons à l'exemple suivant ! Ajoutez une nouvelle section de spécialité en utilisant la structure suivante :

Dimensionnement

Sans ajouter de lignes ou de modules, ouvrez les paramètres de la section et activez l'option « Rendre cette section en pleine largeur ».

• Faire cette section pleine largeur : Oui

Ajouter la ligne n° 1

Structure des colonnes

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

Espacement

Ouvrez les paramètres de ligne et modifiez les paramètres de remplissage personnalisés.

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

Ajouter un module de texte

Ajouter du contenu

Ensuite, ajoutez un module de texte à la ligne avec un contenu de votre choix.

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

Passez à l'onglet Conception et modifiez les paramètres du texte de l'en-tête.

• Police de titre : Montserrat
• Poids de la police d'en-tête : léger
• Taille du texte de l'en-tête : 70 pixels (ordinateur de bureau), 50 pixels (tablette), 40 pixels (téléphone)
• Hauteur de la ligne de cap : 0,8 em

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une autre 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.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 53 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Modifiez également les valeurs de remplissage personnalisées.

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

Ajouter un module diviseur à la colonne 1

Visibilité

Une fois que vous avez terminé de modifier les paramètres de la ligne, continuez et ajoutez un module de séparation à la première colonne et assurez-vous que le séparateur s'affiche en activant l'option « Afficher le diviseur ».

• Afficher le diviseur : Oui

Couleur

Changez ensuite la couleur du séparateur.

• Couleur du séparateur : #3f46ff

modes

Et modifiez le style de séparation dans les paramètres de styles.

• Style de diviseur: Double

Dimensionnement

Augmentez également le poids du diviseur dans les paramètres de dimensionnement.

• Poids du diviseur : 8px

Animation

Enfin, ajoutez une animation au module Divider.

• Style d'animation : diapositive
• Direction de l'animation : à droite

Cloner le module diviseur et placer dans la colonne 2

Une fois que vous avez terminé de modifier les paramètres du module Divider, continuez et clonez le module. Placez le doublon dans la deuxième colonne de la ligne.

Modifier l'animation

Pour créer un effet de collision, modifiez la direction de l'animation du module diviseur en double.

• Style d'animation : diapositive
• Direction de l'animation : Gauche

Ajouter la ligne n° 3

Structure des colonnes

Continuez en ajoutant une autre ligne en utilisant la structure de colonnes suivante :

Ajouter les modules restants

Et ajoutez autant de modules que vous le souhaitez pour terminer la conception de la section.

Recréer l'exemple n°3 : grille de collision

Ajouter une nouvelle section

Espacement

Passons au prochain et dernier exemple ! Ajoutez une section régulière et ouvrez les paramètres. Accédez aux paramètres d'espacement, ajoutez des valeurs de remplissage personnalisées :

• Rembourrage supérieur : 300 px
• Rembourrage inférieur : 200px

Ajouter la ligne n° 1

Structure des colonnes

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

Ajouter un module d'image à la colonne

Télécharger une superposition d'image en forme

Enregistrez la superposition d'image en forme suivante sur votre bureau en cliquant avec le bouton droit :

Une fois que vous avez enregistré la superposition d'images en forme, revenez sur votre site Web Divi et ajoutez un module d'image à la ligne. Téléchargez le fichier de superposition d'image en forme que vous pouvez trouver dans votre dossier de téléchargement.

Fond dégradé

Ensuite, ajoutez un fond dégradé au module.

• Couleur 1 : #aa2bff
• Couleur 2: #09f7eb

Alignement

Modifiez également l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Et activez l'option "Forcer la pleine largeur" ​​dans les paramètres de dimensionnement.

• Forcer la pleine largeur : Oui

Espacement

Ajoutez également une marge personnalisée au module.

• Marge de gauche : 200px
• Marge droite : 200px

Animation

Enfin, ajoutez une animation au module.

• Style d'animation : Zoom
• Direction d'animation : Centre
• Durée de l'animation : 3000 ms
• Intensité de l'animation : 100 %

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang. Utilisez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 944 pixels
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module Blurb à la première colonne. Entrez un contenu de votre choix.

Icône

Sélectionnez ensuite une icône.

Couleur de l'arrière plan

Et ajoutez également une couleur d'arrière-plan au module.

• Couleur d'arrière-plan : rgba (255,255,255,0.83)

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône.

• Couleur de l'icône : #000000
• 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 : 73 px

Paramètres du texte du titre

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

• Police du titre : Open Sans
• Poids de la police du titre : semi-gras
• Alignement du texte du titre : Centre
• Taille du texte du titre : 15 px
• Espacement des lettres du titre : -1px
• Hauteur de la ligne de titre : 1,8 em

Dimensionnement

Et diminuez la largeur du contenu dans les paramètres de dimensionnement.

• Largeur du contenu : 183 pixels

Espacement

Nous ajouterons également des rembourrages personnalisés en haut et en bas.

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

Boîte ombre

Continuez en donnant au module Blurb une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Transitions

Et augmentez la durée de transition dans l'onglet avancé.

• Durée de transition : 600 ms

Cloner le module Blurb 8 fois et placer 3 doublons dans chaque colonne restante

Maintenant, une fois que vous avez terminé de modifier le premier module Blurb, vous pouvez le cloner 8 fois. Placez trois doublons dans la deuxième colonne et trois dans la troisième. Dans la prochaine partie de ce didacticiel, nous apporterons des modifications uniques à chacun des modules Blurb. Pour ce faire, nous suivrons la numérotation ci-dessous :

Modifier le module de présentation n° 1

Espacement

Ouvrez le premier module Blurb et ajoutez une marge supérieure négative.

• Marge supérieure : -340 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Espacement de survol

Modifiez les valeurs de marge au survol.

• Marge supérieure : -380px
• Marge inférieure : 40px
• Marge de gauche : -40px
• Marge de droite : 40 px

Coins arrondis

Continuez en ajoutant « 30px » dans le coin supérieur gauche du module.

Animation

Et ajoutez une animation.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 200 ms

Modifier le module de présentation #2

Couleur de l'arrière plan

Ouvrez le deuxième module Blurb et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba(255,255,255,0.93)

Espacement

Continuez en ajoutant une marge supérieure négative au module.

• Marge supérieure : -340 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Espacement de survol

Modifiez ces valeurs de marge au survol.

• Marge supérieure : -380px
• Marge inférieure : 40px

Animation

Et ajoutez une animation au module.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 400 ms

Modifier le module de présentation n° 3

Espacement

Passons au troisième module Blurb. Ajoutez une marge supérieure négative.

• Marge supérieure : -340 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Espacement de survol

Modifiez les valeurs de marge au survol.

• Marge supérieure : -380px
• Marge inférieure : 40px
• Marge de gauche : 40 px
• Marge de droite : -40px

Coins arrondis

Ajoutez également « 30px » dans le coin supérieur droit du module.

Animation

Et ajoutez une animation.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 600 ms

Modifier le module de présentation n° 4

Couleur de l'arrière plan

Passons au quatrième module. Ouvrez les paramètres et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba(255,255,255,0.93)

Espacement de survol

Ajoutez ensuite des valeurs de marge de survol.

• Marge de gauche : -40px
• Marge de droite : 40 px

Animation

Et ajoutez également une animation.

• Style d'animation : Fondu
• Délai d'animation : 800 ms

Modifier le module de présentation #5

Animation

Passons au cinquième module. La seule chose que vous devrez faire ici est d'ajouter une animation.

• Style d'animation : Fondu
• Délai d'animation : 1000 ms

Modifier le module de présentation n°6

Couleur de l'arrière plan

Continuez en ouvrant le sixième module et changez la couleur de fond.

• Couleur d'arrière-plan : rgba(255,255,255,0.93)

Espacement de survol

Modifiez également les valeurs d'espacement au survol.

• Marge de gauche : 40 px
• Marge de droite : -40px

Animation

Et ajoutez une animation.

• Style d'animation : Fondu
• Délai d'animation : 1200 ms

Modifier le module de présentation n°7

Espacement de survol

Passons au septième module. Ajoutez des valeurs de marge de survol aux paramètres d'espacement.

• Marge supérieure : 40px
• Marge de gauche : -40px
• Marge de droite : 40 px

Coins arrondis

Continuez en ajoutant « 30px » de rayon de bordure dans le coin inférieur gauche du module.

Animation

Et ajoutez une animation.

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 1400 ms

Modifier le module de présentation n°8

Couleur de l'arrière plan

Continuez en ouvrant le huitième module et changez la couleur de fond.

• Couleur d'arrière-plan : rgba(255,255,255,0.93)

Espacement de survol

Ajoutez une marge personnalisée au survol du module suivant.

• Marge supérieure : 40px

Animation

Ajoutez également une animation à ce module Blurb.

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 1600 ms

Modifier le module de présentation n°9

Espacement de survol

Passons au neuvième et dernier module ! Accédez aux paramètres d'espacement et ajoutez des valeurs de marge de survol personnalisées.

• Marge supérieure : 40px
• Marge de gauche : 40 px
• Marge de droite : -40px

Coins arrondis

Ajoutez également « 30px » de rayon de bordure dans le coin inférieur droit.

Animation

Et ajoutez une animation.

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 1800 ms

Ajouter une marge inférieure négative au module Image dans la rangée n°1

Maintenant, pour faire entrer en collision le cercle que nous avons créé dans la première partie de cet exemple et la grille, nous allons donner au module Image (contenant la superposition d'image en forme) une marge inférieure négative.

• Marge inférieure : -520px

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat que nous avons obtenu.

Exemple 1 : diviseurs en collision

Exemple 2 : Texte en collision

Exemple #3 : Grille de collision

Flotter

Dernières pensées

L'ajout d'animations à vos pages peut aider à créer plus d'interaction entre vos visiteurs et vous. Bien sûr, vous pouvez simplement utiliser les paramètres d'animation que vous avez dans Visual Builder, mais vous pouvez également aller plus loin en appliquant des animations en collision pour concevoir des éléments qui vous aideront à obtenir des résultats époustouflants. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!