FAQ Sections

FAQ Sections

Welcome to the “FAQ Sections” documentation. Looking to integrate an FAQ section into your website? Our block helps you deliver clear and valuable information to your website visitors. In this guide, we'll show you how to use the editor to customize your FAQ section block.






Step 1 : Open the Editor

1. Go to FAQ Sections templates.
2. Click on "Edit" after choosing your template.


class="flex justify-center items-start h-auto w-auto" alt="">



Step2 : Edit FAQ Content


1. In this panel, you can easily add, remove, or rearrange your questions as needed.


class="flex justify-center items-start h-auto w-96 h-auto " alt="">



2. Customize each FAQ by editing the question and answer to seamlessly match your website's content. You can also select the category where you'd like to place it.


class="flex justify-center items-start h-auto w-auto" alt="">



3. In the "Category" tab, you can decide whether to display categories or not. You can also customize their size and make them bold.
For each category, simply enter its name and choose whether to include an icon alongside it.


class="flex justify-center items-start h-auto w-auto" alt="">




Step 3: Configure settings


Here, you'll handle the FAQ settings:

1. You can decide if you want to show the header, and choose where to put it in the page.


class="flex justify-center items-start h-auto w-auto" alt="">



2. In the "FAQ" section, you can select the number of columns you'd like to use and customize the style by modifying their display, spacing between questions, roundness, and borders.
Additionally, you have the option to enable the expanded mode and choose how the default expanded view will be presented to users.


class="flex justify-center items-start h-auto w-auto" alt="">



3. In this section, you can set the content position, adjust the padding for questions and answers, decide whether to display question numbers, and select your preferred icons for opening and closing.


class="flex justify-center items-start h-auto w-auto" alt="">
 



Step 4: Choose Colors


1. Within this panel, you can select colors that match your website's design.


class="flex justify-center items-start h-auto w-80 h-auto h-auto h-auto " alt="">



Step 5: Preview


Lastly, you can click on “Preview” to see how your FAQ section block looks on both desktop and mobile devices. After this, you can proceed to the next step.


class="flex justify-center items-start h-auto w-auto" alt="">