FAQ Element

24/07/2022

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.

Vivamus quis nunc quis nibh elementum pellentesque non luctus lectus2019-04-01T19:15:34+00:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id eros neque. Vestibulum erat nulla, porta pretium ultrices at, accumsan quis elit. Sed ligula nulla, gravida ut tempus a, pharetra et lacus. Suspendisse potenti. Fusce pellentesque augue sit amet ipsum mattis dignissim. Curabitur fringilla neque eu ligula pellentesque tempus. Fusce elementum lectus eget odio porttitor ut tincidunt nibh iaculis. Donec lacus est, mollis ut bibendum ac, adipiscing at dui. Cras porttitor neque eget orci pulvinar consequat. Cras vestibulum leo fermentum tellus ullamcorper vestibulum.

 

Praesent tellus justo, euismod sed iaculis vel, fringilla vel sapien. Praesent sed mi neque2019-04-01T19:15:44+00:00

Pellentesque neque urna, accumsan quis volutpat ut, hendrerit et sapien. Nulla lobortis aliquam nisl et lacinia. Nulla facilisi. Ut nisi nulla, ultrices ut viverra sit amet, sagittis quis purus. Nunc eget nibh lorem. Quisque ac leo ut est semper varius. Nullam sit amet semper odio. Vestibulum tempor hendrerit vehicula. Pellentesque et felis odio, eget gravida enim. Donec dapibus erat vel quam tristique volutpat. Sed congue dignissim enim non feugiat. Praesent sit amet venenatis velit. Nulla luctus libero non diam porta aliquam lobortis mi pulvinar.

Donec vehicula molestie augue mi dignissim at. Etiam augue massa, condimentum.2019-04-01T19:15:53+00:00

Nunc sit amet sapien eu urna viverra interdum eu ut ipsum. Pellentesque vulputate leo quis metus ullamcorper dapibus. Nam ac tortor a augue ultrices sagittis. Maecenas tempor justo eu leo euismod eget sollicitudin sem facilisis. Curabitur vitae elit nec diam bibendum sagittis quis vitae leo. Curabitur mollis est ut quam accumsan in luctus est aliquam. Etiam a eros neque. Aliquam bibendum, turpis a congue aliquam, enim nibh pharetra elit, eu adipiscing tellus dolor non est. Mauris faucibus, nisi quis pulvinar aliquet, lorem turpis vulputate elit, quis elementum nisl purus id nisi. Suspendisse et purus ut turpis tempor pellentesque.

Vivamus quis magna enim. Aliquam urna mi, aliquet ac dictum non, dapibus vitae erat.2019-04-01T19:16:01+00:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id eros neque. Vestibulum erat nulla, porta pretium ultrices at, accumsan quis elit. Sed ligula nulla, gravida ut tempus a, pharetra et lacus. Suspendisse potenti. Fusce pellentesque augue sit amet ipsum mattis dignissim. Curabitur fringilla neque eu ligula pellentesque tempus. Fusce elementum lectus eget odio porttitor ut tincidunt nibh iaculis. Donec lacus est, mollis ut bibendum ac, adipiscing at dui. Cras porttitor neque eget orci pulvinar consequat. Cras vestibulum leo fermentum tellus ullamcorper vestibulum.

Nunc molestie porttitor urna rhoncus posuere. Etiam sed tortor vestibulum nulla ultricies sodales quis id turpis. Nulla laoreet euismod mattis. Proin felis ipsum, elementum faucibus ultrices et, vestibulum vitae orci. Curabitur congue vulputate orci, a commodo mauris consectetur vitae. Quisque sit amet arcu sit amet mi porttitor varius in quis felis. Duis sit amet est urna. Phasellus nulla est, tincidunt quis posuere volutpat, convallis ac risus. Ut in massa arcu, eu feugiat neque.

Class aptent taciti sociosqu ad litora torquent per conubia nostra pers.2019-04-01T19:16:09+00:00

Vestibulum egestas pharetra felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dignissim bibendum lectus, quis ornare tortor elementum quis. Aenean semper vehicula elementum. Nulla massa est, faucibus non semper quis, laoreet et sapien. Suspendisse massa odio, aliquet nec commodo et, venenatis ut velit. Pellentesque mauris lorem, dictum vitae feugiat quis, placerat vitae eros. Vestibulum quis purus vel urna convallis faucibus. Etiam vel mauris nisi, non vehicula est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam leo lorem, tincidunt sed molestie id, egestas feugiat quam. Aliquam sed ipsum non nulla tempus mollis elementum ac dolor. Curabitur ac metus et enim pellentesque pellentesque. Nunc ultrices, felis elementum iaculis semper, libero turpis semper erat, in dapibus nisi urna vel mi. Nulla sed nibh libero. Maecenas a libero mauris, sed malesuada dui.

Nunc euismod lobortis massa, id sollicitudin augue auctor vel. Integer ornare sollicitudin turpis vitae vestibulum. Curabitur faucibus ullamcorper lorem sed egestas. Pellentesque laoreet auctor eros, et consectetur eros auctor eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tortor nisi, egestas eget molestie tincidunt, tempus sed justo. Vestibulum ultricies auctor varius. Fusce consequat tincidunt dui, ac adipiscing turpis adipiscing pulvinar. Aliquam erat volutpat. Vivamus eleifend rhoncus nulla in laoreet.

