---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-portafolio'
title: 'Crea una galería de portafolio | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:26+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página de portafolio: un encabezado centrado, tres proyectos lado a lado con una foto de portada y un resultado de una línea cada uno, y una llamada a la acción. Úsala para mostrar tu trabajo de un vistazo y enlazar cada proyecto con su historia. Para redactar a fondo un proyecto, sigue Escribe un caso práctico.
  El vídeo crea una página de agencia llamada «Nuestro trabajo».
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 portafolio'
      description: |-
        Aquí creas una página de portafolio: un encabezado centrado, tres proyectos lado a lado con una foto de portada y un resultado de una línea cada uno, y una llamada a la acción. Úsala para mostrar tu trabajo de un vistazo y enlazar cada proyecto con su historia. Para redactar a fondo un proyecto, sigue Escribe un caso práctico.
        El vídeo crea una página de agencia llamada «Nuestro trabajo».
      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:26+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-portafolio'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/galeria-portafolio'
      description: |-
        Aquí creas una página de portafolio: un encabezado centrado, tres proyectos lado a lado con una foto de portada y un resultado de una línea cada uno, y una llamada a la acción. Úsala para mostrar tu trabajo de un vistazo y enlazar cada proyecto con su historia. Para redactar a fondo un proyecto, sigue Escribe un caso práctico.
        El vídeo crea una página de agencia llamada «Nuestro trabajo».
      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 portafolio.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Muestra una vista de Drupal en tu página](/es/hc/documentacion/aprender-dxpr-builder/integraciones/vistas-drupal)
- [Escribe un caso práctico](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/caso-practico)
- [Añadir una imagen](/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen)

Aquí creas una página de portafolio: un encabezado centrado, tres proyectos lado a lado con una foto de portada y un resultado de una línea cada uno, y una llamada a la acción. Úsala para mostrar tu trabajo de un vistazo y enlazar cada proyecto con su historia. Para redactar a fondo un proyecto, sigue [Escribe un caso práctico](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/caso-practico).

El vídeo crea una página de agencia llamada «Nuestro trabajo».

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto de portada para cada proyecto, 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**.
- Los elementos nuevos caen arriba de su columna, así que cada foto de portada entra tras su texto.

