Souhaitez vous présentez vos fonctionnalités ou produits sous forme d’onglet Divi avec effet de survol ?

Êtes-vous à la recherche de nouvelles façons créatives de présenter des fonctionnalités et/ou des produits sur vos pages Web ? 

Si tel est le cas, continuez à lire car dans cet article, nous vous montrerons comment afficher les fonctionnalités dans les onglets lors du survol en utilisant uniquement les options intégrées de Divi. Les possibilités que vous avez avec cette approche sont infinies et elles vous permettront sûrement de comprendre Divi à un niveau plus profond. 

L’effet de survol des onglets ne se produira que sur ordinateur de bureau. Sur des tailles d’écrans plus petites, ils apparaitront sur leurs formes normales.

Allons-y !

Aperçu

Avant de plonger dans ce tutoriel, examinons le résultat que nous souhaitons obtenir.

onglet Divi avec effet de survol

Commençons le processus de création avec Divi

Ajouter une nouvelle section

Fond dégradé

Ajoutez une nouvelle page ou ouvrez une page existante et ajoutez une nouvelle section. Ouvrez les paramètres de la section et ajoutez un arrière-plan dégradé à la section.

  • Couleur Gauche : #f2f2f2
  • Couleur Droite : #ffffff
  • Gradient Direction : 87 degrés
  • Position Gauche : 20 %
  • Position Droite : 80 %

Espacement

Ensuite, Modifiez les paramètres d’espacement suivants :

  • Padding (Top et Bottom) : 0px

Ajouter une nouvelle ligne

Structure de la colonne

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

Couleur de l’arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d’arrière-plan.

  • Couleur de fond : #ffffff

Dimensionnement et Alignement

Dans l’onglet Design, déroulez l’option Sizing et modifiez les paramètres suivants :

  • Use Custom Gutter Width : YESS
  • Gutter Width : 1
  • Width : 400px
  • Row Alignment : Gauche

Dimensionnement au survol (Hover)

Modifiez l’option Width dans les paramètres de dimensionnement au survol. Cela permettra à la ligne de se développer lors du survol.

  • Width (Hover) : 2 000 pixels

Espacement

Ensuite, accédez aux paramètres d’espacement dans l’option Spacing

  • Padding (Top et Bottom) : 0px

Bordure (Desktop)

Ajoutez ’20px’ dans le coin supérieur droit de la ligne et ajoutez également une bordure gauche à la ligne.

  • Rounded Corners (Desktop) : 20px(Coin Supérieur droit)
  • Left Border Width : 20px
  • Left Border Color : #6d44ff

Bordure au survol (Hover)

Supprimez le coin arrondi supérieur droit de ’20px’ au survol en ajoutant ‘0px’ à la place.

Ombre de la boîte (Desktop)

Enfin, ajoutez une ombre subtile.

  • Box Shadow Blur Strength : 80 pixels
  • Box Shadow Spread Strength : -10px
  • Shadow Color : rgba(0,0,0,0.11)

Ombre au survol (Hover)

Et modifiez la couleur de l’ombre en une couleur complètement transparente au survol.

  • Box Shadow : rgba(255,255,255,0)

Ajouter un module Blurb à la ligne

Ajouter du contenu

Maintenant que nous avons fini de modifier tous les paramètres de ligne, nous pouvons continuer et ajouter un module Blurb à la colonne. N’hésitez pas à utiliser tout autre module de votre choix. 

Une fois que vous avez ajouté le module, ajoutez du contenu de votre choix.

Sélectionnez l’icône

Sélectionnez ensuite une icône de votre choix.

Paramètres des icônes

Et modifiez l’apparence de l’icône dans les paramètres de l’icône. Allez dans l’onglet Design

  • Icon Color : #5323ff
  • Image/Icon Placement : Top
  • Image/Icon Width : 50 px

Paramètres du titre du texte (Desktop)

Modifiez ensuite les paramètres du titre.

  • Title Font : Poppins
  • Text Alignment : centré
  • Title Text Color : #5323ff
  • Title Text Size : 25 px
  • Letter Spacing : -1px
  • Line Height : 1 em

Paramètres du titre du texte au survol (Hover)

Et modifiez la hauteur de la ligne de titre au survol.

  • Title Line Height : 1,5 em

Paramètres du corps du texte (Desktop)

Ensuite, accédez aux paramètres du corps du texte et apportez quelques modifications. Cela inclut le changement de la taille du texte à ‘0px’. Cela nous aidera à faire apparaître le corps du texte uniquement au survol.

  • Body Font : Poppins
  • Body Font Weight : léger
  • Text Alignment : centré
  • Body Text Color : #000000
  • Body Text Size : 0 px (Desktop), 15 px (Tablet et Phone)
  • Line Height : 2,2 em

Paramètres du corps du texte au survol (Hover)

Pour vous assurer que le corps du texte apparaît au survol, modifiez la taille du texte au survol.

  • Body Text Size : 15 px
onglets de survol

Espacement (Desktop)

Pour donner au module un peu d’espace, nous modifions les paramètres d’espacement suivants :

  • Padding (Top et Bottom) : 80 px
onglets de survol

Espacement au survol (Hover)

Nous allons modifier les paramètres d’espacement au survol.

  • Padding (Top et Bottom) : 80 px
  • Padding (Left et Right) : 20vw

Cloner la rangée 3 fois

Une fois que vous avez terminé de modifier la première ligne et son module Blurb, vous pouvez continuer et cloner la ligne autant de fois que vous le souhaitez.

Modifier la ligne et le module Blurb #2

Modifier la couleur de la bordure de ligne

Commençons par modifier la couleur de la bordure gauche de la ligne.

  • Left Border Color : #00ffcc

Modifier le contenu et l’icône Blurb

Ensuite, ouvrez les paramètres du module Blurb et changez l’icône.

Changer la couleur de l’icône du module Blurb

Avec la couleur de l’icône.

  • Icon Color : #00eda6

Changer la couleur du titre

Et la couleur du texte du titre.

  • Title Text Color: #00eda6

Modifier la ligne et le module Burb #3

Couleur de la bordure de ligne

Modifions la couleur de la bordure de la ligne de gauche.

  • Left Border Color : #afebff

Modifier le contenu et l’icône Blurb

Modifions également l’icône et le contenu du texte de présentation.

Changer la couleur de l’icône du module Blurb

Modifiez également la couleur de l’icône.

  • Icon Color : #68d9ff

Changer la couleur du texte du titre

Et la couleur du texte du titre aussi.

  • Title Text Color : #68d9ff

Modifier la ligne et le module Blurb #4

Modifier la couleur de la bordure de ligne

Au prochain et dernier module, Modifiez également la couleur de la bordure gauche de la ligne.

  • Left Border Color : #dd87cf

Modifier le contenu et l’icône Blurb

Ouvrez le module Blurb dans la ligne et modifiez l’icône et le contenu du module.

Changer la couleur de l’icône du module Blurb

Avec la couleur de l’icône.

  • Icon Color : #dd6aca

Changer la couleur du texte du titre

Et la couleur du texte du titre aussi.

  • Title Text Color : #dd6aca
onglet Divi avec effet de survol

Aperçu

Maintenant que nous avons parcouru le didacticiel, jetons un dernier coup d’œil au résultat.

onglet Divi avec effet de survol

Télécharger DIVI Maintenant !!!

Conclusion

Dans cet article, nous vous avons montré comment utiliser les options intégrées de Divi uniquement pour créer des onglets disponibles au survol. 

Cette approche vous aidera à partager du contenu sur les fonctionnalités ou les produits de manière interactive. 

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.