FAQ

The FAQ is a powerful element designed to help you build an organized and visually appealing FAQ section on your website. With this widget, you can easily customize each FAQ item to suit your needs by writing your own content or using pre-designed templates. 

It offers flexible display options, allowing you to choose between Accordion, List, or Grid layouts to present your FAQs in an engaging way. 

Additionally, you can enhance the user experience by adding visuals, making it easier for visitors to find the answers they need. 

This widget not only improves navigation but also helps to reduce customer inquiries by providing clear and accessible information.

The  “FAQ” element features the following controls.

Content

FAQs

  • Icon: Select the icon to use in FAQ.
  • Question: Enter the content for a question.
  • Content Type: Select the type to display the answer.
    • Answer: Enter the answer manually(applicable for Editor Content Type).
    • Template: Select the template to display the answer(applicable for Template Content Type)
  • Active as Default: Enable the option to make them active by default.
FAQ: Content Type Settings
FAQ: Content Type Settings
  • Layout: Select layout from Grid, Accordion, or List.

These options are applicable to the Grid Layout.

  • Columns: Specify the number of columns you want to display.
  • Columns Gap(px): Specify the gap between columns.
  • Row Gap(px): Specify the gap between rows.
FAQ: Layout Settings
FAQ: Layout Settings
  • Enable First FAQ Default Open: Enable the option to display the first FAQ open by default(applicable for accordion layout).
  • Question HTML Tag: Select the HTML tag for question.
  • Enable Icon: Enable the option to display the icon.
    • Icon: Choose the icon.
    • Icon Position: Select the icon position.
  • FAQ Schema: Enable the option to activate the FAQ schema.
FAQ: Layout Settings
FAQ: Layout Settings

These options are applicable to the Accordion Layout.

  • Toggle: Enable the option to toggle the FAQ.
  • Trigger Action: Select the trigger action from Hover or Click.
  • Transition Speed: Set the transition speed.
FAQ: Accordion Layout Settings
FAQ: Accordion Layout Settings

Navigation

These options are applicable to the Accordion Layout.

  • Enable Icon: Enable the option to display the navigation icon.
    • Icon: Select the navigation icon.
    • Active Icon: Select the navigation icon for the active state.
  • Position: Select the position of navigation icon.
FAQ: Navigation Settings
FAQ: Navigation Settings

Item Style

  • Width: Enter the width of item box.
  • Background: Select the icon for item box.
  • Border: Set the border for a box.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
  • Margin: Set the margin.
FAQ: Item Style Settings
FAQ: Item Style Settings

Question Style

  • Alignment: Choose the alignment of question.
  • Typography: Set the typography.
  • Blend Mode: Select the blend mode.
FAQ: Question Style Settings
FAQ: Question Style Settings

Closed/Opened

  • Color: Choose the text color of question.
  • Background: Select the background of question box.
  • Border: Set the border for a box.
FAQ: Question Style Settings(Closed & Open)
FAQ: Question Style Settings(Closed & Open)
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
  • Margin: Set the margin.
FAQ: Question Style Settings
FAQ: Question Style Settings

Icon

  • Size: Specify the size of icon.
  • Color: Select the color of icon.
  • Background: Select the background color of icon.
  • Border: Set the border.
FAQ: Question Icon Style Settings
FAQ: Question Icon Style Settings
  • Spacing: Set the spacing between icon & question content.
  • Rotate: Set the rotation properties.
  • Padding: Set the padding.
FAQ: Question Style Settings
FAQ: Question Style Settings

Answer Style

  • Typography: Set the typography of answer content.
  • Background: Select the background.
  • Border: Set the border.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
  • Margin: Set the margin.
FAQ: Answer Style Settings
FAQ: Answer Style Settings

Navigation Icon Style

These options are applicable to the Accordion layout.

Normal

  • Color: Select the color of navigation icon when the FAQ is in normal state.
  • Background: Choose the background color of navigation.
  • Border: Set the border.
FAQ: Navigation Icon Style Settings
FAQ: Navigation Icon Style Settings

Opened

  • Color: Select the color of navigation icon when the FAQ is in opened state.
  • Background: Choose the background color of navigation.
  • Border: Set the border.
FAQ: Navigation Icon Style Settings(Opened)
FAQ: Navigation Icon Style Settings(Opened)
  • Size: Specify the size of navigation icon.
  • Rotate: Set the rotate properties of an icon.
  • Spacing: Specify the spacing between the navigation icon and other content.
  • Padding: Set the padding.
FAQ: Navigation Icon Style Settings
FAQ: Navigation Icon Style Settings

Check out the Demo page of FAQ element.