Cómo agregar fácilmente un punto de acceso de imagen a WordPress

Las personas son seres visuales y es difícil imaginar una herramienta más fuerte que una imagen para atraer la atención del grupo objetivo. Pero, podría haber un elemento que sea aún más atractivo que una imagen hermosa: un punto de acceso de la imagen. Un punto de acceso de imagen es un tipo de imagen con puntos de acceso interactivos. Cuando el usuario pasa con el mouse sobre un punto de acceso, aparece una ventana emergente que puede contener casi cualquier cosa que desee. Un punto de imagen caliente en su sitio de WordPress es una forma hermosa de compartir más información sobre cualquier tema de sujeto, desde los blogs culinarios para crear sitios web y todo entre ellos. Puede mostrar los ingredientes y medidas para alimentos, los tipos de materiales utilizados, nombres y títulos, así como cualquier otra información sobre el contenido de su sitio web. La ventana emergente puede contener texto, otro, imagen, un video o un enlace. Además de dar a los usuarios detalles más precisos, también hace que el sitio web sea más interactivo mediante el uso de puntos de acceso de imágenes.
Si cree que necesita un diseñador web profesional para agregar este artículo de lujo a su sitio, ¡tenemos buenas noticias! Puedes agregar fácilmente todo por ti mismo. Manténgase al día para leer más sobre cómo agregar un punto de acceso de imagen a WordPress con un complemento:
¿Por qué elegimos suplementos Elementor para crear un punto de acceso de imagen de WordPress?
Cómo agregar un elemento de WordPress para el punto de acceso de imágenes
Ajustar el estilo de imagen del punto de acceso

¿Por qué elegimos suplementos Qi para Elementor para crear un elemento de hotspot de imagen
Según nuestra experiencia, Qi Addons for Elementor es uno de los mejores elementos de suplementos. Incluye 60 widgets gratuitos y más de 40 widgets premium y muchas opciones para agregar diferentes elementos en el sitio, con muchas opciones de personalización y estilo, por lo que puede estar seguro de que encajarán en el diseño general del sitio de arriba, es increíblemente. Flejado de usar, por eso optamos muy a menudo por este complemento, lo que mejora el sitio. Los puntos de acceso de imágenes personalizados son un widget premium. Le permite agregar una determinada imagen y colocar puntos de acceso con información específica sobre ellos. El usuario luego recibe la información pasando con el mouse sobre el punto de acceso. Lo mejor es que podemos determinar las posiciones receptivas para que no suceda que el punto de acceso no coincida con el objeto al que se refiere. En la demostración del widget en sí, puede ver algunas soluciones conceptuales del autor que puede inspirarlo.
Cómo agregar un elemento de WordPress para el punto de acceso de imágenes
Después de agregar suplementos de Qi a su sitio, busque los puntos de acceso de imágenes de widget personalizados escribiendo “punto de acceso de imágenes” en el campo de búsqueda o simplemente navegando por los elementos. Notará que todos los widgets de Qi han reconocido iconos rojos.
Al extraer el widget en la ubicación deseada, verá algunos de sus valores predeterminados. El widget tiene dos pestañas: personalización y estilo que incluyen una variedad de opciones para ajustar el elemento, mientras que la pestaña avanzada es una pestaña elemental que viene con todos los elementos.

Comencemos con las opciones generales para la pestaña personalizada. Lo que verá primero aquí es el lugar donde se insertan la imagen y los tres elementos. Estos artículos son en realidad puntos de acceso y su posición y configuración de contenido. Por defecto, hay tres puntos de acceso, pero puede eliminar los existentes o puede agregar otros nuevos. Una vez que haya insertado una imagen, desde una biblioteca o cargando una nueva, es hora de colocar puntos de acceso y agregarles contenido a ellos . Con respecto al contenido, tiene la opción de título y el subtítulo para configurar y tan pronto como comience a cambiarlos, verá cómo cambia el contenido en vivo. También hay un campo PIN donde puede seleccionar un icono para su pino, no tiene que ser predeterminado. La biblioteca de iconos está disponible para usted, pero puede agregar su propio icono SVG. Por ejemplo, SVGREPO ofrece una gran cantidad de iconos gratuitos disponibles para uso comercial.