Curabitur eget leo at velit imperdiet varius eu ipsum vitae velit congue iaculis vitaes.2019-04-01T19:16:17+00:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

View Element Demo Page!

Overview

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. Be sure to visit the Element Demo page to get a good idea of what’s possible with this element.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Alert from the Elements List.

Step 4. 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 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.

Step 5. Once you have completed styling your FAQ Element, save your changes..

Read below for a detailed description of all element options.

Avada Website Builder

833,780 Businesses Trust Avada

Get Avada
Avada Website Builder

833,780 Businesses Trust Avada

Get Avada
Avada Website Builder

833,780 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Display Filters – Choose to display the FAQ filters, or not. Choose from Default, Show, Show without “All”, or Hide.

  • Number of FAQ Posts – Select the maximum number of FAQ elements. 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.

  • Categories Select categories to include or leave blank for all.

  • Exclude Categories – Select categories to exclude.

  • Order By – Defines how FAQs should be ordered. Choose from Date, Post Title, FAQ Order, Post Slug, Author, Last Modified, or Random.

  • Order – Defines the sorting order of FAQs. Choose from Descending, or Ascending.

  • Display Featured Images – Select whether to display the FAQ featured images. Choose from Default, Yes, or No.

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

  • MarginIn pixels or percentage, ex: 10px or 10%.

  • Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class to the wrapping HTML.

  • CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Design Tab

  • Boxed Mode – Select whether to display FAQs items in boxed mode. Choose from Default, Yes, or No.

  • Boxed Mode Border WidthSet the border width for FAQ item. In pixels. Default currently set to 1. (Only if Box Mode set to Yes)

  • Boxed Mode Border ColorSet the border color for FAQ item. Leave empty for default value. (Only if Box Mode set to Yes)

  • Boxed Mode Background ColorSet the background color for FAQ item. Leave empty for default value. (Only if Box Mode set to Yes)

  • Boxed Mode Background Hover ColorSet the background hover color for FAQ item. Leave empty for default value. (Only if Box Mode set to Yes)

  • Divider Line – Choose to display a divider line between each item.

  • Divider Line Color – Set the color for divider line.

  • Divider Line Hover Color – Set the hover color for divider line.

  • Title TagChoose HTML tag of the FAQ item title, either div or the heading tag, h1-h6.

  • Title Typography

  • Font Family – Controls the typography of the title text. Leave empty for the global font family.

  • Font Size – The font size for the title. Use any valid CSS unit.

  • Line Height – Controls the line height for the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

  • Font Color – Select the font color for the title.

  • Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

  • Icon Color – Set the color of the icon in the 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. Choose between Default, Left, or Right.

  • Content Typography

  • Font Family – Controls the typography of the title text. Leave empty for the global font family.

  • Font Size – The font size for the title. Use any valid CSS unit.

  • Line Height – Controls the line height for the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Letter Spacing – Controls the letter spacing of the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Text Transform – Select how the text is displayed. Choose from Default, None, Uppercase Lowercase or Normal.

  • Font Color – Select the font color for the content.

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

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > FAQ

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • FAQ Featured Images – Turn on to display featured images.

  • FAQ Filters – Controls how the filters display for FAQs. Choose from Show, Show without “All”, or Hide.

  • FAQs in Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

  • FAQ Items in Boxed Mode – Turn on to display items in boxed mode. FAQ Item divider line must be disabled for this option to work.

  • FAQ Item Boxed Mode Border Width – Controls the border size of the FAQ item. In pixels. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Boxed Mode Border Color – Controls the border color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Boxed Mode Background Color – Controls the background color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Boxed Mode Background Hover Color – Controls the background hover color of the FAQ item. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Divider Line – Turn on to display a divider line between each item. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Divider Line Color – Controls the color for divider line.

  • FAQ Item Divider Line Hover Color – Controls the hover color for divider line.

  • FAQ Item Title Typography

  • Font Family – Controls the typography of the title text. Leave empty for the global font family.

  • Font Size – The font size for the title. Use any valid CSS unit.

  • Line Height – Controls the line height for the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

  • Font Color – Select the font color for the title.

  • FAQ Item Icon Size – Set the size of the icon. In pixels.

  • FAQ Item Icon Color – Controls the color of icon in FAQ box.

  • FAQ Item Icon Boxed Mode – Turn on to display icon in boxed mode.

  • FAQ Item Icon Inactive Box Color – Controls the color of the inactive FAQ box. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • FAQ Item Content Typography

  • Font Family – Controls the typography of the title text. Leave empty for the global font family.

  • Font Size – The font size for the title. Use any valid CSS unit.

  • Line Height – Controls the line height for the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Letter Spacing – Controls the letter spacing of the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

  • Font Color – Select the font color for the content.

  • FAQ Item Icon Alignment – Controls the alignment of the icon.

  • FAQ Item Icon Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.

  • FAQ Item Icon Toggle Active Accent Color – Controls the accent color on active for icon box and title.

View The Options Screen
Avada Website Builder

833,780 Businesses Trust Avada

Get Avada
Avada Website Builder

833,780 Businesses Trust Avada

Get Avada
Avada Website Builder

833,780 Businesses Trust Avada

Get Avada
Go to Top