Peachtree Fence Part 06: Services Grid, Process Section, & More Challenges

0:00:00
Alright guys, back again it is quite early in the morning but I’m going to try and knock out the rest of the service services page and I’ve got an idea for how to solve this problem right here. In fact, let’s just go ahead and tackle that right now and then because I’m still in the template. So what I need to do is fix this, hop out of the template and then finish off this page down here. Alright, so my idea for this is in this section, oh by the way the MetaBox image thing, somebody said that the advanced image would work so we may go ahead and try that as well. Alright, so I am going to grab that section, section spacing. Let’s see, what did I put on here? Hero services, no, that’s no, okay. Let’s see this, div. Okay. I thought I had cleared out the section, but I guess not.

0:00:57
So what I’m going to do is take off the bottom margin here and then we’re going to add a shape divider to the bottom of this container and we’re going to make it the same color. So base ultra light like that and then we’re probably going to make it like an angle and we’re going to not make it so big though. So probably 150 pixels high, something like that and then we’ll probably clear out the spacing in the bottom. And then I’m going to take the box shadow off of this because when you add a shape divider it adds overflow hidden and then that’s going to hide the box shadow basically. Alright, so let’s save that. Now what that allows us to do is, and this is a repeater, but I can take off this with auto and we can go grid 4 on this for example and we can stretch that content all the way underneath here. We just need more things to say, obviously. I also want to, let’s see, what do we name this? So this was, we didn’t give that a name, did we give this section a name?

0:02:16
Yeah, talking point text. Why is that class on this section? Okay. Alright, let’s not do that. Alright, talking point text. This is supposed to be talking point icon. That’s correct. Alright, talking point text needs a line height of 1.2, 1.3, something like that. And then we’ll figure that out as we get more in there. We’ll play with it a little bit more, but I think I’m going to like this a little bit better. So let’s take a look at the front end. And then so these are going to go underneath there. So there isn’t going to be any gaps of space or anything like that to worry about. And it should add a little bit of, I don’t know, less, you know, standard boxy kind of feel to the website.

0:03:11
Alright, let’s go ahead while we’re here. We’ll go to the admin. We will try the advanced image field in Metabox just to see if that’s going to work. So let’s go to custom fields, services single page, and let’s find our background image. Alright, type is advanced, image advanced. Show us how to set it up. Force delete. Okay. This needs to be probably, yeah, that I still need to get all of my custom image sizes in here. Cloneable. The problem is it’s going to allow people to add more than one image. It seems like are there any advanced settings to limit that? Doesn’t look like it. Alright, so we’re going to hit update.

0:04:00
We need to go to that services page. Fence installation. Alright, we’re just going to delete that. We’re going to add media and we’ll choose this one. Select. Just want to make sure that that’s a fresh selection. Then we will refresh. I don’t think it’s going to just pop it in there. Oh, it did. Okay. So that worked. But I need to see it in the builder. So I’m going to refresh. That’s pretty good. I think I want to make this shade of blue a little bit lighter.

0:04:41
That base shade. We may want to take down the tilt of the angle of that shape divider. Maybe not make it so quite so extreme. Alright, I just want to make sure I set this properly. So we have background. It is set to cover 50, 40. Alright, all that’s fine. Let’s make sure it’s no repeat. Okay. That should be good. So we’ll save. Let’s see what it looks like with a less extreme angle. I think that’s better. Alright, and I think it’ll look better once we have this content going over there. And yes, okay.

0:05:22
So let’s hop out of here. We’re not going to tweak and play around with it too much. We’ll come back to do all of that. So what I’d like to do is hop out of the template. I would like to edit this service page. Jump into the builder here. And basically what we have to do is let’s close that. Let’s close that. We don’t need a bunch of tabs open. Here’s the old site that we’re trying to recreate. So we need to create this types of fences we specialize in section. I’m probably not going to go with the slants on this. I don’t know. They look a little random. And then we need this process section, which we’re going to try to use font awesome to do these afters.

0:06:06
And then we need this section right here. I don’t know. Do you guys like this diamond kind of design? Should I keep that? I guess we’ll start with it. And then you guys can tell me in the comments whether you like it or not. Then we need reviews. Then we need a project gallery, which I think I’m going to redo because I want it to be bigger, like more in your face. So I might do it like it takes up the whole like left side of the screen. And then on the right side, we have what it is, the title, little blurb, and then a CTA. And then maybe that’s sticky. And it kind of follows you down the page. And we may put that on the left or right. I’m not sure.

