---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/diretorio-da-equipa'
title: 'Crie um diretório de equipa | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:07:38+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aqui constrói-se uma página de equipa: um cabeçalho centrado, três cartões de direção com uma ligação LinkedIn por baixo do terceiro e uma grelha de quatro cartões de equipa. Use-a quando cada colega deve ser fácil de encontrar. Para uma secção de equipa curta na sua página de empresa, siga Crie uma página Sobre nós.
  O vídeo constrói a página de equipa de uma empresa de logística.
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-24T19:36:26+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crie um diretório de equipa'
      description: |-
        Aqui constrói-se uma página de equipa: um cabeçalho centrado, três cartões de direção com uma ligação LinkedIn por baixo do terceiro e uma grelha de quatro cartões de equipa. Use-a quando cada colega deve ser fácil de encontrar. Para uma secção de equipa curta na sua página de empresa, siga Crie uma página Sobre nós.
        O vídeo constrói a página de equipa de uma empresa de logística.
      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:38+0000'
      dateModified: '2026-10-24T19:36:26+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/diretorio-da-equipa'
      articleSection: 'Seguir um tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/diretorio-da-equipa'
      description: |-
        Aqui constrói-se uma página de equipa: um cabeçalho centrado, três cartões de direção com uma ligação LinkedIn por baixo do terceiro e uma grelha de quatro cartões de equipa. Use-a quando cada colega deve ser fácil de encontrar. Para uma secção de equipa curta na sua página de empresa, siga Crie uma página Sobre nós.
        O vídeo constrói a página de equipa de uma empresa de logística.
      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 um diretório de equipa.

 Aprender DXPR BuilderCriar páginasSeguir um tutorial

   ## Neste guia

 Guias relacionados

- [Adicionar um cartão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao)
- [Adicionar um elemento de ligações sociais](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacoes-sociais)
- [Crie uma página Sobre nós](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-sobre-nos)

Aqui constrói-se uma página de equipa: um cabeçalho centrado, três cartões de direção com uma ligação LinkedIn por baixo do terceiro e uma grelha de quatro cartões de equipa. Use-a quando cada colega deve ser fácil de encontrar. Para uma secção de equipa curta na sua página de empresa, siga [Crie uma página Sobre nós](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-sobre-nos).

O vídeo constrói a página de equipa de uma empresa de logística.

  ## Antes de começar

- A sua função tem a permissão **Edit with DXPR Builder**.
- 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 secção ou coluna. É por isso que as ligações sociais entram antes do cartão por cima delas.

## 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 team" 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 os cartões de direção

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**. 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 **Card**. Abra o seu **More** > **Settings**, defina o **Header** como a função e o **Title** como o nome, e clique em **Save**.
4. Adicione um **Card** à segunda coluna da mesma forma.
5. Clique em **+** na terceira coluna e escolha **Social links**. Vem com duas filas de exemplo. Escreva `linkedin` sobre "Facebook" na primeira fila e escreva o URL do perfil ao lado. Remova a segunda fila com o seu **×**, defina **Style** como **Circle** e **Size** como **2x** e clique em **Save**.
6. Clique em **+** na mesma coluna e escolha **Card**; fica por cima das ligações. Defina o seu **Header** e **Title** da mesma forma e clique em **Save**.
7. Clique em **+** na secção e escolha **Text**; fica por cima da fila. Escreva "Leadership" como **Heading 2** e clique em **Save**.

## Passo 3: adicione a grelha de equipa

1. Adicione uma terceira secção com **Add Section Below** e depois um **Row**. Clique no seu ícone de grelha (**Column layout**), escolha a predefinição **1/4 + 1/4 + 1/4 + 1/4** e clique em **Save**.
2. Adicione um **Card** a cada coluna. Abra o seu **More** > **Settings**, defina a função como **Header** e o nome como **Title**, e clique em **Save**.
3. Clique em **+** na secção e escolha **Text**; fica por cima da fila. Escreva "The team" como **Heading 2** 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:

- **Fotos e biografias**: clique em **+** num cartão e adicione uma biografia **Text**. Depois clique novamente em **+** no cartão e adicione uma **Image**; fica por cima do texto. Preencha o **Alt attribute** com o nome da pessoa.
- **Fotos arredondadas**: em cada imagem, defina **Border radius** no painel **Style**. O valor é em píxeis, até 100.
- **Elevação ao pairar**: no painel **Hover style** do cartão defina **Drop shadow** como 2.
- **Equipa que se atualiza sozinha**: crie um tipo de conteúdo "Team member" e uma vista **Grid** com uma exibição em bloco. Insira a vista a partir do separador **Drupal Views** e os editores adicionam pessoas sem tocar na página.

## O que vê

"Our team" fica centrado no topo. Na faixa cinzenta, três cartões de direção mostram cada função no cabeçalho e o nome por baixo, com um ícone LinkedIn redondo por baixo do terceiro. "The team" segue-se com quatro cartões lado a lado.

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

- **Um cartão não mostra diálogo de definições depois de o adicionar.** Os cartões abrem vazios, sem diálogo. Paire o cursor sobre o cartão e abra **More** > **Settings** para preencher **Header** e **Title**.
- **Uma ligação social mostra "No matching brand icon found".** A marca não é um nome de ícone conhecido. Escreva-a em minúsculas, por exemplo `linkedin`.
- **O ícone LinkedIn fica por cima do cartão.** O cartão entrou antes das ligações e os elementos novos ficam no topo da sua coluna. Arraste o cartão para cima das ligações pela pega de arrasto na sua barra de controlos.
- **As suas mudanças desapareceram depois de recarregar.** Saiu da página antes de clicar em **Save** na barra de ferramentas do construtor. Se Save mostra um erro, veja [As mudanças não guardam](/pt-pt/hc/documentacao/aprender-dxpr-builder/resolucao-de-problemas/falha-ao-guardar).

## E a seguir?

- [Adicionar um cartão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao) para tipos de cartão e elementos filhos
- [Adicionar um elemento de ligações sociais](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacoes-sociais) para estilos e cores de ícones
- [Crie uma página Sobre nós](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-sobre-nos) para colocar uma secção de equipa mais curta na sua página de empresa