Building a Dynamic Service Area Page Template in Oxygen (CPTs + Custom Fields + Bi-Directional Relationships + Template)

0:00:00
In this training, you’re going to learn how to build a dynamic service area page template. Now, before we dive into the training, I want to get into the context a little bit of why a page like this is important and what your goals are with the page like this. So, if you think about service businesses as clients, they’re usually trying to rank in specific areas where they perform their service. Now, they might have a Google My Business profile, also known as a GMB profile. That’s very common. It is most likely if there is service area type business where they don’t have people come to them to like a physical location, rather they go out to people. So for example, roofers, which we’re going to be using as an example in this particular training, or you might have electricians or plumbers, you don’t really go to a location to get plumbing, right? The plumber comes to you. So the plumber has specific service areas that they serve and they want to rank in those service areas.

0:00:56
The problem with Google My Business Profiles is that they’re very limited when it comes to service area businesses. They typically are only good in the city, the business is registered in. And if it’s a physical location business, the city that the physical location is in. And then it’s a very small radius around that physical location. So this poses a challenge for service businesses who serve major cities in a major metropolitan area, for example. Or even a smaller city with a lot of local towns that are surrounding it. You want the client to be able to rank in all of these different cities. So if we use roof repairs, an example, you and let’s say you serve the entire state of Florida, well, I mean, it’s going to be tough to get a lot of rankings, even if you have physical locations throughout that large of a service area. So what we need is a way for us to rank in all the key service area cities that this roofing company as the example serves. So Miami and Orlando, that’s down south Fort Lauderdale, right?

0:02:00
You could go all the way up to North Florida where we have like, Destin and Panama City. We need to be able to rank in all of these different cities. And the best way to do this is with service area pages. Now there are a lot of service area page strategies out there. There’s a lot of different ways that people structure the underlying URLs for this strategy. There’s a lot of different ways people recommend structuring the content for this type of strategy. So when we do this tutorial and you see me build this service area page template, I don’t want you to take this as like the gold standard of how to build. This is the one way to build the service area page template. There are no other ways. There’s no other ways to structure the content. There’s no other ways to structure the URLs. There are other ways. But the way that I’m showing you in this training, I have used many, many, many times to get real world results.

0:02:57
We’re talking top three rankings across many, many, many cities for the same company. And so really great service area results. Lots of leads from this approach and strategy. Let’s talk about goals. Number one goal is obviously to get ranked in the specific service areas that you’re targeting. So if somebody in Miami types in Roof Repair, then they see the Roof Repair Miami page. And we’ll talk maybe a little bit more about that in a moment about how you can’t actually guarantee which page Google decides to rank there, but it doesn’t actually matter. Because what you’re trying to do as well is you’re trying to teach Google where you perform these different services. So every business website is going to have the main service pages like Roof Repair, Roof Repair Placement, but those aren’t necessarily location specific. So we have to train Google on where we actually perform those services. And this is what service area pages really can help with. And so Google may decide to rank your literal service area page in any given city.

0:04:01
It may choose to rank your home page in any given city, but it knows you should be ranking in that city because you have a service area page related to that city. It could choose any other, it could choose your main service page to rank in that city. I personally don’t care which page Google chooses to rank as long as it’s ranking us, right? And you shouldn’t either, but this service area page is a signal to Google that hey, we perform this service in this city. And so you should rank us there. So I think that’s a very important part of it to understand. The other secondary goal is when people do land on this service area page, we need to be able to convert them. They shouldn’t land on a page that looks like it’s obviously for SEO purposes and that isn’t really set up for conversions or anything like that. Our goal should be to convert as many users as possible from that service area page so that they don’t have to go navigating the site.

0:04:58
And in fact, if you make a page that is specific for SEO, people to land on and then they can’t even really do anything on that page, they have to go to other pages of the website. People refer to these as doorway pages and Google has been very explicit that they don’t like doorway pages. So we’re going to try to avoid that. And this another reason I’m using the template that I’m using in this tutorial is because it is worked extremely well for conversions. So not only does it rank well, but this exact template that I’m going to show you how to build is converting at 15 to 20% of visitors, which is very, very high for just a typical Google ranked random page on a website. This isn’t like a specific page that we’re sending ad traffic to. It’s just a page on a website for a service in a given area and it’s converting at 15 to 20%. So it’s doing really well is the basic gist of it. So we’re going to go ahead and hop in.

0:05:57
I’m going to screen share now. And we are going to pull up the example of what we are going to be building. We’re going to talk about why it’s structured the way that it is. We’re going to talk about the different components that we’re going to need to build around this service area page so that we can properly make it dynamic because I did mention that this is a dynamic service area page template. One thing about service area pages is you think about them like blog posts. There’s going to be a lot of them for the most part. If you’re working with a sizable company with a sizable service area, there’s going to be a lot of service area pages. And so you do not think of this like blog posts. You do not want to build each one of these with the builder. I get an individual basis. That is not scalable. It’s not maintainable.

0:06:49
So we need a template that is dynamic so that we can fill out custom fields, put the plug the information in, but the layout, the design is all controlled from a singular template. And then what we need is to use the content management system of WordPress properly in the sense that we have a custom post type for service area pages. We have a custom post type for things like services, a custom post type for things like FAQs and a custom post type for things like reviews. So as we go down this page, we’re going to talk more and more about each of those components. But this is the example of the page that we’re going to build. Now I will say in this tutorial, I am focusing very heavily on just structure in general. So we’re going to talk about like getting all of these pieces in place. But I’m not really going to spend tons and tons of time on fine details. Like you see a background pattern in here. You see a little background image kind of accent image illustration thing in this box. These link underlines.

0:07:56
I’m going to kind of style it up a bit. But the point of this tutorial is how do you build up the structure of this? I mean, your design is not going to look like this, right? You’re going to need to design it and make it unique to your company or your client or whatever. So the design aspect of this doesn’t actually matter all that much. It’s the layout of the content. What kind of content is represented here? And then how we actually build it and make it dynamic and make it scalable. Those are the important parts of this training. So don’t get caught up on the fact that I’m not going to be doing little teeny tiny design elements. Just focus on the main lessons in this tutorial. So first thing is first, we have a very large headline that stands out as soon as somebody arrives.

0:08:45
And I want you to notice that this is the H1 on the page. Sometimes you’ll see me do a smaller H1 and then a marketing headline as an H2 or something like that. Or really not even an H2 at that point. A lot of times I just make it text that’s very large and bold and looks like a heading. I’m knocking over water bottles and stuff. All right. That’s fantastic. Okay. So we’ve got an actual H1 heading that stands out and our keyword is going to be in this H1. Now, above the H1, I have a breadcrumb. I’m probably not going to do the breadcrumb in this tutorial because it’s literally just a short code from RankMath. And so most SEO plugins have used YoStiebily.

0:09:33
They have a short code for a breadcrumb. If you use SEOPress, I believe they have a short code for a breadcrumb. So that part’s not really important. It depends on the SEO plugin you’re going to be using. It’s nothing special. It’s literally you pop a short code in. You style it. How you want to style it. You’re good to go. But we are going to need a nice big heading. We are going to need a lead text. And then we’re going to have a call to action. I have a phone number call to action as well. Now there is some dynamic aspects to this page where, for example, right now we are during business hours. So you are seeing the phone number call to action.

0:10:07
Outside of business hours, we don’t show the phone number because I don’t want people just calling and leaving messages. I would rather have them click to fill out and get a free inspection. Okay. So this actually goes away. We’re not going to worry about that kind of detail here. I’m just going to show you how to put the phone number in and this button for getting a free inspection. This by the way does lead to a landing page where they fill out. Now we had a modal form. This is actually converting less, but it’s how they want it. We switched away from a modal lead free inspection form, which was converting like gangbusters really, really well. That they did want to increase the quality of the leads as they started to get more and more and more of them.

0:10:51
I can’t release any numbers on how many leads that they are actually getting, but they’re getting an astronomical amount of leads. And so it’s time for them to actually reduce the conversion rate while increasing the quality of lead. And we’re doing that by asking more questions, leading people through an actual process. Okay. So we built all of this with WS form. It’s working really well, but it’s not the conversion rate isn’t as high as it was, but they’re getting higher quality leads now. So good trade off, right? Okay. So that’s how that works. Next thing is a featured image, which we’re going to be putting in. Next is a main body area of text. Now the reason I have this in is because obviously Google likes text.

0:11:37
There has to be more things to crawl and read and get more context on. It’s helpful for us to have an area where we can talk more about the specific city, right? So you’re going to see that the Rufre pair in Orlando, Florida is mentioned again. We’re linking to our service pages like Rufre placement and getting a free inspection. We talk about some selling points as well, but this is just a nice little body text area. And as you can see, we have a sticky call to action that follows that text area down the page or follows the user down the page really. And kind of just draws attention to itself, which is another good reason I think these pages convert so well. So we’re going to create this little call to action box over here. Notice that even in this call to action, we’re injecting dynamically the city that we are targeting. And a lot of this is not done with custom fields. This is just you don’t even have to worry about this is done for you. It’s done for you through just dynamic injection and you’ll see how we set up the custom fields for that.

0:12:45
Okay, next is we want to show other related services. So yes, they are they looked up Rufre pair in Orlando. They landed on this Rufre pair in Orlando page, but maybe we want them to also see that hey, we do emergency Rufre pair. We do free inspections. We do Rufleak repair. These are like long tail variations of the keyword, which all help, I believe. And so they can actually click and they will go to the main service pages for these things. But this is just really increasing the context that’s increasing the internal linking throughout the website. Really important part of a good service area page. Now there’s a couple ways to do this. You can do like I have here where you’re like related services. What people do is they do a service area page for the mean business and then just show what services they offer.

0:13:38
I tend to not see that working as well. I tend to find that when you make service area pages that are specific to a singular service, it tends to work a lot better. And so that’s the method that I go with, which means that I am just showing basically related services or other services that we offer as well. And these are dynamically added here through bidirectional relationships, which we’re going to get into so that you can actually choose because you also may think about it like this. If a company has services in Miami, and this is a perfect example using Rufclaim because they don’t have commercial roofing services in every city. They do residential in every city, but only commercial in select cities. So we don’t want to just generically say, oh, we also offer these things because then it would query the commercial pages. We want the ability to pick and choose, hey, in Miami, we’re going to say that these are our related services. And then Fort Lauderdale, these are our related services and they happen to be different.

0:14:46
Or maybe they’re the same. But at least we have the flexibility there to decide which services are shown on which service area pages. Next thing is we’re going to have our process. So we’re going to, this is just kind of typical sales page copy at this point. Anybody making a decision is going to want to know what the process kind of is. So we have our process mapped out here. We have another image here, which has alt text. I should say that this image here has alt text and it’s location specific alt text. You can put also geo data inside of these images that can help as well. And it really is helpful if you can have the company provide you with real images from these specific areas. So you’re not having to fake it, right? And I also will say that real images works better than stock photos for pages like this. Google knows what a stock photo is.

0:15:43
When they scan a photo and they’re obviously indexing photos. They have facial recognition now. They have AI that scans images. The old adage used to be Google can’t read images because it just can’t, the box can’t, right? That’s why the alt text was really important for Google to understand the context of the image. And it is true that like if you have a unique image that Google has never seen before, it can take a snapshot of it, but it doesn’t really know what it is. I mean, it probably knows at this point, you know, what a truck is, what a house is, things like that. But it’s not seeing that, it doesn’t, it hasn’t seen that image before. But with a stock photo, I mean, stock photo is that same stock photos everywhere online. Google scanned that image multiple times. The AI matches it up and knows, oh, this is a stock photo that everybody uses.

0:16:31
And so in my opinion, I mean, Google obviously doesn’t tell you this explicitly. But in my opinion, when Google sees a lot of stock photos, it’s like, oh, well, we’re going to wait this less, maybe even trust this less because anybody can put these photos here. But if you have unique images that Google has never seen before, then Google is like, oh, okay, this is more interesting to us and potentially more trustworthy. Okay. So now we’re going to go down. I will say there’s two areas missing from this template that I initially had in my wireframe that Roof Claim has just decided not to execute on yet at this point, but they’re wanting to in the future. One is a photo gallery. I wanted to have a gallery of all the Roof Repair jobs and Roof Replacement jobs that they’ve done to put on these pages. And again, those would be dynamic from custom fields.

0:17:24
And I highly would recommend that, especially if your client has those photos and is willing to provide them to you and can consistently get you fresh ones and updated ones. So that’s one area that’s missing. Another area that’s missing is hyper local articles. I proposed that we would write hyper local articles for each city. And then we would use dynamic bidirectional relationships to choose which posts we show on which pages. So we could write maybe seven to eight articles hyper local to Orlando and then only show those articles on the Orlando service area page. And those hyper local content really helps Google connect the dots that, hey, you didn’t just create one page for Orlando. You’ve got like articles about Orlando, and they’re all interlinked together. This is much more powerful, right? But again, they’re not ready to execute on that yet. Right now we’re building out just the general.

0:18:23
We’re trying to cover as many cities as we possibly can. And when we have to stop to add more photos for every city and blog posts for every city, it slows everything down. So we’re going to come back later and do that because these are already ranking really well. We’re pulling in traffic. We’re pulling in leads. It’s not necessary, but I do think it’s going to make everything work better. So again, I’m encouraging them. That’s on the roadmap to add. So I just wanted to make a note that those things are additions to what I propose a service area template would be, but they’re not there on this specific template. And then lastly, it’s just selling points, right? Let’s just sell the person more calls to action, plenty of calls to action, right? They can get a free inspection.

