Crie uma página Sobre nós.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página Sobre nós: um cabeçalho de missão, a sua história ao lado de uma foto, três números que contam, cartões de equipa e um apelo à ação final. Use-a quando uma página deve dizer aos visitantes quem é. Para uma página que lista todos os colegas, siga Crie um diretório da equipa.

O vídeo constrói a página de um estúdio de design em Roterdão.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto do seu escritório, equipa ou produto.
  • A página existe: vá a Content > Add content > Landing Page (/node/add/landing_page), escreva "About Us" como Title e clique em Save. A página abre-se com o construtor.
  • No DXPR CMS, esconda o título de página do tema nesta página: no seu formulário de edição, abra DXPR Theme Settings e marque Page Title em DXPR Hide Regions. O Title do Jumbotron é então o único Heading 1 da página, como explica Crie páginas amigas de SEO.
  • Os elementos novos ficam no topo da sua secção ou coluna. Adicione as filas de uma secção, ou os elementos de uma coluna, por ordem inversa, ou arraste-os para o lugar depois.

Passo 1: adicione um cabeçalho de missão

  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. Abra o painel Style, escolha uma amostra escura de Background e clique em Save.
  3. Clique em + na secção e escolha Jumbotron no separador Content.
  4. Escreva a sua declaração de missão como Title: "We build websites people enjoy using".
  5. Escreva uma frase de apoio no campo Lead: "A 24-person studio in Rotterdam working with brands across Europe since 2012."
  6. Defina Type como Primary para texto branco na sua cor primária e clique em Save.

Passo 2: conte a história da sua empresa

  1. Paire o cursor sobre a secção e clique em Add Section Below, o + por baixo dela.
  2. Clique em + na secção nova e escolha Row; vem com duas colunas iguais. Clique no ícone de grelha (Column layout) na fila, escolha a predefinição 2/3 + 1/3 e clique em Save.
  3. Clique em + na coluna mais larga e escolha Text. Escreva "Our story" como Heading 2 e depois dois parágrafos curtos: como começou e como corre um projeto. Clique em Save.
  4. Clique em + na coluna mais estreita e escolha Image.
  5. Clique em Select Image, pesquise a biblioteca de média com Apply filters, marque uma foto do seu escritório ou equipa e clique em Insert selected.
  6. Abra o painel SEO, preencha o Alt attribute e clique em Save.

Dica

Mantenha a história curta e parta-a com um subtítulo. Os visitantes passam os olhos antes de lerem.

Passo 3: adicione números-chave com contadores

  1. Adicione uma terceira secção com Add Section Below. Abra o seu More > Settings, 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. Em cada coluna, adicione um elemento Text com o rótulo da estatística: "Projects delivered", "Years in business", "Clients who return".
  4. Em cada coluna, clique novamente em + e escolha Number counter; fica por cima do rótulo. Defina:
    • End: a estatística (140, 12, 98)
    • Suffix: "+" ou "%" onde se aplica
    • Thousands separator: Comma
    • Speed: 2500, os milissegundos que a contagem demora
  5. Clique em Save em cada contador.

O contador não tem campo de rótulo próprio, por isso um elemento Text fica por baixo dele.

Passo 4: construa uma secção de equipa

  1. Adicione uma quarta secção com Add Section Below.
  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. Em cada coluna, clique em + e escolha Card. Abra o seu More > Settings, defina Header como o nome da pessoa ("Sofia Andersen") e Title como a sua função ("Creative Director") e clique em Save.
  4. Clique em + na própria secção e escolha Text; fica por cima da fila de cartões. Escreva "Meet the team" como Heading 2, centre-o e clique em Save.

Passo 5: adicione uma secção final

  1. Adicione uma secção final com Add Section Below e abra o seu More > Settings. Em HTML classes escolha Align text center, para o texto e o botão ficarem centrados juntos. No painel Style escolha a cor da sua marca como Background e branco como Font color e clique em Save.
  2. Clique em + na secção e escolha Button. Defina Title como "Get in touch", Link como /contact, Type como Light e Size como Large, e clique em Save.
  3. Clique novamente em + na secção e escolha Text; fica por cima do botão. Escreva "Want to work with us?" como Heading 2 e depois "We take on a handful of new clients each quarter." No painel Style defina Font color como branco e clique em Save.

Passo 6: 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.
  3. Percorra a página para verificar todas as secções.

Para ir mais longe

Não mostrado no vídeo, mas que vale a pena adicionar:

  • Um Text de biografia e um Image de retrato dentro de cada cartão, e Social links por baixo
  • 100% height nas definições da primeira secção para um cabeçalho que enche o ecrã

O que vê

A pré-visualização mostra cinco faixas. O cabeçalho escuro traz a sua declaração de missão e a sua abertura em branco. A sua história fica ao lado da foto. Na faixa cinzenta, os três números contam de zero quando entram na vista por deslocamento.

O cabeçalho da equipa fica centrado por cima de três cartões, cada um com um nome e uma função. A faixa final centra um cabeçalho branco sobre um botão Get in touch claro. Escolha Edit no menu de olho para continuar a trabalhar.

Se não vir a página como mostrada

  • Não há botão Add Elements na página vazia. O assistente de criação de páginas está desligado, por isso a página só oferece Choose a template. Clique antes na área vazia para abrir o seletor de elementos.
  • Um elemento novo fica por cima do que adicionou antes. O construtor insere os elementos novos no topo da sua secção ou coluna. Arraste-o para o lugar pela pega de arrasto na sua barra de controlos.
  • Falta Number counter ou Card no seletor. O seu perfil de utilizador do construtor esconde-o. Peça a um administrador para o marcar em Elements em DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • 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?