Elementor FAQ Section with Supporting Text

This Elementor FAQ section shows a heading with a short supporting text on the left and six questions with their answers on the right. FAQ Offset with Supporting Text is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• A left column with an H2 heading ("Frequently Asked Questions") and a gray supporting sentence with a bold green link (#007A55) to your support page.
• A right column with six questions, each an H3 in navy followed by a gray answer paragraph.
• All answers are visible at once. There is no open and close behavior, which keeps every answer easy to read and index.
• The left column is a little wider than a third of the row, with 2 rem between the two columns.
• Inter font on a white background. On tablet and mobile the heading sits above the questions.

Tip: Write the questions the way your customers ask them, and keep each answer to one or two sentences. If an answer needs more room, link to a full page from the answer or the support link.

Requirements

• A recent version of Elementor with Flexbox Container and Grid Container available.
• No Elementor Pro required.
• The Inter font available on your site (otherwise a fallback font is used).
• Your own questions, answers, and a support page to link to.

Note: The questions and answers are sample content about orders, delivery, returns, and payment, so replace them with your real policies before publishing. The support link points to #, so set a real URL. The left column width uses a custom grid value, so on an older version of Elementor the two columns may split the width equally instead. The answers are Heading widgets set to the P tag, which works but is not a Text Editor widget. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

Element	Purpose	Pro?
Grid Container	Main two-column layout (1 in total)	No
Flexbox Container	Heading group, question list, and each question and answer pair (8 in total)	No
Heading	Section title, questions, and answers (13 in total)	No
Text Editor	Supporting sentence with the support link (1 in total)	No

Frequently Asked Questions

How do I import this Elementor JSON template?

First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.

Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.

How do I change the questions and answers?

Click a question or an answer and type your own text. The question is a Heading widget with the H3 tag, and the answer is a second Heading widget below it. To change colors or sizes, select the widget and open the Style tab.

How do I change the support link?

Click the supporting sentence, then select the words "customer support" in the text editor and edit the link with the link button in the toolbar. Enter your contact page, help center, or email address as the new URL.

How do I add or remove a question?

Duplicate one question and answer pair inside the right column to add a question, or delete a pair to remove one. Each pair is its own container, so the question and its answer move together and the 2.5 rem gap between pairs is kept.

Can I make the answers open and close?

This block shows every answer at once. If you want collapsible answers, replace the right column with Elementor's Accordion widget and copy your questions and answers into it. Keep the left column as it is.

How does the layout change on tablet and mobile?

On tablet and mobile, the main grid becomes one column, so the heading and supporting text sit above the questions with 2.5 rem of space between them. The section padding is reduced and the heading becomes smaller on mobile.

Where should I place this FAQ section?

Place it near the end of a page, after pricing or a call to action, where visitors look for last answers. Because its heading is an H2, use it after the page's H1 and main content.

Do I need Elementor Pro?

No. The block only uses native Heading and Text Editor widgets inside Flexbox and Grid containers.

Why won't the file import?

Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.

Why do the Flexbox or Grid settings look different or missing?

Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.

Why does the font look different?

The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.

Looking for more FAQ sections? Browse all Elementor FAQ section templates, or see every free block in Elementor Templates.