Frequently Asked Questions (FAQ)

FAQs, or Frequently Asked Questions, empower customers by giving them easy access to the information they need. This self-service option improves the overall user experience by allowing customers to resolve issues without contacting customer support, which in turn enhances their efficiency in finding solutions.

An FAQ section is an excellent tool to proactively address common queries by providing detailed and relevant information about your products or services. This reassures customers that they can rely on your company to answer their questions promptly.

General Settings

Element Name/Title The General Settings section displays the default name or title of the FAQ element. You can either keep this title or modify it for better identification while building your funnel page.

FAQ Types

The FAQ feature lets you customize the appearance of your FAQ list. You have three main layout options:

1. Separate: Each FAQ entry is distinct, with a drop-down button located to the right of the title.

2. Contained: Entries are grouped, but each has a drop-down button on the right side.

3. Simple: Entries are clustered, with a drop-down button placed to the left of the title.
   
   

FAQ List

In the FAQ settings area, you can modify each list item to suit your needs. Clicking on a list item in the editor reveals additional options for customization.

List Editing Options:

• Add New List: Add a new list item by clicking the "+" button.

• Duplicate Existing List: Clone an existing list by using the "Copy/Clone" button.

• Delete List: Remove a list item by clicking the "delete" button.

• Arrange List: Move list items by dragging the four-bar icon on the left side of the item.
  
  

Advanced Settings

Customization Options:

• Close Icon: Choose an icon for when the FAQ list is collapsed. The default icon is "Chevron-down."

• Open Icon: Pick an icon for when the list is expanded. The default icon is "Chevron-up."

• Icon Position: Set the icon's position on either the left or right side of the list.

Additional Settings:

• Line Height: Adjust the height of the element box using a size bar.

• Multiple Items Expansion: Enable customers to open multiple FAQs simultaneously.

• Expand/Collapse All Button: Add a button that allows users to expand or collapse all lists at once.

• First Content Open on Load: Automatically expand the first FAQ item when the page loads.

• Show Image as Popup: Enable images to pop up when clicked, creating a more interactive experience.
  
  

Color Options

You can customize various color settings in your FAQ section, including:

• Title Text Color (Open): Change the color of the title text when the list is expanded.

• Title Background Color (Open): Modify the background color for the title when the menu is expanded.

• Separation Line Color: Choose a color for the dividing lines between list items.

• Content Text and Background Color: Customize the text and background colors for the content of each FAQ.

• Title Text and Background Color (Closed): Set different colors for when the list is collapsed.

• Expand/Collapse All Button Colors: Customize the text, border, and background colors of the "Expand/Collapse All" button.
  
  

Font Options

• Font Family: Modify the font style for both titles and content.

• Font Size: Adjust font sizes separately for mobile and desktop views.
  
  

Spacing Options

You can modify the spacing of content using different options:

• Padding: Adjust the padding on all sides—left, right, top, and bottom.

• Margin: Change the margin above or below the content as needed.
  
  

Borders and Shadows

You can also define borders and shadows to enhance your FAQ section's appearance:

• Border Type and Style: Choose from solid, dashed, or dotted borders.

• Width and Color: Adjust the thickness and color of the borders.

• Radius and Edge: Curve the edges of the border by adjusting the radius.

• Box Shadow: Add shadows to create depth, either with inner or drop shadows.
  
  

Visibility and Custom Class

• Visibility: Set the visibility of specific elements for mobile or desktop devices.

• Custom Class: Add a custom class to style specific elements on your page.

• CSS Selector: Copy and use the Custom CSS code for consistent design across the page.