Con respecto a la posición horizontal y la posición vertical, sirven para orientar el punto de acceso en la posición izquierda/derecha y hacia arriba/media, mientras que la opción de compensación en realidad nos permite regular las posiciones. No explicaremos esto en detalle, porque estamos seguros de que verá cómo sus videos se mueven cambiando los valores de compensación. Lo que es importante recordar es que al personalizar los puntos de acceso, también debe ver la página de vista previa que no tiene una barra de configuración, por lo que puede ver cómo se ve todo en una pantalla de tamaño completo.

Además, además de Offset, también verá los iconos de la pantalla, es decir, iconos clásicos que indican que las opciones de respuesta están disponibles para esta configuración. Asegúrese de revisarlos también. Es mejor no colocar puntos de acceso a lo largo del borde de una imagen, porque debe pensar en cómo se verán las ventanas emergentes en diferentes tamaños de pantalla. La opción de posición de información de Fade es el lugar donde la información para el punto de acceso en el que aparecen. Este es el resultado después de haber agregado la imagen y los pines, ahora podemos continuar con estilo todo para ver exactamente como queremos.
Ajuste del estilo de imagen del punto de acceso
En términos de estilización, una variedad de opciones se clasifican en una pestaña de estilo especial, por lo que puede ver dónde obstaculizamos los pines, la información, el título y el subtítulo.

En cuanto a Pine, todas las configuraciones son fáciles de entender. Puede elegir un icono que se aplique a todos aquellos, en lugar de la configuración en los artículos, donde puede elegir uno separado para cada uno. También puede especificar su tamaño y color. Puede agregar un icono de fondo utilizando el tamaño de soporte de pino. Nuestro fondo es rojo y tiene un tamaño de 15 px.


La opción de rayo de cuadro nos permitió hacer que el fondo pareciera un círculo, porque el radio se aplica al fondo.
El estilo de información se refiere a la apariencia del campo en el que aparece la información. La información de visualización es una opción que determina cómo se muestra la hora. Podría ser desvanecerse y revelar, elegimos revelar. El color del campo y el relleno son lo que puede personalizar aquí. El radio de borde de información es una opción muy interesante para el aspecto de divulgación que utilicé, porque el radio ayuda a coincidir con el campo de información y el icono de pino en sí. Si no agregué un rayo aquí, el campo de información blanca iría por encima del código de icono rojo. Optii del estilo de título de información se refiere al título que he agregado a cada pin. La configuración aquí se aplicará a cada título en este punto de acceso de imagen. Probablemente esté familiarizado con las opciones y, a primera vista, puede especificar la etiqueta del título, el color, ajustar finamente la tipología del título. Título Margen Bottom es una opción importante cuando tiene subtítulos en su campo de información, porque puede agregar este margen para crear un espacio entre el título y el subtítulo.

En cuanto a la sustitiación de subtitulación sub -subtítulos, si agrega un subtítulo aquí, puede estilizar su aspecto más detallado. En las opciones de impresión puede jugar con diferentes configuraciones.
Esto es lo que parece el resultado final. El texto con el que agregué que utilicé el widget Qi el título de la sección para agregar el texto e hizo que esta sección del sitio web fuera mucho más interesante para los usuarios futuros.

En conclusión

Qi Addons es una herramienta muy intuitiva que cualquiera puede usar fácilmente y sin codificar ni ningún otro conocimiento técnico.Siéntase libre de explorar las opciones de este widget por su cuenta, experiencia, reproducir y disfrutar del proceso creativo de hacer que su sitio sea más atractivo para sus usuarios. Si tiene alguna pregunta, no dude en contactarnos en la sección de comentarios, nosotros. ¡Esperamos escuchar sobre sus experiencias con las imágenes de Qi y Hotspot! Esperemos que este artículo fuera útil.Si le gustó, ¡no dude en consultar algunos de estos artículos!

La forma más sencilla de agregar el control deslizante antes y después de su sitio web

Cómo personalizar su formulario de contacto 7 Stiland Simple

Cómo agregar horas de apertura a WordPress: la forma más simple