0:19:08
They can call a phone number. They can ask a question right before they get to the end of the page that we just want to hit on with like, I like to call it the sandwich technique, right? You have boom, major calls to action up front. That’s the top level of the bread. You have major calls to action effort at the bottom. That’s the bottom piece of bread. And then you’ve got all your meat in here. And then sometimes in your meat, you have a little bit more of the calls to action, right? And I just think sandwiching the user in like that, it works really, really well. And I think that speaks to why these pages are converting at 15 to 20%. Okay, it is time to start building my friends. All right, so what I’m going to do is I am going to go to training.digitalgravy.dev. And I see we’re off to a fantastic start with our typing today. All right, I’m not even logged into the training site apparently.

0:20:03
Let’s go ahead and I’m telling you, we’re starting fresh from scratch. Nothing is set up ahead of time. We’re ready to rock and roll. All right, so I’m going to be easily flipping back and forth between these two things. What I do want to do first is just kind of set up my colors here. So I’ve got, let’s see, that’s not that color. Okay, here it is right here. All right, so I’m going to flip back. I’m going to go into automatic CSS. And I am going to go to our base color. And I’m going to put this one in right there. So we’ve changed this. Okay, let’s flip back. I want this yellow call to action. And here we go right here.

0:20:46
So that is going to be our action color. Let’s flip it back. Primary goes right there. So we’ve got primary and our base. And I don’t know if there are any other colors we really have to worry about. That that that that that that that that not really. Okay, all right, so let’s leave it like that. I’m not going to worry about the header and the footer. That’s all of you guys. We have other tutorials on headers, footers, all that. We’re just focusing on the main body content here. So if you look one thing before we even have to work on our template is we’re going to need custom post types for service areas. Number one, all right, so keep this in your mind service areas. Service is.

0:21:30
Oh, you know what? This one doesn’t even have. Oh, this is probably not even a good example. Let me go to look at what Atlanta’s got going on. I felt like there was something else missing. We probably didn’t choose it on that specific page here. We didn’t. Okay, so we need to add it. So there’s also this section. Man, I almost forgot some like the most important part, right? Social proof. I also have a map embed here that doesn’t actually behave like a map embed, which we’re going to take a look at how to accomplish that. I have a map embed here that dynamically shows you the city, right? So you don’t have to actually do a map export of the city and like make that all part of the workflow.

0:22:12
It’s going to all take care of itself. Testimonials and these testimonials are also driven by bidirectional relationships. Okay, so that’s we’re going to have a reviews CPT. So I think I’ve got three CPT so far. And another thing you can also optionally add to these is FAQs if you want to. But we don’t have those. I think we have it under how it works. We have an FAQ section. Yeah, we do. It’s actually a sort of FAQ section. So you can see here that they can load more, get answers to all their questions, get out of you out of you out of you out of those have to be redone because oxygen’s toggles are just awful. So that will eventually get redone. But FAQs is another thing you could potentially add, you would need a CPT for the FAQs as well, but we’re not going to go that far.

0:23:01
We’re going to do service areas, services, reviews. And I believe that is it. Okay, so let’s hop back. Let’s go right into Metabox and we’re just going to go right to post types. So we’re going to start knocking this out. So the first thing we’re going to do is services. And then the singular version of that is service. I tend to make the slug the plural version, but that’s up to you. It’s really personal preference. Okay, so for services, what we can do is we’re just going to add a little icon here. Let’s just use a carrot for now. Okay, all right. So I just don’t want all of them to be the settings wheels. Okay, what do we need for services? We don’t even need to make those decisions yet and we don’t even need categories for our services yet.

0:23:48
So we’re going to do service, and we can see right there that we have services with a little carrot. So we’re off to a good start. Next thing we’re going to do is go to add a new post type. This is going to be service areas, all right. Service area is the singular and then service areas is the slug. Okay, let’s think about this for the archive page. On RoofClaim, you’ll see that I made the slug I in, right? And I’ve been thinking lately, we might try this on this tutorial about mixing the slug all together. So I’m going to make it in for right now because in is really short. Service areas kind of, I don’t like long, really long URLs. We’re already going to have like, you might have states, you might have cities. I’m just going to show you how to do this with cities. States is a little bit more involved and you have to create more templates and things like that.

0:24:44
But most people I think are just going to be able to get away with cities. So that’s what we’re going to do here. All right, so I’ve got my service areas in and you can see there, I didn’t choose a icon for it. Let’s choose the map little pin here. Okay, and then I will update that. Okay, so you see I have service areas, I have services. I also need one for reviews. I’m going to do new post type and we’re going to say reviews and review and reviews. And then under advanced, I can do like a heart. Okay, and we’ll publish that. So I’ve got reviews, service areas and services. Guys, there’s no reason not to use custom post types. It’s so easy, so easy. And then it makes your life so much easier.

0:25:26
You don’t want to try to organize all this stuff in pages. It is an absolute disaster. Don’t even attempt it. Okay. All right, so the next thing that we need to do is we need to start mapping out our custom fields. So if we go to service areas right now and hit add new, we’re basically going to get the normal, what looks like a blog post builder and then the oxygen metabox down there. What we need is to figure out, we need to really map. And in fact, I can, let me just grab this and then come back. And so I don’t have to switch all the way over there. I can just switch tab to tab for a minute. So each one of these things that needs to be editable, needs to have a custom field associated with it. So we’re going to take this section by section.

0:26:13
So we basically have a hero section, right? So I’m going to go under metabox and I’m going to go to custom fields and I’m going to, we don’t need event details. Let’s just start out fresh. We’re going to add new and we’re going to call this service area template. Okay. So these are the things assigned to service area templates. I’m going to add a field, which is going to be a group field. And I’m really hoping we’re going to have to test this out. I’m really hoping that oxygen 4.0 is now working with metabox groups. I don’t even think I’ve tested it yet, but we’re about to find out. So this is going to be hero section. And we’re going to add a subfield. And the subfield is just going to be a text, a normal text box. And this is going to be called the heading or that, or we can say the headline.

0:27:01
All right. And then we need a lead text area. So we’re going to add, now you can do this. Text area. You can do this as text. I’m probably going to do this as text area. And we’re going to do lead text. What else do we have in our hero section? Now this is a decision you want to make. Do you want to change the call to action from one service area to another? I personally don’t. So we’re not going to make a custom field for that. We’re not going to make a custom field for this. Those are going to be static across the board. All service area pages.

0:27:35
Same button text. Same phone number. Yada, yada, yada. OK. Now if you had a different phone number for every service area, now you need a custom field for that. But they use the same one. So no problems here. I do need a featured image, but that doesn’t need to be a custom field because we, well, actually, yeah, that doesn’t need to be a custom field. We’re going to leave that as the featured image. OK. So that’s it really for the hero section. Our hero section is done. I’m going to go ahead and publish this.

0:28:05
Now what I do need to do is assign these custom fields to our service areas page. So we come into the settings here. You’ll see location, post type. I need to say, hey, this is assigned to service areas. Now I’m going to hit update. And now what we should see when we add a new service area is there you go. A little group that says hero section and it has my headline and my lead text in there. Now I want to also position this. Let’s see if we can get it right here. High after content or on the side priority. High standard seamless, no metabox. OK. I think that’s as high as I can get it. What we really need to do is get rid of the oxygen box. We’re not going to need the oxygen box at all because like I said, we are, we are using a template here.

0:28:52
We’re not going to be doing this page by page by page. So for that, I can go to oxygen settings and I can go to client control and I can basically say on the in slug, which is our service area of pages, I’m going to hide the metabox for oxygen. And now you see that we, that oxygen box is gone. We only have our custom fields. Now I am going to leave this and this because this body text right here is actually going to be the Gutenberg content. Now you don’t have to make this the Gutenberg content. And in fact, maybe I won’t do that for this because I don’t really want people to be able to add images in there. I don’t want them to be adding any other fancy stuff that requires blocks. I really only want them to be adding paragraph text because that is what this, because that’s what this section is designed for. All right.

0:29:43
So let’s just go ahead and hide that. So what we can do is go to WP code box or no, I’m sorry, metabox, metabox, WP code box, they’re like, they’re all boxes. Let’s go to the post types, let’s go to service area edits and supports. Now we’re going to turn off the editor. We need to keep the title. That’s always good to have. And now if I refresh, you’re going to see now this looks much more like super just philosophy old hit publish and you’re good to go, right? Okay. So let’s make a service area called Atlanta, Georgia. All right, and we are going to publish that. And I also want to see what my slug is. And sometimes the slug is turned off, which is kind of annoying, but you’re going to want to go to screen options, turn the slug on and then you’ll be able to see the slug right there.

0:30:38
There should also be another box over here. And I’m trying to figure out why it’s not there. Pay attributes. Update. Believe that’s the box that we want. I wish they would have that on by default. Now you see service area attributes. I wonder if I turn off the slug here. If it normally it puts the slug inside of the attributes tab over here. All right, I don’t know. It’s not that important, but I do need to see what the slug is so that we can keep all of those consistent. All right, so I’ve got my hero section mapped out. Next thing I’m going to do is we’ll call this the content section. Okay?

0:31:17
So I’m going to create another group. So I am on my, let’s go to custom fields, service area template. All right, you can see under fields, if I minimize this, there’s my first group hero section. Now I’m going to add another group. This is going to be the content. Okay? I’m going to add a field. Next, I’m going to add, this is going to be a whizzy wig editor. Okay? I’m going to call this content or page SAP content. How about that? Okay. And then editor options. We don’t need to worry about that stuff. I want to make sure that there’s, this is definitely required.

0:32:01
Now, I’m going to leave all this stuff off for right now because it’s going to be a nightmare. It’s going to be warnings all over the place. You haven’t put content in yet. You haven’t done this. You haven’t done that. It’s easier if I just leave that stuff off. All right. So SAP content, I believe it’s the only thing that’s going to need to go in there. This is going to be static. Okay? We’re going to make that say the same thing on every page, but we are going to dynamically insert something. Oh, that reminds me. Okay. And I’m doing this all on the fly off my head.

0:32:28
So we’re going to jump around just a little bit. Okay. So let’s add a new group. And this is going to be called service area info. Okay? And I’m going to add a field. We’re going to have a text box. This is going to be the service area. This will be city name. Okay? Add a text again. This will be city. This will be the state name. Okay? Add text. This will be the state code.

0:33:04
Okay? Like FL for Florida, for example. We have our city name, our state name, and our state code. I think that’s all we need in this area for right now. And I’m going to move that up to the top. Okay? Now we’re going to update what we’ve got going on. Okay. Perfect. So you can see service area info, our city name, and our state name, and our state code. Then we have our headline. Then we have our lead text. Then we have our SAP content. Okay. Next thing that we need to build is our services.

0:33:35
So that is going to be like I said, a bidirectional, the grid at least is going to be a repeater, bidirectional, all of that. But look, we have a headline here, and we have lead text. Okay? So this is going to be our related services. I’m going to add a new group. And I’m hoping, man, I really hope groups work because if they don’t, I’m going to have to come back and take all this stuff out of groups. All right. So this group is going to be called related services. I’m going to add a field that is just a text field, and then this is going to be heading. And then I’m going to add a text here that is called, and actually instead of just regular text, let’s do text area. And this will be lead text. Perfect.

0:34:24
Now I can call this lead text. The same thing as I did the lead text up here because it’s in a group. And so when I’m going to add these things, you’ll see in a minute. Hopefully, if it’s working properly, that it’s all grouped together. So it’s not going to cause any confusion. It used to me that you had to do like related services lead text related services heading. That was very annoying. Now you can kind of use literal names and just group them together. All right. So that should be good to go there. Next thing, as I scroll down the page, I see that we have our reviews. And we’ll call this social proof, which we’re also going to put our map there just because that’s how it’s designed. So I’m going to make a group. And this is going to be called social proof.

0:35:07
And then I’m going to add a field. And if we look here, we’re going to need another heading, another lead. We’re going to need, and then that’s it, heading and lead pretty much. So I could have just duplicated our other group, but whatever. All right. So we’re going to do text here. It’s going to be our heading. And then I’m going to come down here and we’re going to do our text. Oh, no, I wanted to click text area, text area right there. OK. Lead text. Perfect. And let’s update that. Let’s go back now. I need our process section, which we’re going to have a heading, lead step one, step two, step three, step four, and an image.

0:35:52
OK. And I’m wondering here, yeah, we’ll make this editable. And when we do step one, step two, step three, step four. See, this is where we’re also going to really push and see if the metabox integration with oxygen is really legit, because we’re going to need to group this as well. So it’s going to be a group inside a group, which I don’t know. It’s had problems before. We’re going to have to find out. OK. So what we need is a new group. And for this group, we’re going to be calling this process. We’re going to add text, and this is going to be our heading. We’re going to add text area. This is going to be our lead. We’re going to add a group.

0:36:39
Another group. This is going to be process steps. And then in this, gosh, I really hope this works. The beta of my existence is I’m recording tutorials going, I really hope this is going to work. Then, you know, because sometimes it doesn’t, and I got to trash the whole tutorial, figure it out, or work around, and then come back and record it again. Absolutely nightmare. Hour is down the drain. All right. So, oh, let’s do this. So we’re going to have process step, or maybe each process step is a group, actually. So this is going to be process step number one. That’s how we’re going to do it. Process one.

