Use Questionar plugin to add FAQ block

The Questionar is an easy to use WordPress plugin for adding FAQ block to your WordPress site. The widget allows you to create an accordion with main questions in a few simple clicks and customize it according to your design quickly without any coding knowledge.

The main advantage of the Questionar plugin is the function of adding schema markup automatically for your questions block to display advanced results in Google Search. Your users will get more information via the Rich Snippets and you can boost your website in the search engine result pages.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Questionar widget. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the widget Content tab of the Questionar plugin, you can add the questions and descriptions of the FAQ block, manage the icons and enable Rich Snippets option.

Questionar items

Create a new question via “ADD ITEM” button for the accordion block. Type the title and description for each element. There are available copy, delete or move functions.

Adding items block

Questions HTML Tag

Select one of the available tags from the list for the question text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.

Inactive Icon

Select an icon for the inactive (close) section. You can select an icon from the available icon library or upload your own version in SVG format. Click “None” to hide the icon.

Please note, before uploading SVG, go to the Elementor>Settings>Advanced and switch on the Enable SVG Uploads

Enable SVG Uploads Elementor option

Active Icon

Select an icon for the active (open) section. You can select an icon from the available icon library or upload your own version in SVG format. Click “None” to hide the icon.

Please note, before uploading SVG, go to the Elementor>Settings>Advanced and switch on the Enable SVG Uploads

FAQ layout

Select one of the layouts for the FAQ accordion. There are such options “Collapse all”, “Expand first”, “Expand all”.

Expand event

Select the action for collapse/expand event of the accordion element. There are such options “Click”, “Double Click”, “Hover”. The “Expand event” function is hidden when “Expand all” is selected in the FAQ layout.

Collapsible

The toggle to enable/disable the feature for collapse all accordion elements. The “Collapsible” function is hidden when “Expand all” is selected in the FAQ layout.

Rich Snippets

The toggle to enable/disable the Rich Snippets option. The function adds schema markup automatically for your questions block to display advanced results in Google Search. Read more about this https://developers.google.com/search/docs/data-types/faqpage

Style tab

On the widget styles tab of the Questionar plugin, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

Questions

  • Margin – manage the margin of the question text in different units(px, em, %) for desktop, tablets or phones.
  • Padding – manage the padding of the question text in different units(px, em, %) for desktop, tablets or phones.
  • Ink Color– specify the font color and opacity for the text using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Alignment – manage the alignment of the question (left, center, right) for desktop, tablet or mobile.
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
  • Box Shadow – this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Border style – select one of the available border types (hidden, dotted, dashed, solid, double, dashed, groove, ridge, inset, outset) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.

Icons

  • Margin – manage the margin of the icons in different units(px, em, %) for desktop, tablets or phones.
  • Padding – manage the padding of the icons in different units(px, em, %) for desktop, tablets or phones.
  • Alignment – manage the alignment of the icons (left, right).
  • Icon Color– specify the icon color and opacity using the color picker.
  • Size – specify the icon size in different units(px, %) for desktop, tablets or phones.
  • Active Color – specify the icon color and opacity for active elements of the accordion using the color picker.
  • Active Size – specify the icon size for active elements of the accordion in different units(px, %) for desktop, tablets or phones.
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.

Answers

  • Margin – manage the margin of the answer text in different units(px, em, %) for desktop, tablets or phones.
  • Padding – manage the padding of the answer text in different units(px, em, %) for desktop, tablets or phones.
  • Ink Color– specify the font color and opacity for the text using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Alignment – manage the alignment of the answer (left, center, justify, right) for desktop, tablet or mobile.
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
  • Box Shadow – this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Border style – select one of the available border types (hidden, dotted, dashed, solid, double, dashed, groove, ridge, inset, outset) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.

Advanced Tab

The settings in the widget advanced tab of the Questionar plugin allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.