FAQs

Description

FAQ modules display Help & Support posts as accordions. Depending on the variant, questions can be grouped into tabs, shown as a single list, or grouped into accordions that link out to other pages.

How to edit

Manage the questions and answers themselves under Help & Support (see Help & Support data).
Go to Elementor → Editor → Templates.
Search for FAQs (or a word from the specific template name below).
Open the template and edit the content and widgets directly.
Save, then check a page that uses the template.

Do not remove the Loop Grid or Dynamic Posts widgets without a developer, as these are what pull the questions onto the page.

Variants

Sections

Template	What it is
`CK – FAQs global – with tabs`	Questions grouped into tabs
`CK – FAQs global – no tabs`	All questions in a single list
`CK – FAQs – internal links`	Categories as accordions that list links to related pages

Question components

These are the individual accordion items that the sections above display. You only need to edit them if the look of a question needs to change:

Template	What it is
`CK – FAQs – Question component`	Used by the tabbed version
`CK – FAQs – Question component no tabs`	Used by the no-tabs version — the name has a double space before "tabs"

With tabs

The categories are built with Elementor's Tabs widget, so each category is simply a tab.
Tab titles are typed directly into Elementor. You can name them whatever suits the page and add as many as you need.
Each tab contains its own Loop Grid widget, which lists the questions for that tab.
Each question in the grid is an accordion, built from the CK – FAQs – Question component template — the question is the accordion title and the answer is the accordion content.
The tab bar displays as a horizontal pill bar, and the selected tab gets a white background and a subtle shadow.
On desktop the accordion items have rounded corners, a light grey background, and a grey border. On mobile the corners are slightly tighter and the padding reduces.

Adding or renaming a tab

Open CK – FAQs global – with tabs in Elementor.
Select the Tabs widget.
On the Content tab, add a tab item or select an existing one, and type the title you want.
Add a Loop Grid widget inside the new tab and choose the questions it should show (see below).

New tabs pick up the pill styling automatically, so there is nothing to set up visually.

Choosing which questions appear in a tab

Because each tab has its own Loop Grid, the questions are chosen by hand. Any question can go under any tab — the tabs are not tied to the Help & Support categories — and the same question can appear under more than one tab if that is useful.

Open CK – FAQs global – with tabs in Elementor.
Select the tab you want to change, then select the Loop Grid widget inside it.
Go to the Content tab, then Query.
Use Search & Select to choose which questions appear.

Filtering by category in the Query settings is a handy way to narrow down the list you are picking from, but it does not decide which tab a question belongs to.

No tabs

Displays Help & Support posts using a Loop Grid widget.
There are no tabs, so all of the selected questions appear in a single list.
Each item uses the CK – FAQs – Question component no tabs template, with the same accordion styling as the tabbed variant.
Use this variant when categories are not needed, or when the page is already about one specific topic.

Internal links

A two-column layout: a header column (up to 533px wide on desktop) and a content column (up to 755px wide on desktop).
The content column contains an accordion where each item represents a Help & Support category.
Each accordion item contains a Dynamic Posts widget. In that widget's Query Filter settings, set the category to match the accordion title — for example, an accordion titled "Getting Started" uses the Query Filter term QMC and Getting Started. This limits the links inside each accordion to that category.
For Useful Forms, use a combination of category and field value:
- Terms and taxonomy → QMC or QC
- Meta key → Document type [radio] = form
Each link row shows the page title on the left and an arrow icon on the right, separated by a light grey divider. The last row has no divider.
Accordion items have rounded corners, a light grey background, and a grey border. The titles are maroon, 24px, semi-bold.
On mobile, padding reduces, the title drops to 20px, and the header aligns left instead of centre.
Accordion titles have to be typed to match the category name — for example "Getting Started", "Managing Your Account", "Retailers", or "Q Plan". They are not filled in automatically.

Classes

Primary classes used by the FAQs component:

Class	What it's for
`ck-faqs`	Main wrapper
`ck-faqs__header`	Heading, intro text, and CTA button
`ck-faqs__loop-faqs`	Loop Grid wrapper for FAQ posts
`ck-faqs__accordion`	Accordion inside each grid item
`ck-faqs__faqs-content`	Content column within a grid item
`ck-faqs__with-tabs`	Variant class for the tabbed version
`ck-faqs__internal-links`	Internal links section wrapper
`ck-faqs__internal-links-accordion`	Accordion for the internal links
`ck-faqs__qcard` / `ck-faqs__qmastercard`	Show content for one product only

No IDs are used by the FAQs component.

The tab bar itself uses Elementor's own tab classes (e-n-tabs-heading and e-n-tab-title) rather than a custom class. The pill styling is applied to those classes inside ck-faqs, which is why any tab you add is styled automatically.

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.

FAQs

On this page