Una imagen suele explicar conceptos complejos mejor que mil palabras. Puede ampliar la imagen para ver todos los detalles del producto o artículo. Y a?adir puntos de información a la imagen puede hacerla más vívida e interesante.

Las zonas activas de imagen son una forma de presentar información. Llaman la atención del usuario sobre el producto e incitan a hacer clic o a comprar.Elementor El widget Image Hotspot facilita la consecución de este efecto.

En este artículo se describe cómo utilizar la función Elementor (utilizado como expresión nominal) Punto caliente Widget para crear zonas activas de imágenes. Antes de empezar, entienda qué es una zona activa de imagen.

?Qué es un punto caliente de imagen?

Las zonas activas de imagen son áreas en las que se puede hacer clic a?adidas a una imagen y que muestran información adicional o indicaciones de acción cuando el usuario hace clic en ellas. Puede superponer botones o formas en la imagen y establecer la ubicación exacta.

Tras hacer clic en la zona activa, se mostrará el contenido. Como se muestra en la imagen de abajo, la imagen está marcada con un signo más. Puede mostrar contenido como la descripción del producto, el precio o el enlace de salto.

Creación de zonas activas en imágenes con el widget de zonas activas de Happy Addons

Si su sitio web se basa en WordPress Construido por Elementor, esta característica es muy fácil de implementar. Basta con instalar Elementor y el plugin HappyAddons, una potente extensión de Elementor con cientos de widgets y decenas de funciones útiles.

Paso 1: Instalar los plugins Elementor y HappyAddons

HappyAddons es un plugin de extensión para Elementor, por lo que sus widgets están categorizados como widgets de Elementor.Hotspots es un widget premium para HappyAddons, asegúrate de tener instalados los siguientes plugins:

• Elementor
• HappyAddons
• HappyAddons Pro

Consejo: Después de utilizar HappyAddons Pro, no necesitará necesariamente el programa Elementor Pro.

Paso 2: Arrastra y suelta el widget Hotspot en el área de edición de Elementor.

existe Elementor Busque el widget HappyAddons Hotspots en el panel y arrástrelo y suéltelo en el lugar adecuado de la página.

Paso 3: Seleccione la imagen que necesita para a?adir hotspot

Haga clic en el área de carga de imágenes y seleccione una imagen existente o cargue una nueva.

Paso 4: A?ade zonas activas a tus imágenes

Una vez que hayas a?adido la imagen, verás que aparece un hotspot por defecto en la imagen. A continuación, en la pesta?a Contenido del panel de Elementor, busca la opción Spot. El primer hotspot se llama elemento #1 por defecto, haga clic en él para entrar en la configuración.

Haz clic en el botón "+ A?adir elemento" para a?adir más zonas activas.

Puedes personalizar cada zona activa una a una, a?adiendo texto, iconos e incluso insertando imágenes. Los detalles dependen de tu imagen de fondo.

Utiliza los ajustes de Posición X y Posición Y para mover con precisión la ubicación del hotspot.

A continuación, introduzca la información de la zona activa en la opción "Información sobre herramientas". Rellene el texto en el cuadro de párrafo y dele formato poniendo en negrita, cursiva, subrayado o a?adiendo un enlace.

Repita la misma operación para el resto de zonas activas.

Paso 5: Ajustar el estilo de la zona activa

Cada punto de acceso puede tener su propio estilo. En la Elementor En la pesta?a "Estilo" se puede ajustar lo siguiente:

• amplitud
• alto grado
• margen interior
• marco
• color
• color del texto
• Color de fondo del cuadro de entrada

Puede ajustarse libremente para satisfacer las necesidades visuales de la página.

Si necesita modificar el estilo del cuadro de información, haga clic en la opción Información sobre herramientas y siga ajustando los parámetros pertinentes hasta obtener el efecto adecuado.

Paso 6: A?adir extensiones mediante las opciones avanzadas

Desea a?adiranime?Cuáles son tus ajustes de fondo o de respuesta? Haz clic en el botón Opciones avanzadas para obtener más información. "Avanzadas" es la configuración por defecto de Elementor. Puedes leer la documentación para obtener más información sobre cómo utilizar estas funciones.

Consejo: No hay límite para el número de zonas activas de imagen.

Con el modo responsive de Elementor, también es posible comprobar que las imágenes se muestran correctamente en distintos dispositivos.

Contexto y significado del uso de zonas activas de imágenes

El dicho "una imagen vale más que mil palabras" es conocido. Pero una imagen no puede abarcar toda la información, y los hotspots de imagen pueden resolver este problema. Aportan contenido adicional a la imagen, haciéndola más interactiva y expresiva.

La combinación de imágenes con texto suele mejorar la respuesta. He aquí algunos escenarios típicos de aplicación:

Infografía

Las infografías se utilizan a menudo para tutoriales, estadísticas, procesos y otros contenidos, y son estupendas para la presentación visual.

A?adir un hotspot permite a los usuarios obtener más información explicativa al hacer clic sin interrumpir la tipografía original.

aplicación pedagógica

Las imágenes Hotspot son perfectas para escenarios de ense?anza, especialmente en los siguientes tipos de cursos:

• Bio: Cuando se aprende la estructura del cuerpo humano, se pueden etiquetar los puntos calientes de cada órgano o parte para facilitar la comprensión y la memorización.

• Geografía: ?Le cuesta recordar nombres de países y lugares? Establece un punto de acceso en el mapa y conoce la ubicación exacta y el nombre con sólo pulsar un botón.

• Historiografía: Cuando explique acontecimientos históricos, puede identificar a los personajes en las imágenes para que a los alumnos les resulte más fácil recordar el trasfondo de la historia.

Preguntas frecuentes

?Qué es un punto caliente de imagen?

Una zona activa de imagen es un área específica de una imagen que, al hacer clic en ella, abre una ventana emergente con contenido que puede ser un mensaje de consejo, texto, vídeo o enlace.

?Cuáles son los tipos de puntos calientes de imagen?

Los tipos más comunes actualmente disponibles son:

1. Visualización del contenido de las imágenes
2. dise?o de puzzle
3. zona activa de arrastrar y soltar
4. Zona activa de imágenes fijas
5. Zona activa de imágenes de diapositivas

?Qué estilos se pueden definir para las formas de las zonas activas?

Las formas más comunes son:

• rectángulos
• orbicular
• poligonal

?Cómo se configura el Hotspot Interactivo de Imagen?

Si quieres hacer imágenes con efecto interactivo en las que se pueda hacer clic, tienes que utilizar la función hotspot. Cuando el usuario haga clic en él, aparecerá un gráfico, una imagen o un vídeo.

Puedes configurar lo siguiente:

1. Número de puntos calientes
2. Ubicación de cada punto caliente
3. Estilo de visualización para cada zona activa

Este es el proceso completo de creación de hotspots de imagen. Si quiere hacer más atractivo el contenido de su página, ensúciese las manos y pruebe este enfoque de dise?o. En unos pocos pasos, puedes conseguir una visualización gráfica muy interactiva.

resúmenes

aprovechar Elementor Con el widget Hotspot de Happy Addons, las imágenes dejan de ser simples pantallas estáticas para convertirse en un medio interactivo que puede transmitir más información. Con una simple operación de arrastrar y soltar, puedes a?adir múltiples áreas clicables a una imagen para mostrar texto, iconos..,enlace (en una página web)y otros contenidos para hacer la página más expresiva

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres