PB101: L15 – Complete Walkthrough of Templates & Components

0:00:00 In lessons seven and eight of this series, we talked about dry development practices. Don’t repeat yourself. But we talked about it mainly as it relates to styling. We talked about classes and variables and BIM and tokenizing your styling.

And I said that if you follow those practices, you are going to elevate yourself above the vast majority of people who are building websites these days, especially people who are building websites with page builders. Well that same elevation, that same game-changing content that was in episodes seven and eight is found in this episode as well. Except instead of talking about tokenizing your styling and having global control over the styling of pages and elements on those pages, we’re talking about having global styling over the content, the HTML, the JavaScript, the PHP of various aspects of your website and generating content dynamically from one source of truth. This is the ultimate in scalable, maintainable development practices. This rounds out all of those skills and will truly elevate you above the vast majority of people.

In fact, you’re going to be elevated above what most page builders are even allowing these days by watching this video. Because you’re going to understand something that even most page builders aren’t even offering yet. But it is coming. I will tell you, it is coming. They are catching up, but they’re a little bit behind.

But you’re going to be ahead of the game. You’re going to know exactly what’s coming and exactly what the benefit and the purpose of it is. And I’m talking about components. And so in this lesson, we’re going to talk about templates and we’re going to talk about components. You’re going to learn the difference between the two.

You’re going to learn when to use templates and when to use components and how to mix and match templates and components. And by the end of this video, like I said, you’re going to know more than the vast majority of people who are using page builders. I do want to apologize though, it is a complex topic. The page builders, because they lack certain functionality and they don’t use terms properly, it makes it a little bit more confusing. It’s a difficult topic to teach.

And I will tell you this, this is about the eighth time I sat down to try and record this episode. I’ve had to delete all of the others because I said to myself, Kevin, you can make it easier, you can make it better, you can do it more efficiently. And that’s probably still true if I deleted this one and tried yet again. But at some point the lesson has to get published. So I’ve done my best.

If you have any questions, if you have any concerns, drop comments below. I am happy to jump in and help you out. Let’s start talking about templates and components. So let’s start out by defining what is a template? What is a component so that I can help you wrap your head around this stuff?

We’ll start with templates. A template basically defines a full or a partial page layout. Think about a blog post template. It’s like one of the most classic templates, especially if you’re using WordPress, which most of everybody watching this course is using WordPress. So blog post template, you should be very, very, very familiar with that.

Of course, we have service page templates, archive page, search results, 404 pages. These are templates. So when you hear the word template, you should think in your mind, I’m dynamically controlling the content layout, et cetera, of a page on a website. Okay? Components, on the other hand, define individual reusable elements.

Think about a header, a footer, a card, a form, a gallery. These things live on a page, but they are not the entirety of the page. They’re part of the page. We can create components and use those components on any page of the website. We can even use those components inside of a template.

That makes sense as well. And then components can actually live inside of other components. So think about a card component, we create a card component, you’re gonna see examples of this in just a minute. Think about a card component, and it’s a testimonial card or a review card or something like that. And so we create this sub component called a rating component for the star rating of that item.

And so we can nest the star rating component within the review card component. And that can make perfect sense as well. And this is what makes components so phenomenally powerful, especially when combined with templates. And so let’s talk about why you should care about any of this. Why should we take the time to understand templates and components, right?

Don’t we just want to throw pages together as as quickly as we possibly can? Well no, it turns out we don’t want to do that. We don’t want to do that if we care about things like scalability and maintainability which we’ve talked a lot about in this course leading up to this point. We’ve talked about the dry philosophy of development where you don’t want to repeat yourself. D-R-Y, don’t repeat yourself.

The thing is that we’ve talked about dry development mainly as it relates to styling on a website. Because that is a big side of it. We talked about classes, we talked about variables, okay? And tokenizing your styling. This is so you can maintain control over the styling of various aspects of the website from basically a single source of truth.

Now what we have to talk about is keeping our HTML, our JavaScript, our PHP, our content, keeping those things dry as well. And it’s templates and it’s components that allow you to do exactly that. So where we have BIM for CSS, we have components and templates for HTML, JavaScript, and PHP. And as you see these examples unfold, you are going to instantly understand this, I think. If I can do my job properly, it’s gonna click in your mind, and you are gonna be like, aha!

And once again, you are gonna be ahead of 95% of people who are using page builders. In fact, you’re gonna be ahead of 95% of the page builders themselves. Because the honest truth is, and we’re gonna see the limitations as we go through this in Bricks, page builders don’t even approach this the way that they should be approaching it. Some are catching on, some are catching on, but most of them do not do this stuff properly. And in fact, I’ve had conversations with page builder developers, and I have trouble convincing them that this is something that needs to happen inside of the page builder.

But once people get it and once people understand it, it will be in high demand. Webflow has proven this because they have proper components. Quickly is proving this because they are leading the charge in terms of WordPress page builders on components and proper templating. And Figma, outside of the realm of development, Figma has proven this inside of a design tool and the percentage of users using components in Figma is astronomical. And so I’m confident that this is just an education issue.

This is just a, it’s not clicking for enough people. The minute it clicks, this is, I will say this, the number one most important feature missing from most page builders. Okay? So let’s go through it and let’s see exactly why that is the reality. So we’re gonna go down and we’re gonna start with components.

We’re gonna talk about the three types of components that I’ve identified. And the first one is global. And I think this is when people learn about components and creating something that is reusable, that they have a single source of truth to modify, this is kind of like the classic, this is the go-to, and this type of component does exist inside of Bricks, and it does exist inside of a lot of page builders. This is not something revolutionary. A global component is the most basic kind of component aside from local, which local doesn’t even really give you any component functionality, but we’ll talk about that in just a second.

Global is just the most basic type of component. So what I’m going to do is I’m going to add a header component to this page. We can actually build the header together. And we’re going to turn it into a component. So let’s go ahead and let’s just start by doing that.

So I’m going to call this header component. And I’m just going to use my BIM classes to do this, okay? And I am going to add an image This is going to be our logo, and I actually don’t really need to add any other classes I can just let’s just add our base class you guys can see that what I’m calling this thing in fact I will name it over here as well, so we’re going to say that this is our header component And what I’m going to do is add a logo in so I’m going to add this logo right here and then inside of this component. I’m also going to add a Menu like a nav. Okay, so we’ll just add a basic nav menu Just like that and I’m going to use this class to make this display flex and we’re going to display it in a row Which is fantastic and then I’m going to space everything between and then I’m going to add a little bit of padding to this.

