¿Quieres hacer que las imágenes de tu WordPress sean más interactivas y atractivas? Los puntos de interés en imágenes transforman las fotos estáticas en contenido dinámico al agregar áreas clicables que revelan información adicional.
Los hemos probado nosotros mismos para mostrar puntos en un mapa, etiquetar miembros del equipo en una fotografía y resaltar características de productos. Según nuestra investigación, hemos encontrado 2 formas sencillas de agregar puntos de interés en imágenes en WordPress.
¿Listo para mejorar la experiencia visual de tu sitio web? Empecemos.
Cuándo agregar puntos de interés a tus imágenes en WordPress
Los puntos de interés en imágenes son áreas clicables que pueden convertir imágenes simples en contenido interactivo que los visitantes pueden explorar. Pero, ¿cuándo deberías considerar agregar puntos de interés a tus imágenes?
Un buen momento para usar puntos de interés es cuando quieres mostrar diferentes partes de la imagen de un producto.
Digamos que estás vendiendo un teléfono nuevo. Puedes agregar puntos de interés para señalar su cámara, pantalla y otras características. Esto ayuda a los clientes a conocer el producto sin leer largas descripciones.
Muchos sitios web de artículos para el hogar también utilizan anotaciones de imágenes para resaltar los detalles del producto de los artículos que se muestran en fotos de ambientación.
Los puntos de interés también son excelentes para hacer que las infografías y la visualización de datos sean más atractivas. En lugar de abarrotar toda la información en una sola imagen, puedes ocultar detalles adicionales detrás de los puntos de interés. Cuando las personas hacen clic en diferentes partes de la infografía, pueden ver más hechos y cifras.
Si tienes un sitio web de eLearning, los hotspots pueden mejorar la experiencia del usuario y hacer tus lecciones más interactivas. Por ejemplo, podrías añadir hotspots a un mapa, permitiendo a los estudiantes hacer clic para aprender sobre diferentes países o puntos de referencia.
Con esto en mente, veamos cómo añadir fácilmente hotspots de imagen a tu sitio web de WordPress. Hemos ideado 2 métodos, y puedes usar los enlaces rápidos a continuación para navegar por el artículo:
- Método 1: Añadir Hotspots de Imagen con SeedProd (Para Páginas de Aterrizaje/Temas Personalizados)
- Método 2: Añadir Hotspots de Imagen con el Plugin Image Hotspot (Gratuito pero Limitado)
- Más consejos de diseño para WordPress que deberías conocer
Método 1: Añadir Hotspots de Imagen con SeedProd (Para Páginas de Aterrizaje/Temas Personalizados)
Este primer método utiliza SeedProd, un constructor de páginas de arrastrar y soltar, para añadir hotspots de imagen a tu sitio web de WordPress. Recomendamos este método si estás creando una página de aterrizaje personalizada o un tema de WordPress personalizado y quieres usar una plataforma con un bloque de hotspots de imagen.
Hemos probado otros constructores de páginas en el pasado como Divi y WPBakery, pero SeedProd siempre sale ganando.
Lo que nos encanta de SeedProd es que ofrece más de 350 plantillas de páginas de destino y kits de temas para diferentes categorías de la industria, desde boutiques en línea y servicios de limpieza hasta empresas SaaS. Por lo tanto, hay una opción para cada tipo de sitio.
Algo que debes considerar es que si solo quieres una solución gratuita para crear puntos de acceso de imágenes, entonces este método podría no ser para ti. Esto se debe a que el bloque de puntos de acceso de SeedProd solo está disponible en las versiones de pago de SeedProd. En ese caso, te recomendamos usar el método 2.
Para obtener más información sobre las características y precios del plugin, consulta nuestra reseña de SeedProd.
Una vez que hayas comprado un plan de SeedProd, puedes descargar e instalar el plugin de WordPress en tu área de administrador. Después de eso, ve a SeedProd » Configuración e ingresa tu clave de licencia. Puedes encontrar esta información en la página de tu cuenta de SeedProd.
Una vez hecho esto, simplemente haz clic en ‘Verificar clave’.
Después de eso, navega a SeedProd » Páginas de destino.
Luego, haz clic en ‘Agregar nueva página de destino’.
Ahora verás todas las plantillas que ofrece SeedProd. Hay opciones para una página de destino de lista de espera viral, una página de destino de anuncio de Google, una página de próximo lanzamiento y más.
Asegúrate de revisar las opciones y previsualizarlas una por una para que puedas elegir la que mejor se adapte a tus necesidades.
Una vez que hayas decidido una plantilla, simplemente pasa el cursor sobre tu selección.
Luego, haz clic en el botón de marca de verificación naranja.
Ahora, aparecerá una nueva ventana emergente pidiéndote que nombres la página e insertes su slug de URL.
Después de hacer eso, haz clic en ‘Guardar y empezar a editar la página’.
Esto abrirá el editor de arrastrar y soltar de SeedProd.
Funciona de manera similar al editor de bloques de WordPress, donde puedes arrastrar y soltar bloques en la página y hacer clic en ellos para personalizarlos como desees.
Para crear puntos de acceso de imagen, puedes encontrar el bloque ‘Punto de Acceso’ en la barra lateral izquierda.
Luego, simplemente arrástralo y suéltalo en tu página.
A continuación, necesitas subir la imagen de WordPress a la que quieres añadir puntos de acceso.
Puedes hacer esto haciendo clic en el bloque ‘Punto de Acceso’ y eligiendo ‘Usar tu propia imagen’ o ‘Usar una imagen de stock’ para seleccionar una imagen.
La primera opción abrirá la biblioteca de medios donde puedes elegir una imagen existente o subir una nueva. Si el tamaño es bastante grande, puedes consultar nuestra guía sobre cómo subir imágenes grandes en WordPress.
Una vez que hayas subido una imagen, puedes ingresar texto alternativo para describir la imagen para los motores de búsqueda y las herramientas de lectura de pantalla.
También puedes personalizar el tamaño y la alineación de la imagen.
Después de eso, puedes desplazarte hacia abajo para empezar a añadir tus puntos de acceso.
Puedes hacer esto haciendo clic en el botón ‘+ Añadir Punto de Acceso’.
Ahora aparecerá un punto naranja en tu imagen. Puedes ajustar su posición arrastrando las barras de orientación horizontal y vertical.
Además, puedes insertar el texto que debe aparecer cuando el cursor de un usuario pase sobre el punto de acceso.
Bajando, puedes cambiar el color del punto de acceso.
Simplemente haz clic en la configuración de ‘Color’ para elegir un color que se adapte a tu marca y al diseño de tu sitio web.
Si sigues desplazándote hacia abajo, puedes activar el interruptor de ‘Configuración Avanzada’.
Aquí puedes agregar un enlace al texto de la información sobre tu punto de acceso para que los usuarios puedan ser redirigidos a la página deseada.
Además de eso, puedes elegir un ícono personalizado para reemplazar la forma circular predeterminada.
Para hacer esto, simplemente haz clic en el botón ‘Elegir ícono’.
Aparecerá una ventana emergente donde puedes elegir varios íconos de la biblioteca de SeedProd. También puedes elegir íconos de Font Awesome si necesitas más opciones.
Para usar un ícono, solo haz clic en él.
Una vez que hayas elegido un ícono, puedes arrastrar la barra 'Tamaño del ícono' para hacer la forma más pequeña o más grande, según tus preferencias.
Luego puedes repetir los pasos para crear más puntos interactivos en la imagen.
Abajo, puedes agregar un efecto animado a tus puntos interactivos. Hay 2 opciones: 'Latido suave' y 'Expandir'.
Ahora, pasemos a la sección 'Información emergente'.
Aquí, puedes cambiar la posición de la información emergente (derecha, izquierda, arriba o abajo del punto interactivo) y cambiar el disparador.
Si seleccionas 'Clic', significa que la información emergente se mostrará cuando el usuario haga clic en el punto interactivo. Por otro lado, 'Pasear' significa que la información emergente aparecerá cuando el cursor pase sobre ella.
A continuación, puedes cambiar la duración de la información emergente.
Esto se refiere simplemente a cuánto tiempo tardará en aparecer la información emergente después de que el usuario pase el cursor o haga clic en el punto interactivo. Si quieres que el texto aparezca instantáneamente, simplemente configúralo en 0.
También puedes deshabilitar la flecha de la información emergente, según tus preferencias.
Ahora, si cambias a la pestaña 'Avanzado', puedes personalizar aún más la apariencia de la imagen.
Por ejemplo, puedes agregar una sombra de caja o ajustar el relleno y margen.
Una vez que hayas terminado, simplemente haz clic en el botón 'Guardar' en la esquina superior derecha.
Luego, haz clic en 'Publicar' para que la página esté activa.
¡Y eso es todo! Asegúrate de ver la página en móvil, escritorio y tableta para ver si se ve bien en todos los dispositivos.
Así es como se ve nuestro punto interactivo en la imagen:
Método 2: Añadir Hotspots de Imagen con el Plugin Image Hotspot (Gratuito pero Limitado)
Si usas un constructor de páginas y cambiar tu tema suena como demasiado, entonces puedes usar el plugin gratuito de WordPress Image Hotspot en su lugar. Es uno de los mejores plugins de puntos interactivos de imagen que hemos probado y es una gran alternativa al método 1.
Sin embargo, ten en cuenta que la versión gratuita solo permite agregar hasta 6 puntos interactivos en una sola imagen.
Para usar Image Hotspot, puedes instalar y activar el plugin de WordPress en tu área de administrador. Luego, ve a Image Map Hotspot » All Image Map Hotspot y haz clic en el botón 'Add New'.
Ahora, procede a darle un nombre a tu nuevo punto interactivo de mapa de imagen. Luego, selecciona uno de los tipos de visualización de tooltip. Puedes hacer que los tooltips del punto interactivo aparezcan al pasar el ratón o al hacer clic.
Una vez hecho, haz clic en ‘Guardar’.
Con eso terminado, agreguemos tu imagen.
Para hacer esto, simplemente haz clic en el botón 'Upload Image'.
Esto abrirá la biblioteca de medios, donde puedes subir una imagen nueva o seleccionar una existente.
A continuación, puedes agregar puntos interactivos a tu mapa de imagen. Simplemente haz clic en el botón 'Add Point' para hacer esto.
Ahora aparecerá una ventana emergente para que configures tu punto interactivo de imagen.
Primero, navega a la pestaña 'Marker'. Aquí es donde puedes personalizar cómo se ve la imagen del punto interactivo. Para cambiar los íconos, puedes hacer clic en el signo '+' junto a los campos 'Icons' y/o 'Hover Icons'.
'Icons' se refiere al símbolo predeterminado del punto interactivo cuando no se está haciendo clic o pasando el ratón sobre él. Mientras tanto, 'Hover Icons' es el símbolo que aparece cuando el usuario está haciendo clic o pasando el ratón sobre el punto interactivo.
Ahora, procede a seleccionar un ícono para reemplazar la opción predeterminada actual. El plugin tiene muchas opciones para elegir.
Una vez que hayas tomado tu decisión, solo haz clic en ella y presiona el botón ‘Cerrar’.
Con tus imágenes de punto de acceso configuradas, puedes cambiar los colores de los íconos.
El plugin te permite hacer que el color predeterminado del ícono del punto de acceso sea diferente del color al pasar el cursor sobre el ícono. De esta manera, los usuarios pueden saber fácilmente si un punto de acceso está activo cuando hacen clic o pasan el cursor sobre él.
Para cambiar el color, simplemente haz clic en el botón cuadrado de selección de color y elige el color que deseas usar.
Luego puedes hacer clic en cualquier parte de la página para pasar a otra configuración.
También puedes personalizar el tamaño del ícono del punto de acceso en escritorio. Cuanto mayor sea el número, más grande será el ícono.
Una vez que estés satisfecho con la apariencia del ícono, simplemente haz clic en 'Guardar'.
Ahora, desplázate hacia arriba y cambia a la pestaña 'Contenido'. Aquí es donde puedes personalizar el texto y la apariencia de la información sobre herramientas.
El plugin te ofrece 4 plantillas para elegir, para que puedas seleccionar la que mejor se adapte al diseño de tu sitio web.
Aparte de eso, asegúrate de reemplazar el contenido del título predeterminado con tu propio texto.
Y dependiendo del diseño de tu sitio web, es posible que desees aumentar el tamaño de la fuente y cambiar el color del texto para mejorar su legibilidad.
Cuando estés satisfecho con la configuración, simplemente haz clic en 'Guardar'.
La última pestaña es 'enlace'. Aquí, tienes la opción de hacer que el texto de tu información sobre herramientas sea un hipervínculo, para que los usuarios puedan ser redirigidos a una página diferente.
Si deseas hacer esto, selecciona 'Sí' en la configuración '¿Enlazar título?'.
Después de eso, inserta la URL de tu enlace de título en el campo apropiado y elige si deseas que el enlace se abra en una nueva pestaña o no.
Finalmente, haz clic en 'Guardar'.
Ahora, debería aparecer un nuevo punto de acceso en tu imagen, que puedes arrastrar a la posición deseada.
También puedes repetir los mismos pasos que antes para crear más puntos de acceso de imagen.
Una vez que tengas tu mapa de imagen configurado, puedes hacer clic nuevamente en el botón 'Guardar'.
Para agregar el punto de acceso de imagen a cualquiera de tus páginas, publicaciones y/o widgets, puedes copiar el shortcode que está encima de la imagen.
Después de eso, simplemente pega el shortcode en un bloque de shortcode en tu widget, página o publicación en el editor de bloques. Puedes aprender más sobre cómo hacer esto en nuestra guía paso a paso sobre cómo agregar y usar shortcodes en WordPress.
Aquí se ve nuestro punto de acceso de imagen interactivo:
Más consejos de diseño para WordPress que deberías conocer
Además de crear puntos de acceso de imagen interactivos, hay muchas otras formas de hacer que el diseño de tu sitio web sea atractivo. Aquí tienes algunas guías que te ayudarán:
- Elementos clave de diseño para un sitio web de WordPress efectivo
- Cómo agregar scroll infinito a tu sitio de WordPress (paso a paso)
- Cómo agregar scroll infinito a tu sitio de WordPress (paso a paso)
- Cómo crear un mapa de sitio visual en WordPress (paso a paso)
- Cómo crear una barra de pie de página flotante y fija en WordPress
- Cómo agregar un redimensionador de fuentes en WordPress para accesibilidad
- Cómo agregar un botón de clic para llamar en WordPress (paso a paso)
- Cómo Agregar una Barra de Desplazamiento Personalizada en WordPress
- Cómo agregar una barra de progreso en tus publicaciones de WordPress
- Cómo crear un divisor de formas personalizado en WordPress
- Cómo agregar un ticker de noticias en movimiento en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente puntos de acceso de imagen en WordPress. También puedes consultar nuestra guía definitiva de trucos de barra lateral de WordPress para obtener resultados máximos y nuestras selecciones expertas de los mejores constructores de temas de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
¿Tienes alguna pregunta o sugerencia? Por favor, deja un comentario para iniciar la discusión.