Skip to content

Build an FAQ page

Here you build an FAQ page where each question opens and closes on click. You end with a centred heading, a category of questions in a collapse panel and a contact call to action. Use it for a short list of common questions. For help articles grouped by topic, follow Build a knowledge base instead.

The video builds the FAQ of a health clinic.

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 and new toggles land at the top of their container. Add questions from the last to the first, 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, then click Save.
  3. Click + on the section and pick Text from the Content tab.
  4. Type "Frequently asked questions" and set it to Heading 2 from the toolbar. Add one line that says what the page covers, then 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 a category with questions

  1. Hover the section and click Add Section Below.
  2. Click + on the new section and pick Collapse panel from the Layout tab; it arrives with one empty toggle.
  3. Open More > Settings on the panel. Switch on Collapse so every question starts closed, set Expand icon to +, then click Save.
  4. Open More > Settings on the toggle, type the question as its Toggle title and click Save. New toggles land at the top, so start with the last question.
  5. Click the question to open its body, click + inside it and pick Text. Type the answer and click Save.
  6. Click Add toggle on the panel and repeat steps 4 and 5 for each question, working up to the first.
  7. Click + on the section once more and pick Text; it lands above the panel. Type the category name as Heading 2 and click Save.

Aim for 3 to 6 questions per category.

Step 3: add a contact call to action

  1. Add a third section with Add Section Below and open its More > Settings. Pick Align text center under HTML classes and a light grey Background in the Style panel. Click Save.
  2. Click + on the section and pick Button. Set Title to "Contact us", Link to /contact, Type to Primary and Size to Large, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Still have questions?" as Heading 2, add one line that points to your team, then click Save.

Step 4: 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:

  • More categories: repeat Step 2 for each category, one section and one collapse panel each. Common ones are Getting started, Account and billing, Features, Troubleshooting, and Privacy and security.
  • Tabs instead of sections: with few categories, add a Tabs element from the Layout tab, one tab per category, and place a collapse panel inside each tab. Every category stays in reach without scrolling.

SEO tips

  • Use the real question as the Toggle title
  • Answer in the first sentence, then add detail
  • Link answers to the page they refer to
  • Add FAQ structured data through your theme or a Drupal module

What you see

The heading sits centred at the top. Under the category heading every question is closed and shows a +. A click opens the answer, and the closing band offers the Contact us button.

If you don't see the page as shown

  • All the questions start open. Collapse is off on the collapse panel. Open the panel's More > Settings, switch on Collapse and click Save.
  • There is no + inside a toggle. The toggle's body is closed. Click the question to open it, then click + inside.
  • The questions appear in the wrong order. New toggles land at the top of the panel. Drag each toggle into place by the drag handle on its control bar.
  • 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.