0:06:42
And then I definitely don’t like how this Q&A section is done. We need to figure out a new solution for that. All right. Let’s start with this section right here. So types of fences we specialize in and choose a fence. And then I’m just going to put a BG of base on here for right now. And then we’re going to add a heading. Actually, we’re going to add text. And then we’re going to add a heading. This is going to be text white, at least for right now. And then I’m going to do H accent. And it’s our line heading. And then we can also put a text white class on there. And great, that’s not working. Okay, because I set the text color here.

0:07:37
Okay. We’re going to take that off and allow. So we’re not going to put a color on H accent line. We’re going to have to stack utility classes for those. All right. Let’s go ahead and center. We can center top. Oops. No, we don’t want to center top. We want to center all. Because that has that reflow issue that I’m going to investigate. All right. This is choose a fence. And then this is types of fences. Types of fence.

0:08:13
Fences we specialize in. I was going to try to fit in the word installation again. Types of fences we, let’s just do this. Types of fences we install. It’s like a variance of the word installation. It’s always good to have more variance in your words for latent semantic indexing, LSI in Google. All right. So what we need now is a repeater. And we’re going to put a margin top on that repeater of let’s try XL first. Okay. That may be a bit too big. Is there a blurb? No, there’s no blurb. And that is a bit too big.

0:08:56
So take that off. Margin top L. Okay. And then what we need to repeat is services and all right, let’s think about this for a second. In fact, I don’t know if I have the site map pulled up, but let’s look at the other example. So these are all children of fence installation. So we need to query children of fence installation. First of all, we need to make children of fence installation. So I’m going to go into the customizer real quick. And we’re going to go to menu, this full menu, and then I am going to add items. And we’re just going to add something called fence installation real quick. This is just a placeholder. And then what I want to do is come down to. Oh, actually, okay.

0:09:57
All right, I’m thinking, all right, services, add new service. This isn’t going to make them children. So it doesn’t really matter. All right, let’s come over here. So we need vinyl, farm fence, vinyl, farm, rot iron. Those are the first three. So we have vinyl fence installation, farm fence installation, rot iron fence installation. What else we got? Split rail aluminum wire. Split rail fence installation. What was it? Wire? Aluminum and wire. Aluminum fence installation. Wire fence installation.

0:10:54
We’re going to do barbed wire field, barbed wire field and pick it. Barbed wire. Field. Pick it fence installation. Great. First privacy would. Okay, what else? Pool electric chain link. Come on. Pool fence installation. Link fence installation. Electric fence installation. Okay, publish all those. And then in the admin, we’re going to hop over to services. Here we are.

0:12:03
Okay. All these that I just added, aluminum split rail, rot iron, farm fence, vinyl fence, aluminum, all of those. We can edit. No, don’t do that. Don’t do that. All right, date publish. I want to be able to, yeah, there we go. Okay, vinyl up to here. Edit. Okay. Metabox, post types. Services. We need to allow for hierarchical. Update.

0:12:41
And then let’s refresh here. All right, let’s try it again. Except not that one. Edit. Apply. Okay, still can’t do it. There’s a setting where it’s like bulk edit. Something about bulk edit. Try to find it. Supports. I’ll, it’s going to be here too, I believe, page attributes. Okay. Refresh. And we try it one more time. So fence installation and vinyl all the way down to there.

0:13:20
Edit. Apply. There it is. Parent is fence installation. Update. Okay. So now effectively, if we refresh this and we don’t sort by date, we just sort by title. Did it not do it? Let’s also drop this to like 50. All right, all these should have dashes in front of them, designating that these are child pages. Yeah, that did not add them as a parent. Why not? Let’s take off wire.

0:14:00
Oh, wait, no. Let’s take off, it reordered them. All right, so no gate service, no gate installation, no fence installation. bulk actions edit. Apply. Parent. Oh, it’s showing them here. Look at this. It’s showing them as children right here. Okay. Dashboard. Let’s just go out of it all together. There we go. Okay. They are now children of fence installation.

0:14:29
And now what we can do is refresh. And I’m actually going to have to go to, I hope I saved that. I guess I didn’t save that. Moving too quickly. All right. So I need to go out the inner circle and we’re going to go down to query builder recipes. Only children query only children posts of a CPT. So I have a cheat sheet for this. Yeah, great. All right. We didn’t lose too much. So VG base. Add text. Add heading. Text white.

