Adding a FAQ to your pages, especially sales pages, can really help give your prospective customers answers to questions they may have. Usually when you get emails from potential customers asking questions, and you get the same questions a lot, then you could turn those into FAQ on your page.
A good way to come up with a good FAQ is to think like your target audience and ask yourself the questions that they may ask. In other words, think of anything they may ask, and simply include that as a FAQ. This is where you can overcome objections or doubts about what is being sold.
Some of the most common FAQ would be something like this:
Will I be able to upgrade later?
How long is the support?
Is it a subscription or a one time fee?
Does it come with ____ feature?
What is the return policy?
Do you guarantee any results?
Do you provide any training?
This list could go on for just about forever if you think about it.
The OptimizePress FAQ Element is there to make things easier for you to handle any common questions that your visitors may have about your products or services that you want to sell.
The video below is a great walkthrough of how the FAQ element works, but if you prefer a written step by step guide, just keep reading below.
To add the FAQ Element, click on the + icon where you want to add the element, or click on the top left of the editor where you see "+ Element"
You can also click the icon for the elements menu on the left side of the editor:
To locate the FAQ Element, simply type FAQ in the search window and you'll see the element there to choose.
Now simply drag that element over to where you want to add it.
Now you'll see we have some presets that you can choose from that will load in the editor's left sidebar
Once you choose a design, you can also modify it using the inline element toolbar. Or you can pick a different design by clicking the magic wand icon (the first icon in the element toolbar).
The FAQ Element is fully customizable just like all our other elements. There are two parts for this element. The main overall element options, and then each item also has its own inline toolbar as well. You'll notice the toolbar will show "Faq" for the Overall editing options, but if you click on an individual FAQ item, then the toolbar will show "Faq Item"
You'll see the Faq Item toolbar has more options. We'll get to these later, but it is good to know what you are looking at. If it shows "Faq Item" and you want to edit something on the main element, then you would click the little up arrow next to the "x" to show the main element options.
Or you can click Faq Element in the editor breadcrumb trail like you see here
Now that we got that out of the way, lets take a look at what options the FAQ inline toolbar offers us.
First, we have the magic wand icon which will let you choose another design preset
The + icon with a circle around it will allow you to add another FAQ item
The toggle icon is a super handy feature that is very useful. When set to yes, it will automatically close the previous FAQ item when another is clicked
Here is how it works when it is set to "Yes"
Here is how it works when it is set to "No"
Next, we have the alignment option. if you set the element's width there to less than 100%, then the alignment options will work (as there is nothing to align if the element takes up the entire space it is put in).
You can also 1) reposition the element, 2) clone the element, and 3) delete the element
The cogwheel icon (or gear icon) will open up more element settings where you can adjust the space above/below the element or open the Advanced Options sidebar.
To open the Advanced Options sidebar, just click the blue "Advanced Options" Button.
The advanced options sidebar has many options that you can modify. These are bit more advanced, so you'll want to make sure you know what these will do. The first option, Positioning, is where you can edit the Margin and Padding. You can either type in the numbers (in pixels) or drag the blue dashed or solid lines to adjust them. Sometimes it is easier to type in the numbers if dragging is too sensitive with your computer's mouse.
The responsive tab will let you control the visibility of the element on Desktop, Tablet, and Mobile devices
The Animation and Delay feature is nice as well. You can delay the element from showing or use an animation so when someone loads or scrolls to the element you can choose an effect such as "Fade in" like I did here
Lastly, the Advanced tab in the Advanced Options sidebar is reserved for pros who really want to do some advanced things. You can grab the element ID, change the element caption, create CSS Classes, change the Z-index, and add custom code before and after the element. In most cases you won't have to do anything with these, but this is just one of those "good to know" options (just in case you need it).
You can change the text in the FAQ items by clicking on them and then typing new text. It works just like any other headline or text elements. You can adjust the font, colors, and size of your text just like any other text element.
The FAQ element only allows adding text. If you need to add other elements within each FAQ item, we would instead suggest using the
Content Toggle Element which works just like the FAQ, but allows you to add other elements within the content area of each toggle. So if you want to add images, videos, or other elements, you can do so.
Now that you know how to edit the text, lets take a deeper look at the other options in the FAQ Item element toolbar. When you click on a FAQ item, you'll see the following toolbar become available
The padlock icon will allow you to unlock a single FAQ item in case you want to change options for that specific item. Adjustments made while the item is unlocked will be changed only on that FAQ item
The + icon with the circle around it will let you add another FAQ item (just like the main FAQ toolbar does)
The toggle icon is where you can set the FAQ Item spacing and whether the open/close icon is on the left or right
The Text icon will open up the settings to edit the Header Text Options
The star icon allows you to change the open and close icon for the FAQ item
The color icon allows you to change the colors for the header background, content background, text color and icon color
The border icon will allow you to make changes to the FAQ Item's border, shadows, and shadow styling
The pointing finger icon will open the Hover settings where you can change the colors for when someone hovers their mouse pointer over the FAQ Item
You can also 1) reposition, 2) clone, or 3) delete the FAQ Item
The cogwheel (or gear) icon will open additional Settings for the FAQ Item. The only option there is actually to click the blue button to open the Advanced Options for the FAQ Item
Clicking the Advanced Options button will open up the left sidebar that contains more options. These options work similar to the Advanced Options for the overall FAQ Element. You can edit the Poitioning (padding/margin), Responsive Options, Animation & Delay, as well as even more Advanced options. Not all features are the same. For example there is no "code before/code after" in the advanced options like the overall FAQ Element has (by design, not an omission).
In conclusion, the FAQ element is very robust and customizable. A great way to use this is in a 2 column row where you can create the FAQ Element in one column, and then clone it to the next column which gives you a great looking FAQ like this:
Hopefully you got some ideas from this guide. If you have any questions or need any help with the FAQ Element, please reach out to our friendly support team and we'll be happy to help.
