Comment étiqueter une image de fond avec des info-bulles engageantes dans Divi

L'ajout d'info-bulles pour étiqueter une image d'arrière-plan est un moyen créatif d'engager les visiteurs avec des informations précieuses sur votre produit ou service. L'idée de base est de positionner des icônes (ou du texte) à des emplacements spécifiques sur l'image (comme une carte google avec des repères). Et si vous profitez des effets de survol de Divi, vous pouvez révéler du texte supplémentaire lorsque vous survolez une icône pour créer des info-bulles attrayantes.

Dans ce didacticiel, je vais vous montrer comment étiqueter une image d'arrière-plan avec des textes de présentation qui serviront d'info-bulles informatives sur votre produit. Pour ce faire, j'utiliserai la page de destination Fitness Gym pour étiqueter une image d'arrière-plan avec des informations sur la qualité de la forme physique.

Commençons.

Un petit aperçu

Voici un aperçu de la conception que nous allons construire dans ce tutoriel.

De quoi as-tu besoin

Pour ce tutoriel, vous aurez besoin des éléments suivants :

• Le thème Divi
• La page de destination Fitness Gym du pack de mise en page Fitness Gym (disponible à partir du Divi Builder)
• Une image à utiliser pour votre image d'arrière-plan qui est exactement 320px par 507px. N'hésitez pas à faire glisser celui-ci sur votre bureau et à l'utiliser pour ce didacticiel.
  

Préparation de la mise en page prédéfinie

Pour commencer, créez une nouvelle page, ajoutez un titre, puis déployez Visual Builder. Sélectionnez ensuite « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, sélectionnez la mise en page de la page de destination Fitness Gym et cliquez sur « Utiliser cette mise en page ».

Une fois la mise en page chargée sur la page, faites défiler jusqu'à la quatrième section avec la rangée à deux colonnes intitulée « Programmes en vedette » dans la colonne de droite. Nous allons ajouter notre image de fond avec des info-bulles dans la colonne de gauche de cette ligne.

Utilisez l'éditeur en ligne pour remplacer le texte du titre dans la colonne de droite par « Smart Fitness ».

Ajout de l'image d'arrière-plan et personnalisation des paramètres de ligne

Avec cette conception, le dimensionnement et l'espacement sont cruciaux et devront être précis. Et, tout commence par la taille de notre image de fond. Comme mentionné précédemment, l'image que nous utilisons pour l'arrière-plan doit être de 320 pixels sur 507 pixels. Étant donné qu'une largeur de 320 pixels est un bon point de départ pour le mobile, cela nous permettra de rendre le design convivial pour les mobiles sans avoir à modifier la taille de notre image.

Ouvrez les paramètres de ligne et ajoutez l'image d'arrière-plan à la colonne 1. Mettez ensuite à jour les éléments suivants :

Colonne 1 Taille de l'image d'arrière-plan : taille réelle
Colonne 1 Position de l'image d'arrière-plan : Centre gauche
Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition

Ensuite, nous devons ajouter une largeur personnalisée à la ligne et supprimer l'espacement supérieur et inférieur.

Largeur personnalisée : 700 px
Rembourrage personnalisé : 0px en haut, 0px en bas

Le réglage de la largeur à 700px garantira que la ligne ne diminue pas sur des tailles d'écran plus petites avant le point d'arrêt de la tablette.

À ce stade, je pense que c'est une bonne idée d'aller de l'avant et de définir une hauteur spécifique pour la colonne 1 égale à la hauteur de l'image d'arrière-plan. De cette façon, nous savons que l'image restera visible si le contenu de la colonne n'expose pas l'image entière. Pour ce faire, accédez à l'onglet avancé et ajoutez le CSS personnalisé suivant dans l'élément principal de la colonne 1 :

height: 507px;

Maintenant, la hauteur de la colonne est égale à la hauteur de votre image et ne dépendra pas du contenu (ou des modules) que nous ajoutons à la ligne.

Ajout d'étiquettes d'info-bulle sur l'image d'arrière-plan à l'aide de Blurbs

Une fois notre image d'arrière-plan en place, nous pouvons commencer à ajouter nos textes de présentation qui seront positionnés et stylisés pour fonctionner comme des info-bulles. Allez-y et ajoutez un module de présentation à la colonne 1 et mettez à jour les paramètres de présentation suivants :

Titre : « Focus »
Contenu : « La clé du succès !
Utiliser l'icône : Oui
Icône : voir capture d'écran

Il est important de limiter le titre et le contenu à quelques mots seulement, car nous voulons pouvoir insérer l'intégralité du texte de présentation dans l'image d'arrière-plan.

Ensuite, vous allez mettre à jour les paramètres de conception. Il s'agit d'une conception plus avancée d'un texte de présentation, il y a donc beaucoup d'options à modifier ainsi que quelques effets de survol qui révéleront le contenu du texte en survol. Mettez à jour les paramètres de conception de texte de présentation suivants :

Couleur de l'icône : #edf000
Icône de cercle : OUI
Couleur du cercle : rgba(0,0,0,0)
Afficher la bordure du cercle : OUI
Couleur de la bordure du cercle (par défaut) : rgba(0,0,0,0)
Couleur de la bordure du cercle (survol): #edf000
Placement des images/icônes : à gauche
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 40 px