0:15:17
Text white. Accent lines. Take off the color. Okay. Center all. Says types of fences we install. Okay. And we’re back. All right. So repeater. Margin top L. Let’s grab the actual repeater advanced query. Advanced. Edit query. Add query parameter.

0:16:05
So we’re going to be doing post type. Is services add value. Nope. Don’t add value there. Add parameter. Post type of services. We’ll do post per page. That’s going to be 16. We’re going to add another parameter here. Let’s look at our recipe builder. Post parent not in zero. Okay. Post parent not in is zero. That should give us children right there. All right.

0:16:42
And then we’ll do no found rows equals true. That’s we will apply. All right. Looking good so far. So next what we’re going to do is grid three. Gap. M. Grid. M1. L2. Grid M1. Okay. All right. So time to build some cards. All right.

0:17:26
So we are going to add a div inside that div. We’re also going to stretch this. And then in our div here, this is going to be called a service card. And then we are going to put a background color of var shade white on that service card. And then we are going to go to borders. Var radius. M. We are going to go to 100% width. We are going to go padding. Var space. M. It may end up being L. But we’re going to start with M. We’re going to add a heading a text and a link. And we’re going to add an image as well.

0:18:13
So we’re going to add an image. Okay. Yeah. We’re going to heading text link. All right. In that card, we are going to go vertical left. Am I in the card? Yeah. That should definitely be applying vertical left. We’ll also go type typography and left text line. Okay. All right. One thing that we’re going to have to address is getting this image to span full width of the card. So the service card actually can’t have all this spacing. It’s going to have none.

0:18:58
There’s going to be a div after that image. And then all the heading and the text. Come on, oxygen. Jeez. Don’t, like they can’t tell me they improve this. All right. Okay. All right. Now this div is going to be service card enter. And then it’s going to get the padding. Bar space M. Apply all. There we go. This card also has to get a layout of overflow hidden. And that’s going to round the corners of that image.

0:19:50
And then we’re going to H3 this. And then we need to inject everything from the custom fields. This inner is going to get a color as well. So typography color is going to be var base. This is going to be text s. No, not text s. We need to give all these things classes. So this is going to be service card image service card heading service card text service card link. Okay. Let’s start injecting some stuff, which we can’t really because I mean we could do the title. But I don’t typically do that. But I just want to show you that we’re going to be able to inject just like that. The other thing I want to do is grab this div. And oh gosh. I should have put a link wrapper on it first because now it’s so unpredictable with what happens when you add a link wrapper after you’ve done all this stuff.

0:21:01
Alright. We’ll tackle it. So I’m going to go to custom CSS flex one. That’s going to make sure all those cards are the same height on the service card. You have to do that inside of a repeater when you’re using grid because the stretch class can’t get to this div because of the parent div of the repeater. Alright, this link right here is going to get a margin top of auto. That’s going to force it. It should force it to the bottom. Oh, we got to flex this card as well. So or just flex this inner. So flex one on the inner as well. We’ll make sure that it stretches to fill the full card. And then because I put margin top auto on the link, it’s going to force the link to always be at the bottom of the cards. You don’t have any like floating links when cards aren’t the same height. Alright, let’s take a look at front end. Alright, there you go. So we’ve got some cards going.

0:21:58
Obviously need some design help, but we are making good progress. So let’s go ahead and add some custom fields. So we’re going to go to Metabox custom fields. Services single page is where we want to be. So we’re just going to add more fields here. I’m going to close that one down. We’re going to add a group field. Well, let’s think about this. So what we need is we need a card. Yeah, I’m going to do this all specifically for the card separate from what we do for the page. So I’m going to create a group. And this group is going to be called service card. And all that should be good. We’re going to add a field. The first field is going to be it’s going to be a text field.

0:22:50
It’s going to be service card heading. And then we’re going to make another text field called service card description. Or I’ll use leads since I use that most often. Alright, and then get a quote. Get a quote. Okay, I want to do this a little bit more dynamically here. Because there as we build these pages out, here’s what I’m thinking. As we build these pages, these are not all going to get created at the same time. So sometimes we needed to say get a quote. Sometimes we needed to say learn more. And learn more will take it to the actual page. So if a page exists, it’ll say learn more or it can say learn more. And if the page does not exist, then it’ll say get a quote. Now we can do a bunch of logic stuff to make that happen. Oh, well, yeah, I don’t know.

