Crie uma página de destino de marketing.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aqui constrói-se uma página de destino para uma oferta: uma secção principal com foto e um botão Request a demo, três funcionalidades com ícones, dois testemunhos e um apelo à ação final. Use-a para uma página de campanha ou produto com um objetivo. Para um site inteiro numa página com deslocamento, siga Crie um site de página única com deslocamento.

O vídeo constrói uma página para um produto de análise chamado Insight.

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 a secção principal.
  • 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 a secção principal

  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-escuro e um Font color branco e clique em Save.
  5. Clique em + na secção e escolha Button. Defina Title como "Request a demo", Link como /demo, 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 cabeçalho como Heading 2 e o subtítulo 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 as funcionalidades

  1. Paire o cursor sobre a secção principal 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 o nome da funcionalidade 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 bolt e clique no ícone. Defina Size como Very Large (3x), abra Icon utilities, defina Style como Circle e clique em Save.
  5. Repita para a segunda coluna com chart-line e a terceira com shield.

Passo 3: adicione os testemunhos

  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; vem com duas colunas iguais.
  3. Clique em + em cada coluna e escolha Block quote. Escreva a citação, preencha Cite com o nome e a função da pessoa e clique em Save.

Passo 4: adicione o apelo à ação

  1. Adicione uma quarta 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 "Book a walkthrough", Link como /demo, 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 "See Insight on your own data" como Heading 2 e adicione uma linha. Defina Font color como branco e clique em Save.

Passo 5: 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:

  • Formulário de contactos: insira um bloco webform do separador Drupal Blocks em vez do último botão; veja Adicione formulários às páginas
  • Foto mais escura: no painel Background effects da secção principal defina Background effect como Gradient. Escolha a mesma cor escura com cerca de 60% de opacidade como Start color e End color
  • Secção principal mais alta: dê à secção principal 100 píxeis de preenchimento superior e inferior no painel Style respetivo
  • Comece a partir de um modelo: numa página vazia, clique em Choose a template e escolha um esquema de página de destino; veja Comece uma página a partir de um modelo

O que vê

O cabeçalho, o subtítulo e o botão Request a demo ficam centrados em branco na foto. Seguem-se três funcionalidades, cada uma com um ícone em círculo sobre um cabeçalho e linha curtos. Duas citações ficam lado a lado numa faixa cinzenta e uma faixa roxa fecha a página com Book a walkthrough.

Se não vir a página como mostrada

  • 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.
  • A foto da secção principal não enche a secção. Background style continua em Theme defaults. Abra o painel Style da secção e defina-o como Cover.
  • Um ícone fica por baixo do texto da funcionalidade. O ícone entrou antes do texto e os elementos novos ficam no topo da sua coluna. Arraste o ícone para cima do texto 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?