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.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE: CONFIGURAR CLIC EN IMAGEN Y AMPLIAR CON WORDPRESS
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”.
Después establecer el tamaño al que quieres que se muestre la imagen con las opciones de Ajustes de bloque.
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”
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)
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”.
En el selector “Enlazado a” elige: “Archivo de medios” y marca el checkbox “Abrir el enlace en una pestaña nueva”.
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Í”.
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.
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Í”
Después guarda la página y haz una previsualización.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