Okay, we’re just getting to basically what amounts to, you know, a header that we might want to use on other pages. So I’m gonna add a background color. That’s all we’re going to do here. So let me add something very, very, very light. Let’s do base ultra light, something like that.

And then I’m just going to hit save and I’m gonna view this on the front end. And we are going to see that I have what looks like a header. And because I have OCD, I’m just gonna change this to like 2M on all sides. I want a little bit more padding in there. Okay, so we have what amounts to like a header.

But if I duplicate this, notice we haven’t, I called it a header component, okay? I named it that in the structure panel. I gave it a class of header component, but it’s just elements on a page like everything else on the page. There’s really nothing special about this whatsoever. And by duplicating it, it’s going to reveal that there’s nothing special about this.

So if I want to add a phone number to this header, I’m going to say, add a text link, and it’s going to add the text link over here. And I can say, hey, this is going to be linking to an external page, and it’s going to be 1234567890 and I’m going to save and then I’m going to refresh and you see the problem here. Now I want you to imagine that you’ve used your header on every single page of the website. Clearly if we decide that we want to add a phone number, we don’t want to go to every single instance of the header and add that phone number manually. That would be an absolute disaster.

That would be chump-like behavior. Well, we want to foresee these things. We want to foresee these problems and say, there’s got to be a way where I can basically take this component and say, hey, this one iteration right here, this is the single source of truth. And then I want to be able to duplicate it everywhere else. And when I make a change to the source instance, all other instances get the exact same change.

And that my friends is what a global component does. And a global component, like I said, is quite basic. This is not the magic. This is not the special thing. This is just the basics.

So I’m gonna show you how to turn this, just, you know, very simple group of elements here into a global component. Okay so let’s go ahead and let’s delete the copy of it and let’s go ahead and right-click this and here is where the confusion is going to come in. You’re gonna see that it says, Seda’s global element. That’s not what we want to do. That’s just confusing and every page builder does this differently so just bear with me and you know if you’re using bricks then you’re gonna learn how to do this.

If you’re using another page builder, there’s probably a different workflow, but I’m teaching the concepts and what you should be looking for and what you should be asking your page builder to do. Okay, so we’re gonna save this as a template, ignore that word template because we’re really creating a component. And then it’s gonna ask for a template type, I’m gonna choose section, you need to ignore that as well. This is just not well done here. This is, I will knock bricks for this.

This is not well done. And I’m going to say save as template. And notice it saves what is called a header component because I named it header component. You can name these whatever you want. It uses the name that I used in the structure panel.

But I have now created a header component, okay? So I’m going to go ahead and hit save and we are going to refresh the page. And I want you, I want to come down here and I want you to see that this is still as I left it. It is still exactly as I left it. Nothing special has happened yet.

Okay, so I actually have to remove this from the page. I actually want to go up here and I want to insert, again, wrong terminology, what is called a template. And this is basically like a template part and then I can go in and I can insert my Actual I can choose. Hey, I want to insert my header component So now I’m going to duplicate the instance of that component and now go to the front end You see I have two headers now What did I do before before I said I’m gonna add a phone number to this header and then we saw that it did not get added to anywhere else. And so I am going to now see if we can edit this header and see if that change shows up in these instances of the header.

The only thing, and I will fault Bricks again now, proper component functionality should allow me to make this change inside of the canvas. Bricks does not do that. In Bricks, I have to go to a magic area. You’ll hear me use the word magic area quite often. This is a derogatory term for the most part.

I have to go to a magic area called templates no less, which again, there should be a templates area, there should be a components area. Really, they shouldn’t even be areas, they should exist inside of the Canvas itself. But we don’t have perfection yet in Page Builder land. So I’m going to edit this header component, which is basically me editing now the single source of truth for this component. And so if I remove this link right here, I remove that and I hit update and we go to the front end, I should see the phone number gone from both of these instances.

So I hit refresh and there you see, both of them are gone from these instances. This is how a global component behaves. And again, I’m not worried about the styling. The styling of this header, I already, before it was a component, I already had control over the styling using Vim classes, right? I could always change the background color of all of them.

I could always change the padding on all of them. That’s not the important part of components. The important part of components is that I was able to manipulate the HTML. I was able to add a physical element into all of these components at the exact same time or all instances of the component at the exact same time. If there was JavaScript happening within this component, I could change the behavior of the JavaScript across all instances of the block.

These are not things you can do with CSS. You can only do this with component-based functionality, of which this is a global component. There are other types of components. This is how a global component behaves. Let’s review again.

It gives you the same styling, the same layout, the same content everywhere. There’s a single source of truth for everything. Let’s move on and talk about local components. This is actually probably the most used type of component across page builders, even by people who have no idea that this is what they’re doing, okay? A local component gives you a predefined starting point to work from that’s mostly independent of other instances of that component.

And then of course, the only exception is when you use classes to style elements, okay? So think about having a library of pre-built, pre-done elements, okay? This is actually what my other product frames is. It’s a whole library of local components where you just know, hey, all right, I want a testimonial card, for example. I don’t wanna build it from scratch.

Or if I do build it from scratch, I wanna save it to a library so that when I need to use it again, I can just quickly call it up and I don’t have to rebuild it on every single page. This is effectively a local component. So I’m gonna go up to my templates here and I’m gonna demonstrate this by actually using frames because I don’t want you to watch me build every single little component here. So I’m gonna go up to templates, I’m gonna go to remote templates, I’m gonna type in testimonial, and I’m gonna type in grid. I wanna see my testimonial grids.

I’m gonna use testimonial grid alpha. And you see right here, in fact, I’m going to delete that because I’m gonna do it again. I wanna hit import images when I do this. So I’m gonna say testimonial grid and I’m gonna choose alpha, but I’m gonna say import images first and I’m gonna insert this and now it’s gonna come with the avatars. That way we can kind of see a complete card here.

All right, so I’m gonna go ahead and hit save and then I’m gonna refresh and on the front end, look guys, in seconds, I have a really nice testimonial card to start from. And if you don’t know, the philosophy of frames is these are all unstyled. They’re what we call unopinionated. We don’t add a bunch of opinionated styles because then when you’re trying to create your own design, you have to undo all of the opinionated styles and then re-add all of your styles, and that’s not efficient. That’s working backwards before you can work forwards.

