Cómo agregar información sobre herramientas en el sitio web de Elementor

¿Está buscando una manera de agregar información sobre herramientas a su sitio web de Elementor? Si ese es el caso, has aterrizado en la página correcta.

Una información sobre herramientas también se conoce como ScreenTip o InfoTip que muestra un fragmento de texto que aparece al pasar el mouse sobre cualquier imagen o texto específico. Esta información sobre herramientas está en todas partes en Internet o en su escritorio como texto alternativo, etiquetas o texto de título.

Cada vez que abre Internet, puede ver cualquier imagen, ícono o encabezado; si pasa el puntero del mouse sobre estos campos, verá una etiqueta de texto que es una información sobre herramientas.

Del mismo modo, utilizando la función de información sobre herramientas, puede hacer lo mismo en su sitio web.

En este artículo, lo guiaremos a través de la adición de información sobre herramientas y la personalización de su apariencia con Elementor y PowerPack Addons.

Así que sin más preámbulos, sigamos adelante.

¿Qué es una información sobre herramientas?

Una información sobre herramientas es básicamente un pequeño elemento de la interfaz de usuario con el que se encuentra un usuario mientras usa navegadores de Internet, aplicaciones, pantallas de escritorio, etc.

Tratemos de entender la información sobre herramientas por su propio nombre.

Mira, como su propio nombre sugiere, es una herramienta que da consejos a los usuarios sobre un elemento o campo siempre que haya un disparador. Este disparador puede ser pasar el mouse por encima o hacer clic, según se estructuró al codificarlos.

Estos consejos son pequeños cuadros de texto que contienen una breve descripción o un título que indica ese elemento, campo o herramienta en particular. Por ejemplo, consulte la pantalla de su escritorio y mire los íconos en la barra de herramientas o el menú de inicio de Windows.

Como puede ver, la aplicación en el ' menú de inicio de Windows' muestra un pequeño cuadro de texto que indica información sobre esa aplicación. Ahora, así es como se ve una información sobre herramientas que puede encontrar en cualquier parte de su sistema o en un sitio web.

Entonces, si desea que esta información sobre herramientas se muestre en todo su sitio web, debe agregarla.

Cómo la información sobre herramientas mejora la experiencia del usuario en sus sitios web

Veamos cómo esta información sobre herramientas puede ayudarlo a mejorar la experiencia del usuario en su sitio web.

La información sobre herramientas se puede agregar a tales áreas en su sitio web como:

• Elementos en los que se puede hacer clic, como imágenes, iconos, etc.
• Títulos sobre textos o enlaces en los que se puede hacer clic.
• Punto de acceso a la imagen.
• Productos de comercio electrónico (si ejecuta un sitio web de WooCommerce).

De acuerdo, solo piénselo, si usa esta información sobre herramientas en todas estas áreas de su sitio web, qué fácil y útil será para todos aquellos usuarios que visiten su sitio web.

Sí, a los consumidores les resultará conveniente, y esto se debe a que esta información sobre herramientas ayuda a los usuarios al ofrecer indicaciones de textos relevantes en cualquier lugar de su sitio web, y esto mejorará su experiencia de usuario.

¿Cómo agregar información sobre herramientas en Elementor usando PowerPack?

Con la ayuda de una información sobre herramientas, puede mostrar un mensaje importante a través de texto a sus usuarios para una mejor experiencia de usuario.

Para agregar información sobre herramientas a su sitio web, debe instalar y activar los complementos Elementor y PowerPack.

PowerPack Addons para Elementor tiene más de 80 widgets prácticos y creativos, más de 300 plantillas prediseñadas y extensiones útiles para mejorar la apariencia general de su sitio web. Una de esas extensiones es una información sobre herramientas que puede usar para mostrar textos de información sobre herramientas en su sitio web.

Entonces, veamos cómo puede agregar información sobre herramientas a su sitio web usando Elementor y PowerPack.

Habilitar la extensión de información sobre herramientas

Para agregar una información sobre herramientas a su sitio web, primero habilite la extensión de información sobre herramientas.

