Simple FAQ Structure with Webflow CMS - Follow Along Tutorial

hi webflow friends my name is grace walker i'm a designer and webflow expert and today i'm going to go through how i set up faqs in pretty much every single project that i do this is a really straightforward way to build faqs i find them doing this over and over and over again so i wanted to create a cloneable and do a little walkthrough of it for you uh there's a ton of tutorials on how to build really great faqs with animations and um really in-depth setups um this is not going to be that this is going to be a quick fast uh really good overview of how to build a simple faq i will link some of my favorite other tutorials for faqs below that go a little bit more into depth about the structure and kind of principle behind what you're setting up but this is going to be a bite-sized version of those uh so perfect so i've already built my setup here um just to kind of go through an introduction so we've got our question within a box we click on it we get our answer and the plus turns into a minus so obviously with webflow you can style this in any way that you want to um but this is how i've done it for the purposes of this walkthrough um fantastic so to get started with this i'm going to delete everything that i have so that we can start from scratch so under my styles here i'm going to remove all of the previous styles that i had and i'm also going to change this faq rep to just old faq so that we are not cheating perfect so now i have a blank screen and i'm going to minimize myself so i have kind of a basic setup here with a section and a container and these are kind of your base elements that you're going to build within i also have a cms collection called faqs already set up within the faqs um if we look at the settings for this cms collection i have a question i have an answer which is a rich text field and i also have an order number so within the order number i'm going to use this to sort our faqs to have the smallest number appear first i end up using this number cms item custom field within a lot of projects a lot of collections to be able to manually decide the order not based on alphabetical date etc so knowing that i've got three just sample faqs in here with their question answer and order set up fantastic so let's get started with building our faq first of all i'm going to enter or add in my cms collection and i'm going to tie this to my faqs so immediately i can see that this collection is now pulling in my faqs it's got the little placeholder label here for each of those items i'm going to name all of my cms base lists i'm going to call this faq list wrapper inside is going to be faq list and then i'm going to have faq item perfect so now with an faq item i can start adding in the pieces that are actually going to make up this interactive element first of all i'm going to add a div and i'm going to call this faq wrap this is going to be the parent that contains our question our answer and our plus and minus sign within faq wrap i'm going to add two divs within it the first one is going to be called faq question wrap if i can spell that correctly and then i'm going to copy and paste that and duplicate it and call it faq answer wrap fantastic so now looking at our navigator panel you can see we've got all of our collection uh kind of base elements here we've got our faq wrap and within faq wrap we have faq question wrap and faq answer wrap within faq question wrap i am going to add a piece of text and i'm going to tie it to my question so now i've got this piece of text it's showing the question um and we can continue from there so faq question wrap is going to hold our question text but it's also going to hold that plus and minus little interactive piece that we have as a label so in order to do that i'm going to make this display flex i'm going to align it to the center and i'm going to justify it space between so now if i click on that piece of text i can see that it is sitting at the front of my faq question wrap while i'm at it i'm going to call this text block question because that's going to come in handy and i'm also going to add in our plus and minus so i'm going to add in a div and i'm going to call this plus wrap i am going to make this display flex align center and justify center and within plus wrap i'm going to add two more dips the first one i'm going to call plus horizontal and this is going to be the horizontal bar of our plus minus so let's give this a width of 100 and a height of 2 pixels i'm going to give this a background color just of black and it's not displaying anything right now and that's because we missed a step here so plus wrap our little box that's going to contain our horizontal and vertical lines needs to have a width and height set for it so i'm going to give this a width and a height of 22 pixels so now i can see that i've got my horizontal bar there spanning the width of our wrap and i'm going to copy and paste that plus horizontal div so that i can style our vertical bar in order to do this i'm going to duplicate this class and i'm going to call it plus vertical uh plus vertical is basically going to have the opposite properties of plus horizontal so instead of having a width of 100 and a height of 2 pixels i'm going to give it a height or width of 2 pixels and a height of 100 so we can see now we've got kind of a t shape happening which is not necessarily the plus shape that we want so in order to have our vertical lines sit in the middle of our plus wrap we need to set this to position absolute um but again we missed a step with our plus wrap in order for any absolute positioned element to stay within its bounds or the element that it's kind of relative to the parent element needs to have a position of relative or absolute fix etc so now we've got our plus wrap with its width and height our position is relative and we've got our plus horizontal and our plus vertical sitting nicely as a little cross uh plus mark within that piece fantastic so that element is kind of ready and set to go and we can start styling our answer so within the add panel i'm going to add a rich text element because that is how we've styled our answers and i'm going to connect this rich text element to our answer so now i can see i've got our question and our answer and our plus and this is kind of everything that we need to get going however this is not really a great set up for how this looks we've got the same hierarchy happening for the question and the answer there's not really a lot of space happening between here so what i'm going to do is style our question so we've got our question text selected i'm going to make this black for its font weight and i'm also going to create some division between the faqs themselves so with faq wrap selected i'm going to add padding all around this element let's give it a really generous padding of 20 pixels and i'm also going to give it a background color of white um our body background is light gray so having a white faq is a nice little contrast here i'm going to give our box a radius of 10 pixels so we've just got a nice rounded element happening and then i'm also going to add some padding between the faq item elements themselves you can do this in a couple ways um you can definitely just add spacing below add a margin to the bottom of these but with that you're also going to get um that happening on the on the last element that could cause uh some margin here and maybe you just want something to sit tight uh below it so usually what i like to do instead of this is i'll make my faq list a grid but just with one column and i'll add 16 pixels of padding between them is fine so now i have my three faq items we've got our question our answer and our little plus obviously you can style this in any way that you want but for the purposes of this we've just gone super basic uh fantastic so i think now that we have this we just want to make sure our rich text element has a class associated with it as well so just call that answer and at this point we've got all of our elements set up and we are ready to get going on our interaction um fantastic so the way that i am going to set this up is i'm going to have the entire faq wrap be clickable to open and close our frequently asked question so to get that going i'm going to go to my interactions panel with faq wrap selected and under under interactions under element trigger i'm going to add a new interaction on mouse click so on the first click we want the faq to open and on the second click we want the faq to close so for uh our first click i'm going to start an animation i am going to delete the previous ones that we had in there so there's no cheating um and i'm going to add a new timed animation so i'm going to call this faq open and i'm going to start our animation so in order to have this faq work properly we want to not show the answer when someone first lands on this page so to do that we're going to set some initial states here we want to set initial states for our faq answer wrap and our answer to both hide it and have its opacity go down so first of all i'm going to add a hide show for faq answer wrap and i'm going to hide show display none within here as well i'm also going to make the size of faq answer wrap to be 0 pixels um and set that as an initial state we'll also set this as initial state and finally the last initial state that we're going to want to set is the opacity and i'm not going to set the opacity to faq answer wrap i'm going to set it to epic to the answer rich text element um i'll set that as an initial state and put the opacity to zero fantastic so this is kind of what we want the uh interaction to start as we've got our question our plus and our nice little box but now we want to actually show that answer so under actions i'm going to select my faq answer wrap first things first we need to show that element again so i'm going to add a new action for faq answer wrap and i'm going to display block so now i can see that that piece is showing up within the element that we have but because we've set its size to zero pixels um it's not actually showing anything here so our next step here is to add a size change to this so we want the size of faq answer wrap to be height auto so now we can see that that's taking up um the same height that it should have um as a as a kind of like native element here and the last piece that we want to do is change that opacity for the answer back to 100 fantastic so we can see our opacity is back at 100 i want the opacity to happen kind of at the same size here um and then our last piece so we'll do a little preview here fantastic i'm actually going to separate those um and our last piece that we want to have here is have our plus turn into a minus so i'm going to select my plus vertical so our up and down bar within the plus and i'm going to add a new act enter a new action to rotate it by negative 90 degrees so now i can see that my plus has turned into a minus i'm going to want this to happen at the same time that the size is changing um so i'm going to select all of these and give them the same duration and easing still give them a duration of 0.3 seconds um with an easing of in out quad and now if i do a preview here i can see we change our size the answer turns to 100 opacity and then at the same time our plus is turning into a minus fantastic okay we'll hit save here and then we're gonna do a webflow pro hack that i first heard from timothy rix um who is a legend and um this tip has saved me so much time doing interactions on a number of things throughout all of my builds so instead of rebuilding this and remembering all the different pieces that we had um to kind of reverse what we did on the faq open we're actually just going to duplicate our faq open and change its name to faq clothes um and within here there's some really fast steps that we can do to just get this done um really really efficiently here so first thing i'm going to do is i'm going to delete all of our initial states so i'm just going to select those three and they're gone um and that is because we don't want to have any initial states here we're just going to reorder the kind of other elements that we have so this is basically in the reverse order that we want to have it close in so we're going to reorder this based on that so i'm going to take my hide show for faq answer wrap and i'm going to drag it to the last point i'm also going to take my answer opacity and make that happen first so within here i'm going to change the opacity to 0 for our answer because we want that answer to fade out first and then we're going to change our faq answer wrap size back to zero pixels our plus vertical rotate is going to go back to zero degrees and our hide show is going to go to display none perfect um i'm going to apply this to the class just in case i built this across my site and i want all of my faqs to behave behave in the same way and the last piece here we can see that if we preview this the faq is opening and closing just like we want it to but our mouse is still staying the same so a user might not know that this is a clickable element um if their mouse is still staying on the default cursor so the last thing that we're going to do here is under faq wrap i'm going to change the cursor to our pointer and there's other things that you could do here like i could add a hover state to this um change its color i could make it grow lots of different things you can do here um but i will leave it at that so now if we go back to our preview i can open this question i can close this question and it will work for all of our items um last thing here we'll utilize that sort order so i'm going to pull in the order number and i want it to sort smallest to largest i'm going to hit save and i can see now that my first question is appearing first and so on so this is essentially how i build all of my faqs across websites across client websites all of that um so hopefully this is helpful for you if you are looking for more in-depth tutorials or how to add schema markup to these which i also do um for client websites i'll put some links below um but other than that i'm going to try and do a few more of these tutorials for things like navigation footers just kind of the common elements that i'm using over and over across webflow builds so if there's anything in particular you would like to see feel free to leave a comment um or connect with me on twitter at grace on grid thanks so much for watching and we'll talk soon

Channel: Grace Walker

Views: 555

Keywords:

Id: gQfmZRTEbZI

Length: 18min 17sec (1097 seconds)

Published: Fri Nov 12 2021