What we give people with frames is clean code, accessible, common layouts, really well done, but unstyled, so that you can add them and then immediately start styling them. And by the way, they come complete with BEM classes on every single element. All the HTML is proper, you got your P tags properly in here, you’ve got your figure, you got everything going on is already done for you. 60 to 70% of the work of doing something like this is done and all you have to do is style it. And remember, this is not a global component.

Okay. So it is, if I, if I just move something around in a card, like I move this wrapper down here, nothing, that’s not going to happen to any of the other cards. Okay. 0:19:15 Why?

0:19:15 Because this is not a global component. It’s a local component. I do still have control over the styling of all of them, but this is not, you know, it’s, this is just CSS. We’ve already talked about this, right?

So if I go in and I change the background color and I choose something ugly like this, that’s not that bad, whatever. Notice they all changed at the exact same time. Padding, gaps, all of that stuff, styling, no problem whatsoever. This is a local component, the most basic kind of component that exists. It’s still a component because it’s still, look, even the classes, we’re calling it Testimonial Card Alpha, and we’re styling it a certain way that is different from other elements on the website.

So I think in terms of components, even though there’s really nothing special about this, I think of it as a component. It could probably help you to think about it as a component. And then there’s this, there’s this, a local component can be turned into a global component and a local component can be turned into a dynamic component. So you can have an entire library of local components that can then be morphed into being global components or morphed into being dynamic components is very very very powerful. So what we need to do now is we need to talk about dynamic components and dynamic components are the true powerful component.

Local components great they save time all of that good stuff especially when they have all their BIM classes already attached to them, saves a tremendous amount of time. But there’s not a ton of magic there. It’s just workflow efficiency to the max, right? Global components introduce the magic of I can actually globally control not just the styling, but the HTML, the JavaScript, the PHP, everything from one single source of truth across all instances of that component. That’s a little bit magical.

But dynamic components introduce the rest of the magic. And unfortunately, this is the functionality that doesn’t exist in Bricks, that doesn’t exist in Oxygen, that doesn’t exist in Elementor or Divi or really any other page builder. There’s Quickly and there’s Webflow. Those are the two that I know that are doing this properly right now. And it is, I’ll say it again, the single most important missing feature from page builders, period, end of story.

And when you wrap your head around this, and I’m gonna do a whole video on them using Quickly to demonstrate, not in this video, but in a follow-up video on the channel, you’re gonna easily see that this has got to come to Page Builders ASAP. Okay. All right. So what is a dynamic component? A dynamic component gives you the same styling, the same layout, but with unique content.

And it still gives you, as you’re putting in unique content, it still gives you the global control. Okay. And so we have to really talk about this in a little bit more detail. So I have these cards right here that are already on the page. Imagine we have a card global component.

Well it wouldn’t make sense for these to be a global component because then every card would say the exact same thing. Just like every instance of this header looks exactly the same and has the exact same content within it. It’s not like I can have a different phone number in every header. When I change the phone number, the phone number changes in every instance of the header because that’s how a global component works. That won’t do me any good for something like feature cards or these testimonial cards.

If I made these a global component, what I’m going to show nine testimonials that all say the exact same thing? That’s not good, right? So what I need is the ability to, let’s say we’re doing the testimonial or just this card right here. I need the ability to put unique content. So this can say card one, card two, card three, card one, card one, card one, because you would never want that to happen.

Card one, card two, card three, with unique content. In fact, let’s just go ahead. Let’s go to website Ipsum just so that you can see that this content is actually unique and that’s what we’re wanting. We don’t actually want a duplication of the content. So I’m gonna grab this right here and I’m gonna drop this into the third one.

Perfect, okay? So we see completely unique, the unique icon, unique heading, unique text across all three cards. The problem is in Bricks, in Oxygen, when you make a global component, they allow you to unlink an instance of it. So I could make this a global component and then simply unlink them, but that’s basically just like using a local component now, right? And here’s the problem with it.

While I can then put unique content in, the minute I decide that, you know what, I need to change the HTML of our card component because we’ve decided we actually want to add a call to action link inside of this particular card component. So I’ve unlinked them in order to change the content. I’m going to add now a link. So let’s go text link and we’re going to call this call to action. Okay, call to action and I hit save and you see that none of the other instances of these cards got the new link.

They all should have gotten the new link if it were a true component, but they didn’t. When I unlink them in order to edit the content, I can never link them back. They are completely independent now of the source component. There’s no tie-in. Because think about using these cards all over the website.

Maybe you use 60 of them, 70 of them, 80 of them, and then it’s decided, oh, we actually need to add a link to all of those cards. You gotta go one by one by one by one by one by one by one for days, however long it takes, to add a link manually to every instance of that card. This is not solved by CSS or BIM or global components or local components, it’s only solved by dynamic components. And the way dynamic components work is you say, I’m making a dynamic component, and then you effectively assign what are called properties, but they’re internal custom fields to this component. And that allows me to map content to specific areas of the component uniquely without unlinking its global control.

And this is really, really what we need. And I’m gonna, again, I’m gonna make a whole different video on it. I’m gonna move on because we need to talk about templates. But this is what we need inside of Brics and Oxygen. Right now, we do not have the component functionality that we actually need.

Okay, I’m gonna go down to templates now. So they’re just like components, there’s a couple different types of templates. Template type number one is a full dynamic template. Okay, so a full dynamic template dynamically generates the entirety of the page layout and content. Changes can only be made via the source template.

A good example is a blog post template. Okay, so I’m going to go back into WordPress and we are going to go look at our blog post right here and we’re gonna trash this hello world we’re gonna make a blog post called this is my awesome blog post and I’m gonna go to website ipsum to grab some body content for it and what we’re gonna see here is a way to use a template to dynamically generate an entire page layout okay complete with unique content and all of that. So I’ve got a heading, I’ve got text, I’m gonna come over here and I’m gonna set a featured image on this. Here’s our images from back when we were doing our other lesson, okay? And so I’ve got a featured image for my post, I’ve got a heading for my post, I’m gonna go ahead and publish this.

And then I’m just gonna view this post. And as you see, Bricks, by default, just gives us kind of like, I don’t know, it’s alright, it’s like there’s nothing really special about this. Clearly there’s a lot of design issues, a lot of layout stuff that we would have. We have to go create, basically there’s no template on this site controlling our blog post except for what Bricks just throws in there by default. If I go back over to the magic area, so let me get out of this blog post, go into Bricks and templates, you’re gonna see we don’t have a blog post template in here.

