# FAQ

FAQ (Frequently Asked Questions) empowers customers to self-serve, enabling them to find solutions quickly on their own.

FAQ Element allows you to add to your funnel a list of answers or information to typical questions/concerns your customers might have related to your business/services.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-2a90908c8afbf4dabe9f6798bbda887c76861dd0%2FFAQ.png?alt=media)

You can edit your texts using these text formats here;

1. 1\.

   **Bold** \*\*\*\*When you click on this format, it allows you to bold your highlighted text.
2. 2\.

   This format allows you to slant your text.
3. 3\.

   This format allows you to cross/strike your text.
4. 4\.

   You can underline your text by clicking on the format.
5. 5\.

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

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

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

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

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

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

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

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

    **Clear Format** \*\*\*\*To clear out/delete any of the format choices you made, simply click on this button

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-4872bf1d5fc70226cf973e24758eccbcb6bfd9e1%2FFAQ%20-%20Text%20Format.png?alt=media)

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-7efc48ed55acd5ff180317daf58a81351f0be6c9%2FFAQ%20-%20Title%20name.png?alt=media)

Here you can select the type of FAQ you want; how you want the list of your FAQ to look.

In this type, the lists are separated from each other and have the drop-down button on the right side of each list, away from the list title

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-451a2c45874ef6c3cfa5538a63a5c508c32d0533%2FFAQ%20-%20Type%20-%20Saparation.png?alt=media)

In this type, the lists are not separated from each other and have the drop-down button on the right side of each list, away from the list title

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-65f8ed259faab3a6a1ea76a3d125ede9952be8f1%2FFAQ%20-%20Type%20-%20Contained.png?alt=media)

In this type, the lists are not separated from each other but have the drop-down button on the left side of each list, before the list title

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-67d1919e4f83123fe48caaa64b7f3ac94296663b%2FFAQ%20-%20Type%20-%20Simple.png?alt=media)

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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-b4fa2ab101366f15bd415c57c956dc13f2bb80dd%2FFAQ%20-%20List.png?alt=media)

Below are the edits you can make;

When you click on the "+" button, it adds a new list for you.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-65ab0f807818f46f094d0b51287dfb29d67fc1fe%2FFAQ%20-%20List%20-%20Add%20new.png?alt=media)

When you want to duplicate a list you already created, click on the "Copy/Clone" button.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-b2bfccd2b8351a25a0c6c4668e6a91028744c0b7%2FFAQ%20-%20List%20-%20duplicate.png?alt=media)

You can delete a list by clicking on the "delete" button. When you delete it, the list numbering doesn't re-arrange itself although it doesn't affect anything.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-2297502aa474cf7046aa7a500bd252f62cafd28e%2FFAQ%20-%20List%20-%20Delete.png?alt=media)

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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-e7c716b3d52a40bedae3429d1e289e0376210794%2FFAQ%20-%20List%20-%20Arrange%20\(1\).png?alt=media)

In the Image option, you can decide to add an image or disable it by toggling on or off the image button.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-2fe09e8215151370699559b9e7a25ce59d74d42e%2FFAQ%20-%20List%20-%20Image%20Option2.png?alt=media)

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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-eb6f482181f03e480aa1add07f37e889299a64cb%2FFAQ%20-%20List%20-%20Image%20Option.png?alt=media)

* 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".
* 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".
* You can position the icon on either the right or left side of the list. You can only make one choice for all lists.
* 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 your image to pop up when it's clicked on, toggle this button.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a2ad27c1aef9342c44098ac5a3960bb6d1656fb4%2FFAQ%20-%20Type%20-%20Custom%20option.png?alt=media)

1. 1\.

   You can edit the color of your Title text which changes the text when the menu drops down.
2. 2\.

   **Title Background Color (Open)**

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

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

   You can edit the color of your content text here.
5. 5\.

   You can also edit the background color of your content here.
6. 6\.

   **Title Text Color (Closed)**

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

   **Title Background Color (Closed)**

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

   **Expand/Collapse All Button Text Color**

   For the "Expand/Collapse All" button, you can edit the color here.
9. 9\.

   **Expand/Collapse All Button Border-Color**

   You can also edit the border color of the "Expand/Collapse All" button.
10. 10\.

    **Expand/Collapse All Button Background Color**

    Here you can edit the background color for the "Expand/Collapse All" button.
11. 11\.

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-ac568fc63533a659c65c6f08b30a470c48d2ccdc%2FFAQ%20-%20Color%20option.png?alt=media)

**Title and Content Font Family**

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c420a02d39046a8de99da2e4b22ff49cd7149bf6%2FFAQ%20-%20Font%20family.png?alt=media)

**Title and Content Font Size**

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

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0b86454dcb42da05c5831527ebcc9e2c64e49851%2FFAQ%20-%20Font%20size%20family.png?alt=media)

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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a2e93c50f2f113fca74efdd8a42dd7e6faa06eb6%2FFAQ%20-%20Change%20mobile.png?alt=media)

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.
* You can adjust the top or bottom margin of your content by toggling its bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0d446a271743fa1a45fa696ca1243e656a6fd447%2FFAQ%20-%20Spacing%20Option%20\(1\).png?alt=media)

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

**Color** \*\*\*\*To change the color of the border, click on this color 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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-01aef3be683398d733faf9461645d5d7548090ed%2FFAQ%20-%20Border%20\(1\).png?alt=media)

If you want your box to have a shadow, simply select how strong or light you want the shadow to be.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-5641b61485980300e564ac71061d6ae919d56fd9%2FFAQ%20-%20Shadow%20\(1\).png?alt=media)

#### Visibility & Custom Class: <a href="#visibility-and-custom-class" id="visibility-and-custom-class"></a>

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.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-f6a6eb65832ca92c7dc0b203f18f8725643c03a9%2FFAQ%20-%20visibility.png?alt=media)

Input your custom class here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a05ad8b7a5097e6fcd68ca1c4cce4680b62f917f%2FFAQ%20-%20custom.png?alt=media)

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-ab816dcb2ac80eec4a97cb08fb487d4f1d51618a%2FFAQ%20-%20CSS.png?alt=media)
