The FAQ Block makes it easy to organize and display pairs of questions and answers for your potential clients.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left side menu.
STEP TWO
Click on the Page Name or add a new page that you want to use the FAQ block in. Click on the FAQ option in the last row of your available blocks to add the FAQ block to your page.
STEP THREE
Click in the FAQ block to add your items. This will be the frequently asked questions and answers you want to display in the block.
STEP FOUR
The menu will open on the right side of your screen that allows you to add your items. Click on the NEW ITEM button to add your first FAQ.
STEP FIVE
Enter your Question and Answer items. You'll see the following options in the right side menu:
- QUESTION: Limit of 400 characters. Your question will always display on the screen.
- ANSWER: No character limit. Depending on your choice of layout (see LAYOUT section below), a user may need to click to expand the view to see the answer content.
Important Notes:
There is a limit of 50 items (sets of questions and answers) that can display per FAQ Block.
The font for your FAQ Block Items is the same as your content font type, which is selected under BUILDER > DESIGN > FONTS.
Scroll down and click on create item at the bottom of the screen to set up your first question and answer.
Repeat this step as many times as need for adding additional FAQs.
All of your FAQ block items will appear in a list as you create them:
LAYOUTS
Once you have created all of your desired pairs of questions and answers, you can change how they appear by changing the layout for your new FAQ Block. To do so, click change under current layout in the main area of your FAQ Block:
Below, you'll find a list of the available layouts and their key features to consider:
-
ACCORDION PLUS:
Users need to click on the plus sign+ icon to the right of each question to expand and view the corresponding answer. There is not a column number selection to be made, all items appear in one column.
-
ACCORDION BAR:
Users need to click on the question in order to view the corresponding answer. There is not a column number selection to be made, all items will appear in one column.
-
ACCORDION ARROW:
Users need to click on the down arrow icon to the left of each question to expand and view the corresponding answer. There is not a column number selection to be made, all items will appear in one column.
-
CONTEMPORARY TITLE:
Each set of question and corresponding answer will load on the page; users will not need to click on the question or any related icon to see the corresponding answer. The question displays on the left-hand side and a vertical bar separates the answer which appears on the right. There is not a column number selection to be made, all item sets will appear in one column on the page.
-
CONTEMPORARY BORDER:
Each FAQ item (pair of question and answer) is grouped together with a vertical line to the left of each set. You are able to display the FAQ Block Items in one or two columns on desktop and tablet devices. On mobile phones, the items will appear in one column regardless of column selection.
-
NUMBERED LIST:
Each FAQ item (pair of question and answer) is grouped together in a numbered list. The number for each item displays to the left of each question/answer set. You are able to display the FAQ Block Items in one or two columns. On mobile devices, the items will appear in one column regardless of column selection.
-
MODERN BAR:
Each question displays in a bar, with the corresponding answer appearing directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices. The color for the question is determined by "item background" in the color tab for your FAQ block; the background color for the answer is a lighter version of this color selection.
-
MODERN LINE:
Below each question is a horizontal line separating the question from its corresponding answer directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
-
MODERN PINBOARD:
Each set of question and answer appears in a container. Each FAQ item is arranged one on top of the other, with the entire height of each item respected, resulting in the "pinboard" view. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
-
MODERN CENTER:
Similar to the "modern line" layout, a short and centered horizontal line separates the question from its corresponding answer directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
There are 10 layouts to choose from. Below, you'll find a list of the available layouts and their key features to consider:
ACCORDION PLUS:
Users need to click on the plus sign+ icon to the right of each question to expand and view the corresponding answer. There is not a column number selection to be made, all items appear in one column.
ACCORDION BAR:
Users need to click on the question in order to view the corresponding answer. There is not a column number selection to be made, all items will appear in one column.
ACCORDION ARROW:
Users need to click on the down arrow icon to the left of each question to expand and view the corresponding answer. There is not a column number selection to be made, all items will appear in one column.
CONTEMPORARY TITLE:
Each set of question and corresponding answer will load on the page; users will not need to click on the question or any related icon to see the corresponding answer. The question displays on the left-hand side and a vertical bar separates the answer which appears on the right. There is not a column number selection to be made, all item sets will appear in one column on the page.
CONTEMPORARY BORDER:
Each FAQ item (pair of question and answer) is grouped together with a vertical line to the left of each set. You are able to display the FAQ Block Items in one or two columns on desktop and tablet devices. On mobile phones, the items will appear in one column regardless of column selection.
NUMBERED LIST:
Each FAQ item (pair of question and answer) is grouped together in a numbered list. The number for each item displays to the left of each question/answer set. You are able to display the FAQ Block Items in one or two columns. On mobile devices, the items will appear in one column regardless of column selection.
MODERN BAR:
Each question displays in a bar, with the corresponding answer appearing directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices. The color for the question is determined by "item background" in the color tab for your FAQ block; the background color for the answer is a lighter version of this color selection.
MODERN LINE:
Below each question is a horizontal line separating the question from its corresponding answer directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
MODERN PINBOARD:
Each set of question and answer appears in a container. Each FAQ item is arranged one on top of the other, with the entire height of each item respected, resulting in the "pinboard" view. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
MODERN CENTER:
Similar to the "modern line" layout, a short and centered horizontal line separates the question from its corresponding answer directly below it. You have the option to display the FAQ block in one, two, or three columns. If selecting "two" or "three" columns for this layout, the content will appear in two columns on tablets and in one column on mobile devices.
ADVANCED SETTINGS
STYLING
The FAQ Block styling section allows you to adjust spacing between items, below blocks, and inside blocks. The available spacing options shown depends on your choice of layout. These styling sections will override the settings that have been picked in the global styling section under DESIGN tab.
- Space Between Items: Controls the spacing between items.
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
COLORS
Adjust the colors of the FAQ block. These colors will override the colors that have been picked in the global color section under the DESIGN tab. The color options shown depends on the selected layout.
COLOR NOTES:
- "Icon Color" affects the arrow or plus sign icon in the "accordion plus" and "accordion arrow" layouts.
- "Shape Background" and "Shape Text" Colors affect the color of the number when using the "numbered list" layout.
- "Item Background Color" is the background color of the title when using the "modern bar" layout. The background color of the answer is a lighter version of this selection.
BACKGROUND
You can customize a background image behind your FAQ Block to be different from your website. You can upload a custom background image or choose one from our Background Library.
FONTS
You can easily customize the fonts you're using on your FAQ blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your FAQ block:
- QUESTION
- ANSWER
- ANSWER H1
- ANSWER H2
- ANSWER H3
Click on Save Changes at the bottom of the control panel menu to apply your changes.
0 Comments