There is no template controlling our blog posts. So I’m gonna hit Add New, and I’m gonna say Blog Single. This is how I name mine. So this is associated with the blog, it’s for a single post. So let’s call it a single post so everybody’s on the same page.

Okay, then over on Template Type up here, I have to go over and choose Single. Okay, then I’m going to Publish and I’m going to edit with bricks and we’re going to see a completely blank slate to work from. So I’m going to hit save and then I’m going to go over and I’m going to refresh and you’re going to see, okay, I created a blog post template. I even saved it. It’s blank.

Why am I still seeing this? And every builder workflow is going to be different, but every builder is pretty much the same in the sense that when you create a template, you have to assign the template to an area. Otherwise, the builder doesn’t know where you want that template to apply to. So what we have to do in Bricks is we have to go up to our settings, template settings, conditions, and say, hey, I want this to show and it’s going to ask you where. Do I want it to show on the entire website?

No. This is a blog post template. Do I want to, do I want to display it with the front page? No, this is a blog post template. How about with a post type?

Ah, that’s starting to make more sense. Then I come down here and it’s gonna say, hey, what kind of post? Well, we’re gonna say posts. That’s your default WordPress blog posts, okay? So I’m gonna go ahead and hit save on that.

And so now my blog post, which we see we’re on, has disappeared, right? Now, in order to get it to reappear, what do I have to do? And this is what you have to understand about templates. A template is going to dynamically generate a page. If I add a heading here, we’re going to bring in new terms for you.

You’re going to hear the word dynamic. You’re going to hear the word static. All right, dynamic versus static. This is a static heading right here. I’m going to make it H1 and it says blog post heading, just like that.

And if I hit save and I refresh, you’re gonna see blog post heading. The problem is this was not the heading of the blog post that I’m looking at. It should say, this is my awesome blog post right here, but it doesn’t say that. Why doesn’t it say that? Well, because I just wrote this content statically.

What I need the template to do is pull content dynamically to say, hey, go to a blog post, whatever blog post the person happens to be looking at at the time, go into that, pull that blog post and print it on the page. That’s what a template effectively does. And so we can tell Bricks, hey, don’t put static content right here, put dynamic content. So I clicked this little lightning bolt, and then it says, what kind of dynamic data would you like us to pull into this template? And you say, well, I want you to pull my post title.

So I’m gonna go ahead and hit save, and I’m gonna refresh, and immediately this is my awesome blog post. Now, what about the body of this blog post, right? So there’s something called a post content element. This exists in most page builders. I’m gonna put this inside of the container as well.

And then it’s going to say, where do you want to pull from the builder or from WordPress itself? Well, guys, if we go back to edit this actual blog post, this is within WordPress. It’s not within bricks. It’s not within the page builder. It’s within WordPress.

So I need to pull that content from WordPress. And so I’m going to go ahead and hit save. And I’m going to go back to my template and now you see it pulled in my blog post content. I’m dynamically generating a page. Now what is the benefit of this?

What is the benefit of this? Well, let’s go back and let’s add a new post. This is my newest, awesomest blog post. And then we’re going to have some different content here. We’ll just use less of it, okay, to make it unique.

And we can close that out. Let’s close that out, close that out, close that out. Okay, I don’t want a gazillion tabs open. We’re just gonna bold this to make some different things happening. We can even drop in maybe an image here.

So let’s drop in this girl right here. And so we’re gonna hit publish, hit publish. And now I wanna view this post on the front end, it’s already being displayed in my template. Now what you would want to do, this is a way for all of your blog posts to have the exact same layout and you have one single source of truth for all of your blog posts. I’ll tell you this right now, and I’m using blog posts as an example because it’s the biggest mistake that beginners make when they start using a page builder.

They use the page builder to build blog posts. And with blogging, you tend to have a lot of them. You know, you might be doing an article a week, a couple articles a week. This quickly adds up to dozens and dozens and dozens and dozens of pages, really what are posts, okay? And so then you decide, I wanna switch page builders or I wanna switch whatever.

Well good luck my friend, you’re going to be editing every single one of those blog posts individually. If instead you make a blog post template, you have one single source of truth for how a blog post looks and all of the content just exists in the WordPress posts area and you pull it dynamically into the template and then you can change the template at any time and every blog post on the website will change how it looks in an instant. That is scalable, maintainable development practices. This is why we use templates and we don’t create static page after static page after static page with static content, okay? All right, so what I’m gonna do now is I’m gonna demonstrate an example of this.

I’m gonna delete everything that we’ve done. Frames gives you, and this is why I say we can take what amounts to a local component or a local template in this case, and turn it into an actual, a real template with dynamic data. So I’m going to go into Frames, and I’m going to search for blog posts, and I’m going to choose blog post Charlie. And you’re going to see that it is in fact going to pull this in, an entire layout for my blog post. And I’m gonna click on here and I’m gonna tell it, hey we need to grab our featured image.

All of the other content is already dynamically done for you. I’m gonna say this needs to be the full image right here. Okay and then I’m gonna go ahead and hit save. So let’s put our featured image in our post. How about this girl kicking.

Hit update and then we can go view it by clicking this link and look in the background there, that featured image is now inside of this header. And it’s got the author, it’s got the date, and then it even has something that we can make a custom field for. It’s a blog post template, I just got it instantly. And if I don’t want that little bottom piece on all of my posts, like for this call to action down here that’s waiting on content and design, I can just delete that and say, hey, I just want the, and maybe I don’t even want the author card here. So I can delete the author card.

I can go ahead and hit save. And I’m making this change to this one single source of truth so that if I go back and look at my first blog post that I made, let’s go back to our post area. This is my awesome blog post. That was our original. It uses the exact same template.

I’m able to change, it doesn’t matter if there’s one post or a gazillion posts, I’m able to change them instantly with one template, one single source of truth for those elements. So we have a full dynamic template, that’s what you just saw with the blog post template. Then we have a partial dynamic template. A partial dynamic template generates part of a page dynamically, while the user can determine the rest of the page content statically. Okay, so this says, imagine a service page where the hero will be generated by a template, but the user can determine the rest of the page content on a per page basis.

Okay, so I’m going to go back out here and we’re going to deal with a custom post type now. You learned about custom post types in a previous lesson, so this shouldn’t really be new to you. The only difference here is I’m gonna use ACF instead of MetaBox. I use MetaBox in a previous lesson, now I’ll use ACF, Advanced Custom Fields. So I’m gonna go into post types, I’m gonna add a new post type, and this is gonna be called services.

