FAQ/Accordion

This widget allows for quick and easy creation of FAQ sections. The widget uses an accordion format for displaying questions and answers, where panels expand and collapse to show content within. This widget may be used for many things beyond basic FAQ’s.

Setup

QUESTION & ANSWER CONTENT

  • Place the widget onto your page.
  • Open the widget option panel.
  • The widget is pre-populated with 3 questions and answers.
  • Edit the existing content with your own. Select a “List item” to display the Question and Answer text editors.
  • Enter your Question and Answer text content into these boxes. These are full text editors that allow for bullet lists, paragraph breaks, styling of individual words, and more.
  • To add new List items, click the “Add question” link below the list items.
  • To remove a List item, click the “x” on the right side of the List item.

TITLE / QUESTION STYLING

  • The Title / Question Text Style and Title / Question Background Style sections contain all of the styling for the Titles / Questions.
  • These settings are self-explanatory and do as the settings suggests.
  • Note that these settings apply to the Titles / Questions only. To style the Answer text, see the sections below.
  • Note: The Title / Question Background Style can be a solid color or an image. If using an image, the image should be appropriate for a wide and narrow space. The same image will be used for all Titles / Questions.

ANSWER STYLING

  • The Answer Text Style and Answer Background Style sections contain all of the styling for the Answers.
  • These settings are self-explanatory and do as the settings suggests.
  • Note that these settings apply to the Answers only. 
  • Note: The Answer Background Style can be a solid color or an image. If using an image, the image should be appropriate for a wide and narrow space. The same image will be used for all Answers.
  • Content: Enter your text content here. Note that this is a full text editor, which allows for things like bullet points, text color, and the ability to style individual words or phrases.
  • Font Source: Select from Google Fonts or Typekit

ARROW STYLING

  • This section allows for styling of the arrow icon seen in the Title /Question.
  • Note: The most important settings here are Font Size and Font Color. Other settings in this section are generally not applicable to the arrow icons.

ADDITIONAL STYLING

  • Container Border sets a border (similar to a stroke) to the entire FAQ container. Border thickness and color options are available.
  • Question Border sets a border (similar to a stroke) to the Title / Question container. Border thickness and color options are available.
  • Title Container Height sets the height of the Title / Question container.