premium training

Peachtree Fence Part 02: CPTs & Primary Template

This is a premium training for Inner Circle members only.

More about this video

Blueprint, generating custom post types and setting up primary template

Video Transcript

0:00:00
Alright guys, let’s go ahead and get started on this project. So I’m going to take you into the Blueprint, basically just clone my Blueprint. And like I said, we’re starting from scratch. What I want to accomplish in this episode is the custom post types. Kind of just getting them generated, not even really like setting them up all the way, just getting them into the database. And then we’re going to do the primary template. So header, footer, menu, all of that stuff. So let me go ahead and screen share here. Well, we don’t want to zoom in, do we? Okay, so here I am in the Blueprint. Everything is set up and ready to go. All the plugins are installed automatically for me. All the settings are in the way that I like it. And we’re ready to rock and roll.

0:00:42
There’s all of the plugins right there. I actually don’t need Swiss knife. We get rid of that while we’re here. And we should be good. Okay. So first thing I’m going to do is go to Metabox, Post Types. And I’m just going to add these to the database real quick. So if you remember back, here’s our list in Base Camp. We have services reviews, projects, and FAQs. So we’re going to do services, service for the singular name. Now in Metabox, it uses the singular name for the slug, which does not make sense to me at all. So I use the plural. Every time I do this, I’m going to hit Publish there, add new post types that was services. Now we’re going to do reviews.

0:01:23
Change that to plural. Just hit Publish. I’m not setting these up and configuring them yet. I’m not adding custom fields yet. I like to have these in the database. So it’s like I’m just getting a nice, easy step out of the way. Nice quick win right off the bat. New post type here. So that’s going to be FAQs. FAQ. FAQs. And I’ll hit Publish on that. New post type here. And this is going to be what else do we have? Services reviews, projects.

0:01:53
Publish. Okay, cool. Nice and easy. So if you’re intimidated by custom post types, adding them is as simple as that. We didn’t do the custom fields and all that, but there they are. So it’s this quick thing to get out of the way. Now we’re going to do Automatm.css setup. So here’s my reference site. I’m going to go ahead and use hoverify. We’re going to color eye dropper. We’re going to pick out this color right here. That is going to be my base. These buttons or this color is going to be my primary. And then I’m also going to be using shade down here, which I think, I don’t know. We’ll see.

0:02:35
We’ll have to adjust the shade values probably. But we don’t actually have to add a color there. I don’t think. And really that’s it. It’s like these three colors. So let’s go into automatic. I just sampled the base, I believe, that actually get it correctly. Color eye dropper, pick color here, and then copy. I don’t use hoverify that much. All right. A little bit of UX stuff going on. All right, base. So I’m going to paste that in that looks like that’s the value. OK, now I’m going to go. I can’t grab it there because that’s hovering.

0:03:11
That’s hovering. Here it is right here. If I can get an eyedropper on that. OK, that looks like it works. Copy that. I don’t know. There’s no feedback when you click the copy button that it actually copies something. All right, so let’s go to primary, put that in. That looks like it. So I’m just going to leave secondary and accent alone for right now. And then shade will see what needs to happen there when we get there. OK, so colors are set.

0:03:42
Viewport is already set, 1280. And I’ve got 1280 set inside of oxygen. That’s my default. And we don’t have to do anything else right now. So let’s go ahead and jump into our template. So I always have a primary template set up and ready to go inside of my blueprint. It only has an inner content element in it. But what we need to add to this is this header strip up here, this header right here, which appears to be sticky. So we’re going to have to deal with that. And then we have, and I’m just going to probably, if we have time, I’ll do the sticky. But if I’m running short on time, my kids are in the bath right now.

0:04:22
I got to get ready for dinner, bed, all that stuff pretty soon. So we may not get there. But we’re going to do the header, try to get a menu up and running. This is interesting that there’s, OK, that’s good. We’ll have to fix that. And then these two footers. OK, I talked enough. And now the oxygen builder loaded. So I’m going to add, wow, we don’t want to do that. OK, you guys don’t need to see Final Cut Pro. Good. OK, that’ll give us some extra resources, too. I close that out. Add header builder.

