¿Cómo hacer que su sitio sea atractivo para los visitantes? Esta pregunta preocupa a casi todos los propietarios de recursos de Internet: comerciantes, blogueros, propietarios de pequeñas y grandes empresas, viajeros y simplemente personas creativas que tienen algo que contarle al mundo.
¿Por qué un sitio web debe ser hermoso y funcional?
La cantidad de visitas depende del tema del sitio y su público objetivo, el interés de las personas en un producto en particular, la inversión, la promoción, el contenido y muchos otros factores. Pero no se puede negar que el sitio es "recibido por la ropa". Es la primera y principal página del recurso que es su cara, la tarjeta de visita, mediante la cual el visitante debe saber si quiere dedicar su tiempo a seguir viendo el contenido.
¡Y no hay lugar para el error! Según la investigación de una de las universidades técnicas de los EE. UU., el visitante obtiene la primera impresión del sitio en menos de un segundo. En promedio, una persona “escanea” un sitio en 3 segundos. ¡¿Velocidad del rayo, verdad?!
Hasta el 70% del éxito del recurso depende del aspecto de la página principal. Lo primero que la gente nota eslogo, pero el segundo es la navegación. Y si todo está más o menos claro con el logotipo, vale la pena romperse la cabeza con la navegación, el menú y la comodidad de la ergonomía del sitio. Surge una pregunta razonable: "¿Cómo decorar su sitio, hacerlo lo más funcional y conveniente posible, pero al mismo tiempo hermoso?" Hay muchas ideas inusuales que ofrecer, pero una de las más interesantes es la información sobre herramientas.
¿Qué son las sugerencias? Además de ser un gran mecanismo para mejorar la funcionalidad del sitio, la información sobre herramientas es una herramienta que permite al usuario ver una explicación de una imagen en particular al pasar el mouse sobre un ícono, palabra o imagen.
Herramientas para trabajar con información sobre herramientas
Bootstrap es la mejor herramienta para crear información sobre herramientas. Es un conjunto de plantillas fácil de aprender para crear aplicaciones y sitios web escritos en HTML, CSS, Sass y JavaScript.
Para ser específicos, la información sobre herramientas utiliza uno de los elementos gráficos de la plantilla de Bootstrap: información sobre herramientas.
El marco Bootstrap se creó para "Twitter" y originalmente se llamó "Twitter Blueprint". Después de algunos cambios en 2012, recibió una cuadrícula de 12 columnas, se volvió adaptable y adquirió el nombre familiar - Tooltip. Una información sobre herramientas es un elemento que aparece cuando se desplaza sobre un elemento específico en la pantalla del monitor.
Crear una pista
Puede crear una información sobre herramientas de Bootstrap usando atributosdatos, así como activando los elementos "Java Script". Hay dos formas principales de crear una información sobre herramientas HTML Bootstrap. La esencia del primero es aplicar el atributo y el título del atributo (título), que contendrá el texto de la pista. La información sobre herramientas aparecerá en la parte superior (configuración predeterminada). Vale la pena recordar que la información sobre herramientas debe inicializarse, ya que la inicialización automática ha quedado obsoleta en el "arranque de Twitter" por motivos de rendimiento.
Para inicializar la información sobre herramientas, se utiliza un JavaScript especial, en el que el método de información sobre herramientas se restaura para todos los elementos que tienen un atributo. La esencia del segundo método es activar una información sobre herramientas utilizando el código "JavaScript" con la participación de la biblioteca jQuery escribiendo una clase de herramienta que incluye una información sobre herramientas. El método es similar al primero, excepto por el método de selección de elementos. Puede habilitar sugerencias en "Java Script" de la forma que se muestra a continuación.
Ejemplo de información sobre herramientas de Bootstrap
Hay cuatro opciones principales para colocar la información sobre herramientas: en los bordes izquierdo y derecho, y encima y debajo del elemento.
Pista de arriba
Pista correcta
Pista en la parte inferior
Pista izquierda
Uso de información sobre herramientas
Hay muchos usos para Bootstrap Tooltip. Puede insertar información sobre herramientas para que el usuario pueda comprender la traducción del texto de un idioma extranjero en el texto. La información sobre herramientas también se puede utilizar como una herramienta para ayudar al usuario a comprender el significado de los botones en el panel cuando se desplaza sobre ellos. Las plantillas de Bootstrap Tooltip a menudo se usan en los sitios web de varias organizaciones para crear una suscripción a las noticias de la compañía. Esto mantiene a los clientes actualizados y también permite que los visitantes reciban nueva información, como tasas de descuento, ofertas, cambios dentro de la empresa.
Considere un ejemplo en el que un usuario necesita ingresar su dirección de correo electrónico para suscribirse a un boletín. La tarea de asegurar que la audiencia del cliente se suscriba a las noticias se logra más fácilmente usando HTML5 y el atributo requerido. La sugerencia de información sobre herramientas en este caso es necesaria para que el usuario comprenda la secuencia de acciones. Por ejemplo, después de ingresar la dirección de correo electrónico, marqué la casilla: "Acepto recibir noticias de la empresa en mi dirección de correo electrónico". A continuación se muestra un ejemplo del código del formulario.
Instalar este código en HTML Bootstrap Tooltip es fácil. Pero los beneficios son significativos. Ahora los consumidores conocen todas las novedades de la empresa. Este es un tipo de publicidad gratuita.
Principales errores al crear ventanas emergentespistas
¿Qué hacer si Bootstrap Tooltip no funciona? El primer y principal error en el que el atributo de información sobre herramientas no funcionará es si la información sobre herramientas no está habilitada. Para activarlo, debe usar un código especial.
Este método le permite inicializar absolutamente toda la información sobre herramientas en una página web.
El segundo error común es no tener jQuery en el encabezado.
Hay una condición necesaria para que el enlace funcione correctamente: se debe especificar una función de procesamiento de datos como "Java Script".
Propiedades de información sobre herramientas
En esencia, el componente Información sobre herramientas está diseñado para mostrar información sobre herramientas cuando mueve el puntero del mouse sobre una u otra parte de la página. Pero, además de la ubicación de la información sobre herramientas a la derecha, izquierda y arriba con la ayuda, la información sobre herramientas tiene las siguientes propiedades:
- Activo. El uso de la propiedad verdadera en la información sobre herramientas de Bootstrap permite que se muestre la información sobre herramientas, mientras que establecer la misma propiedad en falso significa que no se puede mostrar información sobre herramientas.
- AutoPopDelay es el momento en que se muestran las sugerencias.
- AutoPopRetraso. Representa la cantidad de tiempo que el cursor del mouse debe estar sobre un elemento para que aparezca la información sobre herramientas.
- EsBalón. Si el valor de la información sobre herramientas HTML Bootstrap Tooltip es verdadero, la información sobre herramientas cambiará a una nube.
- Icono de información sobre herramientas. Representa el carácter que se muestra en la ventana.pistas.
Información sobre herramientas
Para crear hermosas herramientas de información, por ejemplo, en un sitio creado en Wordpress, no es necesario conocer a fondo el idioma de los desarrolladores web. Es suficiente saber sobre la existencia de un complemento (extensión) como Tooltipster. Por el nombre, está claro que este complemento se basa en Tooltip y es sorprendentemente similar en sus propiedades y propósito. ¿Para qué sirve este complemento? Le permite crear el marcado HTML necesario dentro de la información sobre herramientas.
El trabajo del complemento se basa en la inserción de accesos directos en la página. Contiene todos los atributos básicos de HTML Bootstrap Tooltip: contenido (data-tooltip-content), título, posición, activador, etc. Esto le permite cambiar el tema, la fuente, el tamaño de la información sobre herramientas, el color, insertar una imagen y más.
