Peachtree Fence Part 05: Service Areas CPT + Oxygen & Metabox “Challenges”

0:00:00
Alright guys welcome back, Peace Tree Fence and Gates. It’s not 4 o’clock or 5 o’clock or 6 o’clock in the afternoon this time. It’s noon. So hopefully my brain works a little bit better today than it has been working. Alright, so I’m not, I don’t have a plan for this hour, but I do want to clean up some things. I did think last night, you know, on this about page, first of all I want to link up all this stuff so that I can actually start navigating the site properly. But on the about page, these service areas, we were not initially going to do service area pages. We were just going to list the service areas on the about page. Because of the, you know, context of this project and the fact that I have, you know, I’m basically going to be doing a lot of free SEO work for him because of the delays. You can go back and watch episode one, figure out, you know, why all that happened. But part of that SEO work is going to be the service area pages, which I’m going to go ahead and do for him. So this, we don’t need to be, you know, yesterday in the tutorial, I just made lists and put the cities in. We actually need to use a repeater here and query these. And we need to create the custom post-type for service areas and we need to add all these service areas in. And then I believe I want to go into fence installation, one of the services. And that’s in the CPT as well. And we’ll start working on the header part of the template for that. And then, you know, depending on how far we get, we’ll see if we can build out an actual service page. Okay, so with that said, let’s dive into the dashboard in the backend. We’re going to go to Metabox and we’re going to go to Post-Tites.

0:01:34
We’re going to create that service area post-type. So this is going to be service areas, service area. And I just use this log in, like, you know, fence installation in Atlanta. You know, that’s why I use this as a slug. It’s super short. And the slug doesn’t really matter that much in this case. So there you go. All right, so I’m going to hit Publish on that and it’s going to add our service areas right over here. And I’m just going to go ahead and start adding some just so that we have something to query. So again, this is going to be coming. Georgia is going to be the first one. And actually, let me just get out of here that we’re going to do this. We’re going to make this a lot easier. You’ve probably seen this trick before. If you go to the customizer on the front end, go to menus, go to my full menu. It doesn’t really matter. And then I’m going to hit Add Items. I’m not even using the full menu. And then I can go to service areas right here. And I can add pages much faster. So, and in fact, let me customize URL. Okay, that’s, I should have done this. Let’s just go to the About page here. We can’t in the customizer. Excellent. Okay. Let’s go there manually. Now let’s open the customizer. Now let’s go to menus. That way I can actually reference here. And I don’t have to remember them off at top of my head. All right. So full menu, add items, service areas. We’re going to do coming Georgia. So this is actually creating the pages on the back end. Whereas if you were doing it the other way in the admin dashboard, you’d have to add new type it in, publish, go back, add new type it in, publish, go back. Here, you can just literally rattle them off. So it saves a bunch of time. Alpharetta, Georgia. That’s going to need an edit, Lawrenceville, Georgia. Almost did it again. If you’ve heard Georgia. All right. And the other side is just a duplicate there. So I’m going to go ahead and hit publish. And now when we go to the back end, go to dashboard, service areas, there they all are. Okay. So that was nice and easy update. Okay. He doesn’t do anything outside of Georgia. So we don’t need to worry about states or anything like that. We can just go with the cities. And now what I’m going to do is edit the about page. And we will go ahead and query those onto the about page. And we’ll also, oh, look how fast that loaded man. That’s awesome. Okay.

0:04:12
I am liking the Firefox builder experience a lot better. Did I name this anything? No. All right. So I’m going to go ahead and just delete that. We’ll add a new div. And because it’s a repeater, we’re not really going to be able to use the grid for this. I don’t think. Let’s see. Or at least the way that it was structured. We still use a grid. It was not structured properly for the repeater. So we’ll call this service areas wrapper. And I’m going to go with the depending on where this is. I’m just going to use utility classes for this because depending on where it is, it’s probably going to determine how many columns we need for the grid. So let’s just do. First, let’s add first, let’s add our repeater. We actually don’t need a wrapper. I don’t know what I’m doing. All right. So let’s go here. Let’s just add a repeater. All right. We’re going to query advanced edit query, add and post type. I like how you can search now. Post type, add value in. Let’s see what else we can add. We can go per page, post per page. Let’s go with 10. Let’s go with no found rows. True. That’s going to remove pageination because I will use WP grid builder if pageination is needed or potentially typically what I do instead of pageination is Ajax load more. All right. So we have post type and post per page 10. No found rows equals true. Don’t think we need to order them or worry about that at the moment. So we can just get away with that. So let’s apply. There they are. All right. So let’s take a look at the structure here. So there’s our repeater. We’re going to go margin top and that is going to be M. Okay. And in this div right here, we are going to add a link. Let’s actually take a look at the list. Now we can do it with the icon and make this super easy. So we’ll add a div. And we will add a link wrapper to that div. I’m not going to add a link to it yet. Perfect. Okay. And this will be called service area service area link. Yeah. Service area link maybe service area link wrapper service area link service area link with icon.

