El bloque de Puntos de Interés te permite transformar cualquier imagen estática en una experiencia interactiva y en la que se puede hacer clic, colocando marcadores de puntos de interés directamente sobre ella. Cuando los visitantes pasan el ratón por encima o hacen clic en un punto de interés, aparece una ventana emergente con tu contenido personalizado, lo que lo convierte en una forma potente de resaltar las características del producto, anotar diagramas, mostrar diseños de habitaciones o guiar a los visitantes a través de cualquier elemento visual.
Cada punto de interés es totalmente personalizable con su propio icono, color, posición, contenido de la ventana emergente y enlace. Puedes añadir tantos puntos de interés como necesites y controlar el estilo de animación tanto para los marcadores como para sus ventanas emergentes.
Añadir el bloque de Puntos de Interés a tus páginas
Sigue estos pasos para añadir un bloque de Puntos de Interés a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Puntos de Interés en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Puntos de Interés para abrir su configuración. La pestaña Contenido está organizada en tres secciones: Imagen, Punto de Interés y Ventana emergente.
Imagen:
- Imagen: Sube o selecciona la imagen de fondo sobre la que se colocarán tus puntos de interés.
- Texto Alternativo: Introduce texto alternativo descriptivo para la imagen para mejorar la accesibilidad y el SEO.
- Tamaño de la imagen: Establece el ancho y la altura de la imagen en píxeles (px) o como un porcentaje (%).
- Alineación: Establece la alineación horizontal del bloque de Puntos de Interés dentro de su sección: Izquierda, Centro o Derecha. Admite valores por dispositivo para escritorio, tableta y móvil.
Punto de Interés:
La sección Puntos de Interés enumera todos los marcadores de puntos de interés añadidos a tu imagen. Cada fila de punto de interés muestra su icono y una vista previa del contenido de la ventana emergente. Puedes arrastrar los puntos de interés para reordenarlos, duplicarlos o eliminarlos. Haz clic en una fila de punto de interés para expandir su configuración individual:
- Orientación Horizontal: Establece la posición horizontal del marcador del punto de interés en la imagen como un porcentaje de 0 a 100.
- Orientación Vertical: Establece la posición vertical del marcador del punto de interés en la imagen como un porcentaje de 0 a 100.
- Contenido de la Ventana Emergente: Introduce el contenido que aparece dentro de la ventana emergente cuando se activa el punto de interés. Admite formato de texto enriquecido, incluyendo negrita, cursiva, enlaces y colores en línea.
- Color: Establece el color del marcador del icono del punto de interés.
- Configuración Avanzada: Activa para mostrar opciones adicionales por punto de interés, incluyendo Etiqueta, Enlace (con opciones Abrir en Nueva Ventana y No seguir), Posición del Icono (Izquierda o Derecha), selector de Icono, opción de Tamaño de Icono Personalizado y control deslizante de Tamaño de Icono (10-150px, visible cuando el Tamaño de Icono Personalizado está activado).
Haz clic en + Añadir Punto de Interés en la parte inferior de la lista para añadir un nuevo marcador de punto de interés a tu imagen.
Debajo de la lista de puntos de interés, el desplegable Animación de Puntos de Interés establece el estilo de animación continuo aplicado a todos los marcadores de puntos de interés: elige entre Ninguna, Latido Suave o Expansión.
Ventana Emergente:
- Posición: Elige dónde aparece la ventana emergente en relación con el marcador del punto de interés: Arriba, Derecha, Abajo o Izquierda.
- Desencadenante: Establece qué acción abre la información sobre herramientas: Ninguna, Pasar el ratón por encima o Hacer clic.
- Animación: Elige el estilo de animación que se utiliza cuando aparece la información sobre herramientas: Desvanecer, Crecer, Balanceo, Deslizar o Caer.
- Duración: Establece la duración de la animación de apertura/cierre de la información sobre herramientas en milisegundos (0-10.000 ms).
- Mostrar flecha: Activa o desactiva la pequeña flecha direccional en la burbuja de la información sobre herramientas.
- Ancho máximo: Establece el ancho máximo del cuadro emergente de la información sobre herramientas en píxeles (0-1000 px).
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar el estilo de la imagen y el espaciado de tu bloque de puntos interactivos.
Estilos:
- Sombra de imagen: Añade una sombra paralela detrás de la imagen. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Muy grande o Extra grande.
- Borde de imagen: Añade un borde alrededor de la imagen. Establece el Estilo del borde (Sólido, Punteado o Discontinuo), el Color del borde, el Ancho del borde (Superior, Derecho, Inferior, Izquierdo) y el Radio del borde para redondear las esquinas.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de puntos interactivos (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de puntos interactivos (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de puntos interactivos, creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de puntos interactivos en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de puntos interactivos en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de puntos interactivos en dispositivos móviles.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de puntos interactivos y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de puntos interactivos a tu página! Al convertir imágenes estáticas en experiencias interactivas, puedes guiar la atención de los visitantes, resaltar detalles clave y aumentar la participación. Experimenta con diferentes animaciones de puntos interactivos, posiciones de información sobre herramientas y estilos de iconos para crear una experiencia que se ajuste a tu marca y mantenga a los visitantes explorando tu contenido.