Building a Real Oxygen Site for a Client Live!

all right everybody welcome into what is totally an experiment i am not sure how this is going to go but it's something that i've wanted to do for a while so thank you guys for joining i'm going to wait just a second here and let everybody get connected let's see how this goes good morning to everybody or depending on where you are in the world good afternoon good evening if you're here watching already let me know where you're from in the world like i said i'm going to give this just a moment here and then we'll get everything rolling awesome i see some locations coming in exciting to see you guys here thank you so much for joining this should be fun so let me switch over here on my other screen just to double check i got everything rolling all right so i've been asked a number of times about this video after the stream and yes definitely it will be available there is going to be a um there's going to be a link that youtube automatically generates after the stream ends and it will be in the premise like youtube account if you click on the videos tab i think you have to switch it to live as well there's like a videos and then a live tab or maybe it's live one of the two it's not immediately clear where it lives but if you guys have any questions just message me you know email or something like that or on facebook and i'll be happy to send it to you guys we have people from all over the world italy germany poland amsterdam tallahassee fella floridian good morning chris excited to see all you guys so let's go ahead and get this rolling i wanted to walk through just quickly what i have so if you guys watched my video yesterday you'll notice that this site is exactly the same as that one so there is currently nothing on this site in terms of design and the oxygen side of things so basically what i do is i clone kind of like a default wordpress install in cloudways who i use as my host and with that it has all the standard plugins that i typically use so i'll just walk through that real quick and kind of show you what that is so for the most part i use pretty much the same things you know regularly hopefully this doesn't go slowly i click the plugins tab and it's it's taken its sweet time here um so with that basically what i do is have you know pretty much all of these plugins are what i use on basically every site regardless of complexity or you know the the end outcome so with these i've walked through almost all of them on the channel before i don't think there's anything that you guys probably haven't seen some of these wp mudev plugins you may not prefer but that's just what i've stuck with for quite a while and have been happy with so the basically the first place we're going to start off with is the adobe xd mockup let me move that over here to this screen and so with xd i'm definitely not an expert in this but when it's set up properly you kind of have this cool little artboard and so this is the mockup that we were looking at yesterday in the video that i posted and with that what i'm going to do is start off by going to my main template in oxygen setting up my global colors picking my fonts and then we'll just use that as kind of our foundational element there so let's take a look real quick i don't even know what font this is so this says gilroy is that is that even a font i've never heard of that uh it doesn't look like i see gilroy maybe that's not what it actually is what is that missing font okay so maybe it's a font that was downloaded unfortunately that i don't have but we'll just work around that kind of looks like um what is that like i don't know i can't remember i can't remember what that font it's called poppins the google font poppins is what i'm trying to think of what about this one that one also says gilroy that's so weird because i don't know let me let's google that real quick you guys are gonna see my process here in real time oh yeah it looks like it is i don't really want to get into installing font um it's not something i had anticipated to be perfectly honest we'll come back to that and maybe i'll do that but i don't really want to bother with an external font if it was adobe or google um i could do that what about let's see gilroy font adobe let's see if it's in there no maybe something similar we'll just find something similar i don't want to waste a bunch of time on fonts because that's not something that i typically do so anyway we will find a font similar to that if you guys have a recommendation let me know but we'll start off by going into the main template here and getting those global colors set up so inside of oxygen templates i'm going to go to my all pages template here and then if you guys have any questions as we're going through here please feel free to ask i can see the the chat over on my other screen and i can definitely try to slow down a little bit if you guys have any specific questions so i'm just going to go over here to my settings global styles colors i have the core design set on pretty much all of my sites just to have this a backup but i'm going to go into global colors and let's throw in those xd ones so just get the color out of here i'm not a not an xd expert as i already mentioned so if you guys are watching me fumble through this i apologize um i'm just going to call this one blind green and then we'll add that guy it's a little bit tedious here but we'll just make it work what is this one like a like a camo green like an army camo green and then last but not least is what basically like almost navy black what's that i got navy-ish that's what i'm going to call it navy-ish add color okay so now we have our three global colors and like you know you guys have seen before i'm addicted to saving in this so let's go to our fonts now and then i like that suggestion for montserrat i'll just do that font all the way around we can always change that later but easy to set up now and fix it after the fact so here in this all pages template like you guys have seen me do this is like my main template for the whole site so the all pages is going to have my header my footer and my inner content with this particular template it's only currently set to apply to pages and that's pretty much always how i do it so we're going to start off by building the header so let's take a look at our mock-up real quick here and what i need to do is consider that this kind of layout with this large photo in this particular mockup is just going to be for the home page so i've been thinking about how i can do this so that i don't have to build two separate templates you know one for the inner pages and one for the main template and i think what i'm probably going to do is have one main div as my wrapper have a second one that that is in my min well that's probably not going to work actually i'm not exactly sure how we're going to do this because basically all that i want is just a sh like a like a shrunk version for the inner pages so instead of it taking up you know let's say this is like 75 vh or whatever i only want the inner pages to be maybe like a third of that and we'll just have the page title in the top of the page there so i think what i'll probably do is maybe just have two separate divs so let's just go ahead and start building this one here so i'm gonna move this over to my other screen so just keep that in mind i'll probably be clicking back and forth a couple of times here so i'm gonna move this over real quick i want to be able to still see the chat over there all right so we're going to start off with just actually we're going to use a section because the section you can change the tag to a header which i typically like to do i'm not sure that it makes really that much of a difference from like an seo perspective or whatever but that's what i typically like to do the other thing that i forgot to do is set the page width so i need to look at what it is in my mock-up here so let's take a look the page width is 1366 so quite a bit wider than the default oxygen page width and that actually looks a lot more filled out on the page so i do like that quite a bit so um to answer your question i've seen it pop up a couple times yes it will be recorded and it will be available on youtube the process is automatic so i don't know how long it takes for the live to get converted into you know like a video on demand but it will certainly do that for you so with this section i'm going to go ahead and change this to full width and then i'm just going to remove the left and right padding i'm going to keep the top and bottom padding for now because we can just change that in a bit and then the first thing i'm going to do is set let's let's think about this here so you know what maybe i don't want that full width maybe i do maybe i do you guys are going to watch me fumble through this like i typically would this would all be happening in my brain so i'm trying to like think out loud here so we're going to use one main div as the full wrapper that's going to have that bottom border so i'm going to set that div to 100 width and then we're going to go a bottom border on this i've just white solid one pixel and then the main section here i'm actually going to change to like a much darker color so that we can kind of see some of these changes that we're using you know that we're kind of implementing here so then let's go with another div because we're gonna need two inside of this one i believe i'll open the structure pane there so you can see it we're gonna use another div here and this one's width is gonna be like i don't know what is that maybe like 75 something like that and then i'm just gonna add one more div it's gonna go inside of that one which i don't want so i'm just going to pop it over here and then make that one go 25 then let's set this upper div right here to stack horizontally and then space between it's not really going to matter because it takes up 100 i think we're going to need to make some adjustments here but that's okay we are you know beginning the process it's going to take tweaks this is how you know this is just how it happens for me so next up we're going to pop in the logo here and obviously the the videos you guys watch are much more polished than my thoughts like this i fumble through this stuff in the videos and then i edit it to make it look much more clean so you're seeing the raw you know unadulterated version so we're gonna pop in an image element here and i need to pull this logo out of the xd mock-up real quick so i'm going to export that guy let me pop this in to my downloads we'll go get that real quick probably should have done that already but that's okay so there is our green logo and then what i typically like to do is build my menus using just like basic text links or in this case link wrappers because there's kind of a there's kind of a um i don't even know what you call it like a line effect see how on the the like active menu there's that hover effect i don't know exactly how you would do the active without coding it with just a basic text link so i'm not particularly concerned about that also because of the fact that in my inner pages i'm going to have the page title displayed so i kind of feel like it's a bit redund redundant to have the text links be active like that so i'm not going to worry about that line i'm just going to use a simple text link element so let's go ahead and do that so inside this div here to the right of our image we're going to add in a text link the first thing i'm going to do is add a class i'm just going to call this header links and then the text color here will be that actually not not the um what's the word original state we're going to set this to white and then the hover color is going to be our global green like that and then of course i want to set kind of a transition so i'm going to leave it in the original state go to advanced effects transition pop that at 0.2 seconds and then ease and out i pretty much always use and that gives it that nice fade on hover effect like that now what i'm going to do is set this to stack horizontally middle align and then we may need to wrap this with another div to kind of get the spacing right the way that gosh this is this that looks terrible let me expand this a bit i'll just leave this over here and we can switch back and forth a million times look at me trying to move this around so yeah i think we're going to need to set this particular div here to space around space between and we'll add add in some padding on the left and right side so it pushes the text links over so let me demonstrate what i'm talking about here so i'm going to change this link to like home duplicate another one we'll go about and then like services we'll just duplicate this out a couple times if i were to set this to space between then it spaces out everything evenly but what i want is all these links to be positioned to the right so what i can do is basically click one of these text links wrap one of them with the div and just push all the other ones inside that div container and then there's some sort of orphan link there i'll just get rid of that now what i'm going to do is go back to this div that has those links in it set it to horizontal and then there we go so now the two elements are pushed out to the left and right edges of each other that is adobe xd yeah the reason why i don't use the menu element is first of all because the mobile menu in just the standard menu element is pretty terrible i hate that mobile menu in the the standard menu element and then the pro menu to me feels like it takes so much effort and time to get it looking like you know reasonably okay so i just fumble around with that so much um and i i just don't like to waste the time with the menu pretty much the only time i use one of these menu elements is if i want the slide in menus that the pro menu gives you so if that is you know something that you're after the pro menu is great for that to have like the left slide in menu but even then you really can't control the you know the way that the elements are built because it just spits out the text links for you with something like this with these text links you're able to to more you have much more flexibility with how you design it how you set it up you can inject elements kind of in between it like images or icons or whatever oh yeah i mean i guess you could do that but i don't know it just it's just not one of those things that i i do this is just how i do it and this menu isn't particularly complex if i needed like mega menus or anything else i would definitely use some sort of plugin and probably not build it manually so anyway the next thing i'm going to do here is add some margin to the right hand side of these links so i'm going to add like 15 pixels of margin something like that 20 i don't know we'll just stick with 15 for now and then let's go ahead and bump up the font size here to like 18 pixels and then in the mock-up are those capitals they are so we're gonna go to um we're gonna go to text transform uppercase to make all of those capitals so that's better and then now what we're gonna do is what's on the right-hand side over here in the mock-up request an estimate with the phone number okay so in this div here we're just going to add in a simple heading element i'm going to set this to like a tag of h3 make it white and then decrease the font size to i don't know 22 and we'll just go request am estimates like that and then again i'm gonna pop oh yeah max i will read the questions out loud before answering sorry about that so the question that i was talking about earlier with the menu was why don't you use the menu elements instead of building it manually so that's what that answer was about so the request and estimate that works and then how should we set this up so that's just a simple phone number and i'm going to slightly change the formatting of that and in fact that is much less bold than i thought it was so what is this in terms of size why do i struggle so much with this it's 18 pixels and that's all medium weight okay so we're going to go back to this we're going to go 18 pixels and then font weight of like 400 roughly and then let's add in a text link here the text color we're just going to set to the green all the time and then the hover color we'll just use one of those it doesn't look that great we'll come back probably and change that typically what i would do with one of these colors is take kind of my main color right here and then there's this website called paluton that i use i think that's how you say it p-a-l-e-t-t-o-n there's a million of these out there but this one just kind of gives you other complimentary colors that look similar to that so i typically would use these for like hover colors so like this one here i would just take that slightly darker one and add that as like the lime green hover like that so then what i could do is come back over here to my text link and my new hover color i'll just set it to that kind of deeper lime green and then it's not that much of a change but it's just enough that you can actually see it so that's what i typically do there and then let me check what the size was on this phone number that is 21. so we'll set that to a font size of 21 and then the phone number eight five zero eight one two something something nine four four two nine four four two and then for the the link here we're just gonna use the tell link so tell eight five oh eight one two nine four four two perfect so now that'll be a clickable fun link for us the other thing we'll probably want to do is go ahead and set that same effect transition and if i was smart i would just set a class here for the transition so instead of having to manually set the transition every single time we could create a class called like you know hover transition or hover effect so let's go ahead and do that just to demonstrate this so i'm just going to add a class here called hover transition and i'm going to go to advanced effects transition 0.2 e is in out and now anything else that i want to have that ease in out transition like this i don't have to manually create i can just use that class so it's super subtle in this case but you can definitely see that that thing changes this looks just a little bit off oh it's because there's that line height right there so let me change that i added margin and light height and then was that no it's just like that okay so that is good let me go ahead and set up these actual links here real quick so it was services gallery about and contact so let's do that services gallery about and then contact okay i don't think i have some of those pages i know we obviously have the home page we'll go home and then about obviously there's nothing on these pages yet but we'll get to that maybe at some point in another video so now what i'm going to do is let's check out space around in this particular div we're going to need to play with this just a little bit because i actually set these to full width which i probably shouldn't have done i guess i can change this div here to be a percentage of the width or perhaps a max width i'd have to kind of play with that a little bit so let me get rid of this within pixels and let's go max width of what was it 1366 is that what we set our page width too uh yeah 1366. so i'm gonna try that doesn't do what i want it to do maybe i have to actually define the wave you guys may think i'm an expert but sometimes i get just as lost does this work so we're going to center that that works reasonably well except that the border that we set on this main div here doesn't stretch to the edges of the page so what if we wrap this div with another div we're going to set this div to 100 width we're going to center the content is that going to work and then we're going to go border bottom white one solid i don't think it's actually a white border so we can change that in just a moment and then the second div we're going to go borders on set save that and then let's take a look a little look at the front end so that is closer to what we're after that's almost it what is this border color here i can't even really tell i don't know am i selecting the right element i guess i'm just going to make something up because that doesn't look like what i'm after i'm clearly not getting something here maybe i'll just make the white a bit more opaque oh border size is 0.5 pixels somebody says instead of one so here's that let's try 0.5 and then i'm also just going to change this to like 50 opacity it's white with 20 opacity i think all right let me try that i'm gonna go to gosh let me get 20 come on and then i'm gonna change it back to one save that okay yeah that that looks like it so what i'm going to do now is save this as my uh like border gray border gray color that's it how did you guys see that was that in the xd mockup did i just miss something because i was looking at this right here it says white with 100 but maybe i maybe i just missed something there in any case i now have this set as the the border gray color which is pretty cool got my steam open here close out of that cool so let's refresh real quick and that definitely looks more along the lines of how it's supposed to so then what other borders do we have here we have one on the left and right edges of each of these divs here so i'm going to go ahead and on this div we're going to go border left and then border right using our global color with the width of one pixel and then let's go ahead and add in some padding here i think you can measure it in xd oops didn't mean to do that um you can like select the logo and like a another element what did that say 35 pixels so yeah we'll just go 35 pixels of padding on the left and right and then what is it from there to there it's 20 25. it's in it's uneven so we'll go just 25 25 like that it's on the opacity above not the border element ah so if i go back here oh oh i see the appearance opacity slider got it got it got it got it okay that makes sense this is very new to me obviously and then i'm assuming the spacing is the same in this block over here and if it's not that's okay i'm just gonna make it the same so it's 35 left and right and 25 pixels top and bottom 35 25 25 and then i'm going to set this div to center and then middle align like that and this is definitely not turning out bad i'm i'm into this so far this is starting to look reasonably good we're gonna need to change the padding of course on the actual section itself i also need to set the border on the right side over there so we're gonna go border right gray one solid like that and then there isn't a border on the top because it's just at the very top of the page okay so what i need to do is on this section i'm just gonna change this container padding to 0 like that save this and then let's refresh so there we go that is you know basically the beginning of this header it doesn't look you know exactly spot on but it's close enough for my taste at this point so now let's go ahead and take a look at what happens below this so we have a background image here the heading positioned on the bottom and then a link here so that's going to be pretty easy to do there's a bunch of different ways you can do this just like anything in oxygen um i think what i'm going to do is add another div here i'm glad you guys like it thanks for all the encouragement here um so i'm going to add a second div i think i'm going to experiment a little bit here and set this section to like a i don't know 75 vh and then i'm gonna set um hmm how do i want to do this i guess i could position this div at the bottom right i don't know how absolute positioning like that on the bottom is going to affect the mobile layout and maybe i'm going to want to bump it up above that just a bit so maybe let's go like 25 pixels off the bottom this is something that i haven't tried before but this should should work so let's see heading element what does that say this isn't this doesn't really make any sense um i'm gonna put something along the lines of let's see the emerald coast's leading um what's the word exterior construction company and this is something that i'm making up because again this is a real site but i'll have the client proof all of this of course and i imagine that they'll probably be changes we need to make so what font size was this let's take a look at that so it is 48 which i think is larger than this 48 pixels yeah quite a bit larger high tech says is that background picture transparent the first background picture together with the background and the header is the best part of the mock-up um that picture i actually don't know i would have to take a look at that i think there's an oh no maybe that is just the picture i thought maybe that was an overlay on top of it um but i'm going to change that because of course this particular client doesn't it doesn't build structures like this so i need to have it be something that's a little bit more relevant to them uh the other things that you can use flexbox layout and set child element to start at the bottom yeah i guess i can try that so stack have to be horizontally though wouldn't it or no not like this not really too sure i guess you could make the height like 100 and then set it to start at the bottom could you do that can you go height 100 yeah i guess you could do that so then the layout we just basically take off absolute yeah that would work maybe more spaces between the menu links yes you are totally right there maybe like 25 maybe even like 30 40 something like that what does the mock-up have here let's take a look i'm like fumbling around because i don't know exactly how this spacing thing woo it doesn't show me in between there uh i don't know maybe like 40 that looks about right yeah there we go stratos i didn't i didn't uh think about that so that's nice that actually works really well um so what we're going to do here is just add 15 pixels of margin maybe more like 25 i'm going to go text link and then let's take a look at this what size is that it's 18 with just our global green color there maybe i'm just going to bump up my body font size real quick let's just do that our body text we're going to change to 18 and then we don't have to worry about that in our other spots we're going to go green and then it looks a bit bolder so i'm going to go like 500 typography will be uppercase thank you guys for for joining in good to see you so what i'm going to do just to play with this a bit the letter spacing looks a bit better i don't think there's any letter spacing there but sometimes i like to to play just a little bit maybe i'll keep it consistent and then we're going to set this div to center and then um what do i want to do here so trying to think about where the destination of this link should be probably the services page rather than like the check work i think i'm going to go uh like view our services and then there's a border on the bottom of that so we'll go global green here with solid that border looks a bit bigger maybe it's not yeah any case that'll be fine for now and then it looks like there's a bit of spacing between the text link there and the border so maybe just like five pixels would be good not uppercase for this link is that just from like the uh oh yeah you're right from from being consistent with the mockup you're definitely right so take that back off and then what looks better i guess that looks fine let's go ahead and just add that hover transition class that we used earlier and then we're going to set the hover color here to our green and now we have that hover effect already added there for us cool so i don't think i have a services page yet so we'll come back to that at another point and then um we all obviously have this section being this dark kind of navy-ish color what i'm going to do is actually get rid of that and then i'm going to set the background to the featured image of the page and this to me is just a really easy way to have the header be more interesting you know you can have a different photo for each uh each page basically so i'm going to set that to featured image left 50 on top 50 i'm going to save that light height on the hero text is a bit too high which one this one we'll come back to that in just a second so what i'm going to do is go back to the admin side real quick i'm going to go to the home page i'm gonna set a featured image just based on one of these photos that i have picked out here i'm gonna have to put a pretty dark overlay over these i believe um which is okay we'll just play with this this is totally experimental i don't know how this is to work out so let's just go ahead and save this and then i wonder if it will pull up if we just switch yeah there we go so i don't know this doesn't look very thrilling not super into this maybe i have to go like really dark i don't know i guess that's part of the problem with a mock-up like that is it looks really good as is and then you kind of start playing with it a bit and then it doesn't quite look as good as it did i mean it's it's all down to that photo in the background is really what it is and i don't have any like high quality photos from the client just yet which i probably should have um yeah the photo the photo's not my favorite thing in the world dark green let's go like yeah this is not this is not the most thrilling photo ever i'm gonna go back to that kind of darker color like that maybe there's a better maybe there's a better photo like on pixels or something let's see uh construction [Music] let's see i really just need something that's a bit darker which kind of sounds silly maybe this photo of this house i thought i downloaded this one that one's not too bad it's got some darker tones in it it's going to take forever to download it's been taking so long for this stuff to download yeah i do like that that architectural shape on the mock-up it is it is really nice and it's really you know the text is super readable on top of that so that is a bit disappointing if i can get this picture of this house i thought i already had it you guys can see me clicking through 10 million tabs like i normally do uh no i guess i don't have a picture of that house so we can definitely take a look at that other photo i mean i don't know maybe we stick with the other one for now it just looks it just looks too good i'm gonna get it real quick you guys are probably screaming at me like there's a faster way to do this is this one still not downloaded um [Music] it doesn't like that okay well let's go back to this photo here i'm gonna toss in the hero image we're just gonna keep things really consistent here not rock the boat too badly update that and that photo is already so dark that i'm going to need to basically get rid of this overlay that we added here i wonder if it's going to pull in the page if we just switch back to about and then home no i gotta refresh all good yeah i'll definitely have to ask them for a different photo i mean obviously that photo is not applicable to what they do really at all but not that big of a deal we can we can definitely fix that okay so image overlay what did i do oh it's on contact that's why yeah i agree that photo's too good now of course pixels decides to download that photo but we're already here so i'm not going to worry about it um so there we go i was wondering why there was all that extra spacing down there at the bottom because the section still had padding so i'm going to change this section to like 25 what is the gap between that and the bottom like 32 i'm not using intervals of 32 so i'm gonna go 30 like that yeah i mean this photo just is way better it looks a little bit looks a little bit brighter here so i wonder if there is an overlay maybe not but i can also just fix that with this text being a bit more readable with like a super light text shadow so i'm just going to go like black and then 0 1 3 on the text like that hero text line height 1.2 let's try it oh yeah yeah that looks definitely better i'm a fan okay cool so there is the beginning of the you know the the main template so at this point what i'm gonna do is think about how i can set this up so that it's a little bit shorter and doesn't require us to rebuild everything on the inner pages and in that i'm gonna take a quick drink break there you have a gradient in the mock-up on the bottom um where is that is it in xd if that's the case i don't see it the background position to take up the image upwards will give you the look you need oh yeah that's a good point i hadn't thought about pushing the photo up a bit you're right so let's go background and this and we'll change it to like 100 like that instead of 50 in the middle so that gradient in xd oh good lord this is i i just feel like i'm just completely incompetent in xd i don't see it maybe i'm just blind as a bat here it's not the fill color on top like are you talking about on top of the photo okay set the photo to cover oh okay it was the text block not the actual photo got it no worries that looks good enough to me i mean i'm not really too worried about this right now while we're still here let's go ahead and take a look at the mobile layout because we're probably going to have some issues here um and then oh yeah yeah i did i did kind of see it when we moved the photo is that what that other other color is i thought it was just showing you that it was off the little like artboard thing move the photo how do you get it though it's so weird i'm sure some of you guys are probably screaming at me like what are you doing stop i mean i see that i just don't know like how do i get the color out of it i don't understand that don't make no sense i mean i think i think it's it's good enough we can we can do kind of that same grayish color something like that it's only like 30 opacity it's not too bad that looks better i don't think these are going to change much contain makes the photo repeat so i'm just going to leave it as is stratos i'm glad that somebody else in here doesn't know anything about this okay um you said ungroup then able to select gradient oh okay so if i right click it well that says group do i have to move it back yeah either way i think i think i'm happy with this so i'm going to leave this alone i want to take a look at how this behaves on mobile because i mentioned uh that we're going to have to change the borders as we collapse down the break points here and we already we already have a problem i think it's because of the way that i set that other div hmm let's see here it's because i set the the width maybe i need to set the max width let's see william says it was better on the photo with more white space so the corner not fall in the menu oh yeah yeah i i see that let's go back to 50. agreed okay um this particular layout i'm not exactly sure how we're going to tweak this in mobile if i set this div to stack this might cause me a few little hurdles here so i need to change this divs width to like 100 i guess nope that's not the one there we go okay like i said you guys are watching me fumble in real time hopefully this is fun all right so we'll center this stuff then i'm going to set this divs width to 100 um i don't think i like that aligned right like that i do like the left and right borders on that particular div there but in this case we probably don't want i don't think we'll want this stuff to be so big hmm this is going to take a bit of thinking thank you high tech for joining we'll see you soon there will be probably a lot more footage for you to watch later on okay so if i change the divs padding in mobile does that mess it up on the desktop version i wonder let me go back no it doesn't cool that's what i thought but i wasn't sure um and then i'm gonna set this divs borders to unset at this break point and then i don't know this is probably not this is probably not the layout honestly that is ideal here so maybe i want these to be horizontal oh yeah there we go there we go so that's actually pretty good so at this break point i probably want these text links to go away and do what i typically do which is um which is going to be have the mobile menu in a modal so let's go ahead and drop that in there go modal see ya um let's add in another set of text links here in this modal i'm gonna set the class to header links and then i'm going to go header links mobile and then the mobile ones we're going to set the text color to like our dark and then our hover color of green and then the mobile we don't need any margin on the right side sorry if you guys are uh you know working on something else in your minds as i'm jumping ahead i apologize so i'm gonna set content styles to stack center middle and then the modal we're gonna set like i don't know 75 pixels of margin all the way that's probably way too much 25 and then the header links mobile we're probably going to want to add like 25 pixels of margin beneath them so this is a bit this is a bit of extra work to build the mobile menu like this but i find it's just so much more simple and clean really easy to use it does take a little bit of extra work because you have to update menu links twice if you have any changes but again this menu is so small that it doesn't really make that big of a difference in my opinion so home what do we have services gallery about and contact services gallery about contact okay services gallery about gotta triple click this i'm sure you all you guys know that services gallery about and contact all right so now what we're gonna do is at this particular break point because we're at our page container the 1366. i'm going to set the header links to layout of display none the byproduct of that is that also goes away here in our modal so what i need to do is select the header links mobile and go to layout display flex and then you can see that the links up there in our actual main menu are still hidden whereas the ones in our model here appear so that's pretty cool andre asks or wouldn't it be an option to use a regular menu component in the header as well as the modal yes it would i mentioned earlier that i don't personally like the menu elements because they have a lot of restrictions i love the idea of a mobile menu in a model because you can add anything you know buttons videos like any kind of element that oxygen works with you can add into the modal so to me it's just a much more flexible option and i typically do this for sites that are smaller like this that don't have a lot of a lot of menu links so now what i need to do is back up here in this div i'm going to add in or actually do i want it in our text links i guess i do i'm going to add in an icon element this icon we're going to switch to linear icon and we're going to go to i think it's menu yeah just like that let's set this to white and then bring down that icon size to like 30 pixels our fancy icon is going to effectively be the trigger for that mode all so we're going to go modal trigger show when user clicks element and then choose that and it automatically pulls in the id of that particular element and maybe because of the size of all this other stuff on the page we'd want to bump this up to like 35 pixels and i'm not 100 sure i like the way the spacing is happening right here but we can definitely we can definitely play with this a little bit although the whole point of this site and one thing that i discussed with this particular client is he needs to talk to these people on the phone the best way to kind of qualify the clients oh my gosh sorry about my dog i don't know how to mute my mic oh that is the sort of thing that happens in a live stream i guess right it's just stuff that you would never actually anticipate hopefully my dog didn't set off your dog but anyway that's super funny not something i had anticipated she was barking at a person walking down the street not even in our yard oh my gosh it's so funny the person wasn't even like intruding they were just out getting exercise and she's blowing them up so funny dude chris you are so right dude yes except i'm at home so i guess technically my office is is invaded by a dog that's hilarious yeah that's probably a divvy person oh my gosh that's so funny oh man that's hilarious the dog is just a chocolate lab so not really like a not um a particularly threatening dog she's all bark and no bite for sure she'll just lick you if you come inside um anyway i forget where i was but what's running through my mind right oops did not mean to do that undo to the rescue um the dog's name is lana she's a chocolate lab um what's running through my head right now is this spacing here so i think i can change this divs width to like 25 percent 30 and that looks significantly better in me um oh yeah i guess i was here and then this particular text link i need to remove the bottom margin off of that so that the spacing is a bit more even on the top and bottom and then that looks reasonably okay i'm actually not mad at that at all because it kind of keeps that border effect that we have on the desktop menu which is pretty cool so i'm going to go ahead and save this let's take a look oh gosh that old photo we're playing with is just so terrible nothing compared to this other one so oh gosh i also forgot to change this um this kind of setup here so let me go back to our template real quick um back on the desktop side we want to set this icon here to at the the desktop size to layout display none and then we need to drop down to page container and set that to display flex so that the icon pops in so let's save that refresh again and now we have our menu aligned just like that modal is nowhere to be found until we change the screen size to something else why is it so jacked up oh it's because our our um section height there was was messed up but just to demonstrate my point here which is the mobile model like that so that works perfectly fine now what i probably need to do is play with this stuff down here just a little bit more um so this starts to look really clunky so at this break point i'm just gonna basically display none this phrase request an estimate i'm gonna probably bump down this font size to like oops why is it oh it's because i i changed the font size on the hover transition class so i'm going to bump down this font size to 16 pixels or maybe 18 make sure that it stays on one line and then i'm going to basically step down this font size and honestly i have never played with wade cohen's um oxygen add-on forgive me for not remembering the name but is this the point of that where like it basically does the font sizes for you like in the you know lower screen sizes if that's the case that's pretty cool probably need to start using it but i've never never personally done that so let's see what this heading size was it was 48 so at less than 992 maybe let's step it down to like 36 and then 768 will go like 30 and then 480 will go like 28 26 i just want it to be on two lines 28 oops 24 no that's pretty small i guess i guess maybe i'll just sacrifice it being on a couple of lines using clamp for font sizes is nice no add-on needed is is i forgive my ignorance on this is that another um like sizing option there i've never really done that i've always just kind of like manually stepped it down um the other thing i just noticed is this phone number does get kind of messed up at the lower sizes so like what about at 768 can we stack these divs and then make this one's width like 100 this one's width 100 how does that look i mean i don't know i'm not super thrilled on that but it's a bit better i guess not the best thing in the world um i don't know not really super thrilled on that you can also add non-breaking space so you don't have a one-word orphan yeah that's true that's true i guess i'm just gonna leave this as is 768. oh i guess i could remove oh well this divs with the set at 100 what if i just change it to like 25 or something like that i don't know i'll just i'll just leave it and then you have to stack it though because it just gets way too crammed right there i'm going to stack it we'll come back to this later i'm thinking i probably just want to add a border on the top here like this and then let's check it again on the chrome inspect guy real quick uh i feel like it needs to almost reverse so that the phone is on the top i think we can do that though i think if you go to the div that wraps these which is which one is it i'm having a hard time seeing this right now it's this one right here if at that break point you go to layout and then it's flex and then reverse oh maybe it's not this div hold on hopefully this works so layout is already flexed and then reverse you can go save and then refresh i mean i guess that's better because the phone number is up top maybe if we re-add the text link there or sorry the the heading and we don't display none it something like that and then what do we do here we horizontally align this stuff i'm just playing with this in real time hopefully this makes sense to you guys uh you can use flex property to reverse position yep perfect um simple as clamp 20 pixels okay okay interesting i don't really follow the clamp thing but i'll have to watch elijah's video on it i'm sure it's great so i mean this isn't like the most amazing thing ever because i feel like there's a bunch of wasted space here in the center but just based on the way that our desktop goes this is just kind of how it's going to be so honestly i feel like i'm okay with that for now this is totally acceptable especially for again as i've said i've said a million times this site being you know not the most particularly complex thing ever so the other thing i wanted to do is set up these text links but again i don't have the destination pages created yet so i probably should just go ahead and do that we are missing the services and the galleries page so let's add that real quick services and then gallery the gallery we're almost certainly going to set it up more like a portfolio so we may end up renaming that to portfolio and we can go ahead and move on here so we've already spent an hour building our header section here which is not too bad honestly it's okay just reduce the padding a bit top and bottom are you talking about on the the mobile layout here oh yeah yeah i think i would probably agree with that i forget what i did like 25 yeah it's 25 top and bottom so let's go like 15 maybe 12. since 12 isn't really half of five i just would stick with that i mean excuse me 12 isn't exactly half of 25 that's better i like that i'm a fan okay so now our next challenge is to figure out my goal which is how am i going to make this so on the inner pages the section here is much smaller i think what we can do is really just duplicate this div um uh william to answer your question i always build on cloudways and i don't build anything locally pretty much ever i always always am developing on cloudways and i just have this this server that we're on right now this development server is a four gig vulture server and then my production servers are split across a few different ones i have a couple two gig couple eight gig stuff like that so what i'm going to do here is go ahead and set this section or excuse me this div to have a condition so that it only appears on the home page this actually was a lot more simple as i just thought about it than i was originally anticipating and stratos you said volt high frequency i'm not familiar with that is that new that's pretty cool i haven't heard of that would definitely have to take a look at that i've been really pleased with vulture for quite a while now i had google cloud servers in the past and i wasn't thrilled with the fact that i had to pay for bandwidth but i'll definitely have to give that a shot are you what were you using before stratus before the volt high frequency or hf i'm assuming is high frequency um anyway i'm going to set this div to the post title is equal to home because i only want this div to appear on the home page and then what i'm going to do is just duplicate this and then let me actually set this to the show hide based on condition and then this second one i'm just going to change this heading to be insert data post title and then i'm going to change this height to that basically and then i think that's all i'm going to have to do i don't want this particular text link there and i also don't need that extra margin so i'm going to save this and then let's switch over to like the contact page and then this div i want to be middle aligned i wonder can i use margin auto on top and bottom oh baby that's that's super cool that is super cool um i didn't realize that so now if i save that i am pretty happy with that although the other thing is i didn't want this section [Music] to be as tall on the inner pages but maybe that's not the worst thing in the world i just don't like how this would take up so much of the of the page height you know so like the content that you're trying to get to you have to immediately scroll towards i want this to just basically be smaller so what would be the solution here maybe if i took like let me go back to the homepage so we can actually see this so also i'm going to set this to the condition of does not equal home page and then that way it's going to kind of go away so we can actually kind of work with this in real time here okay so what i'm thinking is to make this a little bit smaller on the inner pages what i'm probably going to do is change this section or keep excuse me keep the section as is but remove the height that's defined on the section itself and then basically wrap these two divs in one more and set the height on that div so let's see if that works so width is 100 and then oh excuse me i'm meant to be in this section so the height is 75 vh so let me give this a shot i'm going to basically remove the height out of there i'm going to save just so i don't mess up and i know there is undo but i'm still just a big fan of saving all the time so i'm going to wrap this with the div uh we want to center this and then i'm going to set this one's height to 75 vh like so and then oh wait is this going to work because that's our menu this may not work hmm i guess i have to leave the menu out and then this div maybe we'll bump that down to 65 vh i think this will work yeah so we we now have the homepage one and then this div maybe we just add some margin on the top and bottom hopefully this is making sense to you guys might be kind of hard to see this yeah andre i think i think we're pretty much on the same page here now so let me save this and then contact uh what did i do is it still set vh here oh the div still exists it needs to just be the home so let's go back here real quick i need to change that to oh not dynamic data that's such a habit i need to change this to post title is equal to home sorry i'm being i'm being a little bit quiet it's just that um i'm thinking out loud here so let's switch over to contact now and then set that to show hide based on condition so that's pretty much exactly what i want so now there is a bit of extra spacing beneath this which isn't super ideal for the consistency's sake but what i can do is in this div just add a bit more padding maybe let's go like 50 pixels top and bottom but that is pretty much what i was after so now although we don't have a an image for our contact page of course the contact page is just the a little bit shorter version of the home page so let me switch back up here to home and voila there we go now i need to add just a little bit of padding below this let's go it was 30 pixels before but the inner pages is 50. so maybe just to be consistent i'll do 50 on this one as well i know that's not exactly consistent with the mock-up but perfect that's exactly what i was after william to your point conditions are amazing before that i used to have to build like two separate templates because i just couldn't think of a way to build it otherwise so this this got a little bit more complex but we now have one div that's wrapping our menu you know with the logo and the phone number we have a second div that only shows up on the home page that has this title and the button and then on our inner pages we just have a div that basically only shows the page title for us which is really neat so i'm a big fan of that all right so now we are basically at a point where we can move onward and because we are still working in the inner pages template here i'm going to go ahead and skip down in the mock-up to this footer actually let me let me think here am i am i going to add this form in the footer i feel like i probably should so the form with the map this little white block and then the footer i feel like it'll probably be a good idea to have that contact page on pretty much every or contact form on every page so let's go ahead and do that so this section here has a background color of what f8 okay we can make that happen so what i'm going to do is go ahead and minimize this stuff here we're going to have to probably come back to the modal and add those links i don't know i don't know if they're actually going to pop up yet i was going to say we'll have to come back to that but i'm not sure that we will services there it is cool that does work gallery pop those in and we also need to do that for our desktop menu as well so services and then gallery now all of our pages are linked perfect so now we can move on to our footer so i'm going to add in another section i believe yes that's what i want to do oops no no oh no there we go thank goodness for undo that would have been a save and refresh right there or actually it would have been just a refresh not saving on top of that anyway so we're going to change this section to a footer and then once again i'm just basically going to change the padding all the way around to zero i'm not really too sure like i already said does the tag of footer and header actually make any difference from like an seo perspective i would imagine maybe maybe i don't know i'm not really too sure anyway so we have this f8 div here the background color of f8 so let's go ahead and add in a div of 100 background color is f8 oops there we go and then okay i didn't i wasn't sure stratos i figured they probably did which is why i always do it this way but i wasn't really too sure about the technicalities of it um so in a case like this where you have basically like a column here um for the code mode more for okay html tags i mean i know a lot of people were really wanting those html tags when they were um weren't available in oxygen but of course now they are so in a case like this where you have kind of a columns element here i don't know exactly how this is split but maybe it's like 60 40 or something there's a bit of space to the left and right edges i typically like to build these columns manually using just divs rather than using the columns element it gives you a little bit more flexibility especially when you need some spacing between the divs so i'm going to go ahead and oh yeah accessibility is another point i forgot about that i'm going to go ahead and build out a div basically column manually here so i'm going to set this div here to like 60 width and then just duplicate that and change this one to 40 and then in this div here i'm going to set this to stack horizontally and then space between is not going to matter but we'll do that anyway vertical align on middle so martin asked does anybody design straight in oxygen interested for small sites seems like most people probably do um i used to but like i mentioned in previous videos i'm not a designer so i basically was always disappointed with what i came up with so that's why i started you know having people help me with mock-ups so um now what we're gonna do is in this div on the left hand side here we're gonna add in a short code for gravity forms i know a lot of you guys are uh super into fluent forms i've just never taken the time to learn it because just the gravity forms does everything that i need it to and i don't think i actually have a gravity form on here yet so this might this might tweak out yeah i guess i don't have one just yet so let's go make a simple form that kind of matches this all it is is name email phone and message that'll be super simple and then form new form we'll just call this footer cta or i guess it's not technically a call to action it's more like a contact form but in any case we're going to go single line text for the name so name like that set the appearance to large so it takes up the full width there um what's the order here email phone message i already said that but i forgot email phone and then paragraph text for message email required i'm gonna go to field size large required field size large and then message and in this case i'm going to change the appearance to field size of small so perfect now we have our gravity form and the id is one let's see what else we got going on in chat here so thomas says he either designs in oxygen or straight from illustrator when designing that one design is created by someone else yeah i don't i'm just not a designer so i i don't have any input there unfortunately okay so now what i need to do is go ahead and get this in there so this actually should just populate in i believe i don't think i have to refresh the page let me like change the id to two and like back to one yeah there we go so there it is and i have some default uh gravity form css that i've shared before it's really not that great it's kind of messed up and clunky and it's got some some messed up code here and there but for the most part it is a good foundation so that's where all the styling has come from if you didn't have this you know css in there already you just basically have a blank looking form which is okay uh so let's take a look at this what is our spacing over here so 200 from the left and right edges but what is it from like that edge is it really 200 pixels i don't know oxy ultimate is handy to style forms yeah you could definitely do that the gravity form css isn't particularly complicated so i mean you definitely can learn it it's honestly like it's it's a really nice um it's a really good way to start practicing css with something like gravity forms because i'm sure you guys all know in oxygen you definitely you definitely are at an advantage if you're comfortable with css let's just add 25 pixels of padding all the way around for now we'll probably have to adjust that later and then on the right side it's that map with the photo on top of it i mentioned before that i'll probably just take a screen capture of their location and pop in their logo on top of it on top of it but for now let's just add in a google map and then we are basically working in the pensacola florida area and so i'm going to set this width to 100 of its container and then i don't think setting the height to 100 is going to work but i'm going to try this because i need to set the divs to stretch i believe yeah there we go okay um thomas asks why not use forminator pro i did that for a while but i just preferred gravity form so much more back when i stopped using forminator it didn't have the logic that gravity forms did so i stopped using it for that reason basically martin also asks what is quicker for for oxygen chrome or firefox i don't know i only use chrome it's hard to say let me get out of this real quick and then i'm going to drop down to my footer oh i need to set the background of the main div and not just that left-hand column so let me go fix this did i not do that i did wait so oh i guess that's because my section my section is not full width [Music] interesting okay so i guess i need to change my section to full width and then set my div here to uh width of oh gosh 1366 kind of like we did before and then set it to center and then now my div oh it probably that probably didn't fix anything no of course not why would it because the div is still set at 1366. so once again i think i need to wrap this with another div that one's set to 100 percent and then that one is f8 all the way down did that fix it yes except it's not centered so i can fix that quite easily there we go um now we can move into the next portion of our mock-up here so i'm not going to worry about this map stuff right now and then we'll come back to the css styling later not really too worried about that at the moment so we just basically need like one little white section or you know one little white div here and then that's really only going to exist from a height perspective to have this overlap with the logo so how tall is this i wish there was a way to like measure can i change this oh no nope nope nope so that is 75 pixels from the top of the logo to the middle so what is that maybe like 100 125 yeah i mean that's not a bad idea i guess the white space is really not serving you very much it could just be overlapping with the gray div above it because i mean really all all that white section is doing in my mind is just sort of delineating between that bottom darker color and then this lighter gray right there so yeah i mean we can just we can just dump that idea so then what i would need to do is in this section i'm just going to add one more div what color is that oh that's our that's our darker color there goes the dog again something happened outside probably like the trash man she's all all bark and no bite like i said okay so back to what we were doing i'm gonna set that's the fedex man sorry okay i'm back the fedex man dropped off apart from my car that i'm gonna be working on later vote for removal type one yeah i mean there's pretty much no reason for that to be there so now let's go ahead and make sure that's centered and then how are we going to set up this other content here so we have a couple of sections with links here um i mean we're not gonna have this help center stuff we're not gonna have great stuff i mean maybe follow us yeah probably social media so maybe what i'm going to do is change this over so that it's the logo well now we already have the logo there hmm so unless i'm doing it wrong andre to answer your question he said i don't know why you set the divs to 1366 pixel width instead of just the page width the reason i did that is because the um then the background color stretches to the far you know left and right edges of the page and it doesn't get restricted to the actual divs width there so now what i need to do is i'm going to go ahead and add in the image that has the logo real quick uh i think it's actually different here yeah it has a black round back black ground so i'm going to export this guy selected export that i need to upload this new logo real quick and then i'm going to set the margin to auto on the left and right and then i guess we'll go like negative 50. that works and then i need to add in another div right below this we'll set that to 100 of the available space and then what are we going to do from here so i guess we'll just do quick links and then follow us and we'll like maybe push it to the left and right edges all right so i'm going to add in one more div inside of this this one let's just set to 50 duplicate that and set it to align horizontally i'm going to add in a heading here it just says quick links in white how big is this heading let's see here it is 25 pixels not too big let's go 25 pixels of margin we're going to add in some text links and then on these we're going to add the class of footer links so that we can easily style these change this text color to white anything else oh actually this isn't white what is this um ac that's not a color i typically use i'm into that that text color ac so then sorry one second quiet okay so we're gonna go home our footer links we're gonna have like 15 pixels that's probably just enough i'm just going to add a bunch of text links there to kind of see how this works 15 pixels is a bit too much eight that's okay is that indented no no it's not on that side okay so then on the right i don't think we want the social icons this client doesn't have really a social presence which i guess is okay um let's just set these icons to white i'm gonna make them smaller like that and then we'll just oops on this div we're gonna center it vertically and horizontally that doesn't look super good but i mean what am i going to do here so let me just save this real quick let's take a look at this i probably need to add some some extra spacing below this uh stratos said same keyboard with the office um not sure what you mean like do i use the same keyboard at both places yes is the answer to your question um in the mock-up here i guess while there is some extra some extra spacing right here how do i i wish that there was a way to measure like there is in illustrator yes this will be available on youtube as soon as we're done well not as soon as but shortly after we're done with the live session here um that is probably like i don't know what would that be 25 pixels maybe i'm just going to add some extra padding underneath this maybe 50 75 something like that yeah the noise is is definitely the same the same kind of clicky clacky sound you're totally right about that does this look better yes okay so there's some extra spacing there this footer i'm disappointed with because i hadn't really looked in detail because um this this kind of like header links um you know all this extra stuff there's not that many links on this site there's only like five links for us to really play with here so maybe i could just bump this like you know this uh address phone number that's what i'm gonna do that's what i'm gonna do yeah the alt thing does work it just seems like sometimes on certain elements in xd it doesn't quite behave the way i want it to and that's okay so i'm going to change these to 33 33 oops 33 33 and 34 width so they're spaced a bit better and then i'm gonna make this one just say like contact us we're just gonna put the phone number here i forget what it was eight five oh eight one two nine four four two nine 942 okay and then their address was in the mock-up it was right here so i'm just going to copy and paste this it takes me like 10 000 clicks to be able to select that text there it's kind of weird and then this text link i'll probably just send as the destination to um the contact page so the phone number address and then i think i'm going to delete these text links we're going to add in one other text element just a plain text element and give that the class of footer links as well even though it's not really a link doesn't matter all that much i just was going to put aegis aeg is exteriors inc and i'll probably come back and throw the google schema markup in there as well the other thing we're going to do is services gallery about and contact so let's see i mean that's a pretty that's a pretty plain jane looking footer but i mean uh it's okay i guess i guess i need to add the the padding to the top of this div up here too so that it's not bumping up to the very top of that particular section so let's go ahead and do that was it this div here yes i think i did 75 pixels of padding 75 where did i put that was it on this one no there it is okay yeah so i need to add that 75 pixels of padding up there save this it's kind of coming together we're really only working on this main template here which is okay so now what else is in that mock-up on this that we're missing the styling of the submit button i'm not going to worry about that clear button that's there and then the placeholder text so let's do this so the placeholder text is just kind of that light gray color i wonder if we can pull out exactly what color that is here i want exactly oh it even changes interesting i guess i can just use one of my um kind of like light gray global colors in there alan says visually there's no proportional spacing between the social icons and the two column link you are correct on that you are very correct alan so the social icons don't really look that great and also that div was center aligned um i don't know maybe maybe it would be better for these to be like a column with some extra spacing around them center i don't know something like that uh william for important layouts why don't i rename the divs that's a good question um the i pretty much never do that that's just a habit that i didn't get into i probably should it would certainly help quite a bit um and then another question from arduro asks the google maps do they work out of the box yes they do actually so if you had some particular address i could type in like university of west florida and then the google map will actually work perfectly let me see if it works on this yeah so for some reason it didn't pull in exactly what i was after but um the the uh google map usually does pull up the exact place that you want um maybe it's because i don't have the full street address here let's see that's not the building that i want it's this one 1100 university parkway so if you type in the full address then typically it will there we go so now it pulls in the actual google business listing which is super super cool so there is that which i'll definitely change to the actual um to the the actual client's address of course but there it is kind of working which is super neat uh mr henry asks is there a reason you use manual text links and not a menu in the header footer viewer style overrides required is basically the answer yes exactly and it just to me is much more flexible to build it manually instead of trying to um you know work within the confines of the menu elements on more complex sites i will definitely use the menu elements but i typically don't uh i typically don't like to do that just because of the restrictions that are around that uh yeah so so this google maps element right here works with no api key in it um and then i don't know when you would need that i think in acf you definitely have to have the api key for google but for the most part this works just fine so what i was going to work on here was the placeholder text so we need to actually go back to our form here and we're going to add in the placeholder name email and honestly this is a bit redundant if we're being realistic about it but just to show you to be consistent with the mock-up message and then how can we help okay so update that and then in my style sheet here i have my gravity form styles and down towards the bottom there's the the webkit input placeholder css so what i need to do real quick is grab the global color that i have for this gray i don't really have a gray actually uh maybe we'll just make one up so instead of it being this color here what would be kind of the rgba for like a gray i guess um i don't know what does it look like as is right now it doesn't show up at all got it so let's change this to let's just change it to black real quick and see what happens oh i don't need that because i have important does it show up in the back end no maybe because the form didn't have the placeholder inputs so there we go could it be a location dependent thing andre asks i guess in germany we get shown some developer mode overlay as long as we're not using api key um i don't really know why it would do that i've seen that sometimes in oxygen but usually if the the map is coming from some other plug plugin or some other source i really don't know why it does that in oxygen it just works which is kind of cool um so that kind of placeholder is way too dark so let's go back and we're going to just change this to like rg va we'll go black and then we'll change that to like maybe like 35 opacity is that gonna be too much wait what did i do wrong rgba 000 0.35 what did i do wrong here it just goes away it's so weird i don't know what i'm doing wrong there in any case i personally feel like the placeholders are a bit redundant so i'm i'm just basically not going to worry about them what we need to do is style this submit button to look like it does in this so in this particular case you have to do that with the um you know css in gravity forms or you could use the selector detector and honestly that would be kind of a cool way to do it um g00 0.7 yeah i thought that's what i did i thought i typed out the rgba code correctly but maybe not maybe i did it wrong if you guys have a preference when styling this submit button would you rather do it with css or do you guys ever use the selector detector oh i used 255 is that what you said 0 0 0 and then 0.7 right isn't that correct oh yeah it is a little bit lighter so let's let's drop that down let's go to like point four i'm going to go to 40 opacity there i guess that's not that bad i'll leave that the other thing i wanted to do is bump down that font weight so font weight will just go like 300 and then see if that's any better yeah that's okay it's a little bit light but it's it's you know not that bad okay so what i'm gonna do now is in our css here i think i have the submit button actually added twice so i'm gonna go ahead and basically just delete this stuff we have it in that second part down there so what do we need to do we basically just need to set the color to green we don't need a background color and we need a border bottom of that same green so i don't remember the hex color for that green let's just go ahead and copy and paste this so we don't need a background color we want our color to be our green here where is that background color coming from on hover we don't need the background color let's leave the hover color actually we'll change the hover to the lime green that we've been using the darker green yeah the selector detector is a bit confusing for sure sometimes it sometimes it works and sometimes it doesn't i used it to style the forums on the premise like website in bb press because that was that was challenging oh it's the box shadow is probably what i'm getting here um so let's see text transform capitalize font weight is 300 inherit padding we don't really need that so where is our border we're gonna go border bottom solid one pixel like that oh wait did i do it backwards i always do this backwards one pixel solid i can never remember and also am i putting this in the wrong spot yeah i am i am indeed so why is it that i have that background color am i just am i just missing something here is that like the default css maybe i just need to make it that same background so like um background is what is what are we working with here f8 is that what it is submit yes okay cool so i mean what does that look like is that similar i guess this is a bit heavier font weight so maybe let's bump that up to like 500 and then that'll be pretty much good so we have our font weight right there of 300 let's change that to 500 save refresh i messed it up what did i do wrong maybe only 700 works it's it's so weird i have the css so messed up that like sometimes i put it in one spot and it works and sometimes i put it in another again i am not like you know the most technically proficient person i just happen to learn this and show you guys what i know okay so save that what else are we missing from this mock-up um like i already said not going to worry about the clear function we got the logo just by using negative margin we got some of this stuff kind of set up in there i don't really ever do the copyright stuff because that's a waste of time it's not actually copyright so what's the point of even having it so let's just take a look at where our thing kind of sits right now so this is of course just our main sitewide template so we have our home page you know hero image at the very top we have our bottom footer area which has this call to action form this google maps form that i will change to be more similar to the mock-up perhaps even actually just use their google business listing because to me that looks way better than just like this random like black map i don't know what you guys think i think i'll probably just use their real google business listing and then we have our footer which you know it's not not the most amazing footer in the world but considering i am definitely not just trying to put like fake links there that don't go anywhere that is you know certainly what i'm after so there is our sitewide template basically done and we are in the logo in absolute is weird with three column footer in terms of balance yeah it definitely is weird it would be better if it was all four so i mean i guess i don't know what the i don't know what the thing is i don't know what the solution is it's not a not a huge deal i guess all right so i'm going to jump back let's take a look at our mock-up again and see what else do we have on this homepage here so let's go ahead and get this stuff situated this stuff will be easy so i actually don't make the div of the icon smaller yeah yeah i could totally do that so it's not 34 width or 33 width whatever i set it to make it like 15 or something oh yeah it definitely does need padding at the bottom you're right alan i'm gonna go fix that real quick while we're still here william the uh mock-up is just this one single page but the actual website will be multiple pages of course once it's actually done so yeah let's go down here what did i add as the i don't have any padding i guess that's coming from the logo let's go 25 pixels top and bottom maybe even a bit more now now we need to bump that up another 25 so negative 75 like that i guess i just completely combated what i just did there so do i add margin there we go that's what i wanted to do but that's not even now i am basically just messing myself up there i'm just trying to play with this a little bit get the spacing right so change this div to what like 20 width so what what does that leave these other ones 40 each that's a bit better some suggestions on how to fix this footer i'd put the icons horizontally in a row under the two-column footer yeah that's that's a good point so change the social icons back to a row we can put them underneath these other two divs oops so social icons will go down at the bottom there oh my gosh the drag and drop is just so annoying sometimes but i guess i need to go like this so that div goes on top of the social icons that did let's add some margin we'll make the social icons centered just using margin auto left and right even though that doesn't work of course not why would it work can i just center this whole div yeah there we go that works okay so what was the other other suggestions here center text in each column i can try it and then these need to be set to 50 and 50. this is funny this is like community driven design actually this isn't the worst thing in the world to be honest especially if we like set the spacing to be a bit equal that to me is starting to look way better what do you guys think yeah i think this is starting to look much much stronger designed by committee that's the word i was looking for mr henry you're right i'm gonna take a quick like two minute break and i will be right back you it alrighty contact us in footer is too close to the logo do what um i am drinking coffee at the moment it's 11 a.m over here all right so william i'm pretty sure i'm pretty sure woo core just came out today if i'm not mistaken alrighty so i'm i'm pretty much calling this situated let's take a look on the front end just to see how that changed that's pretty good i mean i'm not really like um i'm not really like super thrilled with that but that works so let's go ahead and jump into our homepage real quick here we can knock out a bunch of these sections pretty quickly i feel like so let's go ahead oh i forgot to add i forgot to add an inner content element to the um to the main template here so let's go back okay so structure let's go to inner content you guys know my simple trick is just to set the minimum height of the inner content element to like 75 vh and that way if you don't have a whole lot of content on a given page it will you know basically make it so that it's not floating like your your content is not floating good lord i need to use hydrogen pack because of this drag and drop okay enter content is good to go save that and go back to the main template here purchase core and woocommerce in a bundle for 179. i don't remember having the option to buy a bundle maybe there's a discount code that i haven't seen yet but in any case let's go back to our home page here and we're going to edit that bad boy with oxygen i can close out of all these other tabs and kind of get this stuff cleaned up here so in our mock-up this thing right here is i guess one of those like you know these are clients we've worked with sort of things um so i guess we'll go ahead and use that just to be consistent i doubt this will end up making it into the the finalized live site but hey we'll go ahead and do it stratos if you're asking me about how many add-on tools i own i i basically buy everybody's stuff um i pretty much have bought everything i don't i don't think there's anything that i haven't purchased just some of it i don't use i don't know why it's not like i'm it's not like i'm like you know intentionally not using it okay so let's go ahead and add in that image that one is going to be super easy group 866 i think it is select image this section will just center this bad boy what is this spacing wise so if i hold alt oh yeah 75 that's perfect okay so it's 75 top and bottom so thank you lewis and the oxygen team for setting your section's default height to 75 padding top and bottom that makes my life easy in that case in this case i bet this background is that f8 color it sure is how did i know and then we're just i guess should we just use a typical columns element here um yeah i mean i guess we could it's just two divs basically it'll make the mobile responsive portion easier for us so let's just go columns 5050 and we're probably going to have to adjust that because i don't think the image on the left side here is actually that that size i don't really have a vertical image like this so maybe i need to crop one of those photos to be taller let's do that i'll just fire up photoshop i mean i guess i could do it in the wordpress thing and just crop one of these to like a vertical height but the thing is i don't know about you guys but i find that it's really clunky like trying to edit images in here i have to like rename it to make it like recognize i don't know maybe that's just me um i'm just going to choose this guy that's perfect pretty much that's exactly what i'm what i'm going to do so actually that's maybe not exactly the not exactly the framing that i want framing haha get it get it framing so anyway oh no no no undo revert there we go save as frame house crop something like that so i'm going to upload an image that framed one that we just cropped select image that's pretty ginormous but that's okay we can always resize that a bit we can just basically reduce the width of the column here and i know i want to shrink that image for the sake of um like page load speed but that's stuff that i usually do after the fact i go through with a final mobile sweep and then basic optimizations like that before we go live so what do we have over here we have this neat little kind of like line off to the right of our um our section title there which is pretty cool tony he totally could be watching brett's a super cool dude and if he is i'm stoked he's here i don't know that he is but i got his permission to to you know use his information um on this so hopefully he is if he's here what's up brett all right so in this particular case i think what i'm gonna have to do is probably two divs one div that wraps or maybe even three maybe three here so one div is like the main rapper well no it would be two it would just be two one div as the main wrapper the heading element and then another div that had like a bottom i don't know i don't know this will be kind of a tricky one let's see if you guys have any suggestions on how to accomplish that particular uh layout let me know so i'm going to want to assign classes to this stuff too because i bet this pops up in other places in the yeah it does right there work process what we offer gallery yeah so we gotta we gotta build some kind of reusable element some sort of class use css after option oh good idea i don't ever do that is there is there that state here in oxygen hmm what about if i add order or like heading border right state after how do you do this how does the after option work you just put like ah interesting so how would you get like a longer line like that because if i'm just using like a hyphen doesn't it do like a interesting i've never really played with the after thing it doesn't let me doesn't let me do the space in the front no content at all choose the id first and then no content at all i'm not sure what you mean by that sorry set an explicit width and height and background color hmm this is new to me i haven't like i already said i haven't played with this after selector i would do the same as u for this about us but replace the image and add a one color block with the logo bigger in the center and the text on the side one color block i don't quite follow william trying to read that in my head and see what you mean h2 after content position i'm just gonna copy and paste your thing right there so set this tag to h2 i wonder if i can just oh no let's check this out all right so i'm going to follow you exactly andre so choose the id got it or google it yes yes absolutely um select the after pseudo element got it this is new so i'm excited learning something new every day hopefully you guys are too three set a width and a height okay so i don't know 25 would be like 125 i have no idea what i'm doing here width and height i'm just going to set some numbers real quick and see how this behaves oh it's way down there all right so the lines width and height if i can ever select this thing is 31 wide it says zero high but that doesn't seem right all right so let me go back here so 30 wide i'm going to set one high and then the layout of the heading to flex then it uses a border instead of a height so the heading is set to flex why is it way down there because i'm not seeing stuff right like it's down there in like the lower left part of this section oh right right right i'm in flex after i gotcha yep i'm in the original state now and that's set to flex make h1 relative make after absolute relative and then after absolute okay so there it is it's now below it though so then do i put it like one pixel to the right no make h1 relative so that's at least in the same container now and then i have my oh yeah i set the after background color i need to go to original right set that to green no display block for the after element not absolute and the flex direction to row for the heading flex direction to row and then i messed this up let me go back to after this is this is a little bit tricky do top and right to zero in after [Laughter] wow this is this is uh a little tricky i'm not gonna lie this works for sure yeah let me let me go look on the front end this doesn't seem like it should be this complicated oh okay well i guess it's sort of correct so now now what did i do now what do i do to get it to be to the right of the word s so that's pretty much correct the other thing while you guys are typing is there's a little bit of lag because i want to figure out how how tall that heading is that one's 35 pixels so i want to bump that up a bit so flex align center oh okay flex am i doing that on the original state or the after state let's see align items center and then you can set a margin left for the after element ah cool let's go like 15 is probably too much maybe it's 15 and then i'm going to set the height to two make it a little bit thicker whoa baby good lord that was complicated but it worked out perfectly that's really cool i've never done that before you know what i didn't do though is well i guess i wouldn't really have been able to do that in the class because you uh you said it had to be done on the id can you not do that on on a class because like we're going to have to use that a number of other times in this mock-up so i guess i could just duplicate it but i was just curious why you did it on the id and not the class yeah i don't know why it's not showing properly in the builder let me refresh and see okay i guess i can just use the i guess i can just use the clone feature let's see if it works now oh yeah it does all i had to do was refresh and now it's working properly so let me copy this how do you even work this copy styles to another selector copy styles here cool so now all i got to do is basically add some margin there so what's super cool about this is that now we don't have to bother with all that div div div nonsense we can just basically use that class and i'm glad i i added that there so then realistically i really don't even need this particular div i can just use this heading and then start putting content under it you're saying after copying you can delete the id styles okay so delete all styles from the selector hopefully it doesn't blow up yes perfect sweet that took a little bit longer than i wanted it to but this is definitely worth the effort so now we can utilize that in the next bits so let me go ahead and copy this stuff we're just going to throw that in a basic text block here i need to add some spacing there i don't know exactly what the thing was andre for president yeah that's super awesome thank you that's really really cool you guys totally taught me something new today and i'm sure lots of other people because i've never never really used any of the pseudo you know selectors here except for hover definitely haven't used before or after and that's that's awesome i wonder what other cool stuff you can do with that all right and then let me look at how tall this photo was its height is 614 pixels so let's just round that down to 600. i don't know what the aspect ratio looks like of that photo but it actually worked out just fine and then what else do we have in here just a no more link what's our spacing right here though between these two elements 30 and then what's it between there and the text link 30 i'll just use that as kind of my number so 30 pixels 30 pixels yeah that's pretty cool andre you could do better than that buddy oh that's funny okay so no more that looks kind of big so that's 18. let's just go simple text link text link and then do we add a class to one of these was it like header links photo link no i guess i'll just do like like body link something like that text color is green font size is 18 do we have a thicker font weight there yes we do so let's go like 500 and then let's go let's just say this like is read more i'm going to add five pixels of padding and then a bottom border of our typical global green here just like so and then what else do we have so there's no more i think it's better to just say like read more or learn more this design is in xd this isn't one that i i made i don't know if you guys saw my video yesterday i i bought this design on fiverr just to kind of see what i got so that's what i'm basing this off of so this is xd all right so we need one more div down here that's going to wrap kind of these icons that'll be super easy so we're going to go div oh i need to add some margin underneath this text link let's go 30 this div we're going to set to 100 percent and then we're going to add one more div in here it's going to have an icon on the left hand side which is what a phone it certainly is a phone and then that was green right with some sort of gray border what color gray is that the border is zero seven zero so we'll go border like that with one oh wait outline yeah so i don't actually need the border i always forget that i don't want it to be a circle though how do i do that why did it make it a circle maybe i have to set the border radius anyway i don't want it to be rounded do i just go one oh i guess i have to set it manually to zero interesting that i didn't i didn't know that i've never tried to set a border around an icon like that so i don't want that icon to be as gigantore as it is and i also want some spacing around it um something like that that certainly works and then it says call us eight one two nine four four two so in this particular div to the right of the icon i'm gonna add in i guess i would have to do one more div it's kind of complicated here so we'll stack those horizontally add in a simple text field that just says call us and then we're going to add in a text link we're going to paste in the phone number i like to keep things consistent and use parentheses around the beginning of the phone number and a hyphen instead of a dot like that so this is going to be a telephone link 850 812 9442 text color of green so people know it's a link and then the hover color will just be that slightly darker green yeah the the pseudo elements in the builder is pretty sweet it's it's pretty uncommon to find things that you can't do in oxygen which is pretty cool so i'm going to space that out a bit is there a border around that stuff there's not no interesting i was kind of figuring there'd be a border between the icon and the text there but not in this case so perhaps 15 pixels or excuse me 25 i meant to do 15. i was going to say that seems like quite a bit and then we can basically just add some margin to the right of this and duplicate that div set these to horizontal item alignment and then what do we have next just the address so we'll change this little icon to a location like that and then our actually i'm going to get rid of the um the text link in here and i'm just going to basically copy and paste in the address which i guess i got to do from here oh it's a link no i don't want to be a link come on now gotta triple click this bad boy there we go so sweet 206 here more beach basically going to get rid of that and then there's a period at the end of us i'm going to also delete us this company doesn't work with people outside of the us at least at present as far as i'm aware um so it's starting to look pretty good that color seems a bit off though maybe there's an opacity on there i missed it says it's or did i just not set it right it's a 7-0 border what did i do is the border color did i just not set one at all i guess not why is it not changing what did i do wrong so what's funny about that bushcrafting you're talking about um you know talking to yourself these are the conversations that go on inside my head so like as we're working through this you know live like together it's really funny because i don't uh i don't talk out loud typically there's nobody else around me at home and so i don't really i don't really talk out loud typically it's kind of funny uh i don't know why that border color isn't changing maybe it's like a caching thing maybe it is actually doing it let's go look on the front end real quick oh gosh that looks horrible what am i doing wrong yeah i mean i i swear i do this i do this all the time i'm just like ah these noises that i'm making like these like these dramatic sounds you 100 hear that if you're in the same room as me um i are you still using the outline no i set the icon style to none and then just kind of set the border manually whatever has anything to do with the border radius being zero or well no because they're all set to solid i don't know is it an oxygen caching thing perhaps good question i have no idea i'm going to link this to the about us page and i'm going to move on that's the kind of stuff that i don't feel like wasting a bunch of time on right now or you know in the in the real kind of development time i forgot to set the background color on this section what is it it's f8 again i've been meaning to do that for quite a while now and i forgot let's add in another section here and what's up next so work process um i guess i like these icons but i'm just gonna have to make stuff up here so is this all gonna export as one i just want like these icons how do i do this hold shift right oh my gosh you have to click so many times to select this stuff i don't want the text in it though so do i have to come on there we go so i shift e shift e i wonder if i can do this like in a batch oh dude why is this so hard i'm clicking like 20 times to select this stuff that's crazy okay so export selected export probably just going to do that last one the paint brush i don't know what i'm doing here and then there's nothing in it oh man you know what i'm just gonna export this whole thing and see what happens what did it do oh man it gave me the whole thing whatever it's just some silly icons let's just go ahead and pop it in the page i'm not particularly worried about it right now we'll probably end up changing that stuff anyway because it's not particularly relevant oh there's a structure pain interesting that would be helpful well i would typically use svgs but for these pngs uh i'm going to replace them anyway so can i like open this folder somehow oh yeah there we go oh my gosh i've never known that this was here i don't know how i miss that there we go so can i select it like that and then do i do mark for export and then export batch hero image png and ellipsis one already exist you want to replace them yes yes i do uh [Music] uh i guess i've exported every single asset maybe because i had like a bunch of stuff selected anyway moving on not terribly concerned about that either so let's keep going alright so this thing says you are on the right place let's change this to just another section we're going to use a background photo that we already have like um i don't know let's just use like this photo because we didn't end up using that earlier we'll go left 50 top 50 percent to center center of the photo we're going to put an image overlay on it that's pretty dark maybe like 60 something like that because it kind of had a gray hue to it on that other photo something like this and then what are we doing here so there's like a 250 pixel gap i think yeah 250 so i don't know what you could definitely just go like container padding 250 pixels then add in a heading element make sure it's centered go text color white and then just what are we going to type here something like uh says you're in good hands what would be something that you would expect to see like experience profession i don't know i'm not a writer i'm not a writer um i kind of want to say something super generic like your job done right that's what i must say your job done right yay corporate fake sales copy woohoo okay text pop in some text here also i don't know if you guys know this i forget to do it sometimes but if you set like the main wrapper like a section or a div or whatever if you go to the typography and set that to white then everything inside of that will inherit that text color by default which is pretty cool i'm going to set this text element to 50 width for now and then i'm going to change up this text a little bit with over 1 000 projects completed 500 in 2019 alone where the fastest growing oh wait that's actually real text 20 20 alone cool all right we built oh that's a great one yes we build your success i love it that's so that's fantastic um somebody asked earlier a question that i missed um the question was was the mobile version already done or will you do that next the mobile version is not um oh yeah a good point andre the mobile version is not done i usually go back and do like a mobile sweep at the very end of the build right before i send it to the client because i know they're going to check it on their phones the text andre suggested don't use a percentage width use a max width ah yes yes yes i see that in other designs and i was wondering why so what would be half of 1366 700 something 675 what is half of 1366 i'm pretty poor in 683 so yeah close enough all right so let's add a little bit of spacing there we're going to go text link and then what was our class from this one up here i used body link so that way i don't have to redesign all this body link and then i'm gonna make this link just say contact us it's gonna go to the contact page and wow fantastic this section is done beautiful okay so now we gotta this like what we offer section uh i mean yeah the max width is definitely the the ticket instead of widths i'm guilty of using width like percentage in basically every situation but max width is way better okay so we have the what we offer heading so thankfully we have that class so we can easily recreate that line on the right side and then this this stuff is not really applicable but i do like the idea of these icons with some content underneath it like some basic things because they offer like siding they offer roofing but i'm gonna have to change these icons because they don't really work so what i'm going to do here is i don't know i don't know what i'm going to do here i think i'm just going to select this stuff i don't want that heading in there but yeah i mean i could do other other icons that looks like css grid time yeah i'm i'm definitely not an expert in that you could totally do this with like a manually built div and some columns and borders and stuff uh we can totally do it with flexbox yeah there's there's no issues and then all right so let's do this i am going to add in another heading here well first of all let's add in another section we're going to add in a heading let's just type out what we offer and then our class from this one with the line was what it was header border right or heading border right i should say border right and then we'll center that let's go 25 not on the class on the id we're going to add 25 pixels of margin yep all right so i was laughing at william's comment about the song totally so what i would do in this case what would i do in this case if i were trying to make this layout i think what i would go is one div here one div here and then three columns inside of it it looks like these are like what would this be like 25 width 50 width and 25 maybe or like 30 30 40 something like that let's try that real quick so i'm gonna add in a div this one's gonna oops not em percentage we're gonna go 100 stack these horizontally and then let's go div and actually let's add some classes to this um this one is going to be offer left div or no let's change this actually offer div left i'm going to copy and paste this so it's super simple offer div left we're going to make this 30 um another div oop not inside of it over here we're going to go offer div center and that one's going to be 40 and then one more div and this one is going to be 30 again this class we're going to call offer div right okay so that should make it more simple andre says if you use a grid with a gap of one pixel you could set the containers background color to gray and the items itself white so you can get the thin lines between the items that's not a bad idea yep okay so now we would basically take these icons so i'm gonna just not use these actual icons from the design i'm gonna find something like an icon that says design basically so i'm going to set the alignment here i'm going to go icon and then i'm going to add a class to this so i don't have to style all these icons i'm going to call this offer icons the color will be green our size will be like 35 or 40 pixels maybe and then space around i feel like that never works so maybe i have to do margin on the outside something like that then actually i don't want to use i don't want to use design and planning because that's i don't think what they offer i'm just going to do three for now actually so i'm going to go roofing and then can we find a roof building ceiling what am i going to do i guess i'll just do like a house is there a house in here come on room it's so ridiculous sometimes the words are just like flat icon is that that's not in oxygen though is it there we go home that looks nice cool um this heading is not styled so what size is this that is third or excuse me 22. bump that down here and then that icon is a bit too big that's too small in my opinion i'm gonna bump that up to 28. yeah william you definitely have to uh you definitely need to get the custom icons for sure and then roofing is there lorem ipsum text here yes i'm just going to steal this text make it nice and easy on us and then duplicate that twice throw it over here do all this spacing stuff roofing boom boom probably should have added a class to these headings but whatever we are here and it's already done so i got to do what i got to do okay and then bump up the roofing okay so what are what else is there there's um siding and i don't know what a good icon for that would be like stack basically or like that's like the justify icon but close enough bigger icon yeah i kind of agree icons are a bit too small and honestly the headings seem a bit small but that's okay and then exterior construction so i wonder if there's like a shovel or something dirt is there like a construction yeah there we go construction icon cool and then let's add that border on the right side of these two divs so over here go to the border right we're going to add in our global border color with the width of one pixel solid and then do it on this side over here border right one solid by him oh no why didn't it show up what oh my gosh i'm clicking way too fast why didn't it pull up the border weird maybe i have to do it in the id that would be an oxygen quirk for sure well i mean the div has the class but i don't know why that would matter let me just try it real quick on the id instead of the class if it works i don't know why it wouldn't in the class that doesn't make any sense to me we all love oxygen we'll forgive its quirks and features maybe it's because of the spacing that i have set here well no that wouldn't have anything to do with it right why is that not working that seems super odd to me yeah it does it does seem really odd i don't get it maybe i want to try to apply a bottom border to this div here i definitely just work to the bottom but it doesn't show up is it in the css here i mean it shows it in inspect tool maybe the maybe the color is just too light that wouldn't really make sense though 25 pixels that's so weird yeah but i thought that that color was much i thought that color was much brighter than that yeah i guess i need to add a slightly border gray like darker or something like that so we'll toss that in there and we'll go like 70 70 opacity maybe that's why that's super weird i didn't realize that that color was so dark or i mean light i guess would be the phrase all right so we definitely don't need a 25 pixel border does it show up yet it's still probably not going to show up all that well i don't understand i'm just going to go with our navy and make it like 50 i just want a border of some kind also i want it to be 50 but there we go okay let's do that that works it's just the color i guess it's really weird i expected that other color to at least look it's not there what am i doing is it something with rgba colors what if i do like the solid hex color weird that is very very weird i don't understand so it doesn't like rgba i guess hmm that's so so strange well you know what i'm gonna do is go just some sort of gray color that's just a plain jane hex i'm gonna go border right and then on this div it had a border bottom that's gonna work i guess but that's not super thrilling yeah i'm not i'm not super into that that's a little bummer i also wanted to duplicate this to basically replicate the border but i'm going to take the bottom one off and then just see how this looks yeah that'll look good when we have all the actual services in here and i can kind of change up some of this stuff that will look reasonably okay i feel like i just need to make sure that these borders aren't as dark as they are because i really don't like that yeah stratus you're totally right that color is terrible is there a core color maybe i don't know maybe just like c border needs to be much much lighter indeed border bottom that's good borders right bam border right okay i think we're almost there bottom oh it's this one has the bottom border bottom i already did that okay cool sweet i think that looks perfectly fine i honestly am not a huge fan of the extra spacing in the middle though i guess maybe if these sentences were a bit larger it would make sense but oh well that's good enough for now let's look at this section down here i feel like this stuff this sort of like awards things are really gimmicky so to be perfectly honest i'm going to skip that and then let's kind of close out this video with uh this gallery section so i don't have a portfolio on here but let's see i was hoping to get into swiper.js in this which is what i've done in my oxygen course there is a video on that um but there is no portfolio hmm i guess we could just make it like featured products we need to crop those photos to be vertical like that uh what what photos do we have in our media library here let's see okay so we have this house one two three four maybe we need to find another picture of like houses that look like they're sort of under construction i guess there's those four i think i'm just going to do that just like basically crop those four photos hmm yeah that'll work what i can do actually i don't even think i need to worry about cropping it is just make a new section i'm going to clone this heading and bring it down here and just say like past projects or something like that center this and then let's add in a div 100 and then space horizontally i'm going to add in a div that has a width of 20 20 i need to add a class real quick though so projects photos projects photos something like that all right so 20 oh yeah that's that's a good point bush crafting is we need something to differentiate these two sections i guess it would just be like a like a text link that would be pretty simple so like a contact us you could just have this down here it would just be like like view view services or something like that okay so div 25 pixels and then let's just link this to the services page add link there's something there all right so what i'm thinking with these past projects right here is i'm going to add in basically four divs with like 20 width i'm going to just choose a photo at random and set the divs background to be that photo and position it so that they kind of fit in the confines of that photo you know in the divs space just as like kind of a temporary solution and then if we do end up building a full portfolio for this client then i will definitely probably definitely probably that doesn't make any sense i will more than likely set up swiper.js so that there is these left and right swipeable arrows but you can just keep in mind that there is that video in my course so there's already a tutorial on how to set up swiper.js using a repeater to make a dynamic slider so we won't delve into that here i'm going to duplicate this out basically four times i'm going to set the space to space between let's set the height of these divs to like i don't know what is what is the height of this uh 400 pixels basically it's 395 but i'm going to round it up to 400. let's go background of this particular div to this house i'm going to set it to cover left 50 top 50 oh i actually should change this to all be in the class here so i don't have to worry about that later fifty percent left fifty percent top and then cover and then really what i need to do is just for each of these elements go pick a photo so i'll just do this one these photos aren't particularly ideal because of the way that they fit but that's okay we'll just use this one and then last but not least we'll use this photo here so yeah i mean i don't know it's not the not the greatest thing in the world but in terms of it being simple as compared to trying to build like a dynamic slider for a portfolio that doesn't actually exist yet this is to me the most ideal solution i'm going to take another text link down here underneath this div here and add the margin view services let's go view portfolio which i think we call it gallery so let's change that to view gallery set this to the gallery page add link save and bam okay let's go back up to the home page here so i'm looking at my live time real quick and we just crossed two and a half hours so this has been two hours and 30 minutes mostly uninterrupted and we've gotten quite a bit done here i'm pretty excited about this so we have our header basically set up with our custom you know different divs that will do the inner pages the height changes with the page title in there need to set a background folder for those and then um got this like client section i'll have to change that out to be like real clients the about us section that actually looks reasonably okay i need to figure out why this border isn't working quite right this stuff i will definitely have to change once i kind of figure out more along the process of how this particular client works this one we build your success i actually really like that contact us is the call to action there what we offer looks okay obviously again need real content to go in there but that's okay i'll work with my clan on getting that past projects uh bushcrafting you're totally right that we should kind of close up that spacing there a bit um we can just basically set these to like i don't know what it'd be 22 with each oops not xd let me go back here a case like this is why you set classes on stuff because i'm pretty sure all i'm gonna have to do bam just like that 23 i think was pretty good 24 yeah 24 is pretty good so that's what's so cool about using classes is you only have to do it once andre you can't browse to this particular page i don't know why it's not hidden i mean you guys can view this in real time if you wanted to there's nothing nothing restricting your access so let's go ahead and do a quick mobile sweep real quick so this is typically something i would do right before i send the proof to the client um you only see the top section interesting i wonder i wonder how it would work incognito i wonder if it's messed up if i'm not logged in as oh yeah interesting yeah i mean if i'm incognito i wonder if uh stratos to your point yeah let's check and see if the settings page or excuse me the reading page is set to home yeah let's see so let's go resign short codes i probably need to get out of the admin console real quick oxygen settings security signal short codes thanks stratus for joining us see you later man and then uh resign short or i mean uh save permalinks yep save that let's see here did that work no weird i wonder oh you know what it is it's probably caching in cloudways let me check yeah varnish cache was enabled i hate that they do that by default i wish you had to go turn that on but whatever now it should now it should work let's see there we go yeah it was just caching now it should work andre cool so um i was going to do a quick mobile sweep let's just take a look real quick in chrome inspect and see how jacked up our pages so these divs need to be adjusted oh gosh that needs to be adjusted badly so that's actually in our in our main template there so let's go to our main template real quick edit that and we'll fix those mobile issues real quick that shouldn't be too difficult alrighty moving down the page all this stuff is fine we'll go right here less than 1368 we need to set this div right here to be 100 oops not a thousand 100 and then this one to 100 as well let's go ahead and stack those because it gets pretty congested right there so we'll go 100 percent the icons border width is set to 3 pixels when i check it with the inspector interesting i don't know why that would be okay so set this width to 100 and then i need to define a height in here for that map let's go like 325 pixels in the mobile view save that and then how does it look in the inspect tool now uh oh it's the footer like that text part of the footer but that actually works so once again this is the downside of building the columns manually is that then it does make it a bit more difficult to adjust in the mobile side of things it's not so much difficult but more just like kind of time consuming all right so we'll stack those set this width to 100 i'm going to add some margin i think i did 15 on the other one so i'll keep that consistent save and then now are we mostly good to go here just about we have a little bit of white space on the right side i wonder where that oh it's from this stuff up here guys will somebody post in the oxygen face facebook group and ask them why i have white gap on the right side please just kidding don't do that just kidding haha okay um edit the home page real quick and let's go fix that mobile layout and we'll pretty much be set here i mean we're missing a lot of other content you know we still got to do all the inner pages we still gotta like get real content in the page but um we're definitely coming along here so we were having trouble with this stuff here so page containers it's a little crammed uh i say that we go ahead and drop these to stack vertically at page container and then each one of these will set the divs to 100 percent and i'm going to make sure to use the class so i don't have to do it twice 100 of course that didn't work why didn't it work there we go i'll just use the id oh william you can totally make a full website in one day absolutely if you have all the content there and you have a rough idea of what you're doing from a design perspective without a doubt you can you can totally build uh you know simple like websites in a day for sure okay so let's do this and then i need to set this to stack all that stuff should be pretty much good to go i don't know why the width isn't working on that particular div but oops not 200 100 and then yeah good okay so then this will probably want to go ahead and stack as well maybe at 992 it does get a little bit a little bit uh crammed there project photos set to 100 width and then let's add 25 pixels of margin beneath that i might change this to a gallery in the future like an acf gallery perhaps so the client can get in there and add photos if we're going to do just like a regular photo gallery instead of a proper portfolio that's probably what i would do okay let's go take a look at the home page real quick check it in the inspect tool i always like to check it on my phone too to like double check that it actually works properly uh bushcrafting says i would add a background color to the view services section so there's a spacing between the white blocks um let me see what you're talking about here so view services section i would add a background color so like you mean this this whole section right here yeah i guess that makes sense we were just using a background color of f8 on the other sections so how does that look let's see here yeah that's that's a bit better i don't think it looks bad at all i like that the just a little bit of delineation between the two sections so this um you know we we definitely had to make uh we definitely had to make some adjustments to the design you know as compared to the mock-up but i think it's coming along really nicely it's been less than three hours oh bushcrafting i missed mistook what you meant did you mean just around the view services link or not the whole like what do you mean there a bit more like the mock-up let me look uh oh wait it's down here no where is it yeah place that in a section so are you talking like this this section here with like all the numbers and stuff oh just basically like put the text link in that section with all the numbers i guess that would make sense yes it's the counter section adding rhythm in the page all right all right you guys are twisting my arm i'll do it i'll do it so is this an image in the background let's see real quick i don't really know what that actually is oh it just exported i don't really know what i'm after here what what asset was that i don't see it maybe it's just like a is it that i can't tell what that is don't see it in the oh it there it is bg image but what's the pattern behind it i can't really tell let's just go through that section on the homepage real quick so what was that it was between the what we offer in the past projects yes okay so what we're going to do is drop this what we offer add another section use that bg image i think it i think it must have had some pattern because it wasn't just a solid color like that it's a staircase with an overlay oh okay so what staircase was it that's like the side of a building that's from the portfolio uh maybe if i go back to the mock-up and then like pull that off mark for export export selected export so it wasn't really that what is this color it's oh it's just basically one of our global like the navy with an eighty percent opacity okay so upload back image two okay and then our image overlay was our navy with eighty percent opacity and then we had basically just these headings so what size are these headings they are 60 okay so in this case i'm just gonna use a columns element four wide to make life super easy here so i'm gonna go um like i'm gonna call this like data headings or something i need to get better at naming my classes to be a bit more consistent but hey whatever oops i'm i'm searching for the element trying to add a class to it so i'm getting tired over here all right so data heading so that was font size of 60 holy moly that's big maybe it's just because this is shrunk um oh you're talking about only the link not the not the actual numbers you don't want all that you're just saying the link thing only maybe you can make a block quote from architecture instead let me i just want to check this out now that we're this far along i want to see what we got going on here projects completed if i'm being perfectly honest um i have to admit that i think i was wrong about this particular section that actually looks pretty good it's a little cheesy because it's like like i said on every site everywhere but i think i'm gonna do it all right so i'm going to toss these numbers in these other sections clone it one more time center all this stuff i actually don't want it to be middle aligned architecture yeah we could definitely do some sort of quote in here 10 plus i'm gonna just copy these text blocks oh almost years of experience i never get that word right experience yeah you guys are saying it would be better to put a uh like a quote in there rather than just like a you know a bunch of meaningless numbers basically what was this other thing happy customers and awards one i don't know what that is 500 plus happy customers yay five let's see let's go 15 plus awards awards one or like yeah i don't know something like that i will say i wasn't into that idea of these um you know oh is that not centered oh no it's just the way that it highlighted it looked a little weird i will say i wasn't particularly into this idea with these numbers on there but it does it does break up the sections pretty nicely and kind of keeps the site flowing so i'm i'm really happy with how this has turned out i want to take a look at the responsive view and just make sure we don't have any glaring issues here oh yeah we do so we've got to fix that i've got to fix this right here that won't be too bad so it's this div that wraps these two things so 1366 let's go ahead and drop it so we're going to set this width to 100 and then the margin on the bottom to 15. oxy smart thanks so much good to see you all right that fixed that that is just an image so we're not going to be able to fix that right now we build your success that looks good what we offer we need to get rid of those borders on the mobile view so borders unset borders on set hopefully that doesn't mess up the desktop version i don't think it will let's see oh it's because i did it on the id too i also have to remove the border from the id since we were kind of testing that a little bit unless i'm doing the wrong div it's not really like taking the border away that i want it to ah i don't feel like i don't feel like messing with that border right now sweet i mean it's pretty much it's pretty much good to go like we need better content we need some some like you know photos for the top of the homepage and stuff but i'm really happy with how this is coming along so i appreciate you guys sticking around in this um this has been fun it's been almost three hours and we've gotten a lot done so hopefully you guys have learned some stuff i've certainly learned some stuff that border is absolutely a bugger this this thing right here the borders being weird right here and then also over here are um just you know not super ideal like in the mobile view but um that's about it hopefully you guys have enjoyed this i definitely did let me look and see how many people we have so we have had around 30 concurrent viewers which is amazing thank you guys so much for watching this is really really awesome what's our peak 50 at one time we had 55 56 people watching that's crazy i really really appreciate you guys sticking around it's super super awesome and i will see you guys in the very near future have a good weekend it's friday hopefully you're doing something fun this weekend and thank you guys so much for your help i really appreciate it it's been fun oh if you guys want me to do this again in the future definitely let me know and i'll find another i'll find another project for us to do maybe something a little bit more complex something like that until next time see you guys later

Channel: Permaslug

Views: 13,019

Keywords:

Id: C09uP96xVMs

Length: 169min 14sec (10154 seconds)

Published: Fri Oct 09 2020