0:23:45
Let’s just do it. But let’s just do it this way first so we can get it done. And then we’ll come back and we can make it smarter if we need to make it smarter. But what we’ll do is service text. This is going to be service card link text. And then we will do add field. Can we actually do a link like a URL or. Yeah, but I was wondering if it allows you to do like select an existing page. So you don’t have to know the URL you want to link to. Yeah, WordPress post. Would that be it? No, probably not. File upload layout. HTML 5. Advanced.

0:24:32
All right. Well, we’ll just do text then. So this is going to be service card link URL. Okay. Perfect. Let’s go ahead and hit update there. And now we can on our fence installation, we can. I don’t have one open yet. Do I edit service? So we come down here. And now we’re going to see here’s where you set up your service card. So service card heading is also going to be fence installation. Service card lead is going to be a little description, which I don’t. Oh, yeah, okay, we do. So.

0:25:12
Oh, these really need to be only for child pages. I believe now I mean could could do it for everything. All right. So we need to be doing this on a child page, though, not on not on this main service. So let’s go back. Let’s go to aluminum. What’s the one that comes up first? Final. Okay. It’s going to depend on how I. Order them anyway. Final fence installation. So we’re going to grab that. We’re going to go to service card heading. Now what you can do to save time, I think there is a way to do this. I just don’t know how to do it off top of my head. But you can make, I believe the.

0:25:58
Where are we? General custom fields. Here they are. No, that’s not it. Did I get out of here? There they are. So the heading. It can have a default value. And what we can do is dynamically inject the. The service, the services page name. We can dynamically inject it into the default value. That way you don’t have to go and manually put them in every single time. I don’t know how to do it off top of my head, but I know there’s a way to do it. And that’s probably what I’m going to investigate after this video is over, but I’m going to just do this one. This first one manually.

0:26:36
All right, so. Final fence installation. Let’s go ahead and grab. Where’s vinyl? Final vinyl vinyl vinyl vinyl vinyl vinyl vinyl vinyl vinyl vinyl vinyl. Oh, first one. Okay. So. There’s the lead. The link text is going to say get a quote. And then what happens on this site when you get a quote is it take you to the inquiry page? Yeah. Okay. So inquiry. And what we can do is actually let’s hit update.

0:27:09
We can go back to. I think I closed it on accident. We can go back to metabox custom fields. And we can make that the default because right now it’s pretty much going to apply to everything. So the default value here can be inquiry and the default value here can be get a quote. That way I don’t have to fill that in on every single card. All right, the default value also for now can be Laura Mipsum because we don’t want it to just ever be blank. Right. All right. We also I want to figure out how to limit character counts in. In metabox. But for the lead, we will drop in default value of that. Is that about the same width? Yeah, probably. Okay.

0:28:08
Get a quote. Sources card lead. Sources card heading. Default value will be service name for now. Required disabled read only pre pin up in predefined values. What’s that? Data list. These are values that users can select from. Oh, that’s cool. Okay. So we can give multiple options for them. So let’s try that down here. Service. Forget a quote. So.

0:28:39
Predefined values. Well, first of all, I’ll make the default get a quote. But the predefined values will be. Get a quote or learn more like that. And then for here, the default will be inquiry, but the predefined values will be inquiry or. Well, you can’t really do a default for that. So. Because we need to dynamically inject the URL of the service page. Okay. All right, listen to update and just see what we’ve done. What kind of destruction have we done to our services page? Okay. Get a quote. So if I take this out. Where are my options?

0:29:24
Oh, right here. Okay. That’s cool. All right. I see. All right. Update. But I still don’t know how to limit text. Metabox character limit. Simply add limit 40. There’s metabox text limiter. Text limiter is a free extension of the metabox plugin. All right. Gonna plug in add new. All right.

0:29:54
So I guess I need to simply add limit 40 into field parameters limit by 40 characters. Okay. I guess I’m going to have to install a plugin, but I’m not going to do it right now. Okay. So fence installation. Oh gosh. I really wish Firefox would ask me if I would like to close those tabs. All right. PC3 fence digital gravy.dev. We can click on fence installation because all of the stuff is linked up now. Good. So we can get out of that. Oh, we also need the service card image, don’t we? Okay. Custom fields.

0:30:32
Kind of. Yeah. Okay. We’re going to go back to that too. Edit. Add field. And here we go again. Advanced image. Now image. Advanced. Okay. This is going to be the service card image. And we need to drag this to the top. Oh gosh. I can’t do this with all these things open.

0:31:00
We need text, URL. All right. Image at the top. Cool. All right. Update. Now, let’s see if we can set a default for that as well. I don’t know if we can. We also need to set this size to like large probably. Cloneable shows admin advance before after. Okay. Does not look like. You can do that. All right. So we’re going to hit update.

