Premium HubSpot Modules & Themes crafted for marketers.

Dynamic FAQs Module – How to Use

Using the Dynamic FAQs Module in the HubSpot CMS Page Editor is simple. Follow the steps below to add, configure, and customize your FAQs.

Step 1: Add the Module to the Page

1. Open any Landing Page, Site Page, or Blog Post in the HubSpot Page Editor.
2. In the left-hand sidebar, click the Add / Modules tab.
3. Use the search bar to find Dynamic FAQs.
4. Drag and drop the module into your desired section of the page.

Step 2: Add Questions & Answers (Content Tab)

Select the module in the left sidebar and configure the following options:

Header Section (Title & Tagline)

• Heading: Enter the title for your FAQ section.
  Example: “Got Questions? We Have Answers”
• Tagline: Add a short badge or label above the heading.
  Example: “FREQUENTLY ASKED QUESTIONS”
• Alignment: Choose Left, Center, or Right alignment.

FAQ Items Repeater (Questions List)

• Click the + Add button to create a new FAQ item.
• Question Title: Enter your question.
• Answer Content: Add the detailed answer using the rich text editor. You can use bold text, bullet points, links, and images.
• Category Name: Assign the FAQ to a topic category.
  Examples: General, Billing, Technical
• Icon & Status Badge: Select a preset SVG icon or upload a custom image. You can also add optional badge text such as Popular or New.

Step 3: Enable or Disable Interactive Features (Controls Settings)

Go to the Controls Settings section in the sidebar.

• Live Search Bar: Enable the Enable Live Search Bar checkbox to allow visitors to search FAQs in real time.
• Category Tabs: Enable Enable Category Filter Tabs to display automatically generated category buttons along with FAQ count badges such as (2) and (5).
• Expand/Collapse All: Enable Enable Expand All Buttons to display Expand All / Collapse All controls at the top right of the FAQ section.
• Single / Multiple Accordion: Turn Allow Multiple FAQs Open OFF if you want only one FAQ to remain open at a time. Opening a new question will automatically close the previously opened one.

Step 4: Customize Layout & Brand Colors (Styles Tab)

Go to the Styles & Layout Settings section in the sidebar.

Layout Mode

Choose from four available layout styles:

• Accordion: A standard stacked FAQ list.
• Grid: Displays FAQs in a clean two-column card layout.
• Side-by-Side: Displays the section title on the left and FAQs on the right.
• Compact: A minimal and clean FAQ layout.

Colors & Branding

Customize the module to match your website's branding:

• Primary Color: Set the main accent color for buttons, active tabs, icons, and other elements.
• Hover / Active Colors: Customize colors that appear when users hover over or interact with cards and buttons.
• Font Sizes & Padding: Adjust text sizes, card corner radius in pixels, and section top/bottom padding.

Step 5: Preview, Save & Publish

1. Click Preview in the top-right corner to test the module.
2. Verify that the live search, category tabs, Expand/Collapse controls, and FAQ interactions work as expected.
3. Once everything looks good, click Publish or Update to make your changes live.

🎉 That's it! Your Dynamic FAQs Module is ready to use.