0:37:21
All right. Process one, we’re effectively going to have text, which is our step number. No, that doesn’t actually need to be in there. Just a heading and text, basically. Okay. So, heading, this would be called heading down here. And then we’ll have a text area for text. Okay. And then I can effectively duplicate that. So there’s two, three, four. And I just open this up and make this say two. And it gives them unique IDs, so that duplication is usually not an issue at all. Step three and step four. Okay. So there’s our process steps.

0:38:08
Now, we need one more field for our photo. All right. So we’re going to add a, and I think you have to use the advanced image, because the normal image doesn’t work. I don’t know if they fixed that in 4.0 or not, but I don’t really care about finding out right now. All right. So, we can just call this the image. All right. And I think we can limit this to image size. Let’s do 1440. I don’t even know if that matters that all that much. There is a way, Max number of files, one. That’s what we want to do right there. Okay.

0:38:48
Let’s take a look at how we’re looking so far. So please fill out this field. What field did I not fill out? Image, image advanced ID. Okay. Process image. Is that what it wants? Once that little ID, I guess so. Okay. All right. Great. Let’s take a look at where we’re at now. Perfect. So we have related services, heading, lead text, social proof heading lead text, process heading, lead, process step one heading text, heading text, heading text.

0:39:22
We have our image down here. All right. We’re looking pretty good. And now with Metabox guys, you can, you know, if you don’t like this kind of layout, which, you know, it’s not the greatest, but at least everything is grouped together and it kind of works. And it allows you to just kind of go top down, filling out your information over here. It’s not the worst thing in the world, but it is customizable. Like you can move that stuff around if you want to. All right. That’s, but not least we have our selling points. And we’re going to need a heading text. These are always going to be the same. Because we don’t want you, we don’t want to try to do unique selling points on every single service area page.

0:40:02
If you ever have to edit the, I mean, oh my gosh, think about the complexity nightmare of coming back to do that across all these different pages. You know, selling points are selling points, right? You come up with six good ones, put them on every single service area page. But we do want to inject dynamically some of that stuff in here. So we don’t need custom fields for these. But I do want that to be custom. I do want this to be custom. So we need heading text. This is all static and then an image, heading text image for our selling points section. All right. So I’m going to add a field. Let’s see where I am. I’m in all these groups. I’m lost.

0:40:38
Okay. We’re going to add another group. And this is going to be called selling points in which we are going to have a text field for our heading. And we’re going to have a text area for our lead text. And we’re going to do another image advanced for our image. Okay. And we’ll call this one selling points image. And we again want to do max number of files, 1440. And let’s just update there. And I think for the most part, that is pretty good. Now the next thing we’re going to have to do is the same exact thing but for our services. So I’m going to go to a meta box custom fields. I’m going to make a new set of custom fields. This is going to be for services.

0:41:38
And we are going to add, and this is already grouped. All right. We don’t need a bunch of groups here. It’s basically what I’m trying to get at. You can just put your custom fields in. So if we look at our service, our services box, we have an image, which is going to be our featured image. So that’s no problem there. Heading and text is basically all we need to create those boxes. So I’m going to go text for heading. And then I’m going to go text area for lead text, just like that. Okay. Publish. And then I need to assign these to our services. I’m going to update.

0:42:18
Now I do want to keep the oxygen meta box on our services pages. When I go to add new, you’re going to see that. What I don’t need on our service pages, we’re not really building any service pages here. We can get rid of that like we did last time. I can actually drag this up to. So obviously, I’ll just leave it right there. We don’t need to get into too much complication. But I’ve got enough to create my cards now at least. And then I got to do the same thing for my reviews. So if you see reviews, we’ve got the review body name and then source, review body, name and source. Okay. So into meta box custom fields, add new reviews. And we’ll assign this to our reviews. And then we will add a field.

0:43:11
This will be a text area. This is going to be review body. And then we’re going to add a field. And this is going to be a text field name. And then because this, yeah, I’m going to do review, review your name. We’ll give it a little bit more context here. And then text I need as a source. Perfect. Okay. Alright, published. Now there’s a bunch of ways to do this. A lot of times what I do with the review source is I use a drop down or a bullet style list where there’s predetermined things you can choose from like Google, Yelp, etc. And then, but I’m not going to get into all that. That’s like a different tutorial.

0:43:56
It’s I’m just doing the minimum that I can so that we can actually create the template we’re trying to create, which is the training we’re trying to train. Okay. Alright, so that we’ll do this kind of services covered in other tutorials. Alright, so I think we’re, I think we’re good. What we need here is quickly just map in some services. So we’re going to do roof repair and we’ll just publish that. We will do roof replacement. We’ll publish that. We’ll do roof inspection. And these don’t have descriptions yet, obviously. Maybe I should focus on doing that while I’m here. This whole card is clickable and it’s been made to be accessible. So it’s a little bit harder to get to the content that we’re trying to get to. Okay.

0:44:55
So there’s that. You know what? I don’t actually need the heading box. I’m just realizing, we can probably just get away with using this. Yeah. We won’t even, you can stay there. I don’t know. Let’s not confuse people, right? Okay. Did I save this? I’m just going to save that just in case. Alright, so custom fields, services. Let’s get rid of the heading field. I don’t think we need it. Okay.

0:45:31
So add new service. It should just be there. You go. So there’s your lead text right there. Let’s update. Perfect. Alright. Let’s go back. So let’s do roof replacement, roof repair real quick. Just their descriptions. So I’m going to inspect this one. So this is roof repair, bam update. Here’s roof replacement. We need inspect. Inspect.

0:46:01
Come on. Span. Okay. Okay, roof replacement. Pop that in. Okay. Good. Alright. What other services do we need? Let’s get a fourth one just so I can show you the bidirectional relationships works. Let’s do commercial roof replacement. Okay. Fast commercial roof replacement. Okay. Publish.

0:46:32
Publish. Now we have four reviews or four services. Now we need to do our reviews. So I’m going to go into reviews. Let’s add a new review and we can see down here. Here’s a review body that we can steal. Reviews doesn’t need this metabox either and that’s going to annoy me and look at things I’m in the builder. So it’s not going to let me save. Let’s go out here while we’re doing this client control reviews. We turn that off save changes. The other thing. Let’s just pause here and make sure that we understand this properly. Reviews are not going to get their own URL. And what we need to do is before we forget and end up with URLs that are just for nonsense reviews that you know that’s just thin content.

0:47:14
We don’t want those showing up. So we’re going to go to metabox and we’re going to go to post types review and then supports. Now advanced. I want to turn off. There’s two things we have to uncheck. Has archive. No, we don’t want it to have its own archive. We don’t want it to have a query var. OK, so I’m going to update that. And now just to test this, we can add a review that I turn off the oxygen metabox too. I did. We actually don’t need the Gutenberg body text either. So I’m going to go to metabox, post types, review, supports, turn off the editor. Now when I go to reviews, add new review, now I just have what I need. OK.

0:48:02
So we are going to add Eric Fritz as the reviewer name. We’re going to grab the body text of his review. And we’re going to say the source is Google. OK, so I published that now. Oh, wait, hold on. We got to do Eric Fritz up here as well. Let’s update this. OK. Now it’s going to review. OK, the view should not be here, actually. I’m going to go to metabox and we’re going to go to post types, advanced. OK. It’s this. I need to leave on public, turn off publicly queryable update. Now watch this.

0:48:49
If I refresh, look, you can’t even view it. There’s just no URL at all. So that’s what you want to get to. Because again, these should not be accessible posts, right? They’re just database information. They’re not posts that we’re trying to get people to. Another failsafe is you can go into something like rank math. And you can go to titles and meta. And you can come down to review. Oh, good. See, it doesn’t even show them here, I think, because I turned them off. So even rank math knows that you shouldn’t be able to set any, you know, whether it’s indexable or anything like that. So that’s good. All right.

0:49:32
That’s exactly how we want it. So now I’m going to go to review that new. And we’re going to add the next one. So this is going to be Vance Duncan. So paste, Vance Duncan. And then his review source we’re going to say is Google. And I’ll throw another one in here that’s just yelp at random. I need to not forget to put their names up here. By the way, sometimes people ask why do you have the reviewer name here when you can just use this? Here’s the reason because when you’re doing the bidirectional relationships, I’m going to say that this is he’s in Atlanta. OK. I don’t want to use, now I don’t want to query this because it’s going to query the word Atlanta next to his name.

0:50:13
I want a clean version of his name that I can use for querying. And then from the database side of things, I want to instantly know what city he’s, his review is associated with, right? OK. So that’s good there. The next thing that we’re going to do is add a new review for Robin Garrison. And we’ll just say Atlanta here as well review body, Robin Garrison review source will do her as yelp. OK. Publish perfect. Now what we can think about is our bidirectional relationships. So I’m going to go to relationships. And what we need is a relationship between service areas and reviews. OK. So I don’t know why it didn’t pull up the relationships area, but we’re going to do new relationship.

0:51:05
And I’m going to call this reviews. SAP’s. I’ll just start everything with SAP’s reviews. So that kind of groups them all together. And then for the object type, post type, we’re going to choose from reviews to service areas. OK. Service area. Perfect. And then you have to go to the field and you have to give these things labels. OK. To object, get field down here as well. So remember this one was reviews. OK. And then this one was service area. And I’ll say review.

0:51:47
I think we want singular there. We’ll check that in just a minute, but I think you want singular language there. So I’m going to go ahead and publish that. And then I’m going to add a new relationship. And this is going to be SAP’s to services. And you do not check, by the way, do not check this reciprocal relationship box. It seems like you would want to, but don’t because it breaks it. OK. We’re going to go down to review. No. We want services. And then again, we’re going to choose service areas. Perfect. And then field field. So this is service.

0:52:21
And this is service area. And then we’re going to publish there. And now if we go to services, and we click on a service, we can see right over here it connects to service areas. We can connect them and link them up. Let’s go ahead and add another service area. So we’re going to add Orlando, Florida. And I’ll just publish that for now. And as we’ve Atlanta, Georgia, we have Orlando, Florida. So that’s all good. I think now that we’ve done, see now I can connect when I’m on a service area, I can choose which reviews I want to show here. I can choose which services I want to show here. I do want to see if I can move that metabox, though. I’ve never tried to do that before.

0:53:08
Oh, I can move it. I can just drag it out. There we go. Because I kind of like it down here. In fact, I can go up here. And then I want to change this connected from. So I think, let’s see, where is it say connected from? Maybe it has to be in both. It is. Look at that. Okay, related reviews. Review, select a review. Okay, the other one is going to be related services. Perfect. All right, we’re learning.

0:53:48
We’re learning on the fly, my friends. All right, I just did reviews. Let’s do services. Let’s not click on irrelevant things. All right, metabox. Metabox. Related services. Update. Boom. Related reviews. Related services. Much, much better from an organizational standpoint here. I’m just going to update that. We’re ready to rock and roll now. Okay, so let’s fill out the content for one of our service area pages.

0:54:25
Let’s do Atlanta. All right, so we have city name, which is Atlanta. This is how quick it goes. If the template was already created, this is how quick it would be to add a new service area page. Obviously, we self to build the template. But, just imagine the template’s created. Remember, we’re talking about scalability, right? Imagine the template is created. All we’re doing is filling out these field-titting publish. Boom, we have a new service area page. Done. Nothing else to think about. If we need to edit a service area page, open up, change custom field and hit publish done. You don’t have to open the oxygen builder. You don’t have to go through all of that.

0:54:58
Even the client can do it, right? All right, so we have a state name is Georgia. The state code is GA. So there’s my information there. My headline is going to be, let’s close this, bring this up. So I’m just going to steal all of this content. Professional roof fair and roof placement in Atlanta. Our lead text is this right here. Then we’re going to come down and we’re going to steal our main body content. I believe I made that a wizzy wig. Yeah, so it’s going to be just fine there. Make sure there’s no erroneous code getting in there. There isn’t everything works just like it should. Now we do related services heading. So we’re going to come down here.

0:55:38
I’m going to grab this and pop that in. Pop our lead text for that area in. We’re going to have our social-proof heading in text, which is right here. Lead text goes there. We have our process heading in text, which is down here. We have our lead. And then our process steps. So we have step one is a free roof inspection. There’s our text for that. We have next one is an insurance claim. And then I need to change that to roof claim. And then we’re going to have our repair or replacement. And I’m just going to say roof repair, because that’s what we’re actually optimizing for. $1 million guarantee. Pop that in.

0:56:44
We do want our image to be there. Let’s save image as. And let’s go from downloads. We’ll go new folder. Roof claim. Save. We want to save this one while we’re there as well. And we probably want to save this there as well. Perfect. We will make a new folder called service areas. And under this, this is literally how I do it for the clients. We would do Georgia. And then under there we would do Atlanta. And then here’s my photos for Atlanta. Boom, boom, boom.

0:57:30
There’s my three photos for Atlanta. Okay. And then this one goes in the section that we’re working on right now. Now we have selling points heading. That’s going to be this. And we’re going to make this a roof claim. Cool for your. I’m going to say Atlanta. Roof repair. Okay. And that doesn’t need to be capitalized. Why choose roof claim. Okay, lead text. Grab that. Pop it in.

0:58:02
Add media. This one. Select. Perfect. And then we need a featured image, which is this one. Set our featured image. And we’re going to update. And we’ve basically, you know, a giant page would have just been, created out of thin air if our template was already done. But our template is not done. We have to go create our template now. So what I’m going to do. Oh, let’s associate some reviews here while we’re here. So I’m going to add more. Now you can see why I put Atlanta in parentheses.

