Comment ajouter une info-bulle sur le site Web Elementor

Cherchez-vous un moyen d'ajouter une info-bulle à votre site Web Elementor? Si tel est le cas, vous avez atterri sur la bonne page.

Une info-bulle est également connue sous le nom d'info-bulle ou d'info-bulle qui affiche un extrait de texte qui apparaît au survol d'une image ou d'un texte spécifique. Ces info-bulles sont partout sur Internet ou sur votre bureau sous forme de texte alternatif, d'étiquettes ou de texte de titre.

Chaque fois que vous ouvrez Internet, vous pouvez voir une image, une icône ou un en-tête ; si vous placez le pointeur de votre souris sur ces champs, vous verrez une étiquette de texte qui est une info-bulle.

De même, en utilisant la fonction d'info-bulle, vous pouvez faire la même chose sur votre site Web.

Dans cet article, nous vous guiderons dans l'ajout d'une info-bulle et la personnalisation de son apparence à l'aide d'Elementor et de PowerPack Addons.

Alors sans plus tarder, allons-y.

Qu'est-ce qu'une info-bulle ?

Une info-bulle est essentiellement un petit élément d'interface utilisateur qu'un utilisateur rencontre lors de l'utilisation de navigateurs Internet, d'applications, d'écrans de bureau, etc.

Essayons de comprendre l'info-bulle par son nom lui-même.

Voyez, comme son nom l'indique, c'est un outil qui donne des conseils aux utilisateurs à propos d'un élément ou d'un champ chaque fois qu'il y a un déclencheur. Ce déclencheur peut être survolé ou cliqué, comme structuré lors de leur codage.

Ces info-bulles sont de petites zones de texte contenant une brève description ou un titre indiquant cet élément, ce champ ou cet outil particulier. Par exemple, reportez-vous à l'écran de votre bureau et regardez les icônes de la barre d'outils ou du menu Démarrer de Windows.

Comme vous pouvez le voir, l'application dans le " menu Démarrer de Windows " affiche une petite zone de texte indiquant des informations sur cette application. Maintenant, voici à quoi ressemble une info-bulle que vous pouvez trouver n'importe où sur votre système ou sur un site Web.

Donc, si vous voulez que ces info-bulles s'affichent partout sur votre site Web, vous devez les ajouter.

Comment les info-bulles améliorent l'expérience utilisateur sur vos sites Web

Voyons comment ces info-bulles peuvent vous aider à améliorer l'expérience utilisateur sur votre site Web.

Des info-bulles peuvent être ajoutées à des zones telles que :

• Les éléments cliquables tels que les images, les icônes, etc.
• Les titres survolent les textes ou les liens cliquables.
• Point d'accès aux images.
• Produits de commerce électronique (si vous exploitez un site Web WooCommerce.)

D'accord, pensez-y, si vous utilisez ces info-bulles dans tous ces domaines de votre site Web, à quel point ce sera facile et utile pour tous les utilisateurs qui visitent votre site Web.

Oui, les consommateurs trouveront cela pratique, et c'est parce que ces info-bulles aident les utilisateurs en leur offrant des indications de textes pertinents où qu'ils soient placés sur votre site Web, ce qui améliorera leur expérience utilisateur.

Comment ajouter des info-bulles dans Elementor à l'aide de PowerPack ?

À l'aide d'une info-bulle, vous pouvez présenter un message important par texte à vos utilisateurs pour une meilleure expérience utilisateur.

Pour ajouter une info-bulle à votre site Web, vous devez installer et activer Elementor et PowerPack Addons.

PowerPack Addons for Elementor propose plus de 80 widgets pratiques et créatifs, plus de 300 modèles prédéfinis et des extensions utiles pour améliorer l'apparence générale de votre site Web. L'une de ces extensions est une info- bulle que vous pouvez utiliser pour afficher des textes d'info-bulle sur votre site Web.

Voyons donc comment ajouter une info-bulle à votre site Web à l'aide d'Elementor et de PowerPack.

Activer l'extension d'info-bulle

Pour ajouter une info-bulle à votre site Web, activez d'abord l'extension d'info-bulle.

Ensuite, accédez à votre tableau de bord WordPress, accédez à Elementor et cliquez sur PowerPack.

Ensuite, accédez à la section Extensions et activez la fonction Info- bulles .

