Permaslug Home Page Redesign in Oxygen Builder

[Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] all right good morning everybody or uh good afternoon good evening wherever you are in the world we are gonna get started here pretty soon but i'm gonna just kind of get everything warmed up and wish you guys all well so we're super excited for this let me know in chat if the microphone volume is good too loud too low got a different mic so it might sound a bit different so keep me abreast of anything that you guys are seeing or not seeing and we'll just kind of chill here for a minute let more people trickle in because i do think there's going to be some folks here that come in in just a few minutes but good to see everybody one thing i was curious about is where you are in the world so um if you let me know what current time you have obviously time zone is helpful but if you guys want to drop your current time in the chat i'm curious about doing more of these streams and i'm just curious what time uh kind of works best for everybody so whether that's you know i'm not sure what that time is so let me know so brazil you're probably in a very similar time zone to me a bunch of europe 9 a.m 7 a.m oh man it's early for you carolyn a bunch of uk awesome okay so finland 4 p.m missouri sweet all right we got people from all over the world we have some san diego 10 a.m in florida awesome i'm in florida as well but i'm in the central time portion of florida in 3 p.m central taylor uk gang netherlands awesome okay so it seems like this is a decent time for everybody um one thing that i know is there are some folks in australia and also overseas like in in asia so for those people i don't think it's gonna work chris good to see you man another florida floridian here stoked to see all you guys yeah so that was one thing i was curious about and also i am wondering for you michael wow south china must be super late or super early for you right um i wanted to ask as well if doing regular streams is something that you all are interested in because i actually enjoy the streams quite honestly more than the videos i believe it's just so much more engaging and to be able to interact in real time with all you guys and gals i should say so i've been considering i have some notes over here which is why i keep looking down at my desk i've been considering doing some streams like on tuesdays and fridays or something like that the topics would vary and maybe sometimes it would just be like discussion and chatting so that is something that i've been been kind of toying with a little bit so i'd definitely love your feedback on whether you'd be interested in somewhat regular streams like that so that was one thing i wanted to bring up and then the other thing is that if you have emailed me in the last week or two there's a pretty good chance i haven't gotten back to you because i've just been inundated with emails on uh you know the premise log email and it's difficult to respond because typically people are sending me extremely long emails and they need help but i don't really have the capacity to help them so that's something i just wanted to mention i'm not ignoring you but sometimes i just can't respond so let's see jill says i'd like that hi from london and the streams are great love the problem solving yes perfect okay great so seems like there is interest in doing some regular streams which is awesome uh let me actually switch over here so you can kind of see what we're going to do today so uh john yeah you are totally right live is good but also a lot longer that's absolutely true it definitely is a bit longer i've also considered doing something that one of my favorite video game streamers does where he kind of chops the videos down so he'll do the live streams and then he'll make bits and pieces like tutorials out of those which is what i would probably end up doing as well so that's kind of my plan we'd have the live stream and then also there would be videos available after the fact that would be much more condensed not as polished as a typical video of mine but definitely something that is worth considering i think so uh let me message someone real quick because i know that they were supposed to come let's see real quick you joining question mark we live okay um yeah so anyway the point of the live streams would be that we would do this really engaged keep everything kind of fun and interesting and then i would chop it up and make regular videos so that you would have access to that tutorial after the fact so that's kind of what i'm thinking uh but what we're gonna do today we're gonna go ahead and get started i know we are at let's see how long have we been rolling right now eight minutes or so um chris says longer i assume you're going to nail that down within 30 minutes yeah i don't really know we'll kind of see um so basically what we're gonna do today as you can see here on your screen we're gonna be working from a figma mock-up which actually is really interesting because in the past i've worked off of xd mockups and those are great but honestly i find figma is just to be honest it's just way easier to work with it's more intuitive it's just easier to extract the elements out of that you need and i actually really like it so we're going to be working from figma and as you can see we have a number of different layouts here so we have the different headers at different screen sizes we also have an iphone mock-up which is essentially just our desktop version kind of collapsed like we would do anyway but what we're going to do is basically take we're going to take the premise log homepage and we're going to get it to look like this now i think what i'm going to do for these up here is use the oxygen composite mega menu and that will give us this effect so it's not really going to be a mega menu in the sense that you know there's all kinds of different things on it but it will give us this effect and it works really good on mobile so i think that's going to work nicely for us as we scroll down just to give a brief overview i can actually zoom in on this a bit so you can kind of see it a bit better what we're going to do with this one and i changed up my screen setup here so i'm just double checking that everything looks good let me know if you guys have any difficulty seeing things and i will make adjustments accordingly but essentially we're going to take this layout that you see right here and convert it to the home page like i said this whole section right here we're going to use grid because this isn't going to be a repeater this will just be some static content blocks so we'll build some divs and use grid to achieve this layout so we'll stick a video in here this will just be one div with some text of course and then we'll style these divs accordingly and i'm going to try to use sort of my own utility classes so i'm going to come up with some utility classes on the fly for things like padding and margin and so on and then that way we can try to keep things extremely consistent moving down here this will just be another grid i'm going to be using a lot of grid in this video in this you know stream and so essentially we're going to have just our two divs on the left and right this one over here is just a simple screen grab it's a photo and then over here i'm not exactly sure how we're gonna do the tool tips but that is where this video right here from elijah i don't know when that was it's been over a year now wow like a year and a half ago where he essentially makes this mega menu and it's like this pop-up which i think is going to work perfectly for like a basic little tool tip it may or may not work we might not be able to achieve it but we're going to try the reviews we're just going to use the built-in oxygen slider and we're going to adapt these i'm not sure yet if i want to do it to be dynamic or if i want to just basically build it in oxygen i might do it dynamic possibly but yeah i'm not sure just yet and then this section down here is gonna be pretty cool so basically what we're gonna do is uh i have this image and figma is so nice because it lets you export these images super easily you just click it and then over here there's a little export button josh bradbury nice to see everybody hopefully uh the the notifications didn't come in too late what i was mentioning real quick is just what we're gonna do today so we're gonna rebuild the premise log homepage according to this mock-up we're using xd and i was talking about our menu options which are up here and then we were looking at this other content just briefly giving an overview of what we're doing um so this is going to be relatively simple there's just a background image here i think there's a gradient on top of this i'm not sure where that gradient is exactly um let's see i'm not exactly sure where it is we'll find that in a minute uh dennis asks did you make the figma design or did you have a dedicated designer it looks really good appreciate you saying that it was a designer that i work with um and yeah so this was not me but we're going to convert it on you know into oxygen so then of course what we're going to do uh for the recent posts is just use a repeater and we're going to build this layout this one's going to be relatively simple to achieve especially now with grid it's going to be very simple did i just see taylor pop in there taylor yeah there he is um so this is going to be pretty straightforward um hopefully let's see i don't know what what we have here real quick let me uh double check so yeah that's all we have basically is um that repeater which is going to have our our posts so of course you guys are probably familiar with all of these those are just posts on the premise like website that correspond to the videos on youtube and then the footer down here is pretty basic the other thing is of course the mobile mock-up like i mentioned which as you can tell as i scroll around is essentially just the exact same thing but just collapsed so the really the only difference is like this little credit card field kind of gets cut off but i mean it's so big that it's fine uh but yeah so we're gonna go ahead and get started now what we're going to do is i think i'm going to work on the page content first and then we'll come back to the header or maybe maybe we want to do the header first um yeah i guess we could do the header so yeah let's go ahead and do that we're going to switch over here in my oxygen templates i have a ton of these lots of them are a mess so what we're going to do here is find our all pages new template is what it's called so you can see i have all pages new new to test all kinds of junk in here but i'm 98 sure the all pages new is my template so we're going to go ahead and hop right into oxygen and i changed some things over here in the streaming software so hopefully it doesn't kick it out i want to make sure the page loads properly christopher asks um let's see are you going to work with an outer main css grid too or will you work with multiple sections i'm just going to work with multiple sections i will actually have to change the page width because i think right now it's just the oxygen default let's see real quick um width and break points right now my page width is at 1200 pixels and i'm pretty sure this mock-up is at 1440. so let's see real quick uh 1440 yeah so we are going to have to expand that a bit uh so yeah that won't be too bad so let's go ahead and just do that so this might mess up some of the layouts on my site currently which isn't really going to be that big of a deal but we're going to go ahead and just switch this to 1440 pixels for our page width which makes it a heck of a lot wider but it will look nice chris says i was thinking to have the wrapper be a css grid already and stick headers and stuff in there uh yeah i guess you could do that i'm not exactly sure what the benefit there would be maybe unless i'm missing something perhaps you could expand on that so what i'm going to do is just first of all start with a div and we're going to stick this all the way up at the top i'm going to change this tag here to header and this is going to be kind of the main container for all of the stuff that we do in the header and of course i'm going to switch back and forth between the mock up here but i'm going to go ahead and just start naming these classes so that we have them i'm not entirely sure that we'll need it but let's call this ps header wrapper or maybe wrapper or container i guess it'll be wrapper i don't it doesn't really matter all right so we're going to call that div ps header wrapper so now it has a class also like i said if you have any trouble seeing anything let me know i did change it i tried to bump up the quality of the stream so hopefully things are a bit more crisp and clear for you guys and then of course we are going to have a background which is kind of this nice gradient here so i think again this is that same photo from before but there is a linear gradient here which is going to look really nice so if we take a look at this then i'm not exactly sure how we replicate this gradient because i see our two colors here and then it looks like the gradient sort of begins on like the right 60 percent except that it's purple first and then blue so this is going to be purple on the left side so let's copy this hex color we're going to come over here and in our header wrapper we're going to go to background gradient and then we're going to add two colors the first one here is going to be this purple and i'm going to save this as a global color so we'll call this ps purple and then our other one is the blue i'm imagining we're going to use these global colors a lot so this should be pretty handy elijah says good morning doing a build from figma design now as well so looking forward to your process thanks super stoked to see you here you were the one that got me on the figma train i think it was last year sometime i'm a big fan of figma now alright so going over here we're going to stick in this other blue and then we're going to actually save this as a global color i didn't mean to click that so ps blue new i'm going to call this because i'm pretty sure i already have a blue there and then we need to change our angle i think it's 90 and then our percentage let's see in our mock-up actually it looks pretty consistent let me zoom out a bit so we can see the full width here so we have our purple kind of on the left side it looks like it blends about 50 and then goes off to the right figma train whoop whoop yep all right um so just trying to compare a little bit here so it looks like the blue is blending with the purple pretty consistently to how the other one is so now we need to do is figure out where that image is behind the header which is that right there and then we can go to export image and then i'm going to rename this so i don't think you'll be able to see this so i'm just going to rename this header background image and then let's go to our div background image and then we're going to go header background image toss that in there glad to have you i'm glad you didn't miss it okay so now we have that image applied and then do we need to go to cover or contain why is it not showing up is it because i added it to a class and not the actual div id yeah it is so do i have to do the already running into a problem do i have to do the background gradient on the id instead of the class that'll be kind of weird hey stratos good to see you uh let me go ahead and just do that just to test so under background gradient or do i have to add the gradient via css so it doesn't overlay that photo um that's well i guess it might be something to do with the opacity right or no no not 50 what am i doing i need to to go 90 on the angle so is there color opacity set here in this mock-up let's see where did our gradient go so in the mock-up the gradient is linear at 100 so set the colors to transparent or change your background blend mode ah so background blend mode would be i actually don't know i never play with these background blend modes so normal is obviously not the one we need or change your background blemish so which one multiply oh is that what we're after sweet i didn't know that so actually now that we've done this can your gradient apply to the class no that's kind of bummer unless i'm just not you know aware of what we're doing here but in any case this does work how or we want it to multiply or overlay i want to try overlay just to see what the difference is real quick so multiply works and then overlay i'm not exactly sure which one is closer so that looks reasonably similar i would say i think i'm going to go with overlay i wonder if it says it here in figma if we go to this header mask that says pass-through as the blend option is that an option here in oxygen um no i don't see it so i'm just going to go with overlay the background image must be on the class as well for the background blend modes to work okay so that is totally fine i'm happy with that because i'm only going to have one of these across my entire site anyway so really it doesn't make that big of a difference to me so now we have over here on the left side the white logo which actually i don't think i have exported into my current site so i'm just going to go ahead and do that real quick and once again i'm just going to rename this file so we're going to go premise logo.png and then we're going to add in an image element browse for our image and stick that guy right in here i think this is already sized appropriately which is perfect so 100 pixels and over here it is 100 pixels now one thing that's really cool kind of like xd is that if you hold the alt key you can see the spacing around the elements between the you know kind of container so it looks like we have 40 pixels on the left and then 16 on the top and bottom so what we're going to do is actually just go back to our main div here and we're going to go 16 16 40 on the left and then i'm assuming it's also 40 on the right over here except yeah it is 40 right there so perfect we can just go ahead and add that 40 pixels to the right side of our container over here keep things really nice and spaced out uh and then what do we have next we have our text links for our menu so this should be pretty straightforward so let's see what do we have these are the font of montserrat and then semi-bold which i'm assuming is like 600 font weight and then it says size 14 so we'll play with that 14 is typically pretty small but we're going to go add in some text links and let's set a class here so ps header links is what we'll just call this one so our text color i believe is white if we need to change it we'll come back and do that in a moment our font is actually i don't know what our global fonts are so let's go take a look uh not global colors what am i doing fonts so sophia pro and roboto those we will probably need to change because i actually don't know what font this is so this one is monsterat as well is it all monsterat yeah it looks like it uh stratos says why is the logo not aligned with the content that is because i changed the page width here because the mock-up is wider than my current site so this is just going to be there's going to be little nuances here that don't quite match up across the site but i do plan to go through every page and every template and rebuild these to match the new style i just haven't had a chance to do that quite yet so let's see one thing i'm going to do is actually let's wrap this text link in a div and then i think i want the image to be inside of that as well and then this div we are going to just set as horizontal and middle align because in the mock-up if we scroll back up here you can see that we have the logo and the text links kind of left aligned and the buttons over here on the right so i'll create another div that will wrap these two buttons in a little bit once we get there but while we're here let's go ahead and just check what our color is here so that is a full white and then this one here does it not change it's so hard to tell i'm like it's it's like playing mine mind games with me like the colors don't look like they change oh it's passed through 80 so those have an 80 opacity and then this one has a hundred percent on hover so that's kind of cool so it stays full white uh so what we'll do then is right here we're gonna change our text color to eighty percent and then our hover color will just be full white which is pretty neat then let's see how wide is that container we probably don't need to worry about setting the width of the one that wraps these links we just need to set the spacing between them so 40 pixels between the logo and the first menu item and then 40 between that so that makes it nice and easy what we're going to do is on our ps header link class we're just going to assign 40 pixels of margin on the right and then so that i don't have to worry about changing the id i'm just going to this image and i'll stick 40 pixels of m 40 pixels of margin to the right of that uh and then we probably want some sort of well i guess the color change there is so subtle that maybe we don't need a transition effect but um we'll we'll leave that for now so then we have a uppercase font style here and then what else anything else i think that's about it i guess we would need to change the font size 14 is just way too small i think because that's that says it's 90 i think that's way too small so i'm just going to leave it as whatever the default is either 16 or 18 and we need to change this to uppercase so home is going to be our first link and i'm just going to do slash home also i want to make our image a link as well so we're just going to make that slash home so add that and then let's duplicate this a couple times i think there's like five or six links so the second one is going to be courses forms tutorials courses so that one is going to be slash all courses and then forums slash forums and tutorials and then uh what was the other one contact and then for agencies so contact and for agencies perfect so tutorials we need to set that which i believe is just slash tutorials as well and then contact is pretty self-explanatory slash contact and then last but not least is for agencies which is my main agency site which is that right there and i want to set this one to new tab so there is that now this div is going to be essentially set um although i didn't change the global fonts like we had talked about so just for the sake of uh changing it to what it looked like was monsterat on the entire site that's what we're going to do is just go ahead and set everything to monsterat and then it looks like we need to bump up the font weight like i mentioned as well so it said semi-bold i'm assuming that's around 600 something like that stratos says add a parent div for the menu items and tag it as nav that is a good suggestion sorry i'm getting a call here um so we're going to basically take let's see did i not put that stuff inside of this oh that's the link wrapper for our image so we're going to take these text links and wrap with the div stick them all inside of that and then set this as horizontal this is going to be a tag of nav perfect good suggestion i appreciate that and then now we have this div right here which contains our logo and our text links and then we're going to add in another one inside of this wrapper here so div um we're going to set this to horizontal and let's just go with space between so this one we'll just add the class to be actually i'll just rename it here in the structure panel so we're gonna go to rename and then this one we'll just call buttons batons there we go and then this one will just call our logo and links to make it nice and easy i'm going to rename this one as well so you guys can kind of see what we're doing this one we will call our header container something like that and then magically there is space underneath this which i didn't ask for so oh i guess it's because of this this button div container so john asks what importance does the tag add that's basically like the just semantics for seo to pick up on and also for screen readers i believe so i think it has a dual purpose there all right so now let's go ahead and we're going to create actually not this page i want the uh the figma mock up here so we have two different buttons i think i don't see any like hover effect changes here so i'm gonna kind of make these up on my own and the login one i think what we'll do is essentially invert the purple here so when i hover over the login i think what i want to have happen is the border changed to purple and the text changed to purple and then this sign in maybe we will add like a box shadow or maybe we'll do a box shadow to both keep the buttons the same and then we'll just do a box shadow that's what we're going to do so instead of using the standard button i think what i'm going to do is use a link wrapper so inside of our our button div here i'm just going to pop in a link wrapper let's add a class of ps button and we'll go white i believe unless we want to change well no let's go ps button um and then we'll just call this one like reg or something for regular maybe medium i guess that's kind of a medium button so yeah we'll call this one ps button medium like that and let's take a look at some of the spacing here so got a question in chat that says do you think oxygen is going to be better than elementary in the long run because right now it's only the better speed because of less css right not so much css but also javascript just cleaner code output in general so i mean it's kind of subjective what you think is going to be better in the long run but for me i i personally do i don't see any reason why it's going to go backward and i think there's a lot of people that would would agree with that as well so really just depends on your specific use case i would i would honestly say that oxygen is not always the answer but it is almost always the answer if that makes any sense at least for me so let's take a look at the spacing here so this button is 122 pixels wide and it's got a height of 40. and then the font inside of it is 14 pixels so what about the padding sorry before i go back out of here can i see the padding so it's 32 left and right 10 top and bottom so 32 32 and then 10 and 10 and then we're going to stick in a text element and this one is just going to say login um i don't think i need to change let's see let me go back to the button here so we can select the correct correct link wrapper that's kind of a hard thing to say so this link wrapper i'm just going to set the typography on this class here to white and then let's bump up the font weight to 600 and that looks pretty good unless the font weight is a little bit lighter there no it looks pretty similar i can definitely tell that these menu links are smaller though than the or are they no these are just set to bold okay so these are these are a font weight up so instead of 600 let's go with 700 and then is there letter spacing in these it kind of looks like there is i don't actually know so that's letter spacing of ten percent i wish that was a pixel but can we go letters oh yeah you can sweet so letter spacing ten percent i've never tried that but it didn't seem to do anything let's see if we go letter spacing of two pixels then that works why doesn't the percentage work does it work on the id let me get rid of this and then go back to the id so letter spacing of ten percent that doesn't actually do anything huh well there's that so i'm gonna go with the letter spacing of i guess two let's see there's some chat going on about uh whether oxygen is a side project or not no that's definitely not the case so then we need to set our border radius give me a little drank i yeah it's not my place to be what's the word speculative on uh with the position that oxygen is in i mean it's been via it's been perfectly viable for like four years now okay you are right jill so it does have login as two words which i think kind of looks better so now what i'm going to do is add in a class here so we're going to call this ps button med white i guess kind of a long class name i don't think that's exactly how we should name these but that's what i'm going to do so what we're gonna do now is go to border i believe it's white as well probably thicker than one pixel but we can come back and adjust that to whatever it is and then let's see real quick so we have a border so it's stroke 100 white uh where is it so the border radius is that right so it's a hundred and then i wish i could see the border thickness where is that um that says 28 degree mixed mixed doo doo [Music] i don't see it so i'm just going to guess here i'm just going to go to is it 100 no definitely not 25 it's not a percentage so i'm going to go with pixels 25 looks pretty good um that doesn't look exactly right i want it to be i want it to be literally perfect i accidentally added a stroke effect here or maybe it was box shadow not sure which one i did um i'm looking at the chat conversation here really interesting discussions going on about the viability of oxygen which is funny that question comes up fairly often and yet it's been around for like four years now um so anyway corner radius is set to 100 but i don't understand what like um i don't know what the word is selector what unit that is let's see that's so weird how your cursor continues it doesn't do anything that must not be where it is i guess it's under the stroke option um i don't really know it's good enough for now the spacing looks a little bit odd though so maybe the border radius is more is there a difference between 25 and 50 yeah i guess so we'll go with 50 pixels strata says the letter spacing that you were trying was not in the text it was in the link wrapper let me go back to that class here and typography letter spacing was two yeah it's on the class that's what i wanted it to be so that the next one also has that same letter spacing as well um so we have login and then this link is going to go to i think it's just slash account actually and then uh this link wrapper has how much space between the other button i'm assuming it's oh it's actually only 16 pixels okay so this link wrapper we're going to go on the actual id because that's not always going to be the case go 16 and then just duplicate then this one here we're going to delete that margin on our buttons container we're going to set this to horizontal and that's starting to look pretty good now this other one is going to be what does it say sign up so we're just going to change this to sign oh sign up i manually capitalized it there so i actually am just for the sake of consistency going to go back to our button class and set the typography to uppercase and then now we have the stack class so we're already a long way here but what we're going to do is essentially go ps button medium and then we're going to call this one purple and let's go to our background color we're going to use our global class that purple one that we added earlier and then the border here is also going to be the purple as well and i don't think we need to set anything like solid and then we need our hover effect so the buttons do look a little bit bigger on my screen than they do in the mock-up i'm not sure exactly where that disconnect is maybe it's font size or the line height on the text let's see if we go line height of one does that make it look more consistent with what we actually wanted so the line height at one does look pretty simple i mean pretty close the line height of 20 here i'm not sure what that equates to uh let's see my only concern with oxygen was the pricing model it's great for me very cost effective yeah amazing product and has changed my life i mean phil phil says amazing product that has changed my life that's absolutely true that's what it's done for me it's it's really um yeah it's the best tool out there for sure and elijah says market saturation will never be reached at the rate of growth of wordpress that's definitely true there's enough builders out there and the other thing to think about is somebody's not going to stay dedicated to the same builder forever they're going to switch eventually based on their need so that was me i used to use a bunch of different builders and now i am permanently in oxygen all right so our header looks pretty good here um let me make sure that i have this sign up linked properly i believe i want it to go to uh let's see so lifetime course package is our membership so we're gonna add that link and so now these are looking pretty good so we need to go ahead and um we need to go ahead and set our header container to be a little bit more responsive so let's save this and switch back over to our mockup so let's take a look at what happens as our screen size shrinks here so this one is 1440 and it drops all the way down to 720 then it becomes a hamburger and our menu goes down here so let's use i think like i said earlier the mega menu elijah says if we reach market saturation we'll be developing oxygen from our solid gold spaceships orbiting moisture so i won't be worried about a subscription can i please come with you on that spaceship please i would very much like that that would be pretty sweet all right so this is going to be a bit of an exploratory phase of this stream where we are going to try to add in a mega menu and then see what happens at our reduced screen sizes so page container 1440 that already starts to go pretty wrong which is interesting um perhaps that was an oversight in the mock-up here let's see 320 that one's 320 as well this is all the different variations of the menu here so i guess this needs to start hiding a bit more actually i want to go save real quick and take a look on the front end at what this looks like because it might not be exactly the same so that's 1600 1400 so it starts to go wrong at about 1200 pixels so i guess this is going to need to start shrinking and making some changes sooner than that and actually for the sake of this because it is a live site i'm going to set a condition here that the user role is equal to administrator which is me so i want to make sure that people aren't seeing a messed up site for now so let's think about this how are we going to do this to make it look decent at all screen sizes i think i'm gonna have to just change the menu stacking and that mega menu to appear much sooner less than 992 you really can't see all that stuff so let's go at 14.40 and in our navigation div we're going to stick in a mega oh i don't have my composite elements crap okay uh i guess i am getting out of wordpress and i'm going to take this over here go double check my license real quick so license valid oh my gosh my composite elements aren't working all right so clear out my license key and then i need to go to my gmail i need to get my oxygen license here real quick um oxygen license key there we are stick that back in there submit that bad boy and then now we should be able to go back uh let's see refresh this guy real quick is my license key nulled is that what you're asking no i it's the same license i've had for four years now um all right so now i should have my composite elements yes we do perfect so now what i want to do is in this div here we're going to stick in a mega menu and of course this doesn't look good even slightly based on our screen size at the moment which is okay we're going to work through all this so i'm going to stick our mega menu right here at the top and i'm also going to rename this div to nav container make it nice and clear and this mega menu is like i said earlier not really going to be a proper mega menu but it's going to be more or less just a drop down um although i think what we're going to need to do because in the mockup it has like a second row we're going to need to leave the little activation button i'm going to zoom in on this so i can explain this a bit oops that's not what i meant to do um we're going to leave the trigger up here in the top and then we're going to have a second div down here that just has this blue is that the same blue that's in our gradient here no it's it's not i could have just looked and seen that but essentially we're going to have a second div so that's going to be beneath this header container so do do do do how are we going to do this because that has padding on the left and right and that other one needs to be full width so i guess i need to wrap this div in another div and then that header container goes there then we're going to have another div below this that is 100 width and we're going to add a class here of ps header row uh let's i'm going to call this mobile because it's only going to pop up on the mobile and then the color we're going to use is this blue right here so this is a new global color for us so we're going to set that and then we're going to go ps light blue new is our global color there so now elijah says jonathan i'm playing with fire but i put my license on keys on my stream deck nice that's pretty sick actually that's a good idea i'm sure there's some security like you know concern there but depending on what it is like for for the lifetime deals or things with unlimited licenses i don't really care especially because if somebody were to find it you could go deactivate their license or ask the company to you know give you a new one it's not that big of a deal to me um i don't know what bit warden is is it just a thing that masks your license keys or something uh where what was i doing here i forget uh oh so yeah basically i want to change this mega menu trigger if we scroll out over here so our mega menu link i think it's called i kept calling it a trigger but i don't really need it to have a label so what i'm going to do instead is add an icon and we're going to switch it to linear icon i believe has the better looking hamburger it's probably not called hamburger i think it's list no menu oh it's menu of course so then in the mock-up it is white so we're going to change it to full white and then we don't need a background color on this we also don't need the text excuse me and then we also don't need the hover background color here either our icon here is much much smaller it is let's see uh let's 18 by 18 pixels so we're just going to change this to icon size of 18. oh boy that's small it's weird how this stuff doesn't correlate unless i'm missing something like that says 18. i guess i'm gonna go a little bit higher than that oh good lord not 18 25 25. a bunch of discussion about bit warden versus lastpass yeah i looked into the lastpass stuff stratos i just haven't had a chance to switch everything i have so much in lastpass it's years and years worth of stuff that um it didn't thrill me to start migrating everything so around this how much spacing do we have there's really nothing special here it just kind of sits to the right of the logo so i think what i can do is basically just delete this padding here and then it's going to handle most of this for me so what is this div right here so that's our mega menu wrapper and that is going to go down here in this div which is our blue one so let me add some text in here to make it nice and easy to drag into so i'm going to take the wrapper and stick it down there and then i'm going to leave that alone for just a moment we're still at our desktop screen size here so this nav container i will leave as is our ps header links we are going to let's see what screen size are we we're at all devices right now jim says taking a breath from work love what you're doing awesome really appreciate that um let's see so i'm trying to think do i want it to hide at the page container probably not because that i mean that's a pretty wide screen size so i'm just going to go less than 992 for now and we're going to set these to display [Music] hold on before i do that i'm actually going to go back here and inside of our mega menu wrapper i'm going to delete our columns because we don't need that so i essentially just need to duplicate these text links a couple of times so this might this might be something that we end up changing and a little bit but i'm going to duplicate all of these and then i'm going to take basically the second of every one and stick them down here so courses and then forums it's probably a better way to do this if you're furiously typing a better way i am sorry so contact and then for agencies we'll stick that down there as well so liam says hey jonathan do you use the built-in wordpress menu in the back end to create your nav links or do you just create them from scratch so these as you can see are created using text links and i typically do that on less complex menus so it would be advantageous for you if you have like drop downs or you want to be able to control your menu from the wordpress dashboard but for me i personally like to build them just because i have much more flexibility as compared to either of the two menu components in oxygen okay so for this mega menu wrapper uh i'm gonna leave those classes as is and then what we're gonna do oh man i should have added the mobile to these but oh well what i'm gonna do is go ps header links mobile as my class name and i'm going to copy this and paste it onto every single one of these links and i'll show you why in just a moment so we're going to paste that on there and essentially what i'm trying to achieve is have the links in this blue bar and this blue bar is our mega menu wrapper which is going to pop up when you click on the mega menu button so this is what we're building right here if you're just joining is this blue section right here a couple of questions let's see when i'm doing a 404 template it always shows an archive page increasing template priority fixes this is this normal um good question i don't know uh taylor if you're talking to me i don't have hydrogen installed i don't think no i don't so now we need to do is first of all why is there padding right here oh that's 32 right there so i need to see how much padding is right here so it's 20 top and bottom and then it's the same or is it just 20. yeah i guess it's just 20 all the way around except for the left and right edge is 27 there okay the only difference making them with text links is that you don't get the normal html semantic structure which uses uli yeah i guess that's true um although what like we were doing earlier you can set your div containers to have things like nav and stuff so um you could use a code block if you really wanted to get that but that's not something i'm doing all right so this div right here i'm gonna go 20 left and right and then what was the top and bottom i forget already oh it's 20 all the way around that makes it nice and easy so 20 pixels and then john says sorry if you covered this at the beginning but how are you editing your live site when the current one is still there no the this is the live site um so basically all that i did was set this div here or actually it's this one i set this div to have a condition that it can only be see if your user role is administrator and so i'm just going to change that to this one here and i did use a role administrator just so people don't see a messed up site on the front end so that works for now um i need to set this real quick to 100 for some reason this one isn't reaching to the far edges of the container there we go 100 got it all right so let me go look on the front end real quick and does that activate it it does however it is out of the bounds of the container that i want it to be so let's see what am i going to do so layout is it position abs relative and then this wrapper is that going to be layout absolute not exactly sure how we're going to do this so that breaks it so that has to be relative and then this layout is set as relative as well um trying to see how i can restrict this to be stuck inside of this div here so i don't want it to float up into the purple area i just want it to appear here um let's see make a mini wrapper actually i think i needed to make this entire wrapper the blue background with the padding so that it pops up in the right way so we're going to change this a little bit so our mega mini wrapper we're going to have 20 pixels of padding all the way around we're going to essentially undo what we just did there and so now it should behave a little bit more nicely that works reasonably well although it pushes up to the bottom so what about if we add something like i don't know maybe it's going to be roughly like 40 pixels of margin to the top or no that's bottom whoops 40 pixels of margin to the top i'm not sure if this is going to work okay so it's not quite 40. it's maybe like 30. and then oops did i refresh so 30 almost there's like one little one pixel gap there um which is i don't know i'm gonna try 28 and i think that's going to be close enough this is what i would be doing on a real site and also if this were a tutorial video this would have been edited out don't add top margin tell me what it is all i wanted to do is just not bump up over the top of this container right here okay so he says that will break it oh right because then you can't hover if you do that then you can't hover over the link before it closes use padding instead then add a div inside the wrapper with a blue background got it so then i need to use this one here like that right use padding instead then add a div inside the wrapper with a blue background okay so so then this one we were at like 28 so i need to be like 48 right then add a div inside the wrapper with a blue background so i need another div or i could do it the other way around like i was just doing it so then would this one be zero and then this one would be basically 48. well no that doesn't work add the padding to the mega mini wrapper itself so i had 20. so let's see so that kind of works but i need to set the z index of this guy to be higher for our header container so let's just go like 10 or something i think that's what you're telling me to do hopefully you're not screaming at me no a little bit closer i guess um so our mega menu has that padding i'm gonna wait here for you to type out what you're trying to achieve add the padding to the mega menu then remove the background color from the mega mini wrapper background color bam and then add it to this div right like that then add a div that wraps your links with the blue background color oh so i need another one div div text link inside the div go i was being a little too impatient there i guess okay so this background color will be that blue horizontal 100 then this one had the 20. i'm assuming i need to go delete the other padding on this so it's just the 28 instead of 48 like that and then refresh there we go okay sweet thank you uh so when this is open the structure panel oh yeah my picture is in the way of the structure panel whoopsie okay so that's as far down as i can scroll let me i wonder if there's a way for me to like temporarily hide this or like move me out of the way so in that particular situation this is what we've achieved so let me collapse some of this stuff real quick so you can kind of see what we've done so we have two header containers uh taylor thanks for hanging out hanging out we'll probably be here in a little bit how long have we been doing this so far it's already been an hour wow pretty insane okay so we have a header container which is this whole section up here that has our logo our links the mega menu button and then our login and sign up and then we have a second div here which is essentially a row that has our mega menu container and this is what's going to pop up on mobile devices so now what we're going to do is take these header links picture in the top right that won't really work because then it's going to cover up a bunch of stuff over there so i'm just going to stick this back down here all right so now what we're going to do is take our desktop links and at like maybe 1440 i'm gonna go one more we'll play with the 1440 later at less than 992 we're going to set ps header links to layout of display none and then in our mega menu wrapper down here we're going to set our mobile link class to layout display flex like that and then this is already getting pretty compact so we probably need to bump down this font size a little bit maybe like 16 and that still doesn't it still doesn't wrap properly so maybe i'll delete that one from the header for now and then as we go down a little bit at 768 let's set this div to stack vertically and then our mobile class let's add some margin underneath these let's actually take a look at the mock-up real quick and see because there is a vertical layout in here what is the spacing between these elements so it's 16 16 pixels of padding beneath that and then it's centered yes it is so we're going to set this to this div here we're going to go to center right there and that looks pretty good now on this last link we don't need that extra padding or excuse me the margin at the bottom so we're going to set this to a margin of 0 there to make it consistent on the top and bottom and then we do actually have the buttons there in our mega menu so is it over here so in that layout it's not there which is a little odd but we could essentially achieve that same thing by just duplicating this div which i'm going to do and we're going to stick it inside of our mega menu wrapper let's go right here take this down there so this is going to be um basically uh let's see that's too wide at the screen size which one is this this is less than 992 so maybe what we do stack this vertically getting another phone call people are blowing me up never fails people don't call me ever and then i do this and everybody wants to talk to me so did we not set that padding at the right break point let's see we did it at 768. whoopsie so i'm going to basically delete this padding here and then at less than 992 we're going to go 16 pixels uh this might not work but we do need to go back to this one right here and [Music] let's see do we want to add this back i think we do it doesn't quite look well i guess it is 16 pixels so that's pretty good let's go down another step here so 768 that's where we need to add this padding back in so 16 pixels and then at 480 that's two crams so we're going to stack these guys and then center them we don't need the margin on the right side so we're going to go 0 pixels there but we are going to go 16 below that and then we need to [Music] remove that over here which should carry up all the way to the other breakpoints right are these still off oh yeah so i need to go back to wherever it stacks right there is fine playing with this margin a little bit so zero and then i can go back to where was it 768 or 480 that i set that right there so we actually don't need that there so now this is what's gonna happen so this is not middle aligned there it is now that looks consistent so i'm gonna save this guy so uh this also i forgot to do one thing real quick which is to take this mega menu block right here this whole div and we don't need this to display on our desktop size we're going to go layout is display none and then our layout at less than 992 we're going to set that to flex and so that works so now let's go ahead and refresh real quick so this is our menu as it sits right now and then if we inspect this we do probably have an issue still as our screen width shrinks but eventually let me zoom in a bit because it's at 40 percent once we click this then we have our nice mega menu which is super cool now it is a little bit clunky in the back end of chrome but i know from having played with these before that it does work perfectly fine on a real mobile device so if we shrink this oh we need to get rid of the buttons up there so right at 992 we can go ahead and set this whole block to or should we what happens in the layout here so at 992 they're still there at what is this one 720 they're still there hmm i'm gonna have to play with this a little bit because it's not quite how i want it so um 992 768 768 i'm going to set this to layout of display none so there we go all right um save this and this margin right here excuse me the padding that we added earlier is still a bit too much so i forget where i added that i think it was on the desktop size so 28 let's go like 26 pixels save and then i want to take a look one more time and see if we can clean up that little white line that appears so yes there we go tom says hi jonathan i'm building a header with a hamburger menu but in a new tab or f5 refresh on the front end the menu opens for half a second without clicking on it how can i fix this that little flash i think you would have to have some kind of preloader or set that to lazy load or something like that unless i'm missing the issue there all right so that is good to go so now we are going to work on our footer i believe let's just double check the mock-up pretty simple header the only thing i didn't do was add hover effects to these buttons so i am going to do that real quick um i messed up this container here how did i do that what did i do oh it's fine on the front end but in the back end for some reason it's a little messed up so i'm just going to change that back to horizontal and hopefully i didn't break something so now what i'm going to do is on our ps button medium class for basically all of them i want there to be a box shadow so all four of these buttons on the screen have this class ps button medium so i am just going to go to the hover state then go to box shadow we're going to set this to black and 14 i don't think there is a box shadow effect i accidentally added one in the mock-up so there's that so now there is a box shadow on hover and then we probably also want to add a transition effect so i'm going to go back to the original state effects transition 0.2 we'll use ease in out as our timing function and now there'll be a little bit of a lift effect on those buttons which is perfectly fine yeah that's good okay now we are ready to head all the way down to the bottom here and let me collapse all this stuff in the structure pane and i'm going to add a new div here so this one is going to be our footer so we're going to change the tag here to footer and width of 100 and then let's go back to the mock-up so if we scroll all the way down to the bottom then we have this guy here so this one's going to be pretty straightforward this is a perfect candidate for grid so our whole footer is going to be this entire section here so we're going to have two divs this first one that's highlighted and then this second one down here inside of that we're going to have basically four more divs that we're just going to use grid make it nice and easy so i guess technically you could do grid inside of a grid i haven't done that i don't know if there's any advantage to doing that quite honestly but basically we have two colors here so we have kind of an off black a lighter black which is two four two five two six so we need to do a little bit of structuring right here so i'm gonna rename this one footer oops footer container like that then we're gonna add in another div this one's width is 100 i'm going to set this one to that black color and then let me expand this so you can see what i'm going to do is add in another div that goes below it and that one is the darker black so what is this one looks like this once again set it to 100 make that black and so let's just rename these real quick to be consistent so this one is going to be footer top and then this div here is going to be footer bottom all right so now in our footer top we need to add four divs but we're going to add in you guessed it another div and we're going to go a bit of div section here so this div is going to be our columns we're just going to call this one c-o-l-u-m-n-s columns and then in that we're going to add four so one div duplicate it three more times one two so let me expand this you can see what i'm going to do i'm going to take this columns go to grid column layout of 4 and now it's basically going to fit the columns automatically so this column i think what i'm going to do is set to a width of 100 but i need to figure out how wide this actually is so uh what let's see is there a wrapper like a some sort of container around this i want to know i want to know what this padding is on the left and right here i'm still a little bit new to figma so it's 100 pixels to the left and then i'm assuming it's also it's 195 okay so what would be a better way to do this i guess we could just set the inner div to a max width of 1440. so we're going to go to oh no we would just do that on the columns so we're going to go to size and spacing max width of 1440 and our width of 100 so there we go and then it shouldn't extend to the far edges of its container yeah it doesn't so now we just need to set our footer top to just the center like that didn't really do much in the back end but you'll see it centered on the front end so now we just need to go add in these contents here so i could essentially just duplicate them out of my other footer which i think i'll do but we of course need to make some styling changes so these headings uh are monsterat says that they're black oh it's it's the most bold i see and then it has a 40 opacity but what color is it it's white with the 40 opacity so let's in this div here add in a heading i'm going to use the tag of h3 which i might change later and actually before i change that i'm going to add a class so ps footer not links ps footer headings is what we'll do tag will be h3 our text color will be white and then it had a 40 opacity and then let's see what else uh probably some margin beneath it which was 20 and then our uh font weight was bold so it's probably 700 or higher so we want to add 20 pixels of margin beneath that typography we're going to go to uppercase and then font weight was like 700 maybe even more i'm not sure what black is considered i think it's 700. strata says why are you adding grid here just because it's easy you don't have to worry about modifying it on mobile i mean i guess you could just use the columns element but i prefer this way so it's the headings here are courses community courses again which doesn't make sense and then latest tutorials so we will fix that so courses i'm going to duplicate this three times stick this in here and stick that oh gosh come on and then this one if i can drag it i should have hydrogen pack installed but here i am without it i'm gonna do my trick of adding a text element in and just dragging that guy deleting that okay so now i probably should add some padding let's see it so it's 40 on the top and then there's a bunch more down below that so it's 64. so in our columns let's go 20 oops 20 and then 60 and 60. so we'll probably change that but i just want to get some padding here so we can kind of see what we're doing so our headings were courses community um i think i just had this as contact before oh yeah it's right there it's right above me latest tour tutorials so now i am uh let's see i guess i'll duplicate these links because they're already right there and then we'll just modify the classes to suit our need here so oxygen course stick that in there acf and then woocommerce and then community is forums and then the facebook group and actually these look looking pretty close to what we need them to look like already it's just the hover color is wrong i believe oh well it's very similar so it's that lighter blue the 337 so our hover is going to be this one i believe i wish you could see the hex color like if you hovered over the name i would want to see not only the name but also the color like specifically whether it's rgb or hex if it showed you that right there that would be super awesome because sometimes i have colors that look really similar like we have in this case but then i got to go check my global colors here and in fact i'm glad i did because this is not like precisely the same color from the mock-up so i need to take this 337 let's add a new global color light alt new stick that color in there and so now our global hover color would be this blue so that's pretty vibrant but it looks really nice against that dark background and then our footer links let's also go ahead and add oh wait i changed it over here oh well i don't really care because this footer is going to go away pretty soon um so let's see effects transition we're going to go to ease and out and then our transition duration is 0.2 let's see that looks good all those are linked up properly so forums and facebook group there we go all right so now oh jillian that sounds horrible every single shade of yellow is a different hex that is absolutely awful all right so i should have duplicated all of these before i started going crazy here but we are moving right along so this is actually relatively simple because of course we're just redesigning the site we're not starting from scratch so it is relatively simple all right and then this right here is an easy post and what we're going to do is just basically duplicate this and this easy post i'll just show you real quick all that i did before was just basically go to the template in the php i just deleted everything except the title of the post and then i believe i changed the css on hover uh let's see where is it so post title or is there even a hover color yeah there is i'm not sure where i did that but it works exactly how i wanted it to so perfect okay so then we had one more section down below here which is basically like a link to my agency site and then the social media icons so more or less we're just going to duplicate this div and i hear you stratos i just i'm not in a spot to be able to fix it at the moment i'm going straight off the mock-up but i will fix it later on um so i'm going to take this guy stick it down in the bottom and then our social icons let's see those look okay i think i might change this up i might do this manually so we have a bit more control so take this jillian says and they paid a lot for the site from the original designer yeah i've had some people who have designed mock-ups um that have not looked good even slightly so not everybody is a designer i will say that um all right and then what do we have here so 16 pixels above that text then this right here has some padding inside of it am i not zoomed in enough to be able to see this what is the padding right there why doesn't it tell me i'm assuming it's 16 above and below that so [Music] let's go 16 on all sides or well actually let's just go with the top and bottom and then this div we're gonna add in i guess 16 again this text color i'm assuming is coming from oh well that it's actually a link color so the text color here we're going to go with the light blue to make it indicate that it's a link and then our social icons over here are kind of more squared off so i wonder can we do that with the built-in social icon element it's also it doesn't have the right uh padding below it which i think is i think is partly to do with the social icon element itself even though we have the 16 pixels of padding beneath it it doesn't look like it's applying properly maybe it is and i'm just blind as a bat it just doesn't seem like it's working quite right um so we have square and then does border radius work on this i don't think i've ever actually tried that it does not that's kind of annoying um that's good enough but i do want to bump up i think the the icon size or maybe the size between them 20 make it a little bit more touch friendly and then i think we do need to adjust this grid layout on mobile so let's take a look real quick 1440 looks pretty cram but i'm going to leave it as is 992 we're going to stack actually no we need to go not stack can we go grid column of two that looks okay but we probably need to set our gap to something more like 35 or maybe 40 pixels and then at 768 let's go grid with a column count of one that's so much easier than trying to manipulate the divs to fit exactly how you want them to so that is that is um why i used grid in this case now if you look at this the social icons as you get into the smaller break points look super clunky in the back end is that the case on the actual page here let's see gotta get to the bottom no i guess they look fine oh man it took us all the way back up to the top sorry uh so the only things i need to adjust here really are the footer so for some reason that link here isn't centered so that looks okay at less than 992 oh i should have centered it there as well i didn't really need to go down so far i should have checked at the upper break point so that one looks good so we're going to save this and then now because that footer looks fine i'm actually just going to go ahead and delete this section entirely so now we are good to go uh i don't actually know what this code block is let's see that is um i don't know i'm fine with that i'm going to leave it so those oh those have conditions on them i'm not going to worry about that for the moment so now we essentially have our main uh header and footer done in our mock-up so as you can see here is the footer just some slight tweaks from the earlier one just makes it a darker version instead of having that lighter version and then our header now looks like this we still have the other one which we can go ahead and go to um you know we can delete this one here which i'm not sure if i'm ready to do that just yet everything should work so login and register all these are linked tutorials forums courses home let me inspect this real quick because i do think we have a slight issue on the screen sizes as it starts to collapse so i guess you're only going to see that if you're on like a laptop screen size you know like a 720 display so i do need to adjust that but what am i going to do maybe stack those buttons i guess i guess i'm going to do that real quick before we get out of here because we're going to switch to the actual page content here in just a minute so at 1440 we could set these to stack no that doesn't look very good trying to think of a somewhat elegant solution what if we were to set these divs to stack and then like left align and then what about that it still doesn't look very good i know my designer is going to be upset with me so horizontal and middle i don't like that i just don't like it i don't like it just making it really worse let's delete this and then what is my solution going to be here too many items i know kyle good to see you buddy glad to have you here um trying to figure out what would be the most elegance away solution yeah jill good suggestion just say agencies instead of four agencies that's not a bad idea well the hamburger kicks in at less than 992 so maybe it just needs to happen at 14 40. i i think it probably does i think it probably does unfortunately which means i could leave the buttons there so actually yes that is the solution that's what we're going to do so our link wrapper let's see nav container so our mega menu at less than 992 we're going to turn that off and then go to 1440 and set that to flex and then these links right here at 1440 are going to go oops layout of display none and then let's double check that at 992 all that stuff still pops up yes it does so now i can take this container and leave it as is so at our all devices anything above 1440 the menu looks like it's supposed to there it looks like that 992 768 480 yeah that looks perfect so there was one slight tweak here so i guess i must have accidentally set some margin underneath that button at four excuse me no no it just it just changes from horizontal to vertical so yeah i'm actually pretty happy with this so now that works perfectly and so our mega menu looks like this just a nice pop-up effect and then if i click off of it it closes of course the little wordpress admin bar is getting in the way admin bar so funny um also use menu what do you mean on this nav container it's set as nav is there another semantic for menu i'm not sure what you mean are you saying add the word menu all right so that's good um we're going to move on here and at this point we are going to essentially start building oh actually i didn't mean to close that page whoops daisy so we're gonna go to edit our homepage real quick real quick again because what i wanted to do is actually go ahead and delete the old menu because now there's no reason to have two and i can turn off the condition um oh so next to the icon no i meant to go to my template not my home page all right i'm not actually in oxygen twice because i'm switching so i'm happy to just ignore that prompt there um yeah i guess i guess that's uh something worth doing i don't typically add the word menu because i feel like that's typically pretty self-explanatory but um icon let's go right next to it and we'll add text for the word menu we will set this to horizontal middle set this guy to white and then we do need some padding next to this we'll go margin 16. all right that looks fine uh do i want this to be uppercase yeah i guess so that'll be fine all right so we got that and then now we're going to basically take off this condition here so that everyone can see it minimize this and then let me make sure i'm deleting the right header here so now that's gone so we'll save this and then we should be good to go okay all right so save and then back to wordpress admin so now we're going to do is go to our pages here i'm going to go to my home page and then let's see so short codes i'm going to copy this guy we're going to add a new page here called home too we are going to stick these shortcodes in from the home page do i actually do i want to do that i'm trying to think do i really want to copy the home too or should i just actually no i'm not going to do that i'm not going to do this i'm going to go edit the home page directly and then um that way we're just going to do exactly what we just did have it so only administrators can see it jillian says i would say it's beneficial to add menu because the lines are slightly faint on top of the background okay yeah yep i agree there and then jill says i would think that anyone visiting your site would know that it's a menu icon not all sites but definitely yours yeah i would agree with that too a bit presumptuous but it definitely um it definitely works fine you have a lazy load at the logo those after the menu okay i'll deal with that later i think it's a plug-in that i have that's doing the um that's doing the lazy loading jillian says there's no way my mom is visiting [Laughter] yeah i'll give my mom credit she would she would know um but my mom also works at like a business development center so i would expect her to know that all right so let's switch over to the homepage real quick or excuse me the mock-up for our home page and let's take a look so this right here is all going to be grid i touched on that when we first started um let's see how we've been going an hour and a half wow i would have wouldn't have guessed that it would take me an hour and a half to do the the menu and the footer but in any case i'm going to use grid here i believe although we're not going to be able to get the video exactly to look like this and that is okay because i think i really want the video to be like the real video even though i know that's going to have an implication on page load i'd rather have the real video than it being an image they click it you know and it takes them somewhere else so we're going to have basically a grid layout here which i think is going to be three wide and three tall so just thinking about this before i start so i don't make mistakes here and then i'm definitely still going to make a mistake but that's the point of these live streams so you can see everything in real time so now we're going to do is pop in do we want to do a section or just a div i changed the page width to be 1400 so i think we can just go ahead and use a section but then it's going to have padding on the left and right i don't really think there's any difference between the section and the div but i'm just trying to evaluate my options here because on the sections i'm going to have to remove the padding each time i'm going to i'm going div so this i'm just going to set to administrator just so we can make these tweaks and not disrupt anybody so um width is going to be let's see but if we go 100 we're going to have to set up the alignment every time and kind of the width so what is our spacing here on this it's a hundred on the left and right or roughly is it 100 over here as well yep it's 100 there and then between here it's 80 i believe oh that's a hundred is it 100 down there yep okay so it's 100 all the way around so if we did that we could do one div with another one inside of it that would be how wide 1440 i'm assuming i'm struggling to select these sections so i can see exactly how wide this is is there like a measurement tool in figma that would be super cool if i select these oh there's the container so that one is 1225 by 460. so 1225 is more narrow than our page width which is 1440. so that would mean then that hmm not sure exactly how we want to do this this is what i would be doing if i wasn't on stream right now as well would be sitting here thinking about it except i'd probably get up and walk away from the computer and like walk around like pace around my house and try to think about it um let's oh yeah maybe you can use hoverify i'll try that real quick so this says canvas is 1400 but i don't think it's picking up exactly what we want it to because it's not um this isn't the actual html elements jillian i'm glad you like it because this is exactly the point of me doing this i enjoy it and it's engaging and people seem to really like it yeah see the grids don't quite work with hoverify and figma unfortunately but let's just make some presumptions here so if there's 100 pixels left and right that would mean that we could have one div that would be our main container and then we'd have another one inside of it that would be however wide roughly 1200 something so that's what we're going to do so this div here we're going to set 100 pixels of padding all the way around which we will almost certainly need to adjust for our mobile devices because that's a ton of space actually just for the sake of curiosity let's go look over here so in this small phone yeah it drops to about 20. so i'm imagining actually this is going to be essentially the same thing in the future as well so maybe we need to make up a class here because i bet this is also oops trying to zoom in not scroll i bet this is also 100 there it is so we need to make that adjustment in more than one place what about right here is there a hundred almost but that image takes it up i bet you there's like 40 pixels of padding right there and then what about down oops gosh i keep trying to scroll that's 100 as well perfect so what i'm going to do is undo this padding here oops clear that out and then we're going to just set a class here of ps div ps div padding i guess something like that and we're going to make this 100 pixels all the way around and the reason why i'm switching it to a class is that so as our screen width shrinks we can change it to let's say like 75 at less than 992 50 at 768 and then 20 at the mobile device jillian i really appreciate that the design i absolutely love as well and it's really the idea is to be consistent with like the youtube thumbnails so like the the premise like facebook group that banner changed the youtube styles changed and so really i want to make the website match that and um you know everything to be kind of one really consistent brand so i appreciate that so now inside of this div we're going to stick in another one this one will set to 100 percent and then anna thank you as well really appreciate that we're going to set this to grid column count is going to be three i believe we're going to change that in just a uh just a bit if we need to and then we're gonna we're gonna need let's see one two three four five five divs so inside of this one we have a div one two three four five bam all right inside of this let's go ahead and stick in a video element i might change this in the future once i figure out the load time implications and whether i'm actually allowed to put a thumbnail that links to youtube but then again i don't really want people bouncing back and forth i don't know not sure we will look at that later on so let me go grab that video link real quick let's see oxygen where is it doo doo doo [Music] course there it is get link and in this video we're going to paste that guy in so looks pretty similar but not quite what we want now we need to go back to our div that's basically making our grid and we want to set this right here to a column span of 2 and then i do believe that is our row span two we'll leave that is as for now that looks pretty close so then we need our heading here which is a font size font size of 44 so this one is going to be basically our i guess it's technically the h1 so we're going to go ps uh heading h1 i don't think maybe i'm not sure i'm just thinking in in my own head here so 700 looks pretty good and the heading says super charge your oxygen builder web site i can't remember if i used websites yeah and then that's actually it says extra bold so i'm assuming that's even more than 700 is it 800 can you go nine you can i actually don't know which one it is super bold i'm assuming would be 900. i'd say sections everywhere the global style section set up for your 100 pixel padding yeah i thought about that but i have a bunch of sections elsewhere and i don't want to change those global styles just yet because it's going to wreak havoc on other parts of the site so i'm going to do it this way because i don't have a whole lot of page content so now that font size says 44 so we need to change that so there's 44 and then is the color full black it is oh it's 333 so we're going to go set the text color here to 333 and then this global color we're just going to call this heading headings like that and then what's our margin underneath this so we can scroll in and use our little measurement tool so there's 12 between that and then there's the line height so i guess we'll just go 12 pixels underneath that which hopefully will be good enough when you account for the line height i think we shall see so we're just going to copy this text which is monster at 20. looks pretty light and then it has a color of 666 so paste this in and then how is that going to affect our body font so elsewhere on the site our body is a 4d so this is a little bit lighter so i am going to just set a global color here of 666 and then this will just be body light is the class i'll call that really doesn't look all that much different but it looks okay and then it has a 20 pixel size so we'll go 20 here and then what's underneath that so bye so we're going to i guess add what is our measurement here i'm assuming it's 16 pixels right here so that's what it's been in other parts of the site so it's 24. we'll go ahead and do that to keep it consistent and we're going to go link wrapper and we're going to use our class um me jillian we are so far from designs that cannot even distinguish color are you talking about accessibility stratos you're saying people can't distinguish colors yeah um i lost my train i thought what i was going to do was go the ps i think i call it button medium and then inside of this the text is going to be by now i guess and in this case this font size is much oh it's actually it says it's 14 surely that's not right but in any case this background color is kind of this pinkish red do we already have this as a global color whoops i already have my settings panel open so our colors here we don't so i'm going to add another global color so this one is going to be just i'm going to call this one red i don't actually know the exact shade it's more like a more like a pinkish red but that's okay so we'll stick that in there and then this link wrapper we're going to use the oh actually we need to add another class so ps button and red is going to be our class so background color is going to be our new one and then where did we apply the border radius surely it wasn't to the class itself maybe it was hmm that's not what i meant to do i guess i'm going to do that again so our border radius i think i set it 25 which to be perfectly honest with you i'm not sure is exactly right and also this does that have a bit more padding so that's 38 left and right and then 10 top and bottom and i'm just gonna add this other class so button purple how much padding was those oh it's not it's not any different okay don't you have on your figma designs a list of colors used i don't know figma so i asked to be perfectly honest i don't know either i'm not a figma expert but i kind of just go down the list here and you know pull out the colors welcome back taylor glad to have you buddy so this button doesn't quite look as big as it does in the mock-up and so what i'm going to do here is on this class i'm just going to double check so it's 38 oh yeah there is more more padding there so 10 and 10. i think i reduced the padding and those header buttons so that is much closer to how it actually appears now this is stretched so it looks like the supercharge is on its own line so your oxygen builder builder is one line like that so it's fairly close and then there must be oh this is broken up as well so video tutorials comma downloads downloadable resources templates and more it's kind of on its own line so this stuff is actually not going to work well if i make these line breaks i just realized so i don't want to be doing this because on mobile it's going to not look good so what about if i set the max width here so let's take a look at how wide this is does it tell us specifically um never put br yeah i'm not going to do that um the br is not gonna work and then also the line breaks trying to think what would be the best way to do this i guess it's gonna be max width so let's just kind of play with this a little bit yeah the line height might be a bit different too it might be more narrow doesn't look like it has anything special for line height and also i can't help but notice does that actually look bolder yeah so this headline i'm going to change so what is it what if we do like 75 that doesn't work max width can you do a percentage i'm going to go with 320 why does it not break that oh that's super weird how does that look on the front end i wonder is there actually a a break there where it's supposed to be no of course not uh hmm and then it also looks terrible i really don't like that so um gee someone should yes someone should fix that it should be you no i'm just kidding um line height jill you guys have screamed line height multiple times uh i also made a mistake there so i don't know when you when you say line height i don't know if you mean taller or larger yeah that could work elijah so if we go set this to a max width of like 320 i don't i think 320 is too small i'm gonna go percentage oops not three thousand seventy-five jillian says reduce it um the line height it's not one not two 1.5 something like that so then code block so then this headline hello world common out this php and then css is going to be this headline and then breakword like that all right so is this closer all right i'll try 1.3 i'll try 1.3 so save this refresh oh man it's like one letter off um but then it makes all this stuff not stretch i don't like that class with white space no wrap to switch on off low res this shouldn't be giving me this much trouble also one thing i noticed real quick between the mock-up and this was this spacing what is this so that's 40. i really i wanted to adjust the grid spacing real quick grid is going to be grid gap of 40. let's see class with white space no wrap to switch off class for first two words so are you saying add a span to this and then add a class to the span is that what you're suggesting paiolo says a beer should help i still have coffee it's only 10 45 am where i'm at it's not not beer time yet but yes it could be it could certainly be helpful all right waiting for suggestions all right so span supercharge your oxygen builder websites and then this uh you said class with white space no wrap to switch off on there's a bunch of suggestions coming in here and i don't know i don't know which one i'm happy with to be honest hmm isn't there some implication for spans also not being like really um really like advantageous something about that i can't remember i don't know what i'm talking about don't listen to me supercharge your auction builder website oxygen your oxygen builder websites there we go all right i'm going to take off this max width and this div so div with flex and text inside and set the width for the div uh anna says can i see this mock-up yes you can if that's too zoomed in let me know i'll kind of bump out real quick i'm not sure why word break break word is breaking individual characters to be honest i don't know either because i've definitely used that before for the sake of time and effort i'm going to leave this as is and we're going to proceed because i don't want to get hung up on that those sorts of minute details we can spend hours on and still not have a solution so we're going to keep moving so now in our mock-up and if somebody comes up with a suggestion that works i will revisit that so now we have these really colorful blocks which are awesome this is why i pay a designer for almost every project that i work on just because it looks so much better and kyle says i think by this point i had the whole tab site rebuilt uh i think i saw you said it took you what would you say 17 hours or something like that which is really not that bad for how huge that site is so we're going to export this image we're going to export this image and then this one as well let me make sure it's that whole thing yeah so that's what i want i'm just getting these images real quick and i am going to pop in an image element so we can go ahead and upload these guys so upload and i'm just going to add all three of these to my site and then this first one is this right there and then this div i'm assuming is the purple background color that we already have as a global color which i do believe is the case so the 846 fd1 settings uh slightly off but just to be consistent i'm going to use that it's close enough about 17 hours of working time that's pretty good yeah i think i think i could probably move through this stuff quicker and i just try to slow it down for the videos obviously so what was our spacing around these so we had 40 there's 20 28 40. so we're going to go what's kind of the median here we're going to go 20 top and bottom and then 40 left and right so i'm going to change this div to a class of ps let's go div home something like that uh so 40 top and bottom and then 20 left and right uh there's a slightly different color there behind that image so i guess i do actually have to take this background color so that's kind of a bummer but oh well not too worried about that so our color here was on the id of this element so we can't use the global it's got to be that guy uh exactly kyle yeah you said you're in your own world did it live for the one page and it took me ages yes totally understand that all right so now it still looks oh no there's just the purple from the the padding that was looking off so then this is left aligned learn oxygen from the ground up so that is a font size of 24. and um christian asks what extension to show measurements this is actually a figma mock-up so i can just hold alt and it shows me the measurements to the edges of the container but of course that's not the case in oxygen you could use something like hoverify for like a real live site you know to like get measurements and see i don't think it has like a measurement tool but i did email the dev asking him to incorporate that and he said that that was coming uh so let's double check real quick this spacing is 16 and then that one is 12. so we're going to just basically duplicate these out a couple of times here in just a second so 16 then we're gonna have a heading we'll just call this ps heading home features or something like that text color is white font color excuse me font weight i believe is like seven or six hundred we'll double check that in a second learn oxygen builder from the ground up and then our font size was 24 pixels so we need to reduce that um let's see so that looks relatively close and then i'm just going to copy this so let's see no nothing in particular here of note so we're going to add 12 pixels of margin beneath this stick in our text element and then in this div i am just going to change the typography color to white so now this is look um let's see this is looking relatively decent although there's 47 pixels of padding on the right side there so it looks like this text element is not quite stretching to the full bounds of the container and it looks like the same thing is true for the heading as well so there's a bit of a line break and i am going to set these to a max width of like 75 we may end up with the same issue as before maybe 85 yeah 85 looks pretty good so that's what we're going to do set the max width here to 85 percent and maybe it even needs to be more like 90. for the text i think it's going to be 90. because the text extends a little bit past the heading so that's going to be that's going to be perfect so now i'm going to go ahead and delete these two containers oops did it not delete there we go so i'm going to duplicate this two times and that way it should be a little bit more simple for us to go ahead and adjust this stuff we need to change these colors so i'm going to be switching back and forth a bunch here hopefully i don't make you guys sick but this is what i would be doing on a real site so copy this and then i need the blue as well and then we also need to set our thing to stretch so is there a different padding here so that's 40 on the top and that's 20. so 40 and then that one's 36.8 so 37. so i guess we need to add 20 pixels above this image and actually i don't want padding i want that to be margin and then it's still not quite perfect so what's the the spacing underneath that so it's 16 so we need to go 30 what 32 that looks a little bit too far so that says 36.8 so that's not quite let's see so 32 plus four more is that higher up me and kyle were talking about this the other day that um when things are just slightly off like even two pixels it bothers me so trying to just get this exactly right all right so now we need to change this background color i think we already have this one as a global color but once again i am just going to apply this straight to the div and that looks perfectly fine swap this image so then we need to change that background color and this one is going to be done for you resources what is this background color it's that 33c i'm 98 sure once again that that also is a global color we have but um let's see then this one is done for you resources and then take this and go back over here and do that uh let's see kyle says if i have content ready i try to finish on a day and the second day for cleanup i have a white label client who gives me all the assets and copy and it's usually like five hours for ten yeah i can do like kyle said i can do a full site usually in about eight hours like a full day um it takes me a long time to build but i tend to build everything from scratch from a design and figma like jonathan yeah so that definitely does take longer i believe but it's better for me that's something that's not um somebody that's not a designer the heading in the center column is not in the same height as stratos says three divs the top one let's see yeah i think it's because the spacing is ever so slightly off let me save this real quick and i want to look at this on the front end so let's see go to inspect and then this grid tool i thought there was a way that it would overlay all the lines which i wanted to do oh yeah it's like ever so slightly off you can see if i hover over this one here then it's just slightly taller so that must be that difference of about four pixels that i was coming up with earlier which was on actually i think it was on the bottom of this image so it was technically like 36 so if i save this [Music] so now i guess i gotta turn on these things again yeah so there we go that is actually lined up properly so perfect and then is this one lined up it is uh the widths are a little jacked up though because of the screen width right now so i need to adjust that uh please make the gap even on top and between of the cards yes i will do that of course don't worry um so these between are 20 that one is 20 and then that one here is 40. of course it's 40. so earlier i went and adjusted the grid gap to 20 but now what i'll do is on this div can i add 20 pixels of left margin i can perfect so that's what i'm gonna do strata yeah i i'm i'm getting to it i work in i work in weird ways don't you guys worry so uh now we need to set these to stretch i believe vertical is going to be stretched like that and then the text is different on these so just trying to take a look at how we can make these line up we probably need to go to let's see is it space between space between i don't think gives us the alignment that we're well actually i guess in the mock-up that is technically down at the bottom which is kind of interesting as compared to these two so those two are on the same line and then this one is down so you said match height of tallest child that's what it's set to it sort of works but not really not the way i want it to so if i take that off then that kind of puts us down at the bottom and then that doesn't give us the alignment that i've wanted clifford says why hasn't someone invented a figma layer export tool um i guess you could but it the export is going to give you like svg and just other graphic options wrap the title and text and a div and make space between yeah all right perfect so we're going to need to make some adjustments here so div set that there and then that one a space between the stretch though i don't think we want it to be uh i don't think we want it to be this or do we and then match height of tallest child um i guess it's gonna have to be but it looks so much higher but maybe not maybe not because there's 45 pixels of padding between that there's 36 there and there's 16 there um so 45 that's way more than 45 but i guess what divs are you talking about these ones i don't really understand how that's going to solve our problem here so stretch i don't think that is going to work is it oh but yeah that's the same thing that's exactly what we just had so there's no real advantage to me doing that so stretch and then i guess we need to do that same thing for these divs and i'll just play with that a little bit so that's space between this isn't really going to change anything so there's that and then space between okay so then those are completely wrong i don't think that actually got us anywhere this is not jillian says math i hate it i know i agree so i don't know why this is giving me so much trouble it shouldn't be that hard i would say three divs inside each column the column goes space between and then play with the inside divs okay that's not a bad idea make the divs as tall as two lines um josh are you talking about in the grid settings i was thinking about that are you talking about these i don't think that's gonna help oh no not column spam i always get column span and row span confused oh wait i need to go back here that's not where i meant to be so row [Music] two are you talking like that because that no wrap header in its own div i have the same thought as josh make the heading div height and the same as the two lines of text all right so basically strata said i would say three divs unlearn have five lines should have four oh there's so much going on none of it makes sense um let's see can you do polls it would be cool to take all the suggestions people throw out for these things and pull to see which is the most popular youtube builds a website style you know i actually have thought about that like people basically are like telling me how to to design it or like everybody gets a small chance to um the uh everybody gets a small chance to design the site and you see how it evolves everybody gets like you know 15 minutes at a time or something um anna says can we add those rounded corners yes yes we can so what is the border radius here i wish figma gave you um i wish figma gave well i guess it's eight right there but i don't think it's eight pixels is it i guess maybe so that's good enough for now so borders eight that's gonna make it look a heck of a lot more clean supporters eight and then does that video have rounded corners yes it does so our video element um borders eight i didn't know that actually worked but apparently it does kind of cool donate a dollar to make a suggestion yes speaking of which you can donate if you want that would be sweet it's a good idea um josh says take and wrap the icon in a div heading in a div text and a div and then adjust with a class on each shared i think it's pixel unit for border radius okay cool because earlier there was a hundred for a button but the hundred didn't look right so i wasn't sure if it was actually pixel radius um i wonder if i i will do it elijah i was talking earlier about doing more regular streams like doing tuesday and friday or something like that so if you want this friday to be a donate stream and we'll make literally anything you want as long as it's not like vulgar i'm down let's do it uh okay so the only thing i could think here uh you know what i'm going to do i'm going to take a quick break um and step away for just a minute i'm going to think about this you guys continue chatting i need to turn off my screen switcher thing real quick here so i'm gonna i'm gonna take a quick break like i said i'm gonna save this think about it and i will be back in just a few minutes so hang tight everybody we're not done we're gonna keep finishing out the the rest of this home page so i'll be back in just a bit [Music] [Music] so [Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] alrighty i'm back everybody um so just catching up on chat real quick here i saw jillian said just bought hoverify awesome it's a really cool tool um i think i finally understand what you guys were talking about here with this div and basically if we set these uh this layout here let me go back if we stretch these guys then still not quite right but if we were to stick some like margin underneath them or something like that no no that's still not right crap so if i set this one to 100 nope 100 why is there so much extra space there i don't get it so that's 36 but it should just line up because the image is smaller adding in text on separate divs wouldn't that be essentially the same thing as the heading in the text being outside of the div like it was before so do do do do do do jonathan i'd recommend removing space between on the column divs okay let's give that a shot so all i wanted to do now like these first two are correct it is very hard to relay from chat yeah i appreciate you guys trying to help um but you can see these texts have the same width and then actually the text is lined up on all of them so that to me means that i think i think i see what you're talking about now so text div take this out might be so earlier we were talking about it being like 1.3 so let's give that a shot real quick that definitely is an adjustment that needs to be made oh and there's a class that i added but they didn't end up on the other ones oh yeah they did never mind i just am not paying attention i had a class but i added it to the id on the done for you text can you not just add a minimum height that equals the same amount as the two lines of text um yeah yep you probably could so would your line height just be two that looks reasonably okay also it might be because i changed these widths i am not very smart y'all sorry about that so this max width ended up messing up this stuff here um and now why are these longer what did i do to break that there's 27 pixels of margin beneath that div for some reason which shouldn't be there so these are much much closer now so jillian says yes adjust the text container versus the line height oh in size and spacing not the line height gotcha so what about if we just added like 15 20 20 25 28. can you go keyboard oh yeah you can do keyboard that's sweet 30 30. yay yes let's go all right we're good i'm done we're moving on hope you guys are pleased with that you can scream at me all you want all right deep breaths everybody that took way longer than i care to admit but it has achieved essentially what we wanted but for some reason there's a hoverify situation going on here um okay it's just on the back end looks fine to me all right so there is an advantage to having long hair is that i can headbang sweet yeah thanks kyle i i'm not even joking when i say it means a lot coming from you i really envy your design skills um and we're gonna go back to our user role equals admin i don't want this stuff being public just yet um yeah martin i always run into this problem when i look at it i'm like dang this is going to be simple and then after that it doesn't um it doesn't end up being as easy as it was in the mock-up now we are going to move into another slightly challenging oops slightly challenging section here no i'm glad you're here though um let's see i personally not use padding because if you ever change the text and it's two lines it'll mean changing the padding that's not that big of a a deal rin stoke to see you so glad to have you rin is amazing she's the best um yeah so basically with this here uh let's see chris says by using min height even if your text goes over the two lines it won't adjust the height of the container um also kyle i left the door open behind me now just for you so the boogeyman can come in and get me um but this one's going to be relatively simple it's going to be a grid layout the only caveat here is going to be these little tool tips and i've had this video open this entire time because i am basically going to hack elijah's layout here that he did for this mega menu video like a year and a half ago and just basically make it appear on hover so the um the tool tips i think we can achieve essentially the same thing so we'll double check we'll just kind of play with this a little bit so now what we're going to do is a grid layout i think we're going to do a three column and this photo is going to take up two of them or maybe we'll just maybe we'll just do a div that's going to be 100 height but yeah let's just get going here so there's that div we're going to add in another one so i'm going to go back to my body and add a new div here this one will be 100 and then inside of that we're going to need another one um we need to add that class what do we call this one here so this one was ps div padding remember we checked earlier and they all have pretty similar uh pretty similar layouts kyle he's not coming for me just yet he's uh he's on his way to your house he told me so uh be ready so what do we have as our background color here so this is the two four two five two six i can't remember if i saved that as a background color elijah i don't know if you heard oh what why is why is the hex color appearing there is that the title yeah wow that's smart uh although you can't change the global color like titles what i was hoping for which is what i was calling on elijah for is if you hover over the global color it gives you the name obviously but if you were able to see what actually exists in this field like whether it be rgb or hex that would be so nice if we could see that because i don't have that exact black color from the mock-up so it was two four two five two six we'll just stick that in there real quick and i don't want that on the class i want it on this container two four two five two six and then uh let's see what do we need to do now so this one we will do trying to think here jillian says yes kyle says yes sweet elijah make it happen please sir we know you're here um maybe i actually don't want that padding unless i make the div i wonder if i go with a background of that image here so i'm going to take this which is not really the best screenshot ever but look there's some straight up royalty in this photo here there is there's kyle there's sridar there's elijah adrian there's ren there's gregory hillary uh steve let's see who else there's taylor look at all these sweet people if you're not in the photo i'm sorry but i love all of you okay so um what i want to do here is take this image and then we're going to export that guy i'm going to try this i don't know that this is going to work kyle i i uh you gave consent by joining the group so there is this image no repeat um let's see stratos join the group would be happy to have you so this image is uh 495 tall so i am going to make this div [Music] a 4.95 then we're gonna set the background to left let's go like 50 75 75 roughly something like that uh chris welcome in oh i kind of figured that was the case stratos because i figured i would have come across you on uh facebook by now let's see so now this width i'm just going to set this to like 25 this might not actually work maybe i need to push this background over a bit i have no idea if this is actually the right way to do it because how does it look in the mobile side of things oh no it just takes up the full width so i need to use an actual image element instead of the background so i'm going to scrap this idea entirely so we're going to get rid of this and then we just have our div there but let's go ahead and pop in an image put this in there and that's actually already sized for us so this is going to make it much easier so horizontal let's go with space between oh is it not i was uh let's see yeah i hate when the sound doesn't match up with the voice is anybody else having that problem anybody else not having the um the voice and like face match it totally might be my garbage camera um maybe it's light or something no sync let's see on my end i'm trying to check on my end it's so weird um i see it oh okay so elijah said he refreshed and it fixed it so it's working on my screen here so it must be the stream is slightly out of sync like from the youtube side of things so in the obs software though it works just fine i can see it it's like perfectly timed jillian did that fix it okay sweet thank you for watching the ad i appreciate that certainly appreciated okay so this width now oh yeah it probably did happen after the break there was probably like a dsync there with the way that it came in and out alrighty so that is 30 over there but what is the width specifically on this container so that says 365 but of course there's some padding on the right hand side there that one's 313. so maybe we'll go 300 pixels instead of width we're going to go 300 pixels oops is 330 the same thing roughly yeah i'm going 30 width in sync yeah buddy i need to get some tunes playing in the background that'd be a good choice so now also included in your membership is our heading here and this guy is extra bold 40 and white which is essentially like our same styling from before but i used the um the h1 class so i'm just going to add this in extra bold white and then also included in your membership i am going to change this uh whole div to oh if i can get to it div left align and then we've been using 16 pixels of padding pretty consistently so i will assume that's what we have here so there is 12 plus the line height so 16 is going to be good chris you caught me [Laughter] all right so this text here sandra says i just bought oxygen and i like working with wordpress again yay welcome to the party so then text there might be a little bit of extra spacing there because of the um line height of the heading but that's okay and then i forgot to check what the text size is there it's 16 so i think it should be good but it looks like yeah well actually it's smaller than that but i'm leaving it as whatever the default is and then the line height let's go ahead and bump that up a bit because it's not the same like 1.5 or is it 2 i'm going with 2. that looks good so 16 again i'm assuming and then now we're going to get into the fun stuff so this could be another spot where we are hung up for a decent bit um so these are going to essentially be like tool tips and we're going to play with this a bit so the first thing i'm going to do is add in a div set it actually before i change any width i'm going to add a class so we're going to call this ps tool tip divs the width here will be 100 our alignment will be horizontal middle and we'll leave it at that for now maybe left align actually then inside of that we have this check mark icon which if i can export this directly i'm just going to do that because it's going to be way easier to just get this and then pop it in this is cheating i know i don't really mind because this is going to save us a bunch of time and i don't want to get hung up on a little tiny checkmark icon so this is what we're going to do so that is 16 and let's go let's see what's the spacing here so that's eight and then this is monsterat bold so 8 pixels to the right of our icon and then i'm going to close my structure pane here so it kind of zooms in a little bit then let's add some text then this is going to be woo course uh jillian asked do you have a module about using classes to set up padding and spacing actually not specifically but that is a great suggestion i am going to write that down because that's something i've been meaning to do for a while um almost like utility classes for course yeah that's a great idea so i will definitely definitely get that added there's like a series of videos i'm working on right now as course additions so that stuff will come in time soon all right so we need to change the font weight and then it's white until you hover and then it has that underlying border blue which is pretty cool um yeah that's a that's a really great uh really great habit to be in and also if you have the oxy ninja core then it basically does it for you so it's super awesome all right so let's add a class here so this is going to be ps tool tips text so we're going to set this text color to white and then the font weight was bolder i believe i don't know if it was five it says it's bold so let's jump it to 600. yep that looks pretty good and then on the regular state we're going to go to border set it to white and zero percent opacity with the width of one and solid so it basically adds the space there elijah's elijah says i also like to set up a few basic utility classes when i first fire up a build like rounded shadow transition yeah absolutely that is definitely not um not a bad idea and then on our hover state we're gonna go with the blue which i believe is this light blue oh not all not all just bottom so blue bottom one and it looks it looks bigger than a one pixel border i think it's a two so let's change that to two and then we also need to go back to our original state real quick and change that to 2 as well so then our divs how much spacing do they have beneath them there's 12 so with our div here we're going to go 12 pixels on that class and then duplicate that guy um what is that frame on your left uh oh the frame over here that guy right here i'll grab it real quick so i don't know what kind of music you guys are into but this is uh from actually right before kovid kicked off i went to a concert with my brothers in austin texas to see this metal band called cult of luna and my brothers are both musicians and uh one of them is really good friends with one of the guys on the tour so he got their set list i don't know if you can see that it's probably really hard because there's a glare but he got their set list for that night and then also all their signatures so all the dudes in the band signed this and they had just released an album at that point so they were touring on that album and it's pretty cool i've been meaning to hang it up over here so i'm gonna do some changes where i hang some stuff and get some better lighting and that sort of thing so yeah that's what it is good good question all right back at it so we need to add a transition effect here to that hover so let's go to this div and then i'm going to go to effects transition here's where elijah's talking about adding those utility classes um would be extremely helpful because instead of the uh you know manually having to do this it would just do it for you kyle says can we also see what's in your refrigerator uh actually you could because i have some i have some indian curry chicken marinating for dinner tonight so if i had enough and anybody lived nearby you would be welcome to come normally um maybe in the future we'll all go to dinner together cheers to that okay so now we have oh does it not do it i guess did i put the effect on the wrong thing oh so i guess i have to do this in a um uh let's see in a code block yeah for sure come on down also i have one of those huge like shrunk boil pots so we can do like a big spicy shrimp boil my mom loves those so she comes over and uh yep do that straight to the bathroom my my house is clean you may not be able to uh to see much of it but the whole house is clean elijah asked how many of you would come to an oxygen meetup at the next word camp us me 100 i will be there uh i was planning on going before kobe kicked off you know to to the one which i guess would have been october of 2020. but yes i would absolutely be there uh drinks on elijah at that at that event that's for sure also i said this before but i really want to do oh yeah yeah yeah for sure stratos i also really want to do like some travel in europe for like an extended period of time whenever they allow us pesky americans back in and um i would love to meet some of you guys in europe that's like a dream of mine to like obviously go to greece and meet you stratos and all the other oxygen folks out there uh julian says i would but i can't leave the country because canada has a 2 000 quarantine for international travel that is brutal um i don't even think that word camp us is going to happen this year they i think are doing it online for 2021 again so it's probably gonna be next year that they do it if you know in person at all kyle says if they were smart they just never let us back in yeah you're right we are pesky as hell that's for sure um okay so now we need to do is our ps tooltips divs we need to take this class so we get our hover effect and i'm going to add in a code block so code block is going to be php comment that out css we're going to go dot ps tool tip divs and then what was our other class ps tool tips text and then i lost my code block here so we're gonna go like this so be it pstool tip divs hover and then our tooltip divs text is going to be border bottom uh solid 2 pixel and then what was our rgb or not rgb our um hex color here so does that work yeah perfect so now we need to add that transition effect transition 0.2 ease and outright is not isn't that the or is it timing function transition timing function ease and out i believe transition 0.2 like that right 0.2 is a bit slow to be honest i'm going to go with 0.1 um so like that yeah that looks good elijah says it was st louis last year unless they have it at the same city twice so st louis again but it probably be next year yeah martin thank you so much i will take you up on that offer i don't care where i go in europe as long as um anywhere i've had two trips to europe that have both been cancelled for various reasons so now we basically just achieved with that simple css anywhere you hover on these divs it has that border effect under the uh the text which actually we don't really need this to be a 100 width because that border doesn't need to extend to the far edges there so that will be totally sufficient to just leave it like that and let its width just be whatever it actually needs so the other two here is premium forms and then facebook and discord so premium forums and then facebook group and discord like that okay so that is pretty consistent with what we have here except oh no the text the text is about the same size i'm just super zoomed in strata so uh basically my brother and his girlfriend and i were flying to amsterdam and then we're gonna spend a week there and then we're flying from amsterdam to athens spending a few days there and then after that we were going to santorini so unfortunately that didn't work out but hopefully later this year hopefully later this year i can get out there again now this challenge is going to be hovering over this text then pops up a div that will have some extra text inside of it so that is where i essentially am planning to steal your work elijah from a year and a half ago and more or less from what i understand we have a div that is essentially just hidden until you hover over this and in the style sheet here you change the position from left off the screen back to zero and then the opacity is set to one um strata said when uh well if you know we can travel it would be hopefully late summer like september something like that but that's wishful thinking at this point so jillian that that actually is a good point um the oxy extras let's see if i can get there real quick so oxi extras has a pretty cool component in their docs so tool actually it's not called tooltip it's like pop over hotspot and pop over um so this would be basically exactly what we wanted where like you have this oops you have this like point that you hover over but i don't think that like i didn't want to do it just to like have another plug-in involved and i don't think this is going to be particularly hard i say that now two hours are going to pass by and then we're going to have completed this um but yeah oxyxtras has this so that might be kind of cool but we will skip over that for now so i haven't saved in a while i'm going to do that and what i'm assuming we need to do is we need to add more divs in here and these are going to be the ones that essentially go away uh oxy power pack i stopped using a while back because it seems like it hasn't been updated in forever so i don't really know what happened to that so let's actually go back over here to elijah's video and where let's see you added the first div a little bit further back it looks like so you didn't actually you didn't change the positioning for quite a while so you could actually see it when you're working with it so where did you set it to disappear it looks like it's a little bit further on oh so right here just getting to it yeah i didn't want to use js either because you can do this without having any extra plugins unless i'm wrong unless there's a code block somewhere in here but i don't think there is okay i don't know if you guys can hear that hopefully i don't get copyright struck i'm gonna i'm gonna not play that audio i don't actually know what the difference is so basically the div right there is set to position top 100 and it's set to absolute um kyle yes that's exactly what happens this is inception right here all right so now what i'm gonna do um actually we probably need to stick this div inside of the other one so let's go with ps tool tip div tooltip divs content is going to be our class i'm going to duplicate this three times take this one and stick it inside of this pop these inside of here and then is that one the last one yes it is so now we need to see how much spacing was in our mock-up looks like 34 over there but that's not quite what i'm after so 24 is what i'm going to do top and bottom and then 30 left and right so that's not quite equal but that's what i'm going to do so we'll set our background here to white and then 24 and 32 is what we'll do here and then text let's just steal some text right out of here so i'm going to do this and this doesn't look great at the moment so now we go to layout and then absolute we're gonna go left 100 right and then we need to set this one to layout of relative i believe yep okay so we're getting there this is roughly how we need it and then these other ones uh do do i'm trying to think these other ones also appear currently so let's actually delete them right now so that they're not confusing us i am going to delete this and then this guy um let's add maybe like 10 pixels of margin to push it ever so slightly to the left and then print it i don't know what you're talking about um and now back over to the video real quick and then in a little bit elijah adds some css so basically it was your parent div hover and then the name of the tool tip so it's left zero and opacity one but i'll need to change that positioning because you did left like 9000 so it's like off the screen i'm pretty sure so in our code block from earlier we're going to take this div which is our tool tips container in our css here so there's that and then we got to add one more which was ps tool tips divs i believe and that's going to be hover oops hover like this and then um what was it position i already forgot oh it's left 0 and then opacity 1. so left 0 and then opacity one right you can also just do pointer events none when the tool tip isn't active uh yeah let's see so i need to change that okay so thanks stratos really appreciate the uh the support so let's see what was going on in chat here so you missed an s on tool tips did oh yeah i don't know why i had an extra s there seems kind of silly so that's left zero but that's not exactly what i want uh don't i wanna at 100 which is exactly where it is now right so that will work and then um how does it know which one to actually pull up like if you have multiple of them i guess i should have watched your entire video but what i wanted to do left oh 100 uh what i wanted to do was make it so that we're working on this in real time and not have like pre-prepared it because of the live stream which i guess maybe is a little bit counter-intuitive but that's what i wanted to do so here we are so now we would take this div right and this is where we essentially stick it off screen so this is where the layout we're going to shift to if i remember right what did you do you had absolute 100 and then you change the opacity to zero uh so you did something like 7000 pixels right or like 9000 pixels off screen something like that and then you did uh let's see effects opacity zero right yep okay there we go so there is that and then we need the transition so then this is going to go on um let's see it's this div i believe so our transition will be 0.2 and then ease in out and then opacity will be our css property that looks pretty sweet it's working this is awesome oh but i need to i guess i can't use margin on the left side because if you want to like put your mouse in it then that won't work exactly so margin um i guess that's why you had that arrow in your example i also need to make this whiter because that does not look good so let's go like 320 i don't know what it is in the mock-up let's go take a look the this is 380 so really close [Laughter] kyle says it's going to look like on my 10 000 pixel wide monitor i know tough luck buddy all right so 380 is what i'm gonna do and then we had some border radius which we've been using eight before so i'm just gonna make a wild guess and assume that it's eight and um i don't know what it is i'm fine with that now is the arrow so i'm 99 sure that you did an arrow in this video elijah let's see or at least i thought you did maybe i saw it somewhere else there was definitely a video of yours that i watched where you did the arrow i honestly don't know how you do that let's see okay so i am okay with this for now to be honest um and then also don't we want to change this text to be pointer event cursor like this whole div basically so our ps tool tips div um code block will be dot ps tool tips um oh so jason says achieve that with after okay yeah that rings a bell so we're going to go hover and then pointer is curse or what is it is it cursor no oh no it's cursor pointer yeah pointer good lord there we go now i can type so now we should have oh gosh why is it going all wow there we go so yeah our cursor now changes to the little hand to give some indication that something is going to happen there which is pretty sweet so now we need to basically duplicate this div oh wait no not that one this one here because we deleted them earlier so now i'm going to put that one there and then duplicate this guy and i probably should have changed the um text inside of them but i can just delete the positioning real quick and i just got to take off the opacity which is annoying whoopsy daisy so this div had the uh let's see oh gotta steal it from my current home page i guess this will be this right here so this div oh gosh oh gosh there we go and then this divs text will be this one down here it is straight spazzing out there we go so now we can take this div and reapply those settings so our layout left was like 9999 and then our opacity was at zero cool um let's see julian says one of my clients used a 32 inch screen to look at everything and oh gosh yes yep those are horrible woocommerce course dope this works exactly as it's supposed to this is awesome um so i think i actually do want some margin because they're not you don't need to put your mouse inside of these boxes so that will be fine um let's see anna said try for arrow so cursor arrow is that a different one oh no i'm going to stick with pointer so that works so with the zero height 0 border right 100 border top 50 solid transparent border bottom um i'm not sure what you're talking about there is that for the arrow on the left side of that div oh oh i see what you're saying try this for the arrow ah wow very nice there seems to be an overflow to the right uh oh yeah i see what you're talking about i don't know what oh it's it's um it's the these things yeah so there must be something i'm forgetting so kyle says looks really great man i put some margin on the left of the tooltip box okay uh appreciate that a lot i i had to double check myself and see if you're just joking or not i'm like just kidding no i really appreciate that so margin on the left of the tooltip box right now i have um 10 so maybe we should bump that up to something consistent like 16 because that's what we've been doing i also wish that it was the same width so maybe on this second one i add a bit more to keep it consistent so 32 i want it to open like essentially in the same spot or roughly so i'm going to bump this out a bit more maybe like 45 that doesn't really seem like it's helping 64. yeah i think that looks a bit better even though they're not all exactly the same i think it's a bit less jarring so yeah that looks pretty cool uh okay so so this is going to be the before state of those div boxes that's what you're saying so the state is before and then uh the content i actually don't know what the content is supposed to be yep exactly it's like the boy who cried wolf that's what i was thinking extend the length of the second link's container yeah i could do that although it will adjust the border a bit so i could go with what is it going to be 3 20. oh yeah if they're all the same then i don't have to worry about the margin you're right you're right jill all right um so with this i don't need that anymore so i'm going to take off the 64. so now are they all in the same spot they sure are perfect so the content of that div before it content is just going to be that oh good lord that looks horrible expand woo prim fact to 100 i don't know um i'm actually pretty happy with this even despite not having the arrow so to be honest i am gonna move on so with this i wanted to adjust this on mobile real quick so boy it was an ass yep so let's see what did i do here for the positioning um this divs with is 100 and then this one is 30 and that one doesn't actually have a width so let's change this to like 65 and then and i'm not i'm not trying to like make you do no work i just don't want to get hung up on that right now because we still have more to do i'm going to come back to that later though so 1440 let's see that doesn't really look all that great it works but it doesn't look that great and then 992 we're going to do vertical and then this div its width is going to be 100 how these tool tips work at this point we might have to change to be on the bottom instead kyle says make an arrow make it okay okay okay all right i guess i want to but i guess so at this breakpoint i want to change this width to 100 real quick oh no not 100 whoops to uh basically just pixels go auto like that so our tool tip does fit here but i actually don't know if um this is going to work on a real device at 992. so at 768 i think what we're going to need to do is make this tooltip go down to the bottom so then instead of it being the layout absolute of left 100 we're going to go top um wait is it going to be left 0 top 100 or is it going to be 50 50 0 dang it hmm on mobile how would you know there is a tool tip to click as you would normally be scrolling around uh good question i don't really know maybe we can add a down arrow or something to indicate that there is something else there for us that is a good point maybe maybe there's not a point to have the tooltip on mobile i do know from analytics that the vast majority of users are um desktop on this particular site but i know that's the exception that's not the norm so let's see here trying to think what do i want to do hmm proximity sensor that sounds fancy all right so with the arrow situation i guess i still don't quite understand the oops i guess i'm gonna have to undo my settings again so that we can actually see this so effects transition no not transition opacity change this back to one and then our layout here is going to be like that so we need to display none these other ones so that we can actually function here real quick and then see this so chris says you oh my lord sorry i'm gonna give somebody a seizure here i apologize this i need to get further over to the left because this is this is not working there we go okay you could potentially add a little eye icon for information and when you tap it it opens the tooltip that's a good idea that's probably the solution okay so let me see if i can pull up that um arrow thing so arrow on div trying to think i wish elijah was still in here i'm gonna i'm gonna be like yo because um anna i i still i don't quite understand what you were saying like i think that's how elijah achieved it was like the before state and then going back and chat here um a width of zero height of zero border right 100 border top 50 border bottom 50. i'm assuming you would need to do that in a code block though right i'm looking up this other tutorial real quick arrow left so what about if i go you need to style a before state right um border right bottom top no that's okay i'm just trying to understand it's it's hard to get the like full point in chat so um i'm looking at this css triangle thing so do we have a second div body yeah okay so there's another div in there so if i were to go with a div and then this one is going to have a width of zero and a height of zero and then border top bottom and right of 10. hey wasn't there a dashed border on the bottom in the mock-up i think that's a good hint for the tool tip too oh yeah yeah yeah you're right you are totally right so it's on the bottom and then when you hover over it it changes to the full solid that's a good idea um so is that the whole container or just okay it's just under the text so actually earlier i set there to be no border on the bottom but what if we change this to be our same blue and then it's dashed and then when we hover over it it goes to solid great point jan really appreciate that that does indicate there's something going on there so yeah perfect so now this div i'm trying to follow the css tutorial that i found but i don't really think this is going to work so border top is 10 pixels solid and it's set to a transparent color then the same for bottom so white with full transparency and it's set to 10 and then border right as well so white oops white there we go 0 10 and then now how do we position this exactly um so this is going to be i wonder if i just use some negative margin real quick to pull it over of course not let's see that doesn't work [Music] how did you do that arrow on a div not a dog a div there we go i'm messaging elijah real quick to ask him how he did that come back transform skew 45 relative negative 50. does that work did you just try that uh yeah cool okay um hopefully he comes back in because that would be super helpful to have him in there until until i figure out a different solution i'm going to move on here because i don't want to get caught up on this um we are doing really well so i don't want to mess this stuff up too badly now um i need to go i need to go fix this position because somebody pointed out that there was an issue with the scroll bar and maybe it's because i didn't do negative i did 9000 off to the left yeah that's the problem okay so that's good and then effects opacity will be zero oh no wrong div undo to the rescue undo undo there we go wrong div so layout is going to be um back to pixels and then negative nine nine nine nine so there's that and then effects opacity will be zero and then do we have our hover still yes but i displayed none these so i need to take that off there we go that one's fixed and then layout display none done okay cool so there's that and we're gonna move on so read the reviews this one should be relatively straightforward we are going to add in another div here so this div will go right there 100 percent and we're gonna add our ps divs class i think what was it called padding that's what it is ps div padding there we go and then inside of this we need another one so that guy will go right there and then um read the reviews we have some text and then our slider with the sweet little quote icon the person's picture their name and their title or like their business name so i'm just gonna do a couple of these let's take the read the reviews let's look at this so we have monster at extra bold size 40 and then regular 32 line height and a 20 pixel size okay so we're going to add in the heading and let's use our h1 class but we're going to change this to a tag of like h3 just to make this really simple so read the reviews this is not the way you should name your classes but that is something i'm going to do for this moment to save some time so then we have this text here and the size was 20. so we're gonna change that and then i'm assuming there's 16 pixels of margin underneath this we're going to add in just the basic slider component even though it's not the most ideal thing ever it's going to work just fine for what we need so let's go ahead and set up one of these slides anna says i copied a full style from one of my sites come to it whenever you have time okay perfect so as soon as you can share that then uh we'll revisit that in just a little bit j1m says what software are you using for the design it's actually in figma so it's the like web-based mock-up tool it's really really great i like it a lot so that's actually 36 pixels so we do need a bit more um underneath this so instead of 16 it was 36. is this in the slider oh no that's in the div okay h2 after content position okay so you did you just do that in a code block anna or is that like done all in oxygen excuse me gosh all right now what do we have so the text with the quote icon we have this sweet div inside of it with this off kind of like bluish white color which i really love and what we're going to do is inside of our slide we're going to add in another div this is going to be ps reviews divs background color is this which i don't think we have i'm gonna go double check real quick eaf3 yeah we don't have that okay so then this is how wide it is 760. so we're going to go max width of 760 and then set the width to 100 then how much padding is inside of this it is about 23 we're gonna go let's go 24 top and bottom and then 48 on the right 24 and then 48 and then our quote icon is gonna take up some space over here on the left which is why it's a bit off uh but that that blue thing is not centered is it oh yeah i guess it is the quote is slightly off to the left so now we need to add in our text we're just going to do this and then we need to add in our quote icon as well so inside of our slide let's go pop in an image oops not a slide whoops that's not what i meant to do how did that happen i've never seen that option before add slide weird is that like the wordpress element i can't delete it for some reason uh what can i do undo yeah there we go okay um jan says kind of off topic and don't know if you already mentioned maybe you want to center the menu for scroll screen's over 1920. yep probably so i bet you're right there okay so uh oh yeah i was trying to add i was trying to add the um image did you see that elijah what i was just kind of struggling with not really a huge deal but a little issue there undo to the rescue though in that case so i just want to take this quote icon and export this i'm going to upload this guy to the media library and then there we go select this image and then we're going to change this to be layout uh we want absolute do we go like negative let's see zero and then this slide we want to change to relative right or is this absolute and that one is relative an open bug report for that slide issue yeah that's good um do we set our slide here to center that doesn't do anything because i jacked up the positioning here just trying to get that um this image slightly off to the side so if we stick this here and then we go negative margin of like 50 that's not going to work because i changed this but i want it inside of this div i do believe like to the left of the text so we're going to go horizontal middle then we're going to take this image and we're going to go not negative 50 that way we're going to go negative 50 this way or negative 100 that looks roughly okay and then how much space is there between the text and that there's 44 pixels so we're going to go 44 and then there's that okay cool so that looks roughly appropriate um it's a little bit off with the colors here so how does it line up exactly i went a little bit too far as it turns out so we don't need quite that much negative margin on the left so negative yeah that's perfect we're gonna go 50. and then this text is a size 20 light italic so font size of 20. and then typography is italic and then i think the font was a bit lighter like that is that right and then the color is a full black yep okay and i should have added a class to this text so i am going to go ps reviews text and then i'm going to copy my styles from the id to the class and there we go so now it'll be easy to replicate that so now on this slot oh i need to do a little bit more so underneath this div i am going to add in do we need another div here oh no it's underneath that okay so what i'm gonna do is take this text we're gonna wrap this with a div our text let's see how much space we have underneath that we have 30 oops oh 32 yep and then so 32 then we need another div inside of this which is going to contain that image and then also the text and the the name um i just left a bug report for a hard-coded image and a design set dentist hero i lost an hour oh it's kind of a bummer sorry to hear that uh all right so then an image we are going to steal elijah's face out of here i need to get the actual photos for the real reviews here and then what do we have so this is a font size of 24 and bold and then we have their title so we're going to go with image upload picture of elijah and it has kind of a lift effect on it already so we're not going to worry about box shadow or anything like that then with this div um let's see so we have an image and then let's add one more div i'm going to use grid here so grid column count of two and then actually we're gonna do three no no we're not gonna do div i mean uh grid we're just gonna use this and then we're gonna use 16 pixels of margin to the right of his photo add in a class here for ps reviews uh name is what we're going to use and then it was 20 i believe 24 and then 20 uh excuse me bold four pixels of padding or margin whatever it is 24 and then 600 e l i j mills and then there's only four pixels of margin which doesn't seem like a whole lot but it will work just fine and then oxygen i'm going to change that of course just using this as an example here so that is 16 and regular so we're just going to leave that exactly as is now i am just going to duplicate this slide a couple of times so bam bam bam and then we're going to delete these slides here and that will work just fine for now so we'll save that guy and then because i don't actually have real reviews in this just yet i am going to set this to only be seen by the user role of me and then what else do we have in our mock-up i think this is the lifetime deal section and then we have the repeater so after this we're going to wrap it up now do another div here let me make sure i'm in my body so it doesn't actually add it inside of one of the other ones so width 100 then div is going to be div padding center this guy um and actually how are we going to lay this out let me think about this so our first one we're going to use the background image and then a gradient it looks like then we're going to have this big image on the left hand side let me zoom out a bit so we can see the whole thing and then we have pricing title text cost and buy okay this should be pretty straightforward so let's go 100 here or actually um we want our div padding on this one not this one so then this one now doesn't need this class and we can set this guy to 100 and it should be inside the bounds and there it is so this background image i actually don't think i have that photo uploaded so let me go snag that real quick so we'll export this image and then let's take a look there should be a gradient on top of this let's see overlay where is it um i'm just going to use the same colors from before from our header so we'll use this as our image and then why did it oh it's because i added it to the class whoops i need to add it to the id not the class so there's that and then our gradient is going to be add our colors from earlier which is the blue first i believe and then the purple on the right side then we need to set the angle of 90 and then we're gonna go to background blend mode we used overlay like that perfect then inside of this we had our image on the left with a bit of an overlay so i believe i already have that image downloaded oh not video we want image so upload there it is okay so we have that but now i actually want no padding in this main kind of parent div at the top so that we can get our image to basically overlay so we're going to go negative i don't know what it is exactly oh no not padding we want negative margin so how far up does it go i wonder if we can measure that 56 wow the figma measurement tools are pretty slick so negative 56 and then we also don't need any padding on the bottom either because our image should be at the far edge according to the mock-up like that and then this div is set to 100 but that's our container here so how wide is the image it is 700 so that's basically 50 because our page container width is 1440. so what i'm going to do is just change this width to like 49 to give it some breathing room and then we're going to add in another div on the right side so we'll set this guy to horizontal and then i think we'll just do middle yeah yeah we'll just do middle and then we have kind of like a sub heading so let's just call this like ps heading sub then that is white with a 60 opacity it's font size of 16 and it's bold with some letter spacing so white with a 60 opacity oh gosh i'm just going to type it sometimes i can never get it exactly right uh font size of 16 typography is uppercase and litter spacing is a bit wider i think we were using roughly two if i believe if i remember right and then 700 and i'm assuming that this is going to need about 8 or 16 pixels of padding excuse me margin on the bottom so now let's see i'm actually going to zoom in a bit so we can measure it for real so that's 12 plus whatever the line height is so 16 roughly that's good then this one is extra bold 40 and white so what we're going to do is actually let me change the heading tag real quick it's not an h1 let's go h4 and this one is going to be a tag of h3 but we're going to use our h1 class and change it to a text color of white and then i can't even remember what my own site says it's a lifetime deal and i'm going to copy this text so we don't have to come back here again so life time deal okay and then that's much bigger it's 40. here i am saying let's do it so we don't have to come back and forth and there i am going back and forth again and then what else do we have it looks like there's a bit of extra letter spacing there but according to the mock-up there's not so maybe it's just me being a little a little particular about it and then we're going to add in some text this text i want all this to be left aligned um so pricing and then this guy is regular and 20 font size of 20 and white so we'll call this pricing up there and then this text down below uh let's see how much padding is there it says 12 once again so we'll just do 12 and then 99 dollars is 64. font size so we're just going to add in some text the font weight will be 700 64. text color is white and then 99 then right underneath that i'm going to add in just a simple text block that says one time and let's just do let's see what else do we have nothing so it's just regular font size and it's 16. so there's a little slash there so i'm going to add that in and then last but not least we need a button so we're going to pop in a link wrapper and then we had a button class i believe ps button medium and this one is oh it's the red one okay so we're gonna add that other class so ps button red and inside of that we're going to put a button that says buy now and then this is going to link to the lifetime course package yep add that link and then we need some padding below that what is it 20 so 20 pixels of margin underneath that and then our section our div here is a little bit taller um where did i set the height was it in this one let's see trying to remember i guess i didn't set a height why is it pushing to the edges like that i guess i need to look at this div so there's 55 pixels on the bottom and 45 on the top so on this div we're gonna go 45 55 and then this one if we change this width does it then expand for some reason oh it's because the margin on the bottom that padding on the bottom there so what if we go 45 whatever it takes to get it to actually line up hmm oh what about if i do this that's going to clean it up just a little bit and then can i reduce the line height of that pricing i think i will so our line height there is just going to switch to 1 and then our div at the top here doesn't need as much spacing in fact let's just get rid of it all together so it's centered yeah there we go so that one looks good i will leave that as is for now except let's just check real quick on the mobile side of things that doesn't need to be that wide here so let's change this to like 35 percent maybe 45. 35 looks good and if it's horizontal let's go space between does this not have a width set no it doesn't maybe that was part of our problem here so this image we had it at 49 and then this one let's set at 49 width as well so then when our screen size shrinks should be much more well behaved we'll go 40 percent give it some extra breathing room and then i think at less than 992 let's make this stack oh wrong wrong div so stack here we're going to change this whole div to be 100 of its container and then i'm going to leave that image as is for now that'll be fine and we probably need to adjust some of that padding from this class here so ps divs padding at 768 we're going to drop it down from 100 to 50 and then at 480 we're going to go 25 25 like that now this particular section needs more on mobile so let's go back to 992 and we're going to go 40 768 yep okay that looks good perfect our slider up there is messed up but we won't worry about that for now cool so we have been at this a long time now and i am getting ready for some lunch here so we're gonna do the last section and then we will move on we'll close out for the day is what i'm trying to say so div we're gonna do div padding right there and then inside of this add another one 100 so then what we're going to do is in this we're going to stick in a repeater we're going to go with a grid layout it'll be column count of three and then we want it to look like this so this should be pretty straightforward to achieve i'm going to zoom in on one of these chris i'm really glad you've enjoyed it you've been here a long time i appreciate it um referring to the previous arrow transform and rotate 45 degrees oh yeah i guess you could just use an arrow like an actual arrow that that'd be kind of neat okay so what we're going to do is change our repeater query type to post so we're going to apply that then uh let's go to count i've i think it's like 12 or maybe if there's three in a row let's go 15 for now 15 is a lot so maybe we'll change that but let's use an image and then our data is going to be post featured image i think medium will be good enough nope no it won't uh let's just insert the image it'll be fine the images aren't that big anyway so then we'll round those corners in just a bit but we have 28 pixels but we need one div that's going to contain all of this so that should be pretty straightforward so underneath this image let's go 24 pixels we're going to add in another div whose width is 100 the background color do we already have that as a global color no we don't so it is this color actually i guess i've used that but i didn't save it as a global color so it's going to be background of that come on now there we go and then what do we need as padding inside of this so 28 32 i'm gonna go 28 all the way around and then we have the heading tag we're going to go h3 and insert data will be post title okay there's that and then these are bold and font size of 24 so 700 font size of 24. i hate that some of these drop to three lines but that's just the way it's going to be so i will live with it for the time being and then what do we have so 12 then the excerpt and then 22. so 12 pixels of margin underneath this then we have the text which i don't think these excerpts are going to look all that clean so i might need to change this yeah i'm going to need to reduce the length of these um hmm can i set a max height on it as like a straight up hack what about 125 and then layout overflow hidden that looks like straight garbage but that's what i'm going to do for now just for the sake of time and then our link wrapper we're going to go with the medium class again and then we're going to go with the red but then we're going to go invert this so ps button red invert and then what's going to happen on this is our border and our text is going to be red so typography is going to be this color and then our border on all sides is going to be that color then the background will be uh just transparent i believe right yep and then our text inside of it is going to be once it loads it's going to be re oh gosh i've clicked on this three times read more like that um and we need to set this link wrapper to our post permalink like so and then oh i guess i didn't set the other parameters of the border so we need to go red to solid like that and then on our hover state we are just essentially going to invert it so then it's going to be um wait what are these other buttons so it's just all red and then the text is white so then the border color is going to stay the same but our background color is going to shift to red and then the typography will shift to white like so cool so there's that and it's got that transition because it's inheriting from an earlier class which is super cool uh the only thing is that they're not matching in height because some of these titles are longer so i never really know what the solution is there but in this case if we just go back to our repeater grid layout we can go stretch nope of course not why doesn't that work so easy to do query visually i love auction yeah this is this is like my favorite thing in oxygen for some reason now i have a gap between these which i didn't have there before so i want to save real quick and look on the front end so if i scroll way down to some of this stuff then i don't know why i got that gap suddenly maybe it's because the grid layout if i go back to start center bottom top oh my gosh come on what did i do is oh is it this margin yeah okay that was my fault um and then we need to set the div border radius which we've been using eight pretty much everywhere so border is eight and then for whatever reason i didn't get those border radiuses so this is a good example of where we can go edit individual radii so top and right is going to be 8 and then on this div down here we're going to go border radii bottom left bottom right as 8 as well and did that do it yeah it did although i feel like no that's pretty close yeah it's a border radius of eight so everything's been pretty consistent all the way around um in the mock-up here everything is the same height but i think the text has been modified to fit so i think i think what we've done will work the only thing that i wish would be do we need to set the div height to 100 percent is that gonna work uh i thought that works okay yeah that works that works it just didn't in the back end so that will work perfectly fine min height your heading so this works on the front end actually it may be because of my screen width yeah it is because my screen width was wide enough to fit them but that looks okay the only other thing that we need to do real quick is just adjust our grid as our screen size shrinks so let's go back to our grid layout at 1440. let me make sure i have my repeater selected here so 1440 it's kind of crammed 992 we're going to drop to a column count of 2 and then that overflows so do we need to set this to a width of 100 that doesn't look all that great but i'm going to leave it for now and then under 768 the grid layout is just going to drop to column count of one it doesn't even look like i have to change it because it was just going to do it for me but i just want to make sure that it all looks good so that works cool so that is essentially where i want it to be the only thing i haven't done real quick is make these match there's a couple suggestions here in chat paragraph white space no wrap overflow hidden text overflow ellipse max with 200 yeah that's actually not a bad idea white space no wrap i'm going to copy that real quick so we're just going to take the id of this text in just a second stick in a code block and it's going to be oh whoops not that getting a little ahead of myself there so my text id is this guy so go back to my code block paste that in there like that and then uh we need to comment out that php so there's that okay so what did i do to make this look like not good it's not super short what did i do i think what i should do is use like a code snippet to um to change the actual excerpt length so it's consistent so max width of 200 is not quite as wide so 300 and then do i need a max height let's see does that work height will be 100 pixels i don't know why it's cut off like that there we go function custom all right let's go do that real quick so um let's see we'll just go over here to the themes option snippets add new excerpt length and then then use dynamic data php function value and call is custom excerpt with the links as your parameter uh oh okay cool all right so excerpt length so save and then this excerpt i want it to regenerate so we can actually see it because still looks like it's trying to pull in the other thing so anyway we'll go to insert data php is custom excerpt as our function name and then the function arguments let's go like 120 because i'm assuming it's characters what did i do to destroy the height and width and stuff here maybe i need to save and refresh that's what i'm going to do so save refresh and we should be gut oh that's an l at the beginning ls custom excerpt gotcha so let's go double check our repeater got a lot more down oh there it is so did that work i guess 120 might be a bit too much is okay it's words gotcha gotcha gotcha gotcha so ls custom excerpt and then let's go like 40. if it is words then we're going to go 40. sweet that's about as good as it's gonna get i think um looks like just some words are longer than others so that's that's fine i'm happy with that so now what i'm gonna do is um i have this div here that looks a million times better than the other one where i have these recent posts so i am going to take this one here move it up there what just happened to my div so i want this outside of the section maybe it's not going to let me do that so that pricing we can essentially get rid of that section this section here we can get rid of that so then this one we can move up so i'm going to move this up above here and then this div i'm going to move up above there as well and then this div is our membership one that is jacked up on mobile so i'm not ready to release that one yet and then let's see there's so much extra space down here and i don't know why um then there's this was there something wrong with this i can't remember did we sort this one out on mobile uh it doesn't look like it no so this one's really close so i'm going to go ahead and adjust the grid layout here so at 1440 then let's make this a grid column count of two that looks super dope i love that actually and then 992 uh it's too crammed so i'm gonna go grid column count of one and why is this not stacking properly um so there's that that column span of one hmm oh is it widths weren't we messing with widths that's so weird why is this not working because i'm at 992 and i said grid column count of one [Music] i don't understand there's still two columns there as well uh oh set a min max width on your column min width max width is 1fr right okay okay but now why are they stacking on top of each other is it because of height did we play with height earlier set a min max width on your column setting so i did that and then they still aren't quite working so that looks really good 992 why would it be stacking like this so grid gap um try the row min max as well where is that is that what you mean change it to explicit so it's not that is it row count of five no oh wait that's min height of one pixel max height hmm what did i do this is oh man we're so close to the end i just wanted to make this function on the front end what did i do wrong so there's 20 pixels of margin on the left of that one does that have anything to do with it well i need to get rid of that anyway the width doesn't do anything autofit hmm i don't understand oh is that all it took was setting the column span to one that feels really silly okay and there's that and then 480. okay that looks good so now this is going to become the very first div on the top of the site so that's going to go there and then i can take off the conditions so i went kind of quickly there but the solution ended up being at 992 i ended up setting the column span to one yep cool okay so there's that um and then i wanted to make sure that this section has those changes that i made to the div paddings so 768 i think i need to go at 992. let's change this to 75 instead of 100 and then it goes 50 and then 25 so everything doesn't look so crammed which is good so then i actually wanted to take a look at my real phone real quick and see what it looks like because i think there's probably still some issues but it's going to be like the testimonial thing um anna says awesome i'm new to auction i learned a lot just watching you great job thank you you're so welcome i appreciate your help as well very much appreciated um i can get rid of this section now so that doesn't need to be there this doesn't need to be there this whole section doesn't need to be there this one i am going to keep for the moment because i still need to fix the other one the reviews i am going to leave this one is good this one is good and then let's see this one down here is not ready yet so i am going to set this to administrator uh let's see user role is administrator and then last but not least this one down here i just need to actually add the real reviews so there is that awesome chris thank you so much i am heading off for lunch as well jill thank you very much for hanging out i appreciate every single one of you watching this whole time we've had an insane number of viewers the entire time and i just can't thank you guys enough for the support this is what are we at holy crap we're at three hours and 48 minutes absolutely amazing so hopefully you guys enjoyed this and wow chris thank you so much really appreciate that donation super super awesome um just incredible how you know supportive you guys always are and like i mentioned at the beginning of the stream if you guys are interested in more of these live streams on the regular that is something i'm considering doing so uh i appreciate all the support i was considering maybe doing tuesdays and fridays as a possibility but probably not going to commit to a schedule just yet so chris again thank you so much for that donation and i really appreciate it so until next time everybody bye for now

Channel: Permaslug

Views: 36,851

Keywords:

Id: UeloxByFtTg

Length: 228min 39sec (13719 seconds)

Published: Tue Mar 16 2021