Comment faire apparaître du contenu caché en survol avec Divi (téléchargement gratuit !)

L'ajout d'interactions subtiles à votre site Web peut vraiment améliorer l'expérience utilisateur globale des visiteurs. L'une des choses qui rendra votre site Web plus sophistiqué, tout en respectant la convivialité, consiste à faire apparaître le contenu des lignes au survol. C'est une excellente approche pour présenter des services, des produits, des fonctionnalités et plus encore.

Dans ce didacticiel, nous allons vous montrer comment créer un design spécifique de A à Z, mais une fois que vous avez compris l'approche, vous pouvez le faire fonctionner pour tout type de site Web sur lequel vous travaillez. À la fin de cet article de blog, nous partagerons également le fichier JSON de cette conception que vous pouvez télécharger GRATUITEMENT et utiliser sans aucune restriction.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Commençons à créer !

Ajouter une nouvelle section

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

Commencez par ajouter une nouvelle section à une page nouvelle ou existante et modifiez la couleur d'arrière-plan de la section.

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

Couleur d'arrière-plan du survol

Modifiez cette couleur de fond au survol.

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

Espacement

Passez à l'onglet Conception et ajoutez des valeurs d'espacement personnalisées. Pour que ce didacticiel fonctionne, nous n'utiliserons que des unités de fenêtre. Cela aidera à garantir que tout reste en place, quelle que soit la taille de l'écran.

• Marge supérieure : 5vw
• Marge inférieure : 5vw
• Marge gauche : 3vw
• Marge droite : 3vw
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter la ligne n° 1

Structure des colonnes

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

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé.

• Couleur 1 : #ff5b79
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 15 %
• Position finale : 15 %

Dimensionnement

Apportez également quelques modifications aux paramètres de dimensionnement de la ligne.

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

Espacement

Et ajoutez des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 9vw
• Rembourrage inférieur : 9vw
• Remplissage gauche de la colonne 1 : 5vw
• Rembourrage droit de la colonne 1 : 5vw
• Rembourrage gauche de la colonne 2 : 5vw
• Rembourrage droit de la colonne 2 : 5vw

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter les modules ! Le premier module dont nous aurons besoin est un module de texte dans la colonne 1. Ajoutez du contenu H3 et un lien.

Paramètres de texte de lien

Ensuite, accédez aux paramètres de texte du lien et apportez quelques modifications à l'apparence du lien.

• Police du lien : Didact Gothic
• Style de police du lien : Souligné
• Style de soulignement du lien : solide
• Couleur du texte du lien : #ffffff
• Taille du texte du lien : 20px

Paramètres de texte d'en-tête

Modifiez également les paramètres de texte H3.

• Police de la rubrique 3 : Didact Gothic
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 50px

Visibilité

Enfin, désactivez le module sur le bureau. Nous n'avons besoin que de ce module pour apparaître sur des écrans de plus petite taille.

Ajouter le module diviseur à la colonne 2

Visibilité

Le deuxième et dernier module requis dans la colonne 1 est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, changez la couleur du séparateur.

• Couleur : #ffffff

Espacement

Ajoutez également des valeurs de marge personnalisées au module Divider.

• Marge supérieure : 11vw (ordinateur de bureau), 80px (tablette),
• Marge inférieure : 50px (tablette et téléphone)

Ajouter le module de texte n° 1 à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne ! Ajoutez un module de texte avec du contenu H4 de votre choix.

Paramètres de texte d'en-tête

Ensuite, allez dans les paramètres de texte H4 et apportez quelques modifications.

• Police de la rubrique 4 : Didact Gothic
• Titre 4 Poids de la police : gras
• Titre 4 Couleur du texte : #ffffff
• Titre 4 Taille du texte : 2vw (ordinateur de bureau), 40 px (tablette), 30 px (téléphone)

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Juste en dessous du module de texte précédent, allez-y et ajoutez-en un autre avec un contenu de paragraphe de votre choix.