0:06:57
Just thinking about future proofing making sure things are descriptive enough service area link. Okay. Let’s just do that service area link. All right. So we are going to size and spacing with 100% add an icon and map. We’re going to use that same icon we used earlier. Service area link icon icon size 18 22 somewhere around there. Bar primary. And margin right one in text. Text is going to say the name of the service area. So what we’re going to do is highlight all that insert data post title insert. That’s going to give us our city name. Now all I have to do is grab that link wrapper, change it to horizontal flex. We can also start it to the left and make sure it’s middle aligned. All right. We can also add a margin to the bottom of.5m. All right. This looks broken in the builder but it’s not going to be it’s not really going to be an issue on the front end. I’m pretty sure. All right. Let’s try to. Let’s try to grid to this. Let’s this this the builder’s getting a little out of control. Let’s see what we actually have on the front end. Before we go any further. Okay. And if we take a look here. So there’s the grid to. All right. I’m not quite sure why they’re so spread out. There’s really nothing telling them to be there’s no gap. They really shouldn’t do what is going on coming Georgia.

0:09:32
Let’s try without. Go the repeater. Let’s take off grid to. Let’s take off stretch. Let’s use the built in grid builder column. Okay. So that one’s behaving properly. Zero on the men with. Gap is going to be var space s. And I’m going to do that here as well. Save. See what we’ve got. Okay. That’s much better. And now all these will link automatically if I grab our link wrapper and go to data per link. I’m not going to investigate why the grid utility class didn’t work. Okay. So we’re good there. I also don’t know that like blue is super appropriate here. So let’s go. Text primary ultra dark. All right. And text primary ultra dark because we have to override our defaults. Now those should blend all that text should blend better. This could actually be text primary dark maybe. Okay. We’re going to change the lightness on our hover a little bit. It’s getting a little too light for me. All right. I think that’s that’s actually pretty decent. Yeah. I really want to investigate why that utility class wasn’t working. But in any case, let’s also fix this real quick. This is the service area link text. And I want to bring the line height down to like 1.2 on that. And unfortunately, yeah, that’s fine because it’s in a repeater. There we go. Okay. That tightens it up a little bit. It’s not necessary on the link to have like 1.8, which is the default. All right. Cool. I’m good with that. Let’s go to the home page for now. So now we’ve got that is dynamics. And now if we were to add additional service areas, it would add them to that list automatically up to 10. And then at 10, it would not show anymore. And then we can order them. We can randomize them. We can do a lot of different stuff. And then at that point, you could do I’ll have a WP grid builder, WAJX load more, which would actually just they click a button and boom. More service areas come up. They click a button. Boom. More service areas come up. We could add a search box and make them searchable. Do a lot of stuff with it because it’s now a CPT and it’s all dynamic. Cut.

0:12:30
That’s the answer for custom post type for beginners. Okay. Let’s go to home page and let’s edit that. And basically, I want to get all these links linked up so that we can don’t have to type in URLs in the nav. We can actually use the navigation properly across the website. All right. So this stuff is all in the primary templates. I can’t do anything about that. I did want to replace these. So we’re going to take that out and take that out. And we’re going to put a button in in place of those. And so let’s go button primary. And then this is button primary as well. And we could do outline on this and just see what it looks like. But I think, yeah, we’re still going to have like, I don’t really like the blending effect that we’re going to get on that with the text being, you know, super hard to read. All right. So you can do something like this. You can do, if you have a lot of these dual button wrappers, let’s try something out. So we’ll do dual button, or let’s do button wrapper, dual like that. Yeah. All right. And then inside of that, so button wrapper dual, so let’s go style sheets. We’ll go to our general and we’ll do buttons. Actually, you know what we can do? Oh, let’s just, we don’t even need to do this. This is how we used to have to do it. Why don’t I just, I believe this can be solved with automatic now. And you just use you to, you can just use utility classes to do it. So let’s do grid to, yeah, because, okay, grid auto to should be grid auto to should be able to do it. And then we can do grid, so we can do width auto. There we go. Or, or that may not work with auto to, let’s do grid to width auto. There we go. Now we can use gap. And now we can do grid M1 to stack. There you go. That’s how we’re going to solve that. Okay.

0:14:49
So anytime you need a dual button wrapper like that, grid to which used to, without this width auto, the whole width auto makes this work, right? Because, and you do this in oxygen into to, it’s a problem. You add the grid class, it automatically goes to 100% width, which does not work for dual button setup like this. The width auto class brings it back to where it was, the natural width of the elements. And then you can, you’re free to use gap now. And like I’ve talked about in past videos, you can use gap on flex box. It’s just not well supported. It’s less than 90% browser support still to this day. So I don’t recommend it. That’s why you need to be able to use grid, but you couldn’t use grid before because we didn’t have with auto. But now we have the with auto class, pop that on and it takes care of it. Now, I mean, you could do it before. Just you couldn’t do it purely with utility classes. Now you can do it purely with utility classes. Then you break it at whatever break points you want to break it up. All right. So this is going to be fence installation. And this is going to be gates. Why doesn’t it select property properly, gates and operators? Okay. All right. So now we’ll save. Take a look at the front end there. There you go. That’s much better. Right? Fence installation, gates and operators. All right. Let’s come down. These links need to be linked up. So fence installation, we’re going to set fence installation. These are actual pages in the database. So you can just search for them. Fence repair. All right. That should have been. Did I just okay, I didn’t make that page yet. All right. So do we even need a fence repair? Pages, fence installation, gate it now. We don’t. Okay. So we need to forget. We need to have us something else for that. I don’t really want just one link sitting there, but I guess if we have to. All right. So this is going to be gate installation. There is a gate service.

