---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/base-de-conhecimento'
title: 'Crie uma base de conhecimento | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:06:31+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crie uma base de conhecimento'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:06:31+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/base-de-conhecimento'
      articleSection: 'Seguir um tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/base-de-conhecimento'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Seguir um tutorial](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie uma base de conhecimento.

 Aprender DXPR BuilderCriar páginasSeguir um tutorial

   ## Neste guia

 Guias relacionados

- [Adicione um bloco Drupal à sua página](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/blocos-drupal)
- [Crie uma página de perguntas frequentes](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-perguntas-frequentes)
- [Adicionar uma ligação](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacao)

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](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-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](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seo#step-1-start-the-content-at-heading-2).

## 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`.

## Passo 3: adicione os artigos populares

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](/pt-pt/hc/documentacao/aprender-dxpr-builder/resolucao-de-problemas/falha-ao-guardar).

## E a seguir?

- [Integração com blocos Drupal](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/blocos-drupal) para outros blocos que pode inserir
- [Crie uma página de perguntas frequentes](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-perguntas-frequentes) para respostas dobráveis dentro de uma página de categoria
- [Adicionar uma ligação](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacao) para o invólucro clicável à volta de um cartão