Ya no es un secreto que los contenidos visuales, como las imágenes, desempeñan un poderoso papel a la hora de transmitir conceptos y narraciones. A menudo, el contenido de texto por sí solo no consigue cautivar a los lectores. Por eso es obligatorio incorporar imágenes relevantes en las entradas y páginas de los blogs.
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
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.