0:17:05
And then I’ll duplicate that. And then we’ll do gate repair. Okay. And now I can set this to gate installation. And let’s not do gate repair yet. Set gate service. Okay. So those are linked up properly. Get a quote. Needs to link to the page. I don’t we haven’t created it yet, but it’ll be. Inquiry. That’s usually what I go with. All right. That’s all temporary. Okay. Now we hop over to the primary template and get that taken care of. Sight title dashboard, oxygen templates, edit, primary, open. Okay. I don’t think I have any other builders open, but it’s warning me about having builders open. Let’s close that page. We need that anymore. All right. This already links to the homepage. That’s good. This link wrapper needs to link to this phone number. So what we’re going to do is that not a link wrapper. Oh gosh. Here we go. Don’t disappear on me. Okay. Thank you. Tell. 678. 743. Let’s do a plus one in there. And add link. And then coming Georgia. This this should. Well, hold on. Hold on. Hold on. Hold on. Hold on. What just happened? Back it up. Back it up, Terry. I lost my. I lost my margin when I added the link wrapper. Okay. Yeah. That’s exactly what’s happening. Fantastic. All right. Plus one add link. Let’s look at what that did to the structure that threw that off. Inspect ID. Here we go. Div. Div. Did I put that SVG in a div? I didn’t add a div for that. All right. AID.

0:19:42
There it is. Head or top. Meta wrapper. First of tight. Margin left. Zero. Okay. All right. So let’s actually inspect this one. This is not an A. Maybe maybe this. Let’s add a link wrapper to this. Okay. That makes sense. All right. So that has to be a link wrapper now. All right. So coming Georgia. This is going to be. Let’s let’s link this to our about page for right now. And then what I’m going to do here. Head or top meta wrapper text. This is going to be var base. All right. Save. Man. This is so, so fun. All right. Set about. Set projects. I don’t know if that page exists yet. It doesn’t. Yeah. Does. Okay. Add link. Set reviews. Oh, this is actually going to go to the archive template, which is should just be reviews. Okay. Command T is not working. Cowley. Feast refunds. To reviews. Should be a CPT. Yeah. That should be the archive. Okay. So we’ll just put that in here. Reviews. And then contact us. There’s that. I love how it says no results found and then find it. All right. That’s a menu. So that should be ready to go automatically. This is going to link to inquiry. Come down to the footer. That’s going to link to the homepage. Oh gosh. Okay. Grab the link wrapper. Okay. There. Think that that’s done. Thankfully. All right. This is going to link to tell.

0:21:59
I don’t have it on my clipboard anymore. All right. Plus one dash. 6.7.8. 7.4.3.3.6.2.3. Okay. All that is good. Oh. And these I decided I do not want text s on. We just want text m, which is the default. And then this I want to just say gates. Fence gates. Yep. And then we’re going to put gate operators down here. So we’re going to add one gate operators. There you go. That looks much, much, much cleaner. I this was driving me nuts. This having that there. And now I can make these bigger again. So these can go back to just their default. Okay. There we go. All right. I like that better. Save. Now let’s handle actually linking these up. So this is going to have to do the same thing we did above installation. Fence. We’re going to have to delete fence repairs. We don’t need it yet. Gate installation. Set. Installation gate. Add. Okay. Service gate service. And then we don’t have one for gate operators yet. So we’ll just leave that for now. And then we are going to link up the about page. This is a little stuff I do kind of like to do at this point in time because it’s annoying when you work on the entire project. And then you’re like, oh, thank God. I’m almost done. And then you realize, oh, no, like there’s a thousand like little things I didn’t do, you know. Contact us. So just taking care of this like little stuff right now, even though it seems like a waste of time because and really, you know, this is stuff that I assigned to my team typically to do. If I’m working on, you know, a site, I’m trying not to do this little kind of stuff. But for this tutorial purpose, you know, I got to do it all. So pay invoice. Do we make a payment page yet? No. All right. So I’m just, yeah, I’m just going to go pay. No, sorry. Here. Pay. We’ll do that. Add link. Okay. Save.

0:24:30
Now all that stuff should work. So I’m going to go back to the front end. We don’t really need to test everything out. But I do want to create that page. So I don’t forget. So we’re going to go to new page and pay your invoice. But over here in the permalink, it’s going to be just pay. Publish. Okay. Perfect. All right. Let’s tackle. Now I can click on these and they can actually work. All right. So services fence installation. That’s good. Let’s go ahead and work on that template. So we’re going to go to oxygen templates. Add new template. Service page template. All right. Now we’re going to do it like this services. This because there’s going to be multiple templates related to services, at least two of them. You’re going to have the archive and then you’re going to have the main single. What’s called a single page. So I’m going to do services a single page like this. And then I’m going to sign it to services. And then I’m going to hit publish. The other thing that we have to do is we have to inherit the primary. Oh, it’s not just automatic CSS literally in Firefox. You cannot click at least in mine. You can’t click and the menu will stay open. You have to hold and then drag to what you want. That’s really awkward. Really awkward UX. Okay. Update. So good to know it’s not the automatic CSS plug-in. It’s literally every drop down in Firefox. All right. So edit with oxygen.

