Peachtree Fence Part 07: Why Us, Reviews CPT, Dynamic FAQ Accordion, Process Flex Adjustment

0:00:00
All right everybody welcome back we are going to try and finish the service page template today. Let’s take a look at what we’ve got so far. I’m going to pull that fence installation page up. So here’s what we’re looking like so far. Just kind of have been working on the general structure of everything. And the reason I’m going to fix this section as well. We’re going to switch to flex using flex box on this instead of grid so that we can get the centered better. But the reason I’ve been spending so much time on this page is because it pretty much is the foundation for so much of what we’re going to do going forwards if you think about it right like this Y us section that’s going to be used on a bunch of different pages. Let me just refresh like all of these pages right here split rail fence aluminum fence installation wire all these are eventually going to be sub pages. So they’re all going to use this header template right here from this service page header template. And then they’re also going to use components from this page. And so getting everything right on this one page makes all of those other pages that are eventually going to be created super easy and simple and really fast. So it’s you know it takes a while to build this first page. But at the same time you’re building components that are used in so many different places. So it’s going to make other areas of the site a lot easier to build. Here’s another example fence installation project gallery allow the work that we can that we’re going to do there is going to be used on the project latest projects page for example.

0:01:40
The Q and A that’s going to be used throughout the site the reviews area that’s going to be used throughout the site and then there’s also a reviews page where we can use that component on so we’re building these like modular components. And yeah we’re doing a lot of custom classes we’re making sure it’s future proof or we’re spending the extra time to do it right. Because these things are going to be used throughout the site and because it’s going to make the rest of the site easier and faster to build. That’s kind of the thing when you’re doing everything right and you’re using custom classes. It takes longer in the beginning but as the site starts to come together it gets faster and faster and faster to actually get it done. So anyway just wanted to make sure everybody was on the same page with that so I left off at the Y us section which is trying to recreate this and the reason being was we were having issues with variables not working and I found out I did some debugging at some point along the way when I was putting in padding on this inner content this Y card inner I put these bars but I didn’t put any like it was like this basically it was a dad bar double dad. And then nothing and that was in all the boxes and that will absolutely break things so once I put space in a real variable in there everything started working again so that wasn’t an oxygen problem it was a it was a me problem. Anyway we’re going to continue moving on now so we’ve got Y card lead that is going to be bar text L. And bar text L is a is a little large so we’re going to have to do some more dialing in of our font sizes here this is the Y card heading H3. Okay and then Y card lead and then this is Y card body. So Y card body is going to get bar space S probably so top margin there and then we’ve got this little grid and this is called Y card talking points column count three. Okay looks like I already started to do some stuff there so we’re going to pop this div in here and this is going to be a Y card. Double underscore talking point and we’re going to have a number so text and text so we’re going to do text and text. Alright this is going to be a 30 and this is going to be called Y card talking point stat like that. Alright and we’re going to var primary this so it’s our primary color and then font size is going to be probably another calc here well let’s try var text XL first yes not quite big enough so calc times 1.5 and let’s see how big that gets calc oh I put cackel calc alright that’s pretty close we need to go to typography line height 1 get that under control font weights going to be 800 on that.

0:05:00
And maybe we can do like 1.78 let’s do 1.8 alright and then this underneath Y card Y card talking point talking point will just do talking point text okay just like that. Alright this is going to be var text s great and that says your warranty 30 year warranty like that and are these left aligned it looks like they are left aligned alright so I’m just going to go duplicate duplicate and 20 years of experience. And then the last one is 60 plus 5 star reviews which is probably more at this point but 5 star reviews and I’ll probably why don’t we change the font weight on that as well there you go. Okay next thing we’re going to do is going to add a big box shadow to that so I’m going to go to brum.af and oh did he yes we shadow okay shadows that brum.af that’s what it is. Alright I actually kind of like that like default shadow they they’re providing so Y card custom CSS we just drop that in we’re going to get that nice deep box shadow there and then on Y card here I’m going to borders radius var radius m. And that shadow unfortunately you know we’re losing this top section unless I you know try a background color on here like var base ultra light and that base ultra light color needs that’s terrible that base ultra light color needs to be toned down a bit it actually might be okay once we tone it down. Alright I’m actually going to take away the gap on this grid. So we have no gap. And we are going to just add more padding here so this inner instead of m is going to get like XL XL a little big we’ll do L. That’s probably that’s probably better let’s save this for a second and let’s just try to tone down those colors so let me check out our page here come down because I didn’t like how it was here as well so I’m going to go into admin. We’re just going to quickly make a little adjustment here we’re going to go to automatic CSS we’re going to go to shades we’re going to go to base ultra light is that one let’s try something like 97% and safe. You see that gets lighter and then we come down that’s getting there I almost want to go to 98 I wonder if I can do 97.5 base ultra light 97.5. Save changes that oh that’s like almost perfect I don’t know if I’m liking it there it’s one of those things I’m going to have to to look at we also need to look at when I say look at I mean like multiple times. All right layout we’re going to have to go to yeah okay I got you layout overflow hidden and I select it there you go save that should still get me rounded corners on our image because right now the round of corners missing from this left hand side. And now it’s there okay let’s throw an image in here so we’re not just using this placeholder this is our other placeholder for now it’s our vertical placeholder.

