FAQ Element
The FAQ Element lists your frequently asked questions as collapsible items: visitors see the questions and open the answers they need. The questions come from the FAQs post type, so you write each question once and can show it on as many pages as you like.
Questions can be grouped into FAQ categories, filtered with buttons above the list, and limited to certain categories per page. The element can also add FAQ structured data, which helps search engines understand the questions and answers. A change to a question updates every page that shows it.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The FAQ Element
First create your questions under FAQs in the WordPress admin: the title is the question, the content is the answer, and FAQ Categories group them. Then add the FAQ Element to a column. Display Filters shows category buttons above the list, with or without an “All” button. Use Categories and Exclude Categories to choose which questions appear, Number Of FAQ Posts to limit them (-1 shows all) and Order By with Order to sort them; FAQ Order uses the order you set on the questions. Toggles or Accordions decides whether several answers can be open at once.
On the Design tab turn on Boxed Mode to give each item a border and background, or use a Divider Line between items. Set the Title Tag, Title Typography and Content Typography, the Inactive Icon and Active Icon, their size, color, box and alignment, and the hover and active accent colors.
Display Featured Images shows the featured image of a question inside its answer. Post Status can include drafts or scheduled questions, which is useful for checking them before they go live. When Enable Rich Snippets and Rich Snippets FAQ are turned on in the SEO section of Global Options, each question and answer is added to the page as FAQ structured data.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → FAQ. Change them there to style every FAQ at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
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. for example 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, for example 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, for example 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, for example 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. |
Tips
- Leave Post Status empty on public pages. Otherwise questions that are not published yet, such as drafts, can become visible to visitors.
- Choose the Title Tag to fit the page structure. Under an H2 section heading, H3 for the questions keeps the outline correct.
- Write each question the way a visitor would ask it. The same wording is used in the structured data for search engines.
- Use Accordions for long lists, so only one answer is open and the page does not grow too long.
- With FAQ structured data on, avoid showing the same questions on many pages. Search engines expect repeated FAQ content to be marked up once.