¿Cómo hacer que una galería de WordPress sea responsive (2 métodos) 

Cuando añadí por primera vez una galería a mi sitio de WordPress, se veía bien en el escritorio, pero era un desastre en el móvil. Fue entonces cuando aprendí lo importante que es hacer que mi galería de WordPress sea responsive.

En esta guía, te mostraré los dos métodos más sencillos que utilizo para crear galerías compatibles con móviles que se ajustan automáticamente a cualquier tamaño de pantalla sin ralentizar tu sitio.

Ya sean fotos de productos, imágenes de portafolio o visuales de blog, estos pasos te darán una galería que se ve genial en todas partes y además ayuda a tu SEO.

¿Por qué hacer que una galería de WordPress sea responsive?

Hoy en día, casi el 60% de todo el acceso a internet se realiza a través de un smartphone. Por lo tanto, al añadir nuevas funciones y características a tu sitio web, deberás asegurarte de que funcione correctamente en dispositivos móviles.

Ya sea una tableta, un smartphone, un portátil o un ordenador de escritorio, el diseño de tu nueva galería de fotos debe ser lo suficientemente flexible como para adaptarse a cada tamaño de pantalla. De esta manera, tus visitantes tendrán una mejor experiencia de usuario.

Más importante aún, un diseño responsive es crucial para la optimización en motores de búsqueda (SEO).

Los motores de búsqueda como Google consideran la usabilidad móvil como un factor al clasificar tu sitio en los resultados de búsqueda. Añadir imágenes de galería responsive a tu sitio puede ayudarte a obtener mejores clasificaciones y, a su vez, a generar más tráfico orgánico a tu pequeño negocio.

Al final, aprender a hacer que una galería de WordPress sea responsive puede ser de gran ayuda para hacer crecer tu negocio. Con esto en mente, aquí tienes 2 métodos sencillos que puedes seguir.

¿WordPress hace que las imágenes de la galería sean responsive automáticamente?

Sí. WordPress genera automáticamente varios tamaños de imagen y añade atributos srcset y sizes a cada imagen de galería que subes, haciéndolas responsive por defecto.

La mayoría de los temas modernos manejan esto de forma nativa. Pero las galerías basadas en plugins te dan control sobre el diseño, personalización de columnas y ajustes de visualización específicos para móviles que el bloque de galería predeterminado no tiene.

¿Cuál es la forma más fácil de hacer que una galería de WordPress sea compatible con móviles?

A continuación, encontrará 2 formas de agregar una galería de imágenes adaptable a su sitio de WordPress. Primero, usaremos SeedProd, un creador de sitios web de arrastrar y soltar con herramientas de galería integradas. En segundo lugar, usaremos uno de los mejores plugins de galería de imágenes adaptables de WordPress del mercado.

Haga clic en cualquiera de los métodos a continuación para ver los pasos para agregar una nueva galería.

Método 1. Use el bloque de galería avanzada de WordPress SeedProd

Para la primera solución, usaremos SeedProd, el mejor creador de sitios web de WordPress. Con su creador de arrastrar y soltar, plantillas adaptables y bloques de WordPress personalizables, es, con diferencia, la forma más fácil de personalizar su sitio web sin código HTML, PHP o CSS personalizado.

Puede usar los Bloques de WordPress de SeedProd para agregar galerías a su tema de WordPress, páginas y áreas listas para widgets. Es tan simple como arrastrar, soltar y hacer clic para crear galerías que funcionen con cualquier tamaño de pantalla.

Las funciones fáciles de usar de SeedProd incluyen:

• Creador de temas de WordPress
• Kits de sitios web prefabricados
• Creador de páginas de destino
• Plantillas de páginas de destino adaptables
• 4 modos de página: Próximamente, Mantenimiento, 404 e Inicio de sesión
• Integraciones de marketing por correo electrónico
• Gestión de suscriptores
• Soporte de WooCommerce
• Controles de acceso
• Texto dinámico
• Mapeo de dominios
• Y m ilde;s.

Siga los pasos a continuación para crear galerías adaptables de WordPress con SeedProd.

Paso 1. Instalar y Activar SeedProd

Primero, vaya al sitio web de SeedProd y descargue el plugin. Sugerimos obtener la versión Pro de SeedProd para seguir este tutorial porque ofrece las mejores funciones a precios competitivos.