0:09:34
All right yeah I still don’t think it’s actually I don’t know it could be good right let’s check it out okay all right yeah I’m just going to it’s going to have to continue marinating for me all right let’s take a look at what we’re trying to create here they actually in the original. There was border around the image which one do we like better do we like it when it’s just like full edge to edge or do we like it better when it’s boxed in like that I’m not real sure. Okay let’s try to do this diamond thing behind there so this is going to get I’m not going to put an image in there quite yet or just do base be gee base. And then pretty sure this was just done with section dividers or shape dividers so we do something like that on the bottom and if you look at it it’s this like it’s this like angled piece. So let’s do there’s an angle right there yeah it’s like one of these and the color is just the color of the outside the above and below so varsite white. And Z index minus one now can’t do that we’re going to have to Z index the Y card layout Z index one there you go. Oh it’s deleted some padding on accident okay and then we’re going to add another shape divider this shape divider is going to be attached to the top position top and angle probably the same angle. Varshade white. Let’s do this in rim 40 60 and then where’s our structure panel here. Here’s the other shape divider let’s do rim 60 there as well and with 200 150 135 and then on this one 135 with that moves it over there center horizontally there you go and then on this one center horizontally there we go. Let’s kind of look at what we’ve okay so I wonder if we also took away padding in that container. Yeah most likely but actually maybe not because well let’s just inspect it we have it available to us let’s see. Okay so let’s have background yep yep okay with 100% look in here here’s a shape divider oxy shape divider okay there’s that. Padding top padding bottom it still did have padding in it. Alright yeah we’re going to change this box shadow up a little bit I may have chosen the wrong angles let’s see what angle three does.

0:13:34
So flip horizontally it’s not really going to help me any. Alright let’s not do angle three what’s angle one do. No definitely not angle one it’s angle two for sure. Alright 60 rim 135 center horizontally if I take off the center horizontally. Oh you know what maybe I should flip one of them there we go now we’re now we’re getting there. Similar maybe they were just taller 80 rim 70 rim 70 rim here there you go. Alright let’s go back to here and let’s go layers of shadows final transparency final vertical distance let’s tighten that up horizontal distance. Let’s do 20 on that do 20 on that final transparency bring that down a little bit so it’s a little bit softer. Do 80 maybe we can even reduce the spread just a little bit. Let’s try that. Why card custom CSS replace save and let’s just take a look at what we’ve got. Okay pretty decent I’m thinking that I don’t know we’re kind of disappearing up here. We can dial this in later I don’t want to spend too much time on it we’re getting super close. My phone alarm is going off okay. Alright let’s go back in here heading Y card heading typography this needs to be var text L. It’s saying that this is L text and that’s L text and I’m not believing it.

0:16:09
We’re going to make that XL. Typography var text L yeah okay sure. Alright save let’s move along to reviews we’re going to come back to this in just a minute and actually right now what I think I’m going to do. Oh my gosh dude oxygen with this like you touch that kind of like padding up there and it just clears it out. It’s not that div it’s the main thing background far based ultra light let’s just take that out. Varshade white stick with white on that. It’s going to be safer it’s going to be the safer thing to do. And then we can still adjust the box shadow to make sure that we’re not getting any blending happening up there. I think that’s that’s the way to go I don’t know you guys need to tell me do you like this angled kind of background sectiony type thing or should we do something more traditional does it look out of place in the flow. You tell me I don’t know one of those design I’m pretty sure some people are going to like it and some people are not going to like it. All right reviews from Fence installation customers what do we put here so just a div oh we’ve got a repeater already okay. So let’s do this let’s hop out and let’s go to reviews and all right so we have no reviews so we’re going to do this guy Kyle Hertzill. There you go publish publish and we need to make some custom fields don’t we so we’re going to go to met a box custom fields. And we’re going to add new and this is going to be called review. And we’re going to add some fields so this is going to be text if you look at what are our example here we’re going to need a I call this a call out so there’s a call out the review body.

