What’s up, everybody?
Welcome back.
This is part two of the makings of a dynamic website.
Part one was published.
It went absolutely gangbusters, tons of views, tons of shares, tons of comments and great questions.
So what we’re going to do, part two, I’ve got a little agenda today, but I was going to say this was supposed to be a one and done video.
Obviously, I bit off more than I can chew.
It became two parts.
I think it’s actually going to be three to four parts by the time we’re done because a lot of great questions rolled in.
I want to make sure that we put the answers to those questions in the official series.
So we’re just going to have fun with this thing.
We’re going to keep grinding.
We’re going to put as much value in here as we possibly can.
If you haven’t subscribed to the channel yet, make sure you hit the subscribe button below.
Drop a like on the video because the video doesn’t like itself.
Let’s go ahead and dive in.
Here’s what we’re going to do in part two footer with dynamic links.
We’re going to do the legal section of the website.
We’re going to do the blog, which includes the single post template, the category template and the blog page itself.
We are going to do testimonials, which have to be related to certain areas of the website.
And then we are going to work on the service area network.
That is a lot to chew on.
That is a lot to get to in one single video, but we are going to try to make it happen.
All right, let’s hop over.
And in the interest of time, I’m not going to review everything that we already did.
If you haven’t watched part one, you haven’t watched part one.
You need to watch part one first, go watch part one, then hop into part two.
Is that just go and order?
That’s why they’re numbered.
All right, let’s just go in order.
All right, here we go.
Here we go.
We’re going to do the footer.
So let’s go to dashboard.
Let’s go to bricks templates.
The footer, of course, is a template part.
So we’re going to hit add new.
We’re going to type in footer.
We’re going to tell it that this is a footer template and we are going to go edit with bricks.
What’s the first thing you do?
You come up here to template settings, you go to conditions, you add a condition, and I want this footer to show up on the entire website.
So that’s what we’re going to set it to do.
Next thing, in the interest of time, we are just going to pull in a frames template.
So I’m going to use a nice basic one here.
We’re going to use footer Bravo, bring that in.
And there, my friends, is footer Bravo.
So we can put whatever links here that we want.
This is using proper navigation structure.
So if you build this yourself, you are going to want to make sure you use proper navigation structure down here.
This is a second navigation for the website.
But that’s pretty much it.
A lot of people would come in and just start typing in the names of links and things like that, which you can absolutely do.
For example, you can say about, and then this is going to go to the about page.
So I could say internal page, I could choose my about page, and now that links to the about page.
That is the static way to do it.
That’s the classic way that you’ll see most people do it.
And that’s fine for a lot of different, you know, random page links and things like that.
But we can, in fact, make this area of the website dynamic.
For example, you know, we have services, and we have like the behaviors of the dog, the main behaviors that we focus on with this big dog training company.
Those are two areas that really might work out very well as loops.
We can use loops here just like we’ve used them other places.
So in order to do that, I would delete the list items that I don’t need.
I’m going to take the one remaining list item in this group.
And I’m going to query loop it.
And I’m going to just come in and say, hey, this is where I want to query my services.
And what I would do is click here, get rid of the static data, and just say post title, because that’s what I want to bring in.
And look how it’s actually going to make my list for me.
Okay, now where are we going to link to?
Well, we’re going to link to the post URL.
And I’m going to go ahead and hit save.
And then we can go view this on the front end.
I’ll go back to the homepage as well.
And now we have our links in here.
They’re a little bit big on the text.
So I’m just going to go grab that class right there.
And we’re going to drop all these down to the S text size.
And there you go.
Now, the really good thing about this is that obviously my footer will just automatically stay up to date.
Now, if I add new services, they’re just going to appear here magically.
If I remove a service or put one of the service posts into draft mode, for example, well, it’s going to get removed from the footer.
So the footer is going to keep itself up to date, which is really, really, really nice.
Now, we need to do the same thing with behaviors right here.
And then we need to do the same thing with legal.
But the problem is we don’t have our custom post types set up for behaviors or legal yet.
So we’re going to go back and do that.
And this will be a good refresher from yesterday.
So if I go to post types, you’ll see I have services and team, I need to add a new one.
And we’re going to call this behaviors.
And then we’re going to call this behavior.
And I like to make the post type key plural, obviously, like we like we mentioned.
Okay, I’m going to go to advanced configuration, we’re going to go to URLs, remove that front URL prefix, we don’t have the slash blog in our URL.
And then I need to think about this, this, do I want this to have an archive page?
And I believe I do, just like we did with the services, we’re going to enable the archive page for behaviors, I’m going to go ahead and hit save.
And now we have a behaviors area right there.
By the way, I’m not going to take time to do this.
But I just wanted to let you guys know, if you go to visibility, you can actually choose an icon, you can choose a custom icon very easily.
So if you don’t like these little pins that are the default, you can choose any icon that you think matches best, I’m not going to take the time to actually look through and choose icons.
But that is very easy and possible.
If you don’t like these little default pins.
Okay, so I did that with services, I’m going to go once again to post types.
And while I’m here, I’m just going to say legal, legal.
And I’m going to say legal, that’s all fine and dandy.
Don’t need this to be hierarchical.
I do want to remove the front URL prefix.
And I don’t think I need an archive page for this situation.
So I’m just going to go ahead and hit save there.
Another thing you can do is you can actually move let’s I think it’s under visibility, you can move any of these two different areas of the admin, for example, like if you wanted legal to be stuck down here at the bottom, because it’s something you’re going to set up.
And you’re it’s like, you know, set it and forget it kind of thing.
And you don’t want it in the way because it’s not super important.
It’s not something you’re going to be updating all the time.
I just went down and I went to visibility and there’s a menu position.
And you could just go ahead and put in a number.
And if a if it’s a big enough number, it’s going to drop that baby all the way to the bottom.
So good to go there.
Now I’m going to go to legal and we’ll just put in our quick legal pages.
And I want to go to website Ipsum and just grab some this is we’re going to say that this is our legal copy right here.
I don’t recommend using Ipsum as legal copy on a real on a real website.
But, you know, for for for a fake website, it’s it’s just fine.
Let’s go ahead and say privacy policy.
Let’s drop that in.
Let’s go ahead and hit publish.
And let’s hit add new legal.
We need, of course, a disclaimer.
And we’re going to drop that in.
And then, of course, we need a terms of use.
OK, these are like the main ones you would do terms of use.
Now, I call these legal a lot of times.
You could also call them policies.
OK, like policy pages, whatever suits you.
You don’t have to call them exactly what I call them.
So terms of use, let’s publish and let’s go back.
And so now we have this legal area with our legal stuff.
And these aren’t clogging up the pages area.
They’re queryable, as you’re going to see in just a second.
If we want to query them, of course, it’s only three things you could you could just statically put them in as well.
But that is that is good to go for now.
Let’s go to behaviors.
One thing we need to do is switch back to Figma and just see what are some of the behaviors that we were going to be working with.
So aggression, potty issues, barking, running away.
OK, so let’s come in here and we’ll do aggression first.
Aggression.
I do want to set a featured image here.
I think we’ve got an image of a dog.
I don’t think that’s an aggressive dog, but it’s the best I could find in a few minutes.
Let’s add new behavior here.
Potty issues, barking, running away.
So we’ll do potty issues.
I think we have a dog peeing on something.
Let’s see.
Let’s see.
Where is our peeing dog?
Maybe I don’t.
Oh, there he is.
There he is.
We do have the peeing dog.
OK, so let’s publish that and let’s add new behavior.
Potty issues, barking and running away.
Barking.
My short term memory is absolutely shot.
So I do have to switch back and forth a lot.
This one looks like he’s maybe barking.
I don’t know.
Let’s hit add new behavior.
And then we have running away, running away.
Great.
And then we want one where it looks like the dog is out and about.
Oh, there’s there’s a dog that’s ran away right here.
He’s looking back at you like you punk.
You punk.
You can’t get me.
You can’t get me.
OK, don’t let your dog punk you, by the way.
That’s not that’s not something you want to be doing.
That’s why you need a local dog trainer.
That’s why you need local dog trainer dot com.
See, I’m even selling the fake the fake company as we do this.
So let’s go in here.
I’m going to go to customize and we’ll go to menus and we’ll just add those two things in because we do want those to be part of our menu, not the legal, not the legal, but the behaviors for sure.
So we’re going to add the behavior archives.
That is the behaviors page.
OK, and we are going to publish now.
Normally, this would be like a drop down situation, but this is not a menu tutorial.
OK, this is just a tutorial on getting all of this stuff set up.
Look at what Bricks does by default, just kind of has this like a dummy template that kind of queries these things automatically.
That’s obviously not the situation we want.
So what I’m going to do so that we don’t go ahead of ourselves too much, I’m going to loop these into the footer and then we’ll go take care of the template for the behaviors.
OK, so I’m going to get rid of the allies that I don’t need.
I’m going to come in here on the ally that’s left.
I’m going to query loop it and we are going to say, hey, go ahead and query my behaviors.
Now, we can also put a cap on this.
Like, I only want to ever query like 10, 10 max.
That’s it.
I don’t ever want to see more than 10.
So you could say post per page is 10.
And then we can talk about how to turn off pagination, turn off, you know, loading more, things like that.
But we don’t even have 10 for right now.
So we’ll we’ll get back to that footer link.
We’re going to get rid of this.
We’re going to go dynamic data and we are going to go with post title.
So now I’ve got those queried in.
The only thing I need to make sure is that they link properly.
So we’re going to choose the post URL down here.
And if I go back and I refresh and scroll down to the footer, you can now see our behaviors are being queried into the footer.
Our services are being queried into the footer.
You’re free to put static links all around here for any other stuff that you want.
I do have my legal policies down here.
So let’s go ahead and just show how maybe I don’t even go through the trouble of looping these.
There are some performance implications when it comes to looping.
So if you don’t have to loop something, then maybe consider not looping it, right?
There should be a good reason to loop it as I’ve shown what the good reasons are.
But like the legal pages, there’s three of them.
It’s a footer template.
I have one single source of truth for it already.
It’s not really going to get touched all that much or updated or added to like it’s it’s pretty much a static kind of thing, right?
So in that case, even though I could loop it, I don’t have to.
So I’m just going to search for privacy policy.
I’m going to link that up.
I’m going to come in and say internal post page.
I’m going to search for disclaimer, link that up.
And then I’m going to search for terms and we’re going to link that up.
And so that’s a situation where I could have absolutely linked to that.
But there just wasn’t a lot of need to bring in a query loop for that kind of situation.
And this just goes to show you that as you’re templating things, some things can be static, some things can be dynamic, some things can be looped, some things can be not looped.
It’s completely up to you with how you’re configuring this website.
Let’s go ahead and drop that out.
And we’re going to refresh so we can see that this works, right?
The one problem we have is there’s no template for our legals and there’s no template for our behaviors.
So we have to jump in right now and solve those two things.
So we’re going to go to the templates area.
Let’s do legal first, because that’s super easy.
So I’m going to say legal single, say this is a single post and I’m going to edit with bricks.
Remember, this is a template that controls all of our legal pages.
I’m going to go to template settings, conditions, add conditions, post type, posts is legal.
Okay.
So these are going to affect the legal pages.
If I want to populate the content, I can say like, let’s, let’s look at our disclaimer.
I think I have to say single post page first.
Then I can say disclaimer, legal apply preview, and it’s going to reload the builder and we are good to go.
So I’m going to just say section.
I don’t even think I really need a frame for this.
Um, let’s just go in and put in our, let’s put in a heading and let’s put in our post content element.
The post content element pulls content from WordPress, from the block editor.
Okay.
Um, so that’s pretty good there.
I think what I want to do is maybe just use a little bit of a width class on here.
Let’s do with L sounds good.
And for our heading, we want that to be dynamic.
So post title, and, uh, let’s make sure that this is an H one cause it is going to be the main one, uh, pull post content from WordPress.
It’s already pulling the content.
This is our disclaimer page guys.
Let’s go ahead and look at the front.
It’s really simple, right?
Really simple.
When I go to terms of use now, terms of use has its page privacy policy has its page.
We’re just going to keep that really, really, really simple because it’s boring.
Legal taxed.
There’s nothing exciting has to happen there, but if you want it to be exciting, it’s very easy to make it, make it exciting, but we do have our working template.
So now we’re going to move on to behaviors.
Remember we have this archive page called behaviors.
It doesn’t look all that great.
So what we’re going to do is we are going to hop out of here.
We’re still in the templates area.
So we’re going to add new template and we are going to say behaviors single.
Uh, no, I’m sorry.
Behaviors archive.
We do need a behavior single, but we’re going to handle the archive first.
Okay.
This is going to be an archive and we’re going to publish it.
We’re going to edit with bricks.
And somebody had asked in the comments, when you’re doing the loops on things like this, how does it know that it’s the archive for a specific thing like services or, uh, in this case, like behaviors.
So I’m going to go to template settings, conditions, add condition.
We’re going to come down and say archive, and I’m going to say post type, and I’m going to say behaviors.
And this right here, they probably missed this part.
This right here is how it knows you’re telling it.
This is the archive template for this particular post type.
So when I do the loop, that’s how it knows that it’s pulling from behaviors.
Okay.
Let’s go ahead and save that.
And I’m just going to add a section.
Actually, let’s, let’s go back to templates here.
We do want this.
So I’m going to go back to hero and let’s go down and choose our boring hero.
Once again, hero golf, very, very typical kind of hero for you.
Uh, let’s bring in the post title.
So this is going to be the, um, actually we don’t even need to bring this in.
We can, here’s another question that I can answer where people said, do I have to use dynamic data for everything?
Like when I’m creating the template, can some of the template be static?
Yes.
Any part of the template that makes sense to have as static can absolutely be static.
So for example, I can just statically write, um, behaviors.
We can help you with, um, and we’ll say dog, dog behaviors.
We can help you with.
Okay.
Perfect.
And I want to override the, uh, width of this.
Let’s say 24, uh, 20.
No, I’m sorry.
We need to go less.
Uh, 16, 17.
There you go.
Dog behaviors.
We can help you with that is a static headline.
So this is not dynamic data, even though this is a dynamic situation because this is a template that’s going to control this area, but it really does not need to be.
And even this image right here doesn’t need to come from like a featured image or a custom field or anything like that.
I can literally select the exact image that I want to put in here because this is an archive template.
It’s just kind of, it’s the overview of all the behaviors, right?
Um, let’s go ahead and do, let’s do, uh, this one right here.
Okay.
So I just wanted to choose one.
We, I don’t think we’ve chosen yet for like a, a main hero.
And then all we need is we need a little bit of a grid.
So we’ll just come in and do our feature.
Um, actually, let me, let me show you something.
If you, if you want to, uh, and this is for bricks people, this is for bricks people.
If you’ve already used some layouts and you want to remember which ones you use and you want to make it easy to use them again, let me show you how to handle that.
So our behaviors, I think would be more in line with like, um, let’s, let’s see how we did our services.
We don’t want to do it like this.
We don’t want the flip flop back and forth.
Um, we, we had this, let’s go to Jack’s thing.
Okay.
Right here, this card situation, I think is what we want.
Cause we’re going to end up with a lot of different behaviors.
Okay.
We’re only starting with like four or five or whatever, but we’re going to end up, we would end up with a lot of them.
And I think a card layout like this makes the most sense.
Okay.
So this is the single trainer, the single team member template.
So we’re going to go to the single team member template team, single edit with bricks.
And what I’m going to do is show you how to save this little section.
So this section features section, Charlie, I’m going to right click and I’m going to say save as template.
And I’m going to say features right here.
And, um, that’s really all I need.
I don’t even need to bundle it or anything.
I’m just going to hit save as template.
Okay.
And now that is actually saved in my local library.
Okay.
Which isolates it away from the frames library.
All right.
So I’m going to get out of here and I’ll show you what that allows us to do.
So I’m going to go back into behaviors archive.
That’s what we were working on.
Right.
And I want to put that grid down below.
So what I’m going to do is go to templates.
And instead of being in the frames library, I’m going to go to my templates and you’re going to see features right here.
And I can go ahead and insert that features layout and there it is.
Okay.
Now, remember, this is a variable grid.
So when there’s only one item in it, it’s going to span all the way across, but it’s going to essentially build itself and make itself automatically responsive according to the items that are in it and the width that we determine that those items can be.
Um, I’m not going to rehash variable grid and all that stuff.
I explained it in the first video.
Okay.
So what we need to do, look, it’s already query looped, but we’re going to change this from relationship down to posts.
And we’re just going to say that this is, is main query.
This is an archive template.
And what we’re going to do is make sure that we’re pulling in the correct things.
So post title is being pulled in.
That is correct.
If I go to the media, uh, it is going to pull in the featured image.
That is correct.
Let’s go ahead and see on the front end, if we have a working behaviors page.
So look at this dog behaviors.
We can help you with that was the static content.
Here’s a static image, but here are the, uh, behaviors down here that we actually help people with.
And it links to the behaviors page.
We can look up here and see behaviors running away.
Okay.
So that, that was pretty quick and easy.
Notice right here, it says my specialties.
So what we can do is we can just change that content right there.
And again, this can just be static content.
So dog behaviors, we can help you with choose, um, which we’ll say, which asking a question is good in headlines, which behavior, which behavior is your dog struggling with most question mark.
Okay.
Bang.
Just like that.
And we’ll go ahead and we’ll change this width as well.
Let’s go 20 characters and let’s go ahead and hit save.
Um, you could use with classes on here.
You can use a lot of different things.
Um, I’m just doing this nice and quick.
Okay.
Which behaviors is your dog struggling with most?
And then the person can choose their behavior.
Now, obviously we want to put hover styles in and things like this, but again, again, we are not worrying about design.
We are just worrying about the functionality here.
So running away, I don’t, I don’t have a template for this.
This is the single post template for a behavior, just like we did with legal, right?
So this is going to finish up our behavior section.
We’re going to go to templates and we’re going to go to behaviors and single.
So we did behaviors archive.
Now we’re going to do behavior single.
We’re going to say this a single page.
We’re going to go ahead and hit publish and we’re going to edit with bricks.
Okay.
Let’s pop in our hero section again.
Let’s get back to frames.
Let’s go to hero.
Let’s pop in our hero golf.
Okay.
And the behavior is, the headline is going to be a dynamic this time.
And then the image is going to be dynamic this time because remember every behavior page has a different heading and different image.
So we need to make sure that those things are dynamic.
And then what we would have is content down below, which we’re not even going to worry about right now.
Uh, all I want to see is, do I have the proper headline and do I have the proper featured image at the proper URL?
Okay.
So let’s go back to the front end.
Let’s go to behaviors and here we go.
Let’s click on running away and notice it’s blank.
We forgot the number one rule.
Okay.
I just, it just popped into my mind, template settings, conditions.
We have to tell this template where to live.
That’s what happens when you don’t tell the template what it’s supposed to be affecting or where it’s supposed to live.
So post type is, uh, behaviors.
Okay.
Save.
Now, when I refresh on running away, look what I get, I get a page for running away.
That’s the featured image from running away.
There’s the headline.
Awesome.
Okay.
Um, you can even, by the way, let’s just pause here for a second to show how this is done.
Um, let’s edit with bricks.
Let’s go to edits, go to bricks templates.
Okay.
So let’s go to behavior single.
You can mix static data and dynamic data.
So how do you do that?
Okay.
We can help your, uh, let’s here’s, here’s, uh, here, stop, get, get help.
I’m trying to, I’m trying to go up with a sentence that makes sense.
Okay.
Uh, cause I’m thinking dynamic data.
So it’s like, you know, help your dog with running away, help your dog with aggression.
We can help your, we can help solve your dog’s aggression problems.
We can help solve your dog’s running away problems, running away issues.
We can, we can see when you do that, when you mix static and dynamic, you’re going to want to make sure it makes sense for all of the cases.
Right.
But let’s just, just for demonstration purpose, it doesn’t have to be perfect just for demonstration problem, purposes.
We can, we can solve your dog’s blank, uh, problem.
Okay.
Exclamation mark.
All right.
This is again, just for demonstration purposes, just for demonstration purposes.
Um, let’s come down here and to actually let’s, let’s show how we can use a, uh, a width class for this.
Okay.
So we’ll do something like that and let’s get out to the front end.
Okay.
So let’s go to behaviors and let’s click on running away.
We can solve your dog’s running away problem.
See that.
And then when I click over here, I click on barking, we can solve your dog’s barking problem.
This is just a demonstration of how you can mix static content with dynamic data.
Cause again, many people asked that in the comments, they weren’t really clear on that.
I just wanted to show that once again, I’m not saying that’s the best way that it’s like the best wording for that, or the best thing to do for that particular page, just showing you that it is possible.
All right.
So we have our single URLs all working.
We got our archive for behaviors all working.
We got our legal post working.
We got a dynamic footer.
Let’s hop back and see what else we were supposed to do.
So we did the footer with dynamic links.
We did the legal, we did the, Oh, blog, blog, blog.
Let’s get the blog done, my friends.
Okay.
So let’s go out.
Let’s go to dashboard.
Let’s see if we have any posts.
We have a hello world posts.
Let’s hijack that and say, um, here’s what you need to know about puppy nutrition.
Okay.
Now, if you go back to the architecture, you should see that we have some categories here, training, wellness, puppy care, leadership.
Well, guess what?
We can make those right here.
So we could say training is going to be a category.
We can say wellness is going to be a category.
What, what else?
Puppy care and leadership.
All right.
Puppy care.
And obviously there will be probably more, uh, over time, but we’re just going to start with these and we’re going to make sure that this one, here’s what you need to know about puppy nutrition.
Well, guess what?
That goes in wellness.
Let’s go ahead and set a featured image there and let’s get a nice little cute picture of a puppy.
Let’s save.
Let’s go back to website.
Ipsum, grab a little bit of copy for our article that we’re going to be working on here.
And let’s put in that copy for this article.
Let’s go ahead and hit save and let’s go to the front end.
Now bricks gives you this, you know, basic template just so that you don’t have a completely broken page, but that’s not really what we want.
We want our own template, right?
And we want a blog page as well.
Blog grid page.
Now I like to make sure there’s at least two posts in here before we really get to doing anything.
So let’s add another fake blog post.
This is going to be something in the training category is clicker training a good option.
Uh, is a good dog training method is clicker training, a good dog training method.
Okay.
We’re just coming up with shit on the fly.
Uh, let’s go ahead and use, Hmm, here we go.
This looks like they’re training dogs.
All right.
Let’s hit publish right here.
Oh, we do need our dummy text.
Okay.
Save that.
Um, so we have a featured image.
We have a headline.
We have some dummy text.
We have two blog posts.
Fantastic.
All right.
So what we’re going to do is I’m going to go to pages, add new page.
It is in my estimation, much better to create a static, normal page for your blog articles, rather than trying to use the default WordPress archive template situation for your blog.
All right.
So we’re going to go ahead and hit publish.
This is just a static page.
So we’re going to bring this in and I am going to go to templates and we’ll look for articles and I’m just going to do something nice and easy.
Maybe something like article section Juliet here.
Awesome.
And this is going to be an H1.
Okay.
Uh, latest articles, latest articles, articles, articles.
Can I, can I actually type here?
Okay.
And this frame is already set to query loop.
So we’re just going to look at the loop.
It’s just looping our posts.
We’re going to put posts per page.
Uh, we’ll throw that in as 10, which I think is the default anyway.
Um, let’s go ahead and save that.
Refresh the canvas.
Cause I’m just seeing, okay.
There we go.
It’s snapping into action.
Okay.
So, um, we’ve got the post excerpt coming in.
We’ve got the post title coming in.
We’re loading in categories.
Okay.
Um, I want to explain this situation right here where it says post terms category.
This is an example of where frames was just doing a lot of the heavy lifting for us.
It already actually had the dynamic data set up.
It already had the loop set up.
Like the minute I added the frame, like we were pretty much good to go here unless I wanted to start styling it some other, other way.
Um, but if you look at this post terms category is set to plain, that is.
So when I go to the website, let’s go to here and is this the actual blog page?
Yeah, we’re on the preview still.
I’m gonna go to the main blog page.
There we go.
Um, it’s going to show the category, but it’s not going to be linked.
It’s not going to link to the category page.
So what I want to do, because we are going to set up a category template here.
I want to, let’s get rid of website ipsum.
Let’s get rid of this.
We got too many tabs open.
Let’s get rid of the word plane, the word plane after the colon strips the URL.
So I don’t want to strip the URL in this instance.
I want the URL to be there.
Okay.
And I want to, uh, I want to hook up the heading as the link as well.
So I’m going to click on this and we’re going to say link to external URL, and this is going to go to the post URL.
All right.
Fantastic.
Let’s refresh.
We can click here and we can go to the actual post or we can click here and we can go to this archive page for the category of training.
So you see the minute we add a blog situation, we’ve got a lot to do.
We’ve got to carry, uh, we’ve got to care about the single post, what the single post is going to look like.
When somebody clicks on a category, we got to see what they’re going to look like.
When somebody clicks on the author, we need an author page.
So we need to see what they’re going to look like.
Okay.
Um, did I say the blog category page?
I think I did the overall blog page.
Okay.
For your grid, which we already did.
And let’s add that while we’re here.
So let’s customize.
Let’s go to the menus.
A lot of stuff.
Just the minute you’re like, I want to blog.
You just signed up for a bunch of different templates.
Okay.
Like it’s not just, it’s not that easy.
It’s, I mean, it is easy, but it’s, it’s a few things like a client might think, well, just add me a blog.
Right.
But now you’re thinking like, I got a search results template.
I got a category template.
I got an author template.
I got a lot of shit just got added to the plate because somebody wanted a blog.
Okay.
Just keep that in mind.
And here’s how to set it all up.
All right.
So we’re going to add an item and we’re just going to add our blog page here.
Okay.
So save.
Excellent.
We got a blog page.
Let’s go to blog.
Hey, look, we got a blog.
What’s missing now?
Obvious things category.
And the other obvious thing is the main post.
Okay.
Let’s handle the main post first, because that is the easiest one.
So we’re going to go to bricks.
We’re going to go to templates.
Here’s where I say blog.
And you should already know what I’m going to type, right?
Single, right?
I use the word single because that’s really what they are.
It’s a single post for all this stuff.
Let’s go ahead and hit publish.
If it’s an archive, I say archive.
If it’s single, I say single.
I try to use the same terminology over and over and over and over again.
Let’s go into frames and let’s search for blog this time.
Let’s go ahead and do blog post alpha.
Pop that in.
There’s a bunch of stuff in here I don’t need.
So I’m just going to delete it.
I don’t need, I don’t care about the author wrapper right now.
Let’s go ahead and just save.
And I want to assign this.
This is one of those frames that kind of does the dynamic aspect for you.
I’m going to go in and assign this to conditions, add condition.
We’re going to say post type is post.
Just generic posts is what we’re going to apply this to.
Now we’re going to go check this on the front end and then I’ll come back and I’ll make sure that you guys understand how that frame is actually working.
So there we go.
It’s pulling in.
Oh, there’s a little bit of an auto gap here that I can clear out.
So we’re going to come in here and we are going to say, um, I can actually just use a gap of none.
Okay.
Just bang gap, none saved slow, little utility class there.
Now everything’s good.
Okay.
We got our featured image.
We got our headline.
We got our, our blog post.
We got our author, which here’s the link.
You click on that.
It’s going to take you to an author page.
Okay.
Do you have an author template or not have an author template?
It’s another thing we got to account for.
It’s got the date in here.
It’s got the number of comments.
Uh, we can easily put a comments form if we want one.
That’s a bit beyond the scope of this tutorial.
We’re just getting the templates and the dynamic data up and running.
Okay.
So let’s take a look at this.
Uh, we have a blog hero.
Let’s open that.
It’s got a content wrapper with a heading.
If we look at the heading, it’s just pulling in the post title with dynamic data.
If we go down to the blog meta, here’s the author.
It’s just pulling in the author name with dynamic data.
It’s just pulling in the date with dynamic data.
And it’s just pulling in the comments count with dynamic data.
And then if we go down to the background image, it’s just pulling in the featured image with dynamic data.
It’s just, I didn’t have to do all this stuff manually, right?
I just added the frame.
It’s all done for me.
Then I come down to post content.
That is a, an element that bricks gives you that automatically pulls in post content.
And this is using content grid and automatic CSS and a bunch of cool stuff that we don’t even need to get into, but this is locked and loaded, ready to go.
Now what I’m going to do is go back out.
We’re going to go back into templates, add new blog single is done.
What do we need next?
We need blog category.
And I’ll say category archive because it is an archive template.
So we’re going to hit archive on here and we’re going to publish.
And we are going to hit edit with bricks.
Now we are going to bring in, think about what this needs to be.
It needs to be a list of posts.
Okay.
We can essentially just take this section right here.
I’m going to copy that to my clipboard.
I’m going to come over and paste that here.
And instead of saying latest articles, I am going to say post title.
No archive title.
Okay.
Archive title.
I believe it’s the archive title.
You can use archive title or term title for this.
I believe you can use either one.
They’re interchangeable.
Okay.
Um, I want to make sure that my loop is set on an archive loop.
Okay.
So I want to set is main query archive search, et cetera.
Let’s go ahead and set that.
And then let’s go ahead and assign this.
Let’s go to template settings, conditions.
And we are going to say, this is an archive for categories and tags.
And then we’re going to say for all terms, categories, and we are going to apply this to any child terms that might exist as well.
So this is how you set up a category template in bricks.
Let’s go test it by coming out here, going to our blog area, clicking on training and look, it says training and it’s got the training article in it.
It’s done.
It’s that easy.
It’s that quick.
Okay.
Um, now this is an area where I believe we want to mix static data and dynamic data.
We don’t want this just to say training.
So what I’m going to do is say archive title, and then I’m going to say articles.
Okay.
So we’re going to hit save on that.
And now when I refresh, it’s going to say training articles.
Now, if I come over here to wellness and I click on wellness, we’re going to see the wellness article and it’s going to say wellness articles.
So these archive pages, these category pages build themselves.
They manage themselves.
Um, bricks will naturally give you, you can have pagination, you can have load more.
All right.
There’s a bunch of different ways to handle that.
I’m a big fan of, um, I am a fan of pagination on archive templates like this.
Um, but in normal blog pages like this, I’m just a fan of like load more.
Okay.
Um, all right.
We’ve got our category page done.
We’ve got our single post.
Let’s go ahead and do our author template while we’re here.
Okay.
Remember just opting in for a blog gives you a lot of things to do.
Uh, we’re going to go add new and we’re going to go say blog author.
All right.
So we’re going to say select.
And this also, I believe is going to be an archive page.
This one I don’t do very often.
Uh, let’s go ahead and edit with bricks and just see if we can get this working.
So I’m going to come in here and I’m going to say, uh, let’s, is there an author template?
There is an author template right here.
Look, author page alpha.
We’re just going to drop that in.
Um, and let’s say this is going to be the featured image.
This is the author author, um, avatar author avatar.
It’s going to pull that in there.
There I am now that’s an auto generated name by Insta WP.
So you can ignore the name, but that is the author name for this particular install.
And there can be an author bio as well.
There’s some social sharing icons, which we don’t even need to worry about and set up right now.
So we’ll just keep it nice and simple.
We’ve got a loop down here, which let’s take a look at this is post per page and we’ll say is main query archive search.
I think that’s how we’re going to want to do this.
And then we’re going to come up here to template settings.
We’re going to go to conditions, add condition.
And I believe this is an archive and we’re going to choose author author.
Okay.
Let’s go ahead and hit save there.
And let’s just go out and see if what we’ve got is working.
So let’s go to blog.
Um, here’s the author, but it’s not linked up.
Let’s go to the actual template.
And let’s see if the, uh, that’s not linked.
I’m actually seeing that that’s not linked.
It’s a dummy link.
So let’s go to, um, edit with bricks and we’ll go to bricks templates and we’ll go to blog single and we’ll edit that up and we’ll send that to the author page.
Okay.
So here’s the author name.
I’m going to come down to URL.
See, it’s going to like a, an ID on this page.
I’m just going to replace that with, uh, author bio, bio avatar, meta author archive URL.
Save.
Okay.
And let’s go back out to the front.
I’ve got too many tabs.
Let’s get rid of these tabs.
Let’s go to blog.
Let’s click on a blog article.
Let’s see if we can click on the author.
Here’s our author page right here.
Okay.
Again, we’re, we’re not worrying about styling or anything like that.
We’re just worrying about getting the template set up, making these connections, making this a functional dynamic website.
Okay.
We got our author bio.
Let’s hop back into Figma.
What else do we need to do here?
Blog situation is done.
Let me look at our time.
What are, how are we, how are we doing on time with our recording?
Can I even see where is Ecamm live?
There we go. 40 minutes.
Okay.
We’re, we’re, yeah, we’re good to go.
Let’s, let’s get something else done.
I don’t think we’re going to get to the service area network, but we can do testimonials service area network.
We will push to episode number three.
Let’s go ahead and get testimonials done.
Let’s race through it.
So we’re going to go to dashboard here.
We’re going to go to ACF post types, add new, and this is going to be reviews.
Okay.
Review single reviews, plural.
Let’s think for a minute.
Do these need to be hierarchical?
No, probably not.
We do even want URLs on our reviews.
Do you want people to be able to go to a single review with its own URL?
And in almost all cases, when I do this on websites, the answer is no.
So this is a really good thing that we’re doing right here, because you’re going to learn how to remove the URL.
You’re going to toggle this that says publicly queryable, toggle that off.
No more URL, no more URL.
Okay.
Let’s go ahead and hit save.
Now I’ve got reviews here.
Okay.
I’m going to go in, add new review and you’re going to see, all right, we’re going to say, uh, Janice here’s Janice’s review.
Uh, we’ll set a featured image for Janice.
Here she is with her nice, cute little dog.
Um, and I will, we’re going to, we’re going to do custom fields in just a second.
I think, uh, let’s do, that’s all we need to do for now.
Let’s just publish Janice.
Let’s go back and look right here.
There’s no view.
There’s no, normally there would be a link that says view, but because we turned off the URL, there is no link that says view.
So we’re not generating empty URLs where there’s no template we have to worry about for a single review.
None of that stuff.
All right.
You always need to decide these things.
Does my, does my custom post type need an archive?
Does my custom post type need a URL?
Does it need the front URL prefix?
These are things you need to ask yourself when you’re creating post types.
Okay.
Let’s add another review in, and this is going to be Jimmy.
All right.
So Jimmy’s got his review.
Jimmy likes to do this float thing with his dog.
We’re just reusing photos over and over and over again for whatever we want.
Uh, let’s hit publish.
Let’s go back.
So we’ve got Jimmy, we’ve got Janice.
We love our J names.
Uh, let’s go ahead and maybe talk about adding some custom fields.
Okay.
Let’s add a custom field for the review text.
Let’s go into Jimmy for a second.
Let’s talk about this because you could use the block editor here.
You could put the body of their review in the block editor, but you lose a little bit of control here.
Okay.
Um, what I prefer to do is I prefer to create custom fields and then we use those custom fields.
And in this situation, I would actually turn off the block editor.
So I want to show you how to turn off the block editor.
Let’s go back out and let’s go to ACF and let’s go to post types and let’s go to reviews and let’s go to permission.
No, no, no.
I’m sorry.
It’s in general on the front page.
It’s right here.
Editor.
You can just turn off the editor and let’s save and go back and see what that did.
So let’s go back to reviews and all reviews, click on Jimmy.
And look at that.
Jimmy just has a blank page.
So now we need to talk about custom fields.
We already did a little bit when we did the relationship field, but now let’s talk about other kinds of custom fields and how those relate to dynamic data.
I’m going to go to ACF field groups and we need to make a group of fields for reviews, right?
So I’m going to call it reviews.
I’m going to come down here and assign it to reviews, to the reviews custom post type.
And then I’m going to come up here and I’m going to give a WYSIWYG editor field.
That is a what you see is what you get.
It’s kind of the rich text content kind of field.
And we’re going to say that this is the review body.
Okay.
And then that should be that I’m just going to hit save and we’re just going to see what that did.
Okay.
So we’ll go to reviews and a new tab, open Jimmy.
And now look, I have the body of a review that I can put in right here.
What else do we need?
Well, um, the person’s name for sure, which we could pull from the post title if we wanted to.
Um, I, I probably want the, uh, you know, a title for the person or something about them that kind of describes them.
Um, so I, it could say dog owner, or it could say that even the type of dog that they have like breeds or whatever, however crazy you want to make it, it can get all right.
And it’s all the same principles.
We can just keep this nice and simple.
Um, so we’ll, we’ll just ask, um, we won’t even have, we won’t even have it.
Let’s just, let’s just focus on the review right now.
All right.
So let’s go website, if some.com.
So we’ll put in this paragraph for Jimmy.
We do want these to be a little bit different.
Let’s go ahead and hit update here.
Let’s go out and let’s go to Janice and let’s put in a different paragraph for her.
So we can put in this paragraph right here.
We just want to make sure that they have unique content.
All right.
So we’re going to hit update there.
So now we’ve got Jimmy and Janice and just, you know, it’s probably going to be a three column grid that we put these in.
So let’s put in one more person.
Let’s put in Jack, set his featured image here.
Uh, this is going to be Jack.
All right.
And then Jack can be this, but we can actually just remove a sentence.
Okay.
So let’s publish that.
And now we have Jack and we have Jimmy and we have Janice.
We have three reviews.
Let’s go ahead and see where we want to queue up these reviews.
Well, services really, really good idea for services to show reviews of that service.
Okay.
So now you’re going to have to do some pretending here that we have a lot of reviews in here, because if we have one review related to each service, there’s only three reviews and each service is going to have like one review.
I’m going to relate them all to each other.
Okay.
But, um, you just got to, you know, they would be unique if we had plenty of reviews to choose from.
All right.
So what we’re going to do is we are going to add another custom field, ACF field groups.
We’re going to go into reviews.
And what do we want to do?
We want to relate a review to a service.
And I’m just going to do a single direction relationship for this.
Okay.
So we’re going to hit add field.
I don’t want to overcomplicate and over engineer.
It’s like when you add reviews, you can choose the service.
They go with, I don’t want to go to the services page and choose the reviews from there.
I just want a one way ticket.
Okay.
For right now, for right now, for right now, my might, as the thing grows, do bi-directional is very easy, but for right now, I just want to deal with one way.
So I’m going to say relationship and remember we’re on the reviews.
So when we’re writing a review, how do we want to present this?
We want to say, um, reviewed service.
Okay.
Or services, um, services rendered.
Okay.
However you like naming this thing is literally the hardest part of all of this.
So you come up with your own names, figure out how you want to do this.
I’m going to choose the filter by post type service.
I want to make sure I only show published services.
I’m going to go ahead and hit save.
So now I can go to reviews and Jimmy can, she, uh, he did obedience training.
All right.
So we’re going to hit update on him and then we’ll go back to Jack.
What did Jack get?
Jack got recall training.
We’re going to hit update there.
And then we are going to go to Janice, right?
All reviews.
Janice.
What did Janice get?
She got some in-home training.
All right.
So we’re going to hit update on her.
So I’ve related a service to each of these reviews.
Now, where do we want to display those on the service page?
every service page, every service has a page.
We want to show the reviews related to that service, right?
Okay.
So what we’re going to do is go to bricks templates.
Where is that managed, right?
It’s managed under service single, a single service page.
Okay.
Let’s go ahead and edit with bricks, bring it in.
And now what we need to add, we got a hero section.
Um, we’re going to pretend that there’s some other content in there.
In fact, let’s just put in, uh, a content section.
All right.
So we can go with, let’s keep this nice and simple.
Let’s, let’s do this one content section, papa, content section, papa.
Uh, so we’ll pull that in.
Let’s, let’s, we have a photo we can put in here.
I believe we do.
Um, uh, well, you know, it would need to be dynamic.
We need to go on and talk more about custom fields for, for building these pages out.
Uh, so we won’t do that right now.
Cause I think that might confuse people.
Let’s go to templates and let’s go to testimonials and let’s see if we can bring in a testimonials grid.
Let’s go all the way to the bottom and find something nice and simple like testimonial section alpha.
We don’t want to get too crazy.
Look at this.
Look at this.
Okay.
So we’ve got three testimonials able to pull in.
Let’s go ahead.
Same process, right?
Delete the cards.
We don’t need.
We only need one card because we’re going to loop them.
So let’s go query loop.
Let’s go to posts.
What do we want?
Relationship services rendered.
Is that what we want?
And then what we want to do is come in and, Oh, look at this template.
Okay.
This would be good.
Cause we can show you with custom fields, how to handle this.
And maybe we’ll even tackle this review rating system right here.
All right.
So fantastic.
Let’s go ahead and say dynamic data for this.
And what did we say?
Review body is what we called it, right?
Notice that they’re all just preloaded for us.
And if you remember what they’re called, like I called them all review something, right?
I can type review.
It’ll actually search for it and find it for me.
There’s the review body.
And I’ll show you a trick on limiting text in just a second, but I want to pull in the person’s name as well.
Okay.
Let’s pull in and that’s their post title for right now.
And then we, remember we said they weren’t going to have a title, right?
So they’re only going to have a name and then we are going to pull in their avatar, which is just their featured image.
Okay.
So let’s hit save there.
So it’s pulling in the person’s name.
It’s pulling in the body.
Let’s just see what we’ve got.
Let’s just see what we’ve got.
Um, what our clients are saying about, and then what am I going to do here?
I’m going to inject dynamic data of the post title obedience training, uh, about, I’ll say our obedience training service.
Okay.
Save.
And let’s just go with a width class on here.
Maybe something like with L, uh, no, let’s go with like with M.
Okay.
So I’ll take the L off.
We’ll put the M in and when you go look at a service page.
All right.
So let’s go to the front end.
Let’s go to services and let’s go to recall training.
Okay.
Recall training.
What our clients are saying about our recall training services.
Did anybody have a recall training?
I know somebody had in-home training.
Okay.
So we have a little bit of an issue with our loop here.
All right.
I did some quick thinking and I realized if we don’t make it bi-directional because we’re working on a single service page, if we don’t make it bi-directional back to reviews, it’s probably not going to automatically be able to bring in the relationship field.
So we’re going to go back and we’re going to quickly make that a bi-directional relationship.
So we’re going to go to ACF field groups and we’re going to go to services and we are going to create a new field.
And this is going to be a relationship field.
And we are going to say that this is a related reviews.
Okay.
Perfect.
And I’m going to filter by post type is review.
Make sure that we are only looking at published reviews.
I’m going to go to advanced bi-directional and I’m going to choose services rendered, which is that other field that we want to link this to.
Then I’m going to go to field groups on reviews and I’m going to open a services rendered.
I’m going to go to advanced bi-directional and I’m going to choose related reviews.
That’s the field that I want to link that to.
And then when we are in our template, okay, let’s go back to bricks.
Let’s go back to templates.
We are going to services single edit with bricks.
And now let’s see what our loop options are.
So I’m going to go to our loop, see if we have a new field.
Okay.
Related reviews.
So now we can get the proper query in-home training.
Let’s refresh.
And there we go.
Now, now we are actually showing the proper related reviews.
And if I hit edit service, we can see in-home training, there’s Janice under related reviews.
And just to, for the purposes of building out the grid, I’m going to say that Jack and Jimmy also reviewed the in-home training service, which means when we go back to in-home training, we are now going to see three reviews instead of one.
And you can see that they’re all different lengths.
I actually want to, let’s go to character counter.
Okay.
Character counter.
Now you could guess and stuff like this, but I’m going to show you how to actually count it.
So it’s 277 characters.
It’s 46 words.
And bricks allows you to limit the amount of words in your queries.
So this is 46.
I want to maybe say, let’s limit it at 40 words or 35 words or something like that.
So here’s how you can easily do that.
We’re going to go to, uh, let’s, I’ve got too many tabs open again.
So let’s get rid of this.
Here we go.
Here’s the review body.
I can do a colon and just put 30.
Okay.
And we’re going to limit this to 30 words.
And let’s see what that looks like.
So I’m going to go back to the front end services.
Let’s choose in-home training and look at this.
It is limiting it to 30 words.
Now it’s not clear that it’s limiting it.
So I’m going to put three dots, uh, right after our little short code there for our dynamic data.
And then what it’s going to do is put that a little ellipsis action, excuse me, at the very end.
Okay.
Um, that’s at least good enough for right now.
So I’ve got our body, I’ve got our name, I’ve got our headshot.
What I do need is this little call out quote.
Okay.
It’s a little call out.
That’s what we’re going to call it a review call out.
All right.
So let’s go back.
We’re going to, we’re going to make this happen real quick.
So we’re going to go to dashboards.
This is going to show you again, how you can just build up your dynamic data using custom fields, ACF.
Let’s go to field groups.
Let’s go to reviews.
Let’s add a field.
This is going to be our review call out.
Okay.
And it’s just going to be a little text field.
Now I can go to presentation and you can prepend it.
You can append it.
You can have placeholder text.
You can put instructions for people.
There’s a lot of stuff you can do in validation.
You can set a character limit.
So for example, what I’m going to do here is I’m going to go to the front end of the website and I’m going to go to services.
I’m going to go to in-home training and I’m just going to grab one of the, I’m just going to grab that right there and we’ll go back to our character counter and it’s going to say 42 care.
I want to limit this to 40 characters.
Okay.
So we’re going to say in-home training, edit field group, 40 character limit.
And let’s go ahead and hit, uh, we are going to say it’s required.
We are going to go ahead and hit save.
So now what I’m going to do is go to reviews and I’m going to go to Jimmy and you’re going to see review call out right here.
This is the best dog training company ever.
Oh, look, can’t write ever.
So I’m just going to say this is the best dog training company update.
I hit the review.
I hit the character limit.
Now I’m going to go back and I’m going to go to Janice.
Okay.
Fantastic service.
Uh, highly recommend exclamation mark.
All right.
Let’s hit update here and let’s go back to all reviews and let’s go to Jack.
All right.
Jack says, um, we’ll bring my, we’ll bring my dog back again for sure.
Okay.
Update bang.
Nice job.
Now let’s go to in-home training and hit refresh.
Look, they’re not there.
Why aren’t they there?
Cause we didn’t update the template yet.
Okay.
So let’s go back into the template.
We need to refresh the builder because the builder doesn’t know that that new field exists.
Okay.
When we refresh now it does, we can remove the static info.
We can search for review.
There’s review call out right there.
Let’s save, let’s refresh.
Look at this.
We’re now bringing in our call out quotes.
Last thing we are going to do is get this star rating system in here.
Okay.
And then we’re going to be done with part two.
Everything else is going to be pushed to part three.
Okay.
So what I’m going to do is I’m going to go to ACF field groups.
Now it’s a good idea to set up these, this, all these fields ahead of time.
That’s why you do the planning and the discovery and all of that.
But I’m doing it one by one to kind of show you how each piece fits into the puzzle.
Okay.
So what we’re going to do is add field and we are going to do a rating system.
We can do a rain slider for this.
Even let’s like, let’s, let’s see if we can get cute.
Okay.
Um, we’re going to say review rating, review rating like this.
The default value is going to be five stars.
Okay.
Five stars.
And we’re going to go to validation.
Minimum value.
We’re going to say is a one star and then maximum value is a five star.
And we are going to say that this is required.
And then we’re going to say presentation, uh, instructions, step size 0.5.
So we can do half star increments.
And I think maybe that’s all we need for right now.
And let’s move this to the top.
So the first thing that they do is they set their rating.
Let’s go see what this looks like on a review.
So we’re going to go to Jack.
Look at that.
So it’s a five.
I can do half steps all the way down to one.
All right.
And so let’s set Jack at a 3.5 star rating.
And let’s go ahead and hit update on him.
Next thing that we need to do is we need to go see how we’re going to deploy this in the actual template.
Now it would be a little bit complicated to do this from scratch.
I’ve actually done it before in a previous tutorial.
So we’re not going to rehash this.
What I’m actually going to do is I’m going to get rid of these icons in the header and I’m going to go into frames and I’m going to search for rating.
And I’m going to bring in a rating alpha frame.
And this is going to do some of this heavy lifting for me.
I’m going to stick that in the header here.
And you’re going to see that that’s going to bring in some star icons.
Now what this frame does is it uses a combination of CSS and it also uses a data attribute called data rating to bring in the actual rating from the custom field.
And I’ll show you where it puts this in the HTML.
And then based on this rating, it uses some CSS magic to show or hide specific stars.
Okay.
We don’t want this data rating attribute to be static though.
What we want it to be is dynamic.
And so what do we want to use?
Well, we want to use the review rating.
It’s not here.
Why is it not here?
Pop quiz, pop quiz.
It’s not here because we didn’t refresh the builder after we created the field.
The builder doesn’t know that new field exists.
So let’s save our progress.
Let’s refresh the builder.
Let’s grab the star rating right here.
And let’s go back to the attributes.
And now we should see when we search for review, the actual rating.
Okay.
Let’s go ahead and hit save.
Let’s go to in-home training.
We’re going to review.
This is five stars.
Look at this Jack, three and a half stars, Jimmy, five stars.
This is the magic of data attributes and CSS, but really the magic and custom fields and dynamic data.
But this is really the magic also of frames where something quite complicated that would take me, take me, you know, at least 45 minutes to probably do by hand.
Okay.
Uh, 30 minutes to do by hand somewhere in there would take many, many people hours to do, uh, by hand is I just popped in a little frame called rating alpha and I’m like, and I’m good to go.
Okay.
Really, really, really powerful stuff.
Let’s say we want to drop Janice’s rating just to test this out.
Janice’s rating is going to drop the four stars.
Okay.
So what we’re going to do is we’re going to go back and find Janice.
Uh, let’s go to reviews and we have Janice right here.
We’re going to drop her rating to four stars and we’re going to hit update.
And then we’re going to go back to the front end and we’re going to go to services and we’re going to go to in-home training because that’s where her review is.
And we’re going to see that she now has a four star review.
So this is really, really, really awesome.
The way that this responds, the way that we’re using data attributes.
Let me show you what this is actually doing in the HTML.
Okay.
So I’m going to bring this up and you’re going to see that we have, um, here’s our product rating.
Here’s our header.
And then we have this thing called FR rating alpha.
This is from frames.
Here’s all of the stars right here.
But if we look up here, okay, let’s go collapse this, uh, testimonial card alpha.
Okay.
Here’s alpha.
Okay.
I’m sorry.
Yeah.
Right here span.
Uh, here’s the data rating.
Okay.
Data rating equals four.
That four is being put in by dynamic data by bricks.
It’s injecting it in this data attribute called data rating.
And so if it was three and a half, three or three or whatever, notice that when I update that field, look what happens to the stars.
The CSS is, and the CSS is a little bit complex.
Again, you can see me build it in the, in the video where I walked through this step-by-step from scratch.
Um, but this data attribute, the CSS is responding to that value to show or hide the appropriate stars.
So very, very, very flexible, very dynamic, obviously.
And I will say one thing about user experience, about salesmanship and workflow of how somebody is using a website.
A lot of people like to put a reviews page together, which is fine.
You can put a reviews page together if you want, but when I’m a customer and I’m looking at a specific service, my, my watch is calling me.
I’m looking at a specific service.
I want to, I want the social proof for that service.
I want to know who has used this particular service.
I don’t want to see generic reviews.
I don’t want to see no reviews.
I don’t want to have to navigate to a reviews page.
I’m interested in this service.
Show me the reviews related to this service on the page that I’m already on.
That’s exactly what I just showed you how to do.
And I would recommend you do this on every single website.
I do this on every single website.
Relating reviews to services and products is insanely important for conversion rate optimization and sales and on and on and on and on.
Okay.
So this is a really, really, really good practice to employ.
Like I said, I deploy it on every single website.
All right, guys, this is going to have to be the end of episode two.
We’ll be back with episode three, or we will continue on this journey of how to build a dynamic modern website.
Thank you so much for the support.
Again, I love all the comments.
I love, of course, all the likes.
Mainly, I want to make sure that you’re subscribed so that you can get this goodness in the future.
You don’t want to miss any future videos.
So hit subscribe, hit the notification bell, and I will see you in episode three.
Peace.