0:31:33
We’re going to edit this service page. And we need to drop in an image for this. We could use the same background image, but. You may want to use different ones, you know. So everything’s not the same. Oh, and I’m editing the wrong page once again. So we’re going to go to vinyl. I’m going to go down. And there we go. Okay. Perfect. View service. No, don’t view service. View the grid. All right.

0:32:18
Nothing’s in yet because I have to edit the page and drop it in. We also probably need to constrain the height of those images. So that they’re all the same. Because if you end up uploading an image that has a different aspect ratio than the other images you’ve uploaded, you end up getting into different height images in your cards. And that’s no good. So we’re going to go right off the bat. First, let’s get the image in there. So I’m going to go with data, metabox field. Service card service card image. Size. Large insert. Okay. That appears to be working. Now we’re going to go size and spacing, minimum height.

0:33:04
Or actually, we’re going to do just height. And we’re going to do 30 RAM, 20 RAM, 24 RAM with 100%. And we’re going to go custom CSS object fit cover. To make sure that that doesn’t warp the image when we do a width and a height on it like that. Maybe 22, maybe 20. I don’t want it to look like a lopsided kind of card. All right, save. Let’s see where we’re at. All right, we can close that now. We can close that now. All right. Now we need to inject here insert data, metabox field service card, where is our service card? Come on now. There it is service card. Okay, service card service card lead.

0:34:10
And insert. And then this will leave this for now. It’s just defaulting because I don’t want to go through and change all these headings. All right. So on this heading, we’re going to go actually on this lead. We’re going to go margin top. Let’s do var. Change that to none. Space s. Oh, I’m putting that on the bottom needs to be on the top. Varus space s. And then on the link, I can go margin top, which we did auto. So I’m going to have to go margin bottom on this of the same var space s. So now we’ll save that. I want to tighten up this line height.

0:35:01
Why is that text selected? So typography line height 1.2, 3, 4, 5 font size var text s. Which I’m going to be adjusting that. And then this is an age 3. But I want it to be more like an age 4. So not text color. We’re going to go typography. Far text m. Save. Okay. I want it a little bigger. Calc times 1.2. All right. And then down here. Let’s first of all, let’s double click this and edit it.

0:35:59
And let’s insert data. Metabox field service card service card service card link text. Insert. And then we’re going to go to the URL data metabox field service card service card link. URL. Great. All right. And then probably what I’m going to do here is typography font size var text s. Bar text s is going to get bigger remember. So looks a little small right now. But we’re going to adjust it later. All right. That’s looking pretty clean. I think the rounded corners because of the size of the card. If like the rounded corners are a little bit too much.

0:36:51
So we’re going to go with radius s. There we go. A little bit better. Okay. So we have our images. I guess the defaults didn’t pull in today. Okay. I think I know what needs to happen. Like you have to go to every single page. We need to also. Oh, okay. Gosh. I need to think about this. So. If the page doesn’t exist.

0:37:28
We’re going to have. I’m going to have to think about this. Because we need to make the card clickable as well. I think. I don’t know. Should we make the card clickable or not clickable? If we don’t make the card clickable, you definitely have to make the heading clickable. So we’re going to need a heading. Link. URL. And it’s probably going to default to. So let’s try to do this. So vinyl fence installation. Yeah.

0:38:10
I don’t know. I don’t want to do that. You’ll end up tricking people with the UX. They think they’re clicking on vinyl fence installation to get more. Info on vinyl fence installation. But it’s just going to take them to the inquiry page. And that’s not going to be a good experience. I have some sort of logic where I’ve done this before. I don’t do it very often. But I’ve done it before. It’s got to remember how I’ve done it in the past. Where if the page doesn’t exist, then everything, the whole card, links to get a quote. Right? Like if you look at the actual here, peach tree fence dot, the old site, not lead dot digital gravy dot dev fence installation.

0:38:53
Okay, that card is not clickable. It’s just the link. Get a quote. But I want the whole card to be clickable. I’m going to see the work. I’m going to design some logic to where everything is clickable. If the page exists, if the page doesn’t exist, then you can just get a quote. That’s it. We’re going to see if we can do that. All right. We’re not going to do it right now. But that’s going to be our goal. All right.

0:39:16
Let’s move on. We’ve got to continue. So let me bring this over here. What’s next? Peach tree fence. Okay, let’s do five easy steps. So add text, add heading, and one, two, three, four, five. Okay. So this is going to be a three column grid div. We may end up doing a three column, two column. I don’t know. We’re going to have to play around with alignments to get this to work. The centered kind of effect.

