---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-imagenes'
title: 'Crea una galería de imágenes | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:31+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una galería de fotos: un encabezado centrado, tres fotos lado a lado con texto alternativo, y una presentación en una banda gris. Úsala para mostrar un lugar o un evento en imágenes. Para mostrar proyectos cada uno con su descripción, sigue Crea una galería de portafolio en su lugar.
  El vídeo crea una galería de pinturas de estudiantes para una universidad.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una galería de imágenes'
      description: |-
        Aquí creas una galería de fotos: un encabezado centrado, tres fotos lado a lado con texto alternativo, y una presentación en una banda gris. Úsala para mostrar un lugar o un evento en imágenes. Para mostrar proyectos cada uno con su descripción, sigue Crea una galería de portafolio en su lugar.
        El vídeo crea una galería de pinturas de estudiantes para una universidad.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:57:31+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-imagenes'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-imagenes'
      description: |-
        Aquí creas una galería de fotos: un encabezado centrado, tres fotos lado a lado con texto alternativo, y una presentación en una banda gris. Úsala para mostrar un lugar o un evento en imágenes. Para mostrar proyectos cada uno con su descripción, sigue Crea una galería de portafolio en su lugar.
        El vídeo crea una galería de pinturas de estudiantes para una universidad.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Sigue un tutorial](/es/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una galería de imágenes.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Añadir una imagen](/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen)
- [Añadir un carrusel de imágenes](/es/hc/documentacion/aprender-dxpr-builder/elementos/carrusel-imagenes)
- [Crea una galería de portafolio](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-portafolio)

Aquí creas una galería de fotos: un encabezado centrado, tres fotos lado a lado con texto alternativo, y una presentación en una banda gris. Úsala para mostrar un lugar o un evento en imágenes. Para mostrar proyectos cada uno con su descripción, sigue [Crea una galería de portafolio](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-portafolio) en su lugar.

El vídeo crea una galería de pinturas de estudiantes para una universidad.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda al menos seis fotos, recortadas a las mismas proporciones.
- La página está abierta en el constructor. Para una nueva, ve a **Contenido** > **Añadir contenido** > **Página de destino** (`/node/add/landing_page`) y haz clic en **Guardar**.

## Paso 1: añade el encabezado

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**.
2. Pasa el cursor sobre la sección y abre **Más** > **Ajustes**. En **Clases HTML** elige **Centrar texto**, y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Texto** en la pestaña **Contenido**.
4. Escribe «Galería de arte estudiantil» como **Encabezado 2**, añade una línea de presentación y haz clic en **Guardar**. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee [Crea páginas amables con el SEO](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seo#step-1-start-the-content-at-heading-2).

## Paso 2: añade la cuadrícula de fotos

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Haz clic en **+** en la sección nueva y elige **Fila**; llega con dos columnas iguales.
2. Haz clic en el icono de cuadrícula de la fila (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**.
3. Haz clic en **+** en la primera columna y elige **Imagen**.
4. Haz clic en **Seleccionar imagen**, busca en la biblioteca de medios con **Aplicar filtros**, haz clic en una foto y haz clic en **Insertar selección**.
5. Abre el panel **SEO** y escribe el **atributo Alt**: lo que debería saber quien no puede ver la foto. Haz clic en **Guardar**.
6. Repite para la segunda y la tercera columna.

Las fotos recortadas a las mismas proporciones mantienen la fila pareja.

## Paso 3: añade la presentación

1. Añade una tercera sección con **Añadir sección debajo** y abre **Más** > **Ajustes**. Elige **Centrar texto** en **Clases HTML** y un **Fondo** gris claro en el panel **Estilo**. Haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Carrusel de imágenes**.
3. Haz clic en **Seleccionar imagen**, busca en la biblioteca, haz clic en tres fotos y haz clic en **Insertar selección**, y haz clic en **Guardar**.
4. Haz clic en **+** en la sección de nuevo y elige **Texto**; cae encima del carrusel. Escribe «Presentación» como **Encabezado 2** y haz clic en **Guardar**.

## Paso 4: guarda y muestra la vista previa

1. Haz clic en **Guardar** en la barra de herramientas del constructor.
2. Abre el menú de vista (el **icono de ojo**) y elige **Vista previa**.

## Ve más allá

No sale en el vídeo:

- **Pies de foto**: pon una **Tarjeta** en la columna y añade un elemento **Texto** con el pie dentro. Luego añade la **Imagen** dentro de la tarjeta; cae encima del pie.
- **Fotos a tamaño completo**: pon **Enlace de imagen** en el archivo a tamaño completo y **Destino del enlace de imagen** en **Ventana nueva**.
- **Estilo**: en cada imagen, pon **Radio de bordes** en 4 y **Sombra paralela** en 1 en el panel **Estilo** para un relieve suave.
- **Ritmo de presentación**: fija el **Intervalo** del carrusel, en milisegundos. En **Esconder**, marca **Esconder control de paginación** o **Esconder botones anterior/siguiente** para quitar esos controles.
- **Galería que se llena sola**: en **Estructura** > **Vistas** > **Añadir vista**, crea una vista de medios de Imagen con una pantalla de bloque en formato **Cuadrícula**. Insértala desde la pestaña **Vistas de Drupal**, y las subidas nuevas aparecen solas.

## Lo que ves

El encabezado centrado abre la página, seguido de tres fotos lado a lado. En la banda gris de abajo, la presentación muestra una foto cada vez y avanza a la siguiente cada cinco segundos.

## Si no ves las fotos como se muestra

- **Insertar selección no añade foto.** La biblioteca aún recargaba tras **Aplicar filtros**, así que tu clic no marcó la foto. Espera a que la cuadrícula se asiente, comprueba que la foto muestra una marca, y haz clic en **Insertar selección** de nuevo.
- **La biblioteca de medios está vacía.** Aún no hay imágenes subidas, o el navegador de medios no está configurado. Lee [Las imágenes no se suben o desaparecen](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/imagenes-medios).
- **Las tres fotos tienen distintos altos.** Sus proporciones difieren. Recórtalas a las mismas proporciones, súbelas de nuevo y elige las copias nuevas.
- **Tus cambios desaparecieron tras recargar.** Saliste de la página antes de hacer clic en **Guardar** en la barra de herramientas del constructor. Si Guardar muestra un error, lee [Los cambios no se guardan](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/cambios-no-guardan).

## ¿Qué sigue?

- [Elemento imagen](/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen) para cada ajuste de imagen
- [Elemento carrusel de imágenes](/es/hc/documentacion/aprender-dxpr-builder/elementos/carrusel-imagenes) para opciones de presentación
- [Portafolio](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-portafolio) para una cuadrícula de proyectos con filtro