Add FAQs To WordPress Page With FAQ Grid Divi Module

The FAQ Grid Divi module renders interactive FAQ accordions on your Divi pages, driven automatically by your configured FAQPage Schema data.

Module features include:

• Live Divi Visual Builder support with real-time editing.
• Responsive multi-column grid layouts (1 to 4 columns).
• Customizable toggle icons for open and collapsed accordion states.
• Design controls for FAQ grid container wrappers.
• Design controls for individual FAQ item cards.
• Typography controls for question headlines.
• Spacing and typography controls for answer body text.

No programming or custom coding required.

Pre-Requisites

• A WordPress Website (5.0 or higher)
• Divi Theme or Divi Builder (optional, for Divi Modules)
• WordPress Schema Plugin For Divi, Gutenberg & Shortcodes

Add FAQ Schema In SEO Schema Settings

1. Go to WordPress Admin > SEO Schema > FAQ.

2. Create and configure your FAQ Schema settings.

3. Click Save Schema Settings.

4. Navigate to your target WordPress page associated with your FAQ Schema and enter your question-and-answer pairs in the page meta box.

5. For step-by-step schema setup instructions, refer to the FAQ Schema Guide.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Edit WordPress Page In Divi Visual Builder

1. Open any published page on your website associated with FAQ Schema.

2. Click Enable Visual Builder in the top WordPress admin bar.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add FAQ Grid Divi Module

1. Create a Regular section in Divi.

2. Click + Add Module and select the FAQ Grid Divi module.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Connect FAQ Schema Data Source

1. In the module settings modal, go to the Content tab and open the FAQ Schema Page section.

2. Select the page containing your FAQ data:

   • Use the Select FAQ Schema Page dropdown to pick a page configured with FAQ Schema.
   • Select – Use Current – to pull FAQ data dynamically from the page currently being viewed.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Configure Responsive Grid Layout

1. Go to the Design tab and open the Grid section.

2. Set the desired number of columns (1 to 4) for each breakpoint:

   • Desktop
   • Tablet
   • Phone

3. Ensures optimal responsive layout behavior across all device screens.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Accordion Open/Close Behavior

1. Go to the Design tab and open the Open/Close Behavior section.

2. Control accordion expansion and toggle mechanics:

   • Expand FAQ’s by default:
     • Toggle ON to keep all FAQ items expanded when the page loads.
     • Toggle OFF to keep all FAQ items collapsed by default.
   • Number of faqs open at once:
     • Available when Expand FAQ’s by default is ON.
     • Select One to allow only one FAQ item to open at a time (accordion mode).
     • Select Many to allow multiple FAQ items to remain open simultaneously.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Toggle Icon Design

1. Go to the Design tab and open the Icon section.

2. Choose icon placement and style toggle indicators:

   • Icon Placement: Options include Left, Right, or None.
     • Select Left to align icons to the left of questions.
     • Select Right to align icons to the right of questions.
     • Select None to hide toggle icons.
   • Color when close:
     • Available when icon placement is set to Left or Right.
     • Choose the icon color when the FAQ accordion item is collapsed.
   • Color when open:
     • Available when icon placement is set to Left or Right.
     • Choose the icon color when the FAQ accordion item is expanded.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

FAQ List Wrapper Styling

1. Go to the Design tab and open the FAQ List Wrapper section.

2. Customize container properties for the overall FAQ grid wrapper:

   • Margin and padding spacing
   • Border widths (Top, Right, Bottom, Left)
   • Border color and border style

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

FAQ Item Card Styling

1. Go to the Design tab and open the FAQ Item Wrapper section.

2. Customize properties for individual FAQ card containers:

   • Margin and padding spacing
   • Border widths (Top, Right, Bottom, Left)
   • Border color and border style
   • Box shadow styles

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Question Headline Typography

1. Go to the Design tab and open the Question section.

2. Customize typography and colors for question headlines:

   • Margin and padding spacing
   • Border styles and colors
   • Text Color - FAQ Open: Color of the question headline when expanded.
   • Text Color - FAQ Close: Color of the question headline when collapsed.
   • Font family, font weight, font style, text alignment, text size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Answer Body Text Styling

1. Go to the Design tab and open the Answer section.

2. Customize container spacing and text properties for answer content:

   • Margin and padding spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial