0:00:00
What’s up everybody welcome back it is time for another full project build inside the inner circle I am very excited about this one. It’s gonna be the first full build that we are doing in bricks and I know a lot of you are excited about that as well now before we kick things off I just do want to say my recording time is very limited in comparison to what it used to be and the last time I did a full project build the timeline was actually delayed because I had multiple hours where I could have been working on the website but I couldn’t record at the same time and therefore I decided to wait until I could record and when I have to fit development on a client site into very small windows like that it easily creates delays as you can imagine and I just can’t do that anymore Really my team would be building this site if I weren’t doing it for the inner circle So the fact that I’m doing it means it’s it’s on my limited schedule and not just on my limited schedule But on my limited recording schedule so here’s how this is going to work I am going to record as much of it as I possibly can Some things will have to be done outside of the hours where I can record Some things may have to be done by my team when either of these things happens on the next episode I will review what was done in between episodes and we will talk about the thought process that went into it How it was accomplished all of that so you’ll get a full brief on What happened when you weren’t watching right so you may not get to see every single second of the build live or You know in the trainings, but you will be privy to the details of every single second of the build and this one is going to be a little bit challenging because the client has Approved the design more or last, but it’s one of those clients. It’s like we want to see more of a mix of our brand colors and You know their brand you’ll see it in a second. We didn’t do the branding You know they had the branding before they came to us and The brand has two competing strong colors in it two very vibrant colors a yellow and a light blue and They want like a even mix across the website and it’s like These colors kind of compete against each other, you know It’s we don’t want to distract people we want to make sure that they can focus on the goal So we’re having those conversations right now. It’s okay. I’m gonna start the build anyway. These are adjustments that we can make as we go But I just want to put that out there. So we’re gonna see a little bit of that challenge in this project Why don’t we just go ahead and let’s let’s screen share here and Let’s pull up the wireframe first and we’ll just do a little bit of a project brief The other thing is when I do these trainings for full project builds I tend to cap them at about an hour so It in my time right now it’s about 340 in the afternoon. So we should be wrapping this up by 440. I try to make one hour Episodes let’s say for these builds. So let’s start with the wireframe Here’s the wireframe that I gave with the logo top left just a very basic, you know, header area This project was a pay and full up front project. It came to me not by referral It came to me actually through the Google ads that I’m running and so it’s you know, that’s acquisition has been fantastic Now I’m getting okay. I’m getting text messages. I don’t even know if you guys can I don’t think you can see them all right That’s good. Okay anyway back on task. So here’s the wireframe. We got a little hero section up here Then we have our testimonials. I wanted to start out with social proof right away Then we scroll down and we can see the services that they’re gonna offer this is gonna be for a Company that does window tinting and car wrapping ceramic coating detailing now. This is another challenge Challenging aspect of this client is that they They could use more focus in their business. Let’s say that they have a lot of different services Summer auto services, but at the same time He’s trying to branch out to like you know for example window tinting that’s for cars But he can also do window tinting for commercial buildings and he’s trying to sell that and You see something like powder coating that doesn’t always involve Cars so he’s doing stuff with cars primarily, but then he’s also trying to do stuff with buildings and stuff and Just a prime example of like just because you can doesn’t mean you should right and so I I’m not his business consultant. I haven’t been hired for business consulting We’re gonna do the best that we can with this and I’m gonna nudge him along the way But I don’t think you know I’m not gonna convince him to just cancel an entire segment of the market that he’s trying to reach So you know we have to stick to our job, which is let’s get this website done to the best of our abilities Let’s make sure it serves the people is meant to serve and that’s the best we can do and maybe we build enough trust along the way to where You know if he’s looking for business advice maybe we can give some of that but it is what it is at this stage of the game After that we’re gonna talk about you know why you should choose us because there’s a gazillion different Detailing shops out there car wrap shops out there window tinting shops out there What’s window tinting like from this company versus this company? Why does it really matter?
0:05:41
Shouldn’t I just choose who’s closer? Shouldn’t I just choose who’s cheaper? We’ve got to come up with some sort of distinction here And we have not written the copy for this client yet We know the flow of the content but the copy still needs to be developed. I Intentionally held off on the copy normally I write the copy or have the copy written either way just depends on the client During the wire framing face We don’t do this during the development phase But because of the nature of this project and recording it for you guys and doing it in bricks We’re just gonna kind of do it as we go here and this may be one of the areas where you’re not gonna sit and watch me brainstorm copy and things like that. This is stuff. I will do Offline and then you’ll see the updates in the next episode. Okay? All right, so we’ve got the YS section and then we’ve just got a gallery to check out the latest work We are gonna need to be able to not on this homepage probably But definitely on the full gallery page. We’re gonna need some facets to be able to filter The gallery so you can choose what you want to see for those of you who want auto window tinting examples You’ll need to be able to see that for those of you who Occorally want to see commercial building window tinting you’ll be able to see that as well. All right, so we’ll put those facets in At the bottom we have a footer call to action. You know, this is my classic format. We we sandwich We create a call to action sandwich. You got a nice header up here with a call to action You got a nice footer with a call to action So you’re sandwiching everything between and then plenty of different calls to action or links to take the person To the next thing we want them to see in between that’s the meat of the sandwich with all the content in there All right, and then just a standard footer down here So this is the wireframe that I sent off to my design team now We’re gonna take a look at the design that I got back from them So we’re just gonna slide over here and this is the design that I got back from the design team There’s the branding up top this is gonna be kind of interesting because of how you know This this header is gonna be like I do feel like this logo needs to get bigger But at the same time it starts to push stuff down too much Maybe this is an area we’re gonna have to play around with this right now have the the logo I don’t know if you guys can see this it’s like it’s overlapping The header a bit it’s like split in the middle. It’s actually not like even perfectly in the middle That might be like perfectly in the middle But you see there’s gonna be some complications and issues here that we have to sort out I might end up just getting rid of this top bar and doing a different logo different kind of header layout I’m not sure yet. I haven’t I haven’t decided on this will cross these bridges when we get there Okay, next we’re gonna go down to let me see if we can get like a 70% zoom here. Okay, maybe 80 will 80 work All right, there we go. That’s better. So now you can see our header section here There’s our styled testimonial section obviously a lot better than what we saw in the swire frame here This is gonna be a carousel. These are gonna be dynamic We’re gonna bring those in through a loop I have no idea what we’re gonna use for the carousel yet in oxygen I would use oxy extras and use the carousel. I don’t think Bricks extras has a carousel yet So that’s gonna be interesting on how we approach that for the nature of saving time and just making progress I will probably just build these cards put them in a loop inside a section and then we’ll figure out the actual carousel functionality After that some some point in the future Next we’re gonna have our services. This is also a carousel We’re gonna have to figure out this carousel thing because we’ve got two different carousels here that we need to build Both of them are gonna be through loops. These services are all gonna be custom post types so we’re gonna get that nice and styled up there then we have our Y us section. We’ve got our little slanted photo here the little accent border You know these these a little lot of kind of you know Interesting little design concepts here that we’re gonna have to try to figure out how to implement You know as I go down this design I’m starting to think and I’m starting to brainstorm Like okay, how are we gonna achieve that? You know, we’ve got the the floating Header text over the actual header Which is like this is an accent heading. This will be the actual H2 right here How we do this is gonna be interesting like I want to do it with a class But if you notice it’s not always positioned in the same area But maybe we can position it in the same area I also noticed that sometimes the accent heading has a line and sometimes the accent heading doesn’t have a line But maybe we just make them all have lines this one has a line that one has a line I think this one should probably have a line So we’ll just we’ll keep that nice and consistent Then we got a gallery down here. I almost always for a pure image gallery use WP grid builder This is one of the areas where WP grid builder shines and And I’m just trying to think we’ll probably end up making this out of a happy files gallery It depends on how our full gallery needs to be but I think that is gonna work just fine I think that’s gonna just put all these photos into organized happy files galleries because we can query Into a gallery into a WP grid builder gallery from happy files That’s one of the things that’s great about happy files. It’s queryable content. So That’s how we’re gonna do that. We’ve got a call to action down here Now you see you know this is after they’ve said hey, you got to distribute our brand colors even more So I’ll tell you one thing before the design before this all the buttons were yellow actually, okay?
0:11:43
So and it looked really good because this yellow really pops You can see it on the border right there. It’s really eye catching the yellow here very good to catch your eye It looked really good with the buttons in yellow too, but they were like our blue is not represented enough So I I was like well, okay, we’ll make the primary color the action color the blue color and then we can leave the yellow as an accent right which in this case would be our like secondary color and I sent this back to them and I oh and I changed this because this was um Maybe a dark gray or something like that and so I changed it to yellow So that there’s yellow more yellow and more blue and they were like no, that’s not enough Like they want these black sections to also be yellow or blue and it’s just to me in my brain This is like dog. This is way too much color like you’re just splashing color everywhere and it goes back to what I said about Not letting clients edit their own website because they do stuff like this They’re just like imagine of every section was like this yellow color, right? It looks much sleeker, you know Just have black with the color popping here and there not like in your face colors everywhere Sorry my We have a roof leak that was like an emergency thing We’ve got motor mediation coming because of the roof leak had been sustained in the attic before we actually saw it come through My windows are open to get fresh air in here. You’re gonna hear the school bus. You’re gonna hear the trash people You’re gonna hear probably some people walking down the street talk. I don’t know. I can’t do anything about it This is why I say I’m limited in my recording time This is the kind of stuff that I’m dealing with thankfully the kids are not here right now if they were here You’d be hearing them too So all right, let’s get back on task Anyway, as I was saying we I don’t think we want color everywhere. Do we do we friends?
0:13:38
I don’t know comment below tell me if there’s a if there’s a way to make this yellow and blue which I feel are very The they’re the same brightness. It feels like they’re they’re very competitive So I think if you just splash it everywhere it’s gonna be very hard to make a cohesive Look out of that you feel me so I just they don’t they don’t like the yellow and blue Distribution of this current design. They want more blue more yellow And I don’t know how we’re gonna handle that honestly yet We’re gonna build what we have right here and then we’re gonna talk them in to not wanting more blue and yellow places I that’s my that’s my initial strategy anyway All right enough rambling let’s go ahead and Start building and work guys. We’re doing this from scratch So I don’t even have a browser open yet. I’ve got zero prep on this project All right, so the first thing we’re gonna do is go to cloud flare and I’m gonna log in and I am going to Add a site and we’re going to add No, we’re not gonna add a site here. What am I doing? I need to go to digital gravy dot dev and I need to go to DNS And then I’m gonna add a record their brand is called always sunny which I shouldn’t comment on this but Doesn’t really it’s not really doesn’t do it for me, you know as a business name for what they do You know, they aren’t floored up, but you know always sunny doesn’t I don’t know, but anyway always sunny It’s gonna be always sunny dot digital gravy dot dev we do it like this All of these are the are the dev server so I’m just gonna pop that IP address in there and I’m gonna hit save and now we have our dev Website created as far as DNS goes now what I’m gonna do is I’m gonna go into a grid pane and we’re just going to take our bricks Blueprint and we’re gonna clone it over to And I’m gonna have to block out some of this stuff so you guys can’t see all the deeps, okay?
0:15:39
But I’m gonna go to we’re gonna just gonna search for bricks and We’re gonna go blueprint bricks at digital gravy dot dev right here This is all you have to do inside of grid pane to get started with a new client site So you’re gonna go to clone and then new site clone I’m gonna do always sunny dot digital gravy dot dev I’m gonna choose my dev server and I’m gonna hit my great clone now I’m going to select my cloud flare credentials and I’m gonna hit migrate This is going to in grid pane go ahead and build out a brand new site based on our bricks blueprint Which has everything installed that we already need everything is set up and ready to go you can see these messages right here It’s it’s cloning everything. It’s gonna automatically have the SSL certificate set up and ready to go for us when this is done We’re in we’re in and we’re we’re able to get started like that So the setup for a brand new client site is very very very minimal But I’m gonna go ahead and let this run for a second and then I will be right back All right So I just got the message that cloning is complete So I’m gonna go ahead and close this we’re gonna type in always It’s gonna sort us to always sunny dot digital gravy dot dev and I’m just gonna hit the little single sign on button right here And that should take us directly into the admin of the website And there we are so you could see that I have all of our plugins already ready to go I’m gonna pull up the plugins dashboard here. There’s everything and then you can see already under Appearance and themes is the bricks theme with the bricks child theme brick settings are all where I want them to be so We look at pages here. There’s just a home page and a privacy policy. That’s it And I can actually just trash that privacy policy. Don’t even need that Let’s go ahead and get started building so I’m gonna pop up this figma here and what we’re gonna tackle is A little bit of the header is want to kind of slap a header up there for now I want to slap a footer in there for now and then I want to start getting the home page built out and we’ll see Where that leaves us as far as time goes so I’m about 20 minutes into this but I’ve Spent you know five of that waiting for the you know the duplication of the site to happen and be finalized So we’ll call it you know we got 45 minutes or so from this point We’re gonna see how far we can get okay? Yes, let’s go to bricks templates You hear that you hear that outside?
0:18:14
That’s like the school bus like gunning it down the street all right So I’m gonna do add new all right. This is gonna be the header I’m going to select header for template type over here and then I’m gonna go ahead and publish and we are going to Before we edit that I’m just gonna go backwards here. I’m going to add a footer I’m gonna assign it to footer and I’m going to publish and then we’re gonna go in and we’re gonna edit our header So both of them exist and I think that’s gonna allow me to Jump between the two maybe not. I’m not sure. I was hoping it would let me jump Between the two inside the builder, but maybe maybe it does not all right I’m going to add a section up here now in my setup you saw me say don’t add a section I just add a div or a block or whatever it’s actually easier if you add a section just make sure you take the section tag and switch it to div But at least now you still have the inner container already done for you and then this becomes a div and once that becomes a div You’re free to use your pad header M class or whatever class you actually want to use on your header If we look at our figma file We can see that we’re actually probably gonna need two different header rows So I’m gonna need one row for the nav and CTA. I’m gonna have another row for this top address bar up here So how are we gonna handle that? Well, I’m gonna handle it by duplicating the container that’s inside and But maybe not no, I don’t think we’re gonna do that. So I’m gonna go ahead and delete Well, we’re gonna really need is another section. So I’m gonna duplicate that section Which is gonna have a container inside of it and?
0:19:58
I may let’s let’s do BG and if we take a look at this That’s gonna be is this is this a gray this is like a gray. So that’s gonna be a shade color What is our base color gonna be that would be good to figure out first? This is our base color at least for now Is it the same in the footer? Yeah, it is okay. This is gonna be our base for now. I think we can just we can get away with just using that so Let me bounce around a little bit here because I I Want to see exactly what I’m doing here. So I’m just gonna go on automatic CSS under base We’re gonna pop this color in and while I’m here. I will also pop our other two colors in just for efficiency purposes so this blue Primary color right here Grab that my yellow is right there as well. So this is gonna be the primary and Then I’m going to grab this yellow which is gonna be I’m gonna put this in as the secondary you could put it in as accent but This point. I don’t think it really matters. I’m not gonna really have an accent. I don’t think we look at the fire I don’t really see any other colors that we would possibly use as an accent color so This this is one of those areas where we would actually be able to turn off accent color at this point That’s gonna be in a very near future version of automatic CSS and that’ll actually save a lot of framework space But that’s good for now. So I’ve got my base. I’ve got my primary. I’ve got my secondary I’m gonna do a quick refresh of the builder just so that those are pulled in and then on this header right here I’m gonna do be G and we’re gonna see if like base medium gets the job done very close I can probably Adjust that shade and we’re home free this on the other hand is going to be Just straight up. Oh, you know what we’re actually getting we’re gonna need like a fixed header kind of thing Where we’re overlaid over But this is another area where you know, I’m just I’m trying to slap this together right quick So we’re not gonna deal with that right now. I am going to Put in a logo and I’ve actually got all the logo files right here. So We’ve got png pdf jpeg and AI So no SVG right off the bat. Let’s download this AI file. Let’s get this into Adobe Illustrator and All we’re gonna do is export an SVG for this right quick And where’s my illustrator? There we go. Okay, so I’m just gonna select all this export as single asset And then we’re gonna call this always sunny logo and it’s already marked for export as SVG I’m gonna go ahead and just put it in my downloads folder for now and Then we’re gonna hop over and we will drag this in now. I’ve been having a little bit of an issue with bricks and Happy files Ironically because they’re created by the same people you would think they would work really well together But you don’t get your folder structure for some reason over here on the left hand side Now creative cloud is asking me for my why is it asking me for my password?
0:23:19
All right, let’s see if it’ll go away. Go away creative cloud. Oh gosh. I don’t know what it wants for me All right, I think it’s I think it’s good now. All right, so I’m gonna insert this logo and We’re gonna go to style. We’re going to go to layout and then width is gonna be 20 rim 24 rim Yeah, they want it bigger. So let’s go bigger. All right Then we’re gonna have a nav which I’m gonna put right next to it And I actually don’t know what I’m gonna do for the nav yet. I think I’m just gonna do regular links and probably a modal or like a lightbox because I think bricks extras has a lightbox never used it before But I think it has one and so we’re gonna get that a shot for our mobile menu. So Home about a services gallery. I’m just going to Yeah, let’s just let’s add a div Okay, and then inside of that div I want to add a I want to add text and This is gonna be our Link all right, so under content Home about a services gallery. I don’t know if I want a home link, you know right up next to the logo like the logo is already there You can just click on it Let’s just start with about us for now and then on the HTML tag Obviously or actually you don’t need to change the tag to a I always look at that because I’m like Well, I gotta change the tag to a but really you don’t you can just go to this link to area and then Internal post page you can actually select your poster page But we don’t have one yet what I’m really wanting is is a builder like bricks that allows you to create new pages right from here In fact, let me oh my gosh. Oh gosh guys God, let’s just take a second I swear to God even though this was five. I was like maybe they got this pages area. Maybe it’s up there Oh my god Bricks I just I just feel spoiled. I feel spoiled right now create. Oh my gosh. I feel so spoiled services Contact us what else do we need?
0:25:31
Gallery right we need a little gallery page dude. This is oh my gosh. I am just absolutely Spoiled I don’t know how to get back now. Okay about us internal post page. All right, so it’s not there yet. Let me save and refresh But that does save us so much time having to go the customizer on the front end and yada yada yada They’re all right there. Look at this. They’re all right there. Oh my gosh. All right, so this div right here is Going to be a flex row. It’s gonna be a gap of S probably it’s going to be a flex of wrap just in case and then On this link we’re gonna call this a header Link or let’s do nav link because there’s gonna be other links in this header. They don’t the nav so header nav link That should work good. Okay, so we’ve got a custom class on there, which means we’re free to duplicate So now we’re gonna do gallery and then we’re just gonna change this to gallery I was doing this the other day for something in bricks and I was like God this is so amazing in Oxygen used to have to pull up the WordPress find your page thing search for it all that with bricks It’s just right here. It’s like dynamically pulled in so there’s gonna be services and we’re just gonna choose services And then this is gonna be about us Not about us. It’s gonna be contact us and I’ll just make it contact about that There’s contact right there. I think I want to swap services with gallery. All right, that’s good right there Head or nav link is going to be White okay, but we’re not gonna we can’t make it white yet because we don’t have anything to overlay on it The call to action is what I want to kind of figure out next. I also want to figure out how we’re gonna do this logo placement Um Okay, that that can probably just be moved up. That shouldn’t be a problem whatsoever What we do need is another div in this though Now not another div probably just the button by itself. I usually like to make those calls to action Part of the actual navigation And while I’m here before I forget let’s change the HTML tag on this to nav and And actually to really do this right so this is gonna be my nav I need another div inside of here So I’m gonna hit shift command E and add another this can actually be a block And I just highlighted everything on the page on accident, but we should survive I’m putting a block in there the sole purpose of this block is to be a UL an unordered list Okay, and then all these are gonna go inside of That unordered list and this guy says how drag and drop should actually work in a builder So this is gonna be a custom UL just because navs should be UL so they should be unordered list by default Okay, so we’ve got our wrapper that’s the UL and then these are all gonna be LIs So custom LI and I should have done this before I duplicated them that would have been much more efficient LI div custom LI there and div custom LI here, okay got my LIs on this I’m gonna do header nav UL and then I want this to be a Flex row again, this is gonna have our gap S on it. This is gonna have our flex wrap on it On this nav I can actually get rid of most of those things. We don’t need those Don’t even need the flex row and then on this header nav UL I am going to go out into code box Let’s do all this right, okay, we’re not worried about speed. We’re just worried about getting this stuff correct So this is gonna be my header I do my header nav UL and we’re gonna go list style of none I need to make sure that we’re auto reloading changes. That’s important Alright and Padding left of zero and then oh there you go look at that our nav is fixed. Okay This gap can actually be an M I’m gonna feel better with M maybe even L on that. I don’t know Let’s look at our spacing here very very similar. It doesn’t have to be perfect obviously Okay, let’s get our button in there. So we’ve got our UL. We’ve got our LIs. We’ve got our nav tag This is all this is all going well We’re going to shift command E button put that in this is going to say Book a what did they what did they want? I don’t they don’t do free estimates I think they want to book an book and appointment Was maybe their call to action. I’m getting a heavy memory usage I’m gonna tell it to free up my memory and we’ll see if it actually works. All right. This is gonna be a button primary And then on this header we’re gonna go flex row We’re gonna do a justify between and These two things are probably gonna have to be grouped together to stop them from doing that We’re gonna do an align items of center that’s gonna make sure everything is aligned perfectly with itself Okay, and we are getting there as far as just slapping together a header goes What else do we need we need this top row up here, which is just a div with these two things Okay, I see I see I see So shift command E pop in a div And on this div we are gonna do we don’t even I mean it’s a header template We can literally style stuff at the ID level here We’re never gonna use this again if we do it’s gonna be inside the template like We’re pretty much good to go so we can go layout margin left of auto Is not putting that way over there why not is it because I’m all caps with it? Yeah, it’s because I’m all caps with it Okay, all right, so there’s our div I’m going to shift command E and div again Bang bang two enters gets us two divs I’m gonna go back to um, I’m still on my parent div. So I’m gonna shift I’m still trying to learn these keyboard shortcuts. I’m on my div Command enter there we go. So we’re gonna do a flex of row We’re gonna do a I’m not even gonna worry about gaps right now I do want to flex wrap this And then we should be all right for now. Okay, I need this little address And I’m actually gonna try dynamic content with this not right now, but for this project I want to create a settings page for this client and we’re gonna be able to pull content dynamically from that settings Page settings page is gonna have things like their address their phone number Uh, the price of their special whatever, you know Content like that that we’re gonna use all over the site that if it ever updates in the future We don’t want to have to go to a thousand different places to update it Okay, so this is gonna be called Uh, this does need to have some custom classes because there’s gonna be two of them So this is gonna be uh top header and We’ll do a link top header link top header link. Is that work? I think that’ll work. Okay, but why did I put it on the div no no reason to put that on the div um In fact, I don’t even need divs in there Let’s just put the links in there. Maybe that’s what I was thinking with my brain. So it’s pop text in there Get the content in there And now we can put it on there. So top I don’t know why it keeps going all caps on me top header link and then I can duplicate that that’s gonna give us two of them Um, again, I’m not gonna worry about the gap yet. I think we’re gonna do something different here Uh, let’s Check one more time because I need a I don’t know if you guys can see it what I’m looking at right here Is this little divider line that goes between them right there?
0:34:03
Uh, and that is the sole reason why I’m not putting a gap on this flex box You’re gonna see in just a second, but we definitely need that text these links to be white. So I’m gonna do style We’re gonna do color And this is going to be white which we need to add to our Global uh, so raw For white. Let’s go ahead and save and let’s add it in all right, so both of those links are white now What I’m gonna do is add a pseudo element of before So I’m going to add a before element This is gonna be a double quote as my content, which is basically nothing I’m then going to go to style and Our width is gonna be two pixels This is an area where you can use pixels it does it absolutely does not matter here Um, with I’m just thinking height is gonna be a hundred percent and Our our background colors what we need next Um, that is going to be right now. I’m just gonna choose white just for right now But we we may tone this down in just a second. So just choose that and let’s see if we have a line We don’t we don’t have a line. So oh Gosh tell me I didn’t just do all that at the ID level Where’s my before there’s my before Good okay, I did not I did not okay, that’s fantastic Um But I don’t know why it’s not showing up where’s let’s just put an a in there. Okay, there’s an a right there So we are we’re kind of doing things right we must be missing one thing It’s layout with this two pixels Let’s just do something crazy like 20 pixels until we get this figured out high to 100% Okay, that’s not the problem right here We have another problem it could be display Okay Inline Block I don’t know why you can’t choose flex here I really need this to be flex Maybe Let’s get off of our before style content layout position I don’t know why flex is in an option here display flex should absolutely be an option here I’m gonna do this is flex row with a class and there see that’s where our pseudo element is our pseudo elements Not showing up because we’re not able to change our display properly um if I put it as block Well, I’m not on my class anymore if I put this as block It looks like block selected, but really nothing is selected if I hit block no, okay, now I’m still not doing anything I don’t know what it’s doing now oh it’s not on my All right, I cannot put flex in there, but if I if I put flex row on there It’s showing up so what I need to do is target my top header link top dash header Display of flex I Let’s save and view the front and we’re already running into issues here all right inspect You see my I don’t have oh no, I do have a pseudo element so where the heck is it It’s a before so it should literally be right before 20 pixels There it is display flex I Roe should be by default. I don’t know why it’s sending that to the next line Why is a flex item spinning all the way across I wonder if it is oh because this is It’s a div Set to display block top header, but I just said it is flex where’s our Where’s my rule from let’s just make sure code box is actually targeting this prop oh Ah, there we go again See, I’m used to writing in the classes box in the builders without a period so when I come into the WP code box I naturally sometimes don’t use a period Now now we’re where we want to be oh my gosh, okay Woo We’re off to like and what an amazing start we’re off to um All right top header link get to my before please There’s my before top header link. This should just be like 1.5 pixels. So there’s our divider We got our divider now I gotta think about this so we need some Margin On the left let’s try one in And then on the right as well of one in there’s our nice divider We just don’t want it to be on the first of type okay So I’m thinking about how to do this um before Before okay So what we actually want I can do this in bricks, but it’s harder on my brain and bricks first of type Before display none Okay, maybe it’s not harder on my brain and bricks maybe it’s harder on my brain here Now that should be first of type before No, okay Okay, sorry, I just I was getting my colon’s mixed up. I was like single double. What are we doing here?
0:40:36
All right, so the top header link first of type before is not not present So we don’t get anything on the very first link and what we end up with guys We do our little preview action here. It’s a nice little divider and we don’t have to put it div and it’s like a blank div This is floating around trying to represent some sort of divider We’re just able to naturally have one and the good thing about this is It’s future proof so if I were to need another link up there watch this I just duplicate it and it automatically has its own divider and the first one never has a divider It’s way better more scalable to do it like that Okay, and it even though now what are we doing now? It was there working now. It’s not there working. What’s what’s going on? Okay, I think I’ve lost our padding somewhere that was odd Look at that it just disappeared our margin right Is that a bricks a bricks disappearance of styling? Okay? All right, we’re back So now what we need to do is eventually we’re going to tone down that little line But right now I’m just I’m just trying to work through this as quickly as possible In fact at this point, I’m pretty much done with my header Except I want this to be pad header xs I just want a little tiny header up here and then this can probably be even pad header s We don’t need it. We don’t need to be all in them up in there And then this is eventually going to get pulled up here. These are going to be underneath it But for right now We’ve got what we want as far as that header goes. So now what I’m going to do is I’m going to flip down We’ll go out and we’ll go back to our templates We will go and tackle our footer. So I’m going to edit this with bricks And we can close that for now we can close that and let’s bring our figma back up and see what we’re going to need to build here So Let’s get all the way down here All right, so I’m going to have a normal footer. It’s going to have a sub footer Which is just going to be another container This section is going to have no bottom padding that way this last container will just sit right at the bottom It’s going to have its normal top padding. It’s going to have a one two three column grid But I’m thinking that we may add more of these columns in the future. So it’s actually going to have a Probably a two three grid and then the three part of the two three grids going to have a grid inside of it That’s a three column grid or a two column grid But that’s going to give us more flexibility there You’ll see what I mean in just a second. It’s all makes sense in just a sound. I’m just thinking you got to think in boxes here Okay, where are boxes going to be?
0:43:19
All right, I think I’m good. I think I’m good with our structure. All right, so I’m in our footer template now I’m going to go ahead and add a section This is going to be a um We’re going to go back to div here. I believe we don’t really need sections in our footer Though I don’t think it’s you know necessarily a problem I really don’t think it matters all that much. Let’s do bg base. So at least we get our base in there We’re going to duplicate that inner container right there like I mentioned We’re going to go to our id Which you could you could do a footer class here and do all this on that in fact Let’s find I’ll just do it. I’ll just do it. Okay. There’s a footer class for you All right on the footer class. We’re going to go to layout padding bottom zero Now we’re touching the bottom of the screen with our footer. That’s where we want to be We do want Probably a little bit of gap in there maybe at some point, but let’s go ahead and tackle this grid So this is going to be a grid two three like I mentioned It’s going to have a gap of probably just an m gap For right now I would imagine I’m going to guess that this is going to break to one column at the L break point I’m going to stretch this grid And that’s probably all we need at this point Uh, except I’m going to shift command E and hit a block We’re going to do a double inner on this bam bam that’s going to give us both of our columns down here So here’s our left side now in this grid right here I’m going to shift command E and hit another block and this block I’m going to go into Command enters going to get me to classes and we’re going to do a grid of two on this and then we’re going to do a gap of Maybe let’s do L on that and then a grid of M1 And then oh dear wrong shortcut just close the browser there Um We’re going to need a stretch class on there as well. So we’ll stretch that Okay, then I’m going to add a block just one block for now shift command E Hit me with a block please. There’s our first column of Our links for our footer. Okay. We got general structure going on here. Let’s hop back to the figma We need a logo. We need text and we need a call to action button right inside of this here. So shift command E logo back up Yes, that did work correctly it added it down there perfect. Okay text then Back up and then this is going to be a button Awesome So inside of that little cell right there I think we’re good. I think we’re good. Um in fact on this entire footer. I want to go with text Base ultra light. Okay Um, maybe even base light Text base light Okay, let’s see what we’ve got in our fig. Yeah, it’s kind of like the light version. Okay. It’s not pure white That’s what I’m trying to avoid the pure white. This is going to be a button primary And it is going to say I don’t know book an appointment just like we did up there Uh, so under content. I’m going to say book an appointment And I’m going to have to get all my caps and stuff. Yeah. Okay. I did it basically in title case. Okay There’s another bus for us apparently So I’m going to do a flex you can do a flex call and then a gap here or you can just do like owl in Space everything out. I don’t know why this says site title. Okay. Let’s just choose our logo insert and style With of 24 rim same same size as the one up top basically And then while I’m here before I forget these kinds of things I’m going to do alt text of Text what is that Used if logo images and said I assume this is the alt text. I don’t know why it doesn’t say alt text right there So we’re going to do always sunny logo All right, and I can’t get to that one right now, but I’ll I’ll do that one in a bit All right, so let’s get our links here straightened out. So we’ve got our services in our company So shift command e out of heading this is going to be our Services these are going to be age 3s Okay, and then what we’re going to do is call footer heading Just like that and I’m going to style typography Where’s our uppercase uppercase there we go and then I need to italicize I haven’t put our fonts in either I should probably put our fonts in next Where’s italics where is italics font style italic there we go What font is that oh that’s white by the way too, okay, so color We need to choose global choose white Perfect, okay block Block there’s our heading Didn’t I put a stretch class on this Oh, he put the block in the block. I don’t want that Block block which one has the grid on it did I screw up here?
0:49:11
I screwed up, okay, that needs to be in there But see what breaks is all easy to fix so there’s my Grid to gap L. Okay, that should be good. I don’t know why it’s not acting like these are Full height There’s one block My grid no hold on I’m all confused now where where we at with our structure here Okay This block can go away as far as I’m concerned That’s our other grid yeah, I didn’t need a block inside the block now it’s stretching properly You see though. I was like why is it not stretching? Okay, we’re good. We’re good. All right. There’s our heading Now what I need to do is shift command e-text Pop that in this is gonna be our first footer link So we’re gonna do footer link just like that and then this one is going to say Services um We should probably query these But just for right now. I’m gonna do like window tending tining Window tending and then Link type we can do internal post page except We don’t have anything to link to yet. I’m just gonna do external URL pound sign Just so I can make it actually turn into a link in that way. I can style it properly. So style color is going to be Global no, no, no, no, what what do we want we want it base light? Yeah Base light right there. Okay All right, uh, what else do we want these are not if you notice spaced out evenly um, so On our on our footer heading is one of the only times where I am going to drop a bottom margin on something And we’re gonna do var space of L And it’s gonna push it way down there and I I’m wondering if I want that big of a gap I mean it kind of looks good, right? But it’s it’s kind of It’s like it’s like reaching. It’s like hey, don’t let me go bro Like you’re about to fall off the cliff. You gotta gotta grab the hands It’s a little far away. It’s what I’m trying to say Uh, but we’ll rock with it. So I’m gonna duplicate duplicate duplicate No, I’m not undo undo undo Here we’re gonna wrap in a div. I don’t remember the shortcut Shift command P. Oh, what a guess. What a guess? Okay, but it put it in a block. Do I want it in a block?
0:51:42
I don’t know. Yeah. Yeah, I do want it in a block. I do want it in a block. Okay Uh, so because it’s a block it already has flex. I’m gonna go with a gap of M on here And now I can duplicate my links and there we go. We’re gonna get nice spacing in our links But I don’t want to gap of M. I want a gap of S Little adjustment there little adjustment. Okay Now that that block’s done I can duplicate the block and look at that. We have we’re just our footer It’s coming to life. This is gonna say our company And then I can check out our links is about us service areas and contacts Okay, so about us and then this one I can actually do internal post page and just choose about us This is service areas And then we’re gonna link to internal post page We don’t have a page for that yet, but I can just pop up here and I can do new and do service areas Okay, create page All right save Do a quick refresh on our builder and I should pull that into the database It’d be magic if you didn’t have to do that but the builder load so fast. It doesn’t really matter Okay, there’s our service areas and then this one’s gonna say contact And internal post page to contact. Okay, this we can pop out delete save Preview Okay, we are getting there. What needs to happen down there?
0:53:11
Okay Yeah, this is looking super suspect right now without the bottom of the footer. Okay um Let’s do that. So analyze analyze Div for these things. Div for these things All right, so inside of here shift command E Div one two just pop two in there grab that flex row Justify I don’t even know what the class is. I’m just doing justify and then choosing it not center Between what I was looking for justify between there you go Okay, um, we need a This is gonna be the footer Bottom just like that just footer bottom and then style border top 1.5 pixels solid Varshade medium. Now I don’t want shade medium. We’re using base for all this base medium And that should be good there and then I am going to I am gonna gap this so gap of S How much room do we have? Oh, that’s actually quite a lot That gap looks like it should match the same as this top section spacing So we can’t do that with a class, but what we can do if I want exactly match this section spacing right here watch this That’s M because it’s the default. I’m gonna go into Layout and on the margin top. I’m gonna do var section space M and it’s gonna give me I Don’t know why it’s not Where okay, let’s wear my container There’s there’s my container right there Okay, 5M of spacing works. Let’s do var section space M Look at that. So I get the exact same youth this why you use variables guys like I didn’t need to know what the value was up there I just need to know a variable that matches it Okay, now what I’m gonna do is inside of this I’m going to pad this a little bit and So our footer bottom is gonna have a padding top of var section space XS And a bottom of the same thing That might be a little bit too much if it’s a little bit too much we can just take the X off Right, we can just have S Ah, sorry, we need to take the section out. So var space S And then this may be where we get into we may want M in there. We may want S in there We’ll figure it out, but at least we’re we’re mostly good to go Okay, now what we need and this is very important guys you can’t you can’t just race through a part like this We need to make this accessible So I’m gonna have Two icons and Instagram and a Facebook um, so this is going to be footer Social wrapper Social wrapper. Okay footer social wrapper. There we go that’s going to be Flex row which it already is that’s fantastic a row gap now a column gap of var space s And then a row gap of like var space excess. I don’t really need much in the way of row gaps Uh, and then let’s do a div we need divs in here and then in and this div is going to be a footer social icon wrapper and then we’re going to add an icon and then this is going to be Our Facebook icon I don’t know how to do this quite yet with um, let’s do Fun awesome brands Let’s just do the circular icon for right now and then I want this to be footer Social icon Okay Size is going to be the same as our text text M That’s clearly not big enough text L Text XL Let’s see what we got on our figma I think we can rock with that we can rock with that. Okay, let’s just duplicate it And then this one is going to be Instagram I believe And the problem is one is square and one is not square. So let me let me go change this to the square Facebook Okay, perfect. So where is my div there? Why does this not have a gap on it? Oh, God. Where did I put the gap?
0:58:13
I put the gap somewhere I wrote the gap in somewhere. Where did I put the gap? Is it here? Okay That should be oh, that should be right. That’s why I Didn’t duplicate the div with the icon. I duplicated the icon Silly me silly me now why are those on top of each other those should be side by side if this was set to flex row Which it is So what’s the problem Whoa, what in the world Why is 100% only go to there Well, what’s happening? Oh those go all the way across what in the world dude is going on here All right, this is not There’s my icon. There’s my icon I did the stupid that I’m not even I’m not seeing right now Container footer bottom direction row Maybe it’s the it’s not the space between I don’t think Let’s take off Just by content between just for a second Oh, what is going on something is whacked out okay, it’s not the just by content between that’s doing that So we’ve got a div here footer social wrapper column gap row gap Oh, look it got a magical width 100% from somewhere did you guys see me add that I don’t remember adding that Okay Now Why are we not putting things in a row though?
1:00:25
These two divs should be in a row Flex row it’s this kind see I can flex row with with this so why is bricks not able to do it with the normal It is display flex Oh, there you go. It’s display block. That’s why Confusion confusion okay This can now become Instagram. I don’t know how it got back to being Facebook but We needed to be Instagram font awesome brands font awesome brands Okay, they look good, but we’re not done yet. All right. That was a little treacherous So now what I need to do is insert text This text needs to stay follow us on Facebook and I am going to take that social icon wrapper. We’re gonna change that to flex row Okay, that’s good to know that we’ve got to change that to flex if we want to use the icons for flex Okay, I’m used to oxygen is already done for you and look I’m a proponent of the divs being blocked. I’m just not used to it yet. Okay. I’m not used to it It’s got to get used to it. All right, so that’s good there I need to do that again here. So text bam This is going to say follow us on Instagram I accidentally hit the breakpoint viewer Okay, so now what I got to do is we’re gonna Name these things up here too. So this is gonna be the social wrapper This is gonna be a Social link wrapper This is a social link wrapper. I don’t know if you guys can see what I’m doing. Let me um collapse all these Okay, now we can expand what we need Okay, here’s what you were looking at what what I was doing right there if you couldn’t see so there’s my icon This is gonna be accessibility text If I can type properly I am getting a little bit of lag here accessibility text. Okay, and then What I want to do with the social link wrappers is I want them to actually be links So we need to change the div to an a link like that And then we need to What else do we need to do to it?
1:02:57
um Usually it gives oh select link type that’s that’s right external URL and then we’re gonna do a pound sign Okay, we need to do that here as well. So this social link wrapper a link External URL pound sign. Okay, those will get linked soon, but not not quite yes not now All right, here’s something I wanted to check too is can we override this properly or do I need to fix automatic CSS? Can we override this color? So I’m going to choose a color here. We’re gonna do base. Let me go to my bases Medium and I cannot this was a oh no, I can it did work. Okay. This was a bug report on on ACSS So I was just checking it out The accessibility text color doesn’t matter because nobody’s gonna see it because we are gonna do hidden accessible bam And you see it disappears and we get a little a indicator, okay hidden accessible there So now we have nice accessibility text to go with our buttons But I don’t want based medium here. I want base light There we go save see how this you know it takes time to do stuff right But our footer is really coming together. Let me check on our footer bottom style uh border I’m not kosher with this color here. Let’s do base dark There we go. This nice and subtle in there. We don’t want it to go. I want to be crazy in your face, right Okay, how we looking how we looking We need all this stuff over here copyright 2022 terms and conditions privacy policy disclaimer Okay, it should be very easy to add inside of our here. So this is gonna be footer Bottom I should have done footer bottom like that honestly. I don’t know. I don’t know. Okay, so I’m gonna call these Footer bottom legal links Like that legal links footer bottom legal links Uh legal links rapper legal rapper legal rappers the hardest part is thinking of names for this shit. Okay, so there’s that um That is going to get a Display of flex Okay, perfect and then I’m going to add a link in there or really just text this is gonna say Uh, this actually won’t be a link. This will just be text so copyright 2022 Where’s my copyrights? I can never remember. What is it function Function G or something all G Option there it is option G okay Copyright 2022. Let’s put the copyright symbol in the middle there copyright. Oh, that was not the right clipboard paste Copyright 2022 Um, and then they are always sunny LLC. I think I don’t know if they’re an actual LLC. Okay, so that’s our text. This is gonna be Footer bottom Legal text and then we’re gonna have a footer bottom legal link. I don’t think we actually need that per say Okay Okay, and I’m gonna refresh the bill there real quick See when you get rid of some of this lag and I want to check on my time. We’re probably out of time We are out of time my friends So I’m gonna finish this up and then we will do the body of the homepage in our next episode. All right So this is going to be footer bottom legal link Just like that and this is going to say disclaimer right what did it actually say the first one’s terms and conditions terms and conditions Link type Let’s go back up here So we’re gonna do legal I actually can’t nest things in here, but that’s okay Uh, we’re gonna end up nesting those on the front end in just a second terms and conditions Uh privacy policy Cookie policy Turns to use privacy policy cookies. That’s probably all we need uh disclaimer Create page. Okay, save quick refresh now. I can actually put those in All right, it has a class so I can duplicate duplicate duplicates. We got terms and conditions. We’ve got Link to internal post page privacy policy Okay, and this one I can actually choose internal post page now terms and conditions This one is going to be disclaimer And then this one is going to be our cookie policy Perfect And let me collapse this again so we can get to where we can actually see what’s going on This is going to be legal and then we’re gonna have copyright We’re gonna have uh Link I’m just gonna put Basic stuff on here Okay, and then on our legal wrapper all we’re gonna do is apply a column gap of space s Okay, that looks good. This will be space excess I’m not doing this on my class like I should be Just cancel those out Okay, bam Bam thank you Make sure that we actually put it in correctly Ah Miss click Okay, uh those need to wrap as well in fact this entire this is flex needs to wrap Okay safe And I’ll put that on the class instead of the ID Okay, my friends Moment of truth. Let’s see what is broken. What is not broken? Uh-huh. Let’s pull this in Okay, those are all wrapping That top area is not looking so great is it this up here see it got some issues here So we’re gonna have to flex column that at a certain breakpoint probably M or L. I’ll I’ll say maybe L. I don’t know I’ll show you how to fix that but check out down here in our footer We’re already rocking like I mean the guesses the guesses for where to stack The grid are so on point. I just want you to notice that Just so on point with the guesses on how to stack these All right, how are we looking down here?
1:10:37
We need a more of a gap here between those two items that were originally spaced between Okay, but we are I mean out of the box. This is not bad. This is not bad at all So right here footer bottom We need a row gap of our space s And we also need a column gap Just to protect our content from not getting too close To each other. I mean, I’m actually gonna go with an excel gap in there All right, that footer should be fixed now So we’re gonna rock and roll with this Notice they won’t get so close to each other now before they stack there see See how it’s it’s stacked automatically and now we have a nice gap there Which by the way guys is gonna automatically match the gap there now? I would normally tighten this up just a little bit But if you tighten this up too much because these are links You’re gonna get a warning in Google search console and accessibility related stuff and yeah on and on and on It’s gonna flag a warning and everything that clickable elements are too close together So even though it might look better with tighter spacing here because these are clickable elements You want them to have a healthy amount of spacing So that it’s for user experience basically But I mean look at that. I mean this is like I’m just out of the box response in this. I don’t have to worry about a lot of stuff On point absolutely on point. Okay I’m just thinking that we miss anything. I this gets too close to this So there’s one or two ways we can fix this we can go With a bigger gap here. I’m just gonna do an XXL gap. That’s gonna give us more space there That’s that’s fine. This needs to be a paragraph tag and We’ll just put loremips them in there for now. Just make sure that this is you know enough space Okay, that’s my that’s my notice to go on a walk which I will probably do very shortly Okay, save this is looking really good guys. I want to get our fonts in here before we check out I want to get our fonts installed. So this is metropolis which I believe I’ve saved. I’m really liking this font lately And it’s metropolis for body text as well So watch how easy this is in bricks guys. This is not even a thing in oxygen I’m gonna go into bricks custom fonts add new Metropolis and then I’m gonna add a font variance. I have two variants right here. You can see them and I’m just gonna go into my Probably my drive I think where is it fonts there we go metropolis sources What are these these are no I want fonts. I want true type Yeah, I want my ttfs. So my 400 I need metropolis regular Okay metropolis regulars right there. I’m gonna pull this into my ttf field. Oh, I can’t do that I’m gonna hit upload and I’ll pull it in here. So there’s regular and then I’m gonna get the Bold as well. So there’s bold. I don’t think I’m gonna use black Maybe I will let’s upload it just so we have it So we’ll upload black will upload black italic because we need black italic too In fact, I don’t know if We’re probably never gonna use normal Head normal head we’re only gonna use italics for headings So I don’t even need that normal we won’t even load that normal black Um, let’s go ahead and select regular And then I need a regular italic as well Um, but I’m gonna upload this black one first. So this is gonna be black italic And I’m gonna say that this is 700 italic Okay, and I’m gonna add one more variant. This is gonna be normal italic Okay, my ttf Let’s find normal italic regular italic right there So I’ve got all of mine. We got regular italic regular and black italic. This is this should be black 900 Okay, publish I’m getting another ram warning Hopefully we can settle that probably because like illustrators open and Ecam lives open and figmas open and got too much stuff open Okay, guys our fonts our custom fonts are loaded in bricks How nice is this it’s again, it just feels like Being spoiled just a little bit feels like being spoiled. Okay, now I’m gonna go up to theme styles And we’re gonna go to typeography and I’m going to go to all body text and I’m gonna say hey font family Give me some metropolis font weight 400 Okay, now I’ve got metropolis font loaded in Next thing I’m gonna do is I’m gonna go to all headings font family give me metropolis give me 900 give me italic Save fonts are in guys I’m liking it now this this Body text maybe a little thin. I may want to go a medium Let’s just check this out real quick. So I’m gonna go back here. I’m gonna add a font variant I can always unload these if I want to Um, let’s see what they have it is they do have a medium they have a regular they have a thin I just want to see what medium does for us. Okay, so let’s do um true type font upload and let’s do medium We’ll select that we’ll update it We’ll go back in we’ll refresh the builder I’ll go back to my theme styles I will go back to body and I will choose 500 That’s what I think I want to go with there’s 400 there’s I definitely want to go with 500 Okay, so now what I can do is in here. I can just delete this 400 update We should be good to go Let’s view this on the front end. We’ve got our header coming together We’ve got our custom fonts in and and setup. Oh, let’s get our button styled. We can do that real fast too so check this figma We are bold italics or black text and italic on our button So in automatic CSS we’re going to go to buttons and links We’re going to go to button font weight 800 um text decoration. Oh, we can’t do italic yet on buttons and automatic CSS. I’m going to have to make a note of that And we’re going to have to fix that Okay, but for right now what I can do is just easily come over to where did my codebox go All right, I’m going to hit save changes there. Let’s at least see if we got our bold buttons There you go. We got our black button text, but I want white text on these buttons too um, so I am going to come down to primary button and text color is going to be var white save. So now if I refresh we’re going to have white text on our buttons Perfect and I need uppercase too on our buttons. So we’re going to go text transform capitalize save And then we’re going to have all caps on our note not capitalize. I chose the wrong thing. I want uppercase All right, and then I’m going to go back and there you go. There’s uppercase Um, so what we need is to just make our That’s not 800 maybe it was 900. Yeah, I don’t think 800 is a loaded font It’s 900 Why are we not getting 900 on our buttons?
1:18:34
Okay, let’s pull this up Button primary font wait font wait 900 is right there Is it That button is 900 that that or that heading is 900 that is not 900 I will tell you that right now Is it because Is this not pulling them a tropicalist font? I feel like it is It’s not that font weight 900 uppercase All right, I’m stumped. I’m going to have to investigate. I do not know why I’m not seeing it There’s nothing obvious to announce me Of why that would not be Font weight 900 like it’s clearly being structured to be right there Okay, we will we will investigate and I’ve also got to make it a talic as well. So in wp code box I’m going to do buttons and then this is going to be um Class star equals button double dash that basically targets all buttons Let’s just do it here as well font weight 900 I’m going to slap an important on it. I don’t care font um Style italic save There you go. There we go. All right, we’re fixed up. I don’t know. I don’t know what the deal is But we’re good to go now. I just want to see Yeah, that’s about right And square buttons all this is missing is a little tech shadow which we can we can add at a future date I am out of time on this guys We will be back next episode to tackle the homepage. We got our header built out. We got our footer built out Um button style fonts in I think we make good progress. I’ll be back. Peace
