FAQs, or Frequently Asked Questions, let customers find the help they need quickly and easily, without having to contact customer service. This makes for a better customer experience and saves everyone time.

An FAQ Element is a useful way to anticipate questions from your customers by providing relevant, detailed information about your products and services. That way, customers know exactly where to look when they need an answer.

General Settings

Element Name/Title

In the General Settings section, you'll see the default name or title for the element you're working on. You can leave it as is or change it to something more recognisable as you build out your funnel page.

FAQ Type

The FAQ Element lets you choose the visual layout for your list. You have three options: Separate, Contained, and Simple Type.

  • Separated: Each entry is separated from the others, with a drop-down button on the right side of each item, distinct from its title.
  • Contained: Entries are grouped together and include a drop-down button on the right side, separate from the title.
  • Simple type: Entries are clustered together, with a drop-down button to the left of each entry's title.

FAQ List

Here you can edit each list as you like. Clicking on a list in the FAQ settings area expands its menu in the editor for you to work with.

Below are the edits you can make:

  • Add New List: Click the "+" button to add a new list.
  • Duplicate Existing List: To duplicate a list you've already created, click the "Copy/Clone" button.
  • Delete list: Delete a list by clicking the "delete" button. The list numbering won't rearrange itself after deletion, though this doesn't affect anything.
  • Arrange List: To rearrange your list, click and hold the four mini bars on the left side of the item you want to move, then drag and drop it into position.

Advanced Settings

Custom Options

  • Icon (Close): Add an icon by selecting from the available icons. If you have something specific in mind, type it into the search bar to narrow down the options. The icon shown when the drop-down menu is closed is "Chevron-down".
  • Icon (Open): Add an icon by selecting from the available icons. If you have something specific in mind, type it into the search bar to narrow down the options. The icon shown when the drop-down menu is open is "Chevron-up".
  • Icon Position: Position the icon on either the right or left side of the list. You can only choose one position for all lists.

Line Height 1.5

Increase the height of the Element box by adjusting the size bar.

  1. Expand Multiple Items at the Same Time: Toggle this on to let customers and visitors expand multiple menus at once. Toggle it off and only one menu can be open at a time; the previous one collapses when a new one is clicked.
  2. Expand / Collapse all Toggle Button: Toggle this on to add an "Expand/Collapse All" button to the top left corner of the FAQ section. Clicking it expands or collapses all list menus at once.
  3. Keep First Content Open on Load: Toggle this on to expand the first list menu in the FAQ by default when a visitor loads the page.
  4. Show Image As Popup on Click: Toggle this on if you want images to pop up when clicked, creating a more interactive experience for your visitors.

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: Customise 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: Customise the content font weight for desktop and mobile devices.

Colour Options

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

Spacing Option

There are various spacing options for adjusting your content. The settings apply only to the edit option you're currently working on. For example, if you're editing a particular Row (the BLUE box), the spacing settings will only affect content within that row.

  • Padding Left, Right, Top, and Bottom: These four toggle bars move content left, right, up, or down, depending on which bar you adjust.
  • Margin Top and Bottom: Adjust the top or bottom margin of your content using these bars.

Shadow

  • Box Shadow: To add depth to your page content, use the Box Shadow feature. Choose between an inner or drop shadow to create a light or strong shadow effect around your content.

Border And Shadow

  • Border Options: Choose the type of border you want. Once selected, the border settings will appear.
  • Style: There are three border styles available: Solid, Dashed, or Dotted.
  • Width: Increase the border width to make it thicker.
  • Colour: Click the colour icon to change the border colour.
  • Radius: Adjusting the radius curves the edges of the border; the higher the number, the more curved it becomes.
  • Radius Edge: Choose which corners to curve: all edges, top only, or bottom edge only.

Visibility & Custom Class

  • Visibility: Choose whether this element should be visible on mobile devices only, desktops only, or both, by clicking the relevant icon.
  • Custom Class: Add a custom class to your web page by entering your desired class name in the field provided. This lets you apply custom styles to specific elements by linking them to style definitions in a stylesheet.
  • CSS Selector: Copy the custom CSS code by clicking the copy icon on the right side of the reference code. This makes it quick and straightforward to replicate and implement your CSS Selector code across your page.

The FAQ Element is a versatile tool for improving the customer experience by giving visitors quick, accessible answers to common questions. Customise the layout, design, and functionality to create a smooth and engaging experience.