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?

Añadir imágenes una al lado de la otra puede mejorar el atractivo visual de tu sitio web de WordPress al crear un diseño más interesante.

Las imágenes una al lado de la otra también pueden ayudar a hacer un uso eficiente del espacio de tu sitio web, permitiéndote encajar más elementos visuales en un área limitada.

Por ejemplo, si tienes un sitio web de fotografía, entonces organizar las imágenes una al lado de la otra te ayudará a aprovechar al máximo tu página de WordPress mostrando las imágenes de una manera estéticamente agradable.

Además, a veces, es posible que desees que los usuarios comparen dos imágenes en tu blog de WordPress. Colocarlas una al lado de la otra facilitará que las personas analicen y comprendan las diferencias entre las imágenes.

Dicho esto, te mostraremos dos formas sencillas de colocar imágenes una junto a la otra. El mejor método depende de lo que necesites.

Para la mayoría de los casos sencillos, el editor de bloques integrado de WordPress funciona perfectamente. Si deseas crear galerías de fotos más avanzadas con funciones adicionales, entonces usar un plugin es la mejor opción.

Puedes usar los enlaces a continuación para saltar al método que prefieras:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Extra: Alinear imágenes en WordPress
• Preguntas Frecuentes Sobre Cómo Añadir Imágenes Una al Lado de la Otra

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, entonces 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 tamaños de imagen, enlazarlas a diferentes páginas y cambiar el color de fondo 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 si deseas 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. Es el mejor plugin de galerías de WordPress del mercado y, en nuestra experiencia, es increíblemente fácil de usar y ofrece funciones potentes.

Para más detalles sobre sus funciones, puedes echar 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 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 de WordPress.

Si tu título describe la imagen, entonces puedes simplemente repetirlo para el texto alternativo.

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

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.

Aparte de eso, también puedes usar el bloque de columnas para alinear tu imagen con el contenido. Para hacer esto, tendrás que seleccionar la variación 50/50.

Una vez que hagas eso, puedes agregar un bloque de imagen que se alinee perfectamente con tu contenido.

Además, también puedes ajustar el 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 elegancia.

¿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 revisar 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 las publicaciones y páginas de WordPress.

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