¿Te gustaría saber cómo crear una imagen interactiva con Hotspots en WordPress gracias a Elementor y complementos esenciales?
La imagen es una excelente herramienta para transmitir información. Todo el mundo sabe que la información transmitida a través de la imagen, y la forma visual en su conjunto, es más fácil de entender y recordar.
En el contexto de la web, puede utilizar muchos formatos de imagen. Desde una infografía, una foto, un cómic, una ilustración, etc….
Si desea crear contenido web como la anatomía de algo, puntos de referencia de la ciudad, mapas o direcciones, la creación de imágenes con Hotspots puede ser una gran idea.
La idea de este tipo de contenido es brindar una imagen interactiva que facilite a tus lectores la comprensión de la información que estás transmitiendo. Puede agregar puntos de acceso en una imagen que contiene información sobre herramientas en cada punto de acceso. Aquí un ejemplo.
Si usted tiene un sitio web basado en WordPress, crear una imagen con puntos de acceso no es demasiado difícil de hacer. Puedes crear uno usando el módulo Complementos Esenciales .
¿Qué es el módulo Complementos esenciales?
Essential Addons es un complemento paraElementor. Este es uno de los mods más populares con más de 2 millones de descargas. Este complemento agrega alrededor de 60 widgets adicionales a tu Elementor.
Uno de los widgets que ofrece Essential Addons es Puntos de acceso de imágenes de EA que puede utilizar para crear una imagen interactiva. Essential Addons en sí mismo es un complemento freemium, pero debe usar la versión pro para crear imágenes con Hotspots porque el widget EA Image Hotspots solo está disponible en esta versión.
Cómo usar el módulo Complementos esenciales para crear imágenes con Hotspots
Primero, debe instalar los módulos Elementor y Essential Addons en su WordPress. Puede obtener la versión pro de Essential Addons en su sitio web oficial. Mientras que para Elementor, puede usar la versión gratuita.
Ver tambien Cómo usar un widget global en Elementor
La versión gratuita de Elementor está disponible en el directorio de la Plugin de WordPress para que pueda instalarlo escribiendo "elementor" en el cuadro de búsqueda del instalador de complementos (Complementos – > Agregar).
Una vez que Elementor y Essential Addons estén instalados, cree una nueva página (Páginas – > Agregar) o un nuevo artículo (Artículos – > Agregar) y edítelo con Elementor. Será redirigido al editor de Elementor después de hacer clic en el botón Editar con Elementor.
Antes de crear las imágenes con puntos de acceso, primero puede configurar el diseño. Para hacer esto, abra el panel de configuración de la página haciendo clic en el ícono de ajustes en la esquina inferior izquierda del panel izquierdo.
Lea también: Cómo usar el widget de publicaciones de Elementor
Establecer el diseño en el menú desplegable Disposición
Agregue una nueva sección haciendo clic en el ícono más en el cuadro de edición y agregue el widget de EA Image Hotspots desde el panel izquierdo.
Agregue su imagen haciendo clic en el selector de imágenes en el panel izquierdo.
opción abierta hotspots en el panel izquierdo para agregar los puntos de acceso. De forma predeterminada, el widget de puntos de acceso de imágenes de EA contiene un punto de acceso. Puede hacer clic en el punto de acceso predeterminado para editar su contenido.
De forma predeterminada, el tipo de punto de acceso se establece en icono. Puedes cambiarlo a textos o vete Véase si lo desea.
Haga clic en la pestaña POSICIÓN para establecer la posición del punto de acceso. Establezca las posiciones X e Y arrastrando los controles deslizantes.
Haga clic en la pestaña PUNTA DE HERRAMIENTA para agregar el contenido de información sobre herramientas. Active la información sobre herramientas y agregue su contenido en el editor. También puede establecer la posición de la información sobre herramientas, ya sea arriba, abajo, izquierda o derecha.
Para agregar más puntos de acceso, simplemente haga clic en el botón AÑADIR UN ELEMENTO en la sección hotspots y repita los pasos anteriores para establecer la posición del punto de acceso, el contenido de la información sobre herramientas y la posición de la información sobre herramientas.
Abre la seccion Configuración de información sobre herramientas para establecer el tamaño de la información sobre herramientas y el efecto de animación.
Ahora ve a la pestaña Estilo para diseñar sus puntos de acceso, así como información sobre herramientas. Primero, abre la opción Imagen para establecer el tamaño de la imagen.
Sección abierta hotspot para personalizar los hotpots. Puede establecer el tamaño, el color del icono (o el texto según el tipo de punto de acceso que haya seleccionado), el color de fondo, el radio del borde, etc.
Descubre también: Cómo agregar elementos relacionados en Elementor
Abre la seccion información sobre herramientas para personalizar la información sobre herramientas. Puede establecer el color de fondo, el color del texto, la tipografía (tamaño de fuente, familia de fuentes, estilo de fuente) y el ancho.
Hasta ahora, ha creado con éxito imágenes con puntos de acceso. Puede jugar con el panel izquierdo para personalizar sus imágenes con puntos de acceso hasta que esté satisfecho con el resultado. Una vez que haya terminado, puede hacer clic en el botón PUBLICAR para publicar tu página.
Agregue imágenes con puntos de acceso a Gutenberg
Si desea agregar imágenes con puntos de acceso como material de apoyo para el artículo en el que está trabajando, puede integrarlo con Gutenberg (el editor predeterminado de WordPress) usando el complemento Bloques Elementor para Gutenberg. Este complemento le permite usar una plantilla de Elementor como un bloque de Gutenberg.
Para guardar las imágenes con puntos de acceso arriba como una plantilla de sección de Elementor, haga clic derecho en el controlador de sección y seleccione Guardar como plantilla.
Dale un nombre a tu modelo y haz clic en el botón AHORRAR.
Abra el artículo en el que desea agregar imágenes con puntos de acceso. Agregar un nuevo bloque, seleccionar biblioteca Elementor y seleccione la plantilla de imagen con puntos de acceso que acaba de crear.
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crea una imagen interactiva con Hotspots en WordPress gracias a Elementor y Essential Addons. Si tiene alguna inquietud sobre cómo llegar, hágaselo saber en el comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