It’s gonna have a singular label of service and a post type key of services. I think that’s pretty much all I have to do, okay? You’re gonna see services end up right here in the panel on the left-hand side. Then I’m going to add a service, it’s going to be service number 1, and then I’m just going to hit publish here. We’ve created a services custom post type and we’ve added a service to it called service number 1.

Now, what we want to do is in this scenario where we’re creating a partial dynamic template, not a full page template, just a partial page template, we want the hero section to be controlled by the template and custom fields. We want the rest of the page to be generated statically by whoever’s building the page, all right? So the way that we’re gonna do this is we’re going to create first a template, okay? And we’re gonna create add new, and this is gonna be called service page Alright, and then we’re gonna say that this is gonna be for a single page and we are going to hit publish We are going to edit with bricks We are going to go up here and we are going to assign it remember you have to go to your conditions and say hey This is the area of my website that this template is going to apply to Once again, I’m gonna choose post type, but this time I’m going to choose services instead of blog posts because I want this to apply to our services pages. Okay.

All right. So now I’m going to say save here. And then I can also, by the way, in Bricks, this is different in every page builder, I can choose which service page I want to preview when I’m building the actual template. So I can go down here to single poster page and I can say service number one, apply the preview. And that’s what I’ll be previewing as I build this template.

Now what I want to do is add a hero section. Once again, I don’t want to build this from scratch. That takes too much time. So I’m going to go down into templates and into frames and I am going to search for hero. And I’m just going to choose any hero section that I like.

We’ll choose a nice easy one like hero alpha. Okay, so I’ve got hero alpha in here and it’s got an inner wrapper and I’m actually going to, I don’t want all of this hero padding, I just want normal section space M. I can actually just remove the padding, it’ll give me the default padding for automatic CSS, okay? So now I’m gonna preview this and that is pretty good. The only difference is here, now let’s see, let’s do the test.

Is this showing up when I view a service page? We can close this out, we don’t need it. Close the post out, we don’t need it. Close this out, we don’t need it anymore. We don’t need that either.

Okay, so let’s go back into WordPress, go to my services, and I’m going to view service number one. And you see it says, your hero heading. It’s all the static content that was in the template. And this is what we would expect because we have no intention of having static content here, but we haven’t told the template to pull in any content dynamically. Well, where are we going to get this heading from right here?

Well, we should get the heading from the title of the service, I would think. So within the template, instead of it saying your hero heading, we’re going to click the little lightning bolt and we’re going to say post title, just the same as we did on our blog posts and now you see when I refresh the service page one it says service number one it’s building the page for me dynamically. I also want to go ahead and I want to put a background color on this hero alpha right here so we’re gonna go with we’re gonna go with base maybe ultra light something like that I’m gonna hit save let’s go check and we do get that on the front end. Now how do we get this to be populated with like an introduction to the service, what we call like a lead paragraph? And how do we get this button maybe to have text?

And maybe we don’t even want two buttons, maybe we just want one button, okay? I can delete the secondary action, I will just leave the primary action in here. So how do I get text for this? Where do I pull it from? Because these are not fields in WordPress that I can just pull data from, unless, unless you’ve maybe heard about these things called custom fields.

This is a prime example of where you would want to create custom fields. Okay so I’m gonna go ahead and hit save. I’m gonna go into the back end ACF and I’m gonna go into field groups. I’m gonna add a new field group called services and then I’m gonna start creating some fields. So my field type is going to be a text area and my field label is going to be a service lead like this.

Okay and we don’t even need a default value and then I’m going to add another field. This is just going to be a text field and it’s going to say call hero cta text just like that. And then I probably also want a to be able to control the link as well. So I’m going to say hero CTA link and that’s it. Let’s just save that.

Now just like templates, when you’re creating a custom field group, you have to tell WordPress where you want these fields to show up. So I have to assign them to an area just like I did the template. So I’m going to come down here and you can see right under settings it’s already waiting for you to tell it where to go. Just assign it to your services pages and hit save. Now when I go to services and I go to all services and I edit the service, look at that, that’s fantastic.

I said, I don’t know why I said, it’s actually exactly what we want to see. We see the service lead box, the hero CTA text, and the hero CTA link. Now what I can do is say, this is my custom service lead paragraph for service number one. How the, is it, I’ll say, is it showing up in the template? Okay, and then hero CTA text, I say, buy now.

And then I have a link that I can put in, I’m just gonna put in a pound sign as a placeholder, you can put in the link to wherever the link is supposed to go. Okay, now let’s view the service page. And you see, it clearly doesn’t have the lead and it clearly does not have the button text. Why? We can also make sure that this service has a featured image.

Let’s bring in a featured image over here. Maybe this is actually going to be Women’s Kickboxing. That’s the name of our service. I’m going to hit Update, Refresh. The title changed to Women’s Kickboxing because we’re already pulling the title in dynamically, but this paragraph did not change.

I don’t see an image and I don’t see button text. Why? Because we haven’t programmed the dynamic data for those yet. So I’m gonna click on this paragraph and I’m gonna get rid of it. And I’m gonna click the little icon right here.

I actually need to refresh the builder real quick. Let me refresh the builder and then I’m gonna come down because the builder doesn’t have access to those custom fields that we just created. So within content I’m gonna get my lead paragraph again, hit the little lightning bolt. And now I can go all the way to the bottom and you’re gonna see ACF service lead, hero, CTA text, CTA link, look at this stuff. So I’m gonna say I want the ACF service lead, all right?

And I hit save and it says this is my custom service. It even gives me the preview within the builder. Now I’m gonna come to this text right here. I’m gonna remove it, I’m gonna hit the lightning bolt, I’m gonna scroll down and I’m gonna say that’s supposed to be CTA text. And then you know what, the link where it’s supposed to go is supposed to be the CTA link.

And then I’m going to hit save. Oops, that was my little, my little notion fly out there. We don’t need you notion right now. Go back to where you’re supposed to live notion. The last thing I’m going to say please pull in the featured image of this service page.

And now when I go view women’s kickboxing, look at what I get. Completely dynamic content generated on the fly. And what is good about this? Okay, so I’m going to go back and I’m going to add another service. We’re going to say add new service and we’re going to say this is going to be Brazilian Jiu-Jitsu.

