Comment rendre votre site attractif pour les visiteurs ? Cette question inquiète presque tous les propriétaires de ressources Internet: commerçants, blogueurs, propriétaires de petites et grandes entreprises, voyageurs et simplement créatifs qui ont quelque chose à dire au monde.
Pourquoi un site Web doit-il être beau et fonctionnel ?
Le nombre de visites dépend du thème du site et de son public cible, de l'intérêt des gens pour un produit particulier, de l'investissement, de la promotion, du contenu et de nombreux autres facteurs. Mais on ne peut nier que le site est "accueilli par des vêtements". C'est la première et principale page de la ressource qui est son visage, la carte de visite, par laquelle le visiteur doit comprendre s'il veut passer son temps à visionner davantage le contenu.
Et il n'y a pas de place pour l'erreur ! Selon les recherches de l'une des universités techniques des États-Unis, le visiteur a une première impression du site en moins d'une seconde. En moyenne, une personne "scanne" un site en 3 secondes. La vitesse de l'éclair, n'est-ce pas ? !
Jusqu'à 70 % du succès de la ressource dépend de l'apparence de la page principale. La première chose que les gens remarquent estlogo, mais le second est la navigation. Et si tout est plus ou moins clair avec le logo, alors ça vaut le coup de se casser la tête sur la navigation, le menu et la commodité de l'ergonomie du site. Une question raisonnable se pose: "Comment décorer votre site, le rendre aussi fonctionnel et pratique que possible, mais en même temps beau?" Il existe de nombreuses idées inhabituelles à proposer, mais l'une des plus intéressantes est celle des info-bulles.
Qu'est-ce que les infobulles ? En plus d'être un excellent mécanisme pour améliorer la fonctionnalité du site, les info-bulles sont un outil qui permet à l'utilisateur de voir une explication pour une image particulière lorsqu'il survole une icône, un mot ou une image.
Outils pour travailler avec les info-bulles
Bootstrap est le meilleur outil pour créer des infobulles. Il s'agit d'un ensemble de modèles faciles à apprendre pour créer des applications et des sites Web écrits en HTML, CSS, Sass et JavaScript.
Pour être précis, les infobulles utilisent l'un des éléments graphiques du modèle Bootstrap - Tooltip.
Le framework Bootstrap a été créé pour "Twitter" et s'appelait à l'origine "Twitter Blueprint". Après quelques changements en 2012, il a reçu une grille à 12 colonnes, est devenu adaptatif et a acquis le nom familier - Tooltip. Une info-bulle est un élément qui apparaît lorsque vous survolez un élément spécifique sur l'écran du moniteur.
Créer un indice
Vous pouvez créer une info-bulle Bootstrap en utilisant des attributsdonnées, ainsi qu'en activant les éléments "Java Script". Il existe deux façons principales de créer une info-bulle HTML Bootstrap. L'essence de la première consiste à appliquer l'attribut et le titre de l'attribut (titre), qui contiendra le texte d'indication. L'info-bulle apparaîtra en haut (paramètre par défaut). Il convient de rappeler que l'info-bulle doit être initialisée, car l'initialisation automatique a été dépréciée dans le "bootstrap Twitter" pour des raisons de performances.
Afin d'initialiser les info-bulles, un JavaScript spécial est utilisé, dans lequel la méthode d'info-bulle est restaurée pour tous les éléments qui ont un attribut. L'essence de la deuxième méthode est d'activer une info-bulle en utilisant le code "JavaScript" avec la participation de la bibliothèque jQuery en écrivant une classe d'outils qui inclut une info-bulle. La méthode est similaire à la première, à l'exception de la méthode de sélection des éléments. Vous pouvez activer les astuces dans "Java Script" de la manière indiquée ci-dessous.
Exemple d'info-bulle Bootstrap
Il existe quatre options principales pour positionner les info-bulles: sur les bords gauche et droit, et au-dessus et en dessous de l'élément.
Indice d'en haut
Astuce à droite
Indice en bas
Indice de gauche
Utilisation des info-bulles
Il existe de nombreuses utilisations de l'info-bulle Bootstrap. Vous pouvez insérer des info-bulles afin que l'utilisateur puisse comprendre la traduction du texte d'une langue étrangère dans le texte. Les info-bulles peuvent également être utilisées comme un outil pour aider l'utilisateur à comprendre la signification des boutons du panneau lorsqu'il les survole. Les modèles d'info-bulles Bootstrap sont souvent utilisés sur les sites Web de diverses organisations pour créer un abonnement aux actualités de l'entreprise. Cela tient les clients informés et permet également aux visiteurs de recevoir de nouvelles informations, telles que des taux de réduction, des offres, des changements au sein de l'entreprise.
Prenons un exemple où un utilisateur doit saisir son adresse e-mail pour s'abonner à une newsletter. La tâche consistant à s'assurer que le public client s'abonne aux actualités est plus facilement réalisée à l'aide de HTML5 et de l'attribut requis. L'info-bulle dans ce cas est nécessaire pour que l'utilisateur comprenne la séquence d'actions. Par exemple, après avoir saisi l'adresse e-mail, j'ai coché la case: "J'accepte de recevoir les actualités de l'entreprise sur mon adresse e-mail". Vous trouverez ci-dessous un exemple de code de formulaire.
L'installation de ce code dans l'info-bulle HTML Bootstrap est simple. Mais les avantages sont importants. Désormais, les consommateurs connaissent toutes les actualités de l'entreprise. C'est une sorte de publicité gratuite.
Principales erreurs lors de la création de popupsconseils
Que faire si l'info-bulle Bootstrap ne fonctionne pas ? La première et principale erreur où l'attribut d'info-bulle ne fonctionnera pas est si l'info-bulle n'est pas activée. Pour l'activer, vous devez utiliser un code spécial.
Cette méthode permet d'initialiser absolument toutes les infobulles d'une page web.
La deuxième erreur courante est de ne pas avoir jQuery dans l'en-tête.
Il y a une condition nécessaire pour que le lien fonctionne correctement - une fonction de traitement de données comme "Java Script" doit être spécifiée.
Propriétés de l'info-bulle
À la base, le composant Tooltip est conçu pour afficher des info-bulles lorsque vous déplacez le pointeur de la souris sur l'une ou l'autre partie de la page. Mais, en plus de l'emplacement de l'info-bulle à droite, à gauche et en haut avec l'aide, l'info-bulle a les propriétés suivantes:
- Actif. L'utilisation de la propriété true dans l'info-bulle Bootstrap permet d'afficher les info-bulles, tandis que la définition de la même propriété sur false signifie qu'aucune info-bulle ne peut être affichée.
- AutoPopDelay est l'heure à laquelle les conseils sont affichés.
- AutoPopDelay. Représente la durée pendant laquelle le curseur de la souris doit passer au-dessus d'un élément pour que l'info-bulle apparaisse.
- EstBaloon. Si la valeur de l'info-bulle HTML Bootstrap Tooltip est true, l'info-bulle se transformera en nuage.
- ToolTipIcon. Représente le caractère affiché dans la fenêtreconseils.
Tooltipster
Afin de créer de belles infobulles, par exemple, sur un site créé sur Wordpress, il n'est pas nécessaire de connaître à fond le langage des développeurs web. Il suffit de connaître l'existence d'un plugin (extension) tel que Tooltipster. D'après son nom, il est clair que ce plugin est basé sur Tooltip et lui est étonnamment similaire dans ses propriétés et son objectif. A quoi sert ce plugin ? Il vous permet de créer le balisage HTML nécessaire dans l'info-bulle.
Le travail du plugin est basé sur l'insertion de raccourcis sur la page. Contient tous les attributs de base de l'info-bulle HTML Bootstrap: contenu (data-tooltip-content), titre, position, déclencheur, etc. Cela vous permet de modifier le thème, la police, la taille de l'info-bulle, la couleur, d'insérer une image, etc.