## 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 «Nuestro trabajo» 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 proyectos

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Abre **Más** > **Ajustes** de la sección nueva, elige un **Fondo** gris claro en el panel **Estilo** y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales. Haz clic en su icono de cuadrícula (**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 **Texto**. Escribe el nombre del proyecto como **Encabezado 3**, añade el resultado de una línea y haz clic en **Guardar**.
4. Haz clic en **+** en la misma columna y elige **Imagen**; cae encima del texto. Haz clic en **Seleccionar imagen**, marca la foto de portada y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**.
5. Repite para la segunda y la tercera columna.

## Paso 3: añade la llamada a la acció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**, luego el **Fondo** morado y el **Color de fuente** blanco en el panel **Estilo**. Haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Escríbenos», **Enlace** en `/contact`, **Tipo** en **Claro** y **Tamaño** en **Grande**, y haz clic en **Guardar**.
3. Haz clic en **+** de nuevo y elige **Texto**; cae encima del botón. Escribe «Trabajemos juntos» como **Encabezado 2** y añade una línea. Pon **Color de fuente** en blanco en el panel **Estilo** 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:

- **Enlaza cada proyecto**: pon **Enlace de imagen** en la foto de portada a la página del caso práctico.
- **Relieve al pasar el cursor**: en el panel **Estilo** de cada imagen pon **Radio de bordes** en 4 y **Sombra paralela** en 1. En **Estilo al pasar el cursor** sube **Sombra paralela** a 3.
- **Más proyectos**: añade otra **Fila** con el mismo ajuste bajo la primera.

## Haz la cuadrícula filtrable

La cuadrícula estática vale para pocos proyectos. Para dejar que las personas visitantes filtren por tipo, guarda cada proyecto como contenido y muéstralos con una vista que tenga un filtro expuesto. Views forma parte del núcleo de Drupal.

### 1. Crea el tipo de contenido Portafolio

1. Ve a **Estructura** > **Tipos de contenido** > **Añadir tipo de contenido** (`/admin/structure/types/add`).
2. Nómbralo «Portafolio» y guarda.
3. En la pestaña **Gestionar campos**, añade un campo **Imagen** con etiqueta «Imagen de portada».
4. Añade un campo **Lista (texto)** con etiqueta «Tipo de proyecto» y valores como `web|Web`, `branding|Branding` y `campaign|Campaign`.
5. Crea algunos elementos de Portafolio en **Contenido** > **Añadir contenido** > **Portafolio**.

### 2. Crea la vista

1. Ve a **Estructura** > **Vistas** > **Añadir vista** (`/admin/structure/views/add`).
2. Nómbrala «Cuadrícula de portafolio»; en **Ajustes de vista** muestra **Contenido** de tipo **Portafolio**.
3. Marca **Crear un bloque**, pon el formato de pantalla en **Cuadrícula** de **campos** y guarda.
4. En el editor de vistas, añade los campos **Imagen de portada** y **Título**, y pon la cuadrícula en 3 columnas en sus ajustes de formato.
5. En **Criterios de filtro**, haz clic en **Añadir**, elige **Tipo de proyecto** y marca **Exponer este filtro a las personas visitantes**. Ponle etiqueta «Filtrar por tipo».
6. En **Avanzado**, pon **Usar AJAX** en Sí. Los filtros expuestos en una página del constructor solo funcionan con AJAX.
7. Guarda la vista.

### 3. Inserta la vista en la página

1. De vuelta en DXPR Builder, vacía las tres columnas estáticas o añade una **Fila** nueva.
2. Haz clic en **+**, abre la pestaña **Vistas de Drupal** y elige **Vista: Cuadrícula de portafolio (Bloque)**.
3. En el diálogo de ajustes, marca **Mostrar filtros expuestos** y haz clic en **Guardar**. La cuadrícula se muestra con el desplegable «Filtrar por tipo» encima, y los elementos nuevos de Portafolio aparecen solos.
4. Haz clic en **Guardar** en la barra de herramientas del constructor.

## Lo que ves

El encabezado centrado «Nuestro trabajo» abre la página. En la banda gris de abajo, tres proyectos quedan lado a lado, cada uno una foto de portada sobre su nombre y resultado. Una banda morada cierra la página con **Escríbenos**.

## Si no ves la página como se muestra

- **Una foto de portada queda debajo de su texto.** La foto entró antes que el texto, y los elementos nuevos caen arriba de su columna. Arrastra la foto encima del texto por el tirador de su barra de control.
- **Las portadas tienen distintos altos.** Sus proporciones difieren. Recórtalas a las mismas proporciones, súbelas de nuevo y elige las copias nuevas.
- **Cuadrícula de portafolio no está en la pestaña Vistas de Drupal.** La vista está desactivada, o tu perfil de usuario del constructor la esconde. Actívala en **Estructura** > **Vistas**, o pide a una persona administradora que la marque en **Vistas** en tu perfil de usuario.
- **El editor muestra «Turn on Ajax on this view to use exposed filters».** La vista no usa AJAX. Pon **Usar AJAX** en Sí en **Avanzado** en el editor de vistas; lee [Un elemento se ve o se comporta mal](/es/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **Falta el desplegable «Filtrar por tipo».** **Mostrar filtros expuestos** está desactivado en el elemento. Abre los ajustes del elemento de vista, márcalo y haz clic en **Guardar**.

## ¿Qué sigue?

- [Integración con Vistas de Drupal](/es/hc/documentacion/aprender-dxpr-builder/integraciones/vistas-drupal) para cómo las pantallas de vista llegan al selector de elementos
- [Caso práctico](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/caso-practico) para la página a la que enlaza cada proyecto
- [Elemento imagen](/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen) para cada ajuste de imagen