0:58:36
Because when you don’t, you’re like, which one is which one is the way it’s that associated with, right? And services, I can say that we’re only going to do these. We’re going to leave out commercial. So in our query. Commercial should not be in the query on that page when we get there. Okay. So now I’m going to hit update. Perfect oxygen templates. Add new service. Area city page. Okay. And I’m going to inherit the primary. Actually, let’s leave that alone. Normally you would do that because you want to inherit your header and your footer, right? But I don’t have a header in a footer.

0:59:20
They’re like nonsense. And I don’t want to distract from the page that we’re creating. So I’m just going to say none. But I do want to assign this. I’m going to assign it to. Single service areas. Just trying to think. Yes, single service areas. Okay. I’m going to go ahead and hit publish. And we’re going to edit with oxygen. And what this should pull up in our preview here is service areas. Hopefully Atlanta or the other one. But hopefully Atlanta because Atlanta is one of the content. I think we can switch it.

0:59:56
I did switch back to Chrome. And Chrome still does the page loads much slower still. The oxygen builder still loads much slower in Chrome. There it is. Previewing Orlando Florida right there. That’s exactly what we want. Except we want Atlanta. Okay. But at least we’re previewing the right things. All right. So we have our blank slate for creating our template now. All right. So we need one section. I’m just going to count the sections and kind of show you how I map this stuff out. So one section.

1:00:25
Two sections. Three sections. Four sections. Five sections. Six sections. So we’re going to need six sections. So I’m going to add a section. And I’m just going to duplicate. That’s one, two, three, four, five, six. Now in my structure panel, we are going to just right off the bat start naming these things. So there’s hero. And in fact, let me. All right. Have I been recording well? Okay. Good.

1:00:55
I’m just going to go over recording just fine. I want to shrink that up a little bit. I hate when there’s not space around my browser window. Okay. I think we’re good to go there. What in the world has happened? Okay. We’re in the screen. All right. So there’s hero. And then if I remember correctly, we have our content. And then if I remember correctly, we have our like related services. And then I believe we have our social proof. And then I believe we have our selling points. I’m missing one though.

1:01:30
Process. Okay. So this one is going to be process. And then I’m going to move this up. And where was process? I think it was after related services. Let’s just go double check. Oh no. Process came after social proof. So we’ll move social proof up there. Okay. So we’ve got my section based content mapped out here. Now let’s talk about classes, custom classes, versus utility classes, versus styling things at the ID level. Technically, we are on a template that is going to control all these pages.

1:02:08
So custom classes become less relevant because we don’t need to worry about losing global control. And we have the global control by nature of the fact that we are working on a single template. However, there are certain components that we do need to have global control over because they’re going to be used on other pages as well that are not this template. For example, this review card, this service card. So those things are this CTA card. These things are global components. They’re still going to need custom classes. Technically, I can use utility classes for almost everything else on this page. This process card would definitely want to have global control over that. And then you might think about, are we going to use the selling points card card? I call it. That’s a very large detailed card. But are we going to use that elsewhere? If you are, then use custom classes.

1:03:03
Now we say, if you don’t know, then use custom classes. So we’ll just follow that logic and we’ll use custom classes for those things. But I can kind of get just cracking right here. So we’re going to do BG-based Ultra Light as our background up here. I’m going to close that for a second so I don’t keep going back to it. So there’s BG-based Ultra Light. We’re going to have an H1 in there. We’re going to have a text in there, which is a paragraph. And then a button and a phone number. All right. So text, which is a paragraph. And then we’re going to have a button. And then we’re going to have a phone number, which is just going to be a link. Text link. Just like that.

1:03:49
Okay. We need to think about this. I probably want to group those two things together. I definitely want to group the button and this together. So I’m going to add a div. And in that div, I’m just going to call this CTA. And I’m going to drag my text link in there. And I’m going to drag my button in there. So button is in, text link is in, CTA is there. That’s perfect. I probably want to group those things together as well. Perfect. Oh, no, we don’t want to do that. We want to add a div. All right.

1:04:24
And then this div is going to be heading. And I’m just going to drop the heading in there and the text in there. Okay. I think that’s good to go. Okay. So now what we can do is I can sender all this stuff. I can send her all this. Why do I keep missing this? I can dash. I can sender all this. Perfect. And then I can owl space all of this as well. There you go. So that’s going to get us our spacing kind of the way we want it. Let’s think about this.

1:05:13
Our phone number. We probably want to put a custom class on the phone number. No, because it’s not really showing up anywhere else. In the same manner. It is right there. Okay. So let’s do link phone like this. I just because it’s a link. I do link double dash phone. It’s a link style. There’s a phone number. So I’m going to do link double dash phone there. And what I’m seeing is it needs to be our base color. So I’m going to do var base. It also needs to be bolded.

1:05:48
And then it needs to have this underlying effect. I’m also going to do owl s in here. Okay. Maybe owl XS. Yeah. Let’s do owl XS. Okay. And then let’s just pop a phone number in here real quick so I can see it in context. It says or call. All right. So I’m going to do that. Take the extra space out of there. And then what we’re going to do is on the after. I think that’s going to be the best way to do it on the after we’re going to do layout, flex, size and spacing, height.

1:06:31
Let’s just do three pixels and then with is 100%. And let’s do a background color of our primary. And we’re going to get that underlying effect right there exactly what we want. What happens when you hover? Okay. We’re just getting the primary color. That’s exactly the way we want it to be. All right. This is going to be a button primary. And we are going to say get a free inspection. Now we actually don’t have to style this button like you see it here because it’s all controlled by automatic CSS. Now if you don’t have automatic CSS, you would want to style these buttons obviously. But you know, the reason we’re doing automatic CSS, a lot of decisions are just done for us. Like everything is automatic kind of someone just go to the admin. And we’re going to go to automatic CSS.

1:07:25
We’re going to go to our buttons and links. And then under our primary button, I’m going to want to change the text color to var base. And so it’s going to make that text dark. And then I am going to what happens when we hover anything special, nothing special. So that may be all we need to do there. Let’s look at the front end of this and just see how we’re looking. Page not found. Well, that’s always a good start. I think we need to reset our permalinks. So I’m going to go back and we’re going to go to settings, permalinks. We’ll do a double tap on our permalinks. And then we may even need to resize shortcuts. I’m not sure. There we go. All working well.

1:08:15
Okay. So the hover text is still white. So under primary button, hover text color, I need to keep that as var base. So I’m going to save there, refresh. And now I get what I want. But I also am noticing that that is a bold text as well. So I am going to come up here. This is going to be the same across all buttons. So we have this global button defaults area where I can set the font weight. Text transform button with button line height. Ah, font weight. It’s like right up here. Like, what am I doing? It’s the second one. All right.

1:08:53
Maybe I moved it. Maybe I need to work on putting that somewhere else. I think, you know, button line height should probably come after text size. Yeah. So we’ll think about doing that. Now you see it’s bold. Now I also want to make it bigger. So I’m going to do custom text size here. And I’m going to do, I still want to be 14 on mobile. But I want it to be 20 on desktop. So we’re going to save. And we’re going to take a look at that. Perfect. And then I also want it to be uppercase. Save.

1:09:21
Um, we are going to reload the builder in a minute, but not quite right now. Okay. So you guys, you guys, now I have different fonts loaded on this training site. And then I’m going to type in. And I’m going to type in here. So just ignore the fact that that’s happening. But everything else is looking really good. Okay. And this is my hero. So why is this? Why is there a big section up here that’s something that. Oh, content. How did content get way up there? She come after hero. All right.

1:09:48
Good. So now what we’re going to do is, um. You start injecting some dynamic data, right? So we’re going to go to metabox field. Now is the moment of truth, my friends, do we see if the groups work? Do the groups work? Uh, so I should see a hero section here. Bam, hero section. Hero section. Why is there a two hero sections? Headline, insert. Does it work? Oh, okay. At least it works. All right.

1:10:19
Let’s check this out. Well, what has happened now? All right. Now, now, now it appears we’re running into some oxygenation here. Okay. Let’s go back to permalinks. Reset twice. And. Dude, if it is the, if it’s just that dynamic data being there that just destroys your entire page. What has happened? My friends. Exit the WP admin. Okay. Oxygen settings. Security.

1:11:11
Sign all short codes. I’ve made this. Yes. Okay. Completed. Oh, dear. What has happened? Okay. I can see it in the builder. Oh, there it is. It’s back. Okay. Maybe, maybe resigning short codes worked. Fantastic. Is it going to blow up again when I do this?

1:11:51
Metabox, hero section, hero section, headline, insert, save. Look at that. It does not work. It worked a second ago, but it’s clearly not working now. Let’s try it one more time. Insert data. Metabox field, hero section, hero section, headline, insert. I want to be on Atlanta. I was previewing Atlanta. I leave. I come back. It wants me to preview Orlando. It’s stuff like that. Little tiny details. Okay.

1:12:31
At least it’s working. I think we’re good now. We’re going to insert data. We’re going to go to metabox field. I’m glad that was in there because you guys see, you know, here’s some troubleshooting things you can do. Hero section, hero section, lead text, insert. If acting like I added two groups when I clearly did not, all right. So that’s good there. Also, if you’re wondering how my text is automatically, I didn’t have to set a width on that. So I put, remember, I put that as a paragraph tag. Because I’m using automatic CSS now, this is a new feature kind of unreleased as, as of the recording of this tutorial.

1:13:11
But my paragraphs automatically have a max width of 75 characters. And I can actually control that in the automatic CSS dashboard. And I go to typography. And it’s right here, text line length, 75 characters, heading line length, 45 characters. So it’s automatically ensuring that my text never gets too wide. Because line length is, you know, having a good line length is really important for readability. But you can customize it to whatever you need. But it’s there. And I don’t have to constantly put max widths on things like you’ve probably seen me do in the past. It’s just already, again, automatically it’s taking care of. Another problem that I don’t have to worry about. All right, so we have professional roof repair.

1:13:55
Now, if I did want to come in with a max width, right? I could just do widths of like L here. And then, boom, it’s going to shrink that down. It’s going to make it like that and all as well in the world. So I can still make it smaller if I want to. But it’s never going to get longer than what I’ve put in as the cap, basically. All right, let’s get back to our tutorial. I have enough shenanigans. So the next thing that we need to do is add our featured image in. So I’m going to go ahead and add an image. And we’re going to go data featured image. And it should pull that in nice and easy like that. The one thing I do want to do is, again, you can do this at the ID level potentially here because it’s the only place we’re using this and it’s a singularly controlled template.

1:14:39
Or you could make custom classes. And I’m just going to go rogue. I’m going to do this at the ID level. I’m going to show you the one use case where you can do this at the ID level. Even so, even though we never mind, I’m backing up. Even though we could do it, let’s say we do create some other type of service area page. Or maybe we want to use this featured image style on a service page. There you go again. We’ve got the MABEs. And whenever you got a case of the MABEs, you got to go custom classes. So we’re just going to call this image featured image double dash featured. That’s it. Nice and easy. So my height on this is going to be 40. And then my width is going to be 100%.

1:15:27
And then I am going to go to custom CSS. And Object Me Zoom way in. Object. Oh gosh, that was way too much. Object Fit Cover is basically going to make that. You’ve seen that happen in all my other tutorials. Shouldn’t be a big deal. I am going to. Oh, that’s right. I got to keep remembering. It automatically now in Oxygen 4.0 pulls the alt text from the featured image area in the media library. Which I don’t like. I hate that feature. I hate that feature. I’m going to test something right now.

1:16:02
I want to see if we can override that. So I’m going to go to attributes at attribute. And I’m going to call this alt. And then I’m going to say does this override the other alt text. Or does it just duplicate the. We don’t want the. We don’t want it to duplicate the alt text. Okay. I’m going to pin it there. Let’s save. Let’s go to the front end. And let’s see what we have for alt text here. Oh, my friends. It looks like it did it. All right.

1:16:31
To just be super duper sure we got to go to the media library. And we got to go to that photo right there. And we have to. Put in our alt text right here. This is alt text for the image in the media library. Okay. And then we hit update. Perfect. And now we refresh the page. A couple of times. A couple of hard refreshes. All right. I’m going to inspect. And. So we got one alt text.

1:17:08
All right. Looks like you can override the alt text. That’s fantastic. That’s that. That comes me down a little bit. Okay. Now notice in this section right here. I actually don’t want there to be any padding on the box. So at the ID level, I’m just going to go bam, take it out, zero pixels. And now what I’m going to do is I’m going to make this appear as if it is overlapping. So we can see this overlap effect that we’ve got right here. So I actually need. To put a. So I put a BG base ultra light class on here.

1:17:41
I need to take that off. We’re actually going to go with a gradient. No. I’m not going to go with a gradient. I’m going to go with BG base ultra light again. There’s a few different ways to accomplish this. And I’m just deciding which one is going to be the easiest or the best. So at the ID level, I’m going to go to. Effects box shadow. And I’m going to do a var white on which is the section below as my box shadow color. I’m going to inset this box shadow. Zero horizontal offset vertical offset is going to be a negative 100 like that. Or even negative 200. Maybe negative one 7080 negative 180. That’s about right right there.

1:18:35
Okay, that looks good. And the blur and the spread are zero. And now effectively I have what appears to be an image that’s overlapping. You guys see that? I know this is very light up here, but you guys should still be able to see that. So that’s how I handle that. Nice and nice and simple. Now there’s a border around this image. You can do that with outline. You can do that with pseudo element. You can do that a lot of different ways. I’m not focusing on little design details here. I’m just focusing on getting the content in here and getting the page built out. Okay, so the next thing, otherwise this tutorial is going to be like 8,000 hours long.

