¿Qué es el widget de Punto caliente en Elementor?
El Widget de Punto caliente en Elementor te permite añadir puntos de interés sobre una imagen. Estos puntos contienen información relevante que se muestra al pasar el cursor por encima o al hacer clic sobre ellos. Por poner un ejemplo, es muy útil para poner un mapa con diferentes ubicaciones.
Paso 1. Añade el Widget al lienzo
Haz clic en el Widget de Punto caliente, luego arrástralo y suéltalo dentro del lienzo.
Paso 2. Edita el elemento Imagen
En la pestaña Contenido > Imagen > Selecciona una imagen de la biblioteca de medios o sube una nueva. También podrás seleccionar la resolución de la imagen.
Paso 3. Edita el Punto caliente
Dentro de cada Elemento encontrarás la pestaña de Contenido y Posición con diferentes opciones en su interior.
Contenido:
- Etiqueta: Escribe el texto que quieres mostrar como indicador en vez de usar un icono.
- Enlace: Escribe un enlace URL para el Punto caliente.
- Icono: Elige un icono para el Punto caliente de la biblioteca de iconos o sube un icono personalizado en formato SVG.
- Tamaño de punto caliente personalizado: Edita esta opción para cambiar el tamaño de la etiqueta.
- Ancho mínimo: Ajusta el ancho de la etiqueta
- Altura mínima: Ajusta la altura de la etiqueta
- Contenido de información emergente: Usa el editor de texto para escribir el contenido que quieres mostrar cuando se pase el cursor por encima. Puedes usar HTML.
Posición:
- Orientación horizontal: Elige la posición inicial del Punto caliente entre izquierda o derecha.
- Compensación: Usa el control deslizante para ajustar la posición horizontal del punto caliente en %.
- Orientación vertical: Elige la posición inicial del Punto caliente entre superior o inferior.
- Compensación: Usa el control deslizante para ajustar la posición vertical del punto caliente en %.
- Propiedades de información emergente personalizada: Configura la apertura personalizada de la información emergente, que solo afectará a este punto específico.
- Animación: Elige una animación para el Punto caliente
- Animación secuenciada: Activa o desactiva esta opciones si quieres que se repita o no la animación elegida.
- Duración de la secuencia: Configura la duración de la animación en milisegundos (ms).
Paso 4. Edita la Información emergente
- Posición: Elige la posición del Pop-Up.
- Disparador: Elige entre al hacer clic o al pasar el cursor.
- Animación: Elige una animación para el Pop-up.
- Duración de la animación: Usa el control deslizante para editar el tiempo de la animación en milisegundos.