0:04:59
Add section, add section. I’ll explain what I’m doing here in just a second. And we need the header builder to be above the inner content. OK, so this section right here, I’ll just rename it. This is going to be, oh, still can’t select all. I haven’t fixed that yet. That’s going to be footer. I call this the subfooter. And this, of course, is the header. And then we have our inner content. All right, so the subfooter, both of these are going to get the footer tag on them. And this one is going to get, add section, xs. All right, now our header row right here is going to get, add header and probably, M, at least to start with.

0:05:46
OK, and then the main header here, we’re going to need another header row. So I’m going to add a header row. And this is going to be the top header top. And I need to actually move that up there. And then this is going to be header main. And then I’m going to save. And it looks to me like the header is doing something weird with the padding. I don’t know. We’re going to have to look at this in a second. I don’t know if they’ve changed something in 3.9 related to how that pad header class behaves, but we’ll find out. All right, so this header row is going to get a BG of base, which was, if you remember, that color right there that we copied.

0:06:33
And I’m just going to go ahead and add an image in here. Oh, no, now it looks fine. OK. And then I have, I believe, on my desktop, two white versions of this logo. I’m going to pull those in. And it’s going to be this one that we’re going to use and my windows in the way, but that’s OK. All right, I’ve also got to remember, guys, I’m sorry if I forget. If this structure panel gets really long and it goes behind my person down here, my floating head, then sometimes I forget. So I’m sorry if that happens. All right, where is that image?

0:07:14
Why can’t I see that image? OK, let’s add a width to it of 12 rim. There it is. 14 rim. 22 rim. That looks good. How big is it on there? All right, they’re always going to make the logo, want to make the logo bigger. Let’s go 24 rim. All right, safe. Y’all know how it is. All right, this up here is going to get pad header XS. And we are going to throw what needs to go up there. Like a phone number, the city, and then another list of links, which I don’t think that actually has to be a menu.

0:07:55
I think we just throw some links up there manually. How does this degrade on mobile? Let’s check out what happens on mobile determines how we need to do that. OK, just that row just disappears on mobile. OK. All good. About latest projects, reviews, contact us. All right, I’m just thinking through all of this stuff up here. So this is going to be a div, a div, and a div right there, a div, a div, and a div. All right, so we’re going to go add div, duplicate, duplicate. So there’s our three divs. OK, so this one is going to be called, we’re going to call this header meta, or header contact info.

0:08:39
I’m terrible at coming up with custom class names, header contact wrapper, or G’s. I’m just going to go with header meta wrapper on that one, and then on this one as well. And then this is going to be, and really, I’ve just screwed this up already. Let’s go to manage selectors and uncategorize. We’re going to delete that. Starting over header top meta wrapper, copy. OK, header top meta wrapper. There we go. And then this is going to be header top menu wrapper. Or yeah, we’ll do menu wrapper. That’s fine. OK.

0:09:34
Margin left auto should have sent it to the other side. Oh, but it’s in row left. So it can’t go over there. All right. Oh, OK. Dragon drop not so hot right now. Thought they said they improved that. OK. Yeah, that’s fine. Now what we need is a phone icon and a little navigation icon. I’m wondering if I should probably already have these. So we’re going to go icon. I’m going to try. Oh, wow. Oh, I need to fix my blueprint.

0:10:13
I don’t have my really good icon set in here. OK. So this is going to be a phone. And I’m not doing linear. Let’s just do font awesome. And add a link. Actually, this all needs to be. This whole div needs to be a link wrapper. So I’m just going to add text here. That’s going to be the phone number. This header top meta wrapper needs to be horizontal flex. Put those things side by side with a middle alignment. This is going to be header top meta wrapper icon. And then this is header top meta wrapper icon, not icon meta wrapper text. OK.

0:11:02
And then that is going to be copy, paste. This icon is going to be 24 pixels. Look at that guess right off the bat. Size and spacing. There doesn’t need to be anything fancy happening here. You can literally just use the ends. We’ll just do 0.5. And then I’m actually going to delete that and just duplicate this. That’s going to be a lot easier. All right, we’re going to change that icon to a nav point. But I don’t know what those are called. A pin. Kind of. Oh, geez. I hate this.

0:11:41
And now we’ve got to look manually. How about map? Ah, there we go. It’s a map. OK. Nice. All right. Now what I want to do is we need margin on the right or margin on the left. We need margin on the left, but not on the first one. OK. Let’s do it that way. Size and spacing. Margin left. Let’s go M1. And then we’re going to go state add state first of type margin left 0.

0:12:14
Great. So that adds by adding another one of these. It’ll just keep spacing them out. But there’s no space on my first one ever. So that’s good. OK. And then that is actually a city name, copy. OK. Boom. And yes, folks, that is the real name of the city. All right. So that is pad header XS. But this is pad header M. That’s not correct. Do do do do do. OK.

0:12:46
I wonder what it looks like on the front end. Let’s go see. Ah, that’s perfect. OK. So it’s just not looking right in the builder at the current moment. OK. So look, we’re making like super good progress. All right. So now we need about latest projects, reviews, and contact this. So we’re going to add a link here. And this is going to be called about. But first, we need to give it a class. So this is going to be header top. No, this is a menu, a link, header top menu link. OK.

0:13:23
Cool. And then we are free to duplicate, duplicate, duplicate, duplicate. I think there’s five of them, if I remember correctly. This is also going to be horizontal, middle. And then we’re going to do literally the exact same thing, except I’m going to do to the right, margin to the right. So I’m going to go size and space saying, margin to the right, M1, and state, add state, last of type, 0. OK. And then we are going to latest projects, reviews, contact this. Delete. OK. Now these need to be that color, which is that’s the base color. So we can go on that class, typography, color, var, base. And then the hover should still stay exactly the way that it is, which is the primary hover value by default, which is a little light.

0:14:32
No, but it’s fine. I think it’s fine. We can adjust it a little bit if we need to. All right. We need to make that disappear, don’t we? So header top, this is the header row. I’m guessing it’s going to be at like 992. That actually all still fits pretty well at 992. So 768, we’re just going to chop it. So I’m going to go to layout and go none. All right. So that’s gone. That’s good. Now we have this header here. And remember, we’re going to have to make eventually a sticky version of this.

0:15:07
But for right now, we’re just going to rock and roll with the main version. So I do actually need a menu here. And I was debating, yeah, I’m just going to use the pro, even though I hate the pro menu module, like it’s what everybody has in their oxygen install. And this is what we’re going to use. So I’m going to do pro menu. Great. And I haven’t made a menu yet. So what we’re going to do is just leave that for now. We’ll come back to it in a minute. And then we’re going to throw in a get a quote button. But I usually don’t use real buttons for that. But I guess I’m going to have to here.

0:15:52
We can always try to work on this later. So button access, now button s is what that’s going to be. And then it’s going to say get a quote. And then I need to change my button rounded property, obviously. And we need to drag this over to row right. Great. Drag and drop just absolutely phenomenal as usual. All right, that’s looking good. That actually doesn’t need to be button s. Just leave it as we’ll do button primary. It’s probably good enough. OK, let’s hit save. Let’s tackle the footer. And then we’ll go make some automatic CSS adjustments.

0:16:35
So this is the footer here. And we’re going to go with shade. I would say that shade dark. Maybe it’s shade ultra dark. I don’t know. So bgshade dark. And then down here, we’re going to go bgshade ultra dark. OK. Oh, well, that helps if you type in the class correctly. bgshade ultra dark. OK. Now let’s see how close those are. So ultra dark needs to be darker. Dark is like, I don’t know. It needs to be maybe a little darker, but it’s almost right on.

