Crie uma galeria de portefólio.

Learn DXPR BuilderBuild pagesVolg een tutorial

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".

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.

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.
  • 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?