Paramètres de texte

Accédez ensuite aux paramètres de texte et apportez quelques modifications.

• Police du texte : Didact Gothic
• Couleur du texte : #ffffff
• Taille du texte : 0.9vw (ordinateur de bureau), 18px (tablette et téléphone)
• Hauteur de la ligne de texte : 2 em

Espacement

Ajoutez également des valeurs de marge personnalisées.

• Marge supérieure : 2vw
• Marge droite : 15vw

Ajouter la ligne n° 2

Structure des colonnes

Une fois que vous avez terminé de modifier la première ligne et tous ses modules, vous pouvez continuer et ajouter une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez 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 : 1

Espacement

Supprimez également tout le remplissage par défaut dans les paramètres d'espacement des lignes.

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

Visibilité

Enfin, masquez cette ligne sur tablette et téléphone.

Ajouter un module de texte à la colonne

Ajouter du contenu

Le seul module dont nous avons besoin dans cette ligne est un module de texte. Ajoutez du contenu H3 et un lien.

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

Ensuite, accédez aux paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan au module de texte.

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

Couleur d'arrière-plan du survol

Modifiez cette couleur de fond au survol.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Paramètres de texte par défaut

Ensuite, allez dans les paramètres de texte et apportez quelques modifications.

• Police du lien : Didact Gothic
• Style de police du lien : Souligné
• Style de soulignement du lien : solide
• Couleur du texte du lien : #ffffff
• Taille du texte du lien : 0px
• Espacement des lettres des liens : -1px

Paramètres du texte du lien de survol

Modifiez également la taille du texte du lien au survol.

• Taille du texte du lien : 1.7vw

Paramètres de texte d'en-tête par défaut

Continuez en apportant quelques modifications aux paramètres de texte H3.

• Police de la rubrique 3 : Didact Gothic
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : #000000
• Titre 3 Taille du texte : 12vw
• En-tête 3 Espacement des lettres : -0.8vw

Paramètres de texte d'en-tête de survol

Modifiez certains des paramètres de texte H3 au survol.

• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 4vw
• Espacement des lettres de l'en-tête 3 : -0.2vw

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : -34.3vw
• Marge inférieure : -5vw
• Rembourrage supérieur : 10vw
• Rembourrage inférieur : 10vw
• Rembourrage gauche : 26,5 vw

Espacement de survol

Modifiez les valeurs d'espacement au survol.

• Marge supérieure : -34.1vw
• Marge inférieure : -5vw
• Rembourrage supérieur : 12vw
• Rembourrage inférieur : 12vw
• Rembourrage gauche : 11,5 vw

Transitions

Augmentez également la durée de transition du module de texte.

• Durée de transition : 400 ms

Cloner la section

Une fois votre première section terminée, allez-y et clonez la section entière autant de fois que vous le souhaitez. Dans la prochaine partie du didacticiel, nous vous montrerons les modifications que vous devez apporter à chaque doublon.

Changer la couleur d'arrière-plan du survol de section

La première chose que vous devrez modifier est la couleur d'arrière-plan du survol de la section.

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

Changer l'arrière-plan dégradé de la ligne n°1

Modifiez également l'arrière-plan dégradé de la ligne 1.

• Couleur 1 : #000000

Changer la couleur du texte et copier

Avec la couleur du texte et toute la copie.

• Titre 3 Couleur du texte : #ff5b79

Modifier l'espacement du module de texte

Enfin, modifiez le rembourrage gauche du module de texte dans la rangée #2. La quantité de rembourrage gauche que vous devrez utiliser dépend de la longueur du contenu que vous utilisez.

• Rembourrage gauche : 21vw

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

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.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment révéler le contenu des lignes masquées au survol. Le résultat que nous avons créé est réalisé à l'aide des options intégrées de Divi uniquement. Nous avons également partagé le fichier JSON à la fin du didacticiel qui, espérons-le, vous aidera également à créer vos propres conceptions alternatives. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!