Perfect. Okay, this is an intro to Brazilian Jiu-Jitsu. You should definitely come sign up at our gym. The worst copy that’s ever been written in the history of copy was just written right now. Hero CTA text, sign up.

See how even we’re using the same template for every page, we can actually have unique content on every instance of the page. And why is this a template and not a component? Because we’re controlling the entire page. We’re not controlling one little tiny section of the page. Okay?

All right, so now I’m going to refresh. We’re gonna look, that was service number one. I’m gonna go back into services here and I’m gonna view Brazilian Jiu Jitsu. Okay, and you can see, hey, look at this, we’re missing a featured image though. So what that lets me know is I got to go over here and assign my Brazilian Jiu Jitsu featured image to the service page, go back and refresh and now look at this.

So if I view service one, which is women’s kickboxing, I get this. If I switch to Brazilian Jiu Jitsu, I get this. That way every hero is very consistent. Now, why are we not making an entire page? Why did I say that this is a partial dynamic page?

Because there are times where you want the hero to be forced into looking a certain way, but then you want the freedom to do everything else on the page using the page builder on a page by page by page basis. And that’s exactly what I’m going to show you right here. I’m going to go Bricks, Templates, and I’m going to open our service page template. Okay, what I need to tell this template is, great, you’ve done this, which is going to be forced onto every single page. And we have custom fields that allow us to control the data that goes inside of this.

But what I want below this hero is completely custom work. From whatever we want to do, the template should not interfere with any of that custom stuff that we’re going to do down below. And so in order to do that, I need to go back to the post content, and I need to click it, and this time, instead of saying pull the content from WordPress, I need to say pull the content from Bricks, the page builder. So I’m going to click that, and I’m going to click save, and then we’re going to go view a service. You’re going to see that nothing has changed, except for the fact that everything below here now has a container that will pull in page content from Brics.

So now, what I need to do is first go to Brics settings. I need to go to general post types right here. I need to activate Brics to be able to be used on services. Because that was a new custom post type we created. Bricks isn’t available for it by default.

We need to make it available. Now I can go to services, Brazilian Jiu Jitsu, edit with bricks. And I am just going to start adding some content. So we’re going to say like a heading. In fact, let’s just go ahead and let’s just use frames.

We’re just going to pull this in and let’s say I want like features, okay? So a feature grid, I can even go here and just say, show me all my feature grids. Instead of just the grid, I want the feature section popper right here. Okay, perfect. So that gives me a little bit of an intro.

I don’t need that intro, so I’m just going to drop it out. Our gym doesn’t really work with any other brands. I can just drop that out. But I do have the feature cards that I wanted. Okay, I want to add another section here.

Maybe this is going to be a content section. So I’m going to go to remote templates. This is frames again, and I’m going to add a nice little content section in here. How about content section, Foxtrot, check this layout out. Then I can go down to templates.

I can drop in another section. Maybe we want yet another content section. I can do something like content section golf down here. Look at how quickly I’m able to just start assembling a page. Now we’re going to go refresh and look at this.

It’s all there, but wait, can’t we have another page? Like what if, is the, well let’s ask. This is what the Brazilian Jiu Jitsu page looks like. Is this what the other page looks like by default? So let’s get out of here.

Let’s go into services, all services, and look at women’s kickboxing. Nope, women’s kickboxing is a blank slate waiting for whatever we wanna do on the women’s kickboxing page. It has the same hero as the jujitsu page right here. See, they both have the same hero, but they can both have completely unique content below that hero. And I can make any combination of this that I want to.

It’s very, very, very powerful. So now I can say, edit this page with bricks, and I can start building my temp, my, not my template, my actual page here using frames. And so I can go feature and we’re gonna say, you know what, for this one, I want feature section Sierra on here. So this is full width alternating cards, just like that. I need to turn on this little code block right here that comes with it.

Okay, what else can we add? Maybe we go right into testimonials, okay? I need to go into remote templates, testimonials, and I wanna grab, let’s say this section right here, Testimonial Section India. So now I’ve got a little sticky CTA over here, I’ve got all my little testimonial cards. All right, I’m gonna go ahead and hit save.

I can even throw a BG Bass Ultra Light on here to start getting some background colors in. Obviously, they’re all unstyled, they’re waiting for styling to happen. But now I can go view the Women’s Kickboxing page, and I’m already starting to build this page out in seconds and it’s all unique content except for the hero. This is a perfect example, let me go back now to our main training area, a perfect example of partial dynamic templates. Alright, the last thing we need to look at is a full local template.

So imagine those frame sections that I was adding to the page. Imagine if I had full pages that were already ready to go. Like here’s homepage alpha, homepage Bravo, homepage Charlie, here’s service page alpha, service page Bravo, service page Charlie. You click, bang, whole page done for you. All you have to do is edit the content, edit all the styling, get it styled up the way that you want, hit publish, you’re ready to go.

That is a local template. And just like components, let’s recap real quick. We have three different types of components. You have your global components, your local components, your dynamic components. Then we have three different types of templates.

You’ve got your full dynamic template, like your blog post template. You’ve got your partial dynamic template where one piece of it is dynamically generated and the rest of it is statically generated. Then you have a full local template where the entire thing is static, but it’s already done for you and it saves you a whole bunch of time. But just like components, you can turn a local template into a partial dynamic template or even into a full dynamic template. So having a library of local templates that are well coded and unstyled and accessible that you can just add to a page in seconds and you can move things around if you want to.

And then anything can be turned into a global template or a partial dynamic template. That’s very, very powerful and it saves you a tremendous amount of time. Okay, we’ve got two beware things that I wanna talk about. But before we get there, I wanna quickly add a header and footer to this website. The header and footer are two different templates slash components that you are gonna wanna put on every single website that you build.

And I also need to clear up some confusion here about why I built a header component, but we’re actually gonna add a header template. This is a big point of confusion for a lot of users. Okay, so I’m gonna go out back to the admin area, and I’m gonna go into Bricks templates and you can see that we have a header component here but we don’t actually have a header. When I go to these women’s kickboxing page and Brazilian Jiu-Jitsu page, there’s no header here. Even though I made a header component, there’s no header here and there’s no footer either.

If I go all the way down to the bottom, there’s no footer, right? So what do we do here? Well we need to add a header and what we’re doing is we are legitimately adding a header template right now okay and so I’m gonna go over here and select header to tell Bricks this applies to my website header and then I’m gonna go ahead and hit publish I’m gonna go to edit with bricks and now the question is do I create a header from scratch or insert an instance of my header remember we have an instance of the header here. It says that has no data. Oh, header component right here.

