0:00:00
What’s up everybody welcome back to the channel. So a lot of my tutorials are very focused on one thing like just teaching a specific concept so you can put that tool in your toolbox. But I want to mix in more real world are like practical tutorials where we build something that would exist in the real world and in doing this we can actually bake a lot of like mini lessons and best practices into one single video and that’s what we’re going to do today we’re going to be building a pricing section in oxygen and this pricing section let’s go ahead and we’ll just take a look at it inside a Figma here. This isn’t designed in Figma by the way it’s just I found one online that I that I like that I thought that would be good for this tutorial I screen shot it I threw it into Figma just so I can You know flip back and forth very easily to reference it but this is it right here. So it’s a dark kind of like a dark mode style modern pricing table it does have a toggle switch for monthly versus annual pricing so we’re going to have to work through that together I don’t use these toggle switches very often there is a default toggle switch element inside of oxygen if you have the higher versions so that’s what we’re going to be using for that and or you could even use tabs for for something like this and then if you look at the pricing cards here I like the fact that it has like included versus excluded features that we’re going to have to handle as well so there’s going to be some troubleshooting in here there’s going to be I just think a lot of really great many lessons whether you are a beginner whether you are intermediate at oxygen I wouldn’t say that this is an advanced tutorial by any means so if you are an advanced person you’re probably you know this is going to be easy for you obviously you know still following along you can pick up nuggets I I learn from other people all the time even when they’re not doing advanced things so it’s you know it’s good for everybody I feel like but this is what we’re going to build so let’s go ahead and get started the first thing I’m going to need is a section it’s going to have that chart like charcoal gray background and then I’m going to have a div in that section that’s going to be the dark background that’s going to have a little padding inside of it we’re going to use grid for these two pricing cards to put them side by side and create that little gap between them and then we’ll just throw in all the other content you’ll you’ll see how this comes together so let’s dive in I’ve got a page already set up for us I’m going to hit add and I’m going to hit section and we’re going to put a background color of this what’s it called dark alternative on there don’t want to do that obviously sections and oxygen have default padding inside of them already so we’re good to go there I can add a div I’m going to call this pricing price section pricing wrapper something like that let me go back to Figma so this is like the wrapper for the whole for all of the pricing area I might even say pricing area I don’t know like there’s not there’s it’s kind of an art and a science right I’m writing the word art I can’t talk and write it the same time will do pricing wrapper just like that and I’m going to do a background color of this like ultra dark one it’s not completely black in fact it’s it almost seems like it has a tiny bit of purple in it but it’s going to do for for what we’ve got going on all right so I’m going to put a width of 100% on here the one thing I will say about this card that I don’t like is it feels a little squish to me it can be a little bit wider and we’re going to make hours a little bit wider but I’m not going to make it the entire width I don’t think we’ll see like right now that that’s full with if you look at my site settings we go to settings and global and we go to with and break points so I have my my inner content set to 1280 pixels so if you if you’re kind of following along with the tutorial and you want to look exactly the same that’s what you’re going to need to set yours to all right we’ll go back to the structure panel here so I call this pricing wrapper now my pricing wrapper is going to need some padding inside of it that’s number one it’s also going to need a rounded corners and I would say that those are kind of like almost one M maybe 0.75 M something along there so we’ll go to border radius 0.75 M I think that matches pretty good and then we’ll tackle padding now for padding I love to use clamp so you probably seen this before so on desktop we can have a little bit more padding than we do on mobile without having to adjust it any break points so I’m going to go 2.8 padding on the mobile and we’ll do actually this is already set up from a different probably card I was doing so we’ll just steal that I think for them on the desktop and 2.8 at the smallest size is going to be just fine so padding I’m going to set to none I’m going to put the clamp function in and apply all and now when I add a heading which is what we need if you look here we need this track for free forever I’m going to go ahead and add that it’s going to be an H2 and then I’m going to say track for free forever just like that now on this main wrapper or pricing wrapper if you notice everything in there is light colored so I can just go ahead and change the text color on this pricing wrapper to a light color and it should take care of the base for all of our text all right and then we’re going to handle this lighter text a little bit differently.
0:05:30
All right so I’m going to go to advanced typography color and we’ll just choose this white color so you see I’m on the wrapper but now everything in there will be white and I’m going to center everything as well so primary we’re going to go vertical center and then I’m going to go ahead and save and we’re going to take a look at this on the front end we’ll just flip back and forth between the front end. All right so we’ve got our little pricing card area I actually think this width is going to work out just fine. It might be slightly too large but we’ll tackle that when we get there. All right let’s go ahead and put in this text right here so I’m going to go ahead and click on my heading I’m going to add a text element perfect and we’re going to type all that out what does it say we’re all casual users we offer a free plan with awesome features but if you consider yourself a hardcore tracker we got your back with a pro plan. Okay so choose between our free and pro plan below I’m just going to summarize and write something completely different choose between our free and pro plan below we also have annual price pricing options if you’d like to save some money. Okay perfect now I’m going to put a max width utility class on this if you notice that’s like one long little line I don’t like long stretchy lines like that and if you see in our design it’s not a long line it breaks right so we need that to break and the best way to do that is with my max width utility classes I did a tutorial on max width utility classes if you want to go watch that you can also steal my max with utility classes. Okay I said I wasn’t going to use oxygen in Ja utility classes for this so what I’m going to do is this is pricing wrapper so we’re going to go pricing wrapper heading just going to give that a class pricing wrapper intro text give that a class then our pricing wrapper heading we can go to margin bottom and we’ll try three two yeah we’ll do two the text looks good. Alright so the next thing I’m going to do is add our toggle so I’m going to go to add and under helpers you’re going to look for this switcher element and what that’s going to do is it’s going to load a bunch of stuff right here if we go over here in the structure panel and take a look you have the switcher which we’re going to actually rename to pricing and then I’m going to open that up we have switcher code we have the toggle row which is the actual toggle button we have switcher content one and switcher content to these are the two content is the switch back and forth now it’s a little bit quirky how this is done because what the switcher does is it like adds and removes the class and based on adding or moving that class it determines whether that div is hidden or visible and unfortunately because of that we can’t just style these divs that are inside we actually need divs inside those divs and you can see that that’s what they do by default is they put a columns element inside with this like weird pricing grid thing that doesn’t look like doesn’t look good at all I’m going to delete that that column and I’m going to delete that column and that’s going to leave me leave me with two empty containers for which to put my own pricing grids in what I’m what what what I was basically getting at was I’m going to use grid because we need our cards to be side by side right and we need a gap between them and all that good stuff best use case for that is grid and I can’t style this actual container because it’s going to mess with the display and it’s going to screw up your toggle so if you run into trying to just to change the display of this div that they give you by default inside the toggle switch and it is breaking your toggle just know that you need to put a div inside that div and then you can do whatever you want with that div but don’t try to use their actual wrapper div that they gave you it’s it’s very prone to breaking things so I’m going to first select this I need some spacing here so we’re going to do for rim on the bottom of that I’m going to grab my toggle row we’re going to put a class on that so pricing with pricing wrapper double underscore toggle and then what we’re going to do is like I said inside of these content divs we’re going to add another div okay so I’m going to add thank you add div added thank you okay and this is going to be pricing wrapper double underscore content and yes I think pricing wrapper yeah I will do toggle content okay perfect and then I also want to do a monthly class versus a yearly class that’s going to kind of future proof this a little bit it’s going to give us more flexibility so pricing wrapper double underscore toggle content double dash monthly and then on the one below will do double dash yearly in fact I can copy this with or actually I’ll just duplicate it I’ll try not to use you know as much stuff that you might not have by default as possible so I’m going to take the monthly off of here and we’re going to add the yearly so toggle wrapper double underscore content toggle cheese see I’m all messed up okay pricing wrapper double underscore double underscore toggle content yearly okay good all right this is probably a good time to talk about why I’m naming the classes the way that I’m naming them you see this like first thing that looks like a real class then there’s these double underscore and there’s these double dashes right so this is just BIM it’s it stands for block element modifier it’s a naming convention for CSS classes that helps you keep everything super organized and that way you know anybody that comes behind you like they know exactly what’s going on here they know that toggle content is is a element of pricing wrapper which is the block so we have block element modifier right so the block is the pricing wrapper then toggle content is a element inside of that and then the double dash is a modifier which means we’re making that thing maybe look different or have different properties versus some other version of it so that’s kind of how that works just to explain that all right so this right here I’m just going to throw a this is going to be this is going to be our wrapper that creates our grid right so I’m going to call this pricing wrapper double underscore toggle inner okay and we’re going to go with 100% with on that and we’re going to go with display grid column count to and we’re going to do a gap of three REM and we’re going to do a gap here of three REM that’s the row gap which we’re not actually going to need except on mobile but because oxygen’s grid builders a little bit quirky you actually have to reset that even if you know when you when we do the next break point down but that’s enough to get us going with that so I’m going to add a div this is going to actually be our pricing card you can see it right there and so I’m going to just call this pricing card and then I’m going to duplicate it so we do have two pricing cards and then I’m just going to just we can see what we’ve got on the front in so far I’m going to add text here and we’ll say pricing card one and then we will duplicate that and drag that over here and we’re going to call this pricing card to okay let’s take a look on the front end and see what we’ve got so we have two pricing cards and we have a switch and the switch goes to blank because if you look at our builder we don’t have anything in the second one but it’s functioning right and you guys can’t read the labels yet but we have a functioning toggle which is great we have two pricing cards in a grid which is also great all right so let’s keep moving along what we need to do next is we need to build out the structure of this card if you look at this card it has a top it has a middle and it has a bottom that’s how I see it I see it as three divs now I wouldn’t always do that you could definitely do it without putting divs inside this card however it has these little line breaks between them and I know that if I just create sections it’s going to be easy to use a border to put those little line breaks in there not not line breaks like horizontal rules but I don’t want to horizontal rule element just floating around in there I just want a top a middle and a bottom and then on the middle section I can actually just put a border top and bottom and call it a day we should be done with that all right so let’s do that let’s also see what color these things are so they’re so that’s what color as the background all right so pricing card here we go background color is this yes okay no that’s this actually does not get the pricing card I am on totally the wrong thing this is the pricing card right here and that does get that background color excellent now we’re going to also add padding to this and that I would say friends is like two or a rim somewhere in there so not with we’re going to go to size and spacing padding rim 2.4 apply all apply all thank you all right that gets us pretty close there I can go ahead and remove these text elements now and I’m going to go ahead and make my three sections so we’re going to say div out of div thank you and duplicate and duplicate and there it is there’s our three sections right there so this is the top right so we’re going to do pricing card double underscore top this is the middle we’re going to do pricing card double underscore middle and then we’re going to do bottom pricing card double underscore bottom perfect all right now on and then I’ll do pricing card section as well on all of those pricing card double underscore section and I actually have a section top section middle section bottom but you know nobody’s perfect pricing card double underscore section pricing card and I’m explain why I’m doing this just a second.
0:16:39
Okay so now they all have the section class but they all have their own unique class as well that allows me to do is what if I want to control the padding globally in all sections I add it to the pricing card section class but what if I want to do something on the bottom different from the top then I do the use the bottom class of the top class of the middle class or whatever so I can keep those things separate but also control them in some ways globally that’s what that’s a good use case for stacking classes like that on top of each other. Okay so for example I’m going to do pricing card section and I’m going to set the width to 100% and they’re all going to go to 100% see so I’m controlling them all globally but I also have the ability to control them individually as well which I’m going to do right now which is on the middle section so I’m going to do pricing card middle we’re going to go to borders and I’m going to go to the top border and we’re going to do one pixel solid and we’re going to choose this light gray right there and then we’re going to do bottom and we’re going to choose that same light gray and we’re going to do one pixel and we’re going to do solid and then I’m going to go ahead and throw text in there just so we can see what’s going on and if we look at our Figma again we see that the padding between the top and the bottom there and the pattern should the top of the bottom there and the pattern should the top bottom there is all pretty much exactly the same so we are going to go back I’m going to go to my pricing card section which controls all of them and top and bottom and the bottom is going to get rim and that’s going to be like let’s try to and see how that goes to to and I think that might get the job done we’re going to hit save and I’m going to refresh see what we got there you go now that line is a little bit light so I’m going to go back to border here we’re going to choose the top and we’re going to change this to see it was this one is the color of the card so we can’t do that I want to be like to do a dark let’s just look at that real quick that actually might work I don’t know let’s not do that let’s do that and then changing the let’s do let’s do like 70% I wonder if that’s actually going to show up no no not at all what we need to do probably is white and then we need to take that all the way down to like five or something like that let’s see how that looks that’s much better I don’t even know if you guys can see that but honestly you can barely frequency it on the one we’re doing so that’s it is there though I’ll bump it up just a little bit we won’t completely crush the contrast ratio rules okay save that’s a 10% okay that just broke it let’s do it again white take it down to 10% safe refresh that’s much better okay that’s what we’re going to go with so I’m just going to copy that and go to the bottom take that out put that in safe boom okay we’re good to go all right now we’re going to tackle this top section so the top is going to free zero dollars and then this little text that should be nice and easy so probably the best way to do this we take a look at it it is complicated by the fact that the price number is to the right of this and then we need this all on its own line which tells me that this is going to I’m going to put another div in for these two things and then this will be right below it okay we’re trying to cut down on the number of divs needed but you know sometimes you just you need divs right so this is going to be pricing card top dash inner okay and with on this is going to be 100% as well we’re going to set the flex to horizontal before allowed to set it to middle and we’re also going to use space between okay and then we’re going to put a heading in there this is going to be an h or and this is going to say free I think so what it says just as free yeah free and then zero dollars all right cool so that that definitely needs its own class so pricing card and we can just call this heading you don’t have to put it in the top and all that you don’t have to do like inception with your classes the pricing card only has one heading so this is the pricing card having all right great and then we’re going to add a text element not a text link nope we just want text thank you text cool this is going to be zero dollars and we’re going to call this pricing card double underscore price great all right and if we look at the design there that’s definitely going to need to be bigger and then it’s going to be this lighter gray color so font size on this we’re going to go with rim four three three looks good and then ask for text color we can just use this there’s already this kind of like light gray in there let me check all of our options here that one actually is that one’s pretty close like we look in it’s definitely definitely lighter than that let’s just rock and roll with this one for now that looks fine it’s not white you know like the heading is so does its job now we do need to protect these two things from ever bumping into each other right now they’re forced apart because of this space between on the flex but if they ever were to come together they would do that and that would be a big problem right so one way that we can just protect this is we can have a large I don’t think these are ever going to stack on top of each other like we look at the smallest break point even the smallest break point these things are not anywhere close to touching but just to be safe I’m going to put a margin of two rim on the left hand side of that price so if ever was to try to meet with the the heading on the left hand side there would still be a gap.
0:23:24
So that works well I can even do three rim on that probably get away with that what we do need is if you see my heading is going to scale down on mobile because it uses clamp I didn’t put clamp on the price though so that’s not scaling down so we’re going to need to fix that. All right so I’m going to go to fluid response actually I can just steal I’m going to go settings we’re going to go to headings we’re going to go to age four steal the clamp that’s on there and then use that as the font size here perfect and now that will be perfectly match that heading size and it’ll scale with it all the way down as well perfect OK now below that div I need text I don’t need X I need text it will not let me type T thank you OK text this is going to be called pricing card double underscore description you see all these elements we’re giving names to but the naming convention keeps them all together keeps them all nice and organized. All right so this one needs to say essential features to help you track your expenses all right so essential features that doesn’t need to be capitalized to help you track your expenses period. And then if you see that is actually broken to two lines we’re going to make those determinations as we go see what needs to happen there but I think for now we are for now we’re good. One thing I’m looking at here pricing card section spacing OK so yeah the top and the bottom all right so on our actual outer pricing card I don’t think we need top and bottom spacing because our our inner is taking care of it we’ll see how that plays out as we continue to design the card the other thing we’re going to need and we go back to the structure panel I believe that these are rounded yeah like 0.5m somewhere in there looks like so I’m going to choose my whole pricing card wrapper and I’m going to go to border and I’m going to go to M and we’re going to go to 0.5 and around our cards let’s hit save I’m going to throw a button down here real quick just to check our spacing. So now we have something in the top we have something in the middle we have something in the bottom we can better determine what our spacing is looking like. OK perfect so yeah we’re missing a little bit of padding as compared to this so let’s go ahead and take a look at our outside card. So we have 2.4 rim on the outside. We’re going to change that to 3.
0:26:15
And then I think on here, we’re actually pretty good on here. We’re going to do 2.4 and 2.4 and save. Now we’re better. I think we’re looking more like what we’ve got going on here. OK. Now what we need to do is change our color here. So actually, what we can do is on our pricing card, let’s go to typography. And let’s choose that lighter color that we were using. That’s way too light. Yeah, too light there. We’ll just do this one. And then on the heading, we can actually change it to white. Instead of changing all the other text, because if you look at the card, it’s all the same color except for the heading.
0:27:11
The heading is designed to stand out a little bit. And I may even come through and I will probably choose a color that’s not quite as bright as that, because it’s not creating the same kind of contrast effect. We’ll get there. All right. Next, let’s do our button. So that’s like kind of a purpley blue download now and try now for free. So we’re going to call this download now. And we’re going to change this button color. We need to give this a class. So this is going to be pricing card, double underscore button. And button color, we’re going to go with what I say, purpley blue.
0:27:50
Need more purple in there. OK, let me look at this again. It’s definitely lighter. I’m not the king of colors here, but we’re going to get it done. All right. We’re going to do borders. I think I, yeah, it still needs to be lighter. But let’s do border radius. We’re going to do 0.5m. See how that works. And then we are going to go to typography and line height set to 1.1. And then we’re going to do the rest with spacing. And I’m going to use M’s for these so that the padding actually in small elements like this, I want the padding to kind of scale as the text scales.
0:28:34
So M is a really good way to do that. 2 and 2. OK, perfect. Definitely getting a lot of lag here. Let me play this color just a little bit more. So we can see if we can get it a little bit closer to what we’re trying to mimic here. OK, I think that works. All right, let’s take a look at it from the outside. Let’s also stretch it all the way across. So we’re going to go to size and spacing, width is going to be 100%. And then there we go. So that’s done. I think the text size is OK.
0:29:12
But what I’m going to show you is typography. If I use this little calculator, we can take that text down to 1.4 but started at 1.8. Or maybe 1.6 would be better. I’m going to grab the clamp function and I’m going to put that in here. So font size is none. Throw the clamp in. There we go. And that’ll actually scale down now as we go. Because we are going to have their pricing cards is not a lot of space to work with. While we’re here, too, why don’t we make our grid responsive? So if I go to 992, that’s clearly, that still actually might work.
0:30:00
It might be a little squishy. I don’t know. I think that’s going to be a little too squishy. So let’s go grid. Let’s change it to 1 there. And we got to go back and reset our gaps because it overrides the gaps. OK. But that works. OK. So now we’re not dealing with a card flying off the screen like we were a second ago. All right. So that’s good there. I think all that looks fantastic.
0:30:24
OK. Next, what we have to tackle is we have to tackle our little list here. This is the fun part. So we need these items. And we need them to have checkmarks or Xs. First thing I want to do is I want to go to the noun content or the noun project. Dotcom is where I get all my icons from. You do need a paid account, unfortunately. So I’m going to log in. And I’m going to go here. Cool. We need a checkmark icon. You’ll see why I like the noun project in just a second.
0:30:56
So this looks like the actual, like, very close, right, with the check coming out of the circle. So we’re going to grab that one for sure. And we’re just going to make it white. And then I’m going to download the SVG version. We’re going to call this checkmark white. And then I’m going to grab an X. And if we look at our figmo, you’ll like barely see it. It’s an X inside of a circle. Kind of a thicker circle, though. So something along the lines of, and there’s definitely like padding, kind of like this. It’s this one right here. This will be good.
0:31:35
All right, so we’re going to do this. And we’ll do X, Y, perfect. OK. Now we’re going to call this. We are just going to use a text box for this. It’s going to be super easy. So I just click text. And then we’re going to do pricing, card, double underscore feature. This is another one where we’re going to layer the classes. Going to get two different classes. Feature class, it’s going to give us global control. And then it’s going to give us a modifier class. So we have pricing, card feature, pricing, card, double underscore, feature, double dash. And then this is going to be included. And then I’m going to copy that.
0:32:18
And then I’m going to duplicate this. Actually, I don’t need to copy it. Yeah, I do. Paste. Now I can do excluded on this one. Perfect. OK. So I’ve pricing, card included versus pricing, card, excluded. Then I have pricing, pricing, card feature included, pricing, card feature, excluded, pricing, card feature gives us global control. All right. So on the pricing, card feature with the gives us the global control. This is how we space them out. All right. So I’m going to do margin, bottom of, and then maybe even margin, top.
0:32:52
So we’ll do top and bottom. I’m not sure yet. Maybe we’ll just do. If we do top and bottom, we don’t necessarily need to isolate the last one and remove our padding. We could also just do all top as well, except not on the first one. There’s a bunch of ways to do this. I’m just going to do one rim for now. Let’s see how much there’s space out there. Yeah, it’s not a lot. Probably need to grab this as well and use this for our font size, because it is a little bit smaller text, I think. Let’s just see if this changes at all. I don’t know what our default font size is, honestly. Okay.
0:33:34
Yeah, that’s good. Okay. And see how I’m controlling that globally because I’m on pricing, card feature. But then when I go to included, that’s how I’m going to determine which we’re going to do right now, the check mark versus the X. All right. So pricing card feature included, that’s what we’re on right now. We’re going to do a before on this. And then we are going to do size and spacing. Let’s try rim, three, height, rim, three. And let’s try background image. And we’re just going to throw in these icons. So I’m going to go to downloads, grab my two icons, throw them in. So here’s the X. And let’s select the image.
0:34:22
And then let’s go to manual and go to actually, let’s do just contain. Let’s try that to start off with. So we’ve got sizing and then we go to layout and let’s do flex. We can probably do, yeah, flex, row, actually. Let’s do inline flex. And then on the original, we can do flex and then do row and then do center. Okay. Next, what we need to do is go back to the before and we’re going to put a margins. This is the before is the icon. So we’re going to put a margin on the right of one rim. And that’s going to give us our spacing there. Okay. So now any time I put the feature included class on something, it’s going to have, oh, well, it should not have the X. Let’s fix that.
0:35:24
I’m dyslexic, by the way, if you guys haven’t known yet. So I often do things backwards, but I’m not like really focused. Okay. So I was thinking included in my mind, but chose the X. That’s, it happens to me all the time. All right. So that looks good. What I’m going to do now is watch this. I’m going to do included on this. And then I’m going to copy the included to the excluded. I’m going to delete the included. I’m going to go to the excluded. I’m going to go to the before, which is the icon. And I’m just going to change the icon, but it copied over all my other settings. So I’m going to browse and I’m going to choose the X.
0:36:06
Good. So now we have a check and we have an X, but we do have to troubleshoot this because they’re different sized icons, even though I set the size. I think I can do cover maybe. And I don’t know if that’s going to work because it’s looking to me like one of them has like maybe some padding around it where the other one doesn’t. Ah, so it’s probably good for clients to watch too. The kind of stuff that you have to troubleshoot that they wouldn’t expect the chef to troubleshoot, you got to spend time fixing. It’s just, yeah, it’s a lot. Okay, pricing card feature included. Okay, what was I doing there? Nothing. All right, before cover, contain manual, rim, rim. I don’t know that that’s actually going to fix this background manual.
0:37:04
3 and 3. Yeah, one’s still clearly bigger than the other. I can somewhat fix this by just, I mean, this is really like, it just feels like the excluded one is bigger. It just feels like a really chinty way to do this, but we do want to set these to no repeat. So I can just kind of like eyeball it almost, right? Let me go to the before on this, advanced background, and then we’ll go also no repeat on this. And yeah, the other way that you can do this is just changing the, the, well, yeah, that probably wouldn’t be a good way to do it either. So the X is still looking bigger. So I’m going to go to background. We’ll just keep adjusting this at 2.6 maybe. And then the problem with it is, okay, I think what we can do left 50%.
0:38:07
Yeah. And then top 50%. Let’s just center all of that. We’re changing it size. We’re actually getting there. I just want all these settings to be the same. So left 50% top 50%. We’re almost there. We’re going to go to before go to background 2.5, 2.5, it’s like subtle adjustment at this point. Okay. Is almost exact. It’s almost exact. Now what I’m going to do is if you look at our figma, that is dim, right? So I’m going to go to the before background.
0:38:51
Let’s see what the best way to do this is. Probably affects opacity and do a point 4, something like that, point 3. I think point 3 works. Okay. So now I’ve got my included and my excluded features ready to go. So we’re going to do simple tracking, detailed statistics, smart reminders, simple tracking, detailed statistics, and then actually all needs to be in those. This is going to be detailed statistics. And then smart reminders. And what else we got? Smart reminders is not included. And then export to CSV and dark theme. So we will do, we’ll just delete this. Keep that nice and simple. Okay, detailed statistics, smart reminders, export to CSV, duplicate, duplicate, export to dot CSV and dark mode.
0:40:04
Okay. What I’d also like to do is actually I’m going to take off something before where we put that, I’m going to clear that effect. And I’m just going to put the effect on the entire thing. I don’t think it makes sense to like dim the icon, but not dim the text so people like can read the text, but can’t really see the icon as well. It should like clearly show the entire row is dim so that it’s not included. That’s how I would do it. So I’m going to override the designer on this one. So opacity, we’re going to go to point 3 and we are going to, is that our feature? Hold on. We’re still on the before. We need to go to the entire row, Kevin, all right, point 3. Here we go. Now we’re dim.
0:40:46
So now, now you can clearly see the distinction of what’s included versus what’s not included. I think that’s the best way to do it. All right, so remember this is a pricing card feature and they all had a margin top. So we need to do add state first of type and then margin top is going to be zero. And that’s going to take it off of the very first one. That’s all you have to do to do that kind of thing. All right, let’s say we look at what we got on the front end. We’re actually getting closer because now we’re just going to duplicate stuff. Like we built the framework. We just got to duplicate stuff and change the text and all that. Yeah, like we’re like so close guys. We’re so close on this. All right, so I do think I want this to break regardless of the fact that it has room. I’m going to see if any of my classes get it done 320 doesn’t quite do it. So I’m going to go to description, size and spacing, max width, rim, and we’re going to do like one.
0:41:45
Oh, that’s terrible. 220. 320 300. That’s better. We’ll do 300. We also want to make sure that all of our text inside of this top section is left and then everything in here is left and then the buttons find by itself. Okay. So save, let’s go take a look on the front end. Now it breaks to a second line. It just really helps break things up in the design. I think this can stand to be this entire card. Could stand to be just a little bit. This is where we can throw one of those max widths on there. 960.
0:42:28
That’s going to get us more. Yeah, that’s a little too much. That’s going to get us more towards what the actual design look like. So I’m going to do rim on this. So remember, 1280 is our default, so that would be 128. I’m going to go with 110 maybe. 112. Let’s do that. And then in this entire wrapper, we can set this to center. Okay. So it’s a little tiny bit skinnier. That looks good. All right. So we’ve got that going. Let’s go ahead and fix so that we can actually read these.
0:43:05
So this is an oxal switcher active toggle. Okay. Let’s see how this is set up. Toggle row. I bet you what we can do is get away with just putting this on here. Nope, we can’t. Okay. No problem. Label label. Okay. Oh, because the color set on the actual label. All right. We’ll do that. Save. So now that looks better.
0:43:32
You can read it. If you look at our fig mud, though, we need the button to be the purple color that we have down here. So I’m going to grab that color. And we’re going to click on the toggle itself. And pricing wrapper here. We’ll do this oxy toggle. It’s got a color set. We’ll get rid of that and throw that on. Pretty easy, honestly, right? There you go. All right. So we have free. Now we need to delete this card. And we can literally just duplicate this card.
0:44:08
And then this one is going to be what is this pro? And that’s 299. So this is going to say pro. This is going to say 299. And then what do we, what do we got for text here? Advanced features for those who want more control. Advanced features for those who want more control. Perfect. And let’s go ahead and take care of our options here. So simple tracking, detailed statistics, smart reminders, export to CSV. OK, it’s perfect use case. They all say the same thing. So all I have to do is remove the excluded and add the included class. So included and remove the excluded. And the included and remove the excluded.
0:45:05
There we go. So the check, the Xs changed to check marks. And they all get to be nice and bright. So now we’re going to save and boom. Perfect. So now all we have to do is create the yearly. So what I’m going to do is grab this entire wrapper that’s in here. You see how fast stuff comes together after you’ve already done the basic framework? I’m going to paste that in. Remember, this is going to get the, we’re going to not have the monthly on there though. We’re going to have the yearly. All right. And then free is going to be free. But pro is going to be so 36. Let’s do like, I don’t know, $29.
0:45:48
Let’s do $2.99. Time they usually do it like, yeah, $2,990. We’ll just keep it flat at $29. So really that’s all the changes. So I’m going to hit save. And I switch boom. Look at that. Pro is $29. And then all you would have, we have changed the button text. So try now for free. I’m going to call it choose this one. So or sign up. Or I’ll do subscribe to pro. And then on this one, I’ll say subscribe and save. So the button text will change effectively to when the price changes.
0:46:30
So we’ll save. See how that works. There you go. Subscribe and save. And then you would have two separate links. That’s another reason why you want to not just change the price dynamically with the toggle. Because other things are going to change as well. Like this could change. You might even want to add a bonus feature, right? Like, what if we did that? So if I duplicate this, and I’ll say, hey, if you’re a pro member, I mean, annual plan, you get personalized support. OK, we’ll hit save. And then I can even grab this excluded one, pop that in there, and say personalized support.
0:47:13
Let’s not capitalize the S. OK. And then here, we can throw that in. And we can throw, oops, nope, let’s copy this one. Let’s delete that one. OK, toss that in. Toss that in. Perfect. So now, with the yearly, see here, you get everything. But you don’t get personalized support. But if you, oh, we need this to say monthly, and this to say yearly. So we toggle that. Now you get the personalized support, subscribe, and save, and the price changes. All right.
0:47:46
All we have to do here is make this a monthly, and make this a yearly. OK, hit save. Now let’s take a look at how we’re doing from a mobile responsive standpoint. So we’re going to come in and look in here. This all looks good. That’s a nice break. Nice break here. Though we’re getting, there’s some sort of default padding in the switcher content. And it needs to be in the switcher content active. Yeah. Yeah. Yeah.
0:48:32
OK. Yeah. There’s a lot of padding in there. All right, let’s go to all devices, and let’s go to zero and all devices. There we go. OK. Yeah. Yeah. That was definitely affecting things as well. How do we look now? Yeah. OK. Now we actually have the spacing and starting to match all around.
0:48:56
I think that’s looking pretty good. Now we can actually stand, because it’s not going to be so squishy. We can actually make this a little bit more. So we’ll just do 100 rims. Sorry. This is basically 1,000 pixels. Save. Perfect. Look at that, guys. I think it’s pretty much done here. So we’ve done a great job. If we go down now and look at all breakpoints, toggle is still going to work there. OK.
0:49:28
And down at the very, very last breakpoint, still looking good. Nothing’s squished together. These could stand to have a little bit more spacing between them. So let’s just grab this wrapper. It’s got the top inner on it, size and spacing. Rim. Let’s go with like, let’s just try one. Save. Actually, don’t want to add that there, though. It’s a terrible place to add it. Why don’t we just make it one from the top? And now we’re done. Now I’m going to say we’re done. OK, let’s go ahead and boom, boom, boom. Looks good.
0:50:08
Toggle. Looks good. We’re good to go. All right. So let me go back to camera here. All right. Yeah. That’s it, guys, for the tutorial today. If you have questions, drop them in the comments below. I try to read and respond to every single question. Hit like, hit thumbs up, hit subscribe, all that good stuff. I’ll be back very soon. I’m doing a lot of work inside the inner circle, releasing some really detailed tutorials, just a 90-minute tutorial on adding a dynamic health condition section to a real client website.
0:50:42
We did custom post-tides. We did filtering facets on a conditions grid. We did a lot of really cool stuff. So they’re learning a lot in the inner circle. I’m trying to keep up with the once a week posting schedule here on the YouTube channel, because I don’t want to forget you guys, even if you’re not in the inner circle. I want you to learn things. I want you to benefit. I want you to be able to grow in your oxygen skills. I want you to be able to grow in your agency skills. But if you are interested in going deeper, inner circle is the place to be. And you can check out a link in the description for that.
0:51:15
All right, I’m out. Bye.