0:18:29
The name the title and the review location or publication we’ll say publication all right so. Call out body name title publication so we’re going to go name and now we’ll just use we’ll just use the post type for the name so call out. Type is text that’s fine another text this will be a text area actually and this will be the review body. And then we will have another text this will be the type reviewer title something like that review body this will be review call out so we can have them all say review just so we can in the back end we know what’s going on. All right add text this is going to be the publication but I’m thinking if we want to do this as a drop down almost because there’s going to be a limited number of publications and we can just select the one that it came from I suppose. Let’s try that we’ll get a little fancy just for you know I don’t always do this but what is it let’s call us select right. Select our choices are going to be house Google Yelp sure critic maybe I don’t know I’ll ask them more of you know what platforms that they’re on Google Yelp. Like you know you could get people to email you reviews and things like that but it doesn’t carry as much weight so we try to only do publicly available publications for reviews so house Google yeah we’ll just start with those three we just need to prove this is a concept anyway so this is going to be review will do review source. All right let’s go ahead and update that and now we have to open one of our reviews. Okay there he is and what we also want to do on this page is try to get rid of this other we didn’t assign it did we it helps a view assign it so review settings post type is and we need to make sure that this is attached to the reviews. Toggle rules conditional logic position priority style. Let’s do seamless collapse by default no time style default save custom see I’m still you know getting super familiar with metabox and how all this stuff works. What I also want to do is now go to the post type that we created because we can do some customization there so we’re going to go to review advanced supports so editor we can take away we don’t want people using the editor when they’re doing a review because that’ll get confusing we’re not pulling information from the editor so we shouldn’t give them access to the editor we should not give them access to a thumbnail either if you look on here we’re not putting we’re not including photos for these reviews. And so we’re going to hit update and then the other thing we can do is go to oxygen settings this is going to make this super clean for the client or even just for our team right so there’s not stuff from you know getting in the way so on reviews we’re going to hide the oxygen metabox and safe we don’t need that either. So now if I edit review and I refresh there you go like we’re just we have rank math in which we don’t even need and then we’re going to just fill in these fields basically so we have review call out review body review or title and review source.

0:22:37
All right so his call out was this let’s close that now we don’t need it and his review body was this and then his title is a homeowner and then his review is from house so we’re going to hit update and now we can refresh our builder I’m going to save first make sure we don’t lose any work will refresh. All right so now we’re going to come down to our review repeater and I’ll open the structure panel again we’re going to go to query advanced edit we’re going to query the post type of reviews we’re going to go posts per page that’s going to be. If I can add a value please six no found rows equals true and we’ll chill with that for right now so now I’m going to apply query parameters it should only we should only have one review so you’re not going to see much here but I am going to reviews grid layout enable grid three columns. Zero minimum with gap bar space M gap here bar space M. Okay and probably at nine nine two we’ll take a look at this in a minute I’m going to add some more and we’ll actually dial that in on mobile okay so the image in our repeater. I don’t need to make a I don’t need to make another div because we’re not going to make these clickable or linkable so I’m going to put in an image here actually we’re not going to do an image we’re going to do just straight up icons so we’re going to do a div. That’s going to be here let me grab that first div let’s back up this is going to be a review card and then this is going to be a review card. Double underscore stars wrapper and then I can put an icon in there now the stars wrapper and we don’t need to test that right now here’s here’s this review card star review star we’ll do that review card star let’s just shorten it review card star everybody knows what we’re talking about right. Bar primary and icon size probably 32 and star. Okay if any other libraries is a linear icon star better is a box some well I don’t want I don’t want to use that. I don’t know if I’m going to install uninstall it at some point or I don’t know so let’s not use it all right. About the right size 12345 12345 okay so the wrapper the stars wrapper that just needs to be set to horizontal flex and we’re going to line the middle even though they’re all the same size that shouldn’t really matter. The star will just get a margin right so we will do margin right of 0.5m 0.2m yeah 0.2m and then the last of type will get zero perfect. Okay let’s grab our review card here and you know let’s oh we can’t name the default div inside of there that’s interesting. All right so I’m going to name this one we’re going to do stars I’m probably going to start naming stuff more now that we’re getting further into dev things are getting more solidified.

