How to Structure Your FAQ with Custom Tabs in Divi

foreign so [Music] [Music] you [Music] so um [Music] hey tv nation thank you for joining us in this live stream today we're going to show you how to create frequently asked questions tabs inside divi so if you're not elegant themes member make sure that you check out tv in one of the links in the description below and without any further ado let's get to it all right so i want to say hi on every to everyone on facebook and youtube if you guys have questions please leave a comment in the comment section or in the live chat and i'll be keeping an eye on those so all right let's dive into the tutorial and yeah we'll just go through what you can expect from this tutorial design wise and functionality wise so over here i have a preview on desktop and you can notice that it's a frequently asked questions page and it has these kind of categories at the top most ask pricing account support and each one of these is clickable so as you are clicking a different category within the frequently asked questions page different questions pop up and these are in the in the toggle module so these really allow your visitors to easily navigate between different questions and different categories and we're going to build this using divi now on small screen sizes we have a similar outcome so over here this is the outcome you can expect so we'll recreate this from scratch so if you want to learn how to do this or if you just want to see how it works from a divi perspective keep following all right so um i'm going to start off with a new page so here i have a blank page and i'm going to enable the visual builder at the top and we're going to build from scratch so i'll just choose the first option here now to build this we're going to need two sections and i'm going to start off with the first section over here before um before i add modules and stuff i'm going to open these section settings and i'm going to use a different background color let me just grab the color code really quick so i'm using this background color this is the design style we're going for so if i go back to preview preview this is the design style we're using but you you can make this work on any kind of frequently asked questions page you can also use this functionality for any other kind of tabs design you want to create doesn't necessarily have to be for frequently asked questions but that'll be the focus of this tutorial in particular but you know you can easily use this for any kind of other tabs design all right so next we're gonna go to the spacing settings and we're gonna remove the default bottom padding of our section by adding zero pixels this will remove um this bottom section padding and we'll allow this row over here to touch the bottom of our section later on the tutorial we're also going to go to the border settings and we'll use one vw for the border width which equals viewport width for those that aren't familiar with vw and we're also using a white color here just grab a white color this will just generate a little bit of space before we add the box shadow so it's going to be this color code not white but this color code all right and then we'll go to the box shadow options and we're going to include a box shadow which is the following option i'm hovering here i'm going to bring this down to 0 pixels so the vertical position to 0 pixels and 1 pixel for the blur strength and i'm going to use inner shadow here instead of outer shadow and a black shadow color so this creates this kind of border that you can notice on the screen just a few steps this is a combination of inner shadow and a border that has the same background color as the section so this gives this kind of border inside of your container and i'm also going to go to the advanced app and increase the z index over here in the position settings i'm going to use 12 for the index and this will just make sure that this section is placed on top of you know the the second section which we'll add later on so by default um each section that com comes below another section has a higher z index than the one previous to that and we're switching that here it's something that's needed for this tutorial to make sure that it's responsive and that all the items are clickable at all times all right so yeah let's add a new row um i'm going to use a row with one column we're going to start off with these two modules over here so a text module and a divider module and then we'll focus on the clickable items and the frequently asked questions too so before we add modules i'm going to open the row settings go to the sizing settings we're going to use custom gutter with and put this to one this will just remove the space between our modules so you know it will just remove the default padding um and we'll also assign a max width of 1380. and then we'll go to the spacing settings here and we're going to use three percent for the top margin and bottom margin and one percent for the left and right padding here so these are just some design options that make this design work but um yeah you can tweak this however you want and now i'm going to add a module starting with a text module free asked questions i'm gonna make this h1 and i'll go to the h1 text settings the font we're using is cormorant garamond um i hope i'm saying that right and i'm using a bold font weight here also responsive text size 60 pixels on desktop we'll bring that down to 42 pixels on tablet and 36 on phone and then we'll add a divider module right below this we're making sure the show divider option is enabled then we'll go to the design tab use a black text line color for it and in the sizing settings we're going to modify the divider weight to 2 pixels same for the height and a max width of 150 pixels gives the following outcome we're also applying a top margin just to generate a bit of space there four percent for the top margin of our divider module and then we'll add another row right below that also a one column so over here you can notice that um these are all showing up next to each other we are not using columns for this we're using uh display flex allowing these to show up next to each other the reason why i chose this method is because you might be dealing with more um in different kind of categories so more than six um by default dv goes up until six columns so i wanted to provide you guys with a possibility to add more than six categories here and if you go with this approach and you modify some settings you can do that easily but you can also use columns and this is really handy for a responsive design as well so this is the math that we're going for in this tutorial we're using one column and we're just making sure that these different modules are showing next to each other by using the display inline block option uh later on so before um i add modules i'm going to open the row settings and here in the sizing settings i'm going to enable custom gutter width put this to one and we're going to increase the max width we're using the same one as we did for the last row i mean for the previous one um and we're also going to remove the default top and bottom padding by adding zero pixels to both options all right so now we can add modules so we'll start by focusing on the first over here and then we can reuse this for the other ones so to build that we're gonna add a new text module i'm just gonna quickly check the um live chat and comment section on facebook to see if there's there are any questions up until now i don't see any questions but seems like people are tuning in so if you guys have questions make sure to leave a comment on facebook or a comment in the live chat on youtube all right so over here i'm gonna last adam h3 title so this could be whatever you want really we're gonna use a white background color for it and then we're gonna style the h3 in our design tab so we're using carla we're using a bold font weight we're enabling uppercase center text alignment 15 pixels for the text size and four pixels for letter spacing which gives the following outcome here and we'll also modify the width across different screen sizes so that'll be 22 on desktop and we'll bring this to 44 on tablet and phone so um yeah this is one of the crucial steps of making sure that these show up next to each other adjusting the width so 22 percent because um you know the column these modules are placed and have a width of 100 in total so you need to divide that 100 into the number of uh different items so in this case i don't know how many there are four so the max will be 25 per item i'm just choosing a little bit less than that 22 percent and if each one of these modules has 22 that still equals less than 100 so alongside the inline block uh display property it will allow you to show these different modules next to each other without using columns for it all right then i'll go to the spacing settings and i'm going to use one percent of right margin this right margin will just generate some space between the different items that you can notice we're using different pattern padding values as well 30 pixels for the top 20 pixels for the bottom 5 for the left and the right side both of them then we'll add a border of one pixel there we go and we're also adding a box shadow this option same option over here we're using zero for the vertical position let me just grab that color code really quick this is the color code we're going for and we're changing this to inner shadow and now the second very important part is including that display inline block css property and you can do that within the main element of your module in the advanced app so display inline block and this will allow the modules to show up next to each other so i'm just going to reuse this three times i'm just gonna clone it and you guys can watch it fall into place as i'm cloning it so now these are all next to each other handy to know um of course you'll need to modify the content of each duplicate so on to the next section um i'm gonna again use a regular section i'm gonna open these section settings and i'm gonna modify the spacing values so i'm gonna use 100 pixels for the top and the bottom so and the second section will focus on the different frequently asked questions so we're going to structure them per category so this the first row is going to be linked to the first module here and then the second to this one third to this one and so forth and so on so in this part we'll focus on that so i'm gonna add a new row i'm gonna use one column so if you haven't noticed until now i'm focusing on creating the kind of design structure of elements that are needed for this functionality to fall into place the actual functionality will come in the last part of this tutorial where we use some code to link different items to each other and add a click interaction um and yeah so we'll use css classes for that and so on but now we're focusing on creating um the element structure of our design so over here i have my one column row i'm going to open the row settings go to the sizing settings i'm going to use custom gutter width with a value of 2 and again that same max width for my row which is and eighty 1380px and to add the frequently asked questions we're gonna use toggle modules so i'm just gonna add a first one here and you can add a title of your choice and some copy of your choice there as well so questions to your frequently asked i mean answers to your frequently asked questions and then we're going to change the icon color to black we're also going to use a custom icon size with 24 pixels there let's go to the toggle settings here i'm going to customize this just to match the look and feel of this design so this is the open toggle background color and we're using a white clothes tackle background color then we'll go to the title text settings i'm gonna copy this color code here open title text color is going to be this and it's the same color for the title text color in general we're using h4 for the title heading level since the previous one was h um h3 so now we're moving on to h4 uh and we're using that same font cormorant garamond here a bold font weight a title text size across different screen sizes so 36 pixels on desktop we're bringing that down to 34 pixels on tablet and 28 pixels on phone and then we'll go to the close title settings we switch back to desktop here we're using that same color here for the closed title text color and then we'll go to the body text settings um the body font we're using is carla 17 pixels for the text size and 1.9 em for the body line height so if i open this let me just close this for now this is the outlook we have i mean look we have up until now then i'll go to the spacing settings of my module we're going to use some responsive batting values let me just enable responsive options here so it's going to be two percent for the top and bottom on desktop five percent for the left and the right side and the top and the bottom is gonna motivate it's gonna change on the smaller screen sizes so that'll be four percent for tablet for both options and six percent on phone and then i'll go to the border settings um i'm gonna use a darker border color so it's gonna be entirely black here and we're also going to add 30 pixels of top margin to the toggle content in the advanced app and this will just generate a bit of space between the title and the actual toggle content just to have that clean feel going on so you can now clone this as many times as you want depending on the number of frequently asked questions that you have and we're going to change the state of the first one to open so people know that they can kind of you know navigate between the different questions it just helps from a user experience perspective and once you have completed the first row you can clone this three times so the number of times we're cloning this matches one two three four matches the number of text modules we have in the second row of the first section make sure that you add all that you change all duplicate content here i'm just gonna change the titles here to make sure you guys see it in the outcome so make sure that you change all the titles here i'm just going to change one per row so you guys will be able to see that each one is linked to a different text module all right of course you will need to change all of the answers to each frequently asked question as well all right so now that we have the design in place we can focus on functionality i'm just gonna quickly check if you guys are still joining in seems like you are so if you guys have questions leave a comment all right let's move on to the next and last part of this tutorial uh which focuses on functionality so now we have everything in place but we don't we don't have that click functionality going on yet so to make that work the first thing we're going to do is we're going to add some different consecutive css ids to these modules over here i'm going to open the first one i'm going to add faq dash item dash one so that's the first one it's going to be linked to the first row here which will assign a css id to in the next part but we're going to do the same thing for each one of the text modules over here and change the number at the end so the first one has a one at the end the second one has a two at the end the third one has a three at the end so you add this to the advanced tab over here css id and the last one obviously has a four at the end imagine let me just change that there and we're gonna do the same thing for the rows but we're going to use a different css id so we'll start with the first one um over here we're going to use faq dash tab dash 1 for the first one so this will be linked to the first item there and we're gonna reuse that css id with a different number at the end you get the you get the approach so it's gonna be two for the second row and three for the third one three only asked questions tap and four at the end for the fourth one there we go now that we have this kind of link going on so at this point they're just plain css ids but um there's a certain link between the rows and the modules being that number that number is what's going to help those two different things connect to each other inside the code we add and we're going to add a code module right below the divider module inside the first row of our first section so i'm going to add a code module there you can place this anywhere you want it just seemed like a good place to put my code module in and i'm going to add some style tags and script tags the style tags will be for the css code and the script text will be for the javascript jquery code okay so let me just grab the css code and by the way you guys can grab the css code by going to the blog post which is directly mentioned in the description below and you'll also find um a download folder where you can download the json file for free upload this layout to your website and get started with it without having to recreate from scratch but if you want to recreate it from scratch you can use the blog post to navigate through all the steps and grab the code as well so this is the css code we're using it's it looks pretty strangely positioned over here but that'll be fixed once we exit the visual builder and we're also going to paste the following jquery code inside the script tag so the css code in between the style tags and the following code in between the script tags and that will do for our design so i'm just gonna save this and exit the visual builder there we go so the css code and the jquery code make sure that by default the first option is enabled now if i click to through the different items different rows will show up and that's the reason why i changed um the title over here so you guys can see that these are actually changing so there we go i'm just gonna check to see if you guys have any questions don't see any questions regarding the tutorial so yeah that was it for this a live stream tutorial if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing tv design initiative where we try to put something extra into your design toolbox each and every week thank you for watching and i hope to see you in the next one bye you

Channel: Elegant Themes

Views: 2,390

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes, popper, html5 video controls, html5 video

Id: u1YwOCRI8p8

Length: 27min 10sec (1630 seconds)

Published: Tue Mar 30 2021