This is it right here. This is the header that I built. Notice that I can change it, I can edit it. It’s not the template version. It’s not the component version.

I didn’t say insert template and then click here and insert the header component like I did before to actually make it a header component. Because this is, and again, page builders make this more confusing than it needs to be really, I am, I do want to use a template here because I want to determine the outcome of pages on my website, right? And I said, whenever you hear the word template, think generating pages dynamically. So I do want this to be a template and I do want to use a normal section. If I use the template component here, I’m not going to be able to edit it.

Okay. So header component, remember I have to go now I can’t edit this. I have to go somewhere else. I have to go back out to the admin, back into the header component, edit it there, then come back to the header template and maybe do some things. That is an absolute nightmare.

It’s way over engineered. You don’t have to do that. You can just statically create a header inside a header template and then you’re going to go up to conditions Template settings and you’re going to go to conditions and say this is going to apply to my entire website This header right here, and I’m going to take out the template. Let’s actually use frames Let’s use frames to insert a header, so we’re going to insert a what is Basically a local component. We’re going to use header alpha here, so there’s my header right there I’m going to hit save and even though that is a local component, right?

I can, I can choose my menu right here. I can hit save. 0:55:20 Okay. 0:55:21

It’s in a header template that is told to apply to the entire website. So that’s exactly what it’s going to do. So I’m going to hit save. We’re going to go to women’s kickboxing, refresh. There is my little header bar right there.

And then when I go to Brazilian Jiu Jitsu and I click refresh, there is my header right there. And now watch if I even though it’s a local component right because it’s in a header template when I make a change to it like to the background color so I’m going to go to the background and we’re going to make this a dark header. So let’s just use our base ultra dark color and then I just need to swap this out maybe for our light logo. So I’m going to grab this light logo. Now remember, we’re doing this as a template because we want our header to change everywhere.

Okay, so I’m going to go to Brazilian Jiu Jitsu and now look, has a dark header. And then if I click on women’s kickboxing, refresh, dark header. So that’s adding a header to your website. You want to use a header template that controls the page. Every page of the website now gets the header.

We’re going to do the exact same thing with footer. So I’m going to go out, I’m going to go to Bricks templates, I’m going to add new, I’m going to add a footer, and over here we’re going to select footer right here. We’re telling Bricks this is going to be the footer of the website. I’m going to go into edit with Bricks, and then I am going to go up to frames, and I’m going to select a footer that I like. I’m going to use footer echo right here.

That’s going to bring in a really nice footer that is just sitting there waiting to be styled. And once again, I’m going to come up to go to template settings, conditions, add conditions. I want this footer on my entire website. I’m going to go ahead and hit save. We’re going to go to women’s kickboxing, refresh, scroll to the bottom.

That now has a footer. I’m going to go to Brazilian Jiu Jitsu. We can close that one out. Refresh, scroll to the bottom. This now has a footer.

This is the power of templating, guys. This is the power of templating. One source of truth affects the entire website or using conditions wherever you want to affect. Let’s go back to our lesson. We want to talk about a couple things to beware of and then we’ll do one last recap and get out of here and then you’re probably going to have to watch this two, three, four times for it to really, really, really sink in, especially the part about dynamic components.

And there will be more videos coming on dynamic components that will help you continue to get your head wrapped around that concept. Okay, first beware, prebuilt page builder components. Do not, do not, do not, do not use these. Okay, I hope I’m not unclear. Do not, do not, do not use these.

And I’m gonna show you exactly why. This icon box that you are looking at right now is a Bricks pre-made element. I’m gonna click the plus sign and I’m gonna type in icon box. All these page builders love to offer these things. Okay.

This is a prebuilt component. It started out like that and I styled it. Okay. And guys, it doesn’t matter if you style it with classes, if you use BIM, if you, none of that stuff matters. None of that stuff matters.

There is a major, major issue with all prebuilt components. Elementor, Bricks has, I turn all of these off in Bricks, all of these pre-made elements, I turn them off. I get rid of them, okay? Elementor, Breakdance. Breakdance is on a mission to market how they have 130 plus pre-made elements and they suffer the same fate, okay?

0:59:04 Look at this. 0:59:05 Imagine for a second, this is my icon box. You use this everywhere on the website.

You just love this icon box. Use it for your features. You use it for. . .

It’s on every page. Maybe it’s a 30-page website. And because it’s an icon box, it’s often used in a grid. You use lots of them, right? And they’re, like I said, they’re everywhere.

And then the client comes along a week later after the website is live. You’re done. You packaged it up. It’s live. And the client comes along and says, you know what I decided we need to do?

We need to add a call to action link to that icon card, to those icon boxes that are everywhere. We need to add, not just that, some of them need a ribbon to go across, like we want to say that this is a new feature or something, and we want a link to be in there as well. And you’re like, okay, no problem. You select that icon box, you go up to the add element, and then you type in text link, just like I showed you guys earlier when I built this component myself, and I click text link and what is this? What, hold on, I didn’t ask for that.

Click on that, click on the icon box. No, no, no, don’t tell me this is the problem. And I go to text link, insert it. Oh no, it’s off to the side. I drag it, drag it in there.

Oh gosh, I cannot get it in there. Guys, the prebuilt elements are a closed wall. If you need to add anything later to them, it’s not possible. You can’t do it. You are what they call SOL.

If you want to look up what SOL means, go ahead, look up SOL. Upper Creek without a paddle, another term that you might often hear, right? And there’s some a lot more derogatory terms. Something out of luck, for example, right? These things are marketed heavily because they save time, all right?

Now this, look at this, I built this card myself. I was able to add a link to it. I can go up here, text link all day long. I can add it in. Hey, I can copy this.

I can duplicate it. I can drag it into this one over here. If Bricks allows me to drag properly, there you go. I can drag it into the other one. I can do whatever I want.

I can add ribbons. I can duplicate the icons. I can have two icons if I want two icons. Guys, can I duplicate the, let me scroll down here. Can I duplicate that icon right there?

Can I have two icons instead of one? No, no. You’re only allowed to have what the pre-built element believed you needed at the time. And if they didn’t offer anything else, then nothing else is possible. You, by using these elements, this is so tremendously dangerous from a scalability and maintainability perspective.

