Escreva um estudo de caso.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui escreve-se sobre um projeto de cliente em três partes: o desafio, a solução e os resultados. Termina-se com sete faixas: um herói de foto, uma vista geral com o número principal, o desafio, a solução ao lado de uma foto, três contadores, uma citação e um apelo à ação. Para mostrar muitos projetos numa página, siga Crie uma galeria de portefólio.

O vídeo escreve sobre o trabalho de uma agência para a Northwind Retail.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto larga para o herói e uma foto do que entregou.
  • 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. Adicione os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

Passo 1: adicione o herói

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout. Paire o cursor sobre ela e abra More > Settings.
  2. Em HTML classes escolha Align text center.
  3. Abra o painel Style. Em Background image clique em Select Image, marque uma foto e clique em Insert selected. Defina Background style como Cover.
  4. Escolha um Background azul-marinho escuro e um Font color branco, e clique em Save. A cor mostra-se enquanto a foto carrega.
  5. Clique em + na secção e escolha Button. Defina Title como "Visit the site", Link como o URL do cliente, Type como Light e Size como Large e clique em Save.
  6. Clique novamente em + e escolha Text; fica por cima do botão. Escreva o nome do cliente como Heading 2 e um resumo de uma linha por baixo. Defina Font color como branco no painel Style 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 vista geral

  1. Paire o cursor sobre o herói e clique em Add Section Below. Adicione um Row à secção nova, clique no seu ícone de grelha (Column layout), escolha a predefinição 2/3 + 1/3 e clique em Save.
  2. Clique em + na coluna larga e escolha Text. Escreva "Overview" como Heading 2, adicione o resumo e clique em Save.
  3. Clique em + na coluna estreita e escolha Text. Escreva a etiqueta da métrica, "More online orders", e clique em Save.
  4. Clique novamente em + na coluna estreita e escolha Number counter; fica por cima da etiqueta. Defina End como 32, Suffix como %, Thousands separator como Comma, defina Speed como 2500 e clique em Save.

O contador não tem campo de etiqueta próprio; o elemento Text por baixo faz esse trabalho.

Passo 3: adicione o desafio

  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 Text. Escreva "The challenge" como Heading 2, descreva o problema e clique em Save.

Passo 4: adicione a solução

  1. Adicione uma quarta secção e depois um Row; vem com duas colunas iguais.
  2. Clique em + na coluna da esquerda e escolha Text. Escreva "The solution" como Heading 2, descreva o que construiu e clique em Save.
  3. Clique em + na coluna da direita e escolha Image. Clique em Select Image, marque uma foto do resultado e clique em Insert selected. Escreva o Alt attribute no painel SEO e clique em Save.

Passo 5: adicione os resultados

  1. Adicione uma quinta secção e abra o seu More > Settings. Escolha Align text center em HTML classes e depois o Background azul-marinho e o Font color branco no painel Style. 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 primeiro uma etiqueta Text e depois um Number counter por cima, como no Passo 2: End 32 com Suffix %, End 2 com Suffix s e End 15000.

Passo 6: adicione a citação

  1. Adicione uma sexta secção.
  2. Clique em + na secção e escolha Block quote. Escreva as palavras do cliente, preencha Cite com o seu nome e função, e clique em Save.

Passo 7: adicione o apelo à ação

  1. Adicione uma sétima secção 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 "Ready to get started?" como Heading 2 e adicione uma linha. Defina Font color como branco e clique em Save.

Passo 8: 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.

O que vê

O nome do cliente e o botão Visit the site ficam centrados sobre a foto. A vista geral mostra 32% ao lado do seu resumo; os visitantes veem-no contar até lá quando entra em vista. O desafio fica numa faixa cinzenta e a solução fica ao lado da sua foto.

Na faixa azul-marinho, os três resultados contam até lá quando entram em vista: 32%, 2s e 15 000. A citação do cliente e uma faixa roxa de Contact us fecham a página.

Se não vir a página como mostrada

  • A foto do herói não preenche a secção. Background style continua em Theme defaults. Abra o painel Style da secção e defina-o como Cover.
  • O último contador lê 15000 sem vírgula. Thousands separator continua em None. Abra as definições do contador e escolha Comma.
  • Uma etiqueta fica por cima do seu contador. O contador entrou antes da sua etiqueta e os elementos novos ficam no topo da sua coluna. Arraste a etiqueta para baixo do contador 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?