Cómo poner imágenes una al lado de la otra fácilmente en WordPress

Cuando empezamos a escribir en blogs, hacer que las imágenes se alinearan a menudo se sentía más frustrante que divertido.

Pero pronto nos dimos cuenta de que colocar imágenes una al lado de la otra no solo se trata de que las cosas se vean bien, sino que en realidad ayuda a los lectores a comprender y disfrutar más el contenido.

Con el tiempo, hemos aprendido algunas técnicas sencillas para facilitar este proceso, y colocar elementos visuales uno junto al otro se ha convertido en una de nuestras formas preferidas para crear hermosas galerías de fotos.

En este tutorial, te mostraremos dos métodos sencillos para mostrar imágenes una al lado de la otra: uno usando el editor de bloques integrado de WordPress y el otro con el plugin Envira Gallery.

Al final, podrás mejorar el diseño de tu contenido y crear una experiencia más atractiva para tus visitantes.

¿Por qué añadir imágenes una al lado de la otra en WordPress?

Agregar imágenes una al lado de la otra te ayuda a presentar elementos visuales de una manera más clara y estructurada. Mejora la forma en que los usuarios entienden tu contenido y hace que tus páginas se vean más organizadas.

• Mejor narración visual: Puedes mostrar pasos, progreso o ideas relacionadas en una sola vista en lugar de separarlos en la página. Esto hace que tu contenido sea más fácil de seguir y entender de un vistazo.
• Comparación fácil: Puedes colocar dos o más imágenes juntas para que los usuarios puedan comparar rápidamente detalles, diferencias o resultados sin tener que desplazarse hacia atrás y hacia adelante.
• Ahorra espacio en la página: En lugar de apilar imágenes verticalmente y hacer la página más larga, puedes colocar varios elementos visuales en una sola fila, lo que mantiene tu diseño limpio y compacto.
• Mejora el diseño y la maquetación: Las imágenes una al lado de la otra rompen grandes secciones de texto y hacen que tu página se vea más equilibrada, moderna y visualmente atractiva.
• Funciona bien para muchos casos de uso: Es especialmente útil para comparaciones de productos, imágenes de antes y después, tutoriales y portafolios de fotografía donde los elementos visuales son lo más importante.

Dicho esto, te mostraremos dos formas sencillas de colocar imágenes una al lado de la otra. Puedes usar los enlaces a continuación para ir al método que prefieras:

Método 1: Agregar imágenes una al lado de la otra en WordPress usando el editor de bloques

Si buscas una forma sencilla de agregar imágenes una al lado de la otra usando el editor de bloques de Gutenberg, este método es para ti.

El editor de bloques ofrece una funcionalidad de bloque de Galería que te permite mostrar fácilmente imágenes en filas y columnas.

Paso 1: Añade el Bloque de Galería

Primero, necesitarás crear una nueva entrada/página o editar una existente para abrir el editor de contenido. Una vez que estés allí, haz clic en el botón 'Agregar bloque' (+) en la esquina superior izquierda de la pantalla para abrir el menú de bloques.

Desde aquí, simplemente localiza y agrega el bloque de Galería a la página o entrada.

Paso 2: Sube tus Imágenes

Después de eso, puedes agregar fácilmente imágenes a tu bloque de galería desde la computadora haciendo clic en el botón 'Subir'.

También puedes seleccionar imágenes de tu biblioteca de medios de WordPress haciendo clic en el botón ‘Biblioteca de Medios’.

Como puedes ver, hemos agregado 2 imágenes a nuestro bloque de Galería, y WordPress las ha posicionado automáticamente una al lado de la otra.

Si decides agregar una tercera imagen, entonces debes hacer clic en el botón 'Agregar' desde la barra de herramientas del bloque en la parte superior.

Esto abrirá la biblioteca de medios desde donde puedes agregar una tercera imagen a tu bloque de Galería. Una vez que lo hagas, verás que WordPress ha redimensionado las imágenes para colocarlas automáticamente una al lado de la otra.

Paso 3: Ajusta las Columnas de la Galería

Sin embargo, si decides colocar una cuarta imagen en el bloque de Galería, se colocará debajo de las otras imágenes.

Para solucionar esto, puedes cambiar el número de columnas de tu galería. Esta configuración controla cuántas imágenes aparecerán una al lado de la otra en cada fila.