1:19:13
Alright, so I’m going to come down here and this is going to be our section for our content. So what I see that I need is a grid. I need a three parts to two parts grid with a gap in between. Alright, so I’m going to add a diff and I’m going to go grid 32. And I’m going to do a gap of XL. And then I’m going to take this grid to one column on L devices. So that’s grid L1. And just like that, I have my responsive grid whipped up. Now I’m going to add a diff to it and another div. And there’s my two columns right there. So I can now inject in this column. I’m starting to get very tabby, very tab heavy here. So I’m going to close this one, close this one. There’s our builder, there’s our review. There’s, we can close that one too.

1:20:03
Excellent. Alright, just getting things cleaned up here. So now what I can do is add text in here. And I can double click on that insert data. And I can also do, I’m just going to do content. Oh, that’s right, we didn’t use content. Okay, a lot of times I’m pulling from Gutenberg. We want to do metabox content, content, SAP content insert. There you go. And that is very, very, very fugly. So what is going on here? I wonder if it’s going to look like that on the front end or if that’s just builder stuff being shown to me. Okay, that’s a problem. We may have to move this into the Gutenberg area.

1:20:50
What is going on here? Because it’s putting H2s in there. Oh, there’s no paragraph tags. Why isn’t it putting in paragraph tags? The WizzyWig editor should put in paragraph tags by the top. I know it doesn’t in ACF. Is this a metabox bug thing going on? Alright, we’re going to come back to this. We’re going to have to come back and fix that. Let’s do the CTA box. So because I want the CTA to be sticky, I need to stretch these columns. So I’m going to put a stretch class on my grid. And that’s going to make this column the equal size to the other column.

1:21:35
Now what I need to do is add a div here. This is going to be my CTA card. And I am going to make this with 100%. I am going to make the background var primary. I am going to make some spacing in here. This is going to be var space L. Apply it to all sides. Let’s go ahead and add a heading, which is going to be an H3. Add text, which is going to be… Where’s my example? Okay, there we go. Text and then button, and then… Is that whole strip is clickable?

1:22:17
So button link text. So text button link text. Text button link text. There’s my text. I need my button. I need my link. And I need another text. Perfect. Okay. All this is a global component, right? So CTA card, we’re just going to bemify this. CTA card heading. CTA card text. Actually, this is button black.

1:22:46
But we are going to do CTA card button, just to have a class for it. And then CTA card. What is that called? What are we going to call that? We’re going to call that… caption. And then this link, which you can’t even see, is going to be CTA card link. Perfect. And then CTA card link text color is going to be base. And if we look at it, it is uppercase, and it is bold.

1:23:20
So font weight 600, typography, uppercase, perfect. Is everything centered in there? I want to left align it and see what it looks like. Just, I’ll just keep it left aligned. But I do want to go vertical on the CTA card and I want to use a gap of var space s. And that space is everything out pretty nicely. So now what I want to do is, schedule your Atlanta roof inspection today. We’re just going to copy all of this over. Remember, this is not pulled from custom fields. We want this to be static across every single page. I did not mean to click that.

1:23:59
All right. It says schedule cully. Schedule a free roof inspection. I’m just going to make it say free roof inspection. Okay. Perfect. And then that is going to be click to call that number. Take the space out of there. And then we’ve got this caption text down here, which is going to be typography, var text s. And then I think all that’s good. It probably does look better centered. So I’m going to just do that to center it. And then the heading, we can go typography center, text typography center.

1:24:53
Now all of that is centered. And we use gap on this stuff, which means I can still use, like a margin top on this. For CTA card button, we’ll do margin top of var space. Just to get a little extra spacing between the text and the button. Because that’s what’s going on right here. And actually maybe we want just a button to kind of stand out. So I’m going to grab that and put that down there. Now the button kind of has equal spacing around it. This I can go to typography line height 1.2. This text link, I can shorten up the line height on this as well. And those I probably actually want to group together.

1:25:43
So we’re going to call this CTA card phone container. Something like that. I’ll just put that in there with it. Drag that in. Drag that up. And then in that phone container, I can verticalize, centerize everything. And then we can also gap that with probably just an M, like 0.25M or something like that. That kind of makes these get a lot closer together. Like you see them here. All right. I think we are looking pretty good. Now one thing that’s different is our width of our website is narrower than the width of this website.

1:26:30
So yeah, I’m not zoomed in or anything like that. So we’re seeing differences there. And then my H1 is obviously much bigger, which I can control via ACSS after we’re done. So that’s not a problem at all. But everything else is looking pretty consistent here. Okay. So the next thing we need to do is just take that CTA card and apply a sticky class to it. And then save. And we should have a nice little sticky action going on there. And then I do want to make it a little bit further from the top. So I’m going to do a sticky top. Let’s try M. See how that goes. All right.

1:27:14
Good, good, good, good, good. All right. Next thing we’re going to do is we’re going to build our services section related services. So I’m going to add a div. That’s going to be another grid. And that grid is going to be a 332 grid. So 3 over here, 2 over there. So 3, 2 grid. And then another grid below that, which is a repeater. Okay. So we need a grid and a repeater. So I am going to, with this grid right here, 3, 2, we’re also going to go grid L1, just like that. And outside of that, I’m going to add my repeater. It’s going to be a grid of 3 with a gap of M with a M1. Yeah.

1:28:06
Right. At the M breakpoint, we’ll go to one class or one column. Okay. And then I can owl space these things out. This needs a gap of L. And I’m just going to add my two divs to it. Boom, boom. And perfect. So now what we’re going to do is add our heading, which is going to be an H2. Over here, we’re going to add our text, which is going to be a paragraph. Awesome. What did I put in here? That needs to be a paragraph as well. And that’s going to change up our spacing. Okay.

1:28:41
Okay. Because it’s got that default on it. Some CTA card. Let’s take off this gap for a minute. That’s better right there. Okay. That’s fine. All right. That works. All right. That is a link. This is, I want to do a span on this. Typically do spans on these things. I suppose you could do another paragraph tag there, but it’s not really a paragraph of text. And then what I want to do before we move on, because I will forget this kind of stuff, is everywhere it says Atlanta.

1:29:21
I want to insert the Metabox field service area info. City name. Insert. And then I want to grab. Well, which has happened. All right. Let’s back up. Something clearly just went awry. All right. I’m just going to do this. I’m going to add a text real quick temporarily. I’m just going to add a text because oxygen is a finicky piece of shit. Sorry. And we’re going to go to service area info, service area info city name, insert. Grab that short code, delete that nonsense.

1:30:05
Come in here, paste the short code where Atlanta is. And then paste the short code where Atlanta is here. And then paste where it’s here. But notice there’s also a state code there. Okay. Let’s try this again and see if it blows up on me. Insert data, Metabox field service area info state code, insert. There we go. Didn’t blow up that time. Okay. So now you see I’m dynamically injecting the city name. So it’s going to change every time there’s a new service area page. So good. So good. So easy.

1:30:44
All right. What do we lose here? I feel like, okay, this image featured needs. No. It just needs a margin top class. So I’m going to go with margin top. Oh, because I did owl spacing. I probably can’t do margin top. Okay. But I can do margin bottom on this little guy right here. So we’ll do margin bottom of M. Let’s want a little bit more breathing room between that stuff and the image. Now that I’m looking at it again. Okay. So we’re good there.

1:31:21
Nice and sticky all the way down. This also needs to be a link. So the way you do a telephone link is just with the word tell. And then we need to grab the actual text. We also need to fix that hover. But I’m going to put that in. Come on oxygen. Why can’t I see what I’m doing? Why is this like light gray? Always something, man. Okay. I know you guys can’t see that because I can’t see it either. It’s acting like I have not written anything in there. Look at that. It won’t change the actual white text like down here.

1:31:59
Insanity. Insanity. Okay. So CTA card link. Grab my hover. Text color. Is going to be. What do we want to do with this? Why did I lose the centering again too on that? All right. So on hover I want that to be shade medium. That’ll work probably. Okay. So let’s save there. Let’s just test that out on the front end.

1:32:32
There you go. That’s enough of a hover for sure. All right. And that changes too. So our black button hover. We need to fix that. So buttons and links. I probably. All right. So hover text color. What do I want this to do? Do I want to just change solid white? And then let’s just do that. Let’s just invert it basically. So it needs to be solid white.

1:33:03
And then he’s a black text. So hover text color is going to be var base. And then the hover background color is going to be var. And remember this is just on the black button that I’m customizing. Right. So the hover background color is going to be white. Let’s see what we got. I can’t remember what else I said when you needed to do. Probably the. Oh, there we go. Good. All right. Done. So we’re going to come back down and finish what we were doing here. So this is going to be our Metabox field service service.

1:33:46
Now Metabox field related services related services heading. There we are. All right. Here we’re going to be insert data Metabox field related services lead text. And then I made that a paragraph. So go see the paragraph here screws up. It adds this default padding or a default margin. And I’ve thought about different ways to handle this. I think what we’re going to do. Maybe we can use the lobotomized owl technique. Let’s come in here at WP code box. And under our global. Let’s try something. P. I’m going to do this P margin zero.

1:35:00
And then P plus P margin top of one in. I don’t know. Look, it fixed it. But it’s if there’s more paragraphs, it should actually still space them out. Ha, ha, it does. See that slickness, that hotness just right off the top of the dome. Basically I explained to you what’s going on. I’m taking away the default margin on paragraph tags. And then I’m saying if a paragraph has an adjacent sibling that’s also a paragraph, put some margin back on the top to space them out. But the first one will never have it because the first one is not an adjacent sibling. So it’s basically the lobotomized owl technique. But instead of using star selectors, you’re just targeting paragraphs with it. The only thing I’m thinking of is actually it needs to be a paragraph within a any kind of adjacent sibling. It’s probably the better way to do it.

1:36:07
In case you need like a heading. See it doesn’t have it. But if I added another, well, why did duplicate the div? Okay, text, duplicate. So that still works. But now if I added a heading in there, the question is, would it still have it? And you can see that it doesn’t. Maybe I got them backwards. Maybe it needs to be star plus p. Winner. Okay. So now if it’s, well, the only thing I need to check is if there’s only one paragraph now. Just a double check to make sure that it’s working. But notice now that it’s recognizing the heading as an adjacent sibling. And it’s putting margin on the top of that paragraph.

1:37:08
So now I remove that and look, we’re good to go. So the first paragraph never has top margin because it doesn’t have an adjacent sibling. So yes, sir. Problem solved. Okay. So now we’re going to build our card. Let’s do this. Let’s and we’re doing this in a repeater. So we already have a div in there. We’re going to need a card a div inside that div to serve as our card. This is going to be a service card. We’re going to quickly whip this up and try. I’m going to try to build some accessibility in here as we do this. I might not have every, you know, base. Let me steal these images while I’m here.

1:37:58
We need to remember to put those on the service things. In fact, let me go to services right here. All right, Roof Repair Replacement Inspections. Okay. So set featured image. This is Roof Repair, right? So I’m going to bring this in. Bring this in. Bring this in. So this is going to be repair. Set featured image. Someone’s calling me update. I’m going to go to roof inspection set featured image. Roof inspection is this one. Update.

1:38:31
And then I’m going to go to. Did I not open replacement? Oh, I put replacement on the wrong one. This is going to be replacement update. Now I need repair. I did roof inspections repair. Featured image is this one. Set update. Okay. So now we’ve got that. Professional repair. All right, we’re good to go there. I do need to refresh the builder because that. New data that’s in those custom fields is not going to be accessible by the builder until the builder’s. Reloaded.

1:39:10
At least I don’t think. I think oxygen takes like a database snapshot when it opens the builder. And so if you add new stuff to the database after the builder’s open, it’s it can’t. It acts like it’s not there. All right. So I can come down here. See, it goes to Orlando. I refresh it default. Like keep me on the thing I’m previewing. Please. All right, let’s open our structure panel. And we’re just going to name this card. So service card. And I’m going to go with 100%. And then we’re going to immediately add another div in here.

1:39:47
And we’re going to duplicate that div. Because if you look at this structure here, I have a media. And then I have a body. Okay, so media and body. And that’s what these containers are going to be. So this is going to be service card media container. And then this is going to be service card. Body container. All right. And then that’s going to be 100% with. This is going to be 100% with this well. This is going to house my featured image. So I’m going to go ahead and put that featured image in. Not browse. And it’s going to pull that in right there.

1:40:27
And then down here. Oh, and I’ve done this backwards again. So let me name these. This is going to be media. And then this is going to be body. And we actually need the body to come first in the DOM. So I’m swapping those back and forth. And then on media, I’m going to go custom CSS. Order minus one to bring it back to the top. And that ensures for accessibility purposes. Don’t do this to me. Oxygen. Don’t. There’s no reason for this. Put that back.

1:40:56
Okay. What this ensures is that visually the image comes first. But in on screen readers, it’s going to actually announce the card properly because the heading comes first. And the text comes first. So I’m going to put heading in here now. This is going to be an H3. I’m going to put text in here. All right. And then do I have a background color on this section? Yeah. We’re going to do BG-based ultra light on this section. Okay. And for this heading, I’m going to go insert data, metabox service. No. I don’t need to do that.

1:41:36
I need to do the just insert the post title insert. But it’s not going to come up with anything yet because I haven’t programmed the repeater. I haven’t told the repeater what we’re doing. So insert metabox field. This is the one where I need to do service. Is it service metabox field service service area service area info service area. Content related services. Review service area service service. What where did I put service description? Didn’t that what I called it? Oh, because I didn’t group those I bet. Because I said I didn’t need a group, but actually I do need a group. Because I forgot metabox doesn’t see ACF kind of groups them by default when you do when you assign them to different places. Okay. Service.

