Peachtree Fence Part 10: Service Page Gallery w/ Load More + Sub-Service Card Content

0:00:00
Alright guys, we are back. More work on the Peachtree Fence and Gates project. So what I want to do here, I’m on the Fence installation service page. A big chunk of this that needs to get done is the project gallery down here and how we’re going to organize this. So what I did is I imported all the photos from the other site onto this website and I’ve been thinking about, you know, because I want to be able to maybe categorize them, but you can’t really categorize photos in the media gallery in WordPress. But I do have happy files pro installed and happy files pro allows you to put all of these images into folders. And if you go into the happy file settings, you can actually check this box that says, assign multiple folders, which is in a way like categories, right? So you can have an image basically in two different folders, the same image. And so if you think about, you know, fences, alright, show me all fences, but now just show me commercial fences, then I can have a photo in all fences, but I can also have that same photo in commercial fences.

0:01:11
And so when the person switches, it’s filtering them basically. So I think this is going to work. I also know that WP Grid Builder, which is what I want to use a lot of times when I’m just doing pure photo grids. You know, if I’m doing stuff with like cards where it’s service like these service cards right here. So it’s child services. Well, that sounded weird child services. So it’s a child page services. I always use a repeater obviously, right? Because you can do this with WP Grid Builder, but it’s more, it’s a little bit harder to customize and I just like to build it in oxygen with a repeater. But when it’s a pure photo gallery, I really like to use WP Grid Builder. And I know that WP Grid Builder can actually query happy files as folder structure into the grid.

0:02:05
So that’s what we’re going to try to accomplish in this episode right here. So I’m going to go edit with oxygen and my phone’s blown up. So I just want to see what’s going on there. And we’re going to try to build this grid depending on how long this takes we might move on and do something else productive as well. So I’m going to scroll all the way down here. I’ve decided, you know, like we’re, I basically am trying to finish this by Thursday of this week if that’s possible. So I’m not going to do a whole bunch of fancy stuff and test out various things. Just literally just in let’s get this thing done in live mode because I know that there’s a lot of work that we can do after this thing is live. But just getting it live is the point right now. Like that’s the main mission. So what I’m going to do is in WP Grid Builder, we’re going to go over there and check that out.

0:02:55
So all grids and I’m going to have to refresh my mind because I almost never use WP. I only use the facets. I don’t ever hardly use this grid builder. Blog them on portfolio. Then import all of these demo grids. Oh no, I don’t usually like to do that. Hold on. I only like to import the cards. Okay. So all grids, I can actually go just delete all those that I just did. Let’s go delete. Yes. Delete. Yes. Delete.

0:03:25
Yes. Okay. And we will create a grid. All right. We’re basically going to call this. We’re probably going to have a grid for each like fences, gates, and then maybe a commercial. So there might end up being like four different grids, but we’re going to do. We’ll call this residential fences. Actually, we’ll call this fences. Okay. Then we might do yeah, residential and commercials. We might actually have more. So we’re just going to do like all fences for right now. Just see if we can get this to work. We’re going to query post types, terms, users.

0:04:02
I think it is technically still a post type, but it’s not a post. It’s media. Post status, post authors include media. Maybe that’s not it. Maybe it’s a terms taxonomies, categories, links, folder. Happy files category right here. And include terms, fences. Okay. Fences, because I think there’s a folder back there. If we go into media, media, media, media, where are you? Here we go. Yeah, fences. And it has one item in it. So if we look at this now, we can see that it’s showing me that there’s one item in that. So I believe we are querying that properly.

0:04:49
Okay. Item, determs, childless terms. Okay. So that’s all good. This page is done. Media formats. We don’t need audio and video here. We just need to, we can’t support the gallery format, but I don’t think we need to thumbnail ratio override the aspect ratio. I’m thinking that if we do this as squares, it’s going to be nice and clean. So I’m going to try a one to one override. And then on the grid layout, we’re going to do probably, or we couldn’t have doing a masonry, but we’re going to not be doing one to one if we do that. Let’s start with a Metro and just see, or we could even try a justified grid. Now the kind of card we can use also limits the layout type, I believe, but we’ll get there in just a minute.

