How to Create Collapsible FAQ in WordPress

Updated: April 7, 2021

If you use your WordPress site to market your product (digital product in particular), one of the crucial elements you need to add is FAQ (Frequently Asked Questions). You can add the FAQ element whether to the about page, contact page, or any page on your website. But the best practice is to create a dedicated FAQ page and add the FAQ element right there. To make your FAQ page looks more attractive, you can set each FAQ item to be collapsible. There are a bunch of WordPress plugins that you can use to create collapsible FAQ. In this post, we will show you to create collapsible FAQ in WordPress using Elementor.

Elementor itself is the most popular page builder plugin for WordPress. You can use it to create collapsible FAQ as it comes with an element (called widget) to do so. If you are not into Elementor, two Elementor alternatives you can use are Divi Builder and Brizy. These two page builders also come with an element to create collapsible FAQ.

How to Create Collapsible FAQ in WordPress Using Elementor

Elementor is released as a freemium plugin. To be able to create collapsible FAQ using it, you need to use the pro version as the widgets to do so are only available on Elementor Pro. You can get Elementor Pro on its official website. There are two widgets that you can use to create collapsible FAQ:

  • Accordion
  • Toggle

Here is the example of the collapsible FAQ created with Elementor.

There are two options to add a FAQ section in Elementor. First, you can add one from a ready-made template (Elementor offers some ready-made FAQ section templates). Second, you can add the FAQ from scratch.

By the way, if you are new to Elementor, you can read an article on WP Pagebuilders to learn how to use Elementor.

Adding FAQ from a Premade Template

Before getting started, make sure you have installed and activated Elementor Pro on your WordPress site. Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor. On the Elementor editor, click the folder icon to open the template library.

On the template library window, click the Blocks tab and select FAQ category to filter the templates. Select an FAQ template you like and click the INSERT button to import it to the canvas area.

Once the template is imported, click the widget used on the template (Toggle or Accordion) to edit the content. You can edit the content on the Toggle/Accordion block under the Content tab. If you want to add more items, you can simply click the ADD ITEM button.

You can go to the Style tab on the settings panel style up the FAQ. Once you are done editing your page, you can publish it by clicking the PUBLISH button on the bottom side of the settings panel.

Adding FAQ from Scratch

If you prefer to add the FAQ from scratch instead of from a template, you can simply drag the Toggle widget or the Accordion widget to the canvas area.

Once the widget is added, you can go to the settings panel to edit the content. Same as the first method above, you can also edit the content on the Accordion/Toggle block under the Content tab on the settings panel. From this tab, you can also set the icon for each state (normal and active).

To style up the FAQ, you can go to the Style tab. Once you are done editing your page, you can publish your page.

Adding the FAQ to Gutenberg

While Elementor allows you to create a beautiful FAQ page more effortlessly thanks to its intuitive visual editor, you might prefer to create your FAQ page using Gutenberg. You can add the FAQ section you have just created above to Gutenberg with the help of the Elementor Blocks for Gutenberg plugin. It is an official plugin from Elementor to convert an Elementor template into a Gutenberg blog.

First, make sure you have installed and activated the Elementor Blocks for Gutenberg plugin on your WordPress site. Next, save the Toggle widget or Accordion widget (depending on which widget you use to create the collapsible FAQ) as a global widget. To do so, right-click the widget and select Save as Global.

Give your template a name and click the SAVE button.

Create a new page (Pages -> Add New). On the Gutenberg editor, add a new block and select Elementor Library and select the collapsible FAQ widget you have just created.

Publish your page once you are done editing it.

The Bottom Line

FAQ is a common element found on a website. In most cases, this element is found on the help page or FAQ page although you might also find it on an about page or even homepage of a website. Creating collapsible FAQ is a great idea to offer a better experience to your visitors. Also, it can save some space on your page. Elementor is one of the plugins that you can use to create collapsible FAQ. You can even use it to create the whole FAQ page as it is basically a page builder plugin. There are ready-made FAQ section templates you can use to save you time in creating the FAQ page using Elementor.

This page may contain affiliate links, which help support utilizeWP.

Boost your site speed with the best caching plugin in the world

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This