0:26:55
All right so now we need to call out and oh in our div we need to be vertical left aligned and then we need to be typography left as well can I select it thank you. All right so that’s going to be our call out we’re going to duplicate that that’s going to be our body we’re going to duplicate that text text we need three more really so come here 123. Good perfection all right so we will just let’s just insert data from this point so we’re going to go metabox field and then review call out insert we’re going to select this one. If I can get it this is going to be our body insert data metabox review card body click out let it populate click this one insert data this is just going to be the post title which is the person’s name. Okay next is their title so we’re going to insert metabox fields review or title next is the publication so what we need to do is verified and then insert publication name review. So metabox fields review source return value or label label okay. There it is all right but now we click and then before the short code verified and then after the short code review. There you go all right so this stars wrapper is nothing needs to happen there the call out needs to get font weight 600 let’s try and then it’s going to get margin top of bar space s and then this is going to get. Who did I not give these oh what am I doing okay back it up a little bit back it up Terry why can I reset the reset wheels are not working. I click both of them oh gosh oh boy oh god oh geez all right save that’s always you never want to see those you never want to see red boxes when you’re working in oxygen. Okay let’s hopefully we still have what we just did. Oxygen is getting to be honestly it’s like getting to be like the old Microsoft word you just save every every like two minutes just hit the save button. Okay whoo there’s still there all right so I need to give these things classes I didn’t almost screwed that up all right so review card. Double underscore call out review card body then we’re going to do review card name and then we’re going to do review card title and then we’re going to do review card source. Now we’re ready to rock and roll okay so margin top bar space s and oh gosh we’re running into more bars did I break something again or did something break in my.

0:30:45
I didn’t even use a variable in here so that shouldn’t matter. Yeah I only used on the star I used in there’s a bar primary I used but it’s done correctly point to him that was no problem. Size and spacing review card body can I do anything here yeah that works okay so what’s going on here. I’m going to do M5 does not want to let me put margin on the top of that can I do this one spacing margin top none here everything else is working spacing. Okay but that doesn’t need to be at S that actually and then this name typography a lot of this needs to be adjusted with line height. Typeography line height one and then source typography line height one these I can probably do with M’s so let’s take this out and let’s do like 0.25m. 0.4m and then here here this can definitely be a bar so margin top there you go so that those little tighter and then this one’s further away. All right not sure what’s going on there let’s put margin bottom on the bottom of this just to see if we can. Okay I just I’m sometimes I’m baffled all right typography font weight 600 this needs to be VAR text S. Okay we still need to adjust our S text size we haven’t done that yet. Let’s see what else we’ve got all right homeowner needs to be VAR text S typography. And then this needs to be definitely VAR text S as well if I can go to the typography tab and it also needs to be like much lighter and then this is BG base ultra light. And then this is going to be let’s try a text shade here so VAR base light it’s going to be too much medium we actually do medium there kind of it so it kind of stands out a little bit. Kind of calls attention to it’s like a verified public review you know we could add a little opacity at this point why we don’t want to do it with a utility class we’ll just go to effects opacity 0.75. 0.6575 that needs to be tested for accessibility at some point. All right I think we’re pretty good here these stars are a little big for my taste.

0:34:19
There we go okay and then they’re not white backgrounds or anything like that they’re just chilling so we’re going to hit save check us out on the front end. I was looking broken so I’m not thinking we’re missing a variable anywhere like we were okay. What I want to do at this point is go in and fix this text S because I’ve been using it a lot of places and it’s way too small. I’m going to typeography and then down to overrides and we’re going to go to override text S on desktop and mobile. I’m thinking I want it to be like 13 on mobile and like 15 not 15 rim sorry 1.5 and 1.3. I was thinking I was thinking in pixels 15 pixels and 15 pixels so in rim that’s 1.3 and 1.5. I was going to hit save so we’re just overriding the S text size. And there we go now we have now now we’re looking good okay so this can get access on it. I’m going to typeography line height 1.25 actually this could be at 1.4 or 1.5. I’m liking it I’m liking it it’s getting to where we want it to be. Check it out on here. Down. That’s better. I think we can push the these two things away from each other a little bit more. So here maybe we go to him.

0:36:09
Just give a little bit more breathing room between the body of the review and then who who published it. That’s better I think okay. I’m not sure about this color though because it’s almost to me looking like a link it’s it’s got that link color vibe doesn’t it? So I’m going to take away text color based medium. Let’s do shade shade dark. Now first of all let’s select this review card typeography var base everything for text. And then we’ll just use the opacity on this so effects opacity. Yeah 0.5. And then let’s maybe make that uppercase. There you go. I think that’s what the other one was yeah. Alright let’s take a look. I think I’m good I think I’m good with that. Okay homeowner. Let’s put a little dash before homeowner.