Por ejemplo, si deseas dos imágenes una al lado de la otra y dos más debajo de ellas, puedes establecer las Columnas en 2.

También puedes recortar imágenes para que se alineen, ajustar sus tamaños y enlazarlas a diferentes páginas desde el panel de bloques.

Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo crear una galería de imágenes en WordPress.

Paso 4: Publica tus Cambios

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Ahora, simplemente visita tu sitio web para ver las imágenes una al lado de la otra.

Método 2: Colocar imágenes una al lado de la otra en WordPress usando un plugin (la forma fácil)

Si bien el bloque Galería integrado es perfecto para diseños sencillos, necesitarás un plugin para crear galerías de fotos más avanzadas con funciones como lightboxes, álbumes y opciones para compartir en redes sociales.

Para esto, recomendamos Envira Gallery. Constantemente está calificado como uno de los mejores plugins de galería de WordPress, con una calificación de 4.7/5 estrellas de más de 1,600 reseñas en WordPress.org.

En nuestra experiencia, es muy fácil de usar, incluso para principiantes. El constructor de arrastrar y soltar mantiene las cosas sencillas, al mismo tiempo que te brinda funciones potentes. Las plantillas predefinidas también hacen que sea más rápido crear galerías limpias y pulidas.

En general, es una excelente opción para fotógrafos, artistas y empresas que desean exhibir elementos visuales de manera profesional. Para más detalles sobre sus funciones, echa un vistazo a nuestra reseña de Envira Gallery.

Paso 1: Instalar y activar Envira Gallery

Primero, necesitarás instalar y activar el plugin Envira Gallery. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Paso 2: Crear una nueva galería y subir imágenes

Después de la activación, dirígete a la página Envira Gallery » Agregar Nueva desde tu panel de WordPress.

Una vez que estés allí, tendrás que darle un título a tu nueva galería. Nosotros la llamamos ‘Galería de Ejemplo’.

Después de eso, sube las imágenes que quieras usar desde tu computadora haciendo clic en el botón ‘Seleccionar Archivos De Tu Computadora’.

Para subir imágenes de la biblioteca de medios, haz clic en el botón ‘Seleccionar archivos de otras fuentes’.

Paso 3: Editar metadatos de imágenes (Opcional)

Una vez que hayas subido las imágenes, desplázate hacia abajo hasta la sección Galería para verlas.

Desde aquí, puedes dar a tus imágenes un título y texto alternativo.

El título aparece cuando un usuario pasa el cursor sobre la imagen y también se muestra debajo de la imagen en el lightbox, que es la vista emergente a pantalla completa.

Para editar el título y el texto alternativo, haz clic en el botón ‘Editar’ en una imagen de la galería.

Luego puedes cambiar el título de tu imagen e ingresar el texto alternativo, lo cual es útil para el SEO de tu sitio WordPress.

Si tu título describe la imagen, crea un texto alternativo conciso y descriptivo que explique el contenido y el propósito de la imagen para la accesibilidad y el SEO.

Una vez que hayas terminado, asegúrate de hacer clic en el botón ‘Guardar metadatos’ antes de cerrar la ventana.

Si no lo haces, los cambios que hayas realizado no se guardarán en la galería.

Paso 4: Publicar tu galería

Finalmente, desplázate de nuevo a la parte superior de la página y haz clic en el botón ‘Publicar’ para guardar la galería de imágenes que acabas de crear.

Después de eso, dirígete a la página o publicación de WordPress donde quieras añadirla.

Paso 5: Añadir el bloque Envira Gallery a una publicación o página

Una vez allí, haz clic en el botón ‘Añadir bloque’ (+) en la esquina superior izquierda de la pantalla para abrir el menú de bloques.

Desde aquí, localiza y añade el bloque Envira Gallery a la página/publicación.

A continuación, tendrás que seleccionar la galería que creaste en el menú desplegable dentro del propio bloque.

Paso 6: Configurar el diseño y publicar

Para mostrar las imágenes de la galería una al lado de la otra, ve al panel de bloques en la esquina derecha de la pantalla.

Desde aquí, desplázate hacia abajo hasta la sección ‘Seleccionar diseño’ y elige el número de columnas en el menú desplegable. Tus imágenes ahora se mostrarán una al lado de la otra en la página de WordPress.

