Comment présenter des fonctionnalités dans les onglets de survol avec Divi

Vous recherchez des moyens nouveaux et créatifs 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 de 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 de l'onglet ne se produira que sur les environnements de bureau compatibles avec le survol. Lorsque les onglets de survol sont affichés à partir de tailles d'écran plus petites, les fonctionnalités seront répertoriées dans leur forme d'origine.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat sur différentes tailles d'écran.

Bureau

Mobile

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

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. Nous utiliserons l'arrière-plan dégradé pour couvrir la partie gauche des onglets de survol, comme vous pouvez le constater dans les écrans d'impression ci-dessus.

• Couleur 1 : #f2f2f2
• Couleur 2 : #ffffff
• Direction du gradient : 87 degrés
• Position de départ : 20 %
• Position finale : 20 %

Espacement

Ensuite, supprimez le rembourrage supérieur et inférieur personnalisé de la section en ajoutant « 0px » aux deux options.

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

Ajouter une nouvelle ligne

Structure des colonnes

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 d'arrière-plan : #ffffff

Alignement des lignes

Modifiez également l'alignement des lignes.

• Alignement des lignes : à gauche

Dimensionnement par défaut

Et modifiez également les paramètres de taille.

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

Dimensionnement de survol

Modifiez l'option Largeur personnalisée dans les paramètres de dimensionnement au survol. Cela permettra à la ligne de s'étendre lors du survol.

• Largeur personnalisée : 2000px

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez les valeurs de remplissage supérieur et inférieur par défaut.

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

Bordure par défaut

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

• Largeur de la bordure gauche : 20 px
• Couleur de la bordure gauche : #6d44ff

Bordure de survol

Supprimez le coin arrondi en haut à droite « 20px » au survol en ajoutant « 0px » à la place.

Ombre de boîte par défaut

Enfin, ajoutez une subtile ombre de boîte.

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

Ombre de la boîte de survol

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

• Couleur de l'ombre : 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.

• Couleur de l'icône : #5323ff
• 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 : 54 px

Paramètres du texte du titre par défaut

Modifiez ensuite les paramètres du texte du titre.

• Police du titre : Poppins
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #5323ff
• Taille du texte du titre : 25px
• Espacement des lettres du titre : -1px
• Hauteur de la ligne de titre : 1 em

Paramètres du texte du titre de survol

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

• Hauteur de la ligne de titre : 1,5 em

Paramètres de corps de texte par défaut

Ensuite, allez dans les paramètres du corps du texte et apportez quelques modifications. Cela inclut la modification de la taille du texte en « 0px ». Cela nous aidera à faire apparaître le corps du texte en survol uniquement.

• Police de caractère : Poppins
• Poids de la police de caractères : léger
• Alignement du corps du texte : Centre
• Couleur du corps du texte : #000000
• Taille du corps du texte : 0 px (ordinateur de bureau), 15 px (tablette et téléphone)
• Hauteur de la ligne du corps : 2,2 em

Paramètres de survol du corps du texte

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

• Taille du corps du texte : 15px

Espacement par défaut

Pour donner au module un peu d'espace pour respirer, nous ajoutons un rembourrage supérieur et inférieur personnalisé au module.

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

Espacement de survol

Nous allons modifier les paramètres d'espacement au survol. Vous ne pourrez pas voir le résultat final avant de quitter Visual Builder car nous appliquons des options de survol à la fois à la ligne et au module Blurb.

• Rembourrage supérieur : 80px
• Rembourrage inférieur : 80px
• Rembourrage gauche : 20vw
• Rembourrage droit : 20vw

Cloner la ligne 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 de présentation n° 2

Modifier l'espacement des lignes

Ouvrez le premier doublon et ajoutez une marge de gauche personnalisée. Cela nous permettra de créer l'effet d'escalier que vous pouvez remarquer dans l'aperçu de ce post.

• Marge gauche : 6vw

Changer la couleur de la bordure de la ligne

Modifiez également la couleur de la bordure gauche de la ligne.

• Couleur de la bordure gauche : #00ffcc

Modifier le contenu et l'icône du Blurb

Ensuite, ouvrez le module Blurb et modifiez l'icône.

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

Avec la couleur de l'icône.

• Couleur de l'icône : #00eda6

Changer la couleur du texte du titre

Et la couleur du texte du titre.

• Couleur du texte du titre : #00eda6

Modifier la ligne et le module de présentation n° 3

Modifier l'espacement des lignes

Ajoutez également une marge de gauche personnalisée au deuxième doublon.

• Marge gauche : 12vw

Changer la couleur de la bordure de la ligne

Modifiez la couleur de la bordure de la ligne de gauche.

• Couleur de la bordure gauche : #afebff

Modifier le contenu et l'icône du Blurb

Avec l'icône de présentation et le contenu.

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

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

• Couleur de l'icône : #68d9ff

Changer la couleur du texte du titre

Et la couleur du texte du titre aussi.

• Couleur du texte du titre : #68d9ff

Modifier la ligne et le module de présentation n° 4

Modifier l'espacement des lignes

Au prochain et dernier doublon ! Ajoutez une marge de gauche personnalisée à la ligne.

• Marge gauche : 18vw

Changer la couleur de la bordure de la ligne

Modifiez également la couleur de la bordure gauche de la ligne.

• Couleur de la bordure gauche : #dd87cf

Modifier le contenu et l'icône du Blurb

Ouvrez le module Blurb dans la rangée 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.

• Couleur de l'icône : #dd6aca

Changer la couleur du texte du titre

Et la couleur du texte du titre aussi.

• Couleur du texte du titre : #dd6aca

Aperçu

Maintenant que nous avons parcouru le didacticiel, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser les options intégrées de Divi uniquement pour créer des onglets de survol. Cette approche vous aidera à partager du contenu sur des fonctionnalités ou des produits de manière interactive. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!