Crie uma base de conhecimento.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se a primeira página de um centro de ajuda: um cabeçalho azul-marinho, três cartões de categoria com um ícone cada, duas listas de artigos populares e um apelo à ação de suporte. Use-a quando a sua ajuda está espalhada por muitos artigos. Para uma lista curta de perguntas e respostas, siga Crie uma página de perguntas frequentes.

O vídeo constrói o centro de ajuda de um produto de software.

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 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.
  2. Paire o cursor sobre a secção e abra More > Settings. Em HTML classes escolha Align text center. No painel Style escolha o Background azul-marinho e o Font color branco, e clique em Save.
  3. Clique em + na secção e escolha Text. Escreva "Help centre" como Heading 2 e adicione "How can we help you today?". 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 categorias

  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 Card. Abra o seu More > Settings, defina o Header como o nome da categoria e o Title como a contagem de artigos, e clique em Save.
  4. Clique em + na mesma coluna e escolha Icon; fica por cima do cartão. Escolha o conjunto Font Awesome Free Solid, pesquise rocket e clique no ícone. Defina Size como Extra Large (2x) e clique em Save.
  5. Repita para a segunda coluna com credit-card e a terceira com screwdriver-wrench.
  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 Text. Escreva três títulos de artigos, um por linha, e clique em Save.
  4. Clique em + na secção e escolha Text; fica por cima da fila. Escreva "Popular articles" como Heading 2 e clique em Save.

Passo 4: adicione o apelo à ação de suporte

  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 "Contact support", Link como /support, 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 "Can't find what you need?" 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:

  • Caixa de pesquisa: ligue o módulo Search do núcleo em Extend. Clique em + na secção de cabeçalho, abra o separador Drupal Blocks e escolha Block: Forms: Search form. Os visitantes chegam a /search/node.
  • Cartões clicáveis: adicione primeiro um elemento Link à coluna e defina o seu Link como a página da categoria. Depois adicione o Card dentro dele.
  • Ligações de artigos: selecione cada título nas listas e ligue-o com o botão de ligação na barra de ferramentas.
  • Mais categorias: adicione uma segunda Row com a mesma predefinição. As comuns são Using the editor, Templates and design e API and development.

O que vê

O cabeçalho azul-marinho recebe os visitantes com "Help centre" a branco. Seguem-se três categorias centradas, cada uma com um ícone por cima de um cartão com o seu nome e contagem de artigos. Uma faixa cinzenta lista seis artigos populares em duas colunas e uma faixa roxa oferece Contact support.

Se não vir a página como mostrada

  • Um cartão não mostra diálogo de definições depois de o adicionar. Os cartões abrem vazios, sem diálogo. Paire o cursor sobre o cartão e abra More > Settings para preencher Header e Title.
  • Um ícone fica por baixo do seu cartão. O ícone entrou antes do cartão e os elementos novos ficam no topo da sua coluna. Arraste o ícone para cima do cartão pela pega de arrasto na sua barra de controlos.
  • O cabeçalho continua escuro sobre azul-marinho. O elemento Text não tem Font color próprio. Abra o seu painel Style e defina Font color como branco.
  • 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?