Turning Columns Into Pricing Plans with Divi

hello divination and welcome in today's tutorial I'm gonna show you a step-by-step how to turn columns into pricing plans with Divi this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so the first thing we're gonna do is to create a brand new page however you can use this technique on any existing pages that you have all you have to do is to add a brand new section alright so I'm gonna come over here click on add new we're going to give our page a name I'm just gonna call this pricing and then I'm gonna click on use Divi builder next I'm gonna click on build from scratch and then I'm just gonna close this for now because we need to start by adding a gradient for our section so I'm gonna come over here to my section settings click on background and then I'm gonna click on the gradient tab click here on this plus button and add my first color I'm just gonna override this now if you want to use the exact same colors I'm using throughout this tutorial I will leave a link to the post in the show notes below and on that post you can also download that actual design all right so now I'm gonna click on my second color and this color here is going to be white and now I'm going to adjust my start and end position so my start position here is going to be 30% and my end position is also going to be 30% and make sure you leave the gradient type on linear now let's hit head over to spacing because we need to give our design some breathing space so I'm gonna come over here to the design tab spacing and we are going to add 200 pixels to the top and bottom so I'm gonna activate my chain and this will automatically add 200 pixels to the bottom now it's time to add a new row so I'm gonna save this click on this plus button and we are going to go with three columns now before we add any modules let's go into our row settings and make some adjustments so first of all I want to come over here to the design tab click on sizing and I'm gonna activate my gutter width and set it to 1 now what the gutter with is is the space between the columns so we want to make sure that for our design we don't have any spaces so that's why we said to one next we're gonna come over here to with and make sure that it's set to 80% and our maximum with it needs to be 1400 pixels now it's time to go to our column settings so I'm going to click here on content and let's start with column one so I'm going to click on this gear icon click on background and here we are also going to add a gradient so come over here click on the second tab click on this plus button and we're gonna start by adding our first color and then adding our second color which is going to be white now this time our gradient type is going to be radio so I'm gonna click on this drop down to change this to radio and the direction at the radial direction is also going to be bottom so it changed here to bottom and my start and end position is going to be 31% so I'm gonna add it here and also on the end position now let's head over to our borders so I'm gonna click here on the design tab border and my corners here is going to be set to 20 pixels now it's time to go to our box shadows so I'm gonna scroll down here choose box shadow and the option I'm gonna go with is this one right here and I'm also going to add a color to my shadow so I'm gonna click on the eyedropper tool and just pace my color between the brackets right so my box shadow blur strength needs to be 80% so I'm gonna set it here to 80% now let's go to the scale so I'm gonna come over here to transform so my default state here is going to be 100% for both sides rock bottom and right but on my hover States I'm going to add 120 percent so click on this arrow pointing up to activate your hover States click on hover and then just add 120 percent in here now let's head over to transform translate so I'm going to click here so I'm gonna start off with the default state and the bottom in fact it means change we need to break this chain because we are going to add different values here so for the right this needs to be set to 0 and or the bottom we can set this to 34 now let's go to the hover tab and here we need to set this to zero the bottom and zero for the right right so let's come back over here to default now let's go to transform rotate so here for the left we are going to set this to 352 degrees and then we're gonna come over here to hover and on hover this needs to be set to zero now let's head over to the overflow so I'm gonna click on advanced visibility so the horizontal overflow needs to be set to visible I wanna change it here and the vertical also needs to be visible set it here now the z-index we are going to set this to nine and we also need to set the z-index on hover and we're gonna set this to 11 now it's time to go on to transitions and here we are going to set this to 500 milliseconds that's for the duration and pretty much that's all we need to do here I'm gonna save this and now we need to go into column two so I'm gonna click here on the skier icon and as we did before let's start with our colors so I'm gonna come over here to my background click on the gradient tab and then let's thought by adding colors so I'm going to add my first color here and by the way as I mentioned before if you want to use the exact same colors I'm using throughout this tutorial I will leave a link to the post in the show notes below right my second color here is going to be white gradient type needs to be radio and my radio Direction needs to be set to bottom and my end in start position needs to be 31% for both start and end now let's head over to the border so we're gonna come over here to design border I'm gonna set this to 20 pixels now we're gonna go to a box shadow choose on type and the blur strength we're gonna set this to 50 and then we're gonna add our box shadow color so I'm gonna scroll down here and click on this eyedropper tool and paste my color between the brackets so the second column is our featured pricing plan so when we do our transforms this is gonna be slightly different too what we did in the first column right so we are going to scroll all the way down here to transform so for the default state here this needs to be set to a hundred and twenty for both sides now let's into the hover States so to do that I'm just gonna click here on this little arrow pointing up click on hover and I'm gonna set this to one hundred and twenty and this applies of both sides next we're gonna come over here to advanced click on visibility set of overflows to visible for both vertical and horizontal and our set index is fine at nine in fact let's set this to 10 and our set index on hover we're gonna set this to 12 finally on the transitions we're gonna set this to 500 and then save now it's time to go into column three settings so again we're gonna come over here to the background add our first color but by coming over here to the second tab and clicking here on our first color I'm gonna replace what we have here by default click on the second tab choose my color and this color needs to be white and my gradient type is going to be radio and the position is going to be bottom as well and then start an end position we're gonna set this to 31 now let's add our borders so I'm gonna come over here to design border set this to 20 pixels add a box shadow come over here choose my style blur strength he's going to be 80 and then I'm gonna add my shadow color by clicking on this little icon and placing my color between the brackets now let's head over to our transform settings so here everything is going to be default at 100% on both sides and on the hover this is where we need to add 120% so I'm gonna click here click on the hover tab and here we're gonna set it to 120 percent next we're gonna come over here to transform translate break the chain and on the bottom here on hover right let's make sure we are on the default state let's set this to minus 34 so I'm gonna break the chain here set this one here to zero and now let's add our harvest dates and this time this needs to be set to zero and then we need to go into the rotate alright so on the transform here let's set this to eight and then on the hover this needs to be set to zero now it's time to go to the overflow so I'll pick your visibility change this to visible change the vertical to visible as well and the set index on hover we're gonna set this to 11 then on the transitions we're gonna set this to 500 and then we're going to save so we've done quite a lot of settings here all right so the next stage now is to start adding all our modules so I'm gonna start here by adding a blurb someone is search for it select it so let's start by giving this a title I'm just gonna call this individual we're going to get rid of the text here we don't need that next we can come to image an icon and then we just gonna make sure we click here on use icon and then we're gonna choose our icon that goes with our first item so for this you can use any icon that you want that goes with the design you're working with so I'm gonna go ahead and choose this one here now let's call this Tyler has a custom our icon so I'm gonna come over here click on image an icon make sure this is set to black placement needs to be on top use icon font size now this is important because this is where we can adjust the size of this icon so I'm gonna make sure this is about 50 because I don't too big now let's go to our title settings so I'm gonna come over here click on this brush tool this will take me directly to my title setting so I'm gonna click here on default and set my font to Poppins alignment is going to be centered our text color here is going to be black and for a title text size I'm gonna set this to 27 pixels now let's head over here to spacing and give this some breathing space so first of all I'm going to start with my margin so I'm gonna set this to 80 and save next I'm gonna add a divider to this I'm gonna click here on this plus button search for my divider module select it and make sure show dividers set to yes and now let's give this line a color so I'm gonna click here on line set this to black next we're gonna come over here to sizing so what we're going to do here is we're going to change the weight the weights to 6 pixels the width to 14% and we you're going to Center it and for the height you say this to zero now on the width here make sure this is 14% not pixels there we go so that looks much better now and lastly we are going to add some top margin here just to give this some space so I think 50 pixels looks great alright so now that we've added all that I'm gonna save this and now we're going to add a text module by clicking this plus button and I'm gonna search for it in fact it's right here I select it now you can add as much text as you want in here because this is just going to work as my dummy text okay so what we're gonna do now is to stylize this text so I'm gonna come over here to design text change this to Poppins font weight we're gonna set this to light and the alignment needs to be centered because everything else is centered here and our text color is also something that we need to work on so I'm gonna come over here click on the eyedropper tool and paste my color in here now as I mentioned before if you want to use the exact same colors as I'm using throughout this design I believe a link to the post in the show notes below next over here we're going to set our line height and it's gonna be 2 point 3 p.m. now let's head over to spacing to give our design some breathing space so I'm gonna come over here to spacing and start with margins so my top margin here is going to be 50 pixels and then I'm going to add a top and bottom padding of 10 pixels activate my chain here to add my 10 pixels to the bottom so pretty much we're done here let's save this and it's time now to add our pricing so I'm gonna save this add another text module by clicking on this plus button searching for my text module here and selecting it so my pricing here I'm just gonna call this $50 per month now it's time to stylize it so I'm gonna come over here to design texts set this to Poppins now our font here is going to your font weight it's gonna be ultra heavy heavy center it and our text size is going to be 47 pixels so I come over here set my size and my line height is gonna be 1 a.m. so when it comes to sighs here you can always adjust it to whatever you know works for you so in fact you know I've changed my mind I think I'll set it to 26 now it's time to go to spacing because we need to give this some breathing space I'm gonna come over here to spacing and start with my margin of 15 top and bottom of 80 pixels so that's what we need to do here I'm gonna save it and add a button to this column as well so on this to click here to add my button and the button here we're just gonna call this by now and make sure you add a link here so that it links to you whatever product it is that you're selling next I'm gonna come over here to design because we need to work on this button here to stylize it so first of all I'm gonna Center it so everything else here is centered and then I'm gonna click on button use custom stands for button so let's solve for the text size so here we're gonna set this to 17 button text color is going to be black button background color here is going to be white now we don't want to board the hair so we are going to remove the border or the radius we can set this to 100 and for our font here we're gonna make sure it's set to poppins so that it just matches with everything else that we have and for the font weight we're gonna set this to bold as well make it really stand out and then we're gonna go to spacing to give us some breathing space so I'm gonna come over here and now on the margins we're gonna set this to 50 pixels and margin bottom we're gonna set this to minus 40 now for the top padding we're gonna set this to 23 and left and right it's going to be 70 so now as you can see our button is nice and big and we also need to add bottom padding here so our text is centered now let's head over here to a box shadow so on the Box shadow here we gotta go with our first option here so now you can see the button really pops out and we're going to adjust our blur strength so I want to come over here and set our blur strength to 250 and then we're also going to change our color here I'm gonna paste it between the brackets and then we're going to save now what we need to do is to clone all these modules here and pay in these two columns so the easiest way to do this is just to come over here to wireframe mode and then just duplicate and drag them over to the other column so I'll just do one and then you can just do the rest so I'm gonna click here drag this over here click one more time drag it over to the right and then just do the rest with the rest of these modules so this is how this should look and if we switch over here to desktop mode this is how our design looks like so now what you need to do is to go in change the pricing change the icons so that they all look unique so I'm gonna change this to professional and this one here to enterprise and we can also go in and change these icons so I'm gonna come over here image an icon so that's not like that's gonna be the icon I'm gonna go with and then come over here choose my icon as well so I'm just gonna drag here so for Enterprise I'm gonna go with this one save that and over here as well you can change the pricing so let's say this could be maybe 99 save that and this could be maybe $2.99 so what you can also do is to go in and change the contents here in the description so that's everything is unique so now we're going to just save and publish and then let's test and see if this is working okay so I'm gonna exit my visual builder here and now you can see here my animation is not working so there you have it thank you all for watching if you like this video please give me a thumbs up and to follow us on our 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: 5,190

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: Gr5HlS8BflU

Length: 17min 14sec (1034 seconds)

Published: Mon Sep 23 2019