2 Ways to Develop FAQs - a Webflow Tutorial

hey guys my name is Jose O'Conner I'm a Chattanooga based web designer and web flow developer and in this video we're talking about frequently asked questions and before we get to the FAQ just a little bit of news one is that you might have seen an ad before this video started and I just wanted to mention that a couple of days ago I was able to get this channel monetized I really hope that you guys don't mind that you know it takes a lot of work this one's a little bit shorter but some of the other ones that are longer it takes so much to create those and so it's just nice to have a little bit of compensation to keep this channel going and be able to do more videos and then secondly I was able to get the channel monetized because I crested 1,000 subscribers it's not really a lot but it was a big deal to me and four thousand hours of watch time so that's the kind of limit that YouTube sets to be able to monetize a channel so I just wanted to thank you guys a lot of you have reached out on like Twitter or email or Instagram or whatever and have just encouraged me and really pushed me to keep going and and thanks me for the videos so I'm just a really appreciative of this little community on this channel and I like doing this for you guys okay so frequently asked questions this is actually one of my favorite little things to build on a website just because there it's not like a simple component but it can bring a lot of value to the clients and then you can get kind of creative with some of the animations and stuff so we're gonna keep it pretty basic here for this video but you can use none that we have Lahti integration and stuff like that there are some fun things that you can do with these fa Q's I'm actually gonna be doing two different style that's why you see two FAQ headlines that's because we're gonna be building out a list totally custom not using any web flow components and then we're going to use the web flow drop-down component to create this list down here I wanted to show you both so that you kind of get a sense for okay which one would I use in which situation which one works better and it's kind of pick and choose for yourself which method you like best all right that's enough talk let's jump into it all right so for the first FAQ list we're going to be creating the custom version and then the second one we're going to do the drop down Before we jump into developing the custom one we created this little diagram I kind of want to talk about the anatomy of an FAQ so there's three elements I want to kind of draw your attention to the first is the rapper the rapper of course is going to hold everything and in our collection that's going to be the collection item that's gonna be the rapper that will hold all of the content and then inside of that rapper will be two divs a target and a paint the target is what we're going to click on to expand the pane and make it grow and the reason that we want to have a target that's separate from the rapper is if we have content inside of this pane like for example if it was a rich text block and there were links inside of it or if there was a button inside of it you can put whatever you want in there and we still want the user to be able to interact with it and so if the like the interactions are applied to the whole rapper then that's going to interfere with any kind of content that we have in here but if we assign the animations to any target it's going to emit people already have that that's a well-known user pattern that you're gonna click on this area to make it expand or close alright so now that you know that let's go ahead and hide that again let's jump into web flow and add a collection list and I'm gonna link it to an FAQ collection I've already created and by the way I highly recommend this in your own development work as much as possible before you start developing add the collections and use real content because if you do that you're gonna realize that there are certain things you're doing that don't fit that actual way the client will use the website so in other words avoid dummy content as much as possible all right let me jump off of that soap box all right with the collection list let's go ahead and give that a class of FAQ wrapper and I've already got this class on another page from another tutorial so I'm just gonna add a 1 to make it unique to this project and we're going to add some stylings like we're gonna push it away let's do like 48 pixels or so we're going to do a max width of 806 and we're going to Center it in the middle of the screen by setting the margin I'm left and right to auto and that's going to push it into the middle all right so now we can go ahead and add some of the content here with the collection item that's gonna be our FAQ you know what I should have named this list yes I read that so that's climate FAQ list because the item is supposed to be the wrapper of a cue wrapper one there we go then inside of that wrapper we're gonna have two dead blocks so if I twirl down the item here you can see that there's two dead blocks the first one is going to be our trigger and the second one is going to be our paint I think all right there we go inside of the trigger we're gonna have a text block and our signors there's going to be one in the pane as well and then in the trigger let's add another dead block for our button so this is going to be FAQ but okay I think that's all of the elements unless I'm wrong now let's go ahead and set up the wrapper so the first thing I do is give it that background color so we can kind of see our work we're going to add a little bit of padding and then on the left-hand side we can actually do 16 pixels all right then with the trigger we can set it to flex and that's that's going to do it so it's gonna let us create this link up where the question is on the left and the button is all the way to the right so flex align vertically in the middle and space between with the button let's give it some hard pixel values of 42 by 42 is that what it is yeah okay and then a background color so we can see it and it's got four pixels of corner radius and I think I forgot to do that with the rapper I also forgot to add some margin on the bottom to separate the questions from each other let's go ahead and do that now and then let's tie this stuff to the CMS so this is going to be a question and this is going to be the response but their response let's make it a p2 so it's a slightly whoops misspell then just salt a smaller version of the paragraph and then let's give it a combo class of faq response I want to add 16 pixels of padding just to push it away from the top edge of the button and then I want to also add 32 pixels of padding I don't like it when the paragraph is kind of like right below the button so just giving it a little bit of space there all right now the next thing we need to do is add that chevron icon and there's a couple of ways to do that one is to use an image and one is to use an HTML Mbits I'm going to cover both because they both have their places but to do the SVG I would click on the Chevron here and then export by setting this to SVG clicking export and then uploading it to my assets folder which I've already done then just click and drag that into the square there and then you can always add some alt text over an icon with the button let's make it flex as well so that we can Center it in the middle of the screen or the box all right so that's um how you would import this using an SVG image but there's also a way to do it using an embed so let me go ahead and add an HTML embed and what we want to do is we want to copy this and we want to get it out of inside there because it's kind of it has to be as simple as possible so you don't want to be inside of any groups or anything like that and then if I right-click here I can copy the SVG code in the drop down menu and I'm pretty sure that figma and Adobe XD I'll have the ability to do this as well so copy the SVG code there and I'm just going to paste that into the embed code editor let's save and close that and now we've got the exact same thing so the only difference is this is an image that's being referenced in the assets folder and this is just the actual code but the image is actually just the code inside of the image file so it really the exact same thing now here is the pro of using the image over the code the pro is that it's super easy because you just upload it to your assets folder if you need to reuse it multiple times throughout the project you can search for it and assets folder and find it fast the con is that it's difficult to change the color of the SVG so let me get rid of that press 0 I've got this active state for the FAQ so when I open up the FAQ this turns black and the icon turns away it's really difficult to do that if I use an image so I'd have to use a background image as opposed to like the regular image or use hide and opacity and all kinds of stuff so it's just not very easy to change the color but with the HTML embed it is so I'm going to get rid of the image open that HTML embed code editor back up and first of all let's just delete a few things that we don't really need so for example we don't need this comment we don't need the title you don't need the description and we actually don't even need this group so really the what we what we need is this polygon that has the actual like virtus points of the SVG but the group here is this kind of like empty space we can actually get rid of that and we're going to get an error right away that's saying hey you've got a closing group but no opening group tag so we can just delete that so I remove that air save them clothes and look it's still there we didn't mess with it still showing up as it should and then we're gonna make one more change now currently the way that that SVG is getting its color is from this inline style right here so by the way you could set that to any color that you want but we're actually going to use current color and by the way the unless I'm wrong I believe the this is case sensitive so I wanna make sure this is a lowercase C and this is an uppercase C but what that is telling the browser is I want you to get the fill color from the current font color set to this element or any parent element I'm gonna save and close you'll immediately notice this is now the black from the text that's a good sign and then we're going to give this a class of FAQ Chevron down here I'm gonna set this to something super saturated and you'll notice as I slide this along it's changing color along with whatever I call I'm setting to the font so this is just a super neat way to tie the color of an SVG to your phone color and then you can mess with it and animations I love that I'm going to click on here and get the actual color which is a medium gray alright and now we're ready to go and we're going to be able to manipulate the color of that SVG in our animation alright so with a trigger selected let's go ahead and add our animation I've already added one previously I think so let me I'll have to delete it here we go let me delete this and let me add a new one FAQ custom open so the first thing we need to do is get the FAQ to its initial state like how when somebody loads the page what do you want it to look like when it lows well we don't want it to be expanded when it loads so with FAQ pane selected I'm gonna set the initial size and this is where we set the initial state here we're going to set it to a height of 0 pixels all right so we're noticing there's some funky stuff going on like the paragraphs are showing up so to deal with that let's also set the hide/show property to display:none and just to make our animation a little bit smoother we're also gonna add an opacity of 0% this is exactly how we want our questions to look when we load the page all right now we got to add how do we want it to appear when somebody clicks on the trigger so the first thing we're going to do is the hide property we're going to set it to block all right so now it's showing back up and you got to do that first before you do anything else because the hide/show property it doesn't have a timing function like you can't set see how this was grayed out or unavailable you can't set a duration to that animation so that's got to be done first then we're gonna add size and opacity at the same time opacity has been set to 100 cent for us next webflow and for height instead of giving it like a hard pixel amount we can just set it to auto and we're kind of saying hey just go back to what you should be then with both of those selected let's make it a duration of 0.3 just to make it a little faster started to ease and then let's test this out all right that looks exactly like what we want we also want to affect the button right so we don't have to set an initial State for that because it's already set to the initial state but we do want to change the background color to the button and we want it to be this oops I accidentally clicked that Chevron there we want it to be our dark so let's go ahead and set that there and then here's the beauty of what we just did with the embed now with text color we can change this to white I love that okay now with all of these selected let's just go ahead and make sure they're all set to the correct easing 's and there we go one thing I forgot to do is with the Chevron we do want to rotate it right so you want to we want to indicate that it's a beach they go back up on the second click so I'm going to rotate on the z-index 180 degrees and set this to the same things as always all right now when it opens the Chevron is rotating like we wanted to all right so let's go ahead and preview it just to make sure that this is all behaving correctly and it is one thing I just realized is I was telling that was need to make sure that people know the trigger is a clickable element so here and the settings the style panel scroll down and under cursor I want to change this to pointer all right now let's add the animations for the second click in other words what do we want to happen when somebody clicks on the trigger again to collapse the FAQ list so I'm going to click start animation I'm going to duplicate and then the one that we already have and then I'm going to go ahead and rename it FAQ custom clothes by the way on larger websites you may have a lot of animations so you'll want to give these really easy to understand names because you think you will remember what what those animations are for but when you're like 20 pages in and there are 50 animations you will have forgotten what goes to what I guarantee you all right so let's get rid of this we're going to move the hide/show to the bottom and I'm doing that because remember we can't any kind of duration to hide show so if I did it at the top and it would all sudden just disappear and it would be this really unnatural animation so we want that to happen last size I want to set that to zero pixels rotate I wanted to go back to zero Chevron I wanted to set it back to this color the button I want to set it to this color opacity set to 0% for the pain the last thing that you want to do is make sure that you set this since this is a copy of the open this is set to end by displaying block you want to make sure you send it to display closed now what happens if you leave it on display block is if you open this one and then close it and then try to click on this one it's unclick below there's an error and that's because the paragraph from the FAQ item above it is actually rendering on top of this so it sets a size zero and opacity zero but it's actually still rendering over it so we need to go ahead and make sure that it's set to hide or display none when it closes and let's preview that actually it's not gonna let us preview it because it's the second click so we do have to go to the preview mode and look we're getting the point your cursor and this is behaving just as we expected all right so we do have a hover interaction where just the button gets a little bit darker on hover but just speed things up I'm gonna do that off screen and when we come back we're gonna work on using the drop down to create these second FAQ list all right we're back for section two in this section we're going to use web blows drop down component that kind of achieved the same thing that we did with the custom FAQ list above but you can see that there are some things that well flow has gonna added to the drop down component there are a little different from Holly executed this above and so I wanted to show you both so you have the opportunity to decide at which method do I like the best let's jump into web flow and we're going to start off kind of the same way that we did with the section above we're going to add a collection list let's source it to our fa Q's CMS collection with the list selected let's give it a class of faq list and then inside of here let's add a drop-down but let's take a look at the drop-down and look at how web flow has built this you're going to notice that they've actually built it really similar to how we built this above so they've got the drop down onto the component itself that's what we called the wrapper in the section above they've got the toggle aka the trigger and you can see the point your cursor over here to the left and then they've got the list aka the FAQ pane and that's got currently three drop-down links inside of it which we actually don't need and we can go ahead and just copy and paste the paragraph to in there right with the drop-down toggle we can actually get rid of that icon as we don't need it but let's add a Jeb block and we're going to call this plus wrapper I'm just gonna hold our plus icon and then the drop down now let me turn on x-ray mode so we can kind of see visualize what's happening here but currently the collection item is the full width of the faq list eight hundred and six pixels but the toggle is not filling up the entire width why is that well the reason is because it is by default set to inline block inline block means that the element will only take up as much space as it needs well to remedy that let's give it a class we'll call it f AQ toggle and set it to it's set an inline block at a doob block now block means that it'll take up as much space as possible sorry I actually added that to the wrong thing so FAQ drop down we have to set it to block as well alright so now the element because it's such a display block is taking up as much room as the parent element will allow one of the parent elements is FAQ list with a max of 806 pixels which means that that drop down is now taking up that many pixels oh just noticed a slight misspelling there we go and I previously set the toggle to display block if I had left that alone we're still having the same issue that's because it's also my default inline block so they both need to be such a block to take up the full width okay with the toggle selected we can also use flexbox the same way that we did up above inline or a set things to Center align vertically and space between and then with the drop down with this toggle sorry let's go ahead and set that to zero but I do want to add 16 pixels of padding to the drop down itself we also want to add 4 pixels of corner radius and we want to add a border all around of a block at 12% and then if we do 8 pixels of margin bottom we'll push all of them down a little bit so if I just kind of preview this you'll notice we're getting close to what the initial state should look like let's go ahead and tie this to the CMS and in the plus wrapper let's add our icons the first I'm going to do is add a dip block and we'll call this plus line it's about three pixels tall and 18 pixels wide and it's got a background color of this all right there we are then to get the second line under day second plus line and call this one vertical and let's set its position to absolute that way as we make changes to its positioning it's not going to affect the plus line without the combo class in the transforms let's go ahead and rotate it 90 degrees and let's also move it up minus 3 pixels whoops I think you got that are these one at a time all right if I go to move this one up there we go the order matters in here which is why it was looking a little funky so when it was below I was like kind of like offset so you just got to move it above and there we go so let me preview this again perfect the only thing that we're missing is the hover State so with the drop-down selected let's click on this little drop down arrow click on hover and then we want the line to be forget exactly what color this was I don't think it's a full black okay so instead of 12 it's a 54% go back to 9 and then we want to make sure that we had a transition so that it's not it doesn't go from that 12% to 54% in an instant I just kind of eases it in slowly so a border color 200 milliseconds is fine all right so now when you hover over it it's got a nice little transition and lets you focus on the content that you're hovering over all right now if we click these it's already got the the function that the functionality available so it's opening and closing but it looks a little weird and that's because of its display property so if we go to drop-down list we want to do a few things first of all we want to set the background to transparent so we don't get that ugly gray color and then we want to set its positioning not to absolute but to static and once it's that's a static right now we're getting the correct action that we were expecting now we could actually just leave it there so we could just say okay that's what I fakie we're done but we want to add some interactions just to make it a little smoother like we did here like that the interaction is just nice all right so here we have to click on the drop down so that we have access to drop down opens under start a new animation I've got this one down here that I was messing with before started recording delete those and let's do F aq drop down opens remember I said be very specific with these titles and I learned that the hard way and then we're going to do essentially the same thing that we did above where with drop down list we're gonna set the hide property initial state to none sighs - height of 0 pixels and opacity of 100% then we want to set the hide to display block and then finally we want to do the opacity and the size I think I didn't set this opacity correctly needs to be 0% initial state all right and then on height again we're going to set this to auto just so that it goes back to what you we originally intended okay next thing we want to do is with the plus line I want to choose the one that has the combo class let's go ahead and rotate that negative nine do you think removing it zero there we go zero degrees and we want to make sure that the class being targeted is plus like vertical with the combo class I think we're getting a little bit of an issue here where sometimes when you use a transform and in animation and the class already has a transform attached to it you get some errors so so we may have to go ahead and add some initial states so initially it's ninety degrees then it rotates to zero and initially let's move it negative three pixels so I think that should take care of that rotate okay that looks correct to me I think from here let's go back up to the top yeah okay so now with all of these selected let's go ahead and make it a duration of 0.3 and set to ease let's preview that we see that our plus is becoming a minus everything is open and closing smoothly all right let's go ahead and do the second interaction so we can duplicate that same one rename it closes we can get rid of all of these move the hide/show to the bottom just like we did with the one above and set the opacity to 0% this rotate needs to go back to 90 and the size needs to go back to a pixel amount of zero so we did our job correctly this should open and close with more easing I think we're still getting a little bit of a funky thing there with the icon this is future Jose and the reason that the dropdown wasn't working correctly is because I'd accidentally left this move at negative two pixels I just changed it to negative three and now it's working as intended the reason that works is because we set the height of this line to three pixels and so we've got to move it up we got to move the second one up three pixels to overlap exactly over the one below it now okay let's talk about the difference between these two implementations and why you might want to use one over the other now the cool thing about web flows component is that if I have one open and I click on another one it's gonna close when I had open previously and open this one in other words it only lets you have one open at a time and if I click off the screen it closes it and that's something like that's a user pattern that people are kind of familiar with if I click off of something it's going to close what I previously had open now the custom one that we did it's not going to have that same effect so if I click off its gonna remain open and if I click a second one they will all remain open I have to actively click to close it there are situations for both like where you may say well I want the questions to remain open unless they actively closed it I want them to have more control or you may say wow there's a lot of questions with a lot of content so it would be nice if when they clicked on a new question the other one collapse to keep things condensed and not too busy so there are situations where either of these options would work well you can't have to pick and choose what you think is best that is it for this tutorial thank you guys so much for following along and make sure that you subscribe and you hit the notification bell so that you know when I upload future videos I've actually got three or four in the pipeline I'm about 75% of the way through recording a huge one for a big page build-out so I encourage you to subscribe so you get notified when I upload those feature videos and thank you guys for watching I'll see you in the next one

Channel: Jose Ocando

Views: 7,078

Keywords: Webflow, Tutorial, Web Development, Website Development, Web Dev, No Code, Frequenly Asked Questions, FAQs, Dropdowns, Dropdown

Id: rdprZav7g5E

Length: 32min 47sec (1967 seconds)

Published: Thu Nov 14 2019