1:42:39
Custom fields. Let’s just look at this for a second services. See that lead text should be under services. But it’s not. So this lead text right here is most likely the lead text for our service cards. So what I need to do is basically configure my repeater real quick. And I need to I need to configure this repeater so that it pulls in not just querying service cards. That would be easy. We actually have to query the relationship between services and service area pages. So I am going to go to query advanced. Edit query add parameter. Post type. I do need to query services. But I need to do post in I believe post in fire. Remember I’m trying to remember off top of my head data metabox field. Related services.

1:43:54
Hmm. I think that is correct service related service. I’m just going to change this for a second related services query. Okay. Let’s refresh the builder. Now there’s two of them. So now I actually have to go back here and think about this again. So services service areas. Okay. So field related service areas query. And then I’m going to call this related services query update. Okay. I think we’re almost there. Yeah. Related services query. And then needs a separator and post object ID insert. And I don’t know if we’re going to be able to get a proper preview in the builder. I don’t think we are. But on the front end.

1:45:30
It’s clearly working. Okay. So next thing we need to do is I do need to edit that query a little bit more. So we’re going to go no found rows. True. This is going to turn off page a nation. I am going to do post status publish. This will ensure that no draft services get shown in this grid. All right. And then I’m going to apply there. Now I’m going to come in here. And on my service card. We are going to. Go background color var white. Body.

1:46:09
We’re going to go padding. Var space L apply all. That’s too much. M apply all. That’s exactly what we want. Next I’m going to go vertical. Gap. Varse. Actually, I don’t even need a gap. I don’t think because this needs to be a paragraph. And because it’s got an adjacent sibling, it’s going to automatically get that new top margin that we’ve created for it. I don’t know why this has no data for the field. Because clearly we have some data that we’re getting in. And it’s the correct data.

1:46:52
So don’t know what’s going on there. You do see one problem is our images are different heights. So that’s no good. So we’re going to come in here. And I didn’t even. I didn’t even verify this card yet. Okay, man, I’m skipping around service card. Double underscore heading. I haven’t really styled anything yet. So it’s all good. Text. Service card featured image. Got my media container. That’s good. Okay, so service card.

1:47:31
There’s a couple of different ways you can do this. You can put a height on the container for the image. And then you can make the image go 100% with 100% high. Or you can put the height on the image itself and let the container just be wrapping. Like it normally does. I’m going to start out trying the just putting the height on the image itself. So I’m going to do like 24 rim. That’s like about 240 pixels high. With will be 100% and then I’m going to object fit cover. Once again, okay, perfect. Oh my god, they still have not fixed this problem where if you’re in the CSS and you click into the builder to shift things around. So frustrating. Okay. Let’s see how we’re looking now. There we go.

1:48:31
But we still need to make sure that, you know, if there’s more content, all of our cards need to be the same height effectively. So what I am going to do is put a stretch class on this grid. That’ll make sure that they’re all always the same height. And then I also have to in the initial div that’s in the repeater, I need to do a flex one on this to make sure it always is equal height. Alright. So now we’re looking really good there. I’m really liking that. Okay. We have effectively recreated that section. I do have it as small text though. So let’s just grab this. And just shift and stuff around again. So frustrating. Font size. Guys, secretly, I can’t wait to just start building in bricks.

1:49:35
That’s my dirty secret. You heard it here first. Okay, there we go. So we’ve got our small text on there. Alright, let’s keep moving. So now we’re going to tackle this map section. I need a grid, a map with a container. So a grid, container, map, repeater. Grid, container, map, repeater. Okay. So here, I’m going to go a div for a grid. I’m going to do another div for a container for a map. And I’m going to do a repeater after that. Okay. I’m going to owl owl these things to space them all out. This is going to be my grid 32 with a gap of L, not a gap of KL. Just a gap of L will do. We don’t need to get fancy. And then we’re going to do a grid L1.

1:50:27
So it breaks down at the L break point. Let’s drop a div. Let’s drop a div. I could have just copied this one up here, but whatever. And then I’m going to go heading to text p. This is social proof. Social proof. Lead text insert. This is social proof heading. Oh, I’m back on Orlando because I, that’s why it’s not showing me. Guys, it flipped the preview again on me. All I do is refresh the builder, flip the preview. Now I think things are broken because I don’t expect it to just like stop previewing what I asked it to preview. All right. Selling points related services social proof, social proof, heading, insert. And let’s flip it back to Atlanta, please.

1:51:23
Now we get our grid. Now we get, oh my gosh. Okay. Why is this still not full height though? This is where I need the flex one. Okay. Dude, if you move stuff around on me one more time. All right. Jeez, we is man. Okay. This section lead text right here, I would actually put a custom class on. Because it gets, it’s designed, repeated over and over again. Even though I’m not going to go through the like bothers styling it, you see it on this page. Right here. It’s got the like, you know, yellow border and yada, yada, yada.

1:52:18
Do you guys want me to do that? Should I just do it? All right. This is going to be a SAP SAP lead text. SAP section lead. We can just do that. SAP section lead. So that is going to get, I think we just accomplished that with border honestly. No, probably not. Maybe we can. Let’s try border left, var primary, width of 5, solid. And then if we have some padding over there, we should be good to go. So like 0.5M, padding, 1M of padding, there we go. See? Super easy, done. And now I can do this, just add that class there.

1:53:11
So SAP section lead. There you go. All right, that’s nice. Okay, that’s all dynamically inserted. This is our map. Okay. So this is going to be SAP map. Or actually we don’t even need the SAP. We’re just going to do a map container. Actually, I’m going to do map container like that. And then inside of that, I’m going to do a map. And unfortunately, guys, geez. Yeah, I didn’t want to have to go through the Google map API stuff. Should I do it? Should I do it? Should I do it? Okay.

1:53:52
But I guess I’m going to have to. Then I’m going to have to do the extra work to blur this out. Maybe you guys won’t be able to see the whole thing. Then I don’t have to blur it all out. Oxygen settings. Oxygen settings. I don’t think you guys can see the whole thing. So, ha! All right. I don’t even know if that’s going to work. The map module is so finicky in here. But what I can do is under the data for address. I’m just going to go back to service area info. And literally say city name, insert. And then I actually want to put the state code as well after that.

1:54:53
Maybe I should do, I don’t know if this is how I did it or not. Or if I did it with a map module in. We can try this and see if it works. I don’t know if it’s going to let me do two custom fields is the problem. I mean, it may not even work like that. Let’s do this first. Let’s decomplicate things and just say Atlanta, Georgia. And let’s refresh. Maybe look on the front end and see if anything’s. Oh, it’s working. This is amazing. Absolutely amazing. Now the question is, can I get two short codes in there? So what I’m going to have to do is, what’s going on? Oh, it’s trying to reload the builder.

1:55:36
Okay. So what I need to do is add another dummy text here. Two of them. And this one, I’m going to have the short code for. So this is going to be service area info info info city name. And then in this one. I think I just did just do the full state name, I guess. So service area info state name. I think I think it’ll accept that. So now I’m going to steal this. Come up to the map module, paste that in, grab this one. Come back to the map module and hope that I can paste this right after it. And it looks like I can, except now the map is totally freaking confused. So that may not work. Let’s go back to the front end.

1:56:34
No, it still works. Still works. We’ll double check it on Orlando, but I think it’s working. Okay. So Google Maps, how do we want to handle this? So we want to, oh gosh, don’t click on it. That’s not what we want. So I actually need, this is going to be map container. Google Maps is inside of it. I need another div in here that’s going to be an overlay. Rename this to overlay. Map container is going to go to layout position relative. Overlay is going to go to layout. And I need to do this map overlay. And this is going to be absolute, 0, 0, 0, 0.

1:57:31
So it takes up the full thing. And then the Google map itself, I need to map just like that. Okay. Size and spacing with, I can’t do 100% with because the container itself is not 100% with. So the container needs to go to 100% with. The map now can actually have a height on it. So I’m going to go with like 40 rim. That’s nice. Save. We’re getting there. Because of this overlay, I can no longer click on the map. So that’s actually good. Like nobody, people can’t interact with the map anymore. But here what you’re going to see, I can also overlay text right here. We need to get it to be black and white.

1:58:27
So what I want to do is with the map itself, I can attempt with effects filter, grayscale, 100%. There we go. Now with the overlay, I can actually put text in here. And that text is going to say top rated roofing company in top rated roofing company in. And then dynamic injection of service area info, service area info, city name, insert, space, dynamic injection, meta box service area info, state code, insert. I’m back on Orlando again. My gosh. Okay. Top rated roofing company in Atlanta, Georgia. You see it right there. Question now is how are we going to position this? I think we can position it absolute as well. So this will be map overlay text.

1:59:42
And I’m going to go background. Var black typography. Var white. Is that what we got? No, var primary. I’m going to go spacing. I’m just going to use M’s for this. We’ll do two on the sides. We will do typography. Text is uppercase. Font weight is 800. Text size. Text L. Got a little more padding than I want. So 0.5.

2:00:29
Actually, what I can do is it’s actually the right amount of padding. Probably it’s the line height that’s throwing everything off. There you go. Let’s do 1.1 is our line height. I can typography center align this. And then I can max with it if I need to. Yeah, because it needs to be bigger. So instead of text L, let’s just go to XL. And then what we’ll do is the max width will do like 16 characters, 26 characters, 36 characters. Good. It does still have a little bit too much padding. 0.5, 0.5, 1 and 1. Okay. I think I like that.

2:01:22
All right, let’s see if we can get this bad boy positioned. We’ll lay out absolute bottom 0. We actually want to be like 1m up from the bottom. And then left we want to be 50%. But that’s not going to give us actual 50%. So what we’re going to have to do is go to effects, transform, translate minus 50%. Back to the middle. Okay. And then I believe it has a box shadow, which is super easy. Our base ultra dark trans 10 to 250. And then maybe 20 is needed on that. There’s our box shadow. Okay, it’s super subtle, but it’s there. All right, next thing we’re going to do is refresh. Look at that.

2:02:26
Okay, next is our reviews. I can get rid of these two things. We don’t need them anymore. Okay, so this is our repeater, which is going to get a grid three on it. A gap of m, a grid m1. And our div is fine. I believe we’re going to go flex one on that. And we’re going to put a card in there that we are going to call a review card. And that review card is going to have a width of 100%. And we’re going to see how it’s structured where we have a media, which is going to be our quote. Media body. Footer media body footer. I believe is how we’re going to want to structure this media body footer. Okay. So let’s go div.

2:03:28
Div div. This is going to be review card double underscore media. Review card double underscore body. Review card double underscore footer. Okay. With 100% with 100% with 100%. Okay. We are going to put our quote icon up here. Okay. Review card icon. All right. And then this is going to be text, which is a paragraph. Actually, it’s not a paragraph. It’s a block quote. Okay. And then what we’re going to do is.

2:04:35
A div for these stars. And a div for these two things grouped together. Okay. So a div for the stars. This is a review card. Stars. Container. And then outside of that, we’re going to have another div. And this is the review card. What would that be? Name container. Yeah. That works. Okay. This width is 100% as well.

2:05:16
But it’s going to be flex horizontal left middle. This is going to be this exact same thing flex horizontal middle left. We’re going to put an icon in here. And that’s going to be a star icon. And this is going to be a review card star. And that star is going to be. 24 pixels. Var primary. And there’s going to be five of them. Okay. This is going to be text. And this is the person’s name. Why in the world are you crossed out? How is the span just crossed out by default? That’s not default styling for a span.

2:06:14
Come on, dog. Okay. We haven’t cleared anything yet. Now it’s not crossed out anymore. Hey, you open a panel. You close the panel. It’s not crossed out anymore. It’s not a magic box. Okay. This one is a review card. Name. And our front weight is going to go 600 on this. And then I’m going to add another text. Wait, did I do horizontal on that? I want to do vertical on that.

2:06:48
Not horizontal. And left. Left top. Okay. This is typography left and typography left. What are we on? We didn’t even give this a thing yet. So review card. This is source. Okay. Left. Perfect. Okay. That’s basically our general structure here. This is a quote icon.

2:07:14
Maybe I have better ones in font awesome five. Are they exactly the same? They’re exactly the same. Okay. Our primary needs be more than that. 48 pixels. Okay. Good. This is review card. Quote. Yeah. Review card. Quote. Like that. And then what we’re going to do here is without looking at what the default styling is, it’s probably, yeah, something like it’s got a margin.

2:07:58
We’re going to make sure there’s no padding on any side of this. And really no margin, either. Yet. We’ll build margin back in. But the next thing we need to do is just actually get our query going. So here’s our repeater. We’re going to query this advanced. We’re going to do exactly the same way we did our other one. So post type is reviews. Post in add value data. We may have to go fix this though. We do review. It’s something related to what I named them wrong. So let’s get out of here for a second. Let’s go back into Metabox Relationships.

2:08:48
SAP Reviews. Review related reviews query. And then this is going to be service areas. Related service areas query update. And now I can refresh the builder. And hopefully we can find that query that we’re trying to find. Okay. Let’s remember to switch it back to Atlanta because we can’t just keep previewing the page. We want to preview. That’s too much to ask. All right. So we’re going to come here and. Check on our query edit query. Do I have? There it is.