0:39:51
I guarantee that was. Yeah, that’s going to take that’s going to take some customization. But we’ll get the we’ll get the crux of it down. We’ll get the framework for it down. So we’ll do grid three. And we will add a div. And then we’re going to gap M on this. And then grid L2, probably again, and then grid M1. All right. And then let’s also put a margin top on that. Or maybe what we should do here, oh, my child needs me. So I’m going to pause for a second. And can I pause this?

0:40:37
Let’s see. And then I’ll come back. Let me see if I can pause. All right, I’m back. Do you ever have to stop. Web development. To wipe an ass. That’s my life. All right. So we are going to go margin. Oh no, okay. What I was thinking is. Oh, Matt Breff and running up the stairs. We need probably to make this custom. Because we’re going to be using this again and again and again.

0:41:13
So let’s delete that. Let’s go div. Let’s go process. R process. Now let’s just do process. Here we go. All right. Let’s go with grid. Let’s go with 100%. Let’s immediately take off that minimum width from cells. Because I hate it. Let’s go three columns. Let’s drop a div in there so we can kind of see what’s going on here. And then we’re going to go var space M. We’re going to go var space M on this gap as well.

0:41:55
We are going to stretch. Stretch. Okay. And we’re going to go margin. Top. Actually, I’m not going to. I’m not going to put a fixed margin on it at all. Because what I can do is just wherever I’m using it, I can figure out how much spacing is needed and then just add a top class to it like that. But I’m not going to attach it to our actual custom class. All right. Cool. Let’s center these things here. And I actually made. Yeah.

0:42:33
Let’s just center all like we did before. All right. Let’s see our example. So it’s going to be text heading text. So text heading text. And then this is going to be a process card. Like that. And then a process card is going to have everything aligned to the left with typography to the left. And then we’re going to have that be 01. So this text right here is going to be the step number. This is going to be an h3 or even an h4 or probably an h3. This is going to be Lorm Ipsum for right now. All right. Cool. Let’s give them class names.

0:43:34
So process card number step. Now we’ll just do number plain languages better. All right. Process card heading. And process card text. Okay. Step one is going to say free expert project quote. This is just Lorm which I believe we can go. Font size. Var text s. And then we will margin top that. And margin top this. Var space m. This is going to get a line height of one. And then it’s going to get a giant font size.

0:44:45
Var text. XL. And it needs to be even more than that. So calc var text xl times two. Okay. Fairly close. Why does it look like a different font? What font is that? Do I have a, what is this? No. Here’s however if I inspect. Where’s fonts? Fonds. All right. Cabin.

0:45:23
Okay. Is cabin the heading font? I was using sin for everything. It’s going to manage settings. Global styles fonts. Cabin. For headings. Yeah. That looks better. Okay. But that needs a font typography font family of cabin now. Okay. Now we’re getting there. All right. This is also going to get a color of primary.

0:45:55
It’s also going to get a font weight of like 800. All right. And then this can be not so much spaced out. All right. I think we’re looking pretty, pretty good. This is going to get a new custom class. So this is going to be process, there’s going to be a process forward, which are these forward arrows. And then a process complete. Or just process step and process complete. All right. So process step. And that’s going to get an after font awesome.com. Arrow right. And let’s choose a good.

0:46:52
I think it’s this one is the one we use, but this one’s cool. But that’s a pro. No, we don’t have pro. All right. So start using this icon class. Yeah. We don’t want that. We want this right here. Copy it. I don’t think. Let’s see. Yeah. All right. Process step. Custom CSS font family.

0:47:22
Font awesome. Yeah, because it’s not we have to do. Where do we install it? First of all, let me sign in. I think I have an account. Now maybe I don’t. All right. Well, it’s great an account. Let’s do this together. Kevin at digital gravy.co. Send me the kick out. Oh, sorry, I’ve been taken. Okay. Well, maybe I do have an account. Kevin at digital gravy.co. Try again.

0:47:59
Oh gosh, killing me. Okay, I forgot. I’m sorry. Things we do. Okay. Font awesome. Click. Great. My inner button is not working. It’s like forcing me to click it. Okay. No thanks. All right. Add. Now copy the kick code.