0:05:40
So Metro override card sizes. We’ll flip that off for now. So here’s where you can control on device sizes, the number of columns and all that. So I think we’re just going to go with maybe three across on all of those devices until it gets down here and then we’ll break down to two columns. And then it’s also asking me for the aspect ratio here, which leads me to believe that the other override probably is not the place to do it. It’s probably here that we need to do the override. I’m going to go ahead and save those changes. We’re not doing a carousel. Here’s our grid builder, which we don’t really have to worry about because we’re not going to be dropping facets in here. We’re actually just going to use the oxygen WP grid builder facets integration when we add our facets. So we can skip over that.

0:06:34
Here’s where we choose our card style. And if I go into all cards to take a look at what our options are, we basically need to choose one that’s not, I don’t want it to be like too fancy, something like this where it’s just like, show me an expanded version, that would probably be good. Let’s go with that. Let’s try Sapphire. So back over here, I’m going to choose Sapphire. You can make your own custom card style and WP grid builder as well. Get the background overlay background. Let’s just choose dark and let’s go down to like somewhere in there. What is that 35%? Okay. All right, let’s save those changes. And now let’s just go ahead and drop this in. So I go back to all grids.

0:07:31
I’m just going to copy the short code here. And in here, I’m going to add a div. And we’re going to have a wrapper so that we can kind of control all these grids with CSS if we need to. And we’ll just call this a gallery. It won’t be a featured gallery. It’ll just be a gallery. Okay. And I’m going to add a short code. And then I’m going to paste the short code in. Now the gallery is just going to be, probably expand to whatever size the actual gallery is. I just set that yet. So let’s just save. Let’s see what we have on the front end.

0:08:12
And really, there should only be one image in there right now. And there’s nothing, which is absolutely fantastic. Let’s go back here into the media gallery and actually get some fences in here. So if I go to the residential and I choose, so that’s obviously a fence. So we have a fence, right? Fence. That’s a fence. I wonder if I can choose, oh, can I not? Maybe if I go here. Okay. I can go, that’s a fence. That’s a fence. And there’s actually going to be a lot more galleries because we need to eventually, when we create the child service pages, there will be like barbed wire fence gallery. There will be a whatever other chain link fence gallery, right?

0:08:58
So picket fence, horse fence, fence fence fence fence fence fence. There’s just one of bunch of fences in here. Fence fence fence fence fence fence fence fence fence fence fence fence fence fence fence all those are fences. Okay. Let’s see if I can drag. Yep. Move 15 over into fences. Now, they’re still going to stay in residential because I’m allowing these to be in multiple folders at once. But now you can see this folder has a lot of photos in it. So I’m going to go over here and we’re going to see if this is querying now and it’s not. Okay. So let’s go to short code, size and spacing with 100%. Start giving stuff, stuff some width just to make sure that we’re not constraining it somehow.

0:09:54
So I want to do min height here is going to be like 40 rim and then we’ll also gallery margin top. We’ll do var. I need to change that to none. Var space L. Wow. It’s a Monday for sure. I can’t even type. Okay. I don’t think that that’s going to fix anything necessarily, but I just want to make sure. Oh, it did. Oh, what do we have a card? Okay. I think sometimes what you need to do is you need to, you need to read.

0:10:34
No, hold on preview. Oh, okay. So the preview is not even working. So our content query must not be. Well, it says fences 18 from that taxonomy. There are 18 fences. Okay. So what’s the problem items per page is 10. We’re going to do 12 on that. All right. Let’s just check all these. As you know, I turn stuff off. I just want to make sure that we’re not breaking anything. Grid standard. Election search load more.

0:11:22
Post for page. Card styles, sapphire. Animations loading. Customization. Save. Mm-hmm. Fasets, cards, add-ons. Preview. Okay. We’re still not getting it done. I’m trying to think how we can debug this here. Because it’s telling me I’m querying this properly. Yet it’s not showing me anything. All grids. I’m going to import a grid.

0:12:06
Oh gosh. Okay. That’s not going to help us. I no longer have the ability to import those. Have I not activated grid builder? I don’t think that matters. All right. Let me activate it and come right back. Okay. So it had nothing to do with the license key. What I did is I went to one of these other sites that I had done in the past with where did it go? Yeah. So I looked at how I had set this up on a previous site. And so it is actually a post type.