0:17:17
All right. And then we need to throw this down there in that sub footer. And we’re just going to go with text. Now we’ll probably do shade medium on this. OK. Might have some accessibility. We’ll have to check that for accessibility later on. And then I have pad section XS on there, save. See how that looks on the front end? There we go. All right. So pad section XS needs to be a little smaller, a little tighter than that. That’s still a little too much for pad section XS. So what I can do is just change my scale.

0:18:07
We’ll make my scale a little bit more open. I don’t even know what I’m saying right now. Open doesn’t make any sense. A little bit more aggressive. Can’t find the right word. All right. We need one, two, three, four columns. And those columns are like awful. Like that’s way too spaced out. This probably needs to be one, two, three, four. I would say five. Let’s span this two and then leave the others. Let’s at least try that. So I’m going to add a div. And we’re going to say grid five.

0:18:43
Not rid five, grid five. And then we’re going to add a div. And then two, three, four. Just four divs. Because this one is going to be span two. Yeah. Call span two. All right. Now we’re going to need some gaps. This might end up being a little too narrow for those links. I’m hoping not, but we’ll see. All right. So now we need that stacked logo. Someone added image. I’m also going to add this little text.

0:19:24
And then we need a phone number down there as well. So we’ll add text. OK. And while we’re here, let’s just do text shade light. OK. And then we will add another text for the phone number. That can actually be a link, though. So let’s do text link. All right. Let me pop the phone number in there while we’re here. Perfect. OK. So this is going to be browse, stacked, move my camera, window, come back. OK.

0:20:05
Let’s go with size and spacing, max width, rim, 24. Let’s go. This is like the only instance of this logo, and it’s in a template. So you can literally do this at the ID level. It’s not a big deal. Margin bottom. Let’s hook in for this. Bar space S. Seems good. What am I doing? Oh, I’m trying to add that as a class. OK. Yeah, here bar space S. Yeah. It’s late in the day. All right.

0:20:48
This is going to be called phone large phone link. Yeah, we don’t phone phones not really descriptive, right? It is a phone link. So we’re going to say phone link. And we’ll do Excel. And then we will do typography, font size, bar, text, Excel. And I don’t know. Looks right to me. All right. So color, bar, primary, phone link, so why did it lose its color? And why is it not inheriting that? We’re going to check on that in a minute. Bar, primary, hover, save.

0:21:33
Let’s also, oh, you know what we need. Hold on. Sorry. Let’s think about this. Let’s do this differently. Let’s, I messed up again. Let’s go to setting selectors, phone link Excel. Let’s not do that. Let’s do phone link like that. And then that’s going to be primary. And then the hover is going to be the hover. And then we are going to just use a text. Let’s just use text Excel on it. It’s only instance of it. It doesn’t really need to be a thing.

0:22:15
But on phone link, what we can do, the reason we did that is so we can do font weight and make it super bold. And then change its line height. OK. I think we’re good. Save. See how we’re looking? We’re little too like things are too tight. And I don’t even know why I’m looking in here. It’s just super late in the day. Margin Bottom, L. Little add a little hierarchy to the spacing. Might look better. There we go. Now we have some separation.

0:22:54
That’s looking a bit better. OK. Let’s try to tackle these. So this will be fences, gates, and operators in our company. So we’re going to add a heading. That’s going to be an H3. That’s going to be called the class of footer heading. And my type, fences. OK. Yep. Duplicate, drag, gates, and operators cut it very close. What else we got? Our company. OK.

0:23:40
So this obviously is way bigger than it needs to be. So let’s go ahead and take off the call span too. Let’s take off the gap of M. Let’s try Grid 4 and just see if evenly spacing everything out helps. I still feel like that’s going to be super cramped. Gap, M. OK. I’m also going to stretch these. That’s going to make all these divs go the full height of this container, which they should be anyway. Let’s add a link. And let’s call this a footer link. And let’s change its color. Let’s do shade light.