A continuación, inicie sesión en su cuenta de SeedProd y haga clic en la pestaña Descargas para descargar el archivo del plugin en su computadora. También puede copiar su clave de licencia al mismo tiempo, que necesitará en breve.

Ahora, cargue y active el plugin en su sitio web de WordPress. Si necesita ayuda con este paso, puede seguir esta guía sobre cómo instalar un plugin de WordPress (se abre en una pestaña nueva).

Después de instalar y activar SeedProd, navegue a SeedProd » Ajustes desde su administrador de WordPress y pegue la clave de licencia que copió anteriormente. Asegúrese de hacer clic en el botón Verificar clave y luego pase al siguiente paso.

Paso 2. Cree un tema o una página de destino de WordPress

Dado que este plugin ofrece 2 formas de usar su creador de arrastrar y soltar, el siguiente paso es crear un tema de WordPress o una página de destino.

El Theme Builder es la forma más fácil de crear un tema de WordPress personalizado sin contratar a un desarrollador. Reemplaza su tema actual con plantillas totalmente personalizables para cada parte de su sitio web.

Alternativamente, el creador de páginas de destino es una excelente manera de crear páginas individuales visualmente sin cambiar su tema de WordPress.

Puedes seguir estos tutoriales paso a paso sobre cómo crear un tema de WordPress y cómo crear una página de destino con SeedProd. Luego, después de elegir una plantilla y crear tus páginas iniciales, puedes seguir el paso 3 de esta guía para agregar una galería adaptable a tu sitio.

Nota: Para esta guía, estamos utilizando el método Theme Builder.

Paso 3. Agregue el bloque de galería avanzada de WordPress

Para este paso, abre cualquier página con SeedProd para personalizarla con el constructor de arrastrar y soltar. Por ejemplo, puedes abrir la plantilla de página de inicio desde el panel de control de Theme Builder para agregar galerías adaptables a tu página principal.

Si estás creando una página de destino, ve a SeedProd » Páginas de destino y haz clic en Editar en el diseño que hayas elegido.

Cuando abras tu diseño, verás una disposición similar a la siguiente:

A la izquierda se encuentran los bloques y secciones para agregar contenido a tu diseño, y a la derecha hay una vista previa en vivo. Hacer clic en cualquier elemento de tu vista previa abrirá su configuración a la izquierda, y cualquier cambio que realices se aplicará automáticamente en tiempo real.

Algunos de los bloques que puedes usar incluyen:

• Botones para compartir en redes sociales
• Iconos de perfiles de redes sociales
• Bloque de vídeo (Enlace a un vídeo de YouTube o Vimeo)
• Carrusel de testimonios
• Formularios de contacto
• Y más

Para esta guía, usaremos el bloque Galería avanzada.

Creación de una galería adaptable de WordPress única

Supongamos que deseas agregar una galería adaptable única para mostrar los mejores ejemplos de tu portafolio. Para hacerlo, elige el bloque Galería avanzada del panel izquierdo y arrástralo a tu diseño de página.

Desde allí, puedes abrir las opciones de la galería y ajustar la configuración hasta que tu galería se vea exactamente como deseas. Puedes cambiar el número de columnas y el espaciado, o enlazar tu galería al archivo de imagen, a un enlace personalizado o a ninguno.

Por ejemplo, la opción Archivo multimedia mostrará tu galería en un lightbox de imagen adaptable a tamaño completo cuando los visitantes hagan clic en ella.

También puedes cambiar la relación de aspecto de las miniaturas de tus imágenes y establecer el tamaño de la imagen en miniatura, mediano o grande.

¿Quieres agregar información a cada imagen de la galería? Entonces haz clic en la pestaña Superposición, donde puedes agregar un color de superposición de fondo, efecto de pasar el ratón por encima, títulos y descripciones a cada imagen.

Cada vez que un visitante del sitio web pase el ratón sobre una imagen, esta se oscurecerá y mostrará una descripción de tu elección.

Creación de múltiples galerías dinámicas de WordPress

También puedes usar el bloque Galería avanzada en cualquier otra página de tu sitio web. Por ejemplo, puedes crear una página de portafolio y agregar múltiples galerías de imágenes que los usuarios puedan filtrar por parámetros específicos.

Para hacerlo, haz clic en el menú desplegable Tipo y elige la opción Múltiple. Luego puedes empezar a agregar tantas galerías como desees.

Si necesitas más opciones de personalización, puedes hacer clic en la pestaña Avanzado. Desde allí, puedes cambiar los colores de las pestañas de filtro, la tipografía, las sombras, los bordes de las imágenes y mucho más.