0:48:43
See, I hate doing this just for, I guess I can load it on specific pages. But all right, let’s go to script organizer. Add new code block. This is going to be in the, I believe in the footer. Font awesome. Where does it say to add it? Oh, in the head. There we go. All right. So in the header. I’m going to drop that in. And that’s all we need to do. So we’re going to hit publish. Okay. Save all of our work.

0:49:16
We don’t want to lose anything. And then it’s going to, what font family do we have to use? How to use. Font awesome. Okay. That’s not really telling me how to use it. Is it? All right. Close that. Close that. Refresh the builder. Because I think it’s like, I’m trying to figure out what family is, what the family is called. It’s like font awesome free five sometimes. And like, I don’t know. Yeah.

0:50:04
Latest version five web font icons. Right. Long arrow. Right. There’s a Unicode glyph. I wonder if we can just use that. All right. We’re down here. Oh, there it is. It worked. Look at that. Custom CSS. I got to be in the book in the after. Well, that worked. That doesn’t that did.

0:50:47
Okay. I guess I, I chose wisely. All right. But our after needs to be a different color. So we’re going to go typography. Var base ultra light. All right. Might go with light. No, definitely not light. Ultra light. I wonder if we can do primary ultra light. What that would look like. Maybe we’ll just do that primary ultra light. All right. So.

0:51:19
Our after also needs margin left. Let’s do that in in rim. One rim. Okay. Yeah. That works out pretty well, doesn’t it? So now we’ll go to three, four, five. All right. And stretch center. Yeah. That’s not going to do it. So we’ll figure that out or just leave it like this. Doesn’t it. It’s not going to look bad. This needs to be two.

0:51:56
Oh, two. This needs to be three. I don’t know why that just happened here. Oh, there’s a blank character in there. All right. This is going to be four. This is going to be five. And this actually needs to change. So this is going to be process step. Complete. Let me add process step back on there. So that we can copy process step to process step complete. And then we will just take process step complete. And we will change it to go to the after and change that to a new code. Or whatever a check mark is.

0:52:55
We can use this one. We can use a circle. Let’s see what a circle ends up looking like. I don’t think this is going to look that great, but. We’ll see. Yeah. Not so not so keen on that one. Let’s just do. Let’s just do the simple one and move on with our life. Okay. Okay. Okay. Okay. Okay. All right.

0:53:36
Pretty decent. All right. What we’re going to do here is insert some text. We’re going to do our process accent lined. Great. Text base. Make sure all of our text is base color in that section. All right. What else we got? Oh, we’ve got this little blurb down here that has to be thrown in as well. So we’ll go add text. Boom. Margin top it. L. Text L it.

0:54:25
With. Probably. Probably L. Actually, it’s. We’ll do XO. If I can select it properly. I’ll just do the project as quick and painless as possible from the estimate all the way through quality inspection. All right. It can be actually M because this is all S text. So I think that’s going to have enough hierarchy there. And then we can probably get away with with L on that. Gosh, I was hoping it would be like just a little bit, a little bit bigger. All right. You can always, you don’t have to use the system. You know, like you can abandon ship here.

0:55:18
Just do a max width, ram of like, you know, whatever you need to like dial it in. Like that. All right. And then I think some of it was bolded. Maybe a hundred percent committed. Well, that’s fantastic that brings up my bookmarks. All right. Let’s not do that. Oh, I guess. All right. I feel like this maybe needs more. Gapage. Okay. This whole section. Everything’s a little tight.

0:55:55
That’s a little bit better. Okay. What does this look like on mobile? Still three there. Everything fits fairly well. I mean, I haven’t done anything with the mobile spacing yet. I think we can do that. I think that’s not going to be too much of an issue. We’ll do at the M break point. Let’s see if we can go to two here. So column count to. It’s getting a little, it’s getting a little iffy. But we’ll go with it. So here we’re going to go grid one. And we should be good.

0:56:41
Okay. All right. I’m good with that for now. We can come back and make tweaks. We’re just doing general infrastructure. All right. Let’s tackle this card now in this section. So I’m going to add in. Well, we already have another section. We’re going to add a div in it. This is going to be the Y us card. Which we can just do Y, Y us. Or really just Y. I will do Y card. How about that?

0:57:11
So I’m going to manage selectors. I’m going to delete that selector we just made. So we don’t add any confusion into our database. And we’re just going to call this a Y card. All right. Our Y card is going to be 100% wide. And it’s going to be centered. That’s not 100% though. I don’t think. I don’t know. We’ll get to cracking on it in just a second. All right. So this is because this is another custom element that we’re going to be using again and again and again. And I want kind of full control over. We are going to make a custom grid, which is also going to have a nested grid in it.

