Souhaitez vous utiliser les effets d’ombre et de survol dans Divi pour créer du contenu interactif et démarquer votre site Web ?

Faire en sorte que votre site Web se démarque des sites Web similaires peut être difficile. Mais une fois que vous y parvenez, cela vaut presque toujours l’effort et la réflexion qui y ont été consacrés. 

Nous allons vous montrer comment créer du contenu interactif lors de la création de sites Web avec Divi.

Allons-y !

Aperçu

Avant de nous plonger dans ce tutoriel, examinons rapidement le résultat auquel vous pouvez vous attendre.

Ordinateur de bureau

ombres de texte

Mobile

ombres de texte

Commençons la réalisation avec Divi !

Consulter également : Divi : Comment créer un menu de roue tournante au survol

Ajouter une nouvelle section

Couleur de l’arrière plan

Créer une nouvelle page ou ouvrez-en une déjà existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section et modifiez la couleur d’arrière-plan.

  • Background : #03006d

Espacement

Ensuite, accédez aux paramètres d’espacement de la section et modifiez comme suit :

  • Padding (Top et Bottom) : 50px

Ajouter une nouvelle ligne

Structure de la colonne

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonne suivante.

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l’écran.

  • Use Custom Gutter Width : YES
  • Gutter Width : 1
  • Width : 100%

Espacement

Modifions également les paramètres d’espacement suivants :

  • Padding (Right) : 9vw (Desktop), 5vw (Tablet et Phone)
  • Padding (Right) : 5vw (Tablet et Phone)

Ajouter un module Texte à la colonne 1

Ajouter du contenu

Une fois que vous avez terminé de modifier les paramètres de ligne, ajoutez le premier module Texte à la colonne 1.

Ajoutez le premier caractère en tant que texte de paragraphe. Puis, le contenu que vous souhaitez voir apparaître en tant que texte de liste.

Paramètres du texte (Desktop)

Ensuite, accédez à l’onglet Designet modifiez les paramètres de texte de paragraphe par défaut. Assurez-vous d’utiliser la même couleur pour le texte et l’arrière-plan de la section.

  • Font Weight : Ultra Bold
  • Text Color : #03006d
  • Text Size : 27vw (ordinateur de bureau), 0vw (tablette et téléphone)
  • Line Height : 1,1 em
  • Text Shadow : Voir capture
  • Shadow Blur Strength : 0,01 em
  • Shadow Color : #ffffff
  • Text Alignment : Gauche

Paramètres de texte au survol (Hover)

Pour créer le bel effet au survol, nous devrons modifier ces paramètres de texte de paragraphe au survol.

  • Text Color(Hover) : #ffffff
  • Shadow Color(Hover) : rgba(255,255,255,0)

Paramètres de la liste (Desktop)

Continuez en allant dans les paramètres de la liste.

  • Font Weight : Light
  • List Text Color : #ffffff
  • List Text Size : 0 px (Desktop), 18 px (Tablet et Phone)
  • Style Position : Circle
  • Unordered List Style Position : Outside
  • Unordered List Item Indent : 0px

Paramètres de texte de la liste au survol (Hover)

Nous voulons que le texte de la liste apparaisse au survol. C’est pourquoi nous modifierons la taille du texte au survol.

  • Unordered List Text Size (Hover) : 18 px
Survol dans Divi

Espacement

Continuez en allant dans les paramètres d’espacement du module et apportez-y également quelques modifications.

  • Margin (Bottom) : 50 px (Tablet et Phone)
  • Margin (Right) : -4vw (Desktop), 0vw (Tablet et Phone)

Cloner le module de texte 4 fois et placer les doublons dans les colonnes restantes

Maintenant que nous avons fini de modifier le premier module de la colonne 1, clonez le module quatre fois. Ensuite, placez chacun des doublons dans les colonnes restantes. Nous modifierons chacun des doublons pour qu’ils correspondent à ce que nous souhaitons.

Changer le module Texte dans la colonne 2

Modifier le contenu

Ouvrez le doublon dans la colonne 2 et modifiez le contenu.

Modifier l’espacement

Ensuite, accédez aux paramètres d’espacement et modifiez les valeurs de marge personnalisées.

  • Margin (Bottom) : 50 px (Tablet et Phone)
  • Margin (Left et Right) : -2vw (Desktop), 0vw (Tablet et Phone)
  • Marge droite : -2vw (bureau), 0vw (tablette et téléphone)

Changer le module Texte dans la colonne 3

Modifier le contenu

Modifiez également le contenu du doublon dans la colonne 3.

Modifier l’espacement

Avec les paramètres d’espacement dans l’onglet de conception.

  • Margin (Left) : 2,5 vw
  • Margin (Right) : 1,5 vw

Modifier le module Texte dans la colonne 4

Modifier le contenu

Continuez en ouvrant les paramètres du module Texte dans la colonne 4 et modifiez également le contenu ici.

Modifier l’espacement

Ensuite, accédez à l’onglet Conception et modifiez les valeurs de marge personnalisées dans les paramètres d’espacement.

  • Margin (Left) : -6vw
  • Margin (Right) : 2vw

Modifier le module Texte dans la colonne 5

Contenu

Place au dernier duplicata. Modifiez le contenu dans la zone de contenu.

Modifier l’espacement

Avec les paramètres d’espacement personnalisés.

  • Margin (Left) : -7vw
  • Margin (Right) : 3vw
Divi

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.

Lire aussi : Divi : Comment personnaliser les icônes de panier et de recherche du module « Fullwidth Menu »

Bureau

effets d'ombre et de survol dans Divi

Mobile

effets d'ombre et de survol dans Divi

Télécharger DIVI Maintenant !!!

Conclusion

Nous savons à quel point il est important de faire en sorte que votre site Web se démarque des autres sites Web. Avec les options intégrées de Divi, vous pouvez être aussi créatif que vous le souhaitez. 

Cet article est un exemple de la façon dont vous pouvez créer du contenu interactif en survol.

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.