0:24:31
This is going to be a shade medium, I think. Yeah. I don’t know. We’re going to have to check that for accessibility. Size and spacing, margin, bottom, bar, space, M, S. OK. Perfect. Footer link. These big new slight du M’s probably. Yeah. OK. Sense installation, sense repair. I’m going to delete copy, paste, gate installation, and then gate service, paste, about us, latest projects, contact us, and get a quote.

0:25:49
And we’ll add one, two, pay an invoice. That, OK. Great. Now, I would guess at the L, we’re going to want two columns. Yeah. Oh, that’s not how you do that. Grid L, too. Thank you. All right. That looks super janky, doesn’t it? See how we want to approach this? We want three at the L. OK. So I’m going to take off grid L, two, and we’re going to go grid L, three. But on this column, right here, call span L, three.

0:26:52
Yes. Perfect. And then we also want to come to that div and verticalize everything, verticalize, you like that, and center. OK. That’s getting a little bit better there. And then we can also probably go at this breakpoint, margin bottom, var space M, push that stuff away, maybe L. Yeah. Just like that. I think that works. And then we need to check on what we’ve got going on at the next breakpoint down, which is going to be two columns. Or now we’re just going to go to one. We’re going to make this super easy.

0:27:41
So grid M1. And this needs to go call span M1. Perfect. If you don’t know what I just did there, you’re going to have to rewind and study up, because I can’t explain it to you. So vertical left now. OK. We could center everything like at this point. I wonder if that would even look better here. If I centered that, and then at this breakpoint center all of these, that probably looks the best. And then, yeah, I don’t know. It’s something I have to come back to the next day, and decide.

0:28:40
But I don’t know. I think that looks pretty good. I think my ArloGo is a bit big here at this breakpoint. So what did it start out at? 24 rim. So I would say here we can go to 18. And then here we can go to 14. All good. All good. All good. OK. Kind of liking it. All right. So we’re going to add a link wrapper to this logo. And we’re just going to put a forward slash, which means link me to the homepage.

0:29:22
Love it. I just love how I add a link wrapper in oxygen. Now I don’t have a logo anymore. Great feature. All right. Refresh. Oh, I literally don’t have a logo, because I added a link wrapper. What in the world is going on here? There’s my link wrapper. There’s my image. Is it because my link wrapper needs the sizing? No. 100%. Wow.

0:29:57
That’s awesome. That’s an amazing feature. Definitely not there. OK. Let’s try this again. Add image. These are the things I should send oxygen a bill for. You know what I’m saying? This is like times money. Time is money. Add a link wrapper. It’s gone again. All right. I don’t know what to do. I’m going to have to refresh the builder.

0:30:29
Come back, try it again. If it still doesn’t work, file a ticket, I guess. All right. The builder is reloaded. We are going to add an image. We are going to add a link wrapper to it. OK. It’s actually there this time. And I’m going to browse for the image. And fortunately, now it’s gone again. So if it’s an SVG, there it is. OK. All right. Rem 24. Let’s move it.

0:31:08
And let’s just do the margin bottom again. How did I get? I did not select the link wrapper. I’m trying to select the link wrapper. Margin bottom out. OK. That’s better. All right. Hit save. Now we got to do. Just don’t lose anything here. Go back to my link wrapper. OK. Back to my image. Size and spacing.

0:31:40
Why don’t I just do this? Why don’t I just make the image with 100% and then on the link wrapper, let’s add everything to that. So we’re going to go with 100% max width Rem 24. Then we’re going to go down to this break point, this break point, and do width Rem 18. And then this one Rem 14. OK. We are back in business. All right. Let’s tackle this header up here. So this menu I’m going to margin left to M about that much. See if that works well. Before we go any further on this, first let’s add. Oh, God.

