Has visto información sobre herramientas por todas partes. Pase el cursor sobre un icono de la barra de herramientas en Google Docs y una pequeña etiqueta le indicará lo que hace ese botón. Esa es una información sobre herramientas. En WordPress, la información sobre herramientas le permite agregar breves sugerencias que aparecen cuando alguien pasa el cursor (o hace clic) en un elemento de su página. Sin bienes raíces de página adicionales, sin diseño desordenado.
Master Addons para Elementor le brinda dos formas de agregar información sobre herramientas: Elemento de información sobre herramientas, un widget independiente que se coloca en la página y el Extensión de información sobre herramientas, que adjunta información sobre herramientas a cualquier widget, sección o contenedor de Elementor que ya exista. Esta guía cubre ambos métodos, cuándo usar cada uno y cómo diseñarlos.
Tabla de contenidos
¿qué son los consejos sobre herramientas y por qué son importantes?
Una información sobre herramientas es un mensaje breve que aparece cuando un visitante pasa el cursor sobre un elemento específico de su página. En los sitios de WordPress, la información sobre herramientas tiene algunos propósitos prácticos:
- Explique los términos sin romper el flujo. Si su contenido utiliza jerga, una información sobre herramientas permite a los lectores obtener una definición rápida sobre cómo pasar el cursor sin interrumpir el párrafo.
- Agregue contexto a imágenes e íconos. Cuando muestra íconos de productos, fotos de miembros del equipo o íconos de funciones, la información sobre herramientas proporciona detalles adicionales sin ocupar espacio visual.
- Mantenga las páginas limpias. En lugar de incluir cada pieza de información en el diseño visible, la información sobre herramientas oculta detalles secundarios hasta que el lector realmente los desea.
- Mejorar el compromiso. Los elementos interactivos, como la información sobre herramientas, alientan a los visitantes a explorar su contenido. Las páginas que invitan a la interacción tienden a mantener la atención por más tiempo.
Lo que necesitarás
- WordPress instalado en su sitio
- Complementos maestros para Elementor instalado y activado. La versión gratuita cubre el elemento Tooltip; la extensión Tooltip necesita Complementos maestros Pro.
- Creador de páginas Elementor (gratis o profesional)
Master Addons es un complemento de WordPress con Más de 80 widgets y extensiones para Elementor, incluidas ambas funciones de información sobre herramientas que se tratan aquí.
Elemento de información sobre herramientas versus extensión de información sobre herramientas: ¿cuál debería utilizar?
Resuelven diferentes problemas. Elegir el correcto ahorra tiempo.
| Característica | Elemento de información sobre herramientas | Extensión de información sobre herramientas |
|---|---|---|
| Qué es | Un widget Elementor independiente | Una extensión que funciona en cualquier widget |
| Trabaja en | Texto, imágenes e íconos (dentro del widget de información sobre herramientas) | Cualquier contenedor, sección o elemento de Elementor |
| Mejor para | Creación de bloques de contenido de información sobre herramientas dedicados | Agregar información sobre herramientas a elementos de página existentes |
| Cómo acceder | Arrastre y suelte desde el panel de widgets de Elementor | Habilite desde la pestaña Avanzado de cualquier widget |
| Tipos de contenido | Información sobre herramientas de texto, información sobre herramientas de imagen, información sobre herramientas de iconos | Información sobre herramientas basada en texto sobre cualquier elemento |
| Caso de uso | Quiere crear una sección diseñada específicamente en torno a información sobre herramientas | Quiere agregar información rápida sobre herramientas a un botón, encabezado, imagen o cualquier widget que ya esté en su página |
Versiunea scurtă:
- ¿necesita agregar información sobre herramientas a un encabezado, botón o cualquier widget que ya esté en su página? Utilice el Extensión de información sobre herramientas.
- ¿necesita un bloque de contenido dedicado donde los usuarios pasen el cursor sobre texto, imágenes o íconos específicos para ver el contenido de información sobre herramientas? Utilice el Elemento de información sobre herramientas.
Puedes usar ambos en la misma página. No entran en conflicto entre sí.
Método 1: cómo agregar información sobre herramientas en Elementor usando el elemento de información sobre herramientas
El Elemento de información sobre herramientas es un widget independiente. Lo arrastras a tu página y los usuarios pasan el cursor sobre texto, una imagen o un ícono para revelar un mensaje de información sobre herramientas.
Utilice esto cuando desee crear información sobre herramientas de imágenes, información sobre herramientas de texto o información sobre herramientas de iconos como una sección dedicada de su página.
Paso 1: abre tu página en Elementor
Desde su panel de WordPress, navegue hasta la página que desea editar y haga clic Editar con Elementor.
Paso 2: busque el widget Tooltip
En el panel de widgets de Elementor en el lado izquierdo, escriba “Consejo de herramienta” en la barra de búsqueda. El Información sobre herramientas de MA el widget aparece en la sección Addones maestros. Arrástrelo a su página donde desea que aparezca la información sobre herramientas.
Paso 3: elige tu tipo de contenido
Haga clic en el widget para abrir su configuración. Bajo el Contenido pestaña, la Tipo de contenido la opción te da tres opciones:
- Texto. Los visitantes pasan el cursor sobre su texto para ver el mensaje de información sobre herramientas.
- Imagen. Los visitantes pasan el cursor sobre una imagen para ver la información sobre herramientas.
- Icono. Los visitantes pasan el cursor sobre un icono para revelar información adicional.
Elija el tipo de contenido que se ajuste a su caso de uso.
Paso 4: configure el contenido de la información sobre herramientas
Después de elegir su tipo de contenido, configure ambas partes:
El contenido desencadenante (lo que ven los visitantes en la página):
- Para texto: ingrese la palabra o frase sobre la que se inclinarán los visitantes
- Para Imagen: cargue una imagen desde su biblioteca multimedia de WordPress
- Para Icono: elija un icono de la biblioteca de iconos
El contenido de la información sobre herramientas (lo que aparece al flotar):
- Ir al Configuración de información sobre herramientas sección
- Ingrese el texto de información sobre herramientas en el editor integrado
- Puede formatear el texto con negrita, cursiva, enlaces y más
Paso 5: configure la dirección y la velocidad de la información sobre herramientas
En Configuración de información sobre herramientas, establezca cómo aparece la información sobre herramientas:
- Dirección de información sobre herramientas. Elija dónde aparece la información sobre herramientas en relación con el disparador: superior, inferior, izquierda o derecha.
- Velocidad de información sobre herramientas. Establezca la velocidad de la animación en milisegundos. Los valores más bajos hacen que parezca más rápido.
Consejo: Mantenga la velocidad de la información sobre herramientas entre 300 y 500 ms. Demasiado rápido se siente abrupto, demasiado lento se siente insensible.
Paso 6: diseña tu información sobre herramientas
Cambiar al Estilo pestaña para personalizar el aspecto de su widget de información sobre herramientas Elementor:
- Ancho máximo del contenido. Controla qué tan ancho puede llegar a ser la caja de información sobre herramientas.
- Color de fondo. Establezca el fondo de información sobre herramientas.
- Color del texto. Cambie el color de fuente de la información sobre herramientas.
- Tipografía. Ajuste la familia de fuentes, el tamaño, el peso y el espaciado.
- Sombra de caja. Añade profundidad con un efecto de sombra.
- Frontera. Agregue bordes y establezca el radio del borde para esquinas redondeadas.
- Acolchado. Controle el espacio entre los bordes de texto y de información sobre herramientas.
Puedes establecer diferentes estilos para el normal y flotar estados para agregar retroalimentación visual.
Debajo de los estilos generales, el Estilos de información sobre herramientas la sección le brinda control sobre la burbuja misma. Establezca el ancho de la información sobre herramientas en píxeles, elija colores de fondo y texto, ajuste la tipografía, configure el relleno en los cuatro lados, elija un tipo de borde, establezca el radio del borde para esquinas redondeadas, controle la distancia entre el disparador y la burbuja, alinee el texto dentro de la información sobre herramientas y agregue una sombra de cuadro para mayor profundidad.
Para obtener un tutorial completo de cada configuración, consulte Información sobre herramientas Documentación de elementos o mira el vídeotutorial.
Método 2: cómo agregar información sobre herramientas a cualquier widget de Elementor usando la extensión de información sobre herramientas
El Extensión de información sobre herramientas funciona de manera diferente al elemento. En lugar de ser un widget independiente, agrega un Información sobre herramientas sección a la pestaña Avanzado de cada elemento Elementor. Seleccione cualquier widget, contenedor, columna o sección que ya exista en su página, active el interruptor, escriba su texto y los visitantes verán una pequeña burbuja cuando pasen el cursor sobre ese elemento. Cada elemento lleva su propia información sobre herramientas, por lo que tres tarjetas seguidas pueden explicarse con texto diferente.
La extensión se divide en dos subpestañas: Ajustes para comportamiento (texto, ubicación, animación, disparador, sincronización) y Estilo para looks (colores, ancho, acolchado, tipografía).
Paso 1: habilite la extensión Tooltip
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. Información sobre herramientas se encuentra en el Widgets dinámicos grupo. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios en la parte superior, espere el aviso verde “Configuración guardada correctamente”.
Paso 2: abre tu página en Elementor
Navegue hasta la página que desea editar y haga clic Editar con Elementor.
Paso 3: selecciona cualquier elemento
Haga clic en cualquier elemento existente donde desee agregar información sobre herramientas. Esto funciona con encabezados, botones, imágenes, íconos, tablas de precios, contenedores, columnas, secciones y cualquier widget Elementor o elemento Master Addons. La sección de información sobre herramientas aparece en la pestaña Avanzado de cada elemento.
Paso 4: vaya a la pestaña Avanzado y habilite la información sobre herramientas
Con su elemento seleccionado, haga clic en Avanzado pestaña en el panel de configuración. Desplácese hacia abajo hasta encontrar el Información sobre herramientas sección con la insignia MA morada. Expandelo y voltea el Información sobre herramientas cambie a Sí. La subpestaña Configuración se abre primero.
Paso 5: configure los ajustes de información sobre herramientas
La subpestaña Configuración le brinda control sobre cómo se comporta la información sobre herramientas:
- Contenido: el texto de información sobre herramientas. Escríbalo o extráigalo de una etiqueta dinámica. Si su sitio tiene Elementor AI activado, el enlace Escribir con IA de Elementor también aparece aquí.
- Colocación: qué lado del elemento prefiere la burbuja: superior (el predeterminado), inferior, izquierdo o derecho.
- Sigue al cursor: hace que la información sobre herramientas siga al mouse en lugar de quedarse quieta. Útil para mapas, gráficos y diagramas donde cada área debajo del cursor necesita su propia etiqueta.
- Animación: cómo entra la burbuja. Siete opciones: Ninguna, Desvanecimiento, Cambio hacia adelante, Escala, Perspectiva y Efecto de relleno.
- Activador: qué abre la información sobre herramientas. Pase el cursor de forma predeterminada o haga clic para obtener sugerencias persistentes compatibles con la pantalla táctil.
- Duración y Retraso: la velocidad de animación en milisegundos y cuánto tiempo persiste la burbuja antes de cerrarse.
- Compensación X e Y: aleja la burbuja de su lugar predeterminado con una cantidad específica de píxeles.
- Flecha y tipo de flecha: agregue el pequeño puntero que conecta la burbuja al elemento, con opciones de estilo nítidas o redondas.
Paso 6: diseña la información sobre herramientas
Cambiar al Estilo subpestaña para que la burbuja coincida con su diseño en lugar de parecer un navegador predeterminado.
- Ancho máximo: limita el ancho de la burbuja, el texto tan largo se envuelve en lugar de extenderse por la pantalla.
- Texto, fondo y color de flecha: control total de color, incluido el puntero.
- Relleno, tipo de borde y radio de borde: la forma de la burbuja.
- Alineación de texto, sombras de caja y tipografía: termina el look con tu propia fuente y profundidad.
Paso 7: comprueba el resultado
Guarde y vea la página. Pase el cursor sobre el elemento y la información sobre herramientas se desvanece con el texto que escribió, utilizando la animación, los colores y el ancho que estableció. Aleje el cursor y se cerrará después del retraso. Repita para los demás elementos de la página.
Para obtener detalles completos de configuración, consulte el Documentación de extensión de información sobre herramientas o mira el vídeotutorial.
Casos de uso prácticos para cada método
Cuándo utilizar el elemento de información sobre herramientas
El elemento Tooltip es un bloque de contenido dedicado. Úselo cuando la información sobre herramientas sea el punto principal de la sección:
- Páginas de exhibición de funciones. Muestre las características del producto como íconos o imágenes con descripciones de información sobre herramientas.
- Secciones de glosario. Cree un glosario en línea donde los lectores pasen el cursor sobre los términos para ver las definiciones.
- Artículos de cartera. Agregue información sobre herramientas de imágenes a las miniaturas del portafolio que muestran los detalles del proyecto.
- Páginas del equipo. Coloque íconos o fotos con detalles de información sobre herramientas sobre los roles del equipo.
- Contenido educativo. Deje que los estudiantes pasen el cursor sobre palabras clave para ver explicaciones sin salir de la página.
Cuándo utilizar la extensión Tooltip
La extensión Tooltip agrega contexto a elementos que ya existen en su página:
- Tarjetas destacadas. Una frase de detalle extra sin alargar la carta.
- Tablas de precios. Explique qué cubre realmente el “apoyo prioritario”, justo donde la gente se pregunta. Ver nuestro Widget de tabla de precios para más.
- Botones e iconos. Etiquete controles solo con íconos para que nadie adivine.
- Miembros del equipo. Un dato divertido o una nota de rol sobre cada foto.
- Términos técnicos. Definiciones breves sobre jerga, más económicas que una página de glosario.
Combinando ambos métodos
Puede utilizar ambos en la misma página. Por ejemplo, use el elemento Tooltip para crear una sección de comparación de funciones donde los visitantes pasan el cursor sobre los íconos para conocer cada función, luego use la extensión Tooltip en su botón CTA en la parte inferior para agregar una información sobre herramientas de “Prueba gratuita de 14 días, no se requiere tarjeta de crédito”.
No hay conflicto entre los dos. Tienen propósitos diferentes y pueden coexistir en cualquier página.
Mejores prácticas de información sobre herramientas para WordPress
- Mantenga breve el texto de información sobre herramientas. Apunta a 1-2 oraciones. Si necesita más que eso, la información probablemente pertenezca a la página misma, no oculta en la información sobre herramientas.
- Utilice un posicionamiento consistente. Elija una dirección (arriba o abajo funciona mejor en la mayoría de los casos) y manténgala en su sitio. Las posiciones de mezcla parecen aleatorias.
- No utilices demasiado la información sobre herramientas. Si cada elemento de su página tiene información sobre herramientas, los visitantes no se molestarán en pasar el cursor sobre ninguno de ellos. Úselos donde realmente agreguen valor.
- Asegúrese de que la información sobre herramientas funcione en dispositivos móviles. Hover no existe en las pantallas táctiles. Tanto el elemento Tooltip como la extensión Tooltip admiten un activador de clic, que funciona mejor para usuarios móviles. Pruebe sus información sobre herramientas en un teléfono antes de publicarlas.
- Haga coincidir el diseño de su sitio. Personalice los colores, fuentes y bordes de las información sobre herramientas para que coincidan con su tema existente. El estilo predeterminado de la información sobre herramientas puede verse fuera de lugar en un sitio pulido.
Elemento de información sobre herramientas versus extensión de información sobre herramientas: comparación rápida
| Característica | Elemento de información sobre herramientas | Extensión de información sobre herramientas |
|---|---|---|
| Configuración | Arrastra y suelta un nuevo widget | Habilite la pestaña Avanzado de cualquier widget existente |
| Activar contenido | Texto, imágenes, iconos (integrados en el widget) | Cualquier elemento Elementor: encabezados, botones, imágenes, secciones, contenedores |
| Mejor para | Bloques de contenido de información sobre herramientas dedicados | Agregar información sobre herramientas a diseños existentes |
| Plan | Gratis | Pro |
| Animaciones | 7 opciones: Ninguna, Desvanecimiento, Cambio hacia adelante, Cambio hacia, Escala, Perspectiva, Efecto de relleno | Mismas 7 opciones |
| Seguir cursor | Sí | Sí |
| Personalización | Control total del estilo | Control de estilo completo (subpestaña Estilo) |
| Múltiples información sobre herramientas por página | Sí | Sí (cada elemento tiene el suyo propio) |
| Curva de aprendizaje | Mínimo | Mínimo |
El elemento Tooltip viene gratis Complementos maestros para Elementor complemento. La extensión Tooltip es parte de Complementos maestros Pro.
Preguntas frecuentes
¿cómo agrego información sobre herramientas en WordPress sin un complemento?
Puede agregar información sobre herramientas básicas usando HTML agregando a title atributo a cualquier elemento (p. ej., <span title="Your tooltip text">Hover here</span>). Pero este método no ofrece control de estilo y se ve diferente entre los navegadores. Para obtener información sobre herramientas personalizadas y con estilo en WordPress, un complemento como Master Addons le brinda control total sobre el diseño, la animación y el posicionamiento.
¿puedo agregar información sobre herramientas a una imagen en Elementor?
Sí. Los complementos maestros ofrecen dos formas. Utilice el elemento de información sobre herramientas y seleccione “Imagen” como tipo de contenido para crear una información sobre herramientas de imagen dedicada. O utilice la extensión de información sobre herramientas en cualquier widget de Elementor Image para agregar información sobre herramientas a una imagen existente en su página.
¿funcionan las información sobre herramientas en dispositivos móviles?
La información sobre herramientas estándar basada en desplazamiento no funciona en las pantallas táctiles ya que no hay cursor para desplazarse. Tanto el elemento de información sobre herramientas de complementos maestros como la extensión de información sobre herramientas tienen un activador de clic, por lo que la información sobre herramientas se abre cuando alguien toca el elemento en un teléfono.
¿cuál es la diferencia entre una información sobre herramientas y una ventana emergente?
La información sobre herramientas es una pequeña pista basada en texto que aparece al pasar el cursor y desaparece cuando alejas el cursor. Una ventana emergente suele ser más grande, puede contener contenido enriquecido como imágenes, botones o formularios y, a menudo, requiere un clic para abrir y cerrar. El elemento Master Addons Tooltip puede incluir texto formateado, lo que lo hace flexible tanto para información sobre herramientas simple como para contenido flotante más rico.
¿las información sobre herramientas son buenas para SEO?
El contenido de información sobre herramientas se representa en HTML, por lo que los motores de búsqueda pueden rastrear el texto dentro de ellos. Sin embargo, dado que el contenido de información sobre herramientas está oculto de forma predeterminada y solo es visible al pasar el cursor, los motores de búsqueda pueden darle menos peso. No ocultes contenido importante en información sobre herramientas. Úselos para obtener información complementaria que agregue valor a la experiencia del usuario.
¿puedo usar Tooltip Element y Tooltip Extension en la misma página?
Sí. Funcionan de forma independiente y no entran en conflicto entre sí. Utilice el elemento de información sobre herramientas para bloques de contenido de información sobre herramientas dedicados y la extensión de información sobre herramientas para agregar información sobre herramientas rápida a cualquier widget de Elementor existente en la misma página.
Comience a agregar información sobre herramientas a su sitio de WordPress
Con los complementos maestros, obtienes dos opciones: Elemento de información sobre herramientas para crear contenido de información sobre herramientas dedicado con activadores de texto, imágenes e íconos, y el Extensión de información sobre herramientas para agregar información sobre herramientas a cualquier elemento Elementor existente en su página.
El elemento Tooltip funciona con el complemento gratuito y la extensión Tooltip necesita Pro. Si desea información sobre herramientas fijada en puntos específicos de una imagen, consulte Widget de hotspot de imagen (Pro).
Descargue complementos maestros para Elementor para empezar.
