A FAQ, or Frequently Asked Questions, is a common and important element in any modern website, making it easy for your visitors to find answers to some of the most common questions you see without having to hunt through your website. To add one, drag the FAQ component to a page of your site. Next, click on the component to begin editing it.
By default we include a couple example questions. To edit the questions and answers, simply click on the question text or answer text and type. Note, the element uses the collapsible layout by default, so you’ll need to click on a question to expand it to edit the answer text.
To the side of the editor you’ll see the options panel for the component to further customize it.
- Layout - These options control the overall layout of all questions and answers.
- Collapsible - This option collapses each question and answer pair into a clickable row. A visitor can click anywhere on a question to expand it to show the answer.
- Expanded - This layout is similar to collapsible, except that each question and answer are always shown as expanded. We also include a checkmark icon next to each; the color of the icon is the primary color of your site.
- Grid - This option shows a grid with each question and answer as a card with a colored background.
- Questions
- Add - To add a question, click on the Add button. You can edit the text directly within the component itself.
- Delete - To delete a question, click on the red X on the top-right corner of a question in the options panel.
- Rearrange - To change the order of your questions, click on a question and drag it to a different position within the list of questions.
- Margin - This option controls the spacing around all elements of the component as a whole. To set this separately for different screen sizes, click on the desktop/mobile icon.
The following options are only available when using the grid layout option.
- Grid Background - This color is the background color of each card. You can choose a color, gradient, image, or none.
- Grid Border - There are three options to control the border around each card:
- Width
- Color
- Style
- Grid Question Color - Change this option to customize the color of question text.
- Grid Answer Color - Change this option to customize the color of answer text.
- Hover - To control how each card looks when you hover over it with a mouse, click on Hover at the top of the options panel. Each of the unique options shown for the grid layout in specific are here and can be customized differently on hover.