0:37:36
Like an m dash. Just to kind of make it add some like you know a little add a little to the structure of this. There you go. Did we bold the name yeah we did bold the person’s name. Alright so let’s go to font weight 600. Save. And I think we can push that it does still feel a little close. Save. Alright just doing like minor tweaks now. Really not super important to do at this point of the game because all these are custom classes. I just don’t adjust them anytime I want and they’re going to adjust everywhere. Alright so let’s go to reviews. Let’s just pop the other three in there so we at least have you know an even number of reviews. So this is the call out for the next one. This is the body for the next one.

0:38:35
This is the okay homeowner. It’s either going to be a homeowner or a business owner you know or CEO or something like that. We could even make it maybe default homeowner I’m not sure. Think about that later. Alright top notch fence company. I didn’t give that due to name did I. Hey Mike C. Alright update. Alright go back to reviews. Check it out. Alright did it properly even though I didn’t give it a name initially. Next one call out body title homeowner. And name hey that’s me because they did my fence. Alright publish. Okay.

0:39:33
Yeah nice. Okay and now that’s going to make it well I see an issue and see how when one reviews longer than another we kind of get a floating floating people. So what I’m going to do is on the name here instead of doing all of that space that’s actually going to be auto. And then we’re going to go on the body and put that on the bottom. Now we shouldn’t have that floating issue especially if I give the review card a flex of one. And I do need to add stretch to the grid probably still. Nope there we go it’s already there. So see now how even if this review short it’s just going to push all so these things are always lined up the person’s name is always lined up these things are always lined up down here. And there’s you just get a gap on the inside of the card which typically looks a lot cleaner than when a card is shorter than the other cards. Just a little tip. Alright so we will eventually add we’re going to add more reviews and then we’re going to add a Ajax load more but that’s going to be later on. We’re going to do that right now. Alright so fence installation project gallery let’s do the Q&A that’s going to be a little bit easier it’s going to be kind of like what we just did. So the first thing I’m going to do is go to Metabox and custom fields we’re going to add new and we’re going to call this FAQ. And then we’re going to add and do we have here’s our example.

0:41:14
So these were done in toggles which we don’t want to do we want to do these in probably an accordion. And I don’t like the way that they’re offset like this we’re going to we’re probably just going to center them. But we just need the functionality for right now we’re not going to worry too much about how they’re styled. But basically you have the question and you have the answer there’s not a lot to this. So we’re going to go text. Alright this is going to be the question FAQ question and then add field and this is going to be a text area or what do we don’t we have like a advanced yeah the wizzy wig editor is going to be called FAQ answer. Okay and then on this I think we have some options editor options. Oh no that’s not what we want required clonable columns advanced before after. Okay well an ACF you can choose the type of wizzy wig editor where it’s like a simple one or the full one. I guess that’s not an option here. Alright so we have that done we’re going to go over to FAQs and let’s just grab how much does offense cost right. So add new and we need to do somewhat of the same things that we did earlier when we were customizing. Where we let’s go back yeah leave. We go to metabox post types and we go to FAQ and we go to advanced or supports and we take away the editor and we take away the thumbnail.

0:42:58
So we don’t need those and then we go to oxygen settings and we go to client control and we go to FAQs and we hide the oxygen box on FAQs. Now when we go to FAQs we hit add new. Oh well we did the same mistake we did earlier so let’s go to metabox and go to custom fields we never assigned them. So we’re going to go settings post type. I’m forgetting in metabox because in ACF it’s all on one page and it’s sitting right there like in your face to remind you but in this one it’s in this tab in the settings tab. So it’s kind of like a little bit hidden away and I keep forgetting so FAQs update. Alright now we go to add new FAQ and we have our fields. So this is going to be how much does a fence cost. Let’s just simplify this. Let’s just simplify this. Let’s go back to custom fields. Let’s just get rid of the question. The question can be the title of the thing. So I’m going to open this. We don’t even need that first field. So FAQ question can go bye bye. We’ll just have the FAQ answer. We could have used the Gutenberg editor as well but I find that the clients get confused by the Gutenberg editor because it’s like so minimalist and then they’re like how do I add a link? How do I do this? How do I do that? And not that he’s going to be editing this site like we’re going to be managing this entire site but it’s still I feel like it’s just easier to give them that like traditional kind of like Microsoft Word text box where there’s like bold buttons and all that stuff. You know, stuff that they’re used to seeing Gutenberg’s a little they went like ultra minimalist on it and it’s confusing to some people. All right, so we’re good there. I think now we can actually go add an FAQ. So how much does a fence cost and this is actually. So this is interesting. This is not a wizzy wigg editor and I actually can’t type in it. It’s like white text. What is going on? Is this a meta box? Is this a meta box problem guys? Or something else going on? That is not a wizzy wigg editor. 100%.