0:32:37
We got to add a link wrapper. Oh, gosh. What’s going to happen? All right. Add link. Oh, my gosh. It didn’t disappear. Imagine that. Save. OK. All right. We can go back and add our menu now in the admin area. So I’m going to go back to admin. Appearance menus. Main menu.

0:33:03
And we’re going to add items. We really need to do this on the front end. So I’m going to visit the website. And I’m going to go to the customizer. And what we are going to do is reference our pages right here. And we’re going to just knock these out. Because doing it in the customizer, if you’ve watched my other tutorials, is the fastest way to add new pages. Because it actually adds the pages in the back end in the pages area. All right. So we need about latest projects, reviews, about latest projects. That’s actually going to be, that may not be a page.

0:33:46
It may end up being an archive page. But we’ll just leave it a page for now. But we may come back and change that. All right. So about latest projects, reviews is going to be an archive page. So we’re not going to worry about that yet. There’s actually probably an already a link for it. Contact us, get a quote. Get a quote, OK? And then, where am I? My brain’s all over the place. Fence installation, gate installation, gate service, those are actually in the CPT. So if we go to the customizer and come down to services, we can add those here.

0:34:30
And see, here’s the service archives. When I just said there’s probably already a link for it, there’s the review archives. So I can just add that. All right. So services is going to be fence installation, gate installation, and gate service. OK. Perfect. All right. I think we can hit publish. But this is, OK. So this is the main menu. I just added those pages. But our real menu only needs these things right here.

0:35:04
So what I’m going to do, I wonder if we should call this something else. We’ll call this full menu, publish. OK. And then, I am going to create another menu. And this is going to be called main menu. And then I’m going to add fence installation, gate installation, gate service. And then I’m going to add. And this site, it’s a drop down. But it’s only one thing. Now, later on, we’re going to have all those long tail service pages in here as well. But for now, it doesn’t make sense to have that be a drop down. So I think we’re going to lose the drop down.

0:35:50
Now, we’re just going to go fence installation, gate installation, and gate service. We’re just going to go with those three things right there. So let’s try that. Fence installation, gate installation, gate service already done. It’s already done. OK. Save, publish, go back. Awesome. So I am going to go back in the oxygen templates and edit our primary template. All right. So we’re loaded again. I’m going to grab this. And I’m going to choose our main menu.

0:36:21
So I only have those three links right there. And we’re going to attempt to style this. And if you’ve seen this before or used the promenue before, you know how treacherous this is. So the color of my hold on, go back. Typography, hover, and active. OK. Yeah. Typography, var, and we’re going to go with. I think we should just do white. So we’ll just do shade white, hover, desktop menu, typography, color. See, this is where it always confuses me, right? We’re going to go primary. Yeah.

0:37:06
All right. It’s acting like that’s going to work. OK. So back here, spacing and alignment. So we’re going to go item margin. I can do the same kind of stuff I did up there to margin those out, but I don’t know. We could just do it on both sides. That’s too much, isn’t it? OK. Let’s do this. Let’s take off that margin. Let’s go with where did it go? Desktop menu, spacing. Where did my, there’s margin there.

0:37:55
Why is it gone? 0.75, 0.75. And then on this one, we’re going to go spacing on the right. M1 toe. Oh, is that not, we need our link wrapper. OK. Margin right M1. All right. That spacing looks pretty decent. Oh, I’m on the hover. Desktop menu. Spacing. OK. We don’t need extra spacing on hover. Go back to here.

0:38:33
There we go. OK. Safe. That was close. It was a close one. OK. There we go. Now, because we’re not doing dropdowns, we’re not actually getting into super treacherous territory with the pro menu module. But we will later, I’m sure. I’m trying to figure out how much I want those spaced out. OK. That’s actually pretty good. I like what we got going on here.

