Creating Unique FAQ Designs with Divi

hello divination and welcome in today's tutorial will be creating unique column feq designs in Divi this is the final result of aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so let's start by creating a brand new page so right now I'm in my WordPress admin dashboard so I'm going to come over here to pages click on add new and the name of this page is just going to be FAQ since this is about a fake use then I'm gonna click on use Divi builder right so for this design we're going to build everything from scratch so I'm going to think here on build from scratch and before we get started I want to go into my section settings here so I'm gonna click on this gear icon and go to background now here we need to add a gradient so I'm gonna click on the second tab and click this plus button so I want to add my first color by clicking here on my first color now if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below alright so I'm gonna move on to my next my second color here and I'm gonna paste it like that and then I need to also change the gradient direction so in fact you know what hundred eighty degree degrees is okay now let's head over here to the start position and this needs to be set to 21 percent and now let's head over to facing so here we need to add a top padding so I'm gonna click here on spacing and for the top padding we're gonna set this to 4 V W now for the tablets and phone we might as well go in and set this up it's always a good thing to go in and set up these sizes because we want our websites to look great on all devices so I'm gonna click here on this little icon this tablet icon click on tablet and this is where we going to change our top padding to 15 and for the phone we need to set it to 24 so I'm gonna click here on the phone and set this to 24 alright so now that we've changed all our sizes the next stage now is to add our bottom padding so I'm going to go back to the desktop here and for the bottom I'm gonna set this to 2 VW so pretty much that's all we need to do here let's save and then now it's time to add our column structure so what we're gonna go with here is pretty much one column so I'm gonna click on this plus button and set my column now before we go in and add our modules we also need to do to add some settings to our column spacing so let's go ahead and do that so I'm gonna close this and click on my row settings so this time I want to go into my column settings and I'm gonna go into design and then click on spacing because here we need to add our right padding so I'm gonna set this to 1vw and might as well set up our tablet views so I'm gonna go in now and click on this little icon and set my tablet and phone so for tablet and phone this is going to be three VW and I'm gonna do the same here on the phone as well and then back over here on my desktop all right so let's go ahead and save and now it's time to add our text module so I'm gonna click here on this plus button and we're going to search for it first and select it right so we need to start off by giving us a title and also we need to add some dummy text in there so I'm just gonna delete this and add my lorem text and then here we need a title so we just wanna say frequently asked questions now this title here needs to be said to you heading 2 so I'm gonna highlight it click on this drop-down and set this to heading 2 now it's time to customize our colors so let's go ahead and do that by coming over here to the design tab so here we're gonna start off with our text color and I'm gonna set this to white so I'm gonna come over here to my eyedropper tool and then just drag this all the way here to the top to make it white just like how it is here and in the display okay so moving on we need to set the text size so I'm gonna come over here and the font we need here is called actor let's select it now let's set our text size so over here we're gonna set this to 1.5 VW and in the letter spacing is going to be one pixel and the text alignment is going to be Center so I'm going to scroll all the way down here and set my text alignment to Center now it's time to work on our heading text so the easiest way to do this is just to hover over here on the heading and then you just click on this brush tool so this will take you straight to your heading two so over here now I'm gonna set my fault and we gonna use for Donna for this so I'm just going to search for it and there it is I'm going to select that and we also need to set our font weight so I'm gonna set this to semi bold and we also need to set our color so I'm going to come over here to add color and this is gonna be an off-white color right now it's time to set our sizes for our headings so I'm going to come over here and for normal desktop we're gonna set this to three V W and we also need to set the sizes for the tablet and the phone so we might as well do that here by clicking here on this icon clicking on tablet and then I'm gonna add my size and that's gonna be for my desktop Oh in fact you know what the desktop is three the tablet is going to be five and then the phone is going to be six there we go so as you can see here this is looking definitely way much better now we also need to add some letter spacing so let's go ahead and do that by coming over here and our letter spacing is going to be seven pixels and we also need to add our line height and we're gonna set our line height to one point eight so that it becomes easier to read so if you if you take a look here on the three views you can see now this is much easier to read that looks way much better now for the line height I'm not sure if you notice that it's quite high on the tablets and the phone so we need to go in and adjust that so I'm gonna come back over here and click on this little icon and on the tablet you can see the space here it's a bit too much so let's bring this down to about 1.6 and then on the phone I'm gonna bring it down to 1.5 there we go so that's much better now so the next stage now is to adjust our sizing so I'm gonna come over here and we are going to set our width here to 100% next we're gonna come over here to the spacing and customize our margin so I'm here on the margins we're gonna set this to 1.5 just to give this a bit of breathing space there on the top so that opmod is going to be 1.5 and then our bottom margin is going to be -5 v w next we're gonna come over here to our bottom padding and you're gonna set this to zero V W and then for our left and right padding we're gonna set this to 7b w so I'm gonna activate my chain here because the value is going to be on both sides now it's time to add another divider so I'm going to save this and the next divider we're gonna add here is going to be a yellow divider so I'm gonna click on this plus button and search for my divider and here it is I'm gonna selected and let's go straightaway to our design click online and I'm gonna add my color in here and this is just gonna be yep now as I mentioned before if you want to use the exact same colors I will leave a link to the post in the show notes below alright so for our divider weight I'm going to set this to in fact it's come over here to sizing because that's where the setting is so by default it's set to 1 pixel let's set this to 4 so we want to slightly thicker and then for our width we're gonna set this to 12% because we don't want this spanning the whole width so I'm gonna set this to COFF percent and then it need to Center it next we need to head over here to spacing because we need to add a top margin so I'm gonna set my margin here to minus 1 BW and on the phone in fact why don't we take a look and see what it looks like on the phone so I'm gonna go to tablet and phone and you can see here this doesn't look great he's coming over here to our text content so let's set our top here to 10 V W so now this is spaced correctly there we go so that's what we need to do here let's save next we need to add another column so I'm gonna add a single column here and before we add in add any modules let's head over here to our settings and in the settings here I'm gonna start off by working on my gutter width so I'm gonna click here on sizing then use custom cut away I'm gonna set that to yes and then I'm gonna set this to 1 now the gutter width is the space between the columns so I'm gonna make sure that there's no space is there next I need to set my width currently it's set to 80% we want this to be 100% and also on the maximum width it needs to be said to 100% now let's head over to our spacing and add a bit of breathing space to our rows so I'm gonna come all the way down here to spacing and here we're going to add a top margin of 3 V W and a bottom margin of 11 V W go ahead and add it here now moving on let's at our padding so I'm gonna add 0 V W and for the bottom padding I'm going to set this to 11 V W and then the left and right needs to be 5 feet W and a quick way of adding your left and right padding's you just activate this chain and the value gets applied to both sides right so the next stage is to go into our column settings so I'm gonna click here on the secure icon and let's add a background gradient for this so I'm gonna click here on the second tab click on the plus button and we again start adding our colors now so the first color I'm gonna add is going to be a yellow sown and paste it in here and the second color here is going to be transparent and to add a transparent color here you just need to click on this icon here so our first color is yellow and the second color is transparent now let's head over here to our gradient type we're gonna set to radio and then our raid a radial direction is going to be top left so I'm gonna come over here and set this to top left now let's set our start and end position and for our start and end position is going to be 19 so I'm just gonna add my values like that and you can see here in the preview that we have this beautiful shape there in the top left next let's head over here to our design tab click on spacing and we are going to add a top padding of 0bw and for the left and right we are going to set this to 1bw so I'm going to activate my chain now let's head over here to the border and on the border here we're going to add one V W on all corners so that's gonna be our rounded corners and you can see here as soon as I've entered that we have our rounded corners there okay so moving on we need to also add our transform so I'm gonna go all the way down here to transform and we need transform translate so I'm going to click here on the second tab so what we're going to do here is we're going to add values on both accesses so if I need to disable this because the value I'm going to add here it's not gonna be the same so on the y-axis I'm gonna add 4 V W and then on the bottom so on the bottom we're gonna leave it as it is now the next stage is to add our hover so I'm gonna click on this arrow that's pointing up so I'm gonna click here on hover so on hover on tablet and phone so we need to make sure we click here on this little icon so on the tablet and the phone we are going to set this to 0 V W and you're gonna do the same here for the phone as well so notice that this is only happening on the hover okay okay so I'm gonna go back over here to desktop so the next stage is this we've made a lot of changes to it the first column we need to duplicate it because we're gonna use it a few times so I'm gonna go back to contents then I'm just going to switch back over here by clicking this arrow so we don't duplicate this about four times there we go so what we're going to do now is we're going to stagger these because we don't want them all in a straight line so I'm gonna go here now to my second column click on design transform and transform translates now this one here is set to 4vw so I'm gonna set this one here to 2vw go back and go to column 3 click on design transform now here we just going to be set this I'm gonna click here on transform translate and I'm just gonna add a 0 oops so just make sure that this one is reset there we go and then back over here let's move on to column number 4 and column number 4 is going to be 2 VW so let's go in and make that change I'm gonna click on this gear icon design prints fall and sort of make sure that that is 2 VW there you go and then finally column 5 needs to be 4 VW and that should be ok let's just confirm that by coming over here to transform and transform translate so you can see that is said to 4 VW so that that one is great now we need to add a toggle to module 1 so let's save this alright so the next stage is to add our toggle so to do that I'm gonna come over here to my wireframe view then I'm gonna go into my column one here click on this plus button and search for toggle and here it is I selected so you want to start by adding your title and in fact before we do that until I switch over here to the front end and for the title here I'm just gonna say how do I track how do I track my package and then in here I want to add my content so I'm gonna paste it here paste it like that so we'll get on on the state here you want to make sure the state is set to closed and then let's head over here to the background so here on the background we want to add an image so I'm gonna click on this plus button and we need an image which has the question mark I think is this one here so I'm gonna click upload an image and then what I'm gonna do next is I'm going to add a blend mode so I'm gonna come over here click on the drop-down and my blend mode here is going to be soft light now regarding the image here you can add whatever image that you want so it doesn't really matter what image you use here or you can sign this without an image in the background alright so now let's add our icon color so I'm gonna come over here to design icon and those reviews yellow here let's also add an icon color and make it yellow now we need to adjust the icon size so to do that we want to activate use custom styles for icon size and this needs to be set to 34 so we wanted nice and big and for the tablet and phone this needs to be set to 20 some add into 20 in here and do the same for the phone right so now that I've entered my size you can see now it's nice and big and my default here is it's closed now what we need to do next is to style the toggle backgrounds so to do that I'm going to come over here to toggle so we need to start here by adding our first color and this is the toggle background color so I'm going to click here on this eyedropper tool and paste my color and then over here we need to also need to add our color for the closed state so I'm gonna enter my color here and this is just an off-white color now while we there we also need to add a hover color so let's go ahead and add hover by clicking on this arrow that point is pointing up and then I'm going to add my color in here now as I mentioned before if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below okay so moving on let's go ahead and add our colors for our text so the colors that we're gonna start off with here are here on the title text because as you can see our title text here doesn't look great so that's what we need to make adjustments to right away so obviously here because we have a dot color we need to add a lighter color so we can read this easier so I'm gonna come over here and add my color so we're gonna do here we're gonna do the same here and add a title color right so for our title color here this needs to be this dark grey and then for the hover we are going to set this to a recent color that we used here and is this off-white color now let's just our form so here we're going to set this to actor and I know I've used this Eustis color I mean this font size before and we also need to set our alignment to the left now we need to set our size and here is going to be 1 point 5 BW so make sure you set it to be W not pixels so now we need to go to back to the toggle so we need to set up the clothes title text settings so here on the clothes we want to add a very dark color so I'm going to click you on the eyedropper tool and add my color like that and also making sure that our font here is actor and our alignments to the left and also our size is 1.5 V W now let's go to the body text so I'm gonna scroll down here click on body text and need to set our font here as well it's going to be actor our alignment is going to be left and our body text color is going to be off-white so I'm gonna click on my recent and choose my off-white color now let's set our size and this time is gonna be 0.9 V W and then our line height is going to be 1.8 next let's head over to spacing because here we need to make some adjustments to top margin and it's gonna be 1 V W and then for our top and bottom padding we're gonna set this to 2 V W and notice that I've activated my chain there and then my left padding left and right padding is also going to be 2 V W and I'm gonna activate my Chinese well next we're gonna head over here to the border and gonna set this to 1 V W right so the next stage is to add any bulk shadow so I'm gonna go with this option here and let's mix it let's make a few adjustments here on the box shadow blur strength so I'm gonna come over here and in fact you know what it's ok at 18 pixels and now I'm gonna go to my box shadow spread strength so as you can see it's a bit too much here so I'm gonna set this to minus 4 and then I'm also going to add my color here for my shadow so I'm gonna click on the eyedropper tool and paste my values between the brackets right so that's looking much better now so let's go ahead and save this so what we need to do now is to duplicate this a few times and then drag this to the right column so let's go ahead and do that so I'm gonna do there's a few times then I'm just going to drag this to the columns so this saves us time to redesign each and every one of these modules so as you can see now my layout is is looking great all you have to do now is to go in and edit this content and to edit this content you all you have to do is to get over here to your module settings and then you can just change your title here and change the body text as well in here and then once that's done you now have a complete design which has all different titles and the different content okay so let's take a look now at our final design so as you can see here when I hover we now see our background color and we also see that shape in there and if I click here on this plus button it now reveals all my content all right so go ahead try it out and see if you can achieve this design so there you have it thank you for watching if you like this video please give me a thumbs up and do follow us on all social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 6,601

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes, faq design

Id: _UULpOwyxss

Length: 21min 9sec (1269 seconds)

Published: Mon Apr 06 2020