Migrate Elementor Site to Oxygen Live

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] all right everybody we're gonna get started here in just a second super excited to see everybody joining in [Music] good morning good afternoon wherever you are in the world just going to quickly turn on my facecam here to introduce myself if you don't already know me my name is jonathan and super excited to be doing another live build stream today so wherever you are in the world hopefully you can sit back and relax or keep this open in a new tab and we'll get this rolling so basically what we're going to do today is take an elementor site and move it to oxygen now there's no real trick to this so essentially we're just going to rebuild this entire site in oxygen i picked this site for a number of reasons first of all i thought it looked pretty good and then also there's some interesting things like some of these layouts in the you know header area here for the home page versus like you know some of these inner pages for instance so we're going to use this as kind of our baseline and then down here there's just some other layouts that i thought would be pretty interesting to try to replicate so we'll go through all of this but to give you a sense for what i've done already in cloud ways i've cloned the site so i started with my elementor site copied that over to a new install and that's it so we're going to basically install oxygen you know we're going to set up everything from the beginning so if there's something that you see me do you have a question on please feel free to you know pop it in chat i'm gonna try my best to keep an eye on it and uh yeah so a couple of things i wanted to draw your attention to if you're interested in that stream music at the beginning that's kindly provided by um ambient uh there's an ambient thing on on bandcamp called cliff diver that i really love so you guys should check that out and then also i was able to recently turn on the super chat function of you know the live streams and premieres so if you're feeling incredibly generous and you feel like tossing a few bucks that would be more than welcome i've never had anybody do it but you know obviously no pressure i just unlocked that so anyway i'm gonna switch over here get my face out of the way unless you guys want that but i'm going to go ahead and just pop this out and now we're going to go ahead and get rolling so like i said i already went ahead and cloned the site so i'm going to basically show you the back end of the elementor site i changed the theme here of the wordpress admin side so that it was clear what you know site we were on so obviously the one that's going to have elementor you can see there in the plugins but we may not be at that spot all the time so if you see this kind of like green side that's more elementor and then of course our target site for oxygen is just going to be the typical wordpress black backend like that so a couple of things we're going to do here so we need to get oxygen installed on this site and we're going to do that in just a moment so we got to set up all the plugins i'll just show you real quick this is pretty much an exact clone of the other site but we do need to disable elementor you know add oxygen we're going to put hydrogen pack on there a couple other things neil asked how do you access super chat there's a little under the chat window there's like a little dollar sign thing and if you click on that apparently it lets you donate money which is pretty insane so i don't expect any of you guys to do that but i thought i'd mention it in any case so let's go ahead and delete well actually before we do that so i just want to show you this target site now of course i said i cloned these sites identically so they look pretty much the same the only difference is of course the url this one says you know 472.cloud oh my gosh there's a there's a super chat that's so insane thank you so so much i really can't believe that that's that's the first one ever so really really incredible so kind of you i really appreciate that um so i was just mentioning the urls are different so other than that they're all identical so what's gonna happen on your elementor site when you disable uh or you know when you add oxygen so let's leave elementor in place and we're going to go ahead and add oxygen to the site interestingly enough the release candidate of 3.7 just came out which is pretty awesome so i'm going to go ahead and upload that to the site real quick so again this is basically from the very beginning so this is what it's going to look like the very first time you set it up i'm going to go ahead and activate oxygen here now you have two different options so this can sometimes be a little bit misleading and i've had some questions on this where people install oxygen and they're afraid to click blank installation because they think it's going to wipe out the whole you know website there's another five dollars or five pounds thank you guys i it's just insane just insane thank you so much uh i you know i i started this channel because i just loved oxygen and was blown away at how powerful it was it literally transformed my business and i just felt like it had to be shared with other people so to see everybody just like so thankful all the time and you know now to like be dropping money and chat like oh man it's unbelievable so thank you but back to my point here uh the blank installation doesn't actually overwrite your site it just doesn't add any oxygen templates or anything from the default design library if you want to import some design content you certainly can do that but we're not going to we're just going to hit blank here in this case and then you can see elementor is actually still active on the site so if we go back over here and refresh on the front end it actually still has quite a bit there so maybe some of this stuff is in the wordpress content editor or gutenberg blocks so you can see it doesn't really i guess in some cases it's going to completely break your site but in this case it's still mostly functional which is pretty cool now at this point we really don't need elementor anymore because all we're really going to do is just look at our old site and replicate that design so now what i'm going to do on this target site is go ahead and just basically delete astra elementor and the starter templates so we can deactivate all this stuff and any other plugins that we need we're just going to add in real time so oh not auto update we're going to delete that stuff and then like i mentioned i'm going to use the uh hydrogen pack as well i think it's going to help us speed up our workflow so if you guys haven't seen my hydrogen pack video that i did probably about a week ago now go ahead and check that out it's a really cool you know powerful addition to oxygen so i guess i need to go ahead and get my license key real quick so let me grab that i hadn't considered needing licenses but i guess that is important so licenses hydrogen i'm going to copy this and i'm going to take this over here i love you guys but i don't want to share my license key so let me activate that and then i'll come back over here so now of course hydrogen adds a lot of really cool features i pretty much leave it at the default there are some keybinds that i probably should have set up ahead of time but realistically it's going to be fine so hydrogen pack as it is will be perfect and that's really all we need to get started so you don't have to have hydrogen pack let me say that it's totally a personal preference thing i mean you can get by with oxygen sort of vanilla if you if you want to call it that and then basically because we clone that site we have all of our media items here as well so we don't have to worry about uploading any media items so if we go back over here and look at our origin site the first thing we're going to need to do is set up our main template and uh hello from south africa glad to have you here i think we have people all over the world today which is pretty amazing so if you guys are out there drop in chat where you're from and i'd love to love to kind of see so yeah so basically we're going to start with our sitewide template now to give you a sense for what we're going to do so the main template is going to basically contain this whole header here for all of our pages it's going to have our inner content element in the middle and then the uh the footer area of course is going to be in that main template as well so yes good point you can't import and export settings for hydrogen pack i just didn't i just didn't do it in this case i only have basically the one site that i was using it on so i just like i said haven't actually switched it we got columbia from holland absolutely amazing love it all right so ireland and lithuania and then super awesome just for the sake of uh conversation i'm in the u.s i'm in florida if you guys were curious hello from spain super awesome yeah i appreciate you guys pointing out you can import and export from hydrogen i just like i said i haven't done that so we're going to go ahead and get started by creating our site-wide template here so first of all i want to take a look at what fonts we're using so you guys are going to see me use this new chrome extension called hoverify so i'm not sure if you've seen that but there is a link in the video description here and i'm releasing a video on this tomorrow but this is kind of a cool way to inspect web pages other than chrome inspect you can just click on anything and it gives you that font so you can either click it and look this one's poppins which you can probably tell and then this one is what that one is nodo serif so that's pretty neat we have india and indonesia absolutely amazing guys so so stoked to have all of you really really cool uh so this is a really cool extension there's a lot of really powerful stuff so we're gonna use this quite a bit to get things like colors and fonts and spacing and stuff like that the other thing that you'll see in the video tomorrow that's really cool is there's this grid function so you can kind of see how stuff is laid out which this makes it look kind of crazy but it also gives you a really good sense for like how this stuff is structured and how it's laid out which is pretty neat and then you can also look at individual elements so if i turn this off i can hover over an individual element look at the alignment and the spacing which i find pretty cool so of course you can do that with chrome but i mean with chrome inspect but this is just another really cool way to do it elijah says i have css scan but don't use it much yeah elijah first of all happy to have you here man but hoverify is pretty cool i actually am pleasantly surprised and it's really cheap too so there's a link in the description if you guys are interested there's a lot of other really cool stuff here i don't want to get off on this but you can like search for classes you have an entire color palette here so every color on the entire site this is going to be useful for us setting up our global colors so anyway let's go ahead and get our oxygen template set up so we're going to go back to our target site here we're going to go to oxygen templates we're going to add a new one here and then main is what we're going to oh we got caps lock on i'm going to call this one main i'm trying to type one-handed here as usual i typically start with my main template just by applying it to the singular post type of pages and that's it so we're going to go ahead and publish this and then we'll hop into oxygen here so dan says i should do a deep dive on hoverify elijah i knew it would that's exactly why i showed it to you so dan says i think you should do a deep dive on hoverify that is coming tomorrow and uh that video will be there it's a little over 10 minutes and we'll do a premiere so definitely stick around for that tomorrow morning um there's a lot of other cool stuff in hoverify as well there's like the color picker which i have a different chrome extension for there's also the assets function so like if we go over here you can just download all the images and svgs and stuff all straight from this page and then the other really cool thing is you have the take screenshot so obviously that's built into chrome inspect as well but you can take full page screenshots which is pretty neat so again video coming tomorrow and there's a link in this video's description if you guys are interested in checking it out so let's go ahead and start off by on our template here we're going to just stick in a div and this one is going to be our main wrapper div now what it's going to do is contain this entire heading section and so we're going to stick in a bunch of other divs here and we'll go ahead and just get started so first of all we're going to change this tag here to header keep things kind of semantic and i'm going to try to rename this stuff in real time so we can kind of see let's just call this one here kind of like header container something like that if i can type so we have that and then next up we're going to stick in another div here that is going to be kind of our uh you know logo menu and then our button here so let's figure out how wide this content is first of all so if we go to hoverify inspect this is 1200 pixels so let's see i'm going to go ahead and close some of this stuff and clean out my tabs here so we can just get a little bit more optimized ryzen says elijah thank you so much for oxygen i completely agree because we all wouldn't be here if it weren't for that so really appreciate it lionel says rc1 is okay for commercial website i do believe so elijah you can clarify but i'm pretty sure the the release candidates are available for support so it should be safe to use it but we have the the big man here and i'm sure he can answer that for us all right so what i'm going to do is on this div and perhaps we should set up a class for this we could just basically name this like i don't know div pw div for page width i'm not sure this is going to work but i'm going to try this because i think we're going to be adding a lot of divs here that are going to be restricted to that 1200 width so i'm going to try this so we're going to add this class and basically what we're going to do is set the width to 100 and then we're going to set the max width to 1200 pixels so that's going to restrict that div to a maximum of 1200 pixels and that's going to keep everything nice and aligned for us now the next thing i'm going to do is set this header container well actually i was thinking i would center this but i think what i'll do is just take this div and we're going to just go margin left right auto stick that in the middle like that and then i'm going to call this kind of like menu container that'll work and now we're going to of course get our logo our menu and our button there for our phone number so let's just add in an image element let's find our logo here let's see there's svg's surprise those even made it in because i don't have the svg plugin so let's see that is not what i wanted these are svgs so they're giving me some trouble here what am i doing wrong already already running into problems who would have thought why is it just oh it's because it's white it's because it's white that's why so if i were to set the background of this image color yeah there it is the text of the image is white of course so all right so i'm going to get rid of this for now and then that image is 180 by 45 so we're going to restrict that width so image is going to be 180 by 45. don't actually think the 45 is necessary in this case and then let's go ahead and stick in some text links here so text links are going to be for our main menu component and let's call this ps header links is typically the class that i use let's see ryzen says i want to create a platform where creators can upload their videos and people can watch their series for like five bucks a month the series needs to be able to purchase separately oh man that's going to be a difficult site i mean i'm sure there's people out there that can build that perhaps there's even some kind of membership plug-in that could do that but that would definitely be a tricky site to build it would be it'd be kind of a beast of a site so let's go back and take a look over here at some of our styling so if we click this it's going to hold our menu link styling there for us and what do we have so the color is white nodo serif is the font we actually need to go change our global fonts to match here so let's go back over to oxygen we're going to do two things first of all we're going to go to manage settings global styles and fonts display we're going to change to pop-ins and then this other one we're going to change to nodo serif so nodo-serif like that and let's see so we're going to have home of course and then let's see how much margin we have on the right hand side here does it actually tell us that this is still relatively new to me so the padding is 1 em on the top and bottom or excuse me the left and right right yeah so one em i do believe that's how this is working all right so now we're gonna duplicate this a couple of times and so we need to change that to white which i don't want to do quite yet because it's going to make it disappear we need to get that image in the background and then we have a transition when we hover what does it actually do i need to get rid of hoverify i guess oh it just makes it go from the like grayish color to white i see now all right so that color is just an rgba and what you can actually do here is just click this color and it copies the color to your clipboard which is pretty neat so we're going to go text color like that and then our hover color is going to be full white so so we can actually see this on our header container here we're going to go set the background image and i don't actually know which one it is let's see oh it's this one of the big greenhouse i believe that says testimonial header hero background horticulture green hero is that the one yeah so we probably also need to set the height here so what is the height it's at 100 percent kind of taking a look at what the height is let's just go like 75 vh something like that uh whoops vh not none and then we need to set that background to contain cover yeah cover uh so jacob asks sorry if this has been mentioned is it a google chrome extension that's being used to search the css yes so that is called hoverify so it i believe also has firefox and safari at this time but it's a chrome extension used to find all that stuff and again i mentioned it's in the description if you guys want to check that out so what i'm going to do now is set this image to 50 from the top because i think that's roughly what we have on the home page here and then there's also a an image overlay color so there's a background color here i don't know that that's actually it let's see that seems super dark so we're probably just going to need to play with this a little bit and it's actually not background color it's image overlay so let's just go like 50 and if we need to we can change that later of course all right so now we can actually see what we're doing with this white content on the page so now what i want to do is take these text links and let's go ahead and wrap these with the div and actually i was going to try to right click over there in the structure panel with hydrogen but apparently you cannot so what i'm going to do is wrap this with a div and then i'm going to stick these text links inside of this div if it lets me there we go drag and drop is always a little bit tricky and then what i'm going to do is also i'm going to duplicate this link one more time except on this one i'm going to add a stack class here that will design in a little bit for ps header link and we'll just call this button so now let's take this div which is going to be our text link container i think f2 is renamed yeah it is and hydrogen pack f2 is renamed so we're going to go links container is what we're going to call this one we're going to set this to horizontal and middle align now let's take this menu container that we have and we're going to go horizontal again middle align and then let's go space between and so what else are we missing here so we have just our links and then our phone number and then that button here is going to have some cool styling to it so the first thing is that it doesn't have a background color until you hover and let's see what else we got here so where's our padding this is still a bit new to me so it's 16 24 on that so let's switch over here to this this link that we added the ps header link button and it's going to be 16 top and bottom and 24 left and right then the typography color is going to be our green now i haven't actually added those global colors yet but obviously i do need to do that so i'm going to click this right here and now what i can do is just stick this in as a color because it copied that color to my clipboard go to global and we'll just call this like primary green and then we essentially need to do the inverse of that on hover well actually we also need to set the typography to uppercase i believe well no it's just numbers in this case so it doesn't actually matter but the font weight is 600 so let's go ahead and bump that up so 600 and then i'm going to change the text here from home to like i don't know 888 123. one two three four if any of you guys like the it crowd i thought about coming up with the phone number from the emergency services line i actually don't know it off the top of my head but i think that would be kind of funny the number is super long though all right so next up on hover we get that green background color and the text changes to white so let's go to hover state of this we're going to change the color here to white and then our background color is going to be that global green that we just set looks like we have some border radius as well so border radius of 8 and then we need to change the font size to 1.375 rim so we're going to go to uh let's see typography font size is rim 1.375 and then the border radius was 8. so 8 right there all right so that is coming along it seems a little bit different though i guess oh the font is poppins instead of our nodo serif so let's switch that over here i'm going to go to pop-ins that just seems so huge maybe oh man i applied the those font size changes to the hover effect so this is you guys watching me make some of these mistakes in real time kind of interesting so 1.375 rim and what else did i do i changed the font weight on the hover state as well so i need to go back these are some of the things that i would typically edit out of a video but you're seeing them oh wait no i didn't what did i do wrong here maybe it's that it was what did i do wrong typography why is it jumping so much oh i added the padding that's what it is it's the padding to the hover state i think right yeah yep that's exactly what i did so i need to go back over here so 16 top and bottom 24 24 and then we also need to add the transition effect so what does that transition look like it is 0.2 linear all i knew you guys would would eventually figure it out quicker than i could but we got it figured out so we just need to add that transition effect oh right and the font yep so we're going to go back to default it's funny how these are just things that would you know go wrong in real time but i would edit them out of videos to just make it much more cohesive and you guys would never even know but here you do you get to see my my faults in action all right so now we're going to make sure we're in the original state this time and we're going to go to effects transition it was 0.2 right 0.2 linear like that there we go so we have that hover effect on the button so that was a little bit more tricky than it should have been only because i made those mistakes but as you can see that's just how it goes sometimes all right so our text links over here look kind of small so let's go take a look real quick and just double check we have our font size set up so it's a line height of 64 and then where's the font size in this thing font size is 100 percent that's seems like kind of an odd way to do it but nonetheless that's what they did all right font size is 100 i actually don't know what that's going to do so typography the line height 64 pixels whoa that is not what we want maybe we'll just set it to like two or something like that um and then the height was at a hundred percent probably because this container here is set to a specific height let's see what that is so it's 77 pixels high so if we set this links or actually let's go to menu container and we're going to set this to uh 77 pixels high now we want to do it on the id here instead of the class because we don't necessarily always want this class to be that same height so we're going to go to id 77 pixels and then we already set it to middle align so we should be set there and next up let's see what we got so getting pretty close here we just need to change these text links to be their proper you know link essentially their proper name uh that's the only thing i found that's kind of annoying about hoverify if i'm honest is that sometimes i don't want the the dialogue pop up there but if you pause it then you know it basically goes away i wish there was an easier way to do that maybe there's a shortcut i think there is but i don't know what it is all right so anyway next up we have our farm our produce so let's go ahead and change that stuff here so our farm and let's link it while we're here so we're going to go to our farm and those pages already exist of course because we cloned the site earlier our produce and then what was the other two so it was testimonial and contact us testimonial i always struggle with that word contact us and again we're just going to link those so contact and testimonial all right so that is looking nice so yep i appreciate you saying that that we all make mistakes because it's absolutely true you guys are just seeing it firsthand live on air so that is our header looking decent to me it looks like our fonts are a little bit smaller on our actual website here but perhaps they're not i guess maybe the background color isn't quite as dark on our site here so let's bump that up to maybe like 65 something like that so yeah now we got our menu container mostly sorted the only thing that differs here is the active color which i don't exactly know how we're going to add that except through css so focus hover yeah i think we'll just stick with that it's perfectly fine so next up we're going to add another div container here so let me show you real quick what this looks like so if we go to like the our farm tab you can see we have a bunch of information here this header is kind of tall and then on this other one here it shrinks quite a bit so we still have the page title a short description we have this little like you know div separator there but what we lose is a lot of the height and then also the social icons and the address of this particular business so i thought that was kind of a cool setup for us to replicate we're going to need to make some changes to the height that we set on this section earlier but that's okay so now what we're going to do is go back over here to oxygen in our header container we're going to add in a new div and let's just call this like page title container or something like that page title container and then we're going to do essentially the same thing we're going to add that class from earlier so we don't have to restyle the width and the max width so ps div pw is what i called it so i'm going to do that and then this particular one we'll need to find a way to push that down a little bit but that's all right we'll do that in just a minute i think actually we could just go to this div here and maybe like space around might not work unless we set this div to a position absolute top zero i believe that would work but that actually that messes up our um our spacing what if we center this there we go yeah so that's what i'm gonna do so i set this top one to layout to absolute top zero and then i just set our main section to center everything here so that will work so now we have this div container in the middle which is essentially what we have both on the inner pages as well as the home page so i'm going to close that enter page for the moment so inside this div we're going to need basically a column that's going to have what is this roughly 50 50 width on the left and right so 570 pixels and 570 all right so josh says interesting how you've set up the header why not use the header builder to be perfectly honest with you i don't like using the header builder i find it causes issues and i know elijah's in here so he's probably like what kind of issues are you talking about it just seems like whenever i use it it causes me more trouble than it's worth so i pretty much always build the headers manually and also it just gives me more flexibility in layout options and design and stuff it to me it just makes it much easier to build it manually uh there we go elijah just summed it up perfectly has some downfalls that aren't worth dealing with if you don't need sticky or overlay completely agree there which is exactly why i'm not using it you pretty much never see me use it unless we're using sticky but it's also relatively straightforward to set up sticky just using some simple css as well alrighty so now inside of this div uh if you guys know me you know i typically don't use the columns element uh that's only because i like to be able to control the you know the the spacing of the divs inside of it so we're going to build this column manually so i'm going to expand this so you can see what we're doing i'm going to set the width here to like 48 percent and then i'm going to duplicate this now inside of this left div here we have oh gosh i need to get rid of that for the moment there is a shortcut hopefully i'm saying your name right dividus thank you so much there's a shortcut to toggle hoverify alt i so alt i yup indeed you're right that makes it a heck of a lot better so we have a small little small little subheading here and that's green it looks like it's uh what size is that 0.75 rim and then font weight of 600 okay so i'm going to click this to leave it open and then let's go ahead and add in uh i guess we'll use a heading element and let's just call this like ps um heading i guess we'll go h4 because it's going to be or maybe even like h5 it's going to be super super small our text color here will be the green the font weight was what font weight is 600 font size is 0.7 0.75 right rim yep and then it's pop ends that's already set margin bottom is 20 so we'll go ahead and stick that on the id of this element let's see gordon says why not use the menu element once again it just to me gives you more flexibility because you can use text links or in a case where you want some like icons and stuff inside of your links you can also just use a link wrapper instead of the text link and it just gives you a lot more flexibility liam asks is there any way to actually add ul and li elements for the header nav which is better html semantics to use rather than divs to be perfectly honest with you i don't know i'm not sure exactly because i believe text links and the link wrapper are both just a elements if i'm not mistaken and there's a little glitch on the front end here with the the setup we did with that container hopefully you guys don't hear that insanely loud uh car that just drove by because that was super loud uh that's a good question not really too sure on that liam that's something worth investigating for sure all right so back to this this heading says this is down farm whatever that is and that just looks so small it's actually an h6 element so to be consistent we probably want to change that but we already set it h4 and that's our class name so we're going to stick to that letter spacing is two line height of one so let's go ahead and do that switch back over here to our class letter spacing of two line height of one and that's looking pretty good so we are essentially right at that point now hello from columbia antonio that's super glad to have you that's a place i would love to go uh yeah i would agree probably best to use wp menu something like that or you know just use a code block if you want to just style it make sure you get exactly the semantics that you're after that is for sure a way to do it so back over here we have this div separator so this one's going to be pretty simple to achieve we're essentially just going to oh there's a bunch of windows right here what did i do i guess i clicked it a bunch of times we're just going to add a div here let's see it is 32 pixels wide so let's go add in a div and let's just call this like ps sep short so this will be ps separator short is my class name here we're going to set this to a width of 32 pixels we're going to go a height of let's just say 2 because i think that's what it was set to and then the border bottom we're going to go green and then i think it's just a width of 1 or 2. let's just double check if it tells us here not sure exactly how they got that um their border is actually a zero i don't know what they did maybe it's a background color but i think we're essentially going to get the same thing here so it's probably a width of two instead of just one welcome from serbia amazing there's lots of places in this chat that i would love to go uh i just obviously can't we none of us can do that right now realistically especially us americans nobody wants us all right so what margin do we have underneath this div oh gosh i can't click it so the separator here line height it's got a line height of 29 pixels and then let's see i wish there was a way that you could see you know like an xd and figma where you can hover over something and it shows you the spacing between those elements that would be really nice if there was a way to do that maybe there is that i'm just not familiar with but let's see here line height is 29 pixels maybe that's all it is maybe it's just the line height on that div but i don't know that that's actually going to work so i can't change the line height here so not sure exactly how that's going to work let's see now let's just go margin so what did we use as margin underneath this to be really consistent here we said it was 25 pixels so that's exactly what i'm going to do i'm going to go 25 pixels underneath that i really like all these discussions in chat like as far as seo perspective is there no disadvantage in using text links instead of the menu from seo perspective quite honestly not that i'm aware of the premise log website basically is built exactly like this it's just using text links and that site ranks for a number of keywords so i really don't think that it's that big of a deal as long as it's structured with you know the proper semantics like your heading tags and that kind of stuff i don't think it's that big of a deal the main consideration i think i would make is regarding accessibility that to me is probably just as important and yeah divide us makes a good point here so we've set this div our header container as you can see here we set it to the tag of header and that's essentially all i really worry about for the most part i think it's perfectly fine so back over here to our left div what we're going to do is close this out and we have this heading right here so small farms big ideas is h1 font size of four ram font weight of 600. so let's add in a heading element here we're going to add a class of ps head or heading h1 and then our text color is going to be white font weight of 600. uh the font size was oh let's see typography was 4 ram i believe is that what it was for ram yeah it seems huge but sure enough it is and then the margin bottom was 20 pixels which oh gosh i see what's happening now i'm trying to select the text with that open and it opens the window like 30 thousand times so pop that in there small farms big ideas there we go andre says not sure if you're aware of it you can set the separator's min height to zero to make it look correct even in the builder oh interesting okay so min height is zero right is that what you said what about if i set the zero height huh min height or is it max height oh i don't know not sure ryzen says i just want a solid sticky header instead of disappearing and reappearing.stickyheader yeah i think i think you can do it that way with just some css francesco yep agreed hoverify is really really cool i've said it a bunch of times already but there is a link in the description below if you guys want to see it so now we have this header to me i don't know about you guys but that just feels super big um let's see let's go back here it says font size for rim is that the line height the line height is one i bet that's what it is so we're gonna go line height one yeah that's definitely what it is okay cool elijah says you're fighting the default 80 pixel min height for divs and the builder yeah for sure i mean that to me isn't really an issue because like you know if we go save real quick and take a look on the front end it's it doesn't actually have that height so it's just something that i personally have gotten used to and honestly it's not really that big of a deal to me because it makes it easier to select because like if it was you know two pixels high it'd be kind of difficult to select that without going into the structure panel so i kind of appreciate that it's there uh all right so next up small farms big ideas wrong page here so that's good on the left hand side so now we have this p block over here this paragraph block which is just white notice sarah oh actually not quite white it's a little bit off-white so that is good that we noticed that so now what i'm going to do is pop in a text element here we're going to change the tag to p text color we're going to go to that off-white color and let's just add this as off-white text something like that and then oh gosh i need to get rid of that tab it's confusing me so we can move this around so we have line height looks like the default nodo serif margin bottom one and that looks good so margin bottom is one em and actually we probably should change some of this stuff to a class here so let's go ahead and do that uh ryzen says there should be a toggle for it the default 80 pixels yeah i guess that might be something worth considering andre yes it is the real elijah it's the big man himself pretty exciting to have him especially because i'm sure he's got all kinds of stuff going on being busy with the the release candidate one so all right so we're gonna go ps uh we'll go text light is our class here and then i'm just gonna copy this perhaps i should use some more styled um some more stacked classes but for now i'm not really too worried about it change our tag back to p alrighty so let's go ahead and just copy this stuff i need to pause this i'm going to copy this text here so we kind of get our layout and then we have a button here that we're probably going to end up using quite a bit so we need to go ahead and set this up this one's kind of cool so it keeps that green border on hover and it loses the background color so kind of a neat transition effect there so let's go ahead and pop in you can use a button element but i typically like to use well actually you're going to have to use a link wrapper because in this case it has an icon there so on this link wrapper we're going to go ahead and stick a class here so ps button and then let's say like you know what's the word transition not transition oh inverse is the word i'm looking for so ps button inverse so our background color by default is going to be green the typography color is going to be white i believe is it full white hopefully you guys don't hear those sirens that's the downfall of living where i live is there's like a highway right down the street and there's ambulances and fire trucks and stuff that are driving around all the time border radius of three the color is white directly so that's good uh we're gonna go border radius of three what else we got here so poppins font size is 15 letter spacing is 0.5 so 15 letter spacing 0.5 and let's add in a text element here this one i think said learn more if i'm not mistaken hopefully i'm not wrong here yep and then the padding is that coming on the text element or the actual button itself let's see here so padding yeah so it's on the button itself so it's 12 top and bottom 24 left and right so go back here we need to get back to our link wrapper directly so 12 12 24 24 like that perfect um let's see got a couple of things going on here in chat so benny says still can't add icons to buttons that's right yeah exactly why i don't use the button container typically you can make your own button with the div yeah it just saves a simple step to convert it to a link use a link wrapper instead of converting it all right uh let's see what's up next here so liam says elijah would be fab if the oxygen code editor would have the auto complete function when adding in classes on a custom style sheet now that would be legit also if the code block the code editors had like you know the standard kind of like fill in the code for you as you start to type something like margin or whatever all right next up on our text here let's find out how much spacing there is to the right of that so margin zero no maybe the button itself has a width and it's just set to push that away from each other so let's go ahead and just do that so let's set the button to 164 pixels i wish the numbers were rounded so width is 164 that's actually not going to work that's too small we're going to add in an icon here this icon we're going to shrink significantly to like 25 and i think it's going to be chevron write that we want something like that it's actually an arrow a solid arrow so is it called arrow let's see there's a bunch of arrows here but there's not the exact same one maybe in linear icons arrow chevron nope oh well we're just going to use an arrow that's close enough i'm not terribly concerned about that and then we're going to change our link wrapper here to horizontal middle align icon's still too big let's go 15 and then let's just take our text here on the id i'm going to go 15 pixels of margin on the right that'll work perfectly fine let's see christopher says hi i'm migrating a site to kinsta and they have prohibited the all-in-one migration plug-in is there an alternative to migrate oxygen with another plug-in that does the same i think cloudways has one that's that's not specific to cloud ways i forget what it's called it's like a rebranded version of buddy migrate or something like that there's also another one called wp clone i've used in the past which worked mostly reliably but hopefully somebody else there you go ryzen says use wp vivid there's a there's a good suggestion for you so our button is pretty much perfect except now we need to do the hover state so if we go back over here and look what happens so the the icon and the typography don't change the background just changes so we need to add the border radius so we're going to go back to our link wrapper here border we're going to set the color here to a width of 1 solid and then our border radius we already did so now on hover we're going to switch to background and we're just going to set this to white and then make it fully transparent and that should essentially be what we're after it looks like the border is a little bit thicker so if we look at this that's i guess exactly what we're after except maybe the border is not thicker maybe it's just one box shadow border radius [Music] yep looks like we're fine uh we just need to add that transition so what did they use here so the transition is 0.3 ease so i'm just going to add a class here we already used a transition earlier so this is something i'm trying to get into the habit of which i think i mentioned in a different video so i'm just going to add a class called ps transition and on this i'm just going to go to effects transition 0.3 ease in out i think the other one we use linear so actually let's just use linear because that was on the other button up there so this will just keep it really consistent so now we have that same effect on our button here i think was the font different yeah it's poppins so we just need to change this text element to pop-ins instead of nodo serif and then was the font weight thicker looks like it is it's probably like 600 because that's what we've been using so perfect there is our button awesome all righty so what else do we have as far as alignment goes here so is this stuff that looks like it's top aligned and this one looks like it's bottom aligned which is interesting so if we change this div i guess the heights aren't quite where they need to be so what is the height of these divs here so 293 i'm just going to round that up to 300 i wish the sizes were a bit more consistent so we'll go 300 that doesn't do anything so 300 doesn't do oh wait that's the wrong div so 300 doesn't actually do anything why not interesting i don't really know um trying to figure out what they did here to achieve that layout oh there's padding 64 and 80. so on this div on the right side will go 64 and then is it 80 that seems weird so we'll set this to top wait why is that pushing to the left on top i guess we can just go to this left div here and go margin bottom auto and then can we set this one here to bottom align well no because we stuck some padding there so what if i just take that out 80 let's switch this back to the page title container and i'm going to stick that 80 pixels of padding down there that won't work either what about if i stick 80 pixels of padding right here no of course not because i have a height set there we go all right got it so that's not quite exactly the same thing but it's good enough for me oh what if i take this div and go margin top auto there we go there we go there's a million ways to achieve the same thing oh yeah you're right you're right it is i was reading that wrong this is top right bottom left yeah i was thinking the all the other ones have been listed just you know top and then right basically so or you know top bottom left right kind of confusing but i think we've finally gotten what we're after here so this looks relatively consistent now what i'm going to do here is add in another div which is going to contain this bottom um you know section here i need to pause this because again that kind of like pop-up window you know showing up all the time is a little bit annoying and so we're going to minimize our links container we're going to clean up kind of our structure panel let's go add in another div here we don't want it inside that so we're going to go down oh let's see what did i do [Music] uh let's see oh i need to set this to vertical and then oh wait no no no no i'm making a mistake here so i don't want that to be vertical i don't want the div right here i want it outside of that pull this down a bit watching me fumble through the structure panel there we go i took my separator div out geez i'm having a hard time over here y'all there we go all right we'll work on some of this alignment and stuff in just a little bit so i'm going to delete the minimum height off of actually no i'm not i'm going to change this to 100 and just make it a bit bigger so we have some breathing space here so we're going to go ps what was the class here so div pw to get our width set up properly and then it looks like we have a really faint border here so let's try to figure out what border that is you guys are uh so antonio says the he would like to know the name of the extension this is hoverify so there's a link in the description if you want to check that out there's a lot of other really cool stuff and i'm releasing a video on this tomorrow so you can definitely check that out now but there's stuff coming tomorrow all right so what was i doing here so border the margin top on that div is interesting at 16 where's our border i want to go i want that it's the same thing i guess yeah i don't know all right so before i switch back over what was our padding here so it's 25 top and bottom zero left and right so now we're going to go to this div instead of the class 25 and then we have some social icons so in this case i'm just going to use the built-in social icons let's add some space between them 30 uh let's just change this to i think let's see icon color we'll just go white and then our icon size we're going to shrink way way way down i think there's five or four social icons here so let's just add in another one we'll just go linkedin youtube make it look kind of like a real website with a bunch of social icons so that is perfectly fine and then the other thing is their address so to get this layout we're just going to use a link wrapper because i think i would on a real website either link that to google or i would link that to the contact page something like that so i'm going to use a link wrapper here we're going to click in this div i'm going to type in link wrapper inside of this link wrapper i'm going to add in an icon the color is our global green let's just search for like map i think it is matte pin yep and then icon size will be 25 perhaps even smaller which we can change in just a little bit 15 pixels of margin on the right and then add in a text element this is just an address let's see if i can copy it so we're going to go pop that in here and then we don't need the the space in front of that our link wrapper what is our hover styles here so we have that off-white into the full white so is that the one we used earlier e2 ebe2 let's check our global color real quick because i don't actually remember yeah that is so we already set that as a global color thankfully so that makes it nice and easy link wrapper typography we're going to go to color off-white and then on our hover state we're going to go to full white make it nice and easy next up we can go to our layout here and just set that to horizontal and oh oh it changed on the hover once again i did that on the wrong state didn't mean to do that so we're gonna go back to original and set that to horizontal perfect okay so the transition let's go ahead and add that class that we just created earlier so ps hyphen transition is what we called it so now we're going to have a faint hover color adjustment and then just for the sake of example let's link this to our contact page now i'm going to go back to our header container here we set this to space around but we do have some odd spacing here let's see what we can do to remedy that so we set that one to be absolute zero top what about if we set our footer container here to be let's see layout absolute bottom zero pixels like that that actually looks reasonably good but our heading or excuse me our whole header section here is not 100 vh it's something like you know 75 or 80. i don't actually know exactly how tall it is let's see since it's 800 pixels tall so perhaps let's go a height of 800 that works perfect so our header has taken us a little bit of time but there is some you know set up stuff we had to do now there is more to this header so let's pause hoverify and let's switch over here to our farm now if we look at this it looks relatively similar except this heading changes gosh i need to close this out so the the heading changes to the page title which is pretty cool we still have the description but obviously we lose that whole footer div with the social icons and we also lose the button and we also lose the little subheading so we can just do this pretty easily with conditions so what i'm going to do here is basically duplicate this heading i'm going to insert dynamic data here and we're going to go page title we're going to do a bunch of the same things with conditions here so we're going to go to set condition and then we're going to go to dynamic data or actually no not diamond dynamic data i'm going to go to post title does not equal home i believe is our page title there and then this one we're gonna go to set condition uh let's see page title is equal to home and so now we still have some more condition stuff to do which i'll show you in a second but if we go take a look uh actually let's see we're not on the home page need to go adjust our permalinks real quick so let's go do that settings permalinks post name save and then our reading we need to set our homepage to home that's done perfect we're going to go to pages and home now so you saw in the back end of oxygen here we have two headings and then now on the front end on the home page we just get that first heading then if we switch over to our farm then of course we're left with only that which is pretty pretty awesome uh let's see i didn't link those links so i need to fix that here so this one is home and then why on that other page did let's see i need to switch to home on our preview real quick so why did that div with our social icons disappear uh oh it's down here that's why what did i do wrong there why is it popping up down off the page because that's height 800 pixels and this is layout absolute bottom do i need to change this div to relative is that what i have to do let's see if i save that now yeah there we go okay so that was the fix i had to set our header container like this main div for the entire site i had to set that to relative so that then a bunch of divs open here so then our footer div that absolute zero is you know relative to the container it's in so now what i want to do actually sorry i've been meaning to show you this so of course the the headline here on any other page except home is just going to have the page title but we need to get rid of this we need to get rid of the button and this entire div so essentially we're just going to do the exact same thing we did over here so what we're going to do is actually just copy conditions and this is really neat with hydrogen pack because of the fact that you can just copy the conditions you don't actually have to go redo them again so i'm going to copy the condition and let's see how do i paste conditions do i go set paste did that work oh yeah sure enough all i had to do was just paste it so then what i'm going to do is just paste this again and then on this button here i don't want it on the class i want it on this id so i'm just going to paste that and now let's save go take a look at contact us oh no what did i do why is it not working oh no i did uh i did the wrong i did the wrong condition so let's step back a couple of steps here how many did i do was it three let's see yeah okay so i did the wrong condition so page title does not equal home uh page title equals home so i just did the inverse here wrong thing but uh just a mistake i i don't know about you guys but i fumble sometimes when i'm copying those conditions all right so then we're just gonna paste this in we i copied that proper condition so we'll paste that same thing here we need to paste and then let's see so page title is equal to home uh we're going to keep this one as not home i think we're good now i just confused myself so home page looks good now if we switch over to our farm this should be pretty much what we want except i think in the real site the alignment is a little bit different yeah it's equal it's equal on those inner pages so what do we need to do here where did i add that spacing on the left side it was on this div so that's not going to work let's change this from 80 pixels on the div to 80 pixels on this heading so now it's going to look a little bit wonky in the back end but if we go back over here uh no what do we need to do middle align this div let's use hoverify real quick so we can see that one's not oh i need to set the height probably on the div to 100 width excuse me 100 height probably i'm not sure that's actually going to work though because we set this other one to bottom if you guys have suggestions i definitely welcome them in this case not that i don't typically what if um we should be a little bit closer yep okay okay we're good we're good cool so that kind of works i don't think that's exactly the uh the right height here but that will do now the other thing is that in the real site the header shrinks quite a bit on the inner pages so let's think about how we can do this now we set this uh main kind of header container here to a height of 800 pixels but of course that's not going to work because on those inner pages we need it to be much smaller so let's think here i think there was a i think there was a percentage uh margin on the top of this div the footer like social thing here so let's go percentage i think it was like 16 that doesn't work what if we set our page title container to a minimum height of what is it uh go back over here to home inspect so this is it says it's 300 pixels high but i feel like it's a heck of a lot more than that trying to think here oh there's another div i need to use this function here so this little grid line feature shows you all of the divs and containers here so perhaps we need to set another div that wraps the container and this footer area and how tall is that going to be oh i lost hoverify go back here so that one is 600 pixels high all right that's what we're going to do so our page title container and our footer div here we're going to wrap with another one so i believe uh you'll just use the oxygen one here so wrap with div stick that in oh there we go and then we're going to set this one to let's say minimum height i think 600 pixels still not quite as tall as we want what if we set some padding up above that how much would we need again i wish there was a way for us to figure out like a measurement tool like how far is that so i don't know let's just go ahead and put some margin here like can we go viewport height on margin yeah there we go we're on to something here so let's save our farm no i'm messing it up let's see hmm hopefully you guys follow what i'm trying to do here so i set this minimum height to 600 oh wait actually i don't think i want minimum height huh it's a little tricky little tricky not gonna lie so the 20vh is good because that pushes our content away what can i do here did i stick some margin underneath that is that what i did here no let's see trying to think think think think jonathan minimum height 600 and then what if we take what if we take our footer area here gg g2 and let's go margin top uh vh is not going to work let's just use pixels so like 200 nope that's not going to work because we set it to absolute bottom i guess let's change that so we're going to take off the absolute here we're going to go 200 maybe nope that's too much 150 125 okay all right all right i think we're on to something so if we save this our farm so it's definitely closer got a couple of good suggestions here in chat code block with condition to overwrite header container height when it's on other than home that's not a bad idea yep another suggestion is by the way the height of the header is lower on the inner pages now we have some spacing issues here andre asked what are you trying to achieve here so basically on the example site when you're on the home page it looks like this and on the inner pages it shrinks quite a bit so i'm just trying to think about the best way to actually shrink this container's height i'm getting pretty close uh really now all i need to do is remove this spacing i think and will be good but i stuck the spacing on the top part of that div which is not going to work so maybe the best thing to do here would be i do like the code block idea i'm trying to do this without reinventing the wheel to some degree which obviously is easier said than done um so just for the sake of example i'm going to remove this wait i set the margin i set the margin to auto what if we take that off and this was what 64 i believe i'm gonna take that off and see are we closer now or did i make it worse um i am kind of going backwards a little bit here but i'm trying to figure this out so home so the home is good now we need some margin underneath that on the inner pages so i'm gonna i'm gonna be a little hacky here and we're going to stick another div inside of here we're just going to use basically like an empty div for spacing which i don't know if that's a good idea but i'm going to do it so we're going to go height of 125 width of 100 and then we're going to set this to pop up if the post title does not equal home maybe this is going to work see there's a million ways to do this stuff in oxygen that's what i love about it a million ways to do the same thing now is the spacing correct i don't know but it works it works i hope you guys aren't screaming at me about that solution but i'm pretty proud of myself so it's funny because you look at this stuff like these headers and you're like man i you know that looks cool it shouldn't be too hard to achieve and then here we are an hour and 13 minutes into the stream and we just now completed the header nonetheless really happy with this uh so let's go ahead and kind of move on a little bit i want to keep things rolling so what we're going to do now we'll stick in our inner content element and we're going to go design the footer here so this will be good this will be a lot a lot quicker i think devitis says code block would be easiest at this point otherwise you need to plan where you apply your paddings margins and height to get where you want you're totally right there yeah i don't know it works i'm happy with that so back in our template here we have our header container done so now what i'm going to do is stick in an inner content element size is going to be a minimum height of i always do like 85 vh so that our inner content isn't floating in the middle of the page excuse me our footer is not floating if we don't have a lot of content once again we're going to go with a div here and we're going to name this uh we'll just call this one footer and then again we're going to change the tag here this time we're going to use footer instead of header and we've got a couple things going on here so one thing that i noticed on our example site is that every page has this subscribe to get special offer section so we can stick that in our footer container here so that way we don't have to add it to every page just to show you if we go to our farm there's that same thing so we're just going to use this here so let's use hoverify to figure out how tall the section is it's 372 pixels perhaps that's um perhaps that's like a you know standard unit that they're using but it just seems weird so i'm going to call it 375. so inside this div let's use 100 width we're going to set this to 375. we're gonna use our background of that that trough full of veggies which is pretty nice i'm definitely down with that top fifty percent to set it to the middle and then we have a background color that's pretty dark here oh wrong tab background color that's pretty dark here what are they using it says a background color of that but that's obviously not it because it's transparent to some degree so i'm just going to take that same color here and then background actually it's not background once again i just said that background color overlay is it 65 roughly 65 something like that that works for me and then i need to move this tab over here because i keep clicking to try to try to get to that tab we have our separator so we can just stick in a div here we're going to go div and we're just going to use our class here that we used earlier for ps what was it sep i think i called it step short yep so we're going to set this to center middle align like that next to oh my lord look at me switching to the other tab so we have an h2 here that's white with a font size of 2.5 rim so we're going to add in a header let's go ps heading h2 perhaps i should have set up a base class of ps heading and then change the sizing on h2 but i'm not going to do that text color 2.5 was it em or rem i can't remember 2.5 rem and then a font weight of 600 and font weight of 600 tag of h2 and then the line height here was one now that says subscribe to get special offer subscribe to get special offers i'm going to add an s there and then the margin underneath has been typically around 15 for most of this stuff so let's see real quick it is i don't actually see a margin or a padding so we're going to use our own 15 is good for me so let's stick in a text element here we're going to go to p set this to our off white not our full white and then let's just copy this text that works now of course as you can see this is all on one long line but in our example it's not so if we look over here we can figure out how wide this is and it is 800 pixels wide so what you can do is just on your text block go to a max width of 800 and it will just make the line breaks for you which is pretty handy so that looks pretty good now we're ready to go ahead and add our next div here so this is going to be our footer area and this is using what as the background color i can't tell if it's this i guess it's the darker color here so we'll use this we're going to add in another div and we don't want that div inside of this other one we're going to stick it down below background color here and set this to a width of 100. now is this stuff contained to our standard 1200 pixels wide let's take a look and see if i can figure out how to select the whole container i wish there was a way to like toggle up you know like in the dom hmm i guess it is 1200 it's pretty consistent with everything else and all the other ones have been 1200 so inside of this div i'm gonna add in another one and we're going to use this ps div pw class that we've been using now inside of that we have basically a four wide column or excuse me three actually so should we use the columns element or should we use the default divs that we're always after that i always use that's a good question that is the question isn't it let's see here i'm gonna i'm gonna build it manually all right so i'm going to expand this here we have this div i'm going to rename this a little bit so we're going to call this to keep things consistent here we're going to call this cta that's pretty easy we're going to call this uh footer content and then we'll call this our three columns oh yeah yeah yeah grid what am i thinking you're right i'm glad i waited to start doing that thank you for the suggestion very very good idea so uh yeah let's go divs so we're gonna go div and then uh let's see so this is gonna be a little bit of an experiment here let's go let's call this like ps footer divs we're gonna add a class so any styling we do will apply to all of them let's duplicate this three times grid we're gonna go column count of three that makes it so easy so easy i love it there's also something that i noticed um see you later thanks for joining um in the 3.7 rc1 they added the horizontal item alignment here which is beautiful really really cool all right now what we're going to do is inside of this stuff we have our logo and a couple of you know icon blocks basically so inside of this div we're going to go to image we're going to toss in our image or excuse me our logo and how tall was this so i'm using alt i to toggle on hoverify thanks to that suggestion from earlier so that one's 160 by 40. it actually even tells you i don't know if you guys noticed that it tells you the size of that image which is pretty amazing so it's telling us our svg there is 6.6 kbs that's pretty sweet i love it all right so the width here is 160 and then what's our margin underneath that or how are they using the spacing here so i guess one thing you could do would be set a specific height on the overall div and then set it to space out so it's 225 i'm gonna try that just to see so on our divs here set it to min height of 225 something like that taylor thanks dude i have had a good bit of practice so it's deceiving for sure stoked to see you here all right so uh margin let's go 15 roughly and then we're going to add in a link wrapper here this link wrapper let's call this uh footer i don't know footer content ps footer what do they call it over here let's steal their class element icon list all right there we go ps footer footer element element list there we go perfect that works now set this to 100 width i'm going to set it to horizontal we're going to go to typography and change it to what what is that this kind of nice i like that so we're going to go to typography set it to that new color let's just call this olive i don't know what color that actually is but it looks cool icon we're going to go 25 and then what icon are they using so that's pretty self-explanatory actually so they have an address a phone number and the mail so we'll change this one to or actually it's map not address so map and then i should probably be setting this as a class so i'm going to do that i'm going to go back here to this div and take this same class stick it on this icon except i'm going to add icon on the end here and then let's copy our styles from the id to the class and then delete the styles from the id of the element directly perfect so uh it's not inheriting our color but we can take a look at that in just a moment what i want to do is stick that is it a different green oh yeah good call jump here yep so it's our global green for the icons i'm glad i set a class there so green there and then we have our text and then i'm just going to go back over here and copy this address because it's a believable address not something made up and then we also have a different font size here so how small is this those are let's see i don't see i don't see the font size so maybe it's being inherited from somewhere else but it's so small it looks like it's i don't know maybe 14 pixels that works i'm sticking with that all righty so 14 pixels let's go left align and we'll stick that in middle on our link wrapper here i'm going to add it's probably not 15 pixels of margin quite but i'm going to do that we're going to duplicate this twice change this one to a phone phone and then once again i'm just going to steal the phone number here even though that's not a us phone number not a big deal info example.com oh there we go and then we're going to change this icon to i think it's env for envelope yeah so envelope there we go and then what else do we have so we have a link here for get a direction that doesn't quite make sense so we'll swap that out here in just a moment now i'm going to minimize this stuff so you guys can kind of see what i'm going to do here i'm going to click in my div and then i'm going to add a text link we're going to change this to get directions and then let's take a look at the styling here because it does look a little bit different so it looks like it's poppins white with a bolder font here so it's popping 0.5 letter spacing white and then the border is our green okay cool that's going to be pretty straightforward so we'll call this like ps you know link alt or something like that so text color is white the font not target our font family is poppins uh font weight is 600 the letter spacing was 0.5 pixels and then we had a few pixels of padding so let's go like eight down below and then we're gonna set a border bottom of our primary green probably roughly two pixels like that and yeah that's looking pretty good i am happy with that so now we just need to add some spacing in between the top and bottom of this section so i'm not sure exactly what it is but let's just go like 75 pixels top and bottom on let's see our three column container here so we're going to go back to our div let's go 75 top and bottom so that gives us some nice breathing room i'm pretty happy with that hopefully you guys are as well now back over here uh similar setup here so we have a heading our separator some text and some social icons now we have our h3 so very similar we're going to switch over here and actually did i add any spacing in these divs i did not i guess that's not a big deal so what we're going to do toss in a heading and i think what i'm going to do this time even though it's not quite consistent is i'm going to go ps heading h2 because it's pretty much exactly what i want except i'm going to add another class here to h3 is this going to work no no it's not going to work because you have two classes with two different tags yeah i should have i should have set up a base class of ps hyphen heading and then added the the tag you know as an additional class so what i'll do actually let me put that h3 back on because what i'm going to do is copy the styles from this one to that one delete h2 and then on h3 here i'm going to switch it it's already h3 and then it looks like the font size is smaller it is 1.5 ram instead of 2.5 we're going to set that to left align in just a moment but that made it nice and easy for us to get that heading set up and looks pretty similar to what we're after so does that already have margin underneath it yes it does so now we can just toss in another div and we're going to go ps hyphen separator then next up we have just a basic text element so i'm going to steal the text out of this yeah i can do that in just a minute i'm going to duplicate the middle one over to the right here in just a sec for sure so text we're going to change this to a tag of p and i don't want it inside of that div here so take that text out of this div stick the separator one back on top and then what color is that it's that off greenish color or olive color and then we're going to set this one to vertical actually no we're going to set this div here to vertical and left align and actually we need to change the heading as well so it says get in touch i'm going to do that get in touch perfect and then last what we're going to do or lastly in this div here let's add some margin underneath that and then our social icons one more time this time they are a slightly different setup here so let's inspect this and figure out what colors we got going on so our background color is that right there so what we're going to do is go down here to background color i think we need to change it to circle and then is our icon color the full green yeah that's what it is perfect and then we need to go to icon size let's make this much smaller like 35 pixels and then bump this up a bit space between and then like before i'm going to add in a few more socials just to make it look a little bit believable so perfect now we have that div here looking nice and good so what i'm going to do is use hydrogen copy and paste i'm going to control c control v on my keyboard and i'm going to stick this outside of there delete this div so we don't have to reinvent the wheel so much on this last part here so we just have a couple of links really the only thing we need to change this to is the heading to say quick links quick links however if i sure makes it easier to copy the website got mine this week still need to take it for a spin yeah i really only started using this in the last couple of days um and i'm i'm happy with it so far it's pretty cool so over here we're going to delete the social icons and then i think what i'm going to do to set up that other layout here is well actually this is something i haven't considered before gosh i need to get rid of this sorry guys i think what i'm going to do is add one more div inside of here and use the grid feature to have it set up the layout for me so let's delete this text i'm going to try this div we're going to set the layout to grid and we're gonna go column count of two uh do we need to set the width here of this div to one hundred percent is that going to fix that over yeah there we go fixes that overlap so now did i add a class to these text elements no i did not so what i'm thinking is let's see these are pretty small but it's essentially this text right here so i think i'm just going to steal this text element yeah i'm gonna i'm gonna take this text element and just apply that class here so footer element link class so we're going to go text link and then is this going to work yeah perfect that's exactly what i wanted so home and then what we're going to do is how many do we have so it's 10 basically who three four five six seven eight nine ten so we don't need that much margin underneath them so let's go i probably should have done this before i duplicated it 10 times but if we go element list i'm going to add another class here of no margin and then let's set the margin on the bottom to five nope didn't work padding to five nope didn't work what did i do wrong hmm is it something to do with grid oh it was the it's the gap of no let's see is it something to do with grid here is that why there's so much horizontal spacing match height of tallest child gap five oh yeah yeah yeah there we go there we go what if i set it to zero yeah that's good enough i think that will work so next up let's just go ahead and set the names here so our farm our produce testimonials in contact our farm our produce testimonial and contact this is pretty cool i haven't actually used the grid feature to do something like this but i would have built this with divs before and i'm typing grid as i'm typing that out the red grid yep perfect thank you i haven't used grid to make a layout like this before like i would have created two different divs here and set them to be you know like fifty percent of its container with but this is just a heck of a lot easier so next up we have bundles consulting subscription and learn more bundles uh consulting subscription and then learn more what was the other one i'm forgetting one community oh just learn not learn more and then community try rogue gap yep is that is that what you were talking about uh yeah it was yeah road gap i set it to zero and that fixed it so that's perfect all righty so let's minimize all this stuff here we got a bunch of stuff going on in our structure panel so in our three column setup here do we have some margin beneath that let's go 25 pixels and we're going to add in another div i don't want it inside of my three column layout though so i need to minimize all this stuff and i need to take this div out this one is going to be our sub footer so i'm going to rename this sub footer like that um we're going to set this one's width to 100 percent inside of that i'm going to add in one more div so that we can use our restricted to page width class so ps div pw and now let's go see what's actually in that so there's a copyright tag and a powered by but what we can do real quick is go to our sub footer we're going to set a border on the top of what color is that let's see probably just that off gray i'm going to use this so color top one solid on the top and then all i'm going to do here is oh i set the grid layout on that class there whoopsie hopefully i didn't screw up our header yeah it did uh-oh i did not mean to do that we're gonna have to come fix our header that was a mistake whoopsie that causes a few headaches i believe here so that is not ideal to say the least we need to switch this back to this go to grid column count is three oh wait no i'm in the wrong i'm in the wrong element here so three column grid column count is three there we go crisis mostly averted for the moment but now i just wanted to come down here we're going to go to middle align actually sorry we're going to go to horizontal then middle align and then we're going to go space between we're going to add two text links this one is actually not even a link so i'm going to pop in a regular text element here stick that right there move it over here to the left side in our structure panel and then our text link probably would be you know i'm going to change this to powered by premise log and then what is our color on this stuff here so it's that olive green so we'll just change it on the id of these elements directly so olive and then on our text link here we're going to go to olive as well now our spacing what is our spacing this div is a height of 77 pixels so i'm just going to set that subfooter to a height of 80. we're going to go 80 like that and then let's set our subfooter to middle and there we go so we are definitely coming along let's go take a look on the front end real quick and see how hard we messed up our header layout looks like it's actually not that bad but yeah so now we have our call to action section here we have a functional footer and of course we have this sub footer i think this border is a little bit lighter than it is in their example but it's good enough for me so i am really happy with how this is coming along just for the sake of example let's switch over to our home page and it still looks good so our crisis for a second there of messing up the grid is actually not that big of a problem so we are at let's see a little over an hour and a half i'm going to take a quick like less than five minute break and i will be right back so stick around in chat and i will be back in just a second thank you guys so much for uh being here this whole time we're gonna keep going don't worry don't leave [Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] so [Music] [Music] [Music] [Music] [Music] foreign [Music] boom [Music] [Music] [Music] [Music] all righty and we're back hopefully that was less than five minutes i think it was i told you and i want to be consistent i want to be truthful here but first of all uh before we get rolling too soon i just wanted to say i do anticipate completing the whole homepage today and then if you guys are interested depending on where we're at time wise we can always set up you know more of this and complete these other pages as well i definitely am going to knock out the homepage before we end today just depending on time and people's interest levels may get you know a little bit tedious later on but i want to say thank you all for spending all this time here and we're going to keep going also to those of you guys that have donated via the super chat function uh just wanna again say thank you so much it is a super um just overwhelming that you guys are even willing to do that i just genuinely appreciate it so much so really appreciate those super chats absolutely amazing stuff now what we're going to do is go ahead and take a look at our demo site we're going to turn off this little alt eye and basically we're going to switch over to the homepage let's take a look here so we have in our produce section pretty straightforward layout got a couple cool things here so we're going to use the border radius on these images to make them circles kind of a cool layout setup going on here we got that same kind of sub heading we have our class here or you know our separator this is going to be pretty interesting so if we take a look at hoverify real quick what we can see is that there's an image on top of another image and then there's this background back there which is kind of neat so that one will be cool we'll definitely be able to set that up got some icons going on and got a video testimonial section we might create a custom post type here because there is testimonials on another page as well so it's probably going to be best for us to set up a custom post type so i think we'll do that and then that brings us down to the end of the home page so let's go ahead and get rolling on this i'm going to bring us back here and then on our target site we can go ahead and exit our template we'll probably need to revisit this later for mobile device you know optimization but that's typically something i do at the very end i don't know about you guys so now what we're going to do is go to our home page here first of all because this was an elementor site is there anything in our content editor there's not so we'll go ahead and just edit this with oxygen directly hopefully you guys are having a good friday so far all is well for me it's still early in the day gonna have a good day i have uh a bunch of friends watching which is amazing my brothers and it's just crazy so thank you guys for joining again really appreciate it alrighty so now we're going to go ahead and get started adding this content here so let's go to add and then on our elementor preview here what is this background color i don't think we've used this yet now in hoverify you also do have the ability to look at the entire color palette of the site if you want so you could go ahead and copy every single one of these colors there's just a massive amount of them and then the other thing you do have is also the color eyedropper so if you pick a color we can look at it right here it keeps the rgb and the hex color there for you so then we can just copy that and let's go back over here to our section so background color let's just set this as like i'm gonna call this cream dude eric what's up so stoked to have you here really appreciate it the support is just like overwhelming so i appreciate you guys hanging out all day all right so next up uh what we probably should do now that we're using sections is set our site width because i'm imagining this stuff is all going to be the page width here of 1200 actually these are 1140. that's interesting so it's slightly less wide than all of the content up there i wonder why that would be or actually maybe the header the header is wider okay so the header is 1200 and everything else is 1140. now just to make this easy i'm going to go to settings global styles let's go to width and our page width is actually 11 20. so it's really really close go to 1140. so there we go perfect all right so we have an h2 here which is actually dark we have a text element we have our inverted button from earlier which actually doesn't work quite right but we'll fix that and then we have our images with some basic headlines so let's go ahead and we're going to center this stuff pop in a headline let's use our h2 class and then what i'm going to do is basically just take this same thing and we're going to make it a stacked class here so h2 and we're just going to call this hyphen dark so add a new class here and then what color are they actually using is that full black i'm not exactly sure no not quite we're just going to call this like dark so that'll be our global color here oh no worries we're glad to have you here and yes so for those of you guys that are curious the the hoverify uh extension i'm using is in the description below that is an affiliate link so it doesn't increase your price but i do get a little kickback so if you guys do buy it really really appreciate that all right so our produce and then we should have our margin carried over automatically so let's take a look at our text element here that is looks like a slightly different form of our color from before but we should just be able to toss in our text i'm going to change the tag here to p oh i didn't copy i didn't copy the the actual text itself so i need to paste that in here uh our max width let's just go ahead and set to 800 pixels because that's probably what it is that's what it was earlier martin no worries on just now joining happy to have you thanks for coming uh so what is this color is it slightly different here it looks like it is just for the sake of example yeah it's ever so slightly off but i don't think we already have that color added do we nope let's just go ahead and set this to our like body text color because i imagine we're going to be using that quite a bit so i'll set that as our global color there and then we have our inverted button so remember earlier we built that i believe it's in the header oh no it's it's right here so we're basically just going to duplicate this button that we built earlier and there's a slight difference so view all produce now what did we actually call that um i'm gonna have to add those classes again i think it was ps button inverse yeah there it is all right so text um let's see our produce produce if i can type was it all capitalized uh no it was like capital letters on the beginning so view our produce like that and then probably need to add some margin here 15 and then we're going to go icon and we're going to use the arrow right like before because there's not an exact replica of the icon that was used in that button so icon size of 25 let's see there's not i forget what arrow i used i don't see it uh maybe if i type right oh there it is yep cool and then i think it was 15 pixels so yeah perfect there we go so next up underneath our button i'm going to use grid again so we can take advantage of the grid sylvia thank you so much for the super chat uh i just i it's just like dumbfounding the the support you guys shared especially today in general it's overwhelming but even even today so i really really appreciate that all right so what we're going to do here is utilize grid so typically the way that i would have done this in the past i mean you could easily use the built-in columns element to get a layout like this but the columns has a little weird you know like spacing issues and stuff so we're going to use grid what i'm going to do is stick a div inside of this i'm going to set this div's width to 100 we're going to go to grid and set this to a column count of 3. inside of this div let's stick in another one we're going to pop in an image this image is our vegetable so those tomatoes right here and this image you can see is 400 by 400 pixels so it's a it's a perfect square which is going to allow us to go to border radius and we can set this to percent and go 100 percent and that makes the image a circle which is cool so you can do this anytime you want but unless the image is a perfect square then it's not going to pop up like that another one peter jeez thank you guys oh my gosh i love it thank you so much really really amazing uh sylvia thank you that's so kind of you you didn't have to do that but i certainly appreciate it that's really really generous so those images on the actual live site here are much smaller so they're 200 by 200 so we can easily shrink that we can just go here to 200 and then we're going to set this div to center center the community is absolutely amazing you're right you're absolutely right so we've been using around about 15 pixels of margin on almost everything here i would imagine that's pretty consistent let's take a look and see on this image if there's something else set up uh no that's that's going to be close enough maybe we need to bump it up ever so slightly now our headings here are h3s so we're going to go ahead and pop that in uh we're going to go heading and then let's change this to h3 once again i'm going to change this to a stat class so ps heading h3 we're going to go dark and then our text color we used dark from earlier now this one i don't remember what it said vegetables that's a word i always get wrong vegetable there we go vegetables that guy in japan says i was just searching at 2 am for a way to move to oxygen from elementor and i bought hoverify all the way from japan amazing super stoked to have you here japan is definitely a place i want to get to as soon as possible especially if there's any formula one fans out there to go to suzuka that's my that's my dream visit japan and go see the f1 race there so we'll just clone this a couple of times now i would typically set up classes on this stuff if i'm going to use these sorts of layouts all over you know all over the site but in this particular case i'm only going to use this here and maybe i would come back and set up classes if i was going to use the same layout again so we'll just kind of look at that on a case by case basis now what does our spacing look like beneath oh gosh clicked that so many times apparently our spacing looked like beneath this button so i would guess maybe 50 pixels so let's go on this div here at a margin of 50 and that looks pretty good perfect sylvia says what you give to the community in terms of content is immense and i'm so thankful thank you very much really appreciate that hello from germany glad to have you here hopefully i'm saying your name right anja correct me if i'm wrong but really stoked to have you here welcome alrighty so next up we can go ahead and move down to the other section here so you guys see me turning on and off hoverify i'm just doing that with alt i so pretty easy there um i think we can go ahead and do our grid layout here again so this one's going to be interesting because we're going to have like three or four divs to achieve this layout on the right side but we're going to use grid to get that column set up for us so once again we're going to stick in a new section let's add in some divs here and we'll go 100 we're going to set this to grid column count maybe we need to adjust to three but for now i'm gonna stick to two and then we're gonna add in one div on the left hand side here we're gonna use our subheading from earlier our separator and then let's take a look and see what this is that's an h2 perfect so we're going to go to the heading and then we already set up the subheading from earlier i forget what i called that class let's take a look what is this right here it's actually set up as an h1 so i need to fix that but that's not what i meant to do ps heading h5 is the class so we're going to go back over here ps hyphen heading h5 we need to change that probably on that tag there so there we go let's see uh the races yeah totally i love formula one my whole family can attest to that if any of them are in chat they could definitely back me up on that uh but yes suzuka circuit is a dream of mine absolutely now this says our story and then we have our separator div so our story and then div we're gonna go to sep short is our thing uh we need to add some margin here on that other heading can't quite get to it so let me go here and then let's go 15 pixels of margin beneath it yeah so basically i i talked about this at the beginning of the stream but i know that's been a long time ago so essentially what happens is as soon as you activate elementor on your site um your header and footer and all that kind of stuff is going to go away because of course that's handled by your theme and when you activate oxygen it completely disables your theme so you more or less have to build it you know back from the ground up but the benefits that you get long term are just so far superior in my opinion that it's a worthwhile investment of time and for most people including myself it's a transition you make you know you're not going to go rebuild every single site immediately from the ground up unless you want to but in terms of it being like a realistic transition you will do it slowly over time alrighty so after our separator here we have what exactly so we have another heading which was h2 so let's toss in our heading we're going to go h2 and then we're going to add in our other class of h2 dark that heading says supplying the best organic products since 1985 we're going to go supplying the best organic products and then we're going to use our text here so we'll just add in a simple text element p and then what are we looking at here for font color so that looks like kind of that off color yeah so we already have that as a global color i'm just going to utilize that there and then last but not least we have our inverse button once again so to make this nice and easy actually this one's a little bit different so our button up here oh i made a mistake here so the button's not quite the same we need to basically make the inverse of this button so let's do this um what i'm going to do is supply oh yeah you're right i made a mistake they're spelling wise so ps button inverse and i'm going to go ps inverse alt and on this alt the background color is transparent so the background color we're going to go to white and then set it to zero percent opacity typography color is going to be green and then on hover the background color will be uh let's see green and then the text should go white so white and then the background should be green so it's basically just going to invert on hover and then we need to add our transition class to this so we're going to go ps hyphen transition so now we have our transition effect as you can see which is perfect so to make this easy so we don't have to rebuild this button i'm just going to duplicate it and pull it down here and now we have our button so what we're going to do is go take a look the button says read more so we're just going to change this to read more and i imagine you probably take this button to like your about page or something so let's go to like our farm that sounds about right so that's perfect alrighty and then the only other adjustment here is there might be some extra line height so there is a line height of one on this heading so i'm going to go over here on our id and change the line height to one that made no difference so we're good perfect uh deviato says all my cloudways servers went down that doesn't sound good uh let me check a couple of my sites let's see nope my my uh websites are still up and they're on cloud ways and obviously you know the site we're building right now is on cloudways um maybe it's regional most of my stuff is in the east coast of the united states though it could be certain certain server pods or something all right so now we're ready to build our div on the right hand side with that cool custom layout so we're going to stick a div right here uh let's see question popped up do you ever work off of a design system um to be perfectly honest with you not really because most of the sites that i do aren't that complicated but it is certainly worth considering it's a it's something that i think if you set up once and then import it as a design set so it's sort of built for you then it would work really well or alternatively you know if you bought something like oxy ninja core that would work perfectly fine okay so let's take a look over here so we have our main div that kind of wraps all of this and in fact let's take a look at the grid component here so i'm going to pause this so we have a main div on the right hand side and then i think what we're going to do is set this to a line right we're going to have one div that's 100 height that's going to have that background image then we're going to have another one down at the bottom and then maybe just a regular image element inside of that and the other div here is going to have that background with the little dots there so this might be a little bit tricky to set up but we're going to uh we're going to take a look cool we have some people chiming in that their other servers are online dallas is up and frankfurt is up interesting all right so let's give this a shot now in this div like i said i'm going to add in another one and let's set this one's width to like 60 and then we're gonna set the height here to 100 percent uh but we also probably need to set this one on the right hand side to 100 but we're using grid so can we go match height of tallest child why doesn't that work or is it stretched there we go it's stretch okay cool so on the right hand side here we're going to set this div to right on this div we're going to go to background image and then what was that it's like a long greenhouse so where is that photo choo choo oh there it is right there alrighty so that's perfect that looks really really nice now what we're going to do is in this right hand column div we're going to add in another one let's go to let's see how are we going to do this maybe let's go layout absolute uh left zero bottom zero and we need to change our parent div here to relative so then our div sticks in here so what i just did was in our main wrapper div or excuse me not main but on the right hand side here i went to layout set that to relative and then on this div i went to layout set that to absolute and then went 0 left and 0 bottom so that it sticks down here in the lower corner now how tall is this stuff over here so if we click on the little play icon it's 240 311 basically so let's set this to a height of 310 that's actually way taller than it appears over there so let's drop that a bit let's go like 250 and then how wide is it it looks like it's about 60 percent maybe or maybe more like 50 so i'm just going to use percentage width here we're going to go 50 a little bit more than that maybe it was actually 60. my initial guess was right 70. there we go that works all right so then we have a background of that dotted green i actually don't even know if that's on here hopefully it is let's see if we can find that there it is right there perfect so we have that dotted green and then inside of this i'm assuming this is probably best done with just an image element so that image is 370 by 240. so let's pop in an image we're going to go 370 by 240 i think it was 247 so we're just going to be really consistent here with what that image was and it's that green grass being cut former background now we definitely need to go ahead and set the z index on this to higher than that other stuff so we'll just set this to like a 15 z index and then i think we want to set this to be a taller height so maybe like 350. 350 is a bit tall 325. it's stretching that background image which i don't think is supposed to happen it says it's 311. i mean i i guess i'll just do it and that looks reasonably okay uh sylvia says this is totally off topic but i thought i'd ask anyway do you have a tutorial on premise like about oxygen and acf uh have you ever used toolset so never use toolset i played with it a tiny little bit and just didn't find it as intuitive as acf so i didn't i didn't actually spend any time with it there's tons of videos on acf in my oxygen course and there's also a standalone oxygen course that kind of gives you a walk-through of it tons and tons of stuff you can do with acf it's just incredibly powerful we're not really going to touch on that in this to this live stream so much but maybe another one we can definitely do that david says what application or extension are you using to view the properties of the element so i'm using hoverify there's a link in the description but hoverify is really awesome a lot of really cool stuff i'm getting these gridlines i get all the css properties all the colors you can download all the image assets all kinds of stuff uh andre says use padding bottom instead of an explicit height good suggestion i like that so padding bottom 311 well our background goes away there let's see taylor yep good call taylor would use max width let's see so i want this image to be a bit smaller maybe if we add let's take off that margin 125. 50. 25. let's just go like 50. it is stretching that image a little bit but i think if we go to background and then like cover yeah contain something like that remove the height of what of the div or the image curious what the what the suggestion is here to fix this remove the height that looks like i mean close the the dots are a little bit like spaced out but i think you could adjust that with the background image position on this div here so you could go like i don't know maybe 50 25 something like that oh okay cool i already removed the height so yeah we're good to go perhaps i need to add just a little bit more margin beneath that so instead of 50 let's go like 75 or 65 that is close enough for me i am happy with that so don't want to spend a massive amount of time on this because ultimately it's not like you know super important but we do need to add an image border radius so you can see there's some rounded edges on these images here so if i press alt i activate hoverify what is our image radius or border radius is 12 and then there is some box shadow so let's copy this box shadow we're going to set a class here so we'll just call this like ps image styles we'll do that border radius was oh not on the div whoops don't mean to stick that on the div we want to do that on the images here so ps img styles and then our border radius was 16 is that right i already forgot it's 12. i'm glad i checked so then we're going to go to effects box shadow paste that in and then our box shadow is 16 24 80 0. 16 24 80 0. interesting that does give it a nice effect there i haven't used something that intense before but i like it so ps img styles there we go that looks nice i'm happy with that real quick i want to refresh on the front end and just take a look at what we got so far so there's probably some spacing right here we need to address um so let's do that real quick it's just ever so slightly off yep so what did i do here i did oh actually no margin so let's go 15 just make it consistent there and then what else do we got so i'm going to turn off hoverify it's all looking pretty good to me i don't know what you guys think but i'm pretty hap wait that's our target site i mean our origin site this is our target site this is all looking pretty good it looks like there's some more spacing on these sections yeah something like that all right so now let's go ahead and add this stuff so we have a hover effect here as you can see there's like a box shadow that appears on hover so kind of unique there i like it let's go down here and underneath this div i'm going to add in another one once again let's actually first of all add some margin here so we're going to go 50. i'm going to set this div to 100 width we're going to use grid because this just makes it so much easier than it was before to go column count of 3. i'm going to go div here and let's add in a class let's call this um well actually maybe this this one might not be easier because the way that we have well no it takes up most of the space here these these divs but right up to each other as you can see i was thinking if you needed some extra spacing in between them it might be better to build your divs manually but this will be perfectly fine so what we're going to call this class is like ps div hovers or something like that and let's take a look at our padding here so what do we have so the padding is 28 top and bottom 32 left and right so 28 oop 28 top and bottom 30 what 32 all right and then the color not too worried about that we'll look at that in a minute on our hover state there is our box shadow so we're going to go to state of hover go to effects box shadow and then this one's pretty intense as well so it's 04120 negative 24. 40 120 negative what negative 24 pixels yes this is oxygen 3.7 this is the um this is the 3.7 rc1 that just came out today so it was perfect timing for the stream uh andrew asks the hoverify looks interesting i see that it's on sale for only 16. is it really good or what i mean i'm happy with it so far i have a full video coming on it tomorrow so if you want to wait until tomorrow morning east coast united states time to check it out in more detail you certainly can but hopefully this kind of gives you a demonstration of it um so now we need to do is stick in an icon on the left side so we probably need to add in another div here we're going to do an icon a heading and then some text so we're going to pop in another div set this one to 100 percent not 111 percent one zero zero we're going to go to horizontal and then actually on our target site are these images or the actual icons they are wow that font awesome has got an interesting name uh [Music] all right so we do need to make our own icon it looks like unless there's an image element which i don't think there is yeah no there's not so we're going to go ahead and delete this uh be kind of interesting here to make our own div so we're going to go ps what did i call this other class here ps div hover hovers icon let's just call it that the background color is going to be our global green is it no it's this one like a lighter green ever so slightly oh no maybe it's just more opaque yeah we're going 50 opacity on that yeah it good point divide us it's uh two installs with one license you're right okay so now we have the icon itself so inside of this let's add in an icon element and then we're gonna go let's see what was the name here this is getting kind of complicated hover icons uh let's see hover icons dials this is getting kind of silly so i don't even know if we're going to be able to pull in this yeah no that must be a pro icon let's just call this like a i wonder if there's like a vial jar um we gotta find an icon that's roughly similar what is the actual heading here it says chemical free maybe there's chemical free yeah let's just use that icon good enough for me and then what is our color here so that is our global green perfect we're going to set that icon size to 25 and then what's our padding around that icon if any so it's padding 20 all the way around perfect so 20 pixels all the way around so then on this div here we're going to set the border radius once again to 100 so we get kind of our custom icon like that and let me rename some of this here so this is going to be our uh let's see what is the what is the content here actually talking about we'll just call this like features container i want you guys to be able to see kind of the organization of these divs so this is feature container um feature item and then we're going to call this one the icon wrapper so now what we're going to do is inside of this feature item we need another div and we're going to name this one our feature text we're actually gonna have a heading and some text inside here so we're gonna go with 100 and then what kind of headings do we have here so this is a span element and maybe let's go let's just see what an h3 looks like in here so we're going to go h3 and then h3 dark looks kind of big but it's perfectly fine h3 dark needs a tag of h3 and then what happens to your actual id so it does change for us okay perfect just wanted to make sure that the tag was actually being set there properly now uh it says chemical free so i'm just going to copy that paste it in there and then what do we have for our text i need to close out some of this stuff there's this text right there so we'll just pop in a text element change our tag to p pop that in there we go now on my feature item here i'm going to set this to middle align uh there's a bunch of extra margin right there probably because i changed the tag to p so i'm going to change that actually back to div that'll be fine and then what i'm going to do here is go back to my icon wrapper and add let's say not 15 maybe five five pixels of margin seems like it needs to be a bit more than that maybe if i shrink some of the spacing over here so let's drop this to like 24 top and bottom and then we'll go 28 left and right give us a little bit more breathing room so we can take our icon wrapper and add 15 pixels of margin without it dropping to a second line cool so looking pretty good now we need to do is make it have that box shadow on hover so did we already do that yeah we kind of did but we need to add that transition so on our feature container here we're going to add the class of transition and now it's kind of hard to see it actually i might make that box shadow oh no not transition on the ps div hover where did i do that am i just making that up or is there a box shadow on that yeah there totally is where did i do it was it on the id uh no oh it's on the hover state whoopsie i'm gonna bump this up from 8 to like 18 make it a bit more pronounced like that i think that looks perfectly fine and now we can duplicate this features container a couple of times so the other ones we have here are fresh and healthy and 100 organic so i'm going to close out of hoverify so i can copy and paste this stuff here fresh and healthy and then just some default filler text john thank you for sticking around so much he says he's got to go are you going to upload to your channel at some point so i can see how you finish it yes so pretty much as soon as the stream ends it will be available as a replay on the channel so however far we make it today like i said at least the home page you'll be able to watch all of this later on so thanks for sticking around next up says 100 organic and then the text here copy and paste that in and then let's look for some other icons here so um what would a healthy icon be there we go heart that looks good and then organic i have no idea what to search for organic i doubt there's one called organic let's see i'm just going to search organic and we're going to go with this leaf perfect i think that might be an actual icon for something but that's i'm fine with that it looks good okay so there's definitely more breathing room between this element here and there i think i only did 50 pixels of margin on this div so i think i'm going to bump this up to like 75 and then on this container i'm going to make it 75 on the bottom there probably a bit too much now actually no no we're good because we still need to set up this stuff here so next up i'm going to minimize all this stuff let's rename these real quick so you can see let's call this one like intro heading and then we're going to call this one our features and then i'm going to add in another div here uh the first thing i'm going to do is set it to 100 you guessed it and then what do we have so we have our subheading a separator and then our main heading here which i guess is an h2 it sure is easy enough so heading element and we had it as h5 for our subheading like this that one says our farm and then we had another div inside of here which we just had the class of separator on next up we had a heading and since we already set up our oh not inside of this we don't want it inside of our separator we want it outside of it on this heading here it's an h2 and then we had the stacked class of h2 dark from earlier so this makes it nice and easy we don't have to recreate the styles every time it says the home for our farm natural and sustainable so that's good and let's just go ahead and center this stuff so on our h5 subheading here i think i'm going to add 15 pixels of margin roughly yeah taylor you're right i do keep forgetting about hydrogen i have it installed and i keep forgetting it's just such habit because i haven't used it nearly as long as i have been using oxygen so i have it i will have to break now we have our button from up here so let's just go ahead and duplicate that because we already have it with all of the classes there's no reason we can't just take it right out of there and then the button said learn more oh no not capital learn more like that and then underneath that there is a video element so we have the goofy video that oxygen toss is in there let's go maybe is 50 too much wait where am i not this div the link wrapper here i want 50 pixels of margin there think that's actually too much i wish there was an easy way to see how much spacing was underneath it so that says margin bottom of 20 but there's obviously more there that one's margin top of 32 so it's actually 52 so 50 is good enough i'm leaving it as 50. now uh that doesn't look like a real video what happens if you click it now it just takes you back to the home page so i wonder if they just use an image let's see that's a background overlay for the video so you should use utility classes for adding consistent padding and margin you're totally right taylor definitely setting a bad example by not doing that yet once you have the elements kind of already there and you have your classes set up it goes so much faster you're totally right uh to be consistent here i don't have a good video for us to put here so i'm going to delete it and i'm just going to actually use a let's go with the div so that way we can add an icon on top so we're going to go div background image is that nice picture of the greenhouse which is this one here it says it's 800 pixels tall but i don't know how big this actually is alt i to activate hoverify it's 555 pixels tall so so five five five and then what we're going to do is set this to center vertically and horizontally and then i'm gonna go with an icon we're gonna set this to like a play button what is it on here so it's got the black background with the white icon so we're going to change the icon to white we're going to go to solid and then our background is that so icon size needs to be way smaller let's go like 25 and then let's bump up the icon spacing to no not 50. 35 no not 350. 35. uh looks like our icon is a bit bigger maybe 35 and then our space around like 25. so yeah and then you can you could realistically link this icon straight to your youtube video and that is good enough for me do we have the box shadow and the border radius class we do so i'm going to stick that on this div right here we're going to go img style so we have our box shadow and the border radius is the button font pop-ins you are totally right good call so this right here is poppins on the demo site but on ours it is not that so we need to go to link wrapper let's change this to our ps button inverse i think it's alt typography and then font family is poppins perfect there we go and then is that border radius higher i think it is let's go here so border radius that says it's only three pixels i don't feels like it's more than that because here it looks like it's more than that than it does on the oxygen site but i don't know good question i'm good with that for now we're going to keep moving on so next up we have a text block on the left hand side and some bullet points over here so this will be good i see people ask how do i set up custom bullets quite often i mean you can obviously just use the oxygen rich text element and add it that way or of course you can um you know build it up manually so that's the route we're going to go so i'm going to copy this real quick here and then once again let me minimize this stuff so you guys can kind of see where we're at this div we're going to call this video section and then we're going to stick in another div which is going to drop down to the bottom on this video section let's go 50 pixels of margin i know taylor's screaming at me because i'm not using a class for that which i totally should be uh 100 and then once again we're gonna do grid column count of two just makes it so easy dave on the left with some text inside paste that right in and then inside of this container here add in another div before we get too far i'm going to rename this we're just going to call this like bullet points and then over here um i think we can go we can go grid again actually so grid column count two we're going to go to gap of five in both spots there we'll switch it to left align and then we're going to make one div that has an icon and these bullet points here so let's do this we're going to go div create a class here we're going to call this like p.s home bullets something like that we're gonna stick in an icon why not use three columns since you have grid yeah i guess you could do that uh we're gonna go 25 and then check mark let's see our check looks like that one i believe yep close enough and then we're going to go to 15 i think and i didn't add a class here so i'm going to go ps home bullet bullets icons and then we're going to copy this id to the class and then delete it from the id andre says the button border radius is 8 by the way checked it in the regular dev tools thank you i wonder if there's a mistake there somewhere we're going to go back to our inverse class and set the border radius to 8 instead of 3 and you're right it does look much much better now that it's eight i'm happy with that so inside of this div we have our icon and then to the right of that we're just going to stick some text in here so on this div i think our font weight is going to be higher probably like 600. let's take a look real quick and see so it's a darker color and [Music] the font weight is set to inherit so maybe it's just a darker color maybe it's not actually 600. let's see we already have that color there so what happens if we take it off of 600 yeah it's definitely 600 okay got it so we'll set this to horizontal and then these links are pretty small or excuse me these text elements are pretty small so now i'm gonna add maybe just like five pixels of margin and then how many do we have there's eight total so i'm just going to duplicate this like that perfect grid makes it so easy so so so easy i love it i am going to copy this a few times just to make it look uh you know reasonably real i think it makes a big difference it makes it more believable and just like feel more real when you actually have it like this oops not insert delete and then we'll move right along so i think next up we have our testimonial section and if you guys are interested we can set up a custom post type for that which i think will be pretty cool it'll be a good demonstration all right one more and then we'll move on there we go perfect all right so let's go ahead and save real quick and take a look on the front end of our converted site here so everything is looking pretty nice i'm happy with how it's coming along yeah andre you're right actually so realistically on the margin right here that i added to the home bullets class we could just delete that and then on this grid uh is it gap here yeah so you could just set it to gap there that's a good good idea he's suggesting he says that way you don't have to add margin bottom for the last row very very true because otherwise you'd have to go to that class and you'd have to set it to zero or excuse me you'd have to go to the id of the last one in the row and set the margin bottom to zero but this saves you the headache of having to do that okay so now we're done with that entire section so we're ready to add in a new section and in this site over here we have a pretty cool layout now how are we going to design this this is easy we've already done this a bunch of times uh thank you elijah really appreciate it it's super awesome so obviously this is the this is the real site and then our target site is looking fairly similar i have made some tweaks here and there but it's starting to look really really good um now let's see what can we do here this alternating layout um we could easily make it like static but i was thinking about doing this with a repeater so that the testimonials update and we create a custom post type for them uh totally open to suggestions here trying to think so sylvia asks is there going to be a loading and performance test at the end to actually see the difference of the same website built with oxygen instead of elementor that's a good question uh i'm not sure it's actually going to make a huge difference in this case to be honest because there's not a whole lot of fancy stuff going on but it's certainly worth exploring um i mean maybe it's maybe it's a substantial difference i really don't know we can take a look what i want to do right now is figure this layout out and then we will move on and that'll be the last thing we do and then we can wrap up the stream so let's see all right trying to think not exactly sure how to achieve this one so far uh real quick i'm gonna step away for like two minutes and then we'll resume so i'll be right back with you guys [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] foreign all right and we're back i was trying to think of some different ways that we can set this up one thought that i had that would not quite be the same here is doing like a div with grid so that the first one here has just like regular content in it and then the second one has the repeater excuse me the repeater in it but i don't know that that's gonna work i mean i guess the repeater would be stuck in this div here so huh well let's just go ahead and start now this section here has a background color that we were using earlier that like kind of cream where did it go did i not save it as a global color i guess i did not oh it did where is it is it that one yeah weird i just couldn't see it i guess there we go so it's that cream color all right and then really i'm just going to duplicate this stuff and steal it so duplicate all of this boom boom oh wait i can just use hydrogen copy and paste that's going to be so much easier than trying to drag it down into the proper spot so we're going to go heading paste we're going to go div paste and then heading paste and then button copy paste there we go beautiful hydrogen pack did its trick there let's see andre says you could use a grid with grid template rows masonry not yet supported in all browsers you know i was actually just playing with that and um the it wouldn't work in a few different browsers so i stopped using it but that's a good suggestion dividus yeah you caught me i did use copy and paste thank you for the reminder and taylor says could you use a repeater that uses column wrap slash masonry that overflows into the second column oh man i don't know maybe what we'll do just so we can have something here is i think what i'll do is just set this up to center right here and then we'll just add in the repeater and we'll style these blocks to look like that to me i think that's going to be a better solution and perhaps we can revisit this and i can try to recreate this layout off stream so it looks a bit more cohesive and we're not and that way we're not fumbling around so let's go ahead let's go ahead and try and think here i guess we'll do the repeater styling first and then we can go back and make the uh the custom post type in a little bit so inside this div let's go to grid layout i think we're going to enable grid column count is going to be 2 inside of our repeater div here let's add in another one with this we're going to go to we have our image here and then it looks like we have a quote icon aligned there which we can do that's not going to be a problem and then we have our image for the person's thumbnail there's a div right there so that's actually super helpful to be able to figure out how they align that i like that a lot so let's go ahead and just build that one here so this div is going to be 100 we're going to center this and then we're going to have an image element we're going to browse for that person's photo avatar female 2 like that and then interestingly that says the jpeg so we don't have the transparency is there somewhere else these people's photos are um [Music] that one has the rounded background so i'm gonna use this guy's photo instead of the other one from the example and then the photo is 80x80 so we're going to shrink this down quite a bit so we're going to go 80. thank you so much for hanging out really appreciate you have a great weekend and also for those of you guys that have donated through the super chat thank you so much i wanted to tell you that again before you leave just genuinely appreciate it so much all right so next up we're going to make an icon uh let's see we're going to go quote and then our color is green our let's see icon size is way smaller and then let's go horizontal align we're gonna switch the icon over here to the left side and then can we use negative margin to just pull it on top so it's all the way over their image which honestly is a little bit clunky to me negative 15 probably is okay and then let's go layout z index of 15 something like that uh maybe negative 20 i don't know it shows up over them over their face in some cases which i think is kind of goofy so that will be perfectly fine i like that nice and easy and then was there a background color on that there was so the background was green and the icon was actually white so we're gonna go solid so the background color is the green and the icon itself was uh white and then the icon size we're gonna shrink a ton so 10 and then let's drop this to 15 looks perfectly fine i'm happy with that so yeah there we go that was nice and easy to recreate now what we're going to do is with this div let's go 15 pixels and we're going to add in another div here uh yeah i will go with grid elijah what i decided to do was just change the layout a little bit so i'm going to have that stuff at the top and then i'm just going to use the repeater to grid this stuff out i wasn't sure what the best way would be to replicate this with the repeater as you can see if i use the grid function here uh maybe this would be a better bit there's like trying to get these lines for you there's that and then there's the second div over there so i don't know exactly how you would replicate that layout maybe we can revisit it though was my thought just not exactly sure how we would get to that target but i want to work i want to focus on this styling for now so we're going to add in another div underneath this so this div here is going to be 100 width the background color is white let's go take a look at our border radius and the shadow colors here so border radius is 12 we're going to use that olive as our border color so border radius is 12 border color is our olive one pixel and we'll go solid and then is there a box shadow on this uh there is a hoverbox shadow okay we'll come back to that in just a second but our padding is let's just go 64-56 64. it's kind of an odd interval but we'll stick with that and then we're going to go text inside of this let's close out of this so we can copy some of this text then underneath this we're going to add 15 pixels of margin we're going to add in a heading element and let's see what tag that is if it's a heading at all it's just a testimonial name actually so it's not a heading folder font weight and a black color so we'll delete the heading and then we're going to stick in another text element font weight of 600 make it black and then uh it's just their name so anacynthia is what we'll use here we can change that later to be dynamic so we'll center this stuff and then what we're going to do here is remove this margin actually and then can we use negative margin to pull it up on top of the image here so negative 25 and then we're going to set the z index here to let's go like 25. now how does it align over here so if i turn off hoverify it's halfway up so we need to do more it's not quite 15 or 25 it's going to be like maybe 35 40. there we go perfect so that overlaps nicely i like that a lot yeah dividus i've tried to get him to do a live stream uh before and hopefully he'll come on board with me one day and do it so we have our layout here which is pretty sweet so we're going to replicate or excuse me refresh on this front end so our border is definitely darker in this layout here so what i'm going to do is actually just go back to this and i'm just going to change the opacity down so bottom and then let's go 50. perfect yep and then now what i'm going to do since we have this layout is we're going to go create a custom post type because this is definitely the way that i would want to do this on a real site that way the client could get in there and add their own stuff and not only that but we also have a testimonial page where eventually you know this stuff is going to replicate out which i think is going to be really really nice and just much more user friendly for a client so let's actually go back to wordpress admin we're going to go over here to add a new plugin and we're going to go to cpt oops cpt ui install this bad boy and then activate and we're going to go to add edit post type the post type slug here we'll just use as testimonial the plural label is testimonials and then singular is testimonial okay and then add uh oh there's already a page called testimonial whoopsie so uh we'll just do user testimonial as our slug testimonials testimonial there we go all right got that added now a couple other things i like to do typically is change has archive to true we probably won't use an archive on this particular example but i do like to turn it on and then the other thing that i like to do is change the icon here so it's not that little pin i like to go to dash icons and just find one that kind of makes sense for this so we'll just change it to this that's perfect the editor quote pop that guy in there save and there we go a good question pods versus cpt ui never use pods it could totally be viable i just prefer cpt ui it's perfectly fine now we do need to add acf as well so we're going to go get the free version of advanced custom fields and that is because we're going to add a few custom fields like the user's name and that's about it actually their name and image i think is all we need oh no not extended whoops that's not what i meant to do come on jonathan you're not paying attention advanced custom fields there it is if i was paying attention i would have seen that but obviously i did not so we don't need extended i'm going to get rid of that and then custom fields we're going to go to field group yeah the new elementor prices are kind of weird i don't really know what to make of it to be honest i've never really used elementor and it's not something that you know is in my repertoire of plugins and you know add-ons that i use so i can't really comment on it i'd have to let other people that use it and are heavily invested in the ecosystem give their opinion on that so we're going to call this field group testimonial fields if i can spell testimonial minimize this our post type we're going to change that is equal to testimonial and because we're using uh elisha dude i know it's like i've never done that before until now but that's super annoying like why is the add-on ahead of the other one i don't know um position we're going to go to high after title but since we have gutenberg it doesn't actually matter now the only fields we really need here are like the person's image so user image is what we'll change this to because we can set the post title to their name and then that's it because we can put this in the wordpress content editor we just need a field for their name and then i guess the other thing you could do is add like another text field we're going to add something else here so it's a bit more interesting let's go like maybe like uh i don't know phone well no what would it be on like a typical testimonial other than just their name uh portfolio link yeah i guess we'll do that we're just gonna call this portfolio link so like if this was an agency website you could have it like linked to their corresponding portfolio item so yeah that's perfect so if we publish this we're going to go over here to testimonials we're going to add a new one i can get rid of this dash icon and what we're going to do is just copy the same stuff so anacentia is going to be our post title this is going to be our description our user image here we're just going to pick one of these things out so oh yeah company john that's a good one that's a way better one actually social media link is a good one company is is really good too uh we're gonna use this avatar picture like that um and then actually i'm gonna change this i like the i like the company better than portfolio link go back to the custom fields and then portfolio link we're going to change that to company name company underscore name like that update this and then let's go back to our testimonials here so anna cynthia oh another one would be like user um like their level at the company you know like their position so we could go company name we'll call this like uh no we're gonna call this um oh gosh i'm trying to remember i can't believe i'm drawing a blank on the the portal cave johnson aputure laboratories what am i how am i getting that wrong or how am i forgetting that aperture lab laboratories i can't spell laboratories either i need a picture of cave johnson i don't have that handy unfortunately all right so that's good enough we're gonna update this and then i'm gonna add one more you're looking at me fumble through gutenberg trying to get more used to it joelle rain actually we're going to call this one cave johnson um copy this paste that in as their bio their user image this is obviously not cave johnson that's an imposter but that's good enough and then their company name we'll just call this oxygen builder perfect so now we're going to publish this we have more than one post um let's add one more so we have three so we can kind of see the layout and how it would look what other one do we have over here so do we have one that's longer i guess we could just duplicate this text a couple of times make it longer and just see how that behaves we'll use ricardo and then we'll find another image here their company name will just be perma-slug perfect publish all right so now let's jump back into oxygen on our homepage here and we can set up that repeater using the dynamic data hopefully you guys are enjoying this so far if you've picked up anything definitely let me know and chat i'd love to hear if any of this stuff is going to be useful for you so now what we're going to do here is take this image we're going to go to dynamic data we're going to go to actually we could have used the post featured image i guess but i use the advanced custom field for user image we're going to go to original and oh i haven't set my query on the repeater i need to go to repeater query custom post type is user testimonial apply now i'm going to go here to insert data go to post content and then we're going to go here again so insert data is post title which is in essence the user's name so there we go perfect now let's go take a look on the front end unfortunately these images aren't actually transparent in the background which is kind of a bummer but that's just something we'll have to live with for the moment so there is our testimonials section definitely coming along nicely now one question i have hopefully if you're still here elijah is with the masonry i know there's a line of css you can add to enable masonry but there's quite a few browsers that don't support it so is there a way for us to make this masonry like if i had a fourth post would it apply right here or would it push up to the bottom of cave johnson let's just try it real quick no reason we can't so one more we're going to go testimonial we're going to use let's use margaret paste that in here copy in their bio user image we're going to grab that one and then their company name will just be example company all right publish and then let's see how that behaves on the front end yeah so i wish that it would like close up this gap here so is there a way for us to do that let's go take a look real quick i'm not exactly sure the grid stuff is still obviously very new so hmm all right coming down what options do we have here in our grid layout so auto fit no row behavior match height of tallest child you can technically override the css grid settings on the container just make sure your selector is more specific okay so match height of tallest child the reason i use the repeater is because it's much easier to build complex layouts like this with the repeater than it is easy posts because with easy posts you basically have to build the you know the html and css yourself which is totally viable if you want to go that route you can but the repeater is just easier so autofit is not what i want center you can do [Music] yeah i don't know anyway let's take a look at our target site real quick so did we complete our homepage let's take a look at our elementor example so here is our home page i'm going to use the scroll wheel so it's a bit more smooth we're going downtown this is looking good testimonials i believe is our last section yep so now let's go to our target site and we're going to compare here oh i forgot to change the produce but you get the idea vegetables there's there's some you know small differences here between like spacing and alignment and that kind of stuff but for the most part it's pretty close i need to revisit this here and figure out how we can replicate that exact layout from earlier you know from the demo site but it's looking pretty good now uh we have of course our cta from the footer we do have all of the other pages to build out but for the most part i think these are going to be pretty straightforward so like if we go to our farm those are just some standard content sections that stuff would be pretty easy to build this might be a little bit tricky if you don't know like negative margin and that kind of stuff we have a team section so if you have a big site that might call for another custom post type our produce so if this stuff looks like things that you want me to build in the future i am willing to do another session here where we go through and build all of this stuff but we've made a ton of progress today so we're just at three hours now which is pretty amazing and we've averaged probably like 50 concurrent viewers absolutely amazing those of you guys that have donated once again i'm blown away and thank you so much i just can't thank you enough this is really really fun i enjoy doing this i don't know if you guys like these longer live streams or if you like the more edited um you know regular videos that i typically produce but if these are more engaging if you get more out of this this is something that i can consider doing more regularly maybe like every other friday something like that or you know change up times and stuff so please let me know in the chat um and i think that's where we're gonna i think that's where we're gonna end it today so thank you guys so much for hanging out three hours now lots of familiar faces and many of you have been here from the very start of the stream so i really really appreciate it you guys are amazing and until next time i'll see you then bye bye for now

Channel: Permaslug

Views: 10,747

Keywords:

Id: 6SefkHIAe_4

Length: 180min 35sec (10835 seconds)

Published: Fri Feb 12 2021