0:26:08
And let’s take a look at what this needs to look like. What are we dealing with here? So fence installation. This is the old site. So we need this basically this top part is going to be the template. These two things are going to be custom fields. I’m not sure. Yeah, I guess we can leave the form kind of like that. All right. The rest of this is just going to be on a page by page basis. And some of these will be pseudo templates, which is basically like a, you know, they’ll be in the library. So I can just plug and play and add them to any page that I want and then edit them. That’s typically how I do that. All right. Error occurred while rendering the component not found 404 for gate service. Let’s do fence installation. Okay. I don’t know. I don’t know what that means. It’ll probably will go away. Probably won’t even be there in the next one. All right. So I’m going to add a section. And let’s take a look at because I definitely don’t want this like we need we need photos. We need a photo in the background at least. So let’s start with we can actually cheat here. Let’s go to piece free fencing gaze the homepage edit. Open this. Oh, I’ve been up in the top right corner the whole time. Is that is that the case? Okay. What else can go wrong? All right. Um, still I’m just stealing this. So let’s close that. Yes. I do want to leave and paste. Okay. Now what I will do the thing is though is there’s some stuff I got to undo here like that because this is not the same kind of hero that I want to use. So, um, but some of the stuff is there for us. So we’re going to do hero sub page hero sub page like that. Um, or really this should be hero service page. Hero service page. Hero services like that. All right. And there we can go typography for shade white hero lead. Okay. Take that off. All right. So this is going to be hero services lead. And basically what I did before except we’re going to have a grid.

0:29:06
So I’m going to add a grid to M1. May have to be L1 but we’ll look at that in a minute. Gap XL. Div and div and let’s just start dragging stuff. So this goes into that div. This goes into that div. And this goes into that div as well. Perfect. This is a template. So we can do owl M. And this is going to be a form. It’s going to be different form than what we already have. Oh gosh. Error occurred rendering the component safe. Hopefully I won’t lose everything that we just did. Let me just save again for good measure. You ever do that? You ever say, let’s see this. This is like hey, do you want to leave? Because we didn’t really save any of this shit. You just did. This is where you just pray. And you get ready to you start while this is okay good. I was going to say while this is loading you start working up an invoice to Elijah so I can pay for all this lost time. All right. So I don’t know. I think I know what’s going on. All right. So let’s go to admin settings, parmalinks, because we just created that custom post type. And with MetaBox sometimes something goes funky with the parmalinks. And it messes up the templates. I think that’s that’s what I’m going to put my money on. Now let’s edit it and see if we get that same error. Now that I’ve reset parmalinks. Look, no error. Okay. Apply parameters. I didn’t select a form. Start quote. Apply parameters. We actually just let’s just use this form everywhere. I think that’s going to be the easiest thing to do. And I actually I don’t want the email field I decided.

0:31:02
We do want to just go first name phone number. Let’s just ask for that because they’re just starting a quote. We’re not this isn’t a finished thing. This is we’re going to take them to a step to. So we’ll fix that in just a second. This does need form. And it does see what happens with the form thing. Right. And then form. So I had a form on dark. And I’m going to have a form on primary. And now I need a form. Probably. Form. I’m trying to think here like blocked. Like what what do I just want to call it? Form BG primary. Let’s try that. BG primary like that form BG primary. And then here I can go background var primary. There we go. And we can also form. Do I have that 100% I do. Okay. So I’m trying to figure out why there’s a gap between the edges and the edge of the div. We’ll have to look at that in a second. All right. So form BG primary is going to get padding. And that’s going to be space L. Apply all. There we go. And then we’re also going to apply. Okay. So if it’s BG primary, it stands the reason that we can we can just style everything in there as if it’s on a primary background. So we don’t have to use the other class that we were going to use like for this one down here. All right. Cool. So yes, we’ll get to styling that in a minute. So form BG primary also needs to get border radius. Awesome. And that’s also going to get a little if you look at the other sites going to get that little grass down in there.

0:33:02
When we come back to do some finishing touches type stuff, the only problem here is I need to put stuff above and below my form. And I didn’t think about that as I just did all this. So I’m going to take off that class. In fact, I’m going to yeah, here’s what we’re going to do. So I’m going to add a div. Oh wait, it’s already in a div, right? Yeah. This div is going to get form. And this is going to be called form wrapper primary like that form wrapper primary. And form BG primary is going to I’m just going to copy the classes to form wrapper primary. And I’m going to take off form BG primary and I’m actually going to go to selectors and delete it because I don’t want it in there confusing people form BG primary we can delete. All right. And then now because I just did that with a div what I’m free to do is add text here and I’m free to add a heading. So we have stuff above and below. And then this is going to be called form form wrapper primary heading needs to be var primary ultra dark. And also needs to be an H3 great. And then what I’m going to do is size and spacing margin bottom var space M. You can do all this up by the way a lot faster with utility classes purely with utility classes but it doesn’t future proof your work. And so we’re taking extra time. And there’s probably a debate of like all right but on these small sites if you’re not going to do a lot of future work is it really saving you time later. But then you don’t know like when the what what sucks is when the client comes along and they’re suddenly like hey our business been growing we’re ready to rock and roll we need more pages on the site we need more stuff. And now you’re like oh god I gotta go I’m I’m dealing with a site that wasn’t really built properly it like it wasn’t future proofed with custom classes and things like that. That’s the situation you want to definitely avoid. All right so form and we can actually yeah let’s let’s just do a margin top on this so form let me see this is a phone number. What do I have for phone classes phone link okay that that doesn’t do it.

