En Bloque de imágenes de WordPress is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
Hoy, en este tutorial, hablaremos del bloque de galería de WordPress, las características de la barra de herramientas, las opciones de personalización y cómo usarlo correctamente. Asegúrate de seguirnos de principio a fin.
¿Qué es el bloque de galería de WordPress?
El bloque Galería de WordPress is a core block in the WordPress block editor. It lets you create and display a collection of images in a cuadrícula format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
Ciertas características le benefician cuando utiliza el bloque. Descúbralas a continuación.
- Personalización: Ajusta las columnas, el espaciado y los pies de foto para adaptarlos a tu diseño. También puede establecer diferentes resoluciones para imágenes individuales en la galería.
- Diseño adaptable: Las imágenes se adaptan automáticamente a los distintos tamaños de pantalla para ofrecer una experiencia fluida en móviles, tabletas y ordenadores de sobremesa.
- Integración incorporada: No hay necesidad de plugins adicionales; el bloque funciona de forma nativa en WordPress.
- SEO-Friendly: Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
Funciones de la barra de herramientas del Bloque de Galería
Cuando insertas el bloque de galería, aparece una barra de herramientas en la parte superior del bloque de galería con varias funciones para personalizar tu galería. Estas funciones se muestran a continuación.
- Transfórmate: Puede transformar este bloque en un bloque de Imagen, Columnas, Detalles y Grupo.
- Arrastra: Permite arrastrar y soltar el bloque dedicado en cualquier lugar del editor.
- Asa móvil: Permite mover el bloque arriba y abajo.
- Alinear: La opción de alineación le permite ajustar la alineación de la imagen a Ninguna, Ancho, Ancho completo, Izquierda, Centro y Derecha.
- Enlace: Esta opción le permite añadir enlaces para el contenido seleccionado dentro del bloque.
- Pie de foto: Puedes añadir pies de foto utilizando la opción del editor para cada imagen.
- Añade: La opción de añadir permite añadir o cargar nuevas imágenes en la galería.
- Más opciones: Ofrece más opciones relacionadas con la sección del bloque, como duplicar, copiar, agrupar, etc.
Cómo utilizar el bloque de galería en WordPress
Using the Gallery block in WordPress is simple. Just follow the below steps:
Paso 1: Añadir Bloque de Galería en el Editor
Abre la publicación o página, haz clic en el icono "+" para añadir un bloque y busca "Galería". Selecciona el Bloque de Galería para insertarlo en tu post o página.
Paso 2: Cargue sus imágenes
Puedes subir tus imágenes o seleccionarlas de la mediateca.
Cómo insertar imágenes mediante la opción de carga
Para insertar archivos de imagen, haga clic en el botón de carga, seleccione las imágenes con el cursor mientras que manteniendo pulsado el botón CTRL de tu teclado y haz clic en Abrir. Y ya está. Podrás ver tus imágenes en el editor.
Cómo insertar una imagen a través de la opción de biblioteca multimedia
Haga clic en el botón Biblioteca multimedia, seleccione sus imágenes y haga clic en el botón Crear una nueva galería e Insertar galería para insertar las imágenes en el editor.
Cuando hayas insertado todas las imágenes en la galería, podrás ver todas las funciones de la barra de herramientas del bloque de imágenes. Puedes comprobar esas funciones aquí.
Paso 3: Personalización de la galería
Para personalizar la galería, vaya a Ajustes (1) > Bloquear (2) > Ajustes (3). Encontrará las opciones de selección de columnas, resolución y otras opciones.
- Columnas: Las columnas le permiten determinar cuántas imágenes desea mostrar en su editor. Cuantas más imágenes añadas, más columnas se añadirán a la Galería. (4)
- Resolución: Puedes configurar la resolución de la imagen en Miniatura y Tamaño completo. (5)
- Recortar imágenes para ajustarlas: Esta función mantiene la proporción de cada imagen y hace que su tamaño se ajuste.
- Orden aleatorio: Esta función no mantiene la serie, sino que muestra imágenes en una serie aleatoria.
La opción Estilos presenta las siguientes opciones.
- Color: La opción de color le permite cambiar el color de fondo de su bloque Galería.
- Dimensiones: La opción Dimensiones le permite modificar el Espaciado entre bloques (espacio entre dos bloques como las imágenes), el Margen y el Relleno.
- Borde y radio: Con esta función, puede añadir un borde, un color de borde y un radio de borde a su galería.
Aquí está la demo completa de la galería que he creado.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the Galleryberg plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
Paso 1: Instalar el plugin Galleryberg
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
Paso 4: Elegir un diseño
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to Albañilería, Justificadoo Cuadrado to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
Paso 6: Vista previa y publicación
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
Reflexiones finales
El Bloque de Galería es una potente herramienta con el editor de bloques Gutenberg. Te permite mostrar tus colecciones de imágenes sin necesidad de plugins adicionales.
Es una opción excelente para todos por su flexibilidad, opciones de personalización y perfecta integración con WordPress.
Pruébelo y vea cómo puede transformar la forma de mostrar imágenes en su sitio web.
Déjame saber tu opinión sobre el tutorial en la sección de comentarios. También, deje que sus compañeros saben acerca de él a través de su plataforma de medios sociales.
Más información
