FAQ Element

Last Update: March 25, 2026

The Avada FAQ Element lets you display frequently asked questions in a clear, organized way on your website. It pulls FAQ items into the site’s page or post layout and presents them in an interactive format, helping visitors find answers quickly without leaving the page.

The Element is especially useful for support pages, product information, service explanations, or any content where common questions come up. Keeping answers neatly structured improves usability and reduces confusion for visitors.

The FAQ Element also includes styling and layout options, so you can match it to the rest of your site’s design while keeping the content easy to read and navigate. Watch the video below for a visual overview of the Avada Element and read on to see the full list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The FAQ Element

The Avada FAQ Element lets you add a custom range of items from your FAQ Custom Post Type anywhere in 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, multiple categories, or exclude categories. There are also various ways of sorting the FAQs, and they can be treated as Toggles or Accordions. There are also several styling options, such as size, color, icons, and alignment. Once you have completed styling your FAQ Element, remember to save your changes.

Element Options

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 option screens below display all 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

Heading		Description
Display Filters		Display the FAQ filters.
Number Of FAQ Posts		Select the maximum number of FAQ posts. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Post Status		Select the status(es) of the posts that should be included or leave blank for published only posts.
Categories		Select categories to include or leave blank for all.
Exclude Categories		Select categories to exclude.
FAQ Offset		The number of FAQ posts to skip. ex: 1.
Order By		Defines how FAQs should be ordered.
Order		Defines the sorting order of FAQs.
Display Featured Images		Display the FAQ featured images.
Toggles or Accordions		Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
Inactive Icon		Click an icon to select, click again to deselect.
Active Icon		Click an icon to select, click again to deselect.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Boxed Mode		Choose to display FAQs items in boxed mode.
Boxed Mode Border Width		Set the border width for FAQ item. In pixels.
Boxed Mode Border Color		Set the border color for FAQ item.
Boxed Mode Background Color		Set the background color for FAQ item.
Divider Line		Choose to display a divider line between each item.
Divider Line Color		Set the color for divider line.
Toggle Padding		Set the padding for toggle items. Enter values including px or em units, ex: 20px, 2.5em.
Title Tag		Choose HTML tag of the FAQ item title, either div or the heading tag, h1-h6.
Title Typography		Controls the typography of the title text. Leave empty for the global font family.
Icon Size		Set the size of the icon. In pixels, ex: 13px.
Icon Color		Set the color of icon in toggle box.
Icon Boxed Mode		Choose to display icon in boxed mode.
Icon Inactive Box Color		Controls the color of the inactive toggle box.
Icon Alignment		Controls the alignment of FAQ icon.
Content Typography		Controls the typography of the content text. Leave empty for the global font family.
FAQ Toggle Hover Accent Color		Controls the accent color on hover for icon box and title.
FAQ Toggle Active Accent Color		Controls the accent color on active for icon box and title.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.