0:35:48
I thought I’d made another one. All right we’re gonna do phone white. Yep and we’re gonna do phone large phone L. Oh yeah I used utility classes earlier okay yeah I don’t I don’t have to do that let’s just do text though. All right and then we do need to I don’t even need I don’t even need phone white. I’m just doing a lot of unnecessary stuff right now. All right let’s go to advanced typography. Let’s go to line height 1.2. Let’s grab can I copy thank you oh gosh can I copy it all right let’s paste it there. Paste it there okay all right text L is not gonna get the job done we’re gonna go text XXL. Oh that’s a little big okay oh yeah that’s right because that’s we did a custom class for that. All right text XL and then I do need to go margin top on this. Oh let’s say M okay get a free no obligation quote for your project. I also may may want to make this white up here. Let’s try that primary we’ll do primary ultra light instead of white. And then this actually this can actually be text everything in here can be text primary ultra light. All right that fixes that phone number 2. All right let’s go to font weight and like 800. And then while we’re here I just want to go to settings because I’m getting sick of having the wrong font in here. So we’re going to global styles fonts. I think it’s sin was the correct one. I think we’re just using it for both. Save.

0:37:49
Okay and then this does need to be a little bit bigger except I’m gonna go back and make some more adjustments to our typography in automatic. All right get a free no obligation quote for your project. We still need to do more form styling but that’s that’s coming. All right this can be there’s going to be another section below this can be a little strip. And that’s going to be pad section excess. And it’s going to be bg base ultra light like that. And then there’s going to be more sections below that but that’s actually going to be inner content. So I’m going to add an inner content module right there which you can’t even see. Then I’m going to hit save. All right now what we need to do is hero services we can go. Well this is just a template so I’m just going to do this the ID real quick for now. And then same thing here I’m going to go with negative margin bottom. And I don’t know what would you guess to make the height of that is like 100 pixels like 10 RAM. That’s pretty close. 8 RAM. Save. Let’s see how that turns out. All right let’s go to front end. Okay now what I like to do is go to edit service. And I like to open we need fence I was working on fence installation. So let’s go to fence installation. Let’s open that. I’ll just close this just to make sure that we don’t accidentally screw something up. And just so I can see what we’re actually doing here. I’m going to add a section and actually a couple sections. So there’s a bunch of white space below. So now when I look at it I can actually tell all right yeah now now I’m starting to see things better right everything’s not so squished in. Where’s the other page here we go. So fence installation done right and then grab this. We’ll add that in real quick. So heading we’ll just center all fence installation done right and h2. So these h2s are not big enough so I need to change the type scale with L. There you go. All right and then we will margin top this or actually we can probably owl this. We’re going to need a div grid 3 grid L1 gap M L M let’s try M.