0:45:19
Okay, let’s go to meta box custom fields. I guess we’re not going to be using a wizzy wigg editor. All right. Let’s just use a text area update FAQs. What’s this offense cost? There’s our answer. Okay, right now we’re just going to use lorum and we’ll use a good bit here. Update. Okay. Now we need to make sure we’re saved and we can refresh. Now we’re just going to do the same thing. We’re going to build a repeater. We’re going to query the FAQs, but we’re going to query them into a not a toggle, but an accordion. And I think we have to do this with oxy extras. They’re kind of advanced accordion or whatever it’s called. So down here in fence installation, let’s see if I have it first of all. So extras. Oh, I need to turn some of these off. We don’t we don’t we’re not using all these contents reading time. I was pretty sure that they had one. Let’s pop back out to the admin. Let’s go to settings. No, oxygen. Oxy extras. I don’t know. Dynamic tabs. I forgot even what it’s called preloader pro accordion right there. Why didn’t I see it? Pro accordion. There it is. Yeah, that’s what it looks like. Okay, this is going to be called FAQ. Well, let’s look at the structure panel for a second. I’m going to try to remember how this works because you do accordion type individual items, dynamic items met a box. You have to first put the accordion in a repeater, I believe. So we’re going to add a repeater. Or do you? Yeah, you do repeater. And you put the pro accordion in that diff. God. Let’s just do this query first. Make sure we’re make sure we’re on the right track. Now, I don’t I don’t want that. No, I don’t want that at all. All right, ediquiri. Post type FAQs add parameter. Post per page. Let’s do. Let’s do eight.

0:48:27
And no found rows equals true. Okay, rock and roll with that for a second. Apply. That’s too many. We only need one. Automatic. We’re going to look at this for a second. Automatic CSS.com. All right, pages, all pages. Where’s where’s my homepage? Just go to the homepage. Edit page. Let’s take a look at how I did this on here because I this the way this accordion works. It doesn’t it. If I remember correctly, it’s the pro accordion. It doesn’t query like you expected to. You’ve got to do something else. Let’s look down here. Look at the structure. So it is a repeater div and then the pro accordion and the pro accordion is set to an individual item. It’s not set to dynamic items metabox like you think it would be. All right, so we’re going to leave that open just in case I need it again. So we’re going to set this to individual item. That’s that’s correct. Yeah, okay, that makes sense now. So let’s apply parameters. There you go. Now we also have to dynamic data header text. You don’t like double click in there to insert stuff. So this is going to be just the post title, which is the question. Apply parameters. There we go. And then the text. I thought with the pro accordion there was a text. Okay, accordion content. No. I thought there was actually a text box you could edit dynamic data. It’s not subtext. Oh, you add elements inside. That’s I always think this is placeholder text as I see the lorem if some, but there’s an instruction right in front of it. It’s add elements inside. That’s right. I was forgetting. Okay, so you add a text box and it puts it inside the accordion. There you go. And then that is the text box. You can actually double click to edit to insert data. And then we insert the review. Or not, not the review. The FAQ answer insert. Okay. And that did not insert an FAQ answer. Did it. Save. See what happened on the front end. It did, but not in the builder. Okay, text. So this is going to be FAQ item. And then this is going to be FAQ item text. Or we’ll do answer. And unfortunately, we can’t do like the heading class because I mean, we don’t really need to because we have FAQ item and we can control everything from here. So that’s fine. Let’s do FAQ item. We’re not going to put a margin top on that. We’re going to do margin bottom on this heading, which we can just use a, come on now.

