Crie uma página de serviços.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página que lista o que oferece. Tem um cabeçalho, três serviços com ícones, um serviço em detalhe ao lado de uma foto, logótipos de clientes e um apelo à ação. Use-a quando vende vários serviços. Para uma página sobre uma oferta, siga Crie uma página de destino de marketing.

O vídeo constrói a página de serviços de uma agência digital.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto para o serviço em detalhe e quatro logótipos de clientes.
  • 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.
  • 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 os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

Passo 1: adicione o cabeçalho

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout. Paire o cursor sobre ela, abra More > Settings, escolha o Background azul-marinho no painel Style e clique em Save.
  2. Clique em + na secção e escolha Jumbotron no separador Content.
  3. Defina o Title como "Our services", o Lead como uma linha sobre o que oferece e o Type como Primary e clique em Save.

Passo 2: adicione a vista geral dos serviços

  1. Paire o cursor sobre a secção e clique em Add Section Below. Dê à secção nova a classe Align text center.
  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 Text. Escreva "Design" como Heading 3, adicione uma linha e clique em Save.
  4. Clique em + na mesma coluna e escolha Icon; fica por cima do texto. Escolha o conjunto Font Awesome Free Solid, pesquise palette e clique no ícone. Defina Size como Very Large (3x), abra Icon utilities, defina Style como Circle e clique em Save.
  5. Repita para "Development" com code e "Marketing" com bullhorn.

Passo 3: adicione um serviço em detalhe

  1. Adicione uma terceira secção com Add Section Below e depois um Row; vem com duas colunas iguais.
  2. Clique em + na coluna da esquerda e escolha Image. Clique em Select Image, marque uma foto e clique em Insert selected. Escreva o Alt attribute no painel SEO e clique em Save.
  3. Clique em + na coluna da direita e escolha Button. Defina Title como "Get a quote", Link como /contact e Type como Primary e clique em Save.
  4. Clique novamente em + na coluna da direita e escolha Text; fica por cima do botão. Escreva "Design" como Heading 2, adicione a descrição e o que está incluído, e clique em Save.

Passo 4: adicione os logótipos de clientes

  1. Adicione uma quarta secção e abra o seu More > Settings. Escolha Align text center em HTML classes e um Background cinzento claro no painel Style. Clique em Save.
  2. Clique em + na secção e escolha Marquee. Remova as três imagens de exemplo com o × em cada. Clique em Select Image, pesquise os seus logótipos, marque quatro deles e clique em Insert selected. Ligue Gray scale e clique em Save.
  3. Clique novamente em + na secção e escolha Text; fica por cima do letreiro. Escreva "Trusted by leading brands" como Heading 2 e clique em Save.

Passo 5: adicione o apelo à ação

  1. Adicione uma quinta 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 "Schedule a consultation", 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 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.

Para ir mais longe

Não mostrado no vídeo:

  • Uma secção de detalhe por serviço: repita o Passo 3 para Development e Marketing. Ligue Mirror row nas definições de cada segunda fila, para as fotos alternarem de lado em tablets e computadores.
  • Ligações de salto: defina o HTML ID de cada secção de detalhe (design, development, marketing). Adicione um Button por baixo de cada texto de vista geral com Link #design e por aí fora.
  • Testemunhos: adicione um Block quote por cliente por cima dos logótipos.

O que vê

Uma faixa azul-marinho abre a página, com "Our services" em tipo grande branco sobre um resumo de uma linha. Seguem-se três serviços centrados, cada um com um ícone em círculo sobre o seu nome e linha. Design tem a sua própria faixa com uma foto, uma descrição e Get a quote. Logótipos cinzentos de clientes passam numa faixa clara e uma faixa roxa fecha a página.

Se não vir a página como mostrada

  • O letreiro continua a mostrar os logótipos de exemplo. As três imagens de exemplo ficam até as remover. Abra as definições do letreiro, clique no × em cada imagem de exemplo e guarde.
  • Os logótipos estão a cores. Gray scale está desligado. Abra as definições do letreiro, ligue-o e clique em Save.
  • Os ícones não têm círculo. Style está no painel Icon utilities, não em General. Abra as definições do ícone, abra Icon utilities e defina Style como Circle.
  • 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?