Haciendo que tu galería de WordPress sea adaptable

Cualquier galería que crees con SeedProd es responsive por defecto. Sin embargo, puedes comprobar la compatibilidad de tus galerías con dispositivos móviles con la opción de vista previa móvil.

Haz clic en el icono de vista previa móvil de la barra de herramientas inferior y verás cómo se ve tu galería en dispositivos móviles.

A continuación, puedes editar tu diseño para que se vea genial en cualquier dispositivo.

En la pestaña Visibilidad del dispositivo, también puedes ocultar elementos específicos en móviles o de escritorio para mejorar la experiencia móvil.

Cuando estés satisfecho con tu galería de imágenes, haz clic en el botón Guardar en la esquina superior derecha de la página.

Paso 4. Publique su galería de imágenes adaptable

Ahora estás listo para publicar tu galería. Para ello, vuelve al panel de control del Theme Builder y activa el interruptor "Habilitar tema SeedProd" en la posición "Sí".

Alternativamente, para páginas de destino, haz clic en la flecha desplegable del botón Guardar y haz clic en Publicar.

Ahora puedes previsualizar tu galería responsive para ver cómo se ve.

Método 2. Use el plugin de WordPress Envira Gallery

Usaremos Envira Gallery para crear una galería responsive de WordPress para el siguiente método. A diferencia de otros plugins de galerías de WordPress, Envira Gallery es rápido, responsive y ligero, pero aún así ofrece funciones extensas y fáciles de usar.

Por ejemplo, ofrece opciones de redimensionamiento de imágenes, presentaciones, diseños flexibles y múltiples fuentes de imágenes.

Primero, instala y activa el plugin Envira Gallery en tu sitio web de WordPress. A continuación, ve a Envira Gallery » Añadir nueva para crear una nueva galería de imágenes.

Para añadir imágenes a tu galería, haz clic en cualquiera de los botones que se muestran a continuación:

La primera opción te permite subir archivos de imagen desde tu ordenador, mientras que el segundo botón te permite elegir imágenes de tu biblioteca de medios de WordPress.

Después de elegir tus imágenes, puedes reordenarlas arrastrando y soltando. También puedes hacer clic en el icono del ojo para poner imágenes específicas en modo borrador y ocultarlas de tu galería publicada.

Además, al hacer clic en el icono del lápiz, puedes editar los metadatos de tu imagen. Por ejemplo, puedes cambiar el título de la imagen, el texto alternativo y el pie de foto, y editar la URL de origen de la página de adjunto.

A continuación, haz clic en la pestaña Configuración donde puedes:

• Cambiar el número de columnas de la galería
• Habilitar la carga diferida de imágenes
• Mostrar descripciones de la galería
• Mostrar pies de foto y títulos
• Establecer el tamaño en píxeles, la posición de recorte de la imagen y el espaciado
• Cambiar las plantillas de la galería

En la pestaña Lightbox, puedes habilitar un lightbox responsive cuando los usuarios hagan clic en una imagen. También te permite ajustar la configuración para cambiar el tema de tu lightbox, mostrar pies de foto, añadir efectos de transición y más.

Además de la configuración anterior, Envira Gallery tiene una pestaña de configuración de galerías móviles. Este panel te permite generar automáticamente imágenes específicas para dispositivos móviles.

Puedes establecer dimensiones personalizadas de imágenes móviles y alturas de fila, e incluso ajustar la configuración del lightbox móvil.

Cuando estés satisfecho con el diseño de tu galería, haz clic en el botón Publicar en la esquina superior derecha.

Para a tilde;adir tu galer ilde;a adaptable a m ilde;oviles a tu sitio web, crea o edita una entrada o p ilde;agina, y luego haz clic en el icono m ilde;as (+) dentro del editor de bloques de WordPress para a tilde;adir un nuevo bloque.

Busca hasta que veas el bloque Envira Gallery y haz clic en ilde;el para a tilde;adirlo a tu p ilde;agina.

Desde el men ilde;u desplegable, selecciona la galer ilde;a que acabas de crear para incrustarla en el editor de WordPress.

Ahora puedes hacer clic en el bot ilde;on Actualizar o Publicar para que tu galer ilde;a est ilde;e en l ilde;inea en tu sitio web.

