Crie uma página de perguntas frequentes.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página de perguntas frequentes onde cada pergunta abre e fecha ao clicar. Termina-se com um cabeçalho centrado, uma categoria de perguntas num painel dobrável e um apelo à ação de contacto. Use-a para uma lista curta de perguntas comuns. Para artigos de ajuda agrupados por tema, siga Crie uma base de conhecimento.

O vídeo constrói as perguntas frequentes de uma clínica de saúde.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • 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 e os interruptores novos ficam no topo do seu contentor. Adicione as perguntas da última para a primeira ou arraste-as 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.
  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 "Frequently asked questions" e defina-o como Heading 2 a partir da barra de ferramentas. Adicione uma linha que diga o que a página cobre 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 uma categoria com perguntas

  1. Paire o cursor sobre a secção e clique em Add Section Below.
  2. Clique em + na secção nova e escolha Collapse panel no separador Layout; vem com um interruptor vazio.
  3. Abra More > Settings no painel. Ligue Collapse para cada pergunta começar fechada, defina Expand icon como + e clique em Save.
  4. Abra More > Settings no interruptor, escreva a pergunta como o seu Toggle title e clique em Save. Os interruptores novos ficam no topo, por isso comece pela última pergunta.
  5. Clique na pergunta para abrir o seu corpo, clique em + dentro dela e escolha Text. Escreva a resposta e clique em Save.
  6. Clique em Add toggle no painel e repita os passos 4 e 5 para cada pergunta, até à primeira.
  7. Clique mais uma vez em + na secção e escolha Text; fica por cima do painel. Escreva o nome da categoria como Heading 2 e clique em Save.

Aponte para 3 a 6 perguntas por categoria.

Passo 3: adicione um apelo à ação de contacto

  1. Adicione uma terceira secção com Add Section Below 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 Button. Defina Title como "Contact us", Link como /contact, Type como Primary e Size como Large e clique em Save.
  3. Clique novamente em + e escolha Text; fica por cima do botão. Escreva "Still have questions?" como Heading 2, adicione uma linha que aponte para a sua equipa 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:

  • Mais categorias: repita o Passo 2 para cada categoria, uma secção e um painel dobrável cada. As comuns são Getting started, Account and billing, Features, Troubleshooting e Privacy and security.
  • Separadores em vez de secções: com poucas categorias, adicione um elemento Tabs do separador Layout, um separador por categoria, e coloque um painel dobrável dentro de cada separador. Cada categoria fica ao alcance sem deslocar.

Dicas de SEO

  • Use a pergunta real como Toggle title
  • Responda na primeira frase e depois acrescente detalhe
  • Ligue as respostas à página a que se referem
  • Adicione dados estruturados de perguntas frequentes através do seu tema ou de um módulo Drupal

O que vê

O cabeçalho fica centrado no topo. Por baixo do cabeçalho de categoria, cada pergunta está fechada e mostra um +. Um clique abre a resposta e a faixa de fecho oferece o botão Contact us.

Se não vir a página como mostrada

  • Todas as perguntas começam abertas. Collapse está desligado no painel dobrável. Abra o More > Settings do painel, ligue Collapse e clique em Save.
  • Não há + dentro de um interruptor. O corpo do interruptor está fechado. Clique na pergunta para o abrir e depois clique em + dentro.
  • As perguntas aparecem por ordem errada. Os interruptores novos ficam no topo do painel. Arraste cada interruptor para o lugar 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?