2:09:36
Related reviews query. Post object ID separate by comma. Let’s check the query. Boom. All right. So this is the text. So we’re going to go insert Metabox field. Review body. Bam. There we go. We got our review body in. I don’t know why it says no data in this first one. But now one thing with the DOM again. So review card body. Remember that has to come first for accessibility purposes.

2:10:16
So let’s rename this to body. Let’s rename this to media. Let’s rename this to footer. All right. And then what we do is we take media. And we order by negative one. Just send it back to the top. Okay. Point. Oh god. It just moved things again on me. Oh, this is almost up. Okay. What is going on? Social proof.

2:10:49
Repeater. Div. Div. Let’s name this card. Okay. Body is first. Okay. We’re good. We’re good. Woo. All right. We need to space everything out in this card. So let’s just gap this. Var. I can type today.

2:11:13
Please. Var space. S. Remember, this is its own section down here. These things need. Line heights of 1.1 and 1.1. And then we can probably gap this vertical gap space. Xs. And then these two. Same thing here basically. Actually, I’m going to go like 0.25m. I just want those to be 0.5m. I just want those to be a little bit spaced out. All right. Let’s inject this data so we can get looking better here.

2:12:06
Reviewer name. And then the reviewer source. We’re going to inject into a sentence. Why am I working over here? Why am I working like in the middle of a repeater? Dude, it is totally… This is 4.0. Ladies and gentlemen, this is 4.0. I don’t know what to tell you. All right. So, verified something review. So we’re going to insert Metabox Fields reviewer. Where are we at? Review source. Now, I just bounced it back over here to the left again.

2:12:43
Hey, don’t mind oxygen. Move stuff around whenever it sees fit. Okay. So, verified review. Now, I’m definitely thinking that that needs to be var text s. And I think we may be good to go so far, maybe on the design. Getting there. Okay. Let’s also look at… Okay. Yeah. We’ve got this boxed layout going on. So our actual card needs to have spacing. Padding inside of it.

2:13:21
Var space m. All sides. It needs to have a border of base ultra light. And here we go with oxygen’s border area again. Maybe, you know, next month, the text will be there. And we’ll be able to continue building. Oh, there it is. Okay. Three pixels with solid. That looks good. Let’s check that out on the front end. We don’t have equal height car well before we do that. I do have a stretch class on here. Yeah. No.

2:14:03
Stretch. Okay. But this div. Flex one. And the card needs to be flex one as well. Now, we should be good to go. And now, our footer is going to be in the wrong spot. But because we grouped it as a footer, watch how easy this is to fix. I just, oh no, it moves things again. Dude, I swear this is comical almost. All right. I’m going to grab my footer. Look at this, guys. Margin top, auto.

2:14:33
Footer, right where it needs to be. Look at this. Look at the preview. It’s like a bit, it’s like a border inside a border inside a border inside a border. It’s just decided that everything gets borders in the preview. But thankfully on the front end, it still looks good. And now look, you have a long review. And your footers are still aligned at the bottom where they’re supposed to be. And then that needs to be small text. So, which I can’t even see. But, you know, I, at least there’s a placeholder there, I guess. Bar text, S. Save. And then, yeah, I think that’s good. There we go.

2:15:13
It’s a little small. Yeah. It’s that font. I can actually do 15 and 14. You can make it slightly bigger. These are the clamps for the, for the, uh, S and the excess sizes. I won’t let them go too low. I think definitely we need a little bit of line height in there. That’s something we’re definitely missing. Um, so let’s go with 1.4 or 1.5 on the line height. I wonder if that’s too much. Maybe 1.4. I would have peered to already be 1.5. Yeah, must already be 1.5. 1.6.

2:16:01
I’ll get it just a little bit more spaced out. If I’ll get into crazy, okay, I like that. All right, I think we’re good there. Um, what we need to do is advanced attributes add attribute. Are you hidden true? I think that’s, I get all these confused in my brain. Uh, yeah, are you hidden true? We don’t, we don’t need that to ever be touched. I’m going to put an RIA label on here of five star reading. So we’re going to go RIA label five star reading like that. I think we’re all right. We do need to, um, change this to we actually, and we can’t do this properly in oxygen. I’m just going to change it to an article card because it is technically an article, a one off item.

2:16:57
They should be L.I. items in a list. But with a repeater in oxygen, you can’t do it properly without JavaScript. I believe is what my team and I found out. So I’m just going to stick with making them articles. Okay. I love the preview of how it just, it just acts like they all have the same photo when clearly they don’t. Because you look on the front end and they have different photos. But on the back end, it acts like they have all the same photo. All right. We’re getting there. All right. While we’re here, let’s make that H1 really big. So we’re just going to use the heading overrides, which are new, and this is an unreleased feature as of this writing. But we get to see if it works. So let’s do 42 pixels on mobile and 80 pixels on desktop. Save.

2:17:53
Oh, there we go. I do not want that max width on there anymore though. That kind of screws things up. That’s too big. That’s a bit aggressive. How about we do like 68? That’s about right. Okay. Professional roof repair and roof replacement in Atlanta. All right. Good stuff. We’ve got that. We’ve got to come back and fix that in a minute. That is. We got to make sure that this is an actual fake link here so we can check focus in a minute. Okay. I mean, all the hard parts are pretty much done, guys. Anything. Let’s go to oh, process. This little process section. Let’s whip that up.

2:18:52
So it’s a grid and a grid. This is a three to this is a one by one. If we want to call it that. I don’t know. So two column grid. And then do we have a background color there? We do. All right. I’m getting tab happy again. Let’s go VG base ultra light. Div and div. This is going to be a grid three to in fact, I’m just going to I’m just going to go steal this right from there copy. Paste. Perfect. This is going to be a grid to. And a grid L one. Yeah. And it’s going to be a grid inside a grid. So div. And then this needs to be a grid in here also a grid to.

2:19:44
So grid to. Grid. M one. And gap of M. We’re at least going to start out with that. These are going to get owl L spacing. Did I do this right? Yeah, I did. Okay. So there’s going to be div in there. That’s going to be the process card. I might have gotten off a little bit on I don’t know if that’s an even column. Maybe it is. I will see we’ll see in a second. Okay. Let’s put a gap on this grid. I just don’t know if these are going to be big enough. I guess it’s going to be fine. Okay. And then there’s going to be an image over there on the right hand side.

2:20:37
So browse. No, don’t browse. Data. Wait a minute. What’s going on here? Where do my where do my metabox data go? Metabox field. Why don’t I have access to the metabox field? Okay. I guess you can’t do it with images. Metabox field. All right. We’re going to do service area process, right? Process image size. Medium large insert. Good, good, good. Okay. Let’s check on how this is structured. Text heading text.

2:21:25
That’s it. And we’re going to do a header and a body. Hatter body. Hatter body. Okay. This is going to be called a process card. And then we’re going to add a div. And another div. This is going to be process card header. Process card body. And now we’re going to get the actual heading first. Okay. Free roof inspection. So heading. H3. You know what? Now that I’m thinking about it.

2:22:13
No, we should be good. Yeah. This is not. Okay. We’re good. I was overthinking. Again. Don’t want to do that. So I’m going to do that. I don’t want to do that. So. Text is next. This is actually the process step. Process number. Okay. So process card number. This is the process card heading.

2:22:39
Process card number is this is just me one. This is always static. And then what we’re going to do is. Custom CSS order negative one to make it come first. I just move it again. All right. Then the heading. The heading is actually first in the DOM though. Okay. Because this is just merely an accent. This is the actual heading. I don’t know if that’s actually that necessary here. You actually might want it to announce step one first. Okay. We’ll just do that.

2:23:21
And then what I’ll do is. If I can select in there. I’m going to do step one. But I actually only want. I don’t want the word step to be shown. So I’m going to wrap it in a span tag. And I’m going to put hidden accessible on it. And that is going to make it. Show up for screen readers. So it’s going to say step one. But for everybody else, they just see a one. Okay. And then on this. Not on the span. What are we doing here?

2:23:54
Process card number. I want that to be. Font size bar. Text xxl. That seems to be big enough. Font weight 800. Text color. Primary. Line height one. Oh, it needs to be 012. Okay. It actually needs to be bigger. So I’m going to try out new variables here. Var H1. Yeah, it’s actually bigger.

2:24:36
The builder needs to be refreshed. Because when we went back and automatic CSS and did the heading one override, the builder didn’t pick up that information yet. Because we’ve been in the, we haven’t reloaded the builder since then. So it’s a little confused. Man, there’s a long one, huh? All right. See now it’s big. I’m just robbing the H1 size for this process number. Okay. Which is, I mean, it’s a little iffy. Because if you ever change the H1, this process number is going to change. And you really wouldn’t, you really wouldn’t expect that to happen. So maybe we shouldn’t do that. Maybe we should do a cow.

2:25:25
A var text xxl. Times 1.5. And I clearly feel like I’ve done something wrong here. There’s the var text xxl. Okay. So now let’s put that in a cow. Times 1.5. Yeah. That, I think that’ll be safer. That’ll be safer. Okay. Alrighty. Insert, insert data. Metabox fields. Process.

2:26:07
Process. Step 1. Step 1. Heading. Oh, this is the moment of truth. Watch it not work. Because we’ve got nested groups. I’m on Orlando again. Come on Atlanta. You can do it Atlanta. You can come on Atlanta. Oh no. Oh. Is it sharp on the front end? Oh, you’re killing me oxygen.

2:26:40
You’re absolutely killing me. So those process steps have to be pulled out of their groups. I’m not fixing this. If it was a client, I’d fix it. Not, here’s what you do to fix it. Don’t put groups inside of groups. Okay. That’s it. I’m not going to go back and undo it. We see it working all over the place. Unless a group is inside a group. So just, it can’t handle it right now. Just don’t do it. I’m just going to act like this is here. We’re just going to do like, you know, heading number one.

2:27:14
And we’ll continue on with what we’re doing. And in fact, this is all going to have to be Laura Mipsome. Because none of these are going to work. Because they’re all in a group inside a group. But this is how you would have done it. Same way I did all the rest of the stuff. We’re doing the custom field structure. Laura Mipsome. That’s the wrong site. Laura Mipsome.io. Just don’t put groups inside of groups inside of groups. Okay. All right. There we go. But this is getting too long to be continuing to mess with this.

2:27:45
It’s a mess with oxygen shenanigans. Space XS. Got it. Leah. It’s throwing off by typing everything. So what we need to do here is just probably margin top this. Minus 1m like that. How did we have it there? Okay. And we need to uppercase it. And we need to var what? H3 it. H4 it. Yeah. Probably var H4 it.

2:28:21
And then we can margin left it 1m. Something like that. Typography 1. Okay. We just need to bring it up a little bit more. Like that. So it’s just nice and even. Heading 1. And let’s make sure it’s font weight is 900. And then we can get it. And then I think that’s good. Okay. And then 2, 3, 4. Okay. So this would say 2.

2:29:03
This would say 3. This would say 4. There you go. And then here. Have I stretched this? Let’s stretch it. I don’t want to stretch it. I want to align items to the center. Okay. Save, save, save, save, save. Okay. Quick mobile check there. Just to make sure we’ve got everything going correct. All right. Let’s do our last section here.

2:29:43
So, this is a nice one. This is an interesting one, isn’t it? Let’s add another 30 minutes to this. To this tutorial. Okay. How do we want to handle this? We can use an overlapping grid. Which I would just do completely custom on. Probably. I don’t know. Maybe we can get away with a. Maybe we can get away with a 3, 2 on this. I might as well try, right? Get an A for effort. Let’s do a grid 3, 2.

2:30:22
Let’s do a div and a image. Not going to put this image in a wrapper this time. Let’s data this in. Now we can’t do it there. Got a data this in. From selling points. Okay. There’s our image. This is our, um, let’s stretch this. What else needs to be in. So, a heading text. Okay. And then we have our list. So, we’re going to have a div. This is going to be a UL.

2:31:11
We’re going to have a div inside of there. Which is going to be our L.I. row. Um, I’m going to do. List selling points like that. I’m going to do a list as well. I’m going to do a list item. List. Okay. Yeah. That’s fine. Okay. Our list item is going to be a margin and a padding of zero. Maybe it’s on our list. Zero zero. There we go.

2:32:02
Okay. Let’s get our structure panel open. Let’s see what the heck we’re doing. Oh, I can’t scroll in the structure panel, guys. Oh, this is going to be treacherous. What is going on? I collapse all selling points. Div. Div. Okay. Here’s our list. Rename. List. Here’s our list item. Let me check our recording.

2:32:43
Make sure we’re not ruining everything. Okay. Good. Point fixed. All right. List item is going to have an icon. Which is going to be a check. We’re going to go font awesome five solid. Let’s choose this one. Oh, now that dot is showing up too. I’m going to go with list style none. To fix that up. If you guys want me to zoom in on that, just list style none on my list class. Oh, guys, did it move something around on me? No, we’re still good.

2:33:26
Okay. All right. And then my list item I need horizontal middle left as our as that. And then this is going to be a list icon. And this is going to be primary 24 pixels probably text. This is going to be our selling point. Metabox. Selling points. Oh, yeah, yeah, I said we weren’t going to do this. This is like pseudo dynamic. So we’re just pulling this from here. So this is going to be we handle your Atlanta. And I’m going to take that out and dynamically insert. Review in service area info city name insert. Okay.