Nota: Si todav ilde;ia est ilde;as usando el editor cl ilde;asico de WordPress, puedes copiar tu c ilde;odigo corto de Envira Gallery y pegarlo dentro de una entrada o p ilde;agina.

A continuaci ilde;on, previsualiza tu p ilde;agina y comprueba c ilde;omo queda tu nueva galer ilde;a responsiva de WordPress.

Cómo hacer que la galería de productos de WooCommerce sea adaptable

Si tienes una tienda WooCommerce, las galer ilde;as de im ilde;agenes de tus productos tambi ilde;en deben verse bien en m ilde;oviles. Los bloques integrados de WooCommerce de SeedProd hacen que las galer ilde;as de im ilde;agenes de productos sean responsivas por defecto, por lo que no se requiere ning ilde;un plugin de galer ilde;a adicional.

Cuando creas tus p ilde;aginas de productos de WooCommerce con SeedProd, las im ilde;agenes se escalan autom ilde;aticamente para adaptarse a cualquier tama tilde;o de pantalla. Puedes personalizar los dise tilde;os de columnas y los tama tilde;os de las im ilde;agenes directamente en el editor de arrastrar y soltar.

Para una gu ilde;ia paso a paso, consulta nuestra gu ilde;ia sobre c ilde;omo crear una galer ilde;a de im ilde;agenes de productos en WooCommerce.

Preguntas frecuentes sobre la adaptabilidad de la galería de WordPress

ilde;C ilde;omo hacer que una imagen sea responsiva en WordPress?

WordPress a tilde;ade atributos srcset y sizes a las im ilde;agenes autom ilde;aticamente, lo que indica al navegador qu ilde;e tama tilde;o de imagen cargar seg ilde;un el ancho de la pantalla. Para la mayor ilde;ia de los sitios, esto funciona directamente si est ilde;as usando un tema moderno. Si las im ilde;agenes desbordan su contenedor, a tilde;adir max-width: 100%; height: auto; a tu CSS lo soluciona.

ilde;Por qu ilde;e mi galer ilde;a no es clicable en WordPress?

La mayor ilde;ia de los plugins de galer ilde;a tienen como valor predeterminado el comportamiento de no enlazar, lo que significa que las im ilde;agenes no se abrir ilde;an al hacer clic. En SeedProd, ve a la configuraci ilde;on de tu bloque de galer ilde;a y cambia la opci ilde;on Enlazar a a Archivo multimedia o URL personalizada. En Envira Gallery, activa el lightbox en la pesta tilde;a Lightbox para que las im ilde;agenes sean clicables.

ilde;Puedo hacer que la galer ilde;a predeterminada de WordPress sea responsiva sin un plugin?

S ilde;i. El bloque de galer ilde;a nativo de WordPress ya genera im ilde;agenes responsivas usando srcset, y la mayor ilde;ia de los temas modernos manejan el escalado autom ilde;aticamente. Si las im ilde;agenes a tilde;n se rompen en m ilde;oviles, a tilde;adir max-width: 100%; height: auto; como CSS personalizado suele solucionarlo sin necesidad de un plugin.

ilde;Una galer ilde;a responsiva ralentizar ilde;a mi sitio?

No si activas la carga diferida (lazy loading) en tu plugin de galer ilde;a. En Envira Gallery, activa la carga diferida en la pesta tilde;a Configuraci ilde;on. Las galer ilde;as de SeedProd tambi ilde;en admiten la carga diferida por defecto. Mantener las im ilde;agenes por debajo de 200 KB y usar el formato WebP reducir ilde;a a tilde;n m ilde;as los tiempos de carga.

Al hacer que tu galer ilde;a de WordPress sea responsiva, tus fotos se ven geniales en todos los dispositivos y el SEO de tu sitio mejora al mismo tiempo. Ambos m ilde;etodos de esta gu ilde;ia te dan un dise tilde;o preparado para m ilde;oviles en minutos.

Empieza con SeedProd y ten tu galer ilde;a responsiva en l ilde;inea hoy mismo.

Tambi ilde;en te pueden interesar los siguientes tutoriales de WordPress mientras est ilde;as aqu ilde;i:

• C ilde;omo a tilde;adir una galer ilde;a a p ilde;aginas y entradas de WordPress
• Página de destino frente a micrositio: ¿Cuál es mejor para tu marca?
• Cómo personalizar los extractos de publicaciones de WordPress (sin código)
• Cómo añadir un botón de Tweet a WordPress (3 formas)

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.