The FAQ element displays a list of questions and answers as a collapsible accordion or a grid of cards. It also adds FAQPage structured data (schema.org) to the page automatically, combining every FAQ element on that page into one script, which helps search engines show your questions directly in search results.
In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements, then select FAQ.
Content tab
| Questions |
Add one or more questions. Each question is its own item with a Question, Answer, optional image and optional link. |
| Show the image |
Show or hide the image field on every question without deleting the content itself. |
| Show the link |
Show or hide the link field on every question without deleting the content itself. |
Question item
| Question |
The question text, shown as the accordion or card title. |
| Answer |
The answer text. Supports rich text formatting. |
| Image |
Optional image for this question, shown when "Show the image" is enabled. |
| Focal Point |
Set which part of the image stays visible when it's cropped. |
| Link / Link Text |
Optional link with its own text, shown when "Show the link" is enabled. |
Settings tab
| Layout |
Accordion (questions expand one at a time) or Grid (questions shown as cards). |
| Allow multiple open items |
Accordion only. Let visitors have more than one question open at the same time. |
| Start with all items closed |
Accordion only. All questions are collapsed when the page loads. |
| Title Style / Decoration / Color / HTML Element |
Grid layout only. Style the question title and choose its heading level. |
| Content Style / Drop Cap / Columns / Column Divider / Columns Breakpoint |
Style the answer text and optionally split it into multiple text columns. |
| Image Width/Height / Loading / Border / Alignment / Grid Width / Column Gap / Row Gap / Grid Breakpoint / Vertical Alignment / Margin Top / Inline SVG / SVG Color |
Size, position and style the optional question image. |
| Link Text / Attributes / Download / Nofollow / Noreferrer / Style / Button Size / Full width button / Margin Top |
Style the optional link or button. |
| Grid Columns (Phone/Tablet/Desktop/Large Screens) / Column Gap / Row Gap / Divider / Alignment |
Grid layout only. Set how many cards appear per row at each screen size and the spacing between them. |
| Panel Style / Link Panel / Hover Style / Padding |
Grid layout only. Give each question card a boxed or tile background style. |
| Position, Margin, Max Width, Alignment, Text Alignment, Animation, Visibility |
The usual layout options shared by all Builder elements. |
| CSS |
Custom CSS for this element. Selectors .el-element, .el-item, .el-title, .el-content, .el-image and .el-link are prefixed automatically. |