0:57:54
So this is fun. All right. So we’re going to hit grid here. Column count is five again. Minimum with the zero. Gap is going to be, let’s look at that structure. Yes. We do need a gap. So that gap is going to be var space M. Gap is going to be var space M here. All right. Column span. First of all, let’s put an image in there. Oh god. It’s going to do this to me again.

0:58:33
Why? Why is it doing this to me? Oh, it’s because of the. Okay. I know. I know why it’s doing that. Never mind. We’re going to be okay. All right. Don’t need that. I need my reference. Okay. And then this is going to be an inner. So it’s going to be a div over there. So now we’ll add a div.

0:58:59
And then here’s our child right here. So our first one is going to span two. Our second one is going to span three. That’s going to be a total of five. And we are going to browse for a large, a tall photo. But it is, there is something wrong with it. It should not be doing that. There is definitely something wrong with it. And it’s not a men with issue. It should not be stretching like that. That’s, that is totally out of control. I may have to submit this as a bug. Because, oh wait, there it goes. Just snapped into play. All right.

0:59:57
What changed it? Oh, this vertical item alignment. It’s not letting me select it anymore. There it goes. Okay. That does not seem like that should be a thing. It seems odd. Anyway, we are going to keep moving along. So this is Y card inner. This is Y card image. Y card image is going to get a border radius. And then this is going to get this Y card inner is going to get padding. Oh, let me see if these align. Okay. It doesn’t.

1:00:43
So, well, yeah, I want it to align with the top of the image probably. Maybe not. It may not have to. Maybe it’ll add a little extra. I don’t have a word. I was going to say dynamism. Like dynamic. Make it more dynamic. Dynamism. It’s a word now, bitches. Okay. So, let’s go to. Y us. So we need text heading text text text. Text heading text text.

1:01:12
Okay. And then we need a div. Okay, cool. Yeah. We need to name that thing too. So that’s like Y card talking points. So Y card talking points. That’s going to be a thing. So, we need to name that thing too. So that’s like Y card talking points. That’s going to be its own grid of three. No minimum with. Var space M. Var space M here. Even though we’re not going to need.

1:01:57
Probably not ever going to need. Other rows. But that’s okay. Size and spacing margin top. Var space. M. Why is that? Why did that do absolutely nothing? Okay. Forget that on a minute. I do auto. Well, that’s just not behaving at all. Is it? Okay. That should be fun. Grid 100%.

1:02:35
Okay. I’m feeling like this is a builder collapse issue here. We’re going to refresh and see if when we come back, it starts behaving itself. Okay. Thankfully the load time is so greatly improved. Come on. Do you see this? My radius has gone off of my image. It’s just like lost some stuff that I was doing. Okay. Var space M. Oh, that’s still not behaving. Y card image borders. It’s got the radius on there.

1:03:20
And I don’t even see it. Let me save and go to the front end. It’s not putting a radius on there. Inspect. Bar text M. Y card. It’s like it’s not even a fly. I don’t even see it. There’s the there’s a border style. None. It’s like it’s not even there. It’s like the builder’s not even putting it on there. I feel like this project is, I’m feeling like it’s cursed. I’ve never had 3.9 is just, I don’t know what to say. All right.

1:04:19
So text and heading. What customers are saying. All right. And we’ll just center all. We need to add a repeater. This repeater is going to be reviews. And then size and spacing margin top. Var space L. Now that’s not working either. Okay. There’s something else going on on this page that is blocking. I don’t know if there’s an error. If I threw a wrong variable in somewhere. I’m going to have to debug and try to figure this out. But at this point.

1:05:18
It’s odd, right? Because. The margin bottoms are still working. Like that margin exists. I just can’t put a margin on this. And I’m guessing I can’t. Yeah. I couldn’t put the margin top on this. All right. What’s the next section? C-R work, Fence installation project gallery. Let’s just do some easy stuff while we’re going here. Okay. I didn’t want to duplicate that there. I want to duplicate it down here. All right.

1:05:59
Center all. The gallery. I’m not sure how I’m going to do this yet. But we’re just going to put in the heading and stuff. So C-R work. All right. And then Fence installation Q&A is after that. So I’m going to duplicate this section. Okay. Great. What if I put margin bottom on this? Does that work? So custom class. No, I’m not going to do that. I don’t want to mess with it.

1:06:49
All right. I’m going to pause here. I’m going to have to investigate and see what’s going on. But we’ll be back. Try again.