You know that your website is the digital representative for your brand. And you definitely don’t want visitors (and potential customers!) feeling ignored, confused or unsure. They probably have questions about your products or services and want answers before they buy or book.
Including a section with frequently asked questions (and answers) is a great way to make it easy for visitors to get the information they want without having to search for it or contact you. It also shows that you can anticipate their needs and helps them feel confident about buying from or working with you.
And an accordion-style or drop-down FAQ section is a clean, simple way to provide information. I’ll show you how to make one step-by-step In this post and video tutorial. If you’re more of a reader, just scroll down for the written instructions!
So let’s get started.
We need to have a canvas for each of our questions and a canvas for each of our answers, and we’re going to start with the question.
Great! We’ll come back to these icons in just a minute. But first, let’s create our answer canvas.
Important: Under the canvas tab in the right side menu, scroll down a bit and check the box “Hidden to start”. Make sure you do this for both the desktop and mobile versions.
Perfect! Now we’ve got the basics, let’s make the magic happen.
When you’ve got everything formatted and aligned, go back to the answer canvas. In view 1, select the icon and go into the Click Actions tab in the right side menu. Under Link, choose Add. And the from the drop-down menu, select:
That means when someone clicks on the icon, it will shift to View 2, your alternate icon.
I also recommend unchecking all three of the boxes (“Scroll to Canvas”, “Reverse Transition Direction” and “Submit Contact Form”).
Now under Actions, choose Add. And the from the drop-down menu, select:
This means when someone clicks the icon, it won’t just shift to view 2, but it will also reveal the answer!
Great! Now go into view 2 and select the icon. Go into the Click Actions tab in the right side menu. Under Link, choose Add. And the from the drop-down menu, select:
That means when someone clicks on the icon, it will shift back to View 1, your primary icon.
I recommend unchecking all three of the boxes (“Scroll to Canvas”, “Reverse Transition Direction” and “Submit Contact Form”) here, too.
Now under Actions, choose Add. And the from the drop-down menu, select:
This way your website visitor can “hide” the answer to their question when they’ve finished reading.
Now go ahead and test your first FAQ on both mobile and desktop!
When everything is working and is perfectly aligned and formatted, you can use these question and answer canvases as templates for the rest of your FAQs. Here’s what you need to do…
Repeat these 5 steps for each additional question and answer you have (change the canvas names appropriately, of course!). The most common mistake people make is to forget to change the click action to reveal the right answer!
It can be a little time consuming to create all these canvases, but it’s worth it in the end! It shows visitors to your website you’re there to help and gets them the information they need to buy from or book in with you.
But if you just haven’t got the time or patience to do this yourself, never fear! I have a FREE FAQ template that even comes with a free video tutorial! You can get your copy here.
And if you have any questions, just pop them into the comment section and I’ll get back to ASAP.
Thanks for reading and happy designing!
Michele xo
Then you need a strategy for your website. And you can create one with this FREE guide and workbook.
A web design studio based in Chiswick, West London (W4)...
...but bringing strong Canadian vibes!
© Wild Rose Creative Studio 2022
view comments +
or leave your own