2:34:18
So we handle your Atlanta blah, blah, blah, blah. Here we’re going to go with a gap of 1m. And now effectively what we can do is just take our list item and duplicate it five more times. And then we’re going to take our list and we’re going to verticalize our list. Left top little gap probably of 0.5m. No biggie. Grab this our experts streamline the insurance claim process fast accurate yada yada yada. Stellar reputation around Atlanta. Top 5%. We need to take this out dynamically inject again. City name take this out dynamically inject the state name. Take this out. Million dollar guarantee. Okay. Now we have side by side buttons.

2:35:43
So we’re going to add a div a button and a button. That div is going to be flex row. Gap S. Flex wrap. Button primary. Button black. This says. Get a free roof inspection. The other one says ask a question. And then we have an or call down there. So link. Let’s just steal it from right there. Perfect. Okay. Owl S.

2:36:48
Looks pretty good. Center left. This whole card thingy probably needs a pad L. Oh, it’s going to be interesting on how to handle this actually. Now it’s this that needs it. Pad L. There we go. Now this entire card can just get a box shadow of like Excel. Let’s just do a giant nice box shadow there. Just like that one is. That box you can’t really see at the top as much but whatever. It’s fine. Actually what we need is if we look at that the box shadow is only on this div. It’s not on the entire thing. So let’s grab this and box shadow this. There we go.

2:37:52
This needs to actually be longer than three two. So what I’m going to do is we’re going to do this kind of manually I think. Oh yeah, why am I doing grid three two? That doesn’t make any sense whatsoever. It’s grid five. But it’s going to end up looking like a three two. So really what we need is grid five. And then collapse all selling points div div. This is this is our grid right which ones are grid. This is our grid. So we know what the hell is going on. This is the left side of the grid content. That’s the image. Okay. So on our content we’re going to want row start one.

2:38:36
We’re going to want call start one. We’re going to want call end four or five. And then on our image we want row start one. Call start four. Call end last. It is overlapping. The problem I’m running into. Is it’s height is exactly the same height so you cannot see the overlap. If you notice on here the image is slightly not as tall. First thing I’m going to do is take off the stretch. There we go. All right. Now we’re going to line items. Center. Wait.

2:39:48
We just did the opposite of what I wanted to do. The white box needs to be bigger than the image. I just did it backwards. I made the image bigger than the white box. Okay. Let’s take off a line item center. Now that should still be on there. How do I want to handle this? This is the actual height of the image. I just need this div, the content div, to get bigger than the image. So height 50 is not going to work. High 80, 70, oh. Starting to work. Let’s look at how big this image is. So the image is 650 pixels high.

2:40:57
So effectively 65 rim. So if I just do this, size and spacing, min height 70 rim. Yeah. 72 rim. I can really dial this in. There you go. That’s effectively what we want. Now the box shadow is making this look a little worse. What we probably need here is just like a BG base ultra light. And then maybe we can even put a box shadow on this. Can I even see that box shadow? There we go. That my friends is much better. Let’s check out what this looks like on the front end. I mean, it kind of, I don’t know.

2:41:57
I don’t like the fact that it’s like there’s that background color. And there’s that background color again. Maybe what we could do is. I mean, if I put a box shadow that doesn’t, that isn’t offset at all, it would, it would probably be fine. Base ultra dark trans 20. Oh, no, sorry, no offsets 40. There you go. Let’s just grab this in here. Why choose roof claim for your. Yeah. So we’re still going to have, we got to protect this, this overlap stuff from ever hitting over there. Okay, I think it’s, I think it’s fine. Where does this end? This ends at five.

2:43:03
Let’s end it at four. I think that makes, yeah, they’re just going to touch. This is where I really want, I really wish I had a 12 column grid, which is coming soon. So be patient. It’s coming soon. All right. With L. Didn’t quite get it done with them. Get it done. Okay. Um. List, we’re kind of selecting multiple things. This does whatever it wants. I don’t know, those, these things are, they’re not even in danger of overlapping right now. I just worried about what they’re going to look like on, yeah, like there.

2:43:56
So here at the L. M.S. No, that’s XL at the Excel break point, we need to go flex. Call M. Not M. What am I doing? What am I doing? My brain is starting to do this guy. It’s got, it’s been too long now. It has been too long. All right. Flex call XL. So the XL break point, I want to swap that to a column. And that’s what we’re going to get there. Okay. I’m going to say at L is where we just need to stack all this stuff. So I’m going to grab my grid.

2:44:37
We’re going to go to grid L1. Bam. So it goes from 5 to 1. Then I’m going to take this image and say it’s going to, it’s already row starting one. So this body needs to row start L2, which is going to force that body down here. Now the image at this break point, I’m just going to do this on the ID level. It’s going to go to a height of 50. 40. Maybe 40. 100% with. We need to call start. No, no, L. This is all L. L1. Okay. Basically I’m just forcing it back to the first column.

2:45:56
And then object fit cover. Nice. Okay. And then at this effects box shadow zero zero zero shadow color zero. Let’s take away our box shadow. And then pad L. Oh, oh, we had a height on here, didn’t we? We had a minimum height on this. So I’m going to go with, yeah, there it is right there auto or none. Yeah, just auto. Okay. So we took that nice overlapping grid, made it nice and responsive. What does this text need to say? My phone just rang. Let me make sure it’s not the wife.

2:47:02
It was not. Okay. All righty. All right, I think we’re about to call this thing a day. We just need to kind of do a review of some stuff. Now this was a lot of work, guys. Obviously a lot of work. I mean, how long have I been recording? Three hours. There’s been three hours of work. And a lot of people are going to ask, hey, is it worth it to do this much work? Well, I mean, you got to build the page anyway, right? Oh, we still didn’t fix this. All right, the way to fix this, I’m not going to fix it on the camera. It’s just waste of time.

2:47:43
The way you fix this is instead of using that wavy wig field in Metabox, which clearly has problems, you just use the Gutenberg content editor and then pull in the content dynamically from Gutenberg. So it’s just a small adjustment there and that will all be fine. Back to is this worth it. I mean, we’ll watch now, right? Now, yes, you could copy all this and just paste it into a new page or whatever you want to do. But really, what we have now is we can just whip up a new service area page. So watch this. We are going to go back to Admin and I’m going to go to service areas. I’m going to go to Orlando, Florida. And I’m going to go to, I’m going to make this a Orlando, Florida, FL. Headline is going to be, let’s go to roof claims Orlando page. So in Florida, Orlando, Florida, and we’ll go to roof repair in Orlando.

2:48:47
Okay, so I’ll just grab this heading. Let’s close this. Close this. Okay, get our lead text. So we’re whipping up a new page, right? Service area page content. Let’s grab that, pop that in. Heading in text for related services. We did work up front so that we could whip new pages up instantly and have them be easily editable. All the custom fields, the client can do this. Social proof. Lead text here. Process steps. Did I just do that?

2:49:39
Did I just mess that up? Yeah, I did. Our roof repair process. Fix it. Easy to fix. Easy to fix. Okay. This goes. Oh, social proof. What am I doing? Oh, this page doesn’t have the social proof. That’s right. Does the roof replacement have it? What’s going on? Let’s go roof claim.

2:50:09
Okay. Yeah, social proof. Okay. Process step. One, two, three. I can’t inject that dynamically anyway because it’s all in the group. So that’s all messed up anyway. Then we pop in the image. Right? Here’s save as. This is the process image. And then we have this image down here. Support. Okay. So we will go service areas.

2:50:48
Florida. Orlando. Okay. In Orlando. I am popping in. Where is it? This one. What was the other one? I was the back of the truck. Okay. I’m going to lose my voice. Okay. I don’t even know which one I’m on. Image process image. There we go.

2:51:21
Selling points. Image right there. That guy. Heading. Roof claim is your preferred ruffer. Lead text. Bam. Bam. Thank you, ma’am. Let’s do. Some reviews. Now just pretend that we had Orlando reviews in here. Right? Services. We’ll do commercial this time.

2:51:47
You can see commercial. Except, I don’t think commercial ever got an image. Save, update, and view service area. So what was that? Like two minutes. Oh, we need a featured image. Okay. So set featured image. How about we steal Orlando’s. Save. Orlando. Set featured image. Update. Back. Bam.

2:52:14
There’s our image. Okay. Look, we just did. See, it doesn’t have an image for commercial. But that’s fine. We just whipped up a whole new service area page. In seconds. You see an issue here. With our image. Because that we just chose a wide image instead of a tall image. So it’s good to do stuff like this. So that’s fine. So, what we’re going to do is go to oxygen templates. Open our primary template. And while I’m doing that, you can also see that I’ve got, look, focus.

2:52:48
Focus. All my focus is working automatically out of the box. We’re going to check responsiveness here in just a second as well. Okay. So I come down here. We need to be, oh yeah, let’s preview Orlando. That’s good. So this image right here. I just want to go to advance size and spacing. Min height. 64 rim. Call it a day. Fixed. Done. All right.

2:53:16
Let’s just check while we’re here. A little mobile responsiveness action. What in the world just happened? Okay. We’re back. No. What are we doing? It’s minimizing it. I’m trying to get into. Oh. I’m used to Firefox. That shortcut for inspecting in mobile. All right. We got to do it in here. Let’s bring this down.

2:53:38
Okay. Let’s look at about this right here. Okay. All good. All good. So this grid is not looking good. It’s too squished. Backer is not looking good. So those need to be breaking it L instead of M. I think I said those to break it M. I think I said that I need to break it L. This all looks good. That all looks good. We’ve got some section, you know, stuff that we could probably work on. But we can tighten that up with ACSS.

2:54:18
Let’s get all the way down here and look. It’s got some issues in here. This probably needs to be left aligned on mobile. So we’re going to go to the L break point honestly. So we’ll left align that at L. Everything else is looking pretty good. We need to left align this stuff at L. All right. So we’re going to come up here. And this had a center all. So we’re going to go center left L. And inside of here, we’re going to go center left L. So now on the L break point, all that stuff is left aligned. Which I think is preferential. And then pretty much the same thing in here except we didn’t use utility classes there.

2:55:19
At L, we’re going to go left on everything. And then this is going to be typography left. This is going to be left. Okay. So that looks better that way. These need to swap from grid M1 to grid L1. And that’s going to fix that. Same thing here. Let’s fix that from M1 to L1. Those are fixed. That was all good to go. That was all good to go. I don’t know. I feel like this. Where did I change the height?

2:56:06
40. Let’s go to 30. Now, where did I change it? There we go. All right. Perfect, perfect, perfect. Now I think we’re good. So all left aligned. Oh, that heading didn’t come over. It shows like it is in the builder. There we go. We offer more than just Rupert Pear in Orlando. See how these sections have too much padding on mobile devices? Watch this. Okay. Let’s hop over to ACSS.

2:57:04
Spacing. Section spacing. Base multiplier on mobile. One. Save. Just tightened everything up. Look at that. Look at that. Look at that. Spacing. Perfection on mobile devices. They’re all fixed just like that. Love it. Okay. Alrighty, friends.

2:57:35
Is there anything else I keep hitting the wrong shortcut key? Is there anything else to get out of here that we need to take a look at? That we didn’t do. I think we pretty much covered everything. Might have made some mistakes here. They are just like three straight hours of work. I’m trying to explain everything as I go. But I think overall we got the whole structure down. You guys should have a really good feel now. Let me go back to camera. You guys should have a really good feel now for how to put together a dynamic service area page template like this. We’ll probably have to do a future tutorial maybe on how to do the state level pages, the kind of directory pages, the main slug page, like the in page. But the actual service area page, those pages are much easier, by the way. Much shorter, much easier. This is the hard page.

2:58:32
This is the page that takes all the time and effort. And this gives you a good idea. Okay. I built most of it and I would say, let’s look at the timer. This, oops, went back to that on accident. Okay. So I’m at three hours and 12 minutes. Now I was explaining everything as I went. But I was still moving kind of quick, right? So if you’re going to price out a service area template for a client like this, I haven’t done all the finishing details. I would say there’s probably another hour give or take of just straight up, deep small design details that I would put extra time. That I would put extra effort into this page, maybe even two more hours. Let’s call it five to be safe. Like if we really want to do it right, let’s just call it, this is going to take five hours. So how much are you going to charge, right?

2:59:25
I would probably charge, I mean, I want to be close to $200 an hour with my agency billing $1,000 to put that template together. Right. Think about all the custom fields we had to do. Think about all the knowledge that you had to have that goes into that. How do you do the queries? How do you do the bidirectional relationships? It was three hours and I already knew what I needed to do. Imagine if you’re still trying to figure things out and then obviously you’ve got oxygen shit. You’ve got a baggage you’ve got to deal with that comes with oxygen, bugs and all that good stuff. Reloading the builder over and over and over again. So you know, a template like that, I think easy should be a grant. And think too on the here’s what you got to think about when you’re pricing this. What is the money we’re saving the client? Because you saw how fast I whipped up the second one, which means when I whip up the second one, I’m not charging them as much as I would. If I had to do all that a lot of that in the builder again, right?

3:00:25
It would take way longer doing all that stuff in the builder. And then think about future maintenance. How much how many hours are going to charge if that wasn’t built to be scalable upfront? If it was a disaster and you’re building the client for all this time going from page to page to page making changes and such. Absolutely fair to build up front a solid amount because of all the work you’ve alleviated the client and your team going forwards. I think that’s a thousand percent legitimate. So I would build for the full $200 an hour at five hours is a thousand dollars. Now I don’t do it hourly, right? But it gives you a good idea of what the cost should be for something like that. Alright, so that’s it for me. If you guys have any questions, drop them in the comments below. I really, you know, I know this was a long one. I hope you guys found value. It was a heavily requested tutorial. That’s it. I’m out. Peace.