0:52:05
Now a margin bottom class of XL. Oh, that’s big. Margin bottom of L. All right. And then what I would like to do as well is probably. Okay, that’s our repeater. So that can be our FAQ repeater. And then I’m going to go size and spacing max width. And we’ll do far with L like that. Okay, now let’s style this up a little bit. How do we have them there? I don’t really like that. We’re going to go with base ultra lighter base light. So if I can remember where everything is in the menus, not dynamic data, accordion header. That’s an h4 span. Okay, that’s all fine. Header colors. Var base ultra light. Let’s try light. No. Ultra light. And now that we made ultra light lighter, we probably need to make light lighter as well. I don’t need any of those like deeper colors. I like, I, and I’m kind of partial of this. I like kind of ultra light shades. I like subtlety. All right. So how much does offense cost, accordion header, header text typography. That sounds right. Var text L. That makes it bigger. M is what it was. S. We don’t need all this letter spacing, not huge fan of that. And I’m also not a huge fan really of. Yeah. Okay. Now we don’t need to be so small. Now that we’ve taken away the all caps. We don’t even need to change the font size. We’re good there. Letters facing zero. That’s better. Okay. I don’t know if we want a question mark icon. That’s called a context icon counter, I believe. We’re going to disable that. I guess we can’t disable it unless we do it at the ID level. Okay. Save. Let’s see what we’re looking like now. All right. That’s much cleaner. Right. We still need to left align our text, which I can’t see. So we’re going to go here typography left align. Save. And that should be good. I wonder if our maybe we should make this a little bit bigger. Header text typography. We’re going to have to adjust our scale again. There’s just too much variance between the sizes at the scale that we have set right now. I feel it needs to be a little bit more padding in there.

0:55:30
Did I just do that on the ID? All right. Let’s go back to header spacing, padding top, var space, M. And we can’t apply all. So we’re going to manually do this. And that’s probably way too much. So let’s go to S. That’s better. Save. And then we need to round the corners as well. Yeah, we’re getting there. We’re getting there. All right. So primary. What else do we have advanced context like on counter? We don’t need any of that. Korean header borders. There we are. Var radius. M. And we don’t need radius on anything else because there’s no background to our FAQ. It’s just going to be kind of that white default. Let’s add another FAQ and start to see how this stacks up. So what type of fence do I need? Go back to FAQs, add new. What type of fence do I need? And… Oh, geez. Hit the x on accident. All right. Same law, I’m answer. Next is… Okay. Well, there’s no other questions.

0:57:13
Let’s add new. Let’s think of one more. How big does my fence need to be? I don’t know. That’s not even a real question. Lorm, Ibsum, publish. And now we go refresh and we have three FAQs. There they are. And I’m thinking I should… That text is definitely too big. We’re going to make adjustments. Okay. I want to make space between them though. So FAQ item, accordion item, margin bottom. Is that how we do it? Save. Refresh. Yes, it is. That looks much better. So now the difference between toggles and accordion is that on this side, if you look, people open all of them. The page gets bigger and bigger and bigger and they can have all of them open. But with the accordion, they open one and then if they want to read another one, it closes that first one and opens the next one. So I like that better for sure. All right. And then this section down here, we will figure out, you know, a way to style that. But I wanted to get the functionality done. I wanted to get the functionality built in. And let’s see where we’re at on time. So we’re at another hour. And so next time we’re going to have to tackle the project’s gallery.

0:58:43
I want you guys to give me that feedback. What you think of this section. Should we burn it? Should we… Like I’m keeping this card regardless. But should we just do something different with, you know, how that section is? We could potentially float this card over this review. So it goes kind of with the reviews, which is cool because it’s like, why us? And then you’re telling people about, you know, you’re showing the reviews. That’s an option as well. So I don’t know. Just let me know what you think of that card. Oh, let’s try to address this real quick while we’re here. So we’ll get this instead of grid. We’ll get it flexed. All right. So this is our process. We’re going to take away grid. And we are going to do horizontal. And we are going to allow multi line. And what we’re probably going to do now is, did I put it with on these cards, process cards? Okay. Let’s think about this for a second. Size and spacing with, I’m just going to play for a minute here. 33%. And then we’re going to go with padding. We’re not going to need any gaps or anything like that. We’re just going to go padding all around, space, him. And then we can probably center the items. Okay. I think we’re good. I don’t think we have to do anything else. All right. Save. Let’s see how we look on the front end. This gap might be a little big here.

1:00:22
Now that we added, because what we did was we added padding to the cards. And that’s going to push the padding. The space was going to duplicate basically. So it’s actually, no, we didn’t add margin to the top of process. Oh, yeah. We added a little class here. Okay. So that can be margin top. Either m or s now. We’ll just, yeah. M looks good. All right. There’s my pay your credit card reminder. All right. So we’re going to refresh. Now, the only thing we do is we need to look at how that is looking on mobile. So let’s inspect. And let’s click the responsive tab. Okay. So there’s our process. Where did it go down here? Yeah. All right. Yeah. So we’re definitely going to have to address that. Oh, yeah. I’m going to have to address that for sure. All right. I’m actually thinking.

