DiviFlash FAQ module brings every necessary feature required to showcase faqs in an engaging and organized way. Let’s take a closer look at each feature to get ideas about design opportunities.
Content Tab
FAQ module content tab has child items, which will be your faqs list. You will find three prepopulated items there after the first initiation. You can add unlimited list items by clicking “Add New Item“.
Divi child items also consist of three tabs. Let’s explore them one by one.
Content Tab Child Item
Question
- Question: Add a question text in this area.
- Question Tag: Define the HTML tag for the question. By default it’s H3, you can pick one from H1-H6, P, Span, and Div tag.
- Enable Question Image: By default, this feature is disabled. Enable it to add 2 different images with alt text; one will always be visible, and another will appear only when the question is opened. Further, move your image to the left or right side of the question.
Answer
- Answer: Add answer text in this area.
- Enable Image: Add an image with alt text and place it on the bottom, top, right, or left side of the answer. You can adjust the container width when you add images to the left and right sides of the answer. On top of that, make the image full-width for mobile devices.
- Enable Button: Place a Button after the answer and add a button name, URL, & icon to the left or right side of the answer. Further, you can show the icon only on hover by using the Show Icon On Hover option.
Hide FAQ Item
Hide the visibility of any of the particular FAQ items on the desktop, tablet, and mobile devices
Link
Set a Navigation link to your FAQ child item.
Background
Here is the background option for your child’s item or list. You will find all the regular background features that Divi usually offers.
Child Item Design Tab
Question Style
You can apply a background, radius effect, and border around the question. Next, change the border style, width, and color with the box-shadow effect.
Question Opened Style
Here, you get all the features that are available in Question Style. However, all of these features affect only when the question answer is opened.
Question Text
- Text: Change the question text font, weight, style, color, size, letter spacing, and line height with the text-shadow effect.
- Open Text: Same features are available here including text alignment but these features affect only when the question answer is opened.
Question Icon
- Icon: change the question icon background, and color with a rounding and box-shadow effect. Moreover, add a border around the icon and control its style color, and width.
- Opened Icon: Same features are available here and these features affect the icon only when the question answer is opened.
Question Image
- Image: Change the question image background with corner rounding and box-shadow effects. And apply a border around the image and control its style color, and width.
- Opened image: Same features are available here and these features affect the image only when the question answer is opened.
Answer Style
Style the answer box by adding a background, rounded corners, and a border with a box shadow effect.
Answer Text
Change the answer text font, weight, style, alignment, color, size, letter spacing, and line height with the text-shadow effect. Also, you can do the same for link text, numbering, bulleting, and quotes.
Answer Heading Text
Each feature in the Answer Text is achievable inside the Answer Heading text. These features work only for headings.
Answer Image
You can control the answer image width and alignment. Add a corner rounding and stylish border around the answer image with a box-shadow effect.
Note: Image width and alignment features are available only when you place an image at the top or bottom of the answer.
Answer Button
Change the button background, alignment, text color, style, size, letter spacing, and line height with a stylish border and shadow effect. Plus, you can modify the button icon color, size, and space. On top of that, you can make the button full width and give a proper margin padding around it.
Custom Spacing
Wrapper: Apply wrapper margin & padding around the question, answer, and entire FAQ item.
Content: Apply content margin & padding around the question icon and image. Also, you can provide padding around the answer text and image.
Other Divi Default Feature
All the default features like Sizing, Border, Box-shadow, Filter, and Transform are available for the FAQ child item.
Child Item Advanced Tab
Features from the Advanced tab covered on General doc.
Note: All the features here will affect the child item only.
Global Content Tab
General Setting
- FAQ Type: There are 3 different FAQ types, Accordion, Toggle, and Plain. By default, the accordion is selected.
- Use Grid Layout: Show FAQ items in a grid layout and define how many items will be visible in a single row.
- Item Gap: Define the gap between FAQ items.
- Apply Item Equal Width: Show all the FAQ items with an equal width. By default, it’s on.
- Active Item: Define which FAQ item will remain open when visitors interact on the site.
Question Setting
- Hide Icon: You can hide the icon from the question box.
- Question Swap: Let you swap the position between the question and the icon. Remember, if you activate the Hide Icon option, this feature also will get hidden.
- Question Layout Type: Choose one of the 4 different question layout types, Default, Left, Right, and Center.
Animation
- Animation Type: You get 2 different animation types, Slide & Fade, that impact when the question reveals. Also, you can control the animation duration.
- Question Icon Animation: You get 3 different animation types, Fade, Scale, & Rotate, that impact when the question icon reveals.
- Question Image Animation: Like the Icon animation, the same features are available for the question Image animation, but they impact when the question image reveals.
- Answer Animation: You have 8 different animation effects to pick from. These animations impact when the answer reveals. Also, you can control the animation duration.
Schema
By default Schema feature is disabled. You can enable it to add Schema for the FAQ items.
Background
Apply a Background for the entire module at once. You use an image, gradient, video, pattern, and mask as the background.
Global Design Tab
Except for the FAQ Item and Custom Spacing, all the Global Design tab features are the same as you get for the child item. However, if you make any changes in the child item, it will override the global features.
FAQ Item
Add a background, a corner rounding effect, and a stylish border with a box shadow effect for the entire FAQ module. Further, you change the border style, width, and color for a better look.
Custom Spacing
- Wrapper: Apply wrapper margin & padding around the entire FAQ module. Also, add margin padding to every FAQ item, question, and answer at a time.
- Content: Apply content margin & padding around all the item’s question icons and images simultaneously. Also, you can provide padding around the answer text and image for all the items.
Global Advanced Tab
Features from the advanced tab covered on General doc.