A continuación, vaya a su panel de WordPress, navegue hasta Elementor y haga clic en PowerPack.

A continuación, vaya a la sección Extensiones y habilite la función Información sobre herramientas.

Una vez hecho esto, presione el botón Guardar cambios .

Habilite la función de información sobre herramientas en Elementor

Para agregar información sobre herramientas a cualquier widget/sección específica en su sitio web de Elementor, abra su página en el editor de Elementor. Seleccione el elemento donde desea mostrar la información sobre herramientas, luego vaya a la pestaña Avanzado > PowerPack ; ahora habilite la función 'Información sobre herramientas ' .

Finalmente, la función de información sobre herramientas se habilita con éxito para que se muestre en la página de su sitio web.

Personalizar la función de información sobre herramientas

Ahora que ha habilitado la función de información sobre herramientas, veamos las funciones que puede personalizar para mostrar un texto de información sobre herramientas atractivo.

Una vez que habilite la función de información sobre herramientas, aparecerán todas las opciones de personalización que puede usar para mejorar su apariencia general.

Veamos todas las configuraciones de información sobre herramientas que obtendrá con esta función:

• Contenido de información sobre herramientas: agregue el contenido que desea mostrar en la información sobre herramientas.
• Objetivo: con esta opción, puede seleccionar el objetivo como un elemento actual o como un selector personalizado.
• Activador: seleccione el activador que desee de las opciones disponibles, como pasar el cursor por encima o hacer clic .
• Posición de la información sobre herramientas: elija la posición de la información sobre herramientas como superior , inferior , izquierda o derecha .
• Mostrar flecha: seleccione una opción para mostrar una flecha o no.
• Animación: con esta función, puede aplicar animación a la información sobre herramientas desde las opciones disponibles, como desvanecimiento , caída , crecimiento , deslizamiento o oscilación .
• Distancia: esta opción puede ajustar la distancia entre el punto de acceso y la información sobre herramientas.
• Índice Z: con esta opción, puede ajustar el valor del índice Z para la información sobre herramientas.

Ahora que ha personalizado todas las configuraciones de información sobre herramientas, pasemos al siguiente paso.

Veamos todas las opciones de estilo disponibles para la función de información sobre herramientas:

• Color de fondo: personalice el color de fondo de la información sobre herramientas con esta opción.
• Color del texto: esta función se puede utilizar para personalizar el color del texto de la información sobre herramientas.
• Tipografía: el texto tipográfico de información sobre herramientas se puede personalizar con esta opción.
• Sombra de cuadro: puede habilitar la función de sombra de cuadro con esta opción para mejorar su apariencia.
• Tipo de borde: si desea agregar un borde a la información sobre herramientas, puede usar esta opción. Elija un tipo de borde entre las opciones disponibles, como sólido , punteado , discontinuo , doble y ranurado .
• Radio del borde: si ha aplicado un borde a la información sobre herramientas, puede ajustar su radio con esta opción.
• Relleno: puede ajustar el relleno para la información sobre herramientas; esto permitirá el espacio entre el texto de información sobre herramientas y el borde.
• Ancho: también puede ajustar el ancho de la información sobre herramientas con esta opción.

Después de personalizar todas estas funciones, la información sobre herramientas que acabamos de crear se verá así.

¡Terminando!

Entonces, como hemos discutido, todo el proceso para agregar una información sobre herramientas en un sitio web de Elementor usando PowerPack Addons. Sin embargo, esto también se puede hacer mediante codificación; si eres un codificador profesional.

Esperamos que este tutorial le haya ayudado a agregar información sobre herramientas a su sitio web de Elementor. Haga clic aquí para obtener PowerPack Elementor Addons para crear información sobre herramientas sorprendente y muchas otras secciones en su sitio web de Elementor.

Si está diseñando su página de Elementor y buscando formas de agregar fuentes personalizadas, el artículo Cómo agregar fuentes personalizadas a los sitios web de Elementor lo guiará.

Si ha tenido algún problema, no dude en dejar sus consultas en la sección de comentarios.

Únase a nosotros en Twitter, Facebook y YouTube.