0:12:54
Post type is media and then you do the taxonomies down here. So I’m going to give that a shot. So we’re going to switch this to post types. And then I’m going to switch this to media. And then taxonomy terms, we’re going to be able to do fences. And that hopefully will take care of it. I did have to update. I’m glad I activated everything because my WP grid builder was out of date as well. So that’s all updated. Let’s see if we get anything on the front end. And we do. All right. Now we are in business, ladies and gentlemen. And look what this all does for you automatically. Like it’s all this functionality is already taken care of.

0:13:39
So what I wanted to do though, I mean, I don’t like them. I don’t think I like them all together like that. So first thing we do is we need to space them out. Now this is the greater land. I don’t want to get confused. That was my other one. All right. So I need to start closing some tabs here before we start to get crazy. All right. So grid layout spacing between. Now unfortunately we have to do this in pixels. Like we it doesn’t give us any other options. But I’m going to try 20 and we’ll save. Let’s see how that spacing looks. Come down here.

0:14:12
OK. That looks pretty clean. I do maybe want this to break out a little bit though. So let’s try a breakout class on this. I don’t know if I should do it. Actually, I don’t know that I need a breakout class. I could just probably change. Because really I don’t have anything else in the section that needs to be the normal width. And even if I did, I have a way to fix that. So let me just go to custom. And RAM instead of 1280, we’ll do like 144. Let’s see how that looks. OK. It didn’t get much bigger, but it got bigger.

0:15:11
I don’t know if that matters or not. I don’t know if that really does anything for us. I want to round these corners a little bit. And that’s going to be done on our card. So I’m going to go to our card. Remember, it was Sapphire right here. So I’m going to edit this card. And actually, I probably shouldn’t do it here. That’s probably the hardest way to do it. Let’s go to inspect this. And I’ll just do it with, because I want to do it and remember all of our grids, even if we change the card style. So media content, overlay, media thumbnail, it’s going to be on one of these.

0:15:49
Let’s go here, border radius. Border radius is going to be, let’s just do like 1M for now. OK. That does it right there. And it sticks on hover. So it’s just this card media thumbnail. So I’m going to go over to style sheets. And we’re going to make one for galleries. And then we call it gallery. Then I’ll put in that class. Let me zoom in so y’all can see what I’m doing here. So I called the gallery. Remember, we put a wrapper on this called gallery. And then I just stole this from the inspector. It’s the media thumbnail.

0:16:31
And I’m going to do border radius, var radius m, so that it matches all of our other radiuses. We’ll save that. We may need to use important on this. I’m not sure. Nope, we don’t. But that overlay. Look at the overlay. Does not have the border radius. So, scheme light, media thumbnail, media overlay right here. Is this class? I’m going to paste that in WP grid builder, WP, da, da, da, da, da, da. And I’ll do that all of that inside of gallery. And actually, I’ll just copy that now.

0:17:13
We just put this on the same one. So comma, and then put it down here. So now both of them get the same exact styling. Let’s refresh. Come down. And there we are. Now our overlay has the same rounded corners. OK, now we need to create some facets. And this will be interesting on how we want to do this. I wonder if I should just make this full width. So I just make this gallery full width. Let’s zoom out. All grids. I think we can actually do this inside a WP grid builder. We don’t even have to change the width of the section.

0:17:53
Because it has its own breakout feature in it. Where is it? Is the question grid layout full width right here? Save. And then if I go back here to this section, we can go to size and spacing. And just set this back to page width. Now let’s see how we look. OK, that’s definitely full width. I don’t know if we want to do that though. OK, I zoomed out. Yeah, especially not with three photos. All right, I’m just thinking about a bunch of different things. I think this wrapper, let me see if this wrapper is able to constrain that full width now.

0:18:53
If I can just put a max width on this wrapper of 150, let’s see. No, no, it’s breaking out of this div too. So that’s not going to be a thing. All right, so take off full width. We’ll just roll with it being page width for right now. That’s all right, it’s clean, like it’s clean. All right, so we need a load more. And then we need categories of heat. Well, we actually don’t need categories on this page, but we do need a load more. And then next to the load more, we’re actually going to want to div down here. And this is going to be called gallery footer. We’ll call it. So we’ll actually do this, gallery footer.

