FAQ Element

Last Update: March 19, 2024

With the FAQ Element, you can quickly and easily create a list of FAQs for your visitors. FAQs can be used on any page or post. Read below for more details on this very useful element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The FAQ Element

The FAQ Element allows you to add a customized range of your FAQ Custom Post Type items anywhere into your content.

For this element to work, you must have previously created FAQ items in the FAQ Custom Post Type, found on your main WordPress menu. Once you have FAQs, (and these can also be sorted into categories) you can use the FAQ Element to quickly place them throughout your content. You can add a single category or multiple categories, or you can exclude categories. There are also various ways of sorting the FAQs, and they can be treated as Toggles or Accordions. There are also a number of other styling options about size, color, icons, and alignment.

Once you have completed styling your FAQ Element, remember to save your changes.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Avada > Options > Avada Builder Elements > FAQ section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Display FiltersDisplay the FAQ filters.
Number Of FAQ PostsSelect the maximum number of FAQ posts. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Post StatusSelect the status(es) of the posts that should be included or leave blank for published only posts.
CategoriesSelect categories to include or leave blank for all.
Exclude CategoriesSelect categories to exclude.
Order ByDefines how FAQs should be ordered.
OrderDefines the sorting order of FAQs.
Display Featured ImagesDisplay the FAQ featured images.
Toggles or AccordionsToggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
Inactive IconClick an icon to select, click again to deselect.
Active IconClick an icon to select, click again to deselect.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Boxed ModeChoose to display FAQs items in boxed mode.
Boxed Mode Border WidthSet the border width for FAQ item. In pixels.
Boxed Mode Border ColorSet the border color for FAQ item.
Boxed Mode Background ColorSet the background color for FAQ item.
Divider LineChoose to display a divider line between each item.
Divider Line ColorSet the color for divider line.
Toggle PaddingSet the padding for toggle items. Enter values including px or em units, ex: 20px, 2.5em.
Title TagChoose HTML tag of the FAQ item title, either div or the heading tag, h1-h6.
Title TypographyControls the typography of the title text. Leave empty for the global font family.
Icon SizeSet the size of the icon. In pixels, ex: 13px.
Icon ColorSet the color of icon in toggle box.
Icon Boxed ModeChoose to display icon in boxed mode.
Icon Inactive Box ColorControls the color of the inactive toggle box.
Icon AlignmentControls the alignment of FAQ icon.
Content TypographyControls the typography of the content text. Leave empty for the global font family.
FAQ Toggle Hover Accent ColorControls the accent color on hover for icon box and title.
FAQ Toggle Active Accent ColorControls the accent color on active for icon box and title.

In this article