WordPress le permite añadir imágenes a su sitio de numerosas maneras. Una de las formas más eficaces es añadir imágenes en columnas y filas. Te permite presentar tus imágenes de forma organizada.

En esta entrada del blog, le mostraremos múltiples maneras de cómo mostrar imágenes de WordPress en Columnas y Filas.

• Método 1: Uso del bloque de columnas (Lo mejor para un control manual total y diseños personalizados)
• Método 2: Uso del bloque Galería (Lo mejor para rejillas de imágenes sencillas con un estilo mínimo)
• Método 3: Utilización del bloque Galleryberg (Lo mejor para diseños avanzados con lightbox y personalización)
• Método 4: Uso del complemento Tableberg (Ideal para cuadrículas de imágenes estructuradas, como tablas de precios, horarios o productos)

Cree bonitas mesas
Con el editor de bloques

Pruebe gratis

Conseguir Pro

Método 1: Utilizar el bloque de columnas

WordPress tiene un bloque de columnas por defecto. Puedes añadir muchos más bloques dentro de ella, incluyendo el bloque de imagen. Aquí está la guía.

Paso 01: Añadir el bloque Columna Gutenberg

Find and add the Column block haciendo clic en el icono más (+) del editor.

Seleccione el número de variaciones de columna que desea añadir al bloque de columnas. Para este tutorial, seleccionaremos la variación de columna 50/50.

Paso 02: Añadir el Bloque de Imagen al Bloque de Columna

Como dijimos, puedes otros bloques de Gutenberg dentro del bloque de columna. Ahora, haga clic en el icono más (+) dentro de la columna. Buscar y añadir el bloque Imagen a ella.

Ahora puede añadir imágenes de la biblioteca multimedia o de la unidad local. Hazlo como desees.

Paso 03: Estilizar el Bloque de Imagen dentro del Bloque de Columna

Puede ver que hemos añadido una imagen. Puede alinearla en el centro utilizando la opción de alineación de la barra de herramientas. Cambia el tamaño de la imagen con el icono del círculo de borde. Por último, puedes darle más estilo utilizando las opciones de la pestaña Estilo.

Del mismo modo, añada también una imagen a la otra columna.

Método 2: Utilizar el Bloque Galería

WordPress tiene un bloque de Galería por defecto mediante el cual puedes añadir múltiples imágenes con el mismo diseño de bloque.

Paso 01: Añadir el Bloque de Galería

Como en el método anterior, encontrar y añadir el bloque Galería al editor.

Podrás cargar imágenes desde tu unidad local o el Mediateca. En este tutorial, cargaremos imágenes desde la Biblioteca multimedia.

Paso 02: Seleccionar y cargar imágenes

Seleccione las imágenes que desea cargar en el bloque Galería. Puede seleccionar tantas imágenes como desee. Una vez hecho esto, haga clic en el botón Crear una nueva galería.

Si quieres, puedes añadir leyendas para cada imagen. No hay problema si no añades nada. Pulsa el botón Botón Insertar Galería al final.

Puede ver que se han añadido imágenes a la galería. A continuación, puede personalizar el bloque Imagen utilizando las opciones del menú Ajustes y Ficha Estilos en la barra lateral derecha.

Espero que puedas hacerlo solo, así que no entro en detalles.

Método 3: Utilizar el plugin Galleryberg

Si busca una forma más flexible y visualmente más cuidada de mostrar imágenes en columnas o filas, la función Galleryberg es una opción fantástica. Es un plugin de bloque de galería nativo de Gutenberg que te da múltiples opciones de diseño - incluyendo Azulejos, Mampostería, Justificado y Cuadrado - todos con caja de luz apoyo.

Paso 1: Instalar el plugin Galleryberg

Vaya a su panel de WordPress y navegue hasta Plugins > Añadir nuevo. A continuación, busque "Galleryberg" e instale y active el plugin.

Paso 2: Añadir el bloque Galleryberg

Abra la página o la entrada en la que desea mostrar las imágenes. A continuación, haga clic en el botón + y busque "Galleryberg". Añádalo a la página.

Paso 3: Cargar o seleccionar imágenes