También puedes cambiar los márgenes de la galería, habilitar un hermoso efecto de filtrado animado (conocido como Isotope) y configurar los ajustes del lightbox desde el panel del bloque.

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Publicar’ o ‘Actualizar’ para guardar tu configuración.

Ahora, puedes visitar tu sitio web para ver las imágenes mostradas una al lado de la otra.

El usuario ahora puede hacer clic en cualquier imagen para ver la versión a tamaño completo en un lightbox.

Además, también pueden desplazarse por las imágenes usando la lightbox.

Si deseas agregar más imágenes a tu galería, puedes volver a ella visitando la página Envira Gallery » Todas las galerías en tu panel de WordPress.

Una vez allí, simplemente haz clic en el nombre de tu galería para editarla.

Cualquier cambio que realices en tu galería aparecerá donde la hayas colocado en tus publicaciones, páginas o barras laterales. No necesitas agregarla de nuevo a estos lugares.

Extra: Alinear imágenes en WordPress (incluyendo una al lado de la otra con el bloque Columnas)

Cuando agregues dos imágenes una al lado de la otra, deben alinearse para crear una apariencia cohesiva y visualmente atractiva.

Incluso si estás agregando una sola imagen a tu blog de WordPress, aún querrás alinearlo con tu contenido para crear un equilibrio visual.

Puedes alinear fácilmente las imágenes en el editor de bloques de WordPress haciendo clic en el botón 'Alinear' en la barra de herramientas encima del bloque.

Esto abrirá algunas opciones desde donde puedes mover tu imagen a la derecha o a la izquierda, hacer que tenga el mismo ancho que el contenedor, o usar la opción de ancho completo para que el ancho de la imagen sea el mismo que el resto de la página.

Usar el bloque Columnas para imágenes una al lado de la otra

Más allá del bloque Galería, el bloque Columnas es una herramienta excelente para colocar imágenes una al lado de la otra, especialmente cuando necesitas más control sobre el tamaño o el espaciado de imágenes individuales.

Incluso puedes usarlo al combinar imágenes con otro contenido.

Para usarlo, simplemente agrega un bloque de Columnas y selecciona tu diseño deseado, como una división 50/50. Luego, agrega un bloque de imagen que se alinee perfectamente con tu contenido.

Adicionalmente, puedes envolver texto alrededor de la imagen, usar el bloque de grupo, agregar el bloque de portada, o hacer mucho más para alinear imágenes juntas o por separado.

Para más información, consulta nuestra guía para principiantes sobre cómo alinear imágenes en el editor de bloques de WordPress.

Preguntas Frecuentes Sobre Cómo Añadir Imágenes Una al Lado de la Otra

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo añadir imágenes una al lado de la otra en WordPress:

¿Cómo pongo una imagen y texto uno al lado del otro en WordPress?

La mejor manera de colocar una imagen junto a texto es usando el bloque Columnas.

Primero, añade el bloque Columnas y elige un diseño, como 50/50. Luego, puedes añadir un bloque Imagen en una columna y un bloque Párrafo en la otra. Esto te da un diseño limpio, uno al lado del otro.

¿Cuál es la mejor manera de alinear imágenes de diferentes tamaños una al lado de la otra?

Si bien el bloque Galería es excelente para imágenes uniformes, el bloque Columnas ofrece más flexibilidad para diferentes tamaños. Puedes usarlo para crear diseños de 70/30 u otros diseños personalizados.

Para un control más avanzado, un plugin como Envira Gallery te permite crear cuadrículas personalizadas que pueden manejar diversas dimensiones de imagen con gracia.

¿Mis imágenes una al lado de la otra permanecerán juntas en dispositivos móviles?

Típicamente, no. La mayoría de los temas modernos de WordPress son responsivos, lo que significa que los bloques de imágenes colocados uno al lado del otro en un escritorio se apilarán automáticamente verticalmente en pantallas más pequeñas.

Esto se hace para asegurar que las imágenes sean lo suficientemente grandes como para verse claramente en un teléfono, brindando una mejor experiencia de usuario.

Esperamos que este tutorial te haya ayudado a aprender cómo poner imágenes una al lado de la otra en WordPress. También podrías querer consultar nuestra guía sobre cómo cambiar la altura y el ancho de los bloques en WordPress y nuestra guía sobre cómo agregar tablas en publicaciones y páginas de WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.