0:41:02
Div div div owl M save we need one more text h accent lined up experienced and trusted wrap with div drag in center all save. There we go. All right we need these little card boxes. So I’m going to do card card outlined. All right and on card we’re going to go var space M fly all on card outlined we’re going to go to border var base. Can we type? Where did my where’s my typing gosh oh no oh no ah about to freak out. I think it just froze on me. Here we are. I can’t even type in there. I have this problem a lot in the it’s only in the color field in borders in the border section of oxygen base ultra light let’s wait like a month for that to actually type in it’s only this field in borders in oxygen that this happens I have no idea why but it happens over and over and over again let me know if it happens to you too. Look at this I mean this is seriously like it this won’t happen in any other field I guarantee even if I don’t refresh the builder if I just go to another field and type it’s not going to do this. All right I’m going to solid it is like it’s it’s really look I can probably do this var yeah look I can type just fine here it’s not even like oh where did it go like okay watch this so I do var base ultra light grab it delete it paste it it that field like does not respond well to like whatever is going on I don’t know and it’s like not letting me hit the solid button either did it out did it give me a border it still has not given me a border oh lord okay red look I can’t even type in normal color it’s not even that I’m trying to use like a var all right I’m going to save and refresh it’s now giving me a border I still can’t select solid oh it’s it’s literally activating and inactivating in the builder but not in the panel queue up my invoice to Elijah space no that’s not space var radius m maybe s okay that is not border I also love how it hold on primary or no base ultra light what am I doing base ultra light okay godly oh gosh come on dude it’s like all roads lead to Kevin can’t be efficient highlight well highlight it manually then copy it 1800 times to make sure it did it right paste save is it working I got to put something in there let’s do a heading three that was this is like unnecessary okay that’s a little light yeah so we’re going to go just light base light I’m scared the things you have to do you use oxygen okay safe that may be too dark now no I don’t know it’s fine whatever it’s good enough to not deal with it anymore that’s for sure okay so inside of this card oh my gosh I can’t like I can’t click in there without it trying to erase my padding because of these things I just want to make sure I have the card all right we’re going to do card left vertical left so I’m just making custom card classes basically and then typography there is going to also be left all right bonded and insured and then we have just that text all right this is going to be a card heading this is going to be card text and we don’t need a button so that’s fine we do need an icon which is actually just going to be an image we’re going to steal this icon right here save as now money insurance okay that doesn’t help anybody how about icon shield all right rouse downloads icon shield why might the top of the screen again all right put that up there yeah I’m gonna have to retire like stressing me out everything keeps going wrong why is everything going wrong all right so we’re going to go card icon and that is going to be with rim let’s do this let’s do 100% max with rim 16 now let’s wait you big 6 card icon margin bottom bar space m not m a just m s same thing here card heading for space s on the bottom and then question being you know do we need to go on card text to a smaller font size probably save view looking pretty good we can add extra margin to the bottom of this to space that out a little bit more let’s delete these and let’s just duplicate and then let’s take a look at satisfaction guaranteed and industry leading warranty ok safe all right woo man wow okay let’s handle this a little more I want to go now to let’s hop out of here can delete oh no that was my reference oh you can’t reopen closed windows and Firefox ok leave page and my man T is still not working all right peach refunds okay where were we fence installation page let’s go to automatic all right see these age 2’s kind of want them like that so typography scale we’re going to go back to perfect forth see how that does for our age 2’s we might even go bigger than that okay that’s better the H ones are not going to change because they’re being overridden um I still may want it a little bit bigger so it’s literally just another scale change okay I think that’s that’s good that’s probably good all right so I don’t know I like white in there and then I like it how it’s thinner in there so let’s do that so we’ll go back to dashboard and while I’m here let’s go to settings general and change this the things I randomly do you know just as we’re moving through site development all right so oxygen templates we’re going to open that services single page we can probably close that at that now and we also need this little accent bar below that heading okay so I do want to change this to being text white text primary ultra light uh form wrapper primary we’ve just got a typography bar shade white and then I need to take off form yeah okay I did it on here too because that needs to be overridden and let’s make sure that this form wrapper primary um at the ID level has a one for z index okay we also probably could add a box shadow to this I’m going to go to shadow uh box shadow excel save you okay that’s that’s pretty good I don’t know if I wanted in the like hitting kind of the middle of that box or we need to throw some actual stuff in there so these little star things so we’re going to add a div what can we call this uh we can call this a what is that it’s like a talking point uh so we’ll do talking point icon box that’s too long man talking point box talking point just call it a talking point like that all right uh let’s add an icon to it and the icon is going to be uh star okay we actually need a different icon for each one so this is going to be talking point double underscore icon and then we’re going to add text talking point double underscore text and then we’re going to go horizontal middle the icon is going to be primary color the icon size is going to be 24 the margin right is going to be 1 it’s going to be 0.5 m and that is going to say over 50 verified five star reviews which is probably even more now um so talking point text can go font weight 800 and probably var base okay excellent day now I’m going to do that this section we’re going to go horizontal and then what does the next one say better bureau better business bureau a rating great I don’t want it to collide here with this so let’s grab this wrapper or actually let’s grab the text I think one thing we can do is far text s that’s a little too much okay let’s not do that we’re going to go instead of grid two grid three two now I think my gap do I have a gap in there yeah an xxl gap or an xl gap okay all right I’m going to do that trick we did with the buttons earlier so I’m going to do a diff I kind of like to limit the amount of diffs I’m using here but let’s pull that in and let’s pull this in and then what I’m going to do is grid two and then grid auto with auto like that and then probably at the break point because now I can do a gap which it looks like it’s already inheriting a gap from somewhere oh no it’s just it’s just filling the available space I guess so we’ll go gap s and then we will figure out it’s really the xl I want to when these are going to break I had it at l I had it breaking at in them all right but it really needs to break at l all right so let’s figure that out first then we’ll figure out below so grid m1 needs to change to grid l1 so now at there it’s going to break and that’s good and at that break point right there we need to grab that and stop applying the margin bottom of zero and then we’re also going to have to figure out this section padding I might I might come back and do that a little bit differently okay that means that at this I mean that’s still it’s probably because of the xxl or the xl gap okay we can’t do that no that’s still a problem all right oh it’d be okay if this was back to grid 2 we can stop applying the margin the negative margin at that break point most likely we don’t need to be all fancy overlapping at that break point we just be fancy there not fancy here so let’s do this then let’s take off that zero we apply here let’s just go stronger on the negative margin here so something like 12 or 14 or 18 even okay and then here there’s just none I still don’t like how it is we can go back to grid 2 maybe here and then we’re still going to have this collision issue if we do that and that that form is too big so too wide I mean I guess you can get away with that like maybe when it’s all styled up a little bit better it’ll it’ll look fine it’s not a giant pink box all right okay yeah I’m not sold on it this is gonna have to get reworked a little bit we’ll leave it like this for now because it looks fine there right it’s like but even this still has some issues why is that not working I’ll let me take that one off with L with them okay that works all right save all right looks a little bit better let’s be less aggressive on the bottom margin all right it’s hard to get these right when they have to overlap a section like this and then there’s going to be content next to it it’s it’s it’s a little complicated all right so at this break point then really matter for here here what’s just the horizontal and we’ll do middle center and then about I would say there so L grid L1 to stack those gosh these are just these are tough decisions you know I’m gonna go grid M1 this is what I’m also thinking about is like what if these are longer you know um we’re gonna have to limit them all right we are limited to two just by nature of how we’re doing this I wonder if we should I really like the overlap but at the same time I want to have more talking points or more yeah more of these what happens if I duplicate duplicate okay well we could do it like that and then looks that look bad doesn’t I think that’s pretty good hmm I think that could work especially if they were different icons you know all right so let’s go to can’t spend you know too much time thinking about it so I’m gonna go to Metabox and we’re gonna go to custom fields and we’re going to add new and what we’re gonna do is call this services single page it’s gonna match the exact name of the template that way everything is nice and uniform we’re gonna add a field and this is gonna be a uh there’s gonna have to be an icon and a text so I’m I here’s where we have to kind of go slow because I’m not a Metabox expert yet so layout divider group heading tab let’s think about this I want I kind of want to group button group layout group let’s see how this works here’s your subfields so we’re gonna have an icon which is just gonna be an image and then the label is gonna be what are we what do we call those talking points yeah all right so talking point image I’ll call it icon talking point icon type equals image that’s fine all right and then add a field just text talking point text text and then well what did I just do okay yeah we don’t need tooltip uh this is cloneable I believe you can put these next to each other let’s just see how that looks um let’s go to settings we need to go to post type is service all right and then high after content high yep all right let’s publish let’s go back to admin and services fence installation okay there we go talking point icon talking point text now I was thinking that we could actually columns 26 is that how you do it update oh that that divided everything in half okay so this goes back to 12 open this up columns here we go now if I do six and six is that gonna work so let’s update there we go so here’s the icon here’s the text but now yeah that’s that’s that’s fine um all right this is cloneable max number of clones for okay talking point icon talking point text and this the thing is we’re gonna have to use a repeater here now I’m trying to think if there’s a way to make it you have to have two you have to have an even number talking point icon talking point text let’s duplicate talking point icon duplicate talking point text talking point icon talking point text I don’t think they need unique labels clone as multiple what does that do save clones and multiple rows in the database oh that doesn’t do what I wanted okay let’s see what happens when you clone if it clones two at a time that’s what I’m trying to think if if we can make it clone two at a time add more there you go now we have four okay so you can only have two or four and then I don’t think you can add more oh you can okay all right well what what was the point of limiting it to oh maximum of our clones too update so now we edit service there’s your two there’s your two more that’s the max you get all right I’m liking where we’re going so let’s browse I don’t have an icon here let’s go to the noun project and let’s go with a star that’ll be our first one use that one let me log in oh gosh here we go all right good this is there we uh seven add digital gravy dot c o I’m not a robot log me in please thank you all right well they change this up all right the problem now is I can’t use my bar primary on the noun projects I’ve no idea what color I’m supposed to be using okay let’s grab this okay we have to download the SVG and we have to I thought I just chose a color didn’t I just choose a color point sample sampling yeah sample properly thank you all right oh it’s the background color oh why do they change all this stuff up on me all the time all right transparent icon that color download SVG say file can I can I get to my downloads folder please downloads okay icon shield nope now star star this one icon star primary actually it just needs icon star double dash primary kind of use the same BIM naming convention for my images and such sometimes for my icons definitely downloads okay icons our primary save let’s just do it all right now all of these and let’s close that for now let’s just keep things simple talking point text it’s going to be over 50 verified five star reviews and better business bureau a rating update awesome and delete all that work we did okay to or repeater and I actually before we get into trouble need to save and refresh the builder okay so now we’re going to do we have our repeater and we are going to go to query advanced and we are going to edit query wait hold on use metabox group that’s what we’re going to do oh yeah okay so how do we do this uh services repeater query use metabox group like query parameters but it needs to know what we’re querying from so how’s this how’s this going to work it’s part of this we’re already querying that we’re already on the services single page and this is these this group this metabox group is part of the single page div no we don’t need a we don’t need a div there why is this so big why aren’t there multiple of them I don’t know what’s happening right now browse icon star primary select image or actually we can’t just select an image can we let’s try that again let’s delete it add an image data metabox group field talking point icon insert okay nevermind folks we’re getting somewhere all right this is the talking point icon it’s already styled it was already styled now oh because that was an icon now it’s an image okay got it I choose Rem please I choose Rem please thank you eight six four three two three okay text insert data metabox group field text insert have a look at that okay text is what is this talking point icon talking point text okay and then this is talking point the problem is why is it only querying one of them and there you go okay so we got one of them but it’s a repeater folks it’s supposed to repeat things maybe because it’s treating the these it’s treating oh no I don’t I don’t know talk subfields I think I know I think we have to delete yeah because like what happens if we add another one I don’t mind do this is breaking my brain hold on no we don’t want to edit that either we want to edit the template all right dashboard oxygen I don’t know how I got out of the template I’m accident all right edit okay both of those are in there I believe it’s because they’re all part of the same group I’m probably gonna feel like an idiot a minute all right save update you can clone this four times remember I was trying to prevent them from being able to just add one group just called group talking point maybe I can group in the group should I do that probably not all right talking point duplicate the group see now this this is getting it’s gonna little hairy right because it’s like yeah because now you can clone this thing okay that’s that’s not gonna work either all right edit the service add more over 50 verified five star reviews let’s do this one better business bureau rating oh gosh better business bureau a rating update let’s add the icon again oh okay I don’t want it to do that or that oh dear all right we’ve got to fix that so I’m gonna go to talking point icon image single let’s do single image maybe that fixes that I want it to open the media gallery and WordPress there we go okay update oh I don’t know what we saved and what we haven’t saved so good luck here front end refresh okay grid two grid with auto we’re looking structurally better now Metabox group field field talking point text insert now now I think we’re getting somewhere data Metabox group field talking point icon I just don’t know how we’re gonna prevent people from just adding one and I want to know why we don’t have an icon where’s my icon okay that’s broken it shows up in the in the admin all right let’s see if there’s some setting we’re we’re missing here talking point icon single image image and force delete image size how about thumbnail shows admin column column six tool tip there’s really nothing else we can oh under advanced validation custom settings conditional logic okay update oh wrong reload yeah all right inspect image margin right with 3m it’s got a width on it now there’s no source look at the source says a hundred okay great all right structure open dude I don’t know how it keeps getting I don’t know how I keep getting at the top I’m not hitting that button to put myself at the top all right image it’s something with with that let’s try something else let’s try where I do that now I had image earlier right we definitely don’t want image upload let’s let’s just see what that does real quick see that’s that’s not going to allow access to the media gallery file advanced file input file upload image image advanced save field value uncheck list for the field from savings value useful in your save yourself i’m working on block editor don’t know what that means okay maybe it just does not work interestingly it worked when we made it a image by itself I believe let’s go back and see that’s not working either yeah we’re not showing in the back end for house icon start primary browse icon start primary update refresh we see it nope we see it yep this makes no sense I don’t know if there’s a metabox thing or an oxygen 3.9 thing and that needs a stretch class gosh okay all right we’re leaving that for right now okay all right let’s edit open anyway this is going to get insert data post tie actually well we we need to not do as close randomly windows all right let’s get out of here for a second fence installation this we can stretch there we go industry leading warranty bonded and insured satisfaction guaranteed industry leading warranty okay I don’t know thinking about stuff right now satisfaction guaranteed bone insured industry leading warranty sometimes you just got a sculpted with changing the text bonded insured satisfaction guaranteed we’ll just do full warranty for right now I’ll have to fix that later all right save all right that’s all better all right I’m thinking thinking thinking what else we want to do here before I file a ticket with metabox support all right so let’s edit the let’s go back to edit the template let’s clean up this form a little bit gosh I can’t like my command T won’t work for tabs sites the bayonet my existence right now now it’s going to get a lot better all right so oxygen templates edit it is always tough when you are oh I remember what I was going to do I don’t have a ddi promise metabox custom fields all right so on our services page we are going to add let’s close this okay so we’re going to add a group and this is going to be called hero and we’re going to add a field that’s going to be called this will be a text and that’s going to be headline because if you look at it we need a headline we need lead text and then actually these buttons I don’t even think we need side by side buttons here so we don’t even need to get a quote we don’t need I don’t know that we need buttons at all honestly this is going to get smaller this form when I take away the email field I’m just thinking about layout again all right so we need hero and we need a headline text area and that’s going to be lead text okay hero talking point all right this is going to be called services hero and this is going to be services talking points and we’ve got headline we’ve got lead text all right let’s update that let’s take a look at what a services page looks like on the back end now so for fence installation we have a headline we have lead text right so now this is going to say professional fence installation fence installation professional fence installation and then our lead text which is going to be alarm ipson for right now and then I’m going to hit update there and then I am going to we got to refresh our template because now we have new field data and all that it’s kind of the first first really full site I’m doing with like a client site with MetaBox I’ve been doing a lot of internal stuff with it but not a full client site all right so we’re going to double click this we’re going to insert data MetaBox field mm-hmm services hero okay hold on MetaBox field why isn’t it working oh gosh let’s get out of there for a second insert data MetaBox field services hero should have two fields inside it and it just doesn’t it has this thing now there we go also it’s in there too oh is it art is it automatically grouping them for me let’s take let’s do this again let’s do this a different way let’s delete this there’s a good learning experience here add new no oh geez okay don’t do that oh gosh what are we doing custom fields services single page delete group add field that’s what we want to do text services headline add text area services lead all right then down here we’re going to do rows two and we can also go to advanced I believe can we limit characters shows admin column 12 tooltip I got to look at the ability to limit characters in MetaBox mm-hmm okay well anyway I’m not going to worry about it right now talking points goes down here headline goes at the top all right update unfortunately we have to do this again so professional fence installation oh okay remember did it did I say yeah I updated yeah there we go they cleared it out all right so there’s that professional fence installation and update cool refresh this builder so we’ve got now that we shouldn’t have to click like inception to get to the data that we’re looking for but hopefully it’s still categorized yes answer data MetaBox field services it’s not it’s not grouped so I created a group and it made me go two levels deep I took it out of the group and now there’s no levels all right so services headline that’s fine this is what ace what come on come on now what what is this what’s going on now is this like mess with Kevin day all right we’re going to double click all this insert data MetaBox field services lead insert and we can delete our buttons and we can save let’s check the front end okay we also need to while we’re here services this is going to be an oh gosh another image upload image image upload advanced image select did I try that on the on the icons let’s see if it works for this this is going to be the hero services hero background image all right and we’re going to put that at the top update so on the edit service page now we can refresh we can refresh okay I’ve never had this much problem my entire life with MetaBox headline lead talking point talking point what like why why is it not a thing oh okay well image select must not be the right thing wordpress HTML 5 advanced basic there’s no images and basic I don’t know what background is color picker custom HTML day picker day time okay image select what you would think would be select an image apparently it’s not image advanced image upload single image let’s try single image again see if we can get it to work update refresh ad media select update reload the template so I’m going to see if we can replace this background image back here all right background data MetaBox field services hero background image size original insert nothing nothing all right switch to file upload our image upload sorry image upload image advanced image let’s just try image by itself update and its service browse out it’s not on my computer so that’s annoying all right we don’t want it to be an image yeah I don’t we’re gonna have to file it to get file it has to be single image that’s that has to work featured image MetaBox field background image there’s nothing else I can choose from what is this medium large original full okay yeah there’s nothing else I can choose from I mean it’s it’s it’s it’s a single image needs to work is where we’re at and it’s not why is loading so slow now this is all the signs point to calling it quits okay um can I while we’re here style sheets forms button button button button primary WSF button all right so we did something like with a form wrapper right form wrapper primary it was like that maybe and we’ll go background color var base okay thank God that worked something didn’t break man this has been treacherous so far base hover nice save there we go okay I’m not so sure that this needs an L text on it so where did I put that right there and then what we need is those inputs text align center save okay something like that all right now I’m gonna file a ticket for this but that is enough for today that isn’t of torture for today oh boy gosh this is a great project all right love you guys see you