How to use divi faq module on a theme page

The FAQ Module For Divi plugin adds a divi module for faq list to the divi theme builder.

It’s built on top of the FAQ Manager With Structured Data WordPress plugin.

The Divi FAQ Module provides the following

  • Full visual builder support for faq the module in divi theme
  • Filter FAQs by categories and/or include/exclude specific FAQs by their IDs
  • Setup FAQ items open/close behavior
  • Style, orient and color the icons
  • FAQ list wrapper styling settings
  • FAQ item wrapper styling settings
  • FAQ Question styling settings
  • FAQ Answer styling settings

Pre-requisites

  1. A WordPress website
  2. FAQ Module For Divi Theme plugin

Tools

  1. Computer
  2. Text editor

Total Duration : 5 minutes

Filtering Options - Fetch Only The Needed FAQs

Filtering Options - Fetch Only The Needed FAQs
  1. Filter By Category ON/OFF toggle. Set ON to fetch FAQs from the provided category IDs.
  2. Group By Category: This setting only shows when Filter By Category is ON. It's an ON/OFF toggle. Set ON to display FAQs by category group. Set OFF to display FAQs in a single list.
  3. Categories: This setting only shows when Filter By Category is ON. Provide a list of comma-separated category IDs of the FAQ groups to fetch.
  4. Include Only FAQ items: Provide a list of comma-separated FAQ IDs of the FAQs you want to include. Its fetches these FAQs.
  5. Exclude FAQ items: Provide a list of comma-separated FAQ IDs of the FAQs you want to exclude from the list.
  6. Order FAQs By: Set the sort order of the FAQ's.
  7. Order Direction: Set whether the sort to be Ascending or Descending

Open/Close Behavior - Control How FAQs Open And Close

Open/Close Behavior - Control How FAQs Open And Close
  1. Expand FAQ's by default - ON/OFF toggle switch. Set ON to keep all the FAQs expanded as default. Set OFF to keep all FAQs shut by default
  2. Number of faqs open at once - This setting shows when Expand FAQ's by default is set to ON. Selecting One, open one FAQ at a time. By selecting Many, any number FAQ can open at once.

Icon - Select, Orient & Style Icons

Icon - Select, Orient & Style Icons
  1. Icon Placement : Supports 3 values - left, right, none

    • Select left to place the icon to the left
    • Select right to place the icon to the right
    • Select none to hide the icon
  2. Color when close : Shows up when Icon Placement is left or right. Select the color of the icon, when the FAQ item is close/shut (answer is hidden)
  3. Color when open : Shows up when Icon Placement is left or right. Select the color of the icon, when the FAQ item is expanded (answer is visible)

Category Title - Set Spacing & Typography Styles

Category Title - Set Spacing & Typography Styles
  1. Margin - Set the margin.
  2. Padding - Set the padding.
  3. Category Title Heading Level - Select the html tag. Values are h1, h2, h3, h4, h5, h6
  4. Category Title Font - Select the font
  5. Category Title Font Weight - Select font weight.
  6. Category Title Font Style - Select styles for
    • Italic
    • Uppercase
    • Title case
    • Underline
    • Strike Through
  7. Category Title Text Alignment - Set text alignment. It can be left, right or center
  8. Category Title Text Color - Set the color
  9. Category Title Text Size- Set the text size
  10. Category Title Letter Spacing - Set the letter spacing
  11. Category Title Line Height - Set the line height

FAQ List Wrapper - Container Of A FAQ items List

FAQ List Wrapper - Container Of A FAQ items List
  1. Margin - Set the margin.
  2. Padding - Set the padding.
  3. Border Top - Set the border top width.
  4. Border Right - Set the border right width.
  5. Border Bottom - Set the border bottom width.
  6. Border Left - Set the border left width.
  7. Border Color - Set the border color.
  8. Border Style - Set the border style.
    Note: A module showing FAQ's grouped by categories, will have multiple FAQ List Wrapper

FAQ Item Wrapper - Container For Single FAQ Item

FAQ Item Wrapper - Container For Single FAQ Item
  1. Margin - Set the margin.
  2. Padding - Set the padding.
  3. Border Top - Set the border top width.
  4. Border Right - Set the border right width.
  5. Border Bottom - Set the border bottom width.
  6. Border Left - Set the border left width.
  7. Border Color - Set the border color.
  8. Border Style - Set the border style.
  9. Box Shadow - Set the box shadow style.

Question - Style the FAQ Question

Question - Style the FAQ Question
  1. Margin - Set the margin.
  2. Padding - Set the padding.
  3. Border Top - Set the border top width.
  4. Border Right - Set the border right width.
  5. Border Bottom - Set the border bottom width.
  6. Border Left - Set the border left width.
  7. Border Color - Set the border color.
  8. Border Style - Set the border style.
  9. Text Color - FAQ Open - The text color of the question when FAQ is open.
  10. FAQ Question Title Font - Select the font
  11. FAQ Question Title Font Weight - Select font weight.
  12. FAQ Question Title Font Style - Select styles for
    • Italic
    • Uppercase
    • Title case
    • Underline
    • Strike Through
  13. FAQ Question Title Text Alignment - Set text alignment. It can be left, right or center
  14. Text Color - FAQ Close - The text color of the question when FAQ is closed.
  15. FAQ Question Title Text Color - Set the color
  16. FAQ Question Title Text Size- Set the text size
  17. FAQ Question Title Letter Spacing - Set the letter spacing
  18. FAQ Question Title Letter Spacing - Set the letter spacing
  19. FAQ Question Title Text Shadow - Set the text shadow

Answer - Style the FAQ Answer

Answer - Style the FAQ Answer
  1. Margin - Set the margin.
  2. Padding - Set the padding.