Comment créer des chevauchements de bordures animées pour mettre en évidence le contenu avec Divi

Vous cherchez un moyen unique de mettre en valeur une partie spécifique de votre page ? Continuez à lire! Aujourd'hui, nous allons vous montrer comment créer des chevauchements de bordures animées pour mettre en évidence le contenu de votre page. Nous allons créer trois chevauchements de bordures animées différents sur la page de destination du pack de mise en page du développeur d'applications, mais vous pouvez utiliser cette technique pour tout type de site Web que vous créez. Cela vous aidera certainement à ajouter une dimension supplémentaire à votre page. Nous espérons que ce didacticiel vous inspirera également pour créer vos propres chevauchements de bordures animées alternatifs.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le résultat des trois exemples. Vous pouvez également vous attendre à un résultat similaire sur des écrans plus petits.

Exemple 1

Exemple #2

Exemple #3

Abonnez-vous à notre chaîne Youtube

Créer une nouvelle page à l'aide de la page de destination du pack de mise en page du développeur d'applications

La première chose à faire est de créer une nouvelle page à l'aide de la page de destination du pack de mise en page du développeur d'applications.

Section des héros clones

Nos deux premiers exemples sont créés dans la section héros. Si vous souhaitez recréer les deux exemples, il est recommandé de cloner la section héros afin de pouvoir passer au doublon pour recréer le deuxième exemple.

Recréer l'exemple #1

Ajouter une nouvelle ligne à la section Hero

Structure des colonnes

Commençons à recréer le premier exemple ! Ajoutez une nouvelle ligne dans la section spécialité en utilisant la structure de colonnes suivante :

Ajouter un module de texte

Laisser la zone de contenu vide

Ajoutez un nouveau module de texte à la ligne et assurez-vous de laisser la zone de contenu vide. Nous utilisons le module pour ses options de conception intégrées, pas pour afficher du contenu écrit.

Espacement

Accédez aux paramètres d'espacement du module de texte et donnez une forme au module en ajoutant un rembourrage haut et bas personnalisé. Créez le chevauchement entre ce module et les modules précédents en ajoutant également une marge supérieure négative.

• Marge supérieure : -480px
• Rembourrage supérieur : 223 px
• Rembourrage inférieur : 223px

Frontière

Ensuite, allez dans les paramètres de bordure du module et ajoutez une bordure de votre choix.

• Largeur de la bordure : 9px
• Couleur de la bordure : #0ae2ff
• Style de bordure : Début

Boîte ombre

Ajoutez également une ombre de boîte.

• Force du flou de l'ombre de la boîte : 1px
• Force de propagation de l'ombre de la boîte: 15px
• Couleur de l'ombre : rgba (10 226 255 0,59)

Animation

Et jouez avec les paramètres d'animation pour faire ressortir le contenu.

• Style d'animation : Retourner
• Répétition de l'animation : une fois
• Direction de l'animation : à droite
• Durée de l'animation : 1500 ms
• Délai d'animation : 1500 ms
• Intensité de l'animation : 500 %

Recréer l'exemple #2

Ajouter une nouvelle ligne à la section de héros en double

Passons au deuxième exemple ! Ajoutez une nouvelle ligne à la section des héros en double à l'aide de la structure de colonnes suivante :

Ajouter un module de texte n° 1

Laisser la zone de contenu vide

Nous utilisons, encore une fois, un module de texte vide.

Espacement

Accédez aux paramètres d'espacement et donnez une forme au module en utilisant un rembourrage supérieur et inférieur personnalisé. Faites-le chevaucher avec les modules précédents en ajoutant également une marge supérieure négative.

• Marge supérieure : -480px
• Rembourrage supérieur : 223 px
• Rembourrage inférieur : 223px

Frontière

Continuez en ajoutant une bordure au module de texte.

• Largeur de la bordure : 9px
• Couleur de la bordure : #0ae2ff
• Style de bordure : Double

Animation

Et jouez avec les paramètres d'animation pour créer un effet de roulement.

• Style d'animation : Rouleau
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 4500ms
• Délai d'animation : 1500 ms
• Intensité de l'animation : 100 %
• Opacité de démarrage de l'animation : 100 %

Cloner le module de texte

Une fois que vous avez terminé de modifier le premier module de texte, allez-y et clonez-le.

Changer l'espacement

Ouvrez les paramètres du doublon et modifiez la valeur de la marge supérieure dans les paramètres d'espacement.

• Marge supérieure : -495px

Changer la bordure

Modifiez également la couleur de la bordure.

• Couleur de la bordure : #ededed

Modifier l'animation

Et modifiez les paramètres d'animation pour obtenir le résultat que vous avez vu dans l'aperçu de cet article.

• Répétition de l'animation : boucle
• Durée de l'animation : 5000 ms
• Délai d'animation : 2000 ms

Recréer l'exemple #3

Modifier l'espacement du module d'image dans la colonne 2

Passons au prochain et dernier exemple ! Accédez à la section processus sur la page et ajoutez un peu de rembourrage supérieur au module Image contenant la grande illustration au milieu.

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

Ajouter une couleur d'arrière-plan aux modules de texte existants

Continuez en ajoutant une couleur de fond blanc à chacun des modules de texte dans la première et la troisième colonne.

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

Ajouter un module de texte à la colonne 1

Laisser la zone de contenu vide

Nous pouvons maintenant commencer à ajouter le premier chevauchement de bordure animé ! Ajoutez un nouveau module de texte à la première colonne (voir l'écran d'impression) et assurez-vous de laisser la zone de contenu vide.

Espacement

Accédez ensuite aux paramètres d'espacement du module de texte et créez la forme et le chevauchement à l'aide de valeurs de marge et de remplissage personnalisées.

• Marge supérieure : -230px
• Marge de gauche : 80px
• Marge de droite : 100 pixels
• Rembourrage supérieur : 120px
• Rembourrage inférieur : 120px

Frontière

Ajoutez ensuite une bordure.

• Largeur de la bordure : 13 px
• Couleur de la bordure : #bcf5f3
• Style de bordure : Double

Animation

Continuez en ajoutant une animation de votre choix qui vous aidera à mettre en valeur le contenu que vous partagez.

• Style d'animation : Plier
• Répétition de l'animation : une fois
• Direction de l'animation : à droite
• Intensité de l'animation : 100 %

Indice Z

Pour nous assurer que les bordures apparaissent sous le contenu, nous allons utiliser une valeur négative pour l'index Z du module de texte contenant les paramètres de bordure.

• Indice Z : -1

Cloner le module de texte et le placer à la fin de la colonne 1

Une fois que vous avez terminé de créer et de modifier le module de texte, allez-y et clonez-le. Placez le doublon à la fin de la première colonne.

Changer la bordure

Changez la couleur de la bordure.

• Couleur de la bordure : #ffc0ec

Modifier l'animation

Et ajoutez également un délai d'animation.

• Délai d'animation : 1000 ms

Ajouter un module de texte à la colonne 3

Laisser la zone de contenu vide

Continuez en ajoutant un module de texte à la troisième colonne (voir l'écran d'impression) et assurez-vous de laisser la zone de contenu vide.

Espacement

Passez aux paramètres d'espacement et créez la forme et le chevauchement à l'aide de valeurs de marge et de remplissage personnalisées.

• Marge supérieure : -230px
• Marge de gauche : 100 pixels
• Marge de droite : -80px
• Rembourrage supérieur : 120px
• Rembourrage inférieur : 120px

Frontière

Ajoutez ensuite une bordure de votre choix.

• Largeur de la bordure : 13 px
• Couleur de la bordure : #7479ff
• Style de bordure : Double

Animation

Avec une animation qui inclut un délai d'animation supérieur à ceux qui ont été donnés aux deux modules de texte précédents.

• Style d'animation : Plier
• Répétition de l'animation : une fois
• Direction de l'animation : Gauche
• Délai d'animation : 2000 ms
• Intensité de l'animation : 100 %

Indice Z

Assurez-vous que le module apparaît sous le contenu en utilisant un indice Z négatif.

• Indice Z : -1

Cloner le module de texte et le placer à la fin de la colonne 3

Une fois que vous avez terminé d'ajouter et de modifier le module de texte, clonez-le et placez le doublon à la fin de la troisième ligne.

Changer la bordure

Changez la couleur de la bordure du doublon.

• Couleur de la bordure : #b3d1ff

Modifier l'animation

Ajoutez un délai d'animation supplémentaire et le tour est joué !

• Délai d'animation : 3000 ms

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat des trois exemples que nous avons recréés tout au long de ce didacticiel.

Exemple 1

Exemple #2

Exemple #3

Dernières pensées

Dans cet article, nous vous avons montré comment mettre votre contenu à l'honneur à l'aide de chevauchements de bordures animés. C'est une excellente technique pour attirer l'attention sur une partie spécifique de votre page et le faire de manière élégante. Vous pouvez utiliser cette technique pour tout type de site Web que vous créez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!