0:19:55
And I need to add some facets. But we need to add a facet and I need to add a button or a call to action of some sort. Because I want to be load more, but then maybe right underneath load more, we’re going to have a call to action. This is like call us or get a quote or something like that. Right? So let’s take a look at the facet first. So I’m going to go to all facets. There’s a bunch of pre-done ones in here. And load more is actually one of them. So that should already be done. Let’s refresh our builder so that we can see what we’re doing in our builder. And that’ll make things a little bit easier.

0:20:34
All right, scroll down. So in here, I’m going to add a facet. And that facet is going to be load more. And then I’m targeting the grid right above. It’s called fences. And title. I don’t think we need one button. I can customize. We want to do this. We want to do facet. And then load, facet, load more like that. Give that a class. I’m not sure why I’m just going to say don’t render an oxygen because that’s going to give me, yeah, it’s going to give me a little block like that to work with.

0:21:21
Remember I made this a minimum height or whatnot? Let’s go into structure. There should be a div right there. Gallery footer. And then in that div, where’s my facet, though? OK. Clip her ends. There we go. OK. It’s got to hit apply. And then you can see what you’re actually doing here. All right. I’m wondering if facet load more. I don’t think my button class is going to work on this. But I’m just going to try just in case button primary.

0:21:56
Let’s see how this works. Because I actually want this to be compatible with WB grid builder, too, eventually. It’s like kind of work to try. That’s definitely not the way to go, though. OK. So we’ll take that off. And refresh. OK. Nope. I don’t want to inspect accessibility. I just want to inspect. All right. So button class is WBGButton. Load more.

0:22:33
OK. All right. Let’s do this. And I’m probably going to have to be doing importance for these. But so we’re going to style sheets, galleries. This will be what am I doing? Nope. All right. Let me zoom in. So I don’t forget buttons. OK. There’s my button. And this I don’t have to put in the gallery class, because I literally don’t want any WBGird builder buttons to ever look like that.

0:23:08
So this is going to be background color, var primary. Oh, perfect. I don’t even need important on that. And really what I just need to do is change. I don’t even need to change the button radius. We’re going to these more square buttons. I do to make it match. So border radius, var radius m. And then my hover. So I’m going to grab that. I’m going to add hover to the end. And my background color is going to be primary hover, like kind of like that, but like that. And there you go. I do believe I need font family.

0:23:56
No, I don’t need that. I need to inherit the font family. OK. So save. I can also grab not the facet, but the gallery footer wrapper. And that’s going to get a margin top of our space L. Now we’ll save. Now we’ll refresh. And because it’s at the bottom of the screen, this actually does not really need a minimum height on it anymore. Should be OK. You can zoom out. Come down. All right.

0:24:36
There’s our gallery. And there’s our load more right there. Works like perfection. All we have to do is add a call to action. And I’m just trying to figure out because I don’t want two buttons necessarily. Maybe I do want two buttons. But it’s going to be hard, I think, to make them the same exact size. Why is my button not showing up? Button primary. All right. We have to reload the builder because that button should be showing up for sure. We’ll refresh on here just to make sure you can see the button.

0:25:22
Yeah, definitely. All right. So one thing I’m seeing while we’re here, I need to go back into our dashboard. And because I am going to change this automatic CSS button radius. So we’re going to go to buttons default button radius. We’re going to change back to var radio. Well, I can actually just reset it to the default. So the default var radius m or zero, it was zero. So var radius m is going to be our new default button radius. And then when I refresh this, those buttons should look exactly the same. They do automatic CSS primary button text. I want that to be var shade white. And then let’s refresh.

0:26:30
There we go. OK. But that button radius does not match this button radius does it. So clearly in our style sheets, we need to probably importance that. So that border radius right there, import, tant. Now let’s see if they match. Now they match. OK. Now when I put them side by side, the question is, are they going to be the same height? Because if there’s probably maybe a little border issue of some sort that we may have to sort out, can I actually see my two buttons in here?

0:27:14
Kind of. Do what is the deal with this button? What is going on with oxygen builder in here? If I pull that out, OK, there we go. Did I add the button inside the facet or something? Like what was going on there? All right. Here’s a load more. This is going to say, get a quote. But this is not going to be a button primary. This is going to be a button secondary. Or actually a button bait, a button black. Just a button black with it. Probably do button black. OK.