Une fois cela fait, appuyez sur le bouton Enregistrer les modifications .

Activer la fonctionnalité d'info-bulle dans Elementor

Pour ajouter une info-bulle à un widget/section spécifique sur votre site Web Elementor, ouvrez votre page dans l'éditeur Elementor. Sélectionnez l'élément où vous souhaitez afficher l'infobulle, puis allez dans l' onglet Avancé > PowerPack ; activez maintenant la fonctionnalité " Info -bulle" .

Enfin, la fonction d'info-bulle est activée avec succès pour être affichée sur la page de votre site Web.

Personnaliser la fonctionnalité d'info-bulle

Maintenant que vous avez activé la fonctionnalité d'info-bulle, examinons ses fonctionnalités que vous pouvez personnaliser pour afficher un texte d'info-bulle attrayant.

Une fois que vous avez activé la fonction d'info-bulle, toutes les options de personnalisation apparaîtront que vous pouvez utiliser pour améliorer son apparence générale.

Voyons quels sont tous les paramètres d'info-bulle que vous obtiendrez avec cette fonctionnalité :

• Contenu de l'info-bulle : ajoutez le contenu que vous souhaitez afficher dans l'info-bulle.
• Cible : grâce à cette option, vous pouvez sélectionner la cible en tant qu'élément actuel ou en tant que sélecteur personnalisé.
• Déclencheur : sélectionnez le déclencheur souhaité parmi les options disponibles, telles que survoler ou cliquer sur .
• Position de l'info-bulle : choisissez la position de l'info-bulle en haut , en bas , à gauche ou à droite .
• Afficher la flèche : sélectionnez une option pour afficher ou non une flèche.
• Animation : à l'aide de cette fonctionnalité, vous pouvez appliquer une animation à l'info-bulle à partir des options disponibles telles que fondu , chute , croissance , glissement ou swing .
• Distance : cette option peut ajuster la distance entre le point chaud et l'info-bulle.
• Index Z : Avec cette option, vous pouvez ajuster la valeur de l'index Z pour l'info-bulle.

Maintenant que vous avez personnalisé tous les paramètres d'info-bulle, passons à l'étape suivante.

Voyons toutes les options de style disponibles pour la fonctionnalité d'info-bulle :

• Couleur d'arrière-plan : personnalisez la couleur d'arrière-plan de l'info-bulle à l'aide de cette option.
• Couleur du texte : cette fonctionnalité peut être utilisée pour personnaliser la couleur du texte de l'info-bulle.
• Typographie : le texte de la typographie de l'info-bulle peut être personnalisé à l'aide de cette option.
• Box Shadow : vous pouvez activer la fonction d'ombre de la boîte avec cette option pour améliorer son apparence.
• Type de bordure : si vous souhaitez ajouter une bordure à l'info-bulle, vous pouvez utiliser cette option. Choisissez un type de bordure parmi les options disponibles telles que plein , pointillé , pointillé , doublé et rainuré .
• Rayon de la bordure : si vous avez appliqué une bordure à l'info-bulle, vous pouvez ajuster son rayon à l'aide de cette option.
• Rembourrage : vous pouvez ajuster le rembourrage de l'info-bulle ; cela permettra un espacement entre le texte de l'info-bulle et la bordure.
• Largeur : vous pouvez également ajuster la largeur de l'info-bulle avec cette option.

Après avoir personnalisé toutes ces fonctionnalités, l'info-bulle que nous venons de créer ressemblera à ceci.

Emballer!

Donc, comme nous en avons discuté, l'ensemble du processus pour ajouter une info-bulle dans un site Web Elementor à l'aide de PowerPack Addons. Cependant, cela peut également être fait via le codage; si vous êtes un codeur professionnel.

Nous espérons que ce didacticiel vous a aidé à ajouter une info-bulle à votre site Web Elementor. Cliquez ici pour obtenir des modules complémentaires PowerPack Elementor afin de créer des info-bulles étonnantes et de nombreuses autres sections sur votre site Web Elementor.

Si vous concevez votre page Elementor et cherchez des moyens d'ajouter des polices personnalisées, l'article Comment ajouter des polices personnalisées aux sites Web Elementor vous guidera.

Si vous avez rencontré des problèmes, n'hésitez pas à déposer vos questions dans la section des commentaires.

Rejoignez-nous sur Twitter, Facebook et YouTube.