Comment utiliser les ombres de boîte comme arrière-plans de balayage en survol

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment utiliser les ombres de boîte comme arrière-plans de balayage en survol. Nous traiterons trois exemples différents qui ont fière allure sur la page d'accueil du Personal Stylist Layout Pack, mais les possibilités dont vous disposez sont vraiment infinies. Nous recréerons chacun des arrière-plans de balayage étape par étape en utilisant uniquement les options intégrées de Divi.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel et ses différents exemples, examinons le résultat.

Exemple 1

Exemple #2

Exemple #3

Télécharger la page d'accueil du pack de mise en page du styliste personnel sur une nouvelle page

Commencez par ajouter une nouvelle page à votre site Web et téléchargez la mise en page de la page d'accueil Personal Stylist. Bien que nous utilisions cette mise en page pour réaliser les trois exemples ci-dessus, vous pouvez utiliser cette approche pour tout type de mise en page ou de site Web sur lequel vous travaillez.

Recréer l'exemple #1

Couleur de l'ombre de la boîte à boutons

Commençons à recréer le premier exemple ! Cet exemple vous aide à mettre en évidence la section héros. La première chose à faire est d'ouvrir le module de boutons que vous pouvez trouver dans la première colonne et de modifier la couleur de l'ombre de la boîte. Nous faisons cela pour nous assurer que la couleur va bien avec l'ombre de la boîte rose que nous ajouterons au survol.

Paramètres de section

Couleur d'arrière-plan par défaut

Continuez en ouvrant les paramètres de la section. Assurez-vous que la couleur d'arrière-plan par défaut reste la même.

• Couleur de fond : #2a2a2a

Couleur d'arrière-plan du survol

Modifiez le survol de l'arrière-plan.

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

Ombre de boîte par défaut

Continuez en ajoutant une ombre de boîte par défaut à la section.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Couleur de l'ombre : rgba (255 137 159 0,82)
• Position de l'ombre de la boîte : ombre intérieure

Ombre de la boîte de survol

Modifiez la position horizontale de l'ombre de la boîte. Ajoutez n'importe quelle valeur de choix.

• Position horizontale de l'ombre de la boîte : 800px

Si vous souhaitez que l'effet de balayage apparaisse de haut en bas, vous pouvez plutôt modifier la position verticale de l'ombre de la boîte.

• Position verticale de l'ombre de la boîte : 650px

Transitions

Enfin, réduisez la durée de transition dans l'onglet Avancé pour créer une transition rapide entre la couleur d'arrière-plan et l'arrière-plan du balayage de l'ombre de la boîte.

• Durée de la transition : 200 ms
• Courbe de vitesse de transition : Facilité

Recréer l'exemple #2

Modifier le premier module de texte

Paramètres de texte de survol

Passons à l'exemple suivant ! Ouvrez le module de texte que vous pouvez trouver dans la première colonne et modifiez la couleur du texte au survol.

• Couleur du texte : clair

Bordure de survol

Continuez en changeant la couleur de la bordure au survol dans l'onglet Conception.

• Couleur de la bordure : rgba (255 137 159 0,82)

Ombre de boîte par défaut

Ensuite, accédez aux paramètres de l'ombre de la boîte et ajoutez une ombre de la boîte par défaut.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Couleur de l'ombre : rgba (255 137 159 0,82)
• Position de l'ombre de la boîte : ombre intérieure

Ombre de la boîte de survol

Modifiez la position horizontale en survol.

• Position horizontale de l'ombre de la boîte : 520px

Transitions

Enfin, augmentez la durée de transition dans l'onglet avancé pour créer une transition en douceur.

• Durée de transition : 700 ms
• Courbe de vitesse de transition : Facilité

Copier et coller les styles de module dans le troisième module de texte

Nous utilisons également les mêmes styles de module pour le troisième module de texte. Pour gagner du temps, nous allons simplement copier les styles de module du premier module de texte et les coller sur le troisième module de texte.

Modifier le deuxième module de texte

Paramètres de texte

Le deuxième module de texte, cependant, est légèrement différent. Ouvrez le module et accédez aux paramètres de texte. La seule chose que vous aurez à faire est de changer la couleur du texte au survol.

• Couleur du texte : clair

Bordure de survol

Continuez en accédant aux paramètres de bordure et en modifiant la couleur de la bordure au survol.

• Couleur de la bordure : rgba (255 137 159 0,82)

Ombre de boîte par défaut

Il est temps d'ajouter l'arrière-plan du balayage ! Commencez par ajouter une ombre de boîte par défaut en utilisant les paramètres suivants :

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Couleur de l'ombre : rgba (255 137 159 0,82)
• Position de l'ombre de la boîte : ombre intérieure

Ombre de la boîte de survol

Modifiez la position verticale de l'ombre de la boîte au survol.

• Position verticale de l'ombre de la boîte : 500px

Transitions

Enfin, augmentez également la durée de transition de ce module de texte.

• Durée de transition : 700 ms
• Courbe de vitesse de transition : Facilité

Recréer l'exemple #3

Modifier les paramètres de ligne

Dimensionnement

Passons au prochain et dernier exemple ! Commencez par ouvrir les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

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

Espacement

Continuez en ajoutant également un rembourrage personnalisé à la ligne.

• Rembourrage gauche : 10vw
• Rembourrage droit : 10vw
• Remplissage gauche de la colonne 2 : 15vw (ordinateur de bureau), 0vw (tablette et téléphone)

Ombre de boîte par défaut

Ensuite, ajoutez une ombre de boîte par défaut à la ligne.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Couleur de l'ombre : # ff899f
• Position de l'ombre de la boîte : ombre intérieure

Ombre de la boîte de survol

Modifiez la position horizontale en survol.

• Position horizontale de l'ombre de la boîte : 50px

Transitions

Nous modifions également la durée et le délai de transition dans l'onglet Avancé.

• Durée de transition : 1000 ms
• Délai de transition : 700 ms
• Courbe de vitesse de transition : Facilité

Modifier les paramètres de section

Supprimer la taille

Une fois que vous avez terminé de modifier les paramètres de la ligne, continuez et ouvrez les paramètres de la section. Passez à l'onglet Conception et réinitialisez la largeur en cliquant avec le bouton droit de la souris et en cliquant sur Réinitialiser.

Supprimer la bordure

Faites la même chose pour la largeur de la bordure.

Ombre de boîte par défaut

Continuez en ajoutant une ombre de boîte par défaut.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Couleur de l'ombre : #2a2a2a
• Position de l'ombre de la boîte : ombre intérieure

Ombre de la boîte de survol

Modifiez la position horizontale de l'ombre de la boîte au survol.

• Position horizontale de l'ombre de la boîte : 60 px

Transitions

Et pour finir la conception, augmentez la durée de transition dans l'onglet avancé.

• Durée de transition : 1000 ms

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux trois exemples différents que nous avons recréés étape par étape.

Exemple 1

Exemple #2

Exemple #3

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser les ombres de boîte comme arrière-plans de balayage avec les options intégrées de Divi uniquement. Ce tutoriel fait partie de notre initiative de conception Divi en cours où nous essayons de mettre quelque chose de plus dans votre boîte à outils chaque semaine. Nous espérons que ce didacticiel vous inspirera à utiliser les ombres de boîte d'une manière unique et créative. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!