0:27:49
This gallery footer is going to be, go I want to do this. Still grid. OK. Yeah. See the height difference? There’s a height issue. Minimum with 0. Gap is Varspace s. Xs, probably Xs. And we’ll do the same thing for this gap. And we will align center and center. OK. This one doesn’t need to align center. That can actually stay.

0:28:31
I think that’s stretching them is what it’s doing. So save. Let’s get a refresh on our builder so that we’re not seeing this old border radius style. And then we’ll get a while that’s refreshing. We’ll get a refresh here. And we’ll take a look at what the difference is in borders. So if you look here, border width is 0.25 rim. That’s set in OK. Hang on. So an automatic CSS under buttons, there’s button border size is 2.5 rim. Or 2.5 pixels, but that’s converted to rim. So 0.25 rim. So we need to in style sheets come down.

0:29:23
We should be able to see what we’ve got going. Why is that again? It’s again, it’s lost the label. Oxygen, come. Oh! OK. Border 0.25 rim. You do border size. I think it is a thing, right? I was not just looking at border size. Where am I? Button border. I was looking on this one inspect. Oh, sorry. Border width.

0:30:08
Gosh. All right. Border width 0.25 rim. Save. It’s called button size and automatic CSS. It’s not because I was trying to use plain or language. It’s like width of a button. You know, you know what I’m saying? All right. So. But border width 0.25 rim. Important. What else is going on with this button? OK. Now the height stuff’s messing with it.

0:30:48
It’s probably the padding. So if we look at this one inspect, padding is var button pad y and button pad x, which is in automatic CSS 0.75 rim 0.75 m and 1.5 m. So up here, we need to do padding 0.75 m, 1.5 m. Important. Save. Now hopefully we should get matching buttons between our facets and our regular buttons. And we’re still not. OK. Inspect. So the padding is being overwritten properly. Here’s the new padding right here. Oh, wait.

0:31:46
Look at that. When I turn that off, well, hold on 0.75 m, 1.5 m. Font size. It’s because the font size is different. That shouldn’t really matter. Try to figure out what’s doing it. All right. So let’s just start turning stuff off. White, box shadow, padding. It’s not any of these heights. It’s not going to be the margin. That’s it right there. Border is set to none. I don’t know if I can undo that.

0:32:34
All right. So border with 0.25 rim solid var primary. Important. And then what we’re going to have to do is border color on the hover is going to have to match this save. Let’s check it out. Still no. Border is still set to none on WP facet buttons. Is that what I’m targeting? Yes, it’s exactly what I’m targeting. So if border set to no, because I never took off border with. OK, save. Now I’m confident. I’m confident. I’m confident.

0:33:41
There we go. Yes. OK. Oh, oh, but we have a border issue. Border color is valid, right? CSS border color. I think I just need to do a port on that. OK. We’ll just do an important on that just for shifts and giggles. OK. Because I’m done effing with these buttons. There we go. There’s a little delay in the animation. But you know what? That can be fixed later.

0:34:19
All right. So get a quote. Load more. Get a quote. All right. So they get a quote needs to go to our inquiry page. And load more is going to do its thing. And then what we can see here is, if they choose get a quote, oh, oh, I can do one more thing. Oh, I can’t do one more thing because, ooh, okay, this is gonna be called gallery footer inner, footer buttons like that. And then I’m going to transfer the styles from footer to footer buttons. And then on footer button on the footer footer, that one, the gallery footer, I’m going to delete all styles from that selector.

0:35:07
So it’s no longer a grid. And then I’m gonna come over to structure and I’m gonna wrap this with a div, which is gonna be called gallery footer. So I can take off gallery footer from this div, I can go to this div and type gallery footer like that. And then gallery footer buttons does not need a margin top of L, it actually needs a margin top of XS. No, it doesn’t, it doesn’t need any margin top. This div that’s now gallery footer needs the margin top of our space L, just a little restructuring. And now what I can do is I can drop some text below without destroying this grid right there, which needs to be a width now of 100%. And these need to be set to stretch.

0:36:10
Stretch, stretch, thank you. Okay, oh, it’s not actually, it’s stretching this one, but it cannot stretch that one it looks like because of its little container that it’s in. Okay, button, color size, size and spacing, stretch. Okay, well let’s do that on, fast load more, stretch, done. Okay, now this needs, this is gonna be a little module we can save and reuse below any gallery really. Get a quote, call us today. This is gonna be an accent nice. And this we’re gonna go vertical, come on, oxygen, vertical. Like how many times I have to click you before you actually do something, vertical, center.

