Seleccionar página

En este post te voy a explicar cómo configurar las imágenes para que al hacer clic sobre ellas se amplíen utilizando WordPress.

Dependiendo del editor que estés utilizando la configuración será diferente. Lo veremos con los principales editores de WordPress.

El efecto de ampliación será más vistoso en unos editores que en otros. En Divi y Elementor será más vistoso que en con el editor clásico y Gutenberg.

 

Si quieres MÁS sobre WORDPRESS, DIVI, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES


VER CURSOS

 

 

 

Tamaño de imagen real y tamaño de imagen visualizada.

 

Debes tener en cuenta que para que una imagen se amplíe al hacer clic sobre ella, su tamaño real ha de ser superior al tamaño en que se muestra en WordPress.

Una imagen nunca se podrá mostrar en su modo “ampliado” a un tamaño superior a su tamaño original. Es decir, al tamaño al que se ha subido a WordPress.

Por lo que es posible que tengas que reducir el tamaño en el que se visualiza (sin ampliar) la imagen para que al hacer clic sobre ella se perciba esa ampliación.

 

 

Ampliar imagen al hacer clic usando el Editor Gutenberg de WordPress

 

En primer lugar vamos a ver cómo ampliar una imagen al hacer clic sobre ella usando el editor Gutenberg.

En primer lugar tendrás que añadir un bloque tipo “imagen”, para lo que tendrás que hacer clic en el icono “+” y buscar el bloque “imagen”. Después, subir la imagen que quieras visualizar haciendo clic en “subir”.

 

Bloque imagen de Gutenberg para subir una imagen

 

Después establecer el tamaño al que quieres que se muestre la imagen con las opciones de Ajustes de bloque.

 

Configurar tamaño al que se muestra la imagen con Gutenberg y WordPress

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

Para establecer que al hacer clic en la imagen ésta aparezca ampliada, haz clic sobre la imagen y después sobre el icono en forma de eslabón de cadena.

Después haz clic en “archivo de medios”

 

Configurar imagen en Gutenberg para que se amplíe al hacer clic

 

A continuación, haz clic en la flechita que apunta hacia abajo y activa el selector: “Abrir en una nueva pestaña” (esto servirá para que la imagen se amplíe en una nueva pestaña del navegador)

 

Imagen Gutenberg abrir en una nueva pestaña al hacer clic

 

Finalmente guarda los cambios en la página y haz una vista previa.

 

 

Ampliar imagen al hacer clic usando el Editor Clásico de WordPress

 

Vamos a ver ahora cómo configurar una imagen para que se amplíe al hacer clic sobre ella con el Editor Clásico

Coloca el cursor del ratón en la posición en la que quieres insertar la imagen. Después, haz clic en el botón “Añadir medios” que aparece encima del editor y sube la imagen que quieras.

Una vez insertada la imagen en el editor haz clic sobre ella y después clic sobre el icono en forma de “lápiz”.

 

Configurar imagen con editor clásico de WordPress

 

En el selector “Enlazado a” elige: “Archivo de medios” y marca el checkbox “Abrir el enlace en una pestaña nueva”.

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

Configurar imagen para que al hacer clic se amplíe con editor clásico de WordPress

 

Después haz clic en el botón “Actualizar” para guardar los cambios

Guarda la página o post y haz una previsualización.

 

 

Ampliar imagen al hacer clic con el Divi Builder

 

Te voy a mostrar ahora cómo hacer que al hacer clic en una imagen ésta se amplíe usando  Divi y su page builder.

Inserta un módulo imagen con el constructor de Divi, después sube la imagen que quieras al módulo.

Una vez subida, en la configuración del “módulo imagen” ve a la pestaña “Contenido” y despliega el apartado “enlace”.

Pon el selector “Abrir en capa emergente” en “SÍ”.

 

Configurar imagen con Divi para que al hacer clic se amplíe

 

Después guarda los cambios del módulo y guarda la página.

Finalmente haz una previsualización.

Nota: El efecto de ampliación verás que es mucho más atractivo que el de Gutenberg y el del editor clásico.

Si quieres MÁS sobre WORDPRESS, DIVI, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

Ampliar imagen al hacer clic con Elementor

 

Veremos a continuación cómo configurar una imagen con Elementor para que al hacer clic sobre ella se amplíe.

Una vez arranques tu editor Elementor añade un widget tipo “Imagen” y sube una imagen con ese widget.

QUIERO ELEMENTOR PRO

 

En la configuración del widget selecciona:

  • Enlace: en este selecto elige “Archivo de medios”
  • Caja de Luz: aquí selecciona “SÍ”

 

Configurar imagen con Elementor clic y ampliar

 

Después guarda la página y haz una previsualización.

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com