Crie um diretório de equipa.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

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.

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.

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.

E a seguir?