0:37:10
Okay, now this gallery footer wrapper can actually get a margin bottom of our space S. Yeah, and then this, so we can add a text, which is, we actually need a text link. And this is gonna be a phone number which we’re going to steal from right here. Pop that in there, we’ll telephoneize it in our URL, I like to call it that. I don’t know if you guys like to call it that, but I like to call it that. And don’t we have a phone class, phone, white, phone, link, phone link. Okay, and phone, I’m just gonna make one now, phone link large, phone link L, and font size is on that, is gonna be var text L, which is probably not big enough.

0:38:10
It’s actually pretty good. Okay, so phone link text color, text primary. Why suddenly by putting phone link large on there, do we lose the text color, oxygen? That means no sense whatsoever. Okay, we’re gonna importantize that. Do we not have a hover state? We do, and it’s not working. So we’ll important that as well. Perfect. And I believe that hover state I wanted to make not so bright. So we’re gonna go to shades, primary hover lightness 1.10 save. Okay, dokey.

0:38:55
All right, refresh, come down. All right, we need to tighten that up a little bit. This, oh, cause H accent line has a default of margin of variable space XS. Okay, but on this one, I can just override, now I don’t wanna override this at the ID level. H accent lines. That’s a problem with putting default margins on classes like this. Okay, we’re just gonna have to make our own for this. So gallery footer, H accent. So gallery footer, accent heading like that. And then I’m gonna take accent line, I’m gonna copy it over to here.

0:39:49
I’m going to remove H accent line. And now I’m free, because this is a single use case class to come down and change this. And we can probably just use like point 2m, point 4m, something like that. Okay, save. Now that’s nice and tightened up. Okay, now we have to figure out what’s gonna happen to this on mobile, cause I’m not so sure that those are gonna fit side by side. Oh, they are. But now our button is, okay, it’s cause of that text, I believe, text size. So back to our style sheet we go.

0:40:40
To our galleries and we’re gonna do font size, var, text in, important, save. Okay. Okay. It’s better, but it’s not, it’s still not there. So I’m gonna inspect this. It is sometimes a pain in the ass, getting these facets to perfectly match other elements you’ve created. So I’m gonna turn on the responsiveness and start to see what happens here. See like what’s the difference between our button and that facet button? It’s fine there. It’s actually, well now, see, now it’s bigger here. Box shadow, all right. It’s that right there.

0:41:54
It’s that line height. Line height set to, it’s cause the line height is set in pixels. So it’s not adjusting to the size of the text change. So line height 1.58 42 line height 1.2. Is that what it is on our button? Yeah, line height 1.2 right there. Is that an automatic? Is it set in automatic under buttons? I don’t think I made line height a thing. Okay, so 1.2 for buttons now set to 1.2 there. I’m just gonna make it important to make sure that it’s always overrided with no issues, overridden, overrided, overridden, over, yeah, whatever. All right. Now we should be good.

0:42:53
So here, come down, down, down, where is it? There we go. Perfect, they match perfectly. And they do fit side by side. So I don’t think we’re gonna need to worry about stacking them. I will check it on a real mobile device just to make sure. But guys, officially we have created a gallery and our gallery can easily have images added to it. And it can easily be reconfigured to show different things from a different folder. And I believe we can also create categories of there, which we’re gonna do, let me see how much time we’ve spent here. Cause I have a call coming up. Okay, we’re only 43 minutes in. All right, I’m wondering if, what else is needed on this page?

0:43:44
Okay, I can do all these real quick. Let’s go out of here. Cause now that I’ve imported all the photos, I can actually get those cards looking right. That would be, I think, another big step forward. So services, here we go. It’s all these child pages. So I’m gonna open all these in new tabs. We’re gonna go one by one. Make sure we don’t miss any cool privacy, split vinyl, wire, wood, rot iron. Okay, and then I’m just gonna come in here and services hero background image, talking point icon service card image here it was right here.

