Los humanos somos seres visuales y es difícil imaginar una herramienta más poderosa que una imagen para atraer la atención del grupo objetivo. Pero puede haber un elemento que sea incluso más atractivo que una imagen hermosa: un punto de acceso a imágenes para WordPress. Un punto de acceso a imágenes es un tipo de imagen con puntos de acceso interactivos. Cuando el usuario pasa el cursor sobre un punto de acceso, aparece una ventana emergente que puede contener casi todo lo que desee.
Un punto de acceso a imágenes en su sitio web de WordPress es una hermosa manera de compartir más información sobre cualquier tema determinado. – desde blogs culinarios hasta sitios web de construcción y todo lo demás. Puede mostrar los ingredientes y medidas de las comidas, los tipos de materiales utilizados, los nombres y títulos, así como cualquier otra información sobre el contenido de su sitio web. La ventana emergente puede contener texto, otra imagen, un vídeo o un enlace. Aparte de Al proporcionar a sus usuarios detalles más precisos, también hace que su sitio web sea más interactivo mediante el uso de puntos de acceso a imágenes..
Si cree que necesita un diseñador web profesional para agregar este elegante elemento a su sitio web, ¡tenemos buenas noticias! Puedes agregarlo todo fácilmente tú mismo. Estén atentos para leer más sobre cómo agregar un punto de acceso a imágenes en WordPress con un complemento:
Según nuestra experiencia, Complementos Qi para Elementor es uno de los mejores complementos de Elementor. Incluye 60 widgets gratuitos y más de 40 premium y muchos Opciones para agregar diferentes elementos al sitio con muchas opciones de personalización y estilo. para que pueda estar seguro de que encajarán en el diseño general de su sitio. Por encima de todo, es increíblemente simple de usar – es por eso que muy a menudo optamos por este complemento, que mejora enormemente el sitio.
Widget personalizado de puntos de acceso a imágenes es un widget premium. Te permite agregue una imagen específica y coloque puntos de acceso con información específica sobre ellos. El Luego, el usuario obtiene la información al pasar el cursor sobre el punto de acceso.. Lo bueno es que podemos determinar las posiciones de respuesta para que no suceda que en diferentes dispositivos el punto de acceso no coincida con el objeto al que se refiere. En la demostración del widget, puedes ver algunas soluciones conceptuales del autor que pueden inspirarte.
Una vez que haya agregado complementos Qi a su sitio, busque el widget personalizado Image Hotspots escribiendo "image hotspot" en el campo de búsqueda o simplemente explorando los elementos. Notarás que todos Los widgets Qi tienen iconos rojos reconocibles.
Cuando arrastre el widget a la ubicación deseada, verá algunos de sus valores predeterminados. El widget tiene dos pestañas: Personalizar y Estilo que incluyen una variedad de opciones para ajustar el elemento, mientras que la pestaña Avanzado es una pestaña de Elementor que viene con todos los elementos.
Comencemos con las opciones generales para la pestaña personalizada. Lo que quieras Observe primero que aquí es donde se insertan la imagen y los tres elementos.. Estos Los elementos son en realidad puntos de acceso. y su posición y configuración de contenido. De forma predeterminada, hay tres puntos de acceso, pero puedes eliminar los existentes o agregar nuevos.
Una vez que haya insertado una imagen, desde una biblioteca o cargando una nueva, es hora de posicionar los puntos de acceso y agregarles contenido.
En cuanto al contenido, tienes la opción Título y Subtítulo para configurar y tan pronto como comiences a modificarlos, verás cómo el contenido cambia en vivo.
También hay una Pin campo aquí donde puede seleccionar un icono Para su pin, no tiene que ser uno predeterminado. La biblioteca de iconos está a tu disposición, pero también puedes agregar tu propio icono SVG. Por ejemplo - SVGREPO ofrece una gran cantidad de íconos gratuitos que están disponibles para uso comercial.
En cuanto a Posicion horizontal y Posición verticalellos Sirve para la orientación del punto de acceso en las posiciones izquierda/centro/derecha y superior/inferior media.mientras que la Compensar La opción en realidad nos permite ajustar las posiciones. No explicaremos esto en detalle ya que estamos seguros de que verá usted mismo cómo se mueven sus vídeos cambiando los valores de compensación. Lo que es importante tener en cuenta es que Cuando personalices los puntos de acceso, también debes observar la página de vista previa que no tiene una barra de configuración, para que puedas ver cómo se ve todo en una pantalla de tamaño completo..
Además del desplazamiento, verás iconos en pantalla con el título, es decir, iconos clásicos que indican que Hay opciones de respuesta disponibles para esta configuración.. Asegúrate de revisarlos también. Es mejor no colocar puntos de acceso a lo largo del borde de una imagen, ya que hay que pensar cómo se verá la ventana emergente del punto de acceso de la imagen en diferentes tamaños de pantalla..
El Posición de información de desvanecimiento La opción es donde aparece la información del punto de acceso al pasar el cursor.
Este es el resultado después de agregar la imagen y los pines, ahora podemos proceder a darle estilo a todo para que se vea exactamente como queremos.
En cuanto a la estilización, una variedad de opciones se clasifican dentro de una pestaña de Estilo especial, para que puedas ver dónde estilizamos Pines, Información, Título y Subtítulo.
En cuanto al Pin, todas las configuraciones son fáciles de entender. Puede elige un ícono que se aplicará a todos los pines, a diferencia de la configuración de los elementos donde puedes elegir uno separado para cada uno. Tambien tu puedes especificar el tamaño y el color para ello. Puede agregar un ícono de fondo usando el tamaño del soporte del Pin. Nuestro fondo es rojo y tiene un tamaño de 15px.
La opción Radio de borde nos permitió hacer el El fondo parece un círculo. porque el radio se aplica al fondo.
Estilo de información se refiere a apariencia del campo en el que aparece la información. La visualización de información es una opción que determina cómo se muestra el desplazamiento. Podría ser Fade and Reveal, elegimos Reveal. El color del campo y el relleno son lo que también puedes personalizar aquí. Info Border Radius es una opción particularmente interesante para el diseño de revelación que utilizamos porque el El radio ayuda a ajustar el campo de información y el ícono del pin.. Si no agregamos un radio aquí, el campo de información blanco estaría encima del pin del cuadro del ícono rojo.
Estilo del título de información Las opciones se refieren al título que agregamos a cada pin. La configuración aquí se aplicará a todos los títulos de este punto de acceso a imágenes.. Probablemente esté familiarizado con las opciones y, a primera vista, puede especificar la etiqueta del título, el color y ajustar la tipología del título. El margen inferior del título es una opción importante cuando también tienes subtítulos en tu campo de información porque luego puedes agregar este margen para crear un espacio entre el título y el subtítulo.
En cuanto al estilo de subtítulo de Información, en caso de que agregues un subtítulo aquí, puedes estilizar su apariencia con más detalle. En las opciones de tipografía puedes jugar con diferentes configuraciones.
Así luce el resultado final. texto que agregamos con Usamos el Título de la sección Widget Qi También agregue el texto e hizo que esta sección del sitio web fuera mucho más interesante para los futuros usuarios.
En conclusión
Qi Addons es una herramienta muy intuitiva que todos pueden usar con total facilidad y sin codificación ni ningún otro conocimiento técnico. Siéntete libre de explorar las opciones de este widget por tu cuenta, experimentar, jugar y disfrutar del proceso creativo para hacer que tu sitio web sea más atractivo para tus usuarios. Si tiene alguna pregunta, no dude en contactarnos en la sección de comentarios. ¡Esperamos conocer sus experiencias con Qi y las imágenes de puntos de acceso!
Esperamos que este artículo haya sido útil. Si te gustó, ¡no dudes en consultar algunos de estos artículos también!
- La forma más fácil de agregar el control deslizante de antes y después a su sitio web
- Cómo personalizar el estilo de su formulario de contacto 7 de forma sencilla
- Cómo agregar horarios de apertura en WordPress: la forma más fácil
La publicación Cómo agregar fácilmente un punto de acceso a imágenes en WordPress apareció por primera vez en WPKlik.
Deja una respuesta