{"id":367286,"date":"2023-05-16T16:03:00","date_gmt":"2023-05-16T13:03:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367286"},"modified":"2022-10-12T12:09:56","modified_gmt":"2022-10-12T09:09:56","slug":"como-agregar-facilmente-un-punto-de-acceso-de-imagen-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-agregar-facilmente-un-punto-de-acceso-de-imagen-en-wordpress\/","title":{"rendered":"C\u00f3mo agregar f\u00e1cilmente un punto de acceso de imagen en WordPress"},"content":{"rendered":"\n

Los humanos somos seres visuales y es dif\u00edcil imaginar una herramienta m\u00e1s poderosa que una imagen para atraer la atenci\u00f3n del grupo objetivo. Pero, puede haber un elemento que sea a\u00fan m\u00e1s atractivo que una hermosa imagen: un punto de acceso de im\u00e1genes para WordPress. Un hotspot de imagen es un tipo de imagen con hotspots interactivos<\/strong>. Cuando el usuario se desplaza sobre un punto de acceso, aparece una ventana emergente que puede contener casi cualquier cosa que desee.<\/p>\n

Un punto de acceso de im\u00e1genes en su sitio web de WordPress es una hermosa manera de compartir m\u00e1s informaci\u00f3n sobre cualquier tema<\/strong>, desde blogs culinarios hasta sitios web de construcci\u00f3n y todo lo dem\u00e1s. Puede mostrar los ingredientes y las medidas de la comida, los tipos de materiales utilizados, los nombres y t\u00edtulos, as\u00ed como cualquier otra informaci\u00f3n sobre el contenido de su sitio web. La ventana emergente puede contener texto, otro, imagen, un video o un enlace. Adem\u00e1s de proporcionar a sus usuarios detalles m\u00e1s precisos, tambi\u00e9n est\u00e1 haciendo que su sitio web sea m\u00e1s interactivo mediante el uso de puntos de acceso de im\u00e1genes<\/strong>.<\/p>\n

Si cree que necesita un dise\u00f1ador web profesional para agregar este elegante elemento a su sitio web, \u00a1tenemos buenas noticias! Puede agregarlo f\u00e1cilmente usted mismo. Est\u00e9n atentos para leer m\u00e1s sobre c\u00f3mo agregar un punto de acceso de imagen en WordPress con un complemento:<\/p>\n<\/p>\n

Por qu\u00e9 elegimos Qi Addons para Elementor para crear elementos de WordPress de punto de acceso de imagen<\/h2>\n

Seg\u00fan nuestra experiencia, Qi Addons para Elementor<\/a> es uno de los mejores complementos de Elementor. Incluye 60 widgets gratuitos y m\u00e1s de 40 premium y muchas opciones para agregar diferentes elementos al sitio con muchas opciones de personalizaci\u00f3n y estilo<\/strong> para que pueda estar seguro de que encajar\u00e1n en el dise\u00f1o general de su sitio. Adem\u00e1s de todo, es incre\u00edblemente f\u00e1cil de usar<\/strong> ; es por eso que muy a menudo optamos por este complemento, que mejora enormemente el sitio.<\/p>\n

El widget personalizado Image Hotspots<\/a> es un widget premium. Le permite agregar una imagen espec\u00edfica y colocar puntos de acceso con informaci\u00f3n espec\u00edfica sobre ellos<\/strong>. Luego, el usuario obtiene la informaci\u00f3n al pasar el mouse sobre el punto de acceso<\/strong>. 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\u00f3n del widget en s\u00ed, puede ver algunas soluciones conceptuales del autor que pueden inspirarlo.<\/p>\n

C\u00f3mo agregar un elemento de WordPress de punto de acceso de imagen<\/h2>\n

Una vez que haya agregado Qi Addons a su sitio, busque el widget personalizado Image Hotspots escribiendo "image hotspot" en el campo de b\u00fasqueda, o simplemente navegando por los elementos. Notar\u00e1 que todos los widgets de Qi tienen \u00edconos rojos reconocibles<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Cuando arrastre el widget a la ubicaci\u00f3n deseada, ver\u00e1 algunos de sus valores predeterminados. Widget tiene dos pesta\u00f1as: Personalizar<\/strong> y Estilo<\/strong> que incluyen una variedad de opciones para ajustar el elemento, mientras que la pesta\u00f1a Avanzado es una pesta\u00f1a de Elementor que viene con todos los elementos.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Comencemos con las opciones generales para la pesta\u00f1a personalizada. Lo primero que notar\u00e1 aqu\u00ed es d\u00f3nde se insertan la imagen y los tres elementos<\/strong>. Estos elementos son en realidad puntos<\/strong> de acceso y su posici\u00f3n y configuraci\u00f3n de contenido. De forma predeterminada, hay tres puntos de acceso, pero puede eliminar los existentes o agregar otros nuevos<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Una vez que haya insertado una imagen, desde una biblioteca, o cargando una nueva, es hora de colocar los puntos de acceso y agregarles contenido.<\/p>\n

En cuanto al contenido, tiene la opci\u00f3n T\u00edtulo y Subt\u00edtulo para configurar y tan pronto como comience a modificarlos, ver\u00e1 c\u00f3mo cambia el contenido en vivo.<\/p>\n

Tambi\u00e9n hay un campo de pin aqu\u00ed donde puede seleccionar un \u00edcono<\/strong> para su pin, no tiene que ser uno predeterminado. La biblioteca de \u00edconos est\u00e1 a su disposici\u00f3n, pero tambi\u00e9n puede agregar su propio \u00edcono SVG. Por ejemplo, SVGREPO<\/a> ofrece una gran cantidad de \u00edconos gratuitos que est\u00e1n disponibles para uso comercial.<\/p>\n

En cuanto a la Posici\u00f3n Horizontal y la Posici\u00f3n Vertical, sirven para la orientaci\u00f3n del punto de acceso en las posiciones izquierda\/central\/derecha y superior\/media inferior<\/strong>, mientras que la opci\u00f3n de Desplazamiento en realidad nos permite ajustar las posiciones. No explicaremos esto en detalle, ya que estamos seguros de que ver\u00e1 por s\u00ed mismo c\u00f3mo se mueven sus videos cambiando los valores de desplazamiento. Lo que es importante tener en cuenta es que cuando personalizas los puntos de acceso, tambi\u00e9n debes observar la p\u00e1gina de vista previa que no tiene una barra de configuraci\u00f3n, para que puedas ver c\u00f3mo se ve todo en una pantalla de tama\u00f1o completo<\/strong>.<\/p>\n

Adem\u00e1s, adem\u00e1s del desplazamiento, notar\u00e1 iconos de pantalla con el t\u00edtulo, es decir, iconos cl\u00e1sicos que indican que las opciones de respuesta est\u00e1n disponibles para esta configuraci\u00f3n<\/strong>. Aseg\u00farate de revisarlos tambi\u00e9n. Es mejor no colocar puntos de acceso a lo largo del borde de una imagen, ya que debe pensar c\u00f3mo se ver\u00e1 la ventana emergente del punto de acceso de la imagen en diferentes tama\u00f1os de pantalla<\/strong>.<\/p>\n

La opci\u00f3n Fade Info Position es donde aparece la informaci\u00f3n del punto de acceso.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Este es el resultado despu\u00e9s de agregar la imagen y los pines, ahora podemos proceder a dise\u00f1arlo todo para que se vea exactamente como queremos.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Ajuste del estilo de imagen del punto de acceso<\/h2>\n

En cuanto a la estilizaci\u00f3n, una variedad de opciones se clasifican dentro de una pesta\u00f1a de Estilo especial, para que pueda ver d\u00f3nde estilizamos Pines, Informaci\u00f3n, T\u00edtulo y Subt\u00edtulo.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

En cuanto al Pin, todas las configuraciones son f\u00e1ciles de entender. Puede elegir un \u00edcono que se aplicar\u00e1 a todos los pines<\/strong>, a diferencia de la configuraci\u00f3n en los elementos donde puede elegir uno separado para cada uno. Adem\u00e1s, puede especificar el tama\u00f1o y el color<\/strong> para ello. Puede agregar un icono de fondo utilizando el tama\u00f1o del titular del Pin. Nuestro fondo es rojo y tiene un tama\u00f1o de 15px.<\/p>\n

La opci\u00f3n Radio del borde nos permiti\u00f3 hacer que el fondo pareciera un c\u00edrculo<\/strong> porque el radio se aplica al fondo.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

El estilo de informaci\u00f3n se refiere a la apariencia del campo en el que aparece la informaci\u00f3n<\/strong>. La visualizaci\u00f3n de informaci\u00f3n es una opci\u00f3n que determina c\u00f3mo se muestra el desplazamiento. Podr\u00eda ser Fade and Reveal, elegimos Reveal. El color del campo y el relleno son lo que tambi\u00e9n puede personalizar aqu\u00ed. Info Border Radius es una opci\u00f3n particularmente interesante para el dise\u00f1o de revelaci\u00f3n que usamos porque el radio ayuda a ajustar el campo de informaci\u00f3n y el icono de alfiler en s\u00ed<\/strong>. Si no a\u00f1adimos un radio aqu\u00ed, el campo de informaci\u00f3n blanco ir\u00eda encima del marcador del cuadro del icono rojo.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Las opciones de estilo de t\u00edtulo de informaci\u00f3n se refieren al t\u00edtulo que agregamos a cada pin. La configuraci\u00f3n aqu\u00ed se aplicar\u00e1 a todos los t\u00edtulos en este punto de acceso a la imagen<\/strong>. Probablemente est\u00e9 familiarizado con las opciones y, a primera vista, puede especificar la etiqueta del t\u00edtulo, el color y ajustar la tipolog\u00eda del t\u00edtulo. La parte inferior del margen del t\u00edtulo es una opci\u00f3n importante cuando tambi\u00e9n tiene subt\u00edtulos en su campo de informaci\u00f3n porque entonces puede agregar este margen para crear un espacio entre el t\u00edtulo y el subt\u00edtulo.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

En cuanto al estilo de subt\u00edtulos de informaci\u00f3n, en caso de que agregue un subt\u00edtulo aqu\u00ed, puede estilizar su apariencia con m\u00e1s detalle. En las opciones de tipograf\u00eda puedes jugar con diferentes configuraciones.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

As\u00ed es como se ve el resultado final. texto que agregamos con Usamos el widget Qi del t\u00edtulo de la secci\u00f3n<\/a> para agregar el texto e hicimos que esta secci\u00f3n del sitio web fuera mucho m\u00e1s interesante para los futuros usuarios.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

En conclusi\u00f3n<\/h2>\n

Qi Addons es una herramienta muy intuitiva que todos pueden usar con total facilidad y sin codificaci\u00f3n ni ning\u00fan otro conocimiento t\u00e9cnico. Si\u00e9ntase libre de explorar las opciones de este widget por su cuenta, experimente, juegue y disfrute el proceso creativo de hacer que su sitio web sea m\u00e1s atractivo para sus usuarios. Si tiene alguna pregunta, no dude en ponerse en contacto con nosotros en la secci\u00f3n de comentarios. \u00a1Esperamos escuchar sus experiencias con Qi y las im\u00e1genes de puntos de acceso!<\/p>\n

Fuente de grabaci\u00f3n: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Agregar puntos de acceso de im\u00e1genes en WordPress es f\u00e1cil cuando tiene una herramienta perfecta: aprenda c\u00f3mo hacerlo con solo unos pocos clics.<\/p>\n","protected":false},"author":1,"featured_media":372289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[421,566,203],"tags":[849],"class_list":["post-367286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-complementos-de-wordpress","category-conceptos-basicos-de-wordpress","category-elementor-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=367286"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367286\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=367286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=367286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=367286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}