FAQs, or Frequently Asked Questions, give customers the power to get the help they need quickly and easily. Customers can find what they are looking for without having to contact customer service. It not only provides a better customer experience but also increases their efficiency in finding helpful answers.

An FAQ Element is a great way to anticipate questions from your customer base by providing detailed, relevant info relating to your products and services. This way, customers know they can come to you directly when they have questions that need answering.

General Settings #

Element Name/Title #

In the General Settings section, you will see the default name/title of the element you are working on. You can leave the name or change it for easier identification as you are building out your funnel page.

FAQ Type #

The FAQ Element allows you to create the look of your desired list. You have three options: Separated, Contained, and Simple Type.

• Separated: Each entry is separated from one another with a drop-down button located on the right side of each list apart from its title.
• Contained: Several entries are not necessarily separated from each other but include a drop-down button located on the right side, separate from its title.
• Simple Type: Entries are clustered together, this time with a drop-down button located before the entries’ title on the left side.

FAQ List #

Here, you will be able to edit each of the lists as you desire. When you click on the list you want to work with in the FAQ settings area, it drops down the list’s menu in the editor’s space for you to work with. Below are the edits you can make:

• Add New List: When you click on the “+” button, it adds a new list for you.
• Duplicate Existing List: When you want to duplicate a list you have already created, click on the “Copy/Clone” button.
• Delete list: You can delete a list by clicking on the “delete” button. When you delete it, the list numbering does not rearrange itself, although it does not affect anything.
• Arrange List: If you want to re-arrange your list, click on the four mini bars on the left side of the list you want to move, then drag and drop the list where you want.

Advanced Settings #

Custom Options #

• Icon (Close): Add an icon by selecting from the available icons or typing into the search bar. The default icon used when the list’s drop-down menu is closed is “Chevron-down”.
• Icon (Open): The default icon used when the list’s drop-down menu is open is “Chevron-up”.
• Icon Position: You can position the icon on either the right or left side of the list. You can only make one choice for all lists.
• Line Height: You increase the height of the Element box by adjusting the size bar.
• Expand Multiple Items at the Same Time: When toggled on, it allows your visitors to drop down multiple menus at the same time. If off, it only allows one at a time and collapses the previous menu when a new one is clicked.
• Expand / Collapse All Toggle Button: When toggled on, it adds an “Expand/Collapse All” button to the top left corner of the FAQ section to drop down or collapse all list menus at once.
• Keep First Content Open on Load: When toggled on, it drops down the first list menu by default when a visitor loads the page.
• Show Image As Popup on Click: Toggle this on to make images pop up when clicked, creating an interactive and engaging experience.

Font Options #

• Title Font Family: Choose the font for the FAQ titles.
• Content Font Family: Select the font for the FAQ content.
• Desktop & Mobile Title Font Size: Adjust the title font size for desktop and mobile devices.
• Desktop & Mobile Title Font Weight: Customize the title font weight for desktop and mobile devices.
• Desktop & Mobile Content Font Size: Adjust the content font size for desktop and mobile devices.
• Desktop & Mobile Content Font Weight: Customize the content font weight for desktop and mobile devices.

Color Options #

• Title Text Color (Open): Edit the color of your Title text when the menu drops down.
• Title Background Color (Open): Give your Title background a color that changes when the menu drops down.
• Separation Line Color: Select the color for the separation line. You can only choose one color for all lines.
• Content Text Color: Edit the color of your content text here.
• Content Background Color: Edit the background color of your content here.
• Title Text Color (Closed): Give your Title text a different color that changes when the drop-down menu collapses.
• Title Background Color (Closed): Give your Title background a different color that changes when the drop-down menu collapses.
• Expand/Collapse All Button Text Color: Edit the text color of the “Expand/Collapse All” button.
• Expand/Collapse All Button Border Color: Edit the border color of the “Expand/Collapse All” button.
• Expand/Collapse All Button Background Color: Edit the background color for the “Expand/Collapse All” button.
• Link Text Color: If you have a link added to this page, you can edit the link color here.

Spacing Option #

There are different spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only apply to that option.

• Padding Left, Right, Top, and Bottom: These four toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on.
• Margin Top and Bottom: You can adjust the top or bottom margin of your content by toggling its bars.

Shadow #

Box Shadow: If you want to add depth to your web page content, you can use the Box Shadow feature. By selecting either the inner or drop shadow option, you can create a light or strong shadow effect around your content.

Border And Shadow #

• Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up.
• Style: There are three different styles for your border: Solid, Dashed, or Dotted.
• Width: When you increase the border width, it increases the thickness of the border.
• Color: To change the color of the border, click on the color icon.
• Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the curvier it becomes.
• Radius Edge: You can decide the corner of the border you want to curve, either all edges, Top only, or Bottom edge only.

Visibility & Custom Class #

• Visibility: You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.
• Custom Class: Add a Custom Class by inputting your desired class name into the dedicated field to apply custom styles to specific elements.
• CSS Selector: Copy the Custom CSS code by clicking on the copy icon located on the right side of the reference code.

The FAQ Element is a versatile tool for improving customer experience by providing quick, accessible answers to common questions. By customizing its layout, design, and functionality, you can create a seamless and engaging experience for your visitors.

Frequently Asked Questions #

What FAQ layout types are available? #

You can choose Separated, Contained, or Simple Type, which differ in how entries are grouped and where the drop-down button sits.

How do I add a new FAQ entry? #

In the FAQ List settings, click the “+” button to add a new list entry, or use Copy/Clone to duplicate an existing one.

Can multiple FAQ answers be open at once? #

Yes. Enable “Expand Multiple Items at the Same Time” to allow several answers open simultaneously, or leave it off to show one at a time.

How do I let users open or close all answers together? #

Toggle on the “Expand / Collapse All Toggle Button” to add an Expand/Collapse All button at the top left of the FAQ section.

Can I keep the first answer open when the page loads? #

Yes. Enable “Keep First Content Open on Load” to display the first list menu expanded by default.

How do I reorder my FAQ entries? #

Click the four mini bars on the left side of the list you want to move, then drag and drop it into the desired position.