0:44:25
So I’m gonna go in and add and then it would be helpful if I actually looked at what we were editing first. All right, so I need to find an aluminum fence and I don’t think that these are categorized back here. So this is one of those that, maybe I named them. Aluminum? Nope, no look. Okay, how about all files? Search. I don’t wanna search in folders, aluminum, aluminum. Nothing, great. All right, can I find an aluminum fence? This is not gonna be fun. And there’s all these load more. So let’s try an easier one first.

0:45:11
Aluminum is a tough one. Barbed wire, I already saw a barbed wire. So I know that’s in there. So service card image, there’s barbed wire right there. All right, so I’m gonna select that. Let’s go and make sure first that we’re actually, so where’s barbed wire, barbed right here? We should see an image there now. There it is, look at that. Okay, and then we’re gonna have to come by and do these text transfers. In fact, let’s do that now. So, keystri fence number one, and then we’re gonna go to fence installation. There we go.

0:45:55
So now find barbed wire right there. All right, and I’ll just copy that. Here we are with barbed wire. We’re gonna make that our service card lead and then get a quote inquiry update. And now when I check it, we should have content there as well. We do. So we literally just have to go one by one. I’m gonna put this back over here, services, okay, fence, edit service, edit service. This is barbed wire, we’re gonna close that. Now I need to find a chain link fence. So I’m gonna come through that. Here’s a chain link fence right here, select, and then I’m gonna go to not there, not here.

0:46:36
Where was I? Fence installation, services, media. Did I close the other tab? No, right here, here we go. So I need to pull this all the way over here. And which one’s more important? This one is a preview, this one is the source, okay. So aluminum, there’s an aluminum fence right there. I can kinda look for that picture later on. All right, so what did I just do? Chain link fence, I’m gonna grab that and edit service, chain link, that’s aluminum, okay. Let’s put this at the end, so we’re gonna do that last. So I wanna make this go in order. Oh, we also service card heading, service name.

0:47:24
Oh, that we weren’t using. Yeah, we were just pulling this right here instead of the service card heading. Update, all right, before I start just blazing through these, let’s check it one more time. So now I have, there’s chain link right there, says chain link fence, there’s my thing, and there’s my get a quote button. So we are all good to go, okay. So I can close this out, now I can quickly find, ooh, I don’t even know if he has an electric fence. What did we use on the old site? This image right there. So I’m looking for a little red handle. All right, add media, all file.

0:48:10
Oh, there it was, oh geez, go back, go back, I saw it. There it is, right there, okay, select, and then I’ll come over here, electric fence, grab the copy, paste, update, close. Farm fence, all right, what did we do? Farm fence, all right, it’s that kind of, I’ll grab the copy, looking for a little barn with a farm fence around it. Okay, fence installation, fence installation, and it’s service tab hell right now is what I’m in. Oh, can I type in farm or any of these done with their names? No. Okay, it says they’re all loaded. Well, here’s a farm fence right here. I see a freaking farm animal, all right?

0:49:06
We could always, oh, here it is right here. But is this one better? It might be better to have a living animal in there. All right, let’s paste the copy in. Let’s go see what that looks like before we call that a dump. Oh, no, because we’re gonna have to use that one for horse fence, I bet. Yeah, yeah, we’re gonna, yeah, we’re gonna use that for horse fence. Okay. I saw that farm fence somewhere too. There it is. Select update. We can close that now.

0:49:56
Let me find horse fence. There’s horse fence right there. Because horse horse, yep, look, that was the image we used for horse fence. Okay. Horse fence, add media. There’s that horse. Select. Paste the copy. Update. Close. All right, field fence. The heck is that field fence? Okay, it’s a field fence. That’s what I’m looking for. Imagine that.

0:50:30
All right, add media. There it is right there. Select. Paste. Update. Close. Pick it. I know what a pick it fence is. Let’s go to pick it and grab that. And add media. Load more. Is it in here? Hmm, placeholders fence is fence installation. Fences. Okay, not seeing it.

0:51:14
Not seeing it. What’s this four by six folder? Those look like gates. That’s random. This is just backgrounds. It’s not under commercial. Fences. There it is right there. Okay, select. Paste the copy. Update. Close. Cool fence. I’m guessing we’re looking for a pool for this one? Yeah.