0:39:07
OK. Let’s go back to admin here. And let’s go to automatic.css. That’s going to be super rounded on our buttons. So we’re going to go to buttons. And then we’re going to go to button radius. And this is going to be like 30 rim. We’re just going to hit save. And then we’ll check out what we’ve got going on on the front end. So there we go. We got our nice rounding there. We’ve got a little extra padding. We don’t want that much padding. So we’re going to go 0.75M and 0.75M. There, save changes.

0:39:44
Oh wait, no. Left and right button padding still needs to be, we’ll go like 1.25M. Let’s check that out. There we go. Maybe even more. I like a lot of left and right padding. OK, that’s better. All right. How are we doing? So we need to see what’s going on with mobile now. Yeah, that’s needing some adjustment. So this button is going to disappear at a certain break point. We’re going to figure out where that’s going to be right now. I really don’t want my logo just shrinking itself down like that.

0:40:31
What if I put this in the middle? I don’t really want that in the middle, but I really hate the header builder. I honestly I do. Now what I can do is take that padding off there. OK. And see, this is not really going to be centered properly. I don’t think it’s dependent on some other things. But we’ll rock and roll with that for right now. We may come back later and make adjustments. Let’s figure out where this needs to disappear. See, the other thing is my, I want my mobile menu on the right. But because it has to be in the center column, like when it goes to mobile, I want it to be on the right. Maybe we should just do it kind of traditional like this.

0:41:34
So my button is going to have margin on the left. That’s, I think that’s going to be the best way to do this. And then when we get to 992, let’s just go ahead and ditch the button at that point. So I’m going to go lay out none. And then we can leave those, I think, at least for now. We’ll toggle this to mobile at 7.68. And now we have to do the mobile menu. OK. So open icon layout. It’s called bars. Get rid of the menu text. icon color, shade white, above and below, zero, zero. icon size is fine, padding zero. And then it always does this, right?

0:42:42
It’s not centered in its thing. And I always forget why that is and how to fix it. You can probably tell the pro menu module just really, really annoys me. Oh gosh, I don’t, should we just ditch this on mobile? I’m going to make my own modal mobile menu, I think. Maybe not right now, but I just, like, I’m so done with the pro menu module. All right. Let’s just ditch this. So at 7.68, we’re just by save. OK. That’s fine. We lose our top bar right there. That’s good too.

0:43:41
And then we’re going to have a menu with everything. All right. I’m just checking things out. I think we’re looking pretty good. OK. Definitely, you know, there’s some cleanup and stuff to do, but we’re fine. I think this is a little aggressive. Link wrapper, size and spacing, 20 room. If you can hear my child screaming in the background, she’s not being harmed. It’s just bedtime. OK. I think we’re good. All right.

0:44:25
I’m satisfied. So we’ve got at least for now. So we built out the primary template. We quickly built out some CPTs. Oh, let’s tackle this because remember I said that XS, which, yeah, OK. So that, yeah. Let’s tackle that real quick. So we’re going to spacing and spacing scale. We need spacing, base spacing, base spacing, spacing scale, spacing scale, mobile section spacing. 1.6 on the spacing scale. And spacing scale, mobile, I think we can leave it 1.3. OK. OK.

0:45:21
That tightened it up a little bit. And then we’ll probably, so we’re going to go with a big scale, but probably bring this down to three and two. Save that. OK. That’s where I, that’s exactly where I want that. The header is still fine. Everything else is still fine. We’re just going to see how the rest plays out as we build an actual page. And then we can continue to make little adjustments here and there to really dial it in. But that’s pretty much where I want that. I still love the top header padding that we have. The main header padding that we have is good. This section looks just fine. So I’m feeling, I’m feeling good about that.

0:46:06
So I’m probably going to do the homepage in the next round of this series. And then we’re just going to keep working till we’re done with this thing. Where we’ve got like, you know, two weeks. I want to be done with this thing. This whole site, I want to be done with the whole rebuild in like two weeks. OK. So we’re going to move quick. All right. Cheers.