Utiliza la biblioteca multimedia o sube nuevas imágenes. Puedes reorganizar las imágenes arrastrándolas y soltándolas.

Paso 4: Elegir un diseño

En el panel de configuración de bloques, seleccione el diseño que desee:

• Azulejos: Diseño de cuadrícula con espacios iguales (ideal para filas y columnas)
• Albañilería: Diseño apilado al estilo Pinterest
• Justificado: Filas ordenadas de igual altura
• Cuadrado: Cuadrados perfectos para una visualización uniforme de la cuadrícula

Paso 5: Activar la opción Lightbox

En la barra lateral de configuración del bloque, active la casilla Activar Lightbox opción.

Tus imágenes se abrirán ahora en una ventana emergente con transiciones suaves, efectos de zoom y navegación por diapositivas.

Paso 5: Personalizar y publicar

• Establezca el número de columnas (de 1 a 8)En la barra lateral de configuración del bloque, desplácese hasta la opción Caja de luz sección.
• Alternar Activar Lightbox opción.
• Tus imágenes se abrirán ahora en una ventana emergente con transiciones suaves, efectos de zoom y navegación por diapositivas.
• Ajuste el espaciado, los subtítulos, los bordes, etc.
• Activar lightbox para previsualizar imágenes interactivas

Haga clic en Publique o Actualización y tu galería aparecerá en filas y columnas limpias y adaptables.

Método 4: Utilizar el plugin Tableberg

TableBerg es un plugin constructor de tablas fácil de usar. Permite añadir varios bloques personalizados a las celdas de la tabla para crear tablas multifuncionales. En esta sección, le mostraremos cómo añadir imágenes en WordPress utilizando el plugin Tableberg plugin.

Paso 01: Instalar y activar el plugin Tableberg

Ir a Plugins > Añadir nuevo plugin. Tipo Tableberg en el cuadro de búsqueda. Instale y activar una vez que el plugin aparece a continuación.

Paso 02: Añade el bloque Tableberg a tu post/página

El plugin viene con un bloque Gutenberg llamado TableBerg. Busca y añade el bloque Bloque TabelBerg a su editor.

Defina el número de fila y columna de la tabla. El proceso es similar al del bloque de tabla por defecto. Hágalo usted mismo.

Paso 03: Buscar y añadir el bloque de imagen a la tabla

Espero que tu tabla esté lista. Selecciona la celda donde quieres añadir una imagen. Una vez que seleccione una celda, aparecerá el icono icono más (+) aparecerá.

Click the plus (+) icon. Obtendrá el bloque Imagen. Pulsa el bloque Imagen.

Tendrás opciones para subir imágenes desde la unidad local o desde la biblioteca multimedia. Haz clic en la opción que quieras y sube la imagen.

Paso 04: Estilizar la imagen cargada

Con suerte, su imagen ya está cargada en la tabla. Vaya a la pestaña Estilos en la barra lateral derecha. Encontrarás opciones como Duotono, Borde y Radio para estilizar tu bloque Imagen.

Por lo tanto, puede subir imágenes a la tabla de WordPress con el plugin. Explorar cómo crear una sección de miembros de equipo en WordPress mediante el bloque de columnas.

Observaciones finales

Para mantener con éxito un sitio web, es necesario cargar y presentar el contenido de diferentes maneras. A veces, el mismo contenido tiene que ser presentado de diferentes maneras en diferentes posts y páginas. Y lo mismo ocurre con el bloque de imágenes.

Con suerte, después de leer este tutorial, usted será capaz de añadir su bloque de imagen de varias maneras en WordPress y traer variaciones al contenido.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

Una forma eficaz de mostrar imágenes es colocarlas una al lado de la otra. Esta técnica es especialmente útil para comparar varios productos, presentar imágenes del antes y el después y contar una historia.

En este artículo, le mostraremos tres formas sencillas de poner imágenes una al lado de la otra en WordPress.

• Método 1: Uso del bloque Galería
• Método 2: Uso del bloque de columnas
• Método 3: Uso del bloque Tableberg

Cree bonitas mesas
Con el editor de bloques

Pruebe gratis

Conseguir Pro

Método 1: Utilizar el Bloque Galería

