The FAQ block for Gutenberg allows you to add a question and answer section to your posts and pages. This can be helpful for providing readers with additional information about your content.
1. How to add FAQ Block? #
To add the FAQ Block in your Gutenberg editor first click on (+) icon then in the search box type “FAQ” and you will see the “FAQ” block.
After inserting the “FAQ” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the preset option and Title, description and button text and URL options. The General settings panel properties are as follows.
- Presets: From our pre-defined presets you can select which style you like.
- General Settings: Add Faq items from the side panel also can add from add area by clicking “Add FAQ” button
- FAQ Item Gap: Set FAQ item to item Gap.
- Title Tag: Set FAQ item heading tag from H1 – H6
- Count Item: You can enable count item in number.
3. Style Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.
Set Count Style #
- Color: You can set the count number color.
- Hover Color: You can set the hover color of the count number.
- Font Size: You can set the font size of the count number
- Box Size: You can set the box size of the count.
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Margin & Padding: You can set margin and padding of the count box.
- Title: You can set Title typography like font family, size, weight and line height, Title color and Title alignment.
- Content: You can set Title typography like font family, size, weight and line height, Title color and Title alignment.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles and also can set border radius.
- Shadow: You can set box shadow for normal and hover style.
5. Final Outcome #
Here is the final outcome of a Faq Block