I would say never, I think I said it clearly earlier, don’t, don’t, don’t, or never, never, never, whatever I said, never use these pre-made elements because once you’ve used them everywhere, every single one of them has to be, it has to be replaced individually. If just something as simple as add a link to it, add another element to it, it can’t be done. You would have to be out of your mind or not know what you’re doing or out of your mind, all right, to use these pre-built components everywhere across the website, knowing that they cannot be added to. Now, I can always remove an element if I want to, because I can use CSS to hide it, because CSS can hide HTML, but CSS can’t manufacture HTML. I can’t add new things to my elements when they’re a pre-built element.

And really, so let’s go to the argument of saving time. Oh, Kevin, it saves time. It saves time having all these pre-built elements. Let’s talk about saving time, okay? I’m gonna build this icon card right here.

So we’re gonna add a new container, or let’s just do this, frames. Hey, frames to the rescue. Why is frames different? Because frames is not a pre-built component. It is a pre-built component, but not in the same capacity.

It’s pre-built differently, okay? It’s pre-built using the builder, not some secret behind the scenes part of the builder. Okay, so if I want to insert those testimonial cards right up here, remember how quickly we inserted these testimonial cards? Well, the client comes along and they’re like, you know what, we wanna add a link to those. Okay, well with frames, let’s go to text link right here.

With frames, you can do whatever you want. There are no limitations, zero limitations. With this pre-built component from the page builder, it’s limitations all day, you can’t do whatever you want. You can only do what you’re allowed to do by the element itself. And we just spent at the beginning, go back and watch the beginning of this tutorial where we talked about dynamic components and how we wanna be able to change content individually, but still have global style control over.

That’s what we’re trying to work towards. These pre-built elements down here are the exact opposite direction of that. This is like, not only do you not have global control over these things, you don’t have any control over them. You can’t add any new HTML elements to this or additional functionality, whatever it may be. You are completely out of luck when you use pre-built elements, which is why I say never, never, never use them.

So somebody says, but that saves time. I could build this card in two minutes, but less than two minutes. I could probably build this exact same card. And then the difference would be, I can do whatever I want with it. If I save the two minutes by inserting a prebuilt component, look at all the time, it’s not going to save me later when like a chump, I’m going card by card by card, replacing them because the client asked for something that I can’t put into the card, because I save time on the front end using a pre-built element handed to me by a page builder.

Don’t, you do not want to live that life. This is a tremendously dangerous to use pre-built elements. That’s your first beware. What is marketed to you as saving you time is going to kill you in the long run, okay? And it’s going to kill your workflow kill your productivity kill your efficiency kill your maintainability kill your scalability Death and destruction, okay should be associated with these pre-built elements now your second beware pagebuilders that force styling Inside of components these are what I call classless pagebuilders not classless in the sense that they have no class, classness in the sense that they literally have no classes.

They don’t allow you to use classes the way that I’ve taught throughout this entire course. Instead, what they offer you are called presets. And they use presets in this special like templates like components-y area, but it’s not a real template, and it’s not a real component, and it’s not a real class. It’s just this thing that they came up with that has a tremendous amount of limitations. And they did this because they didn’t think people were smart enough to understand the concept of classes.

And if you go to giri. co and you go to my blog and you go find this article, Page Builder Global Presets are Weak, Limited and Unnecessary. I wrote an entire thesis, an entire paper as to why presets are horribly, horribly bad and classes are still the way to go as they have always been. So if you want the insights on why classes and why you should avoid presets and definitely avoid builders that force you into using presets highly, highly, highly for your education, even if you just plan on sticking with bricks and classes and all of that. Read this so that you’re on the up and up, so that you understand the underlying philosophy that more advanced users argue around these kinds of things.

And that keeps you safe, by the way. You wanna understand the underlying philosophy. So let’s do a little bit of a recap here. We’ve got, why are we using templates and components? Because dry, don’t repeat yourself.

BIM gives us global control over our styling via classes and variables. Templates and components give us global control over PHP, HTML, and JavaScript. Okay, this is how you build scalable, maintainable websites. And then we look at three types of components. You got your standard global component, like this, where you make one change to the source and all of the other instances reflect that change, along with the content that is in that element.

Then we come down to local, which is they’re completely unique and detached from each other aside from the styling, which is driven by classes. But we can do whatever we want with these components. We can turn them into a global component. We can turn them into a dynamic component in the right page builder, in a page builder that actually allows you to do that. Then we have our true dynamic components, which allows us to change content on a unique instance but maintain global control over the HTML, the PHP, and the JavaScript.

And then we have our three types of templates. Your full page template like a blog post template, a partial dynamic template like we saw with our service pages where partially the page is dynamically generated, but the rest of it is just complete, custom, static content, whatever I decide to put on there, that’s very, very powerful. And then type number three is the full local template where we’re not generating anything dynamically, we’re just saving time by using a library to pop in a full page layout, which then by the way could be turned into a partial dynamic template or a full dynamic template if we did want to start generating pages dynamically using that local template. Okay, and then we talked about beware of pre-built components. We talked about beware of builders that force you into trying to put your styling inside of components via presets.

You don’t want to live that life. And then we saw how to add a header and footer to our website. There’s obviously more that can be taught on templating and components. This is an introduction. It’s a bigger introduction than you will find almost anywhere else.

It talks about concepts that most other people are not talking about because I want you to be well ahead of the game, well ahead of the people that you are gonna be competing against. And I want the sites that you build to be far more scalable and far more maintainable than almost anybody else’s. And that is because you want to live the life of scalability and maintainability. It’s how you sleep well at night as a developer. And don’t have to go to bed saying, God, that client wanted a link in cards and I’m not able to do it.

And you’re just losing sleep because you know tomorrow your entire day is going to be straight up chumpville. Straight up chumpville, just manually changing box after box after box. The kind of behavior that makes you just want to jump off a bridge face first. You don’t want to live that life. Scalable and maintainable and clean and accessible and fast, that is the way to go.

And efficient, okay, all the stuff that we talk about here. Thank you guys for tuning in. I hope you got a lot out of this lesson right here. I know it’s a complicated lesson. I know it’s a lesson that’s hard to teach and hard to communicate.

I did the best possible job that I could. If you have any questions, leave them down below. If you have any comments, if you have any objections or challenges, if you’re just not understanding a part of this, I am happy, more than happy, more than happy to help you. Just comment down below and I happy, more than happy, more than happy to help you. Just comment down below and I will jump in.

Thanks.