WordPress viene con el bloque Galería por defecto. Puede presentar imágenes lado a lado con el bloque de las siguientes maneras.

Paso 01: Añadir el Bloque de Galería a WordPress

Sólo tienes que abrir un post o una página. Busque el icono Bloque de la galería en la biblioteca de bloques de Gutenberg pulsando la tecla Botón más (+). Añádelo al editor.

Haga clic en el botón Botón de carga para añadir imágenes frescas desde tu almacenamiento local al lateral. O bien, puede cargarlas desde sus archivos existentes haciendo clic en el botón Mediateca botón.

Para este tutorial, subiremos imágenes desde la Biblioteca Multimedia. Seleccione las imágenes que desea añadir. Pulsa el botón Crear una nueva galería al final.

Una vez añadidas las imágenes al editor, las verás aparecer una al lado de la otra. A continuación, puedes personalizar los ajustes y estilizaciones del bloque Galería utilizando las opciones correspondientes de la barra lateral derecha.

Nota: Si las imágenes no se muestran juntas por defecto, seleccione todo el bloque haciendo clic en el botón Icono de la galería en la barra de herramientas. Especifique los números de columna en la barra lateral derecha.

Segundo método: utilizar el bloque de columnas

El bloque Columna permite divide tu contenido en varias columnas. Puede añadir otros bloques para añadir diferentes tipos de contenido dentro de cada columna.

Paso 01: Añadir el bloque de columnas a su sitio web

Añada el Bloque de columnas a su editor siguiendo el mismo método descrito anteriormente.

Seleccione la disposición de las columnas a su gusto. Puede mostrar un número igual de imágenes una al lado de la otra, correspondiente al número de columnas que añada. Hemos seleccionado el diseño de dos columnas para el bloque.

Añada el Bloque de imágenes pulsando el botón Botón más (+) dentro del Bloque de columnas.

Sube una imagen de la misma manera que te mostramos arriba.

Nota: Como se trata del bloque Imagen, puede añadir sólo una imagena diferencia del bloque Galería.

Del mismo modo, añada el Bloque de imágenes de nuevo a la segunda columna.

Puede ver que la segunda imagen ha aparecido junto a la primera. Ahora puedes añadir textos alternativos y otros ajustes para las imágenes una a una.

Tercer método: Utilización del bloque Tableberg

Tableberg es un complemento constructor de tablas basado en bloques. Con él, también puede crear columnas y mostrar imágenes lado a lado. Siga los pasos que se explican a continuación después de instalación de y activación de el plugin.

Paso 01: Añadir el bloque TableBerg

El plugin incluye un Bloque TableBerg. Añádelo a tu editor.

Puede seleccionar varias filas si lo desea. Pero explicaremos el tutorial de hoy con una sola fila y varias columnas.

TableBerg le permite añadir diferentes tipos de bloques a las celdas de la tabla. Añada los Bloque de imágenes a las celdas de la tabla.

Cargar una imagen a la celda de la tabla de la misma forma que te mostramos en los dos métodos anteriores.

Sigue añadiendo imágenes a otras columnas de la tabla utilizando la función Bloque de imágenes. Espero que puedas hacerlo solo.

Vea la imagen siguiente. Hemos mostrado tres imágenes una al lado de la otra dentro de la tabla creada con el bloque TableBerg.

# Eliminar el borde de la mesa

Puede ver un borde alrededor de la mesa. Para quitarlo, haga clic en el icono TableBerg tres veces en la barra de herramientas. Ir a Estilos > Borde en la barra lateral derecha. Ponga el valor cero (0) para definir el tamaño del borde de la tabla.

De este modo, puede mostrar las imágenes una al lado de la otra en los sitios web de WordPress.

Conclusión

Mostrar imágenes una al lado de la otra es muy ventajoso, mientras que la comparación visual entre diferentes productos, opciones, características y variaciones es esencial. Espero que puedas hacerlo solo hoy con este tutorial.

Usted puede hacer más en su sitio mediante la creación de diferentes tipos de tablas utilizando el plugin TableBerg. Eche un vistazo a cómo crear una tabla comparativa de productos de Amazon en WordPress.

<p>The post How to Put Images Side by Side in WordPress (Three Ways) first appeared on Tableberg.</p>