Continuez à ajuster les paramètres de conception comme suit :

Poids de la police du titre : gras
Couleur du texte du titre (par défaut) : rgba(0,0,0,0)
Couleur du texte du titre (par défaut) : #edf000
Couleur du corps du texte (par défaut) : rgba(0,0,0,0)
Couleur du corps du texte (par défaut) : #ffffff

(Notez que les couleurs du texte par défaut sont complètement transparentes afin de les masquer jusqu'à ce que vous survoliez le texte de présentation.)

Marge personnalisée : 15 pixels en haut, 0 pixels en bas, 90 pixels à gauche
Rembourrage personnalisé : 5 pixels en haut, 5 pixels en bas, 5 pixels à droite

(La marge personnalisée est la façon dont vous positionnez l'icône de présentation à un emplacement spécifique sur l'image.)

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -154px
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre (par défaut) : rgba(0,0,0,0)
Couleur de l'ombre (survol): #1e2441

(L'ombre de la boîte est un moyen créatif d'ajouter une couleur d'arrière-plan derrière le contenu du texte de présentation. Par défaut, l'ombre de la boîte est complètement transparente mais montrera une belle couleur bleue au survol.)

Maintenant, allez voir le résultat final de votre premier texte de présentation pour vous assurer que l'effet de survol et le design sont corrects.

Ensuite, nous pouvons dupliquer le module de présentation pour créer notre deuxième étiquette d'info-bulle. Après avoir dupliqué le texte de présentation, vous pouvez mettre à jour le contenu avec le texte de votre choix (restez court). Ensuite, tout ce que vous avez à faire est de positionner l'info-bulle en utilisant une marge personnalisée différente comme suit :

Marge personnalisée : 0px en haut, 0px en bas, 15px à gauche

Pour créer le troisième texte de présentation, vous pouvez dupliquer le deuxième texte de présentation.

Pour ce troisième texte de présentation, nous allons manquer de place sur le côté droit de notre image donc nous n'aurons vraiment pas beaucoup de place pour le contenu. Nous pourrions utiliser une marge négative pour étendre le texte de présentation à l'extérieur de l'image, mais cela s'étendrait également au-delà de la taille d'écran de 320 pixels sur mobile. Nous allons donc introduire quelques petits extraits de code pour retourner notre contenu de présentation de sorte que l'icône soit à droite et le texte à gauche. Pour ce faire, ouvrez les paramètres de présentation et, sous l'onglet Avancé, ajoutez le CSS personnalisé suivant.

Élément principal CSS :

direction: rtl;

CSS de l'image de présentation :

padding-left: 15px;

Si vous ne l'avez pas remarqué, l'icône est maintenant à droite. Il ne vous reste plus qu'à positionner le texte de présentation en utilisant la marge personnalisée suivante :

Marge personnalisée : 35 pixels en haut, 0 pixels en bas, 0 pixels à gauche

Nous devons également ajuster l'ombre de la boîte pour qu'elle vienne de la gauche au lieu de la droite comme suit :

Position horizontale de l'ombre de la boîte : 150 px

Vérifiez maintenant l'info-bulle inversée sur le site en direct.

Pour le dernier texte de présentation, copiez le premier texte de présentation en haut de la colonne et collez-le sous le troisième texte de présentation.

Mettez ensuite à jour la marge comme suit :

Marge personnalisée : 0 pixels en haut, 100 pixels à gauche

Découvrez maintenant le résultat final de la conception!

Et découvrez ces effets de survol d'info-bulle !

Est-il réactif ?

Cette conception a été construite avec le mobile à l'esprit dès le début. L'image a une largeur de 320px qui est la largeur de la plupart des petits smartphones. Et parce que nous avons tout dimensionné et positionné à l'aide d'unités de longueur de pixel, le design (y compris les info-bulles) ne bouge pas lorsque nous ajustons la taille du navigateur.

Cependant, vous devrez peut-être faire une autre chose pour vous assurer et maximiser la largeur de l'image sur les petits écrans de téléphone. Par défaut, votre ligne aura une largeur de 80 % sur mobile, donc pour atteindre 100 %, vous pouvez l'ajouter en tant que CSS personnalisé à l'élément principal de votre ligne comme suit :

width: 100%;

Votre largeur personnalisée de 700 pixels servira toujours de largeur maximale sur le bureau, mais sera désormais de 100 % sur le mobile.

Dernières pensées

Étiqueter une image d'arrière-plan avec des info-bulles et des effets de survol comme celui-ci peut ajouter un élément de conception professionnelle qui engage votre public avec des informations utiles. Et je suis sûr qu'il existe plusieurs façons d'utiliser ce concept pour d'autres cas d'utilisation. Mais cela présente des défis si vous envisagez de conserver la conception sur mobile également. L'astuce consiste à penser d'abord au mobile et à planifier à l'avance. J'espère que cela servira d'inspiration pour de futurs projets sur la route. Si quoi que ce soit, au moins vous savez comment créer un texte de présentation avec une icône ou la droite :).

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!