The DiviFlash FAQ module lets you create and manage frequently asked questions (FAQs) on your website.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains all the essential settings to add and configure FAQ items.
Add New FAQ Item
Click the + Add New FAQ Item button to create a new FAQ. This opens the FAQ Item Settings, where you can add content and style each item individually. By default, three FAQ items are included, which you can edit or delete. To learn more about how to add and customize FAQ items, click here.
General Settings
- FAQ Type: Choose the layout type of the FAQ. You have three options: Accordion, Toggle, or Plain.
- Use Grid Layout: Enable to use grid layout for the FAQ items.
- Layout Columns: Define how many columns there will be in the grid format. Only available if you enable “Use Grid Layout.”
- Item gap: Adjust the gap between the FAQ items. Only available if you enable “Use Grid Layout.”
- Apply Item Equal Width: Make all the FAQ items the same width.
- Item Width: Adjust the width of the FAQ items. (not available when Apply Item Equal Width is enabled.)
- Item Horizontal Alignment: Change the horizontal placement of the FAQ items relative to their container. (not available when Apply Item Equal Width is enabled.)
- Active Item: Enable this option to make one of the FAQ items active by default.
- Active Item Number: Define which FAQ item will be active.
Question Settings
- Hide Icon: Enable to hide the expand (+) icon in the FAQ items.
- Question Swap: Choose where you want to place the expand (+) icon in the FAQ items. (Not available when Hide Icon is enabled.)
- Question Layout Type: Change the horizontal placement of the questions respective to their container.
Animation
- Animation Type: Select the expand animation for the FAQ.
- Animation Duration (Ms): Adjust the length of the animation.
- Question Icon Animation: Choose the animation style for when users click the expand icon.
- Question Image Animation: Choose the reveal animation style for the question image.
- Answer Animation: Choose the reveal animation for the FAQ answer.
- Answer Animation Duration (Ms): Adjust the length of the answer animation.
Schema
- Enable Schema: Activate this option to output the schema data for SEO.
- Display FAQ: Deactivating this option will hide the FAQ but the schema will still be generated for SEO.
Link: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Use this tab to style and customize the visual appearance of the FAQ module.
FAQ Item: Background color and border options for the FAQ items.
Question Style: Background color and border options for the questions.
Question Opened Style: Background color and border options for the questions when they are opened.
Question Text: Typography options for the question text, before and after they are opened.
Question Icon: Color, size, and border options for the question icon, before and after they are opened.
Question Image: Color, size, and border options for the question image, before and after they are opened.
Answer Style: Background color and border options for the answer.
Answer Text: Typography options for the answer text.
Answer Heading Text: Typography options for the answer heading text.
Answer Image: Border options for the answer image.
Answer Button: Color, size, alignment, spacing, typography, and border options for the answer button.
Custom Spacing: Add custom spacing for the different components of the module.
Sizing: Adjust the width, height, and alignment of the module.
Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.
Box Shadow: Add shadow effects to the module.
Filters: Apply color filters to enhance the appearance.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
FAQ Item Settings
Each FAQ item works as a child of the main module. You can style and configure them individually, and these settings override the parent module settings.
Content
Question
- Question: Input the question.
- Question Tag: Define the h-tag of the question.
- Enable Question Image: Enable this option to use an image in the question.
- Image Alt Text: Submit the alt text for the image.
- Use Different Image on Opening: Upload a different image that will be displayed when the question is opened.
- Opened Image Alt Text: Submit the alt text for the opened image.
- Image Placement: Choose where you want to place the images in the question.
Answer
- Answer: Input the answer for the FAQ.
- Enable Image: Toggle on to use an image in the answer along with its alt text.
- Image Placement: Decide where you want the image to be placed.
- Enable Button: Toggle on to use a button in the answer and input it’s text, URL and link target.
- Use Button Icon: Enable this option to use an icon in the button.
- Icon Placement: Decide where you want the button icon to be placed.
- Show Icon on Hover: Enable to only display the button icon on hover.
Hide FAQ Item: Select whether to hide this FAQ item on specific device types.
Link: Default Divi setting (rarely used here).
Background: Add a background color, gradient, or image.
Admin Label: Rename the FAQ item for easier identification (visible only to you).
Design Tab
This tab mirrors the parent FAQ Settings and allows styling of individual FAQ items.
Advanced Tab
Provides advanced settings for custom CSS, visibility rules, and conditions for individual FAQ items.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]