FAQ componentsLists are used to help answer questions for visitors in a quick and concise format. FAQs do not necessarily have to contain "questions" and "answers," and can be used as a template to display a large amount of text without taking up too much real estate on the page.
...
.
The following instructions will provide information on how to create and insert Frequently Asked Questions (FAQs) and other Expandable Content into your page.
Table of Contents
| Table of Contents | ||
|---|---|---|
|
Creating FAQ
...
Lists
...
The first step in creating FAQs or Expandable Content is to create the individual FAQ components:
...
Click New Component (blue) to begin creating FAQ components.
In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.
You will be taken to a new page for creating the component (shown below):
...
Creating an individual FAQ component.
There are a few important steps to creating an individual FAQ component:
Name the FAQ component
Choose
FAQfrom the Schema drop down menu (highlighted in yellow above).Enter the appropriate text for the Question and Answer fields.
FAQs do not always need to be in a question/answer format, but the component is most suitable for this format.
When you're done entering text into these fields, hit
Save & Closein the Home tab (highlighted in blue above).
Once you have saved your first FAQ component, you must repeat this whole process for each question you want in your FAQs before you can add the list to a page.
Inserting FAQ Component(s) Into a List Component
Once all of your FAQ components have been completed, you must create a List component.
This component will house all of your FAQs, then you can add the List to a page.
In the Building Blocks folder of your respective website, click New Component in the Create tab of the navigation bar.
You will be taken to a new page for creating the component (shown below):
...
Creating a List component for the individual FAQ components.
At this stage, you must label the component a List component before you can add your FAQs to it.
Choose
Listfrom the Schema drop down menu (highlighted in yellow above).Do not enter any text in the Display title field.
In the List element field, click on the folder/magnifying glass button (highlighted in blue above).
A window will pop up that shows you the Building Blocks folder:
...
The Building Blocks folder with your individual FAQ components.
To add your individual FAQ components to the List component:
Select an FAQ component you've just created.
Click
Insert(highlighted in yellow above).Back in the window for your List component, click on the green
+icon (highlighted in yellow below).
...
The pop up for the Building Blocks folder will appear again, and you can enter your remaining FAQ components by selecting them and using the Insert button, like you did before.
...
Your completed List component, containing your individual FAQ components.
When you have multiple FAQ components in the list, you can sort them by dragging the sort icons (highlighted in yellow above) or delete them using the trashcan icons (highlighted in red above).
Once your list is complete, click Save & Close in the Home tab (highlighted in blue above).
Inserting Your List Component Onto a Page
To actually put the FAQs onto a web page, you must navigate to the desired page in the root folder and open it.
Click
Insert, which will open up the pop up with the Building Blocks folder in it (shown below):
...
Inserting the List component onto a page.
Select the List component you created, then choose FAQ from the Component Template drop down menu (highlighted in yellow above).
Once you have chosen FAQ, click Insert to add the component to your page.
Back in the window for your page, you’ll see that your FAQ List component is there.
| Note |
|---|
The FAQ component cannot be the only component on the page. You must create and insert a Page Title component (see Page Titles for more information) or a Content component (see Basic Textfor more information) to live on the page as well. |
When you are happy with your page, click Save and Close and you are ready to Publish (see Publishing for more information).
FAQ item in Beatrix CMS either from pages or your content folder.
| Info |
|---|
The FAQ schema is for a single level list. The FAQ List schema is for a multilevel FAQ list. |
...
After titling the list you will add Items to this list
...
Creating an individual FAQ item
...
When you are finished adding items, click on Create Content.
You will then be prompted to select your layout view.
Layout views
| Info |
|---|
The Modal Layout view is for Yalemedicine.org only. |
Example of a single level FAQ List on a Web Page
Below is an example of the FAQ List we created in the above instructions, as it lives on a web page (highlighted in yellow):
...
An FAQ List in action.
...
List of FAQs
If you have a large number of FAQs or a large quantity of content, it is a good idea to sort the individual questions into groups or categories.
This helps to display a large amount of text without taking up too much real estate on the page.
This can be accomplished by taking the groups and making List components out of each group of individual FAQ components (as described previously in these instructions), then making a List of FAQs component out of the List components.
This process (described below) is basically the same thing as creating a List component, but you are doing it with the FAQ List schema instead of individual FAQ schema.
| Note |
|---|
When creating a FAQ that will be a part of a List of FAQs, the Display Title is important to fill out because it will serve as the title for the group of questions or information. |
...
After titling the list you will add Items to this list
Creating an individual FAQ component.
...
When you are finished adding items, click on Create Content.
You will then be prompted to select your layout view.
Example of a List of FAQs Component on a Web Page
Below is an example of the FAQ List Componentof FAQs component we created in the above instructions, as it lives on a web page (:
...
A List of FAQs component, as it appears on a web page.
...
There are several important elements to point out in the above example:
The Display Title for the List of FAQs component is highlighted in yellow
...
.
The individual FAQs with their questions and answers are highlighted in red.
The Display Titles for the List components made up of individual FAQs are highlighted in green and blue.
Not only do these display titles appear at the top of each section of questions, they are the labels for the quick links (blue) that will take you directly to that section of questions if you click on it.