---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
title: 'Build a knowledge base | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Categorised articles and a support call to action'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Build a knowledge base'
      description: 'Categorised articles and a support call to action'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
      description: 'Categorised articles and a support call to action'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build a knowledge base.

Categorised articles and a support call to action

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)
- [FAQ page](/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [Link](/hc/documentation/learn-dxpr-builder/elements/link)

Here you build the front page of a help centre: a navy header, three category cards with an icon each, two lists of popular articles and a support call to action. Use it when your help is spread over many articles. For a short list of questions and answers, follow [Build an FAQ page](/hc/documentation/learn-dxpr-builder/tutorials/faq-page) instead.

The video builds the help centre of a software product.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their section or column. Add the elements of a column in reverse order, or drag them into place afterwards.

## Step 1: add the header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**. In the **Style** panel pick the navy **Background** and white **Font color**, then click **Save**.
3. Click **+** on the section and pick **Text**. Type "Help centre" as **Heading 2** and add "How can we help you today?". Set **Font color** to white in the **Style** panel and click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Step 2: add the categories

1. Hover the section and click **Add Section Below**. Give the new section the **Align text center** class.
2. Click **+** on the section and pick **Row**. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in the first column and pick **Card**. Open its **More** > **Settings**, set the **Header** to the category name and the **Title** to the article count, then click **Save**.
4. Click **+** in the same column and pick **Icon**; it lands above the card. Choose the **Font Awesome Free Solid** set, search for `rocket` and click the icon. Set **Size** to **Extra Large (2x)** and click **Save**.
5. Repeat for the second column with `credit-card` and the third with `screwdriver-wrench`.

## Step 3: add the popular articles

1. Add a third section with **Add Section Below**. Open its **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Row**; it arrives with two equal columns.
3. Click **+** in each column and pick **Text**. Type three article titles, one per line, and click **Save**.
4. Click **+** on the section and pick **Text**; it lands above the row. Type "Popular articles" as **Heading 2** and click **Save**.

## Step 4: add the support call to action

1. Add a fourth section and open its **More** > **Settings**. Pick **Align text center** under **HTML classes**, then the purple **Background** and white **Font color** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Button**. Set **Title** to "Contact support", **Link** to `/support`, **Type** to **Light** and **Size** to **Large**, then click **Save**.
3. Click **+** again and pick **Text**; it lands above the button. Type "Can't find what you need?" as **Heading 2** and add one line. Set **Font color** to white and click **Save**.

## Step 5: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Search box**: turn on the core **Search** module at **Extend**. Click **+** in the header section, open the **Drupal Blocks** tab and pick **Block: Forms: Search form**. Visitors land on `/search/node`.
- **Clickable cards**: add a **Link** element to the column first and set its **Link** to the category page. Then add the **Card** inside it.
- **Article links**: select each title in the lists and link it with the link button on the toolbar.
- **More categories**: add a second **Row** with the same preset. Common ones are Using the editor, Templates and design, and API and development.

## What you see

The navy header greets visitors with "Help centre" in white. Three centred categories follow, each an icon above a card with its name and article count. A grey band lists six popular articles in two columns, and a purple band offers **Contact support**.

## If you don't see the page as shown

- **A card shows no settings dialog after you add it.** Cards open empty, without a dialog. Hover the card and open **More** > **Settings** to fill in **Header** and **Title**.
- **An icon sits below its card.** The icon went in before the card, and new elements land at the top of their column. Drag the icon above the card by the drag handle on its control bar.
- **The heading stays dark on navy.** The Text element has no **Font color** of its own. Open its **Style** panel and set **Font color** to white.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Drupal Blocks integration](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) for other blocks you can insert
- [FAQ page](/hc/documentation/learn-dxpr-builder/tutorials/faq-page) for collapsible answers inside a category page
- [Link element](/hc/documentation/learn-dxpr-builder/elements/link) for the clickable wrapper around a card