0:51:46
Cool fence installation. Browse. Oh, nope. All right. Browse here. There it is. Paste the copy. Update. Close. Privacy fence installation. Okay, it’s the side of a house and a wooden fence. So we’re going to add media down here. Side of a house. What fence? Residential.

0:52:15
Side of a house. Side of a house. Here’s one of them. That’s not the one. Kids are downstairs, you know, crying again, having a horrible time. Because you can’t ever record an episode of anything without them losing their absolute minds. All right, so we’re going to update. All right, split rail fence. Split rail. There it is. It kind of looks like an entrance to a neighborhood. So let’s go to split rail, paste in our copy, add media. Uh-huh, uh-huh, uh-huh. This is kind of it, but that’s a different angle. Here it is.

0:53:04
Maybe, maybe when I show the stone, that’ll look better. So I’m going to hit update. Now they’re screaming at each other. That’s always good. All right, let’s refresh see what we’ve got. Split rail. Okay, so all, all coming together. Oh, why did I choose to? I don’t want to choose to there. Let’s update that. Okay, now vinyl. Vinyl vinyl is already done, but that’s not that’s a placeholder. So there’s our vinyl. It’s a big giant white panel fence. Okay, vinyl fence installation, remove our placeholder.

0:53:44
There it is right there. Select. I’ve already got the content in there. So we just update. Now I do wire. Wire fence. Okay, it’s that black wire fence. So I’m going to come down here, pop in our content. Add media. wood fence. Oh, there it is. Okay. All right. It’s like somebody’s backyard and I can see the fence from the inside. Paste content. Somebody’s backyard. See the fence from the inside. Here’s one of them. Oh, I don’t want to do that because it’s been selecting multiples. Mm-hmm. There’s another one I could use. There’s one I could use.

0:54:48
I was trying to do a basic one though. Here it is right here. Okay. Update. Close. Rot iron fence installation. All right. So let’s go check out. Other site. Rot, rot, rot, rot. There it is. Grab the copy. All right. It’s kind of an upper scale stone and rot iron. See if we see that anywhere. I see some rot iron fences. I’m not seeing that exact rot iron fence. Okay. Fences. Gates. I didn’t have a gate in it. Okay. Fences installation. It’s not there. Is there one of these four by sixes? I mean, that’s kind of rot iron right there. All right. I could use that if I needed to. See how that one looks. I think that’s rot iron.

0:56:18
Watch. Fix it if it’s not. Fix it later. All right. Let’s close that. Illuminum. Illuminum. Illuminum. Okay. Yeah. The one I just chose may be an aluminum fence and not a rot iron fence. All right. This is the back of somebody’s house and a black aluminum fence. Put the copy in. See if I can find this. Oh, you know what? I may have needed to load more. We weren’t looking at all the options. I don’t think. Okay. I’m seeing aluminum fences. I’m here. Here it is. Right here. Select. All right. Update. And then let’s go back to rot iron fence installation. Let’s just see if I can find that better photo. I guess we have to remove this one first. Add media. Load more. Make sure we’re seeing all of them. What is the, you know what I can grab? Rot iron.

0:57:42
Inspect. And I was using background images for these which are not using anymore. Since installation Georgia. So I can just type in like residential. We’ll go to all files. Residential. Well, there’s a lot of them named like that, aren’t there? Why is this one so hard to find? It’s like always the last one, you know, or the second the last one. I’m not seeing it. Residential fence installation. Is that narrow it? No, they’re all named the same thing. 192 0 0 0 5 8. 192 0 0 0 5 8. 192 0 0 0 5 8. There it is. Select. Update. Okay. Refresh.

0:58:45
Now our grid is all populated. Wow, this page is starting to come together, isn’t it? Okay. So we’ve got reviews. We’ve got. I need to I need to be able to load more on the reviews, I think, but I don’t I don’t know how many I gotta say how many reviews he actually has will do that at a later time. Actually, we probably should do it now. I don’t know. She’s Louise. Okay. What time are we at here? All right, we’re at our hour. So this is a good stopping point. I’ve done enough, I think, to be able to come back and just start doing the other service pages. We may need to do this form as well. I want to get that cleaned up. But I think we’re looking good.

0:59:35
We need to clean up the header as well. Okay. So we got some good stuff accomplished. So we got our service grid accomplished there and we got our gallery accomplished there. So we’re going to call that a session and I’ll be back for another round very soon.