---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/galeria-de-portefolio'
title: 'Crie uma galeria de portefólio | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:07:00+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aqui constrói-se uma página de portefólio: um cabeçalho centrado, três projetos lado a lado com uma foto de capa e um resultado de uma linha cada, e um apelo à ação. Use-a para mostrar o seu trabalho de relance e ligar cada projeto à sua história. Para escrever sobre um projeto em profundidade, siga Escreva um estudo de caso.
  O vídeo constrói uma página de agência chamada "Our work".
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: 'Crie uma galeria de portefólio'
      description: |-
        Aqui constrói-se uma página de portefólio: um cabeçalho centrado, três projetos lado a lado com uma foto de capa e um resultado de uma linha cada, e um apelo à ação. Use-a para mostrar o seu trabalho de relance e ligar cada projeto à sua história. Para escrever sobre um projeto em profundidade, siga Escreva um estudo de caso.
        O vídeo constrói uma página de agência chamada "Our work".
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:07:00+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/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/galeria-de-portefolio'
      articleSection: 'Seguir um tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/galeria-de-portefolio'
      description: |-
        Aqui constrói-se uma página de portefólio: um cabeçalho centrado, três projetos lado a lado com uma foto de capa e um resultado de uma linha cada, e um apelo à ação. Use-a para mostrar o seu trabalho de relance e ligar cada projeto à sua história. Para escrever sobre um projeto em profundidade, siga Escreva um estudo de caso.
        O vídeo constrói uma página de agência chamada "Our work".
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Seguir um tutorial](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie uma galeria de portefólio.

 Aprender DXPR BuilderCriar páginasSeguir um tutorial

   ## Neste guia

 Guias relacionados

- [Mostre uma vista Drupal na sua página](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/vistas-drupal)
- [Escreva um estudo de caso](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/caso-de-estudo)
- [Adicionar uma imagem](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/imagem)

Aqui constrói-se uma página de portefólio: um cabeçalho centrado, três projetos lado a lado com uma foto de capa e um resultado de uma linha cada, e um apelo à ação. Use-a para mostrar o seu trabalho de relance e ligar cada projeto à sua história. Para escrever sobre um projeto em profundidade, siga [Escreva um estudo de caso](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/caso-de-estudo).

O vídeo constrói uma página de agência chamada "Our work".

  ## Antes de começar

- A sua função tem a permissão **Edit with DXPR Builder**.
- A biblioteca de média tem uma foto de capa para cada projeto, cortada nas mesmas proporções.
- A página está aberta no construtor. Para uma nova, vá a **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e clique em **Save**.
- Os elementos novos ficam no topo da sua coluna, por isso cada foto de capa entra depois do seu texto.

## Passo 1: adicione o cabeçalho

1. Clique em **Add Elements** na página vazia e escolha **Section** no separador **Layout**.
2. Paire o cursor sobre a secção e abra **More** > **Settings**. Em **HTML classes** escolha **Align text center** e clique em **Save**.
3. Clique em **+** na secção e escolha **Text** no separador **Content**.
4. Escreva "Our work" como **Heading 2**, adicione uma linha de introdução e clique em **Save**. O tema imprime o título da página como Heading 1 da página. Para fazer deste cabeçalho o Heading 1, veja [Crie páginas amigas de SEO](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seo#step-1-start-the-content-at-heading-2).

## Passo 2: adicione a grelha de projetos

1. Paire o cursor sobre a secção e clique em **Add Section Below**. Abra o **More** > **Settings** da secção nova, escolha um **Background** cinzento claro no painel **Style** e clique em **Save**.
2. Clique em **+** na secção e escolha **Row**; vem com duas colunas iguais. Clique no seu ícone de grelha (**Column layout**), escolha a predefinição **1/3 + 1/3 + 1/3** e clique em **Save**.
3. Clique em **+** na primeira coluna e escolha **Text**. Escreva o nome do projeto como **Heading 3**, adicione o resultado de uma linha e clique em **Save**.
4. Clique em **+** na mesma coluna e escolha **Image**; fica por cima do texto. Clique em **Select Image**, marque a foto de capa e clique em **Insert selected**. Escreva o **Alt attribute** no painel **SEO** e clique em **Save**.
5. Repita para a segunda e a terceira coluna.

## Passo 3: adicione o apelo à ação

1. Adicione uma terceira secção com **Add Section Below** e abra o seu **More** > **Settings**. Escolha **Align text center** em **HTML classes** e depois o **Background** roxo e o **Font color** branco no painel **Style**. Clique em **Save**.
2. Clique em **+** na secção e escolha **Button**. Defina **Title** como "Contact us", **Link** como `/contact`, **Type** como **Light** e **Size** como **Large** e clique em **Save**.
3. Clique novamente em **+** e escolha **Text**; fica por cima do botão. Escreva "Let's work together" como **Heading 2** e adicione uma linha. Defina **Font color** como branco no painel **Style** e clique em **Save**.

## Passo 4: guarde e pré-visualize

1. Clique em **Save** na barra de ferramentas do construtor.
2. Abra o menu de vista (o **ícone de olho**) e escolha **Preview**.

## Para ir mais longe

Não mostrado no vídeo:

- **Ligue cada projeto**: defina **Image link** na foto de capa para a página do estudo de caso.
- **Elevação ao pairar**: no painel **Style** de cada imagem defina **Border radius** como 4 e **Drop shadow** como 1. Em **Hover style** suba **Drop shadow** para 3.
- **Mais projetos**: adicione outra **Row** com a mesma predefinição por baixo da primeira.

## Torne a grelha filtrável

A grelha estática serve para um punhado de projetos. Para os visitantes filtrarem por tipo, guarde cada projeto como conteúdo e mostre-os com uma vista que tenha um filtro exposto. O módulo Views faz parte do núcleo do Drupal.

### 1. Crie o tipo de conteúdo Portfolio

1. Vá a **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Dê-lhe o nome "Portfolio" e guarde.
3. No separador **Manage fields**, adicione um campo **Image** com a etiqueta "Cover image".
4. Adicione um campo **List (text)** com a etiqueta "Project type" com valores como `web|Web`, `branding|Branding` e `campaign|Campaign`.
5. Crie alguns itens Portfolio em **Content** > **Add content** > **Portfolio**.

### 2. Construa a vista

1. Vá a **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Dê-lhe o nome "Portfolio grid"; em **View settings** mostre **Content** do tipo **Portfolio**.
3. Marque **Create a block**, defina o formato de exibição como **Grid** de **fields** e guarde.
4. No editor de vistas, adicione os campos **Cover image** e **Title**, e defina a grelha para 3 colunas nas suas definições de formato.
5. Em **Filter criteria**, clique em **Add**, escolha **Project type** e marque **Expose this filter to visitors**. Dê-lhe a etiqueta "Filter by type".
6. Em **Advanced**, defina **Use AJAX** como Yes. Os filtros expostos numa página do construtor só funcionam através de AJAX.
7. Guarde a vista.

### 3. Insira a vista na página

1. De volta ao DXPR Builder, esvazie as três colunas estáticas ou adicione uma **Row** nova.
2. Clique em **+**, abra o separador **Drupal Views** e escolha **View: Portfolio grid (Block)**.
3. No diálogo de definições, marque **Show exposed filters** e clique em **Save**. A grelha apresenta-se com a lista pendente "Filter by type" por cima e os itens Portfolio novos aparecem sozinhos.
4. Clique em **Save** na barra de ferramentas do construtor.

## O que vê

O cabeçalho centrado "Our work" abre a página. Na faixa cinzenta por baixo, três projetos ficam lado a lado, cada um com uma foto de capa sobre o seu nome e resultado. Uma faixa roxa fecha a página com **Contact us**.

## Se não vir a página como mostrada

- **Uma foto de capa fica por baixo do seu texto.** A foto entrou antes do texto e os elementos novos ficam no topo da sua coluna. Arraste a foto para cima do texto pela pega de arrasto na sua barra de controlos.
- **As capas têm alturas diferentes.** As suas proporções diferem. Corte-as nas mesmas proporções, carregue-as de novo e escolha as cópias novas.
- **Portfolio grid não está no separador Drupal Views.** A vista está desativada ou o seu perfil de utilizador do construtor esconde-a. Ative-a em **Structure** > **Views** ou peça a um administrador para a marcar em **Views** no seu perfil de utilizador.
- **O editor mostra "Turn on Ajax on this view to use exposed filters."** A vista não usa AJAX. Defina **Use AJAX** como Yes em **Advanced** no editor de vistas; veja [Um elemento tem aspeto ou comportamento errado](/pt-pt/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **A lista pendente "Filter by type" está em falta.** **Show exposed filters** está desligado no elemento. Abra as definições do elemento de vista, marque-o e clique em **Save**.

## E a seguir?

- [Integração com Drupal Views](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/vistas-drupal) para como as exibições de vista chegam ao seletor de elementos
- [Escreva um estudo de caso](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/caso-de-estudo) para a página para que cada projeto liga
- [Adicionar uma imagem](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/imagem) para todas as definições de imagem