Skip to content

Build a knowledge base

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

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

What's next?

Something wrong or missing on this page? Report it or edit the page.