Comment placer des infobulles de survol n'importe où sur votre page avec Divi
Publié: 2019-08-28Chaque 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 créer et placer des infobulles de survol n'importe où sur votre page avec Divi. C'est un excellent moyen de partager des informations secondaires avec vos visiteurs sans les inclure directement sur la page tout de suite.
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
Téléchargez GRATUITEMENT la mise en page des info-bulles de survol
Pour mettre la main sur la disposition des info-bulles de survol gratuit, vous devrez d'abord la télécharger en utilisant le 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 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.
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 !
Créer une nouvelle page à l'aide de la mise en page de la page d'accueil Dog Walker
Ajouter une nouvelle page
La première chose que vous devrez faire est de créer une nouvelle page en allant dans Pages > Ajouter un nouveau . Continuez en donnant un titre à votre page, en publiant la page et en passant à Visual Builder.
Télécharger la page de destination des promeneurs de chiens
Téléchargez ensuite la mise en page de la page de destination sur votre page. Bien que nous utiliserons ce pack de mise en page pour passer en revue la technique des info-bulles de survol, vous pouvez appliquer cette approche à tout type de mise en page sur laquelle vous travaillez.
Créer une conception d'info-bulles de survol
Ajouter une nouvelle ligne au bas de la section
Structure des colonnes (décidez du nombre d'info-bulles dont vous avez besoin)
Une fois que vous avez téléchargé la mise en page de la page de destination, il est temps de commencer à créer les info-bulles de survol. Nous les ajouterons à un endroit spécifique de la page, mais vous pouvez les placer n'importe où à l'aide des options de traduction de transformation. Localisez la section suivante sur votre page et ajoutez une ligne à trois colonnes au bas de celle-ci :
Largeur maximale de rangée
Pour nous assurer que les conceptions des info-bulles apparaissent au bon endroit, nous allons utiliser la même largeur maximale de ligne que celle utilisée pour la ligne qui vient au-dessus. Accédez aux paramètres de dimensionnement de la ligne et ajustez la largeur maximale en conséquence :
- Largeur maximale : 1280px
Espacement
Pour réduire l'espace occupé par le conteneur de lignes, nous allons supprimer le rembourrage supérieur et inférieur par défaut dans les paramètres d'espacement.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Débordements
Nous veillons également à ce que les débordements de la ligne soient visibles dans l'onglet avancé.
- Débordement horizontal : Visible
- Débordement vertical : Visibile
Ajouter un module de texte d'info-bulle à la colonne 1
Ajouter du contenu à la zone de contenu
Portée du point d'interrogation
Il est temps de commencer à créer le premier design d'info-bulle ! Nous utiliserons un module de texte. Nous allons ajouter un span (pour l'icône de l'info-bulle) et un div (pour le contenu de l'info-bulle) à l'intérieur de la zone de contenu. Cela nous donnera plus de liberté pour styliser individuellement l'icône de l'info-bulle de survol et le contenu de l'info-bulle. Commencez par ajouter la durée et attribuez-lui la classe « point d'interrogation ».
Info-bulle Div
Continuez en ajoutant un div à la zone de contenu avec la classe 'tooltip-content'. Ajoutez le contenu de l'info-bulle de votre choix dans cette div.
Paramètres de texte
Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :
- Police de texte : Open Sans
- Couleur du texte : #ffffff
Paramètres de texte H3
Modifiez également les paramètres de texte H3.
- Titre 3 Police : Amatic SC
- Titre 3 Couleur du texte : #ffffff
- Titre 3 Taille du texte : 30px
Dimensionnement
Nous jouons également avec la largeur et la hauteur du module pour créer l'effet de survol.
- Largeur : 300px
- Hauteur : 42px
Espacement
Ajoutez également un rembourrage supérieur.
- Rembourrage supérieur : 10px
Visibilité par défaut
Maintenant, dans l'état par défaut, nous voulons que tout ce qui se trouve sous l'icône de l'info-bulle soit masqué. C'est pourquoi nous masquerons les débordements dans l'onglet avancé.
- Débordement horizontal : masqué
- Débordement vertical : caché
Visibilité au survol
En vol stationnaire, cependant, nous voulons que tout apparaisse. Nous le ferons en rendant les débordements visibles au survol.
- Débordement horizontal : Visible
- Débordement vertical : visible
Ajouter un module de code sous le module de texte
Maintenant que nous avons stylisé le module, nous devons encore styliser le span et le div à l'intérieur de la zone de contenu en utilisant les classes CSS que nous lui avons attribuées. Ajoutez un module de code juste en dessous du module de texte de l'info-bulle.
Ajouter du code CSS aux divisions de style dans le module de texte
Ajoutez les lignes de code CSS suivantes pour styliser les différentes parties du module de texte :
<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}
.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>
Cloner le module de texte de l'info-bulle deux fois et le placer dans les colonnes restantes
Une fois que vous avez terminé la première colonne, vous pouvez cloner deux fois le module de texte de l'info-bulle et placer les doublons dans les deux colonnes restantes de la ligne.
Modifier le contenu de l'info-bulle
Assurez-vous de modifier le contenu de l'info-bulle de chaque doublon.
Modifier la position de l'info-bulle (à l'aide de Transform Translate)
Info-bulle n° 1
Enfin, nous devrons repositionner les info-bulles où nous voulons sur la page. Pour obtenir exactement le même résultat que celui affiché dans l'aperçu de cet article, ouvrez le premier module de texte d'info-bulle et appliquez les valeurs de traduction de transformation suivantes :
- À droite : -450px (ordinateur de bureau), -2000px (tablette), -1900px (téléphone)
Info-bulle n° 2
Passez à l'info-bulle du module de texte dans la deuxième colonne et modifiez les valeurs de traduction de la transformation comme suit :
- À droite : -400px (ordinateur de bureau), -1300px (tablette), -1250px (téléphone)
Info-bulle n°3
Faites la même chose pour le module de texte de l'info-bulle dans la colonne 3 et vous avez terminé !
- À droite : -500px (ordinateur de bureau), -600px (tablette et téléphone)
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 créer et placer des infobulles de survol n'importe où sur votre page sans avoir besoin d'un plugin supplémentaire. C'est un excellent moyen d'ajouter des informations supplémentaires sans les inclure directement sur votre page. Ce didacticiel de cas d'utilisation fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions, assurez-vous de laisser une question dans la section commentaire ci-dessous!
Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.