FAQ Element in Funnel and Website Builder

The FAQ element can be used for FAQs or anytime you have a list of items you want for your users to be able to expand to learn more.

In This Article:

To add the FAQ element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Media section, select the FAQ element and drag it to the desired location on the page.

Example of FAQ Element

You will type your questions and answers directly into the FAQ element on the page just like you would with any other text. However, you can add, clone and delete items from the FAQ general options panel to the right.

General Options

  • FAQ Type: The FAQ Element in FG Funnels comes with three different styles:

    • Separated: Each item is contained in it's own box with a light outline, one on top of each other.

      Separated FAQ Style

    • Contained: The entire box is outlined as one box and each item has a divider between it and the next item.

      Contained FAQ Style

    • Simple: There is a divider between each item but no outline/border fully around each item.

      Simple FAQ Style


  • FAQ List- The FAQ list can be used to modify each FAQ:

    FAQ List Items

    • You can reorder items by clicking the stacked horizontal lines to the left of the list item and dragging it to a different place on the list.
    • Add a new item directly below an existing item by clicking the plus sign to the right of the name.
    • Clone list items with the middle icon that is a box with a top and left border. This will duplicate the exact same item underneath.
    • Delete an item with the trash can icon.

  • Images- There is an option to have an image in each FAQ. When you click on a list item from the FAQ list above, an Image Options box will appear below. From here you can either uncheck to remove the image, paste in an image URL or open your media library to select or upload an image.

    Image Options in FAQ


Styling Options

All styling options for the FAQ elements are under the advanced tab. There are a number of different options boxes here.

FAQ Advanced Panel

Custom Options:

  • Choose icons for open and closed states.
  • Select icon position,
  • Choose line height.
  • Set expand/collapse settings.
  • Decide if the first item should be open on load.
  • Choose whether images should show as a popup on click.

Font Options:

  • Select font family, size, and weight for titles and content.

Color Options:

  • Set colors for title text and backgrounds in both open and closed states.
  • Set color for separator lines.
  • Set content text color and background color.
  • Set Expand/Collapse button colors
  • Set link color.

Margin and Padding:

  • There is a setting to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.

Shadow:

  • You can add a box shadow to add more depth to your items. These has different settings to make it more/less prominent, adjust placement and adjust colors.

Border and Shadow:

  • You can set a border, border style, width and color.
  • You can set a border radius to round corners and select whether it should be applied to all edges or just top or just bottom.

Visibility and Custom Class:

  • Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
  • Custom classes and CSS selectors can be used for CSS changes.