1:01:42
Okay. Let’s just go down to here. I actually don’t even like it there. So here we’re going to go to 50. And it kind of leaves a straggler, doesn’t it? But that’s okay. I don’t think that’s a big deal. We could now left align these because I’ve got my process vertical. No. Sorry. It’s not going to be vertical. It’s going to be horizontal. But it’s going to be horizontal item alignment is left. And now when we break down to here, these were still trying to use grids. That’s one reason we’re having trouble. All right. So 992 or horizontal 768. What is it highlighting at 768? What have we done there that like I don’t see any edits made, but it’s suggesting that there’s edits there. All right. So I’m just going to clear that out. And then at 480, we’re still trying to use a grid. We’re just going to go 100% here.

1:02:44
So really at that break point. So let’s just delete that as well. So 768 with this process card, we go 100%. All right. So here’s what we look like on desktop. 1280 is this is how we look like. And 992, this is how we look. 768, this is how we look. And it less than 480, that’s how we look. And it looks pretty good to me except for this horizontal scroll, which is caused by this. Okay. Something else to fix. Yeah. We never did our responsiveness on this grid right here. So 992. What is, okay. Let’s do this. This image needs custom CSS object fit cover. Okay. I want to click out of here. So this card needs to break not there.

1:04:08
Let me look at the break point above it. That’s fine. I like that. Here is where we need to stack this card. So let me go back. It was a grid at five columns. So at this break point, it needs to be a grid with one column. And then we need to override our child spans. That one needs to be one column. And this one needs to be one column. And then this image at this break point needs to be a max height. We can just use height because we’re not putting any content in there. So I’m going to say 20 rim 30 rim. Yeah. Something like that. Why is this still have a gap at that break point? Let me go here. Where’s that gap coming from? Because I took the gap off of here. Oh, I didn’t take it off of here. That needs to be zero. And then at 992, we still have a grid of one. And it put in, look, it put more defaults in.

1:05:18
Even though I was zero before, I’m not zero now. They got to take away those defaults. They drive me nuts. Absolutely nuts. Okay. And now at this break point, we’ve actually fixed this grid. So we need to keep looking at how this degrades. Those, see, I’m looking at type spacing now. Couldn’t see it before, but I can see it now. So typography line height needs to be one. Now we can go back and inspect that at that break point down there. That’s looking a little bit better. And now at this one, I’m thinking we should, I’m thinking we should break it there to one. Do something like that. There’s those defaults again. Var space S and Var space S.

1:06:16
Could probably get away with XS. Okay. That’s pretty good. That’s pretty good. All right. Let’s look at the whole card kind of on 480. And just make sure that we’re good all around. You accidentally click a padding in there and it takes it away. Super annoying. We’re still getting horizontal. This section should be layout. First of all, it’s relative because we have said it’s a relative anytime you have shape dividers in there. And then overflow should be set to hidden, but that should have been by default. And let’s see if we’re still having any issues. We are. Look at that.

1:07:10
Yep. It’s our reviews grid. Gosh. The mobile optimization has been escaping my mind so much when recording these tutorials. Reviews grid layout. Yes. Okay. Some so used to just snapping on utility classes and having those, you know, take care of the mobile responsiveness that when I’m using these custom grids, not so much. All right. Here we need to enable grid of two columns. And here’s our defaults again. Thank you, oxygen. Always super helpful. Space M can’t just use my settings from the first break point. And down to here is going to be one for sure. So enable grid one zero. Far space M and bar space M.

1:08:10
Okay. Now we don’t have any horizontal scrolling issues. So we’re going to use the same thing as the other one. Save. Still got more definitely more work to do on this page. But like I said, this is an important page. Make sure that that’s coming out properly. Yeah. Okay. It’s an important page, you know, like getting stuff right on this page means getting stuff right on this page. All right. No more horizontal scroll issues. We’re good. This this session went much smoother. I feel we still have typography adjustments to make. We still have some color adjustments to make. We still have a lot of details to add.

1:09:02
But we’re making good progress. Like we got good review structure down. We got FAQs that can be used across the site. Feeling good about it. It was a good productive hour and nine minutes. So let’s go with another episode. Until then, cheers.