Skip to main content
FAQ

FAQs or Frequently Asked Questions, give customers the power to get the help they need quickly and easily.

Danni Harris avatar
Written by Danni Harris
Updated over a year ago

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 with 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.

Text Format

You can edit your texts using these text formats here;

  1. Bold

    When you click on this format, it allows you to turn your highlighted text to a bold font.

  2. Italic

    This format allows you to slant your text.

  3. Strike

    This format allows you to cross/strike your text.

  4. Underline

    You can underline your text by clicking on this format.

  5. Link

    When you click on this format, it allows you to add a link to the text you have highlighted. You can also decide if you want the link to open on the current window or a new window.

  6. Paragraph

    When you click on this button, it changes the font size to the "Normal text" size 11 with an "Arial" font style.

  7. Header 1

    Clicking on H1 changes your text font size to a size "23" with a "Roboto" font style and bold format.

  8. Header 2

    Clicking on H2 changes your text font size to size "17" with a "Roboto" font style and bold format.

  9. Header 3

    Clicking on H3 changes your text font size to a size "13" with a "Roboto" font style and bold format.

  10. Header 4

    Clicking on H4 changes your text font size to size "11" with an "Arial" font style and bold format.

  11. Header 5

    Clicking on H5 changes your text font size to a size "10" with an "Arial" font style and bold format.

  12. Header 6

    Clicking on H6 changes your text font size to a size "9" with a "Roboto" font style and bold format.

  13. Clear Format

    To clear out/delete any of the format choices you made, simply click this button.

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: Separate, Contained and Simple Type.

Separate

With the Separate Type, 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

With the Contained Type, 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

And finally, with Simple Type, entries are once again 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 choose. 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 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 won't re-arrange itself, although it doesn't affect anything.

Arrange List

If you want to re-arrange your list, click on the four (4) mini bars on the left side of the list you want to move, then drag and drop the list where you want.

Image Options

Within the Image option, you have the ability to choose whether to add an image or disable it by toggling the image button on or off.

Image

When you click on the image icon on the right side of the space provided, it directs you to the storage page where you can upload the image you want to use. Once you've uploaded the image, click on the image, and then click on the "copy to clipboard" icon on the right upper corner of the page, beside the "delete" icon to copy the image URL.

Click on the "Back" button to return to the Editors' page, then paste the URL in the space provided your image will appear on the editor's space.

Advanced Settings

Custom Options:

  • Icon (Close)

You can add an icon to your page by simply selecting from the available icon. If you have the desired icon in mind, you can type it into the search bar to narrow down the options. Here the Icon used when the list's drop-down menu is closed is "Chevron-down".

  • (Open) Icon

You can add an icon to your page by simply selecting from the available icon. If you have the desired icon in mind, you can type it into the search bar to narrow down the options. Here the Icon used when the list's drop-down menu is Open is "Chevron-up".

  • 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 1.5

You increase the height of the Element box by adjusting the size bar.

  • Expand Multiple Items at the Same Time

When you toggle on this button, it allows your customer/visitors to drop down multiple menus at the same time. If you turn it off, it will only allow them to drop down one at a time; it collapses the previous menu when a new one is clicked on.

  • Expand / Collapse all Toggle Button

When you toggle this button on, it adds an "Expand/Collapse All" button to the top left corner of the FAQ section. Once they click on the button, it drops down or collapses all list menus at once.

  • Keep First Content Open on Load

When you toggle on this button, it drops down the first list menu in the FAQ by default when a customer/visitor loads the page.

  • Show Image As Popup on Click

If you want images to pop up when clicked, simply toggle the Show Image As Popup on Click button, creating an interactive and engaging experience for your visitors.

Colour Options:

  1. Title Text Colour (Open)

    You can edit the colour of your Title text which changes the text when the menu drops down.

  2. Title Background Colour (Open)

    You can also give your Title background a colour that changes the background when the menu drops down.

  3. Separation Line Colour

    Here you can select the colour you want for the separation line. You can only choose one colour for all lines.

  4. Content Text Colour

    You can edit the colour of your content text here.

  5. Content Background Colour

    You can also edit the background colour of your content here.

  6. Title Text Colour (Closed)

    You can give your Title text a different colour that changes when the drop-down menu collapses.

  7. Title Background Colour (Closed)

    You can also give your Title background a different colour that changes when the drop-down menu collapses.

  8. Expand/Collapse All Button Text Colour

    For the "Expand/Collapse All" button, you can edit the colour here.

  9. Expand/Collapse All Button Border-Colour

    You can also edit the border colour of the "Expand/Collapse All" button.

  10. Expand/Collapse All Button Background Colour

    Here you can edit the background colour for the "Expand/Collapse All" button.

  11. Link Text Colour

    If you have a link added to this page, you can only edit the link colour here.

Font Options:

Title and Content Font Family

Here you can edit the font style of your title/content.

Title and Content Font Size

You can adjust the mobile and desktop font sizes of the title/content simply by adjusting the size bars.

Change Mobile Font Size

If you want to adjust the title and content font size for mobile or desktop, just click on this button; click on it once to change to the mobile size and click on it again to return to the desktop size.

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 be applicable to that option. For example, if you are editing a particular Row (the BLUE box), only every content in that Row will follow the command of what settings you make.

  • Padding Left, Right, Top, and Bottom

This Four (4) different toggle bar moves 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.

Border And Shadow:

Border Options

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 (3) Different styles for your border. It could be a solid, Dashed, or Dotted border.

Width When you increase the border width, it increases the thickness of the border.

Colour To change the colour of the border, click on this colour icon.

Radius Adjusting the radius of your border curves the edges of the border, 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.

Box Shadow

If you want to add depth to your web pages 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, giving your page a more dynamic appearance.

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

You can add a Custom Class to your web page by inputting your desired class name into the dedicated field. This feature helps you to apply custom styles to specific elements of your web page by linking them to style definitions in a stylesheet.

CSS Selector

You can easily copy the Custom CSS code by clicking on the copy icon located on the right side of the reference code. This feature saves you time, making it quick and straightforward to replicate and implement your CSS Selector code across your web page.

Need more help?
โ€‹
Join us for live daily support - Book now.

Did this answer your question?