0:00:00
What’s up everybody, welcome back. In this training, what we’re going to focus on doing and learn how to do for some of you is we’re going to take the service page that I created for digitalgravy.co. I recently redesigned that entire website and I have a new service page layout and I want to turn that service page into a dynamic template using MetaBox custom fields and there’s kind of a lot going on on the service page. So there’s going to be some problem solving that we have to go through but I want to show you guys how to create a dynamic template. Obviously the goal here is that we can add new service pages without going into the Bricks Builder. So while this takes a little bit more work and time up front it saves a tremendous amount of work and time as you add new service pages to the site and maintain existing service pages. So let’s go ahead and screen share. Let’s jump right in. So this is the Digital Gravy back end right here. I will show you the service page just so you’re familiar with the layout and you can see what we did with the redesign and also just talk a little bit about back-end architecture. Alright, obviously if you’ve watched any of my videos you know that it’s a really good idea to create a custom post type for things like service pages.
0:01:16
So I do have a custom post type here called services. If we click on that, we can see all of the services are already listed in. Now, there’s not pages for all of these items. So what I’ve done is actually done a temporary redirect of all of these pages back to our main services page, except for this one right here, which is web design. That’s the very first page that I worked on. So what I did is I built this page in Brics at the page level.
0:01:44
This is not a template yet. So what I like to do a lot of times, especially when I haven’t wireframed anything out yet, this is one of the projects where I was starting with frames and I was just building as I went because I was testing out the workflow that a lot of frames users are going to be using, which is just add the frames to the page, go ahead and style them. And so that’s what I did here, and I ended up with this. So we’ve got our hero section here with this slanted image that covers, that goes from the top to the bottom of that section. So this is absolutely positioned, and it’s tilted, obviously, all done with CSS.
0:02:22
And so we’re going to have to turn this hero section into a template. And this is part of the template as well. Basically I want most of my service pages, I’m not going to say all of them, the key ones are going to have a freebie of some sort along with a contextual video that’s educational for the visitor. And in this case with web design it’s the 21 most important features of a modern high conversion website and you can see that there is a freebie download and when people click on that it opens up a modal with a WS form in it where they can put in their first name, their email address and then they can get access. Now this section in itself presents a lot of technical challenges.
0:03:08
Number one, when you turn this into a template, how do we know which thing they opted in for. There’s only going to be one form controlling all of this. I will show you really quickly on the back end what I’ve done, at least to attempt to solve this. This is in theory at this point, but I’m pretty confident that it’s going to work. It’s the Freebie Services Template Opt-in Form. I’m going to go ahead and click on that. You can see that there are three fields, a first name, an email address, and a URL hidden field.
0:03:40
And what this is doing in WS Form is it’s pulling the URL that they submitted on into the form submission data. And then what I have is conditional logic that says if that URL contains web-design, that means they’re downloading the web design freebie, then I want to deliver the freebie Freebie email confirmation. So it’s a specific email confirmation for that situation and What I’ve done over here in the actions as I’ve set up the deliver freebie web design So that’s going to have the link to the freebie and all of that So somebody fills out the form WS form is going to say it’s going to check the URL It’s going to say does it contain web dash design if so, let’s send them the freebie confirmation email That’s kind of what’s going on there. And then on the SEO one. It’ll say hey does the URL contain SEO?
0:04:29
Let’s send them the SEO freebie, whatever that freebie happens to be. So that’s kind of how that’s dynamically handling these freebies. It’s really WS form handling it. Because if you try to handle it with the template, like you create a bunch of different forms and use a bunch of conditional logic. Oh man, that is, that just sounds like spaghetti. It’s like a nightmare of stuff going every which way, it just doesn’t feel very clean and manageable. To me it feels like how about we make all the logic happen inside the form itself. So we have one source for controlling all of the logic of our freebie deliverables and then we just embed our form into the template and we’re done. So that’s kind of the thought process there. So we still have to you know we still have to get all of this to be dynamic.
0:05:17
There’s still going to be some challenges, is what I’m basically saying. Then we’ve got this web design process overview right here and then we’ve got a, sorry, somebody’s apparently trying to break down my office door. It’s probably a young child. Okay, startled me for a second. Next we have this little call out quote, okay, that should be fairly simple. Then we’re going to do our portfolio. This is interesting here because this is based on bidirectional relationships. We relate projects to services so that when you see these projects here, it’s projects that are actually have web design as a relationship or whatever the service happens to be.
0:05:59
I don’t think there’s going to be any issues with those bidirectional relationships when we turn this into a template, but it’s something we’re going to have to test and verify and confirm. All right. And then we have testimonials. Once again, we’re doing bidirectional relationships dynamically. So when we’re viewing the web design page, these need to be web design testimonials, not testimonials for any other service or random testimonials. We’re trying to make all of this as contextual as possible. As you can see, we’ve got some background images in here.
0:06:33
Now, I’ve thought about this with the background images. To me, it’s like these are for decorative purposes only. They don’t need to change on a per page basis as far as I’m concerned. If they ever need to change in the future, I’m sure we can do that, but they’re very, you know, it’s just, it’s for the purposes of like just decoration. So, the testimonials are what are dynamic. The headshots here, that’s all dynamically pulled in. Those are obviously reviews or a CPT, a custom post type, and projects or a custom post type. This whole site runs basically through custom post types. And then we have FAQs and once again, the FAQs are dynamically related to services.
0:07:18
So it’s only gonna query FAQs that have to do with web design when you’re looking at the web design page. All right, so that’s kind of the extent of the template here. Oh, the other thing I do wanna say is, this section right here, there are going to be services where we don’t want a video and like a freebie. For example, maybe like digital, well I don’t know, I can’t even think of one off my, let’s look here. So like, hmm, I mean most of them, like UI design or UX design, here’s a scenario. Even though they may eventually have a freebie, this is a lot of work. It’s a lot of work to create a video, it’s a lot of work to create freebies. So there are going to be situations where I just want to publish the page and I don’t have a freebie ready yet, I don’t have a video created yet.
0:08:06
So what I really wanna be able to do is toggle that section. Because this is really the time consuming section. When I’m adding a new page to the site, I can add all this stuff very easy. But this is really gonna be a time consuming section. It’s gonna take a lot more thought and preparation. I don’t wanna delay the publishing of service pages while we’re waiting on this to be done. So I want to be able to just toggle it on or off. If I don’t have the freebie and the video ready I toggle it off. When the freebie and video are ready to be put in I toggle it on and then I can publish my pages anytime I want and I don’t have to worry about whether this section is ready to go or not basically.
0:08:43
So that’s going to be another aspect of this that we’re going to have to tie in. All right, let’s let’s go ahead and get to building and unfortunately because I’m screen recording I can’t really do well, I guess like yeah I can’t really do a dual screen thing because you’re gonna get kind of lost you’re not gonna see what I’m seeing. So I’ll just flip back and forth in in the tabs alright, so the first thing I’m gonna do is I’m gonna go to Meta box and we’re gonna go to custom fields and What we have to do is assign custom fields to these service pages. So I’m gonna hit add new and this is gonna be called service And we’re gonna say content I guess okay, so service Okay, we’ll do service page content something like that All right, and then what I want to do is I want to create a group I think and I know there’s problems with groups And dynamic data in bricks I believe it’s when a group is nested in another group.
0:09:40
If I just have top level groups, I think it’s gonna be okay. We’re gonna test that before we get too far into this, just to make sure. Because I don’t wanna shit show on my hands of having to go back and undo a bunch of stuff. So, first thing I’m gonna do is add a group. And we’re gonna call this group Hero. Basically what I want, oh good we’re already in the thinking stage. I don’t know what that was about. Alright the hero here, this is going to be the, we’re going to have to figure out names to all of these things, but basically every section is going to be a group. Alright so we have our hero and this is going to be a service page hero.
0:10:27
And I know this is very redundant, but a lot of times I do this just for clarity in the back end. When you’re looking at things like in the builder, dynamic fields, Bricks does a really good job. Actually this is really just PTSD from Oxygen, because Oxygen just takes all your custom fields and throws them into a modal. And it’s like good luck. So if you name things like hero here and hero here even though they are in two different groups. In oxygen it just says hero, hero, hero. You don’t even know which one is which.
0:10:56
Let’s not do that. Let’s try to get over our PTSD from oxygen. Let’s just see if we can get it to work the way that it’s supposed to. Alright so I’ve got hero here and I’m going to toss in another one. What should we call this? We’ll call this freebie offer. Okay, so we’re going to add a new group and this is going to be called freebie offer. All right, we’re just going to start out with two separate groups. Now I’m going to go to settings and you have to assign all of these custom fields, all these groups, everything that’s going on in this page to a specific post type.
0:11:33
We’re going to assign them to services. All right, we’re going to go ahead and hit publish and then just to make sure we’re on the right track and just for the purposes of you guys Who are following along at home? I’m gonna go to a service page and I am going to open it So if we go to web design as an example, we should see there we go Our two groups down here waiting for content now. I also want to decide here Do I want to turn off the the block editor here? And I believe that on this type of thing, I don’t foresee myself using the block editor. So I am going to go ahead and turn off the block editor. To do that, we’re going to go to Post Types, Service, Advanced, now Supports, and I turn off the editor.
0:12:17
I’m going to go ahead and hit Update. What that’s basically going to do for us, now I’ll go back to Services, and I’ll check out the Web Design page. You’re going to see that the block editor is no longer like in our way. That block editor takes up a lot of space and it forces your custom fields down below. I’m going to close this rank math and revisions. So now you can see kind of our custom fields starting to be front and center. Okay next thing I’m going to do is I’m going to go to WP code now I’m going to go to meta box. Sorry I get these two confused because it’s box and box a lot of boxes going on here So I’m gonna go to custom fields again and service page content and now we’re gonna start putting in some fields so I’m gonna look at my hero here and I see a Accent heading up here and I see a main heading right here. So I need an accent heading a heading a lead and a link a lead and a link to the strategy call.
0:13:17
Now, there’s certain things when you’re building templates like this where you want to be able to customize it and then there’s other things where it’s like I don’t want to customize it, I want it to be auto-customized. So this is an example where I would probably auto-customize it to limit the amount of fields you have to worry about. Because the more fields you put in, the longer it’s going to take you to create a new service page.
0:13:43
Anytime you’re creating a new service page, you got to fill in more fields. So it takes longer the more fields there are obviously. If something doesn’t have to be a field, then don’t make it a field. This is always going to be a strategy call to action, and it’s not going to go anywhere else, then I can just dynamically insert the name of the page, which is web design, so it would be the name of the page, strategy call, and it’s always going to go to the same URL.
0:14:07
I don’t need a field for any of this. This can all just happen inside the template itself. So, I’m not going to make a field for this right off the bat. I am going to make a field for this, and I’m wondering if that needs to be the featured image. So, there’s a lot of decisions you have to make. And I’m just going to kind of walk through them with you. Does that need to be the featured image or do we need to make a hero image that’s separate? Now, it would be easier if this were the featured image, but it could limit you in certain ways. If we make it a hero image because I’m always a fan of if you don’t know if you need more flexibility, build in more flexibility because it’s hard to go wrong with extra flexibility.
0:14:59
It’s easy to go wrong with limited flexibility. All right, so accent heading, heading, lead, image. So what I’m going to do here is inside of my group, I’m going to start adding fields. And I’m going to use a text field for my accent heading and then I am going to add another field and this is going to be now this is tough this is tough because you can’t use HTML in these text fields as far as I know I mean maybe I’m just missing something but so if I ever wanted to like bold certain text in this headline, I’m not going to be able to do that with these text fields. And that’s an H1. And this actually presents another issue. We’re going to see the issues that this starts to present.
0:15:51
Because I would have to use a WYSIWYG editor instead of a text field. So I would have to choose under type, I would have to choose WYSIWYG. Where is it? Where, there it is. And then that’s gonna allow me, but then I don’t know if it’s gonna try to put a P tag inside my heading. Let’s just try that to start off with. All right, so we’ve got our heading. Let’s do the same thing, WYSIWYG, for our lead, really.
0:16:18
So our lead, and then we have our, let’s do an image, and it’s gonna be an image select field. And we’re gonna call this image. We’ll call it featured image right there. Okay. Let’s go ahead and update, and let’s see what we’ve got going for our web design page here. Okay, so you can see in our hero, we’ve got our accent heading, our real heading, our lead text, and our featured image.
0:16:53
And why is our featured image, I’m not really seeing a select box there. Did I do something wrong with that? Let’s check. Featured image is an image select. So let’s look at, maybe let’s do single image. Instead of image select, let’s do single image. I get confused with all these, the MetaBox has like 50 different image field types.
0:17:18
There we go, that’s what I’m looking for. So featured image, you can add your media right here. All right, the next thing we need to do is we need to start building out our template. And I’m gonna go to templates here and I am going to go to service single. All right and I’m going to make this a single and I’m gonna go ahead and hit publish here. I’m going to edit with bricks. I’m going to hit the settings up here and I’m gonna go to not page settings I’m gonna go to not theme styles I’m gonna go to template settings conditions. Let’s just click on all the wrong things and I want to show this at the post type is equal to services and I want to exclude Us I want to exclude the web design page right now because I don’t want it to take over my web design page So I’m gonna go to post type now Maybe hold on hosts Services now Posts, services, now entire web, I’m going to try to exclude just the service page.
0:18:27
So post type, archive, search results, error page, terms, individual, that’s what I want, individual. Web design, web design service, right there, exclude. Okay. So it’s basically assigning this to all services except for the web design page that’s already done. Because if I take over that page, I’m not going to be able to see what I’m doing anymore. OK. So first thing we want to check is can I still load this page?
0:18:59
Yes, I can still load this page. So that’s good. The next thing I want to check is if I add this heading and just put test, and I go view another service page, which I’m going to have to remove. Which one would we want to do? SEO. I think that’s the one we’re gonna wanna focus on. Okay. All right.
0:19:20
So what I need to do here is remove the redirect. So here’s Rank Math. I’m gonna go into Advanced. There’s my temporary redirect right there. I’m gonna go ahead and remove it. And then I’m going to, there it is. All right, so I’m seeing test from the template that we just created. So that’s really good. Alright, let me check my recording too.
0:19:42
I wanna make sure everything is good. Sometimes I record for like an hour and then I realize the recording’s all effed up and yeah, that’s a total waste of time, isn’t it? Alright, so let’s not get too tabby. Let’s close that tab. We’ve got our web design tab. I really wish I could use my other monitor right now. You guys are cramping my style. Alright, so let’s, this is our template. This is our service okay, so This is our Hold on. All right. I’ve got to edit service window. This is our service This is our example. We’re gonna go to our example put that over here now Here’s what we’re working with and here’s the template that we are building. Okay now what I want to do.
0:20:25
Actually, I can speed this up. Why, don’t be an idiot, Kevin. Don’t be an idiot. Go grab the things that are already built. Let’s not, let’s not redesign this from scratch, especially since I used frames to build it in the first place. Let’s just copy this. Let’s go into our template, delete this test section, paste in our hero.
0:20:46
There’s our hero. I’m also gonna go grab while I’m here, my content section alpha, which I used for this, and I’m gonna paste that in, there we go. So now I’ve got two sections in, and all I have to do is basically build in our dynamic content, all right? So, this right here, based in Atlanta, Georgia, oh this is interesting, all right, this isn’t really an accent heading now that I’m looking at it, it’s really only for locations, because it’s got a little pin icon right here and so hmm all right so what do I really want this to say if it’s gonna say based in Atlanta on every page we’re gonna we’re gonna leave that for now I’m not gonna make that dynamic so what I actually want to do just to clean this up a little bit, we’re going to go to Metabox custom field, service page content, hero, and get rid of accent heading.
0:21:49
That’s just going to be part of our template. All right, so let’s refresh there. So now all we have to fill out is our heading, our lead, and our featured image. So our heading, if we look at this, this says web design that turns visitors into customers. I’m not going to focus too much on copywriting right now. I’m gonna come back and do my copywriting later. Yeah, and I’m not gonna be able to, I already see, I’m not gonna be able to use a WYSIWYG here. Maybe I am. Let’s make this heading one.
0:22:15
And this is a test heading for SEO. Alright. This, we’re gonna go to website ipsum and just grab a sentence here and paste that in and See, I’m gonna be able to bold this This is why I’m like doing a WYSIWYG editor because I’m gonna be able to style this better Let’s go ahead and hit update there and then a featured image. What do we want we want? Let’s just go to like roof claim I’m just gonna choose a different image that we haven’t used yet.
0:22:50
And it’s gonna be one of these like home page. Yeah, let’s use the features page, select. I’ll just use that. All right, we’re gonna go ahead and hit update. And I also wanna check something. Whenever you put these featured images in, I think there’s defaults to where it like chooses the size for you by default. I just wanna make sure it’s not, here it is. So let’s do 1168.
0:23:16
I think that’s even too big. Let’s do 960. I mean if we look at this on a desktop, how about I just open a gazillion tabs? That would help things, right? Let’s inspect this. The width is 913. So I need to make sure, yeah, 960 would actually be perfect. Perfect. Except, yeah, I hope that 960 doesn’t cap the height or that’s going to cause a problem.
0:23:38
All right, let’s update. I think we’re good there. All right, and let’s refresh here. We can close that tab right there. How many things do I have open? I just closed our template. My gosh. This is, it’s like working in Inception. You’ve ever seen the movie Inception, shout out to Inception.
0:24:06
Edit with Bricks. Thank God the builder opens quickly because you can make mistakes like that and in Oxygen you just lost 10 minutes of work time. Alright, so leaving that, this, make sure I’m on my template and not screwing up my web design page. That’s one thing I really have to be careful of here is if I’m not careful, I’ve got this web design page open over here and I could easily start trying to mess with stuff in here and screw that all up.
0:24:34
So let’s go ahead and insert dynamic data. How do I wanna do this? This is an actual heading field, but I’m using a heading in a WYSIWYG editor. So the first thing I’m gonna do is I am going to compare these two. What happens if I put in dynamic data here? MetaBox services, heading, hero. See it’s got hero in parentheses, I love that. That’s showing me it’s in that group.
0:25:05
Alright, I’m gonna put that in. And then what I’m gonna do is add a text, rich text below I Don’t even know if that needs to be rich text. I don’t even think that needs to be rich text Let’s not do that Rich text delete, okay I’m gonna add normal text below and then I’m gonna insert that exact same one. Okay, heading hero. And we’re gonna see what the output is on the front end. Okay, so now I’m gonna go to my, let’s do this and see if we can actually get this to preview.
0:25:49
Template settings, populate content, single post page, SEO. Sometimes this works, sometimes it doesn’t. Hey, all right. Save preview, but is it previewing the template? It is, and I don’t want it to do that. I want, well, actually it looked like that was doing that properly. Yeah, okay, it is. So inspect, we see that we have a blank h1 and then an h1 in it. But that’s giving us an extra yeah it’s giving us an extra DOM element. See this is the limitation, one limitation of MetaBox that I do not like. MetaBox, I’ve looked that up before HTML in the text fields. Alright I’m just gonna have to forgo the fact that yeah I’m just gonna, let’s, let’s, no I don’t want to do that delete. Yes, delete. Yes All right Just do a normal text field Let’s call this Heading it’s already in the hero group Update All right and refresh.
0:27:15
I should have just changed the field type instead of deleting that field and then making a new field. This may actually make two heading fields in the database. This is a test heading for SEO. Update. All right, and this is my template that I’m working on. I’m gonna go ahead and refresh here. And I’m going to put that heading text in here. Okay, thankfully it doesn’t look like it duplicated it in the database.
0:27:45
This is a test heading for SEO, inspect. And I do not have a DOM element issue now. Wait a minute. What’s down below? Okay, that’s that div right there for the Okay, what is that was referencing my other heading? All right, so that can go away. So we are officially good to go I’m not gonna be able to use like bold and all that stuff in my heading if I ever want to but at least we have a clean DOM and Yeah, we’re I’m fine with that. Okay so template service let’s go ahead and take this out. Let’s change this to lead while we’re here so that’s nice and organized. Let’s take this out. Let’s put in lead from the hero and we want to select 960 and we want to make sure we’re on this class which does have 50% and 0% yeah that’s correct that’s that’s correct let’s view this on the front end and there we go except for one thing it moved over.
0:29:13
Let’s inspect this. Featured image, width, top, left, transform, rotate, translate, why? See that’s the CSS that controls the slant. Object position is all correct. Does a rotate and a translate why? translate Y, I thought was also translating X to the left. Let’s pull up the web design page here, which is right here and put those side by side. See it is, looks like that’s further to the right.
0:29:45
So let me inspect this and let’s go check that featured image. Rotate Z, translate X minus seven rim is right there. Why is it not? Inspect on this one. Grab that clip. Oh, it is. Translate X minus seven rim. 7 rim is it because of the width of the image itself Hmm Yeah Maybe it’s the width versus the height. I mean, I personally don’t really care. I Don’t think anybody’s gonna know really as long as it doesn’t have a negative impact on what this looks like on mobile, which it does not appear to have any negative impact whatsoever.
0:30:56
So I’m good with it. I’m good with it. Here’s what it’s going to look like on like a laptop, which I’m okay that it cuts that off. I really don’t care. I’m fine that it cuts it off there. That’s even still fine. And that’s fine. I think we’re all right. I think we’re okay. Alright, the next question is do we have an alt tag? And it does have an alt tag. Okay, so the alt tag is being pulled in properly. All of this looks good. What we’ve basically accomplished is our hero is now dynamic guys, except for this link right here. So what I need to do is we’re going to leave strategy call in there and I’m just gonna dynamically insert the post title and then I’m gonna hit save and SEO strategy call see that so it dynamically inserts that I don’t need a field for it all right so that’s looking good that’s looking good our hero is effectively done I’m making sure that we have our pattern in there let’s go ahead and tackle this next section.
0:32:01
So, we’re gonna go back to editing our field groups. Here’s our freebie offer. If we inspect this, we’re gonna need a video URL. We’re gonna need, that’s just gonna be a text field. We’re gonna need a heading, and we’re gonna need a text, and that should be it, okay? So, let’s go to freebie offer, add a text field, add another text field for our heading, add another text.
0:32:31
This will actually be WYSIWYG. Okay. The only thing I wanna check is our, I wanna check the DOM here. So that’s a paragraph. Yeah, we’re good. Yeah, okay. All right, excellent. Let’s go back to what we were doing then. Okay, so we have our heading, we have our text, and we have our…
0:33:00
Oh, no, no, no, no, hold on. Text and then this is the video URL. We’re gonna update, go back to our service page that we were editing on the backend, and now we see we have our freebie offer heading. This is the heading for the SEO freebie offer, okay? And then we’re gonna go back to website Ipsum and we’ll grab this text right here, put that in, and then our video URL. Let’s go over to YouTube. Let’s go to our YouTube studio. Let’s go to content and let’s just grab a random video just to see if we can get this working.
0:33:48
Alright, so I’m gonna grab this. Let’s paste that URL in. Let’s go ahead and hit update and let’s refresh our I’ve got to okay that’s the preview of the template let’s refresh our template that’s gonna bring in the new custom fields from the from the database and I want to make sure that when I’m leaning back in my chair that you guys can still see me okay so this is going to be heading freebie offer. God, I love how this does this in Metabox. See, it’s showing me what groups it’s in. So the freebie offer heading.
0:34:36
And then right here, I can do the freebie offer text. Freebie offer, oh, it’s just called WYSIWYG. I didn’t actually name it. All right, so I’m gonna have to go in here and Wizzy wig this is gonna be the text all right we can actually really call it the description Description just like that we’ve got kids crying upstairs. That’s always good All right It’s a 4 p.m.. We’re getting into the witching hour I believe So you’re gonna start to hear lots of lots of things. No, no children are being harmed. They’re just They’re just struggling. They’re on the struggle bus as we say All right. This is the SEO heading for the freebie offer. This is placeholder text. We still have a modal This is all good all good to go. We need to insert our video I’m gonna go down to video You Oh YouTube video ID.
0:35:39
It’s not a URL like it is in, okay. We’re going to dynamically insert video URL, but we’re not going to call it that. We’re going to refresh this. We’re going to go back to our field group, and this is going to have to be the video ID. And this presents another kind of issue here. Because if I want it to be a YouTube video, let’s take a look at this here. Because it could be YouTube or it could be Vimeo. And how are we gonna decide what’s what here?
0:36:15
So YouTube or yeah, it can really only be one or the other because the template is where you select the source. I mean the ID really could be we okay we can do conditional logic here where I select YouTube or Vimeo on the back end and the video ID field is still the ID because it’s it’s that’s the same either way. It’s just gonna make whether we’re showing a YouTube player or a video player basically. Okay so I’ll build that logic in. It’s not important right now, but I’ll build that logic in just so you guys can see it. So this is gonna be, I’m gonna call this YouTube video, and I’m gonna duplicate that, and then I’m gonna call this Vimeo video. And for Vimeo video, I’m gonna select Vimeo as the source, and then I can go into my Vimeo account here. We’ll go to videos, we’ll go to frames, we’ll grab, let’s grab a different one, let’s go to, here’s an ACSS overview video.
0:37:21
Sure, why don’t we just, that’s fine, why don’t we just grab that? Copy video link. I actually need, I don’t even remember, I hate the way Bricks does this, because I don’t know which one the ID is. I’m just gonna pretend like it’s that one. Actually, that part doesn’t even matter right now. There’s a child coming down here. They’re probably going to try to barge in.
0:37:39
Let me pause one second, tell them I’m recording. All right, we’re back. Okay, so I… What am I seeing? Oh, dear God, look, I was… I… Wait, I did what I said I didn’t want to do. Let’s reload this and hope I didn’t save. I was editing my actual web design page. See how things can go wrong in an instant.
0:38:09
Alright so video, especially when I’ve got like kids in the other room I like it’s all in my brain. Alright YouTube video, Vimeo video. This is also why I like to have dual monitors because when it’s in the other monitor I don’t accidentally touch it. This is only going to be an extra complication because I’m having a screen record. Alright so I’ve got my Vimeo video which I’ll select Vimeo as the source. I’m still going to select the video URL freebie offer thing. So that’s basically the video ID, it’s not a URL any longer. So this is YouTube, this is Vimeo. All right, so now what I’m gonna do is save, and under my field group, see I changed this to video ID, so that’s all good to go now.
0:38:57
And that’ll update dynamically in Bricks, it shouldn’t be a problem. So now what I’ll do is an option field. What are they called in here, radio? They’re called radios. All right, so this will be video type. And I am going to choose YouTube or Vimeo, and I think that’s all I need. So there’s video type, video ID, and then I’ll update here, and then I’m going to go to my service single template, okay, so we’re not editing the actual page, refresh, and now what I can do is grab my Vimeo and I’m going to be for video dynamic data and then video type The guy have to hit this and then I can do this video type Equals, so I’m going to show the Vimeo if the type equals Vimeo All right, and then on YouTube Vimeo you yeah YouTube I’m going to add condition and Video dynamic data first then hit this video type Equals YouTube and I need to see if I put it in there correctly YouTube yep, okay, I think it’s all got to be exactly exact when you’re using equals All right, so I’ll go ahead and save there. And then what we want to do is, yes, okay, just thinking, thinking through things. So now what we need to do is edit our page. Because now no video is going to show up because I haven’t selected one yet.
0:40:48
I want to do YouTube here. Update. I was just thinking about whether I wanted to make one a default or not. Now here’s the problem. Yeah, that’s actually… needs to just be that. Now it’s just the video ID. So now we hit update and I should actually see a working video. I was like, why isn’t the video working? Okay. There we go. Yay for us. Now what we also need to build in is our little toggle for hide.
0:41:15
So show or hide. So we’re going to do another radio field. We’re going to put this at the top and display show, hide. Then our default value is going to be hide. Yes, I believe our default value is going to be hide. So now when I refresh this, we can see display show or hide. And And I want to know if I’m just thinking through things in my head display Label description choose to Show or hide the freebie section Update so do I get a you know three month rule? There you go choose to show or hide the freebie section right there. All right, so we will say Hide I thought hide I said is the default. I don’t know why it wasn’t selecting it there Now what we want to do We’re editing our template. I’m going to refresh I’m gonna grab this whole section and we’re gonna do conditions add and we’re gonna do do display. Oh, it’s always dynamic data first. Okay, dynamic data first. It was called display freebie offer. So I want to display it if it does not contain hide. No, I want it to be only when it equals.
0:43:19
When it equals show. So let’s go ahead and hit save. This isn’t like the others where I want negative logic, I actually want positive logic here. Refresh, there you go. So it is gone. Gone, gone, gone. Like the wind all right show update and it’s back You’ve got to stop and you got to clap for yourself you got it look There’s nobody else in this office who’s gonna who’s gonna applaud me clap for me encourage me It’s all you you’re probably in the same situation as I am you got to clap for yourself You got to pat yourself on the back making progress as you’re making progress continue to encourage yourself.
0:44:05
This is a there’s a lot going on here. We’ve got to make sure that we just continue to encourage ourselves. You’ll get burned out if you don’t encourage yourself. So a little self-encouragement goes a long way. All right the next thing we need to do is go over to our actual page here and grab this process and this one I’m not liking the amount of work that it looks like I’m about to have to do here. So let’s collapse all these. The one thing about bricks when you’re pasting, see that? It’s trying to paste this section inside this other section. I’m not liking that.
0:44:36
So I’m just going to drag it out. Okay. So now we get to here. And now what I want to do is refresh this and we’re going to see a problem right off the bat. When I hide this, I want to see what happens. I Want to see what happens these sections kind of collapse into each other But they’re the same color and this is not going to look so hot When we do that So I want to think for a second here We need some extra like contrast going on and You’ve got kind of a heavy heading text.
0:45:18
This is a problem I’m going to solve later. Okay, I’m not going to solve this problem right now. Let’s go ahead and show this. We just need to keep making progress. But I am putting that in the back of my mind as a potential issue. All right. So what I need for this process section. That’s what we’re going to call it. I’m going to add a field, a new group, and process. Now, the other thing I’m gonna do, guys, is kinda clean this up, because this looks really fugly to me.
0:45:46
So I’m gonna work on cleaning that up, but I’m gonna do that probably in a, I’m gonna do it after this video. That’s kind of, you know, doesn’t have to be done in this video. This video’s gonna have enough stuff in it. All right, so we need a, maybe not a field for this. I don’t think we need a field for this. I think this is one of those areas Oh, and I’m on web design again. Don’t do this. Don’t do this to me. All right, we’re gonna come here and we are going to Show me the content field bricks I get rid of the conditions. That’s why I can’t see it. I guess. All right, so I’m gonna take this out and We are going to put in the post title. So it’s just gonna say SEO process automatically I’m not gonna make that editable.
0:46:27
But I am going to make this editable. I may definitely want different kind of copy for this. And I want my pages to be more unique. I don’t want to just swap out the word here and there. So this is gonna be a heading and then I think our link, free SEO strategy call, free strategy call. That can just say free strategy call, that’s fine. So I’m just going to do a heading here, and that’s going to be done back here. Add field, text.
0:47:04
This, it just feels dangerous to me that I’m writing the word heading and I’m not writing like SEO process heading or something like that. Because again, I have PTSD from the oxygen days, but it feels like it’s going well so far now what we’re gonna need over here is a Repeater field a Repeater group and now I’m scared because this is gonna make like a group inside a group or a repeater inside a group and I Just don’t know how that’s going to behave and it’s it’s really scaring me All right, first of all, let’s get the right field going. I think it’s under an advanced field.
0:47:41
Select advanced. Can I just search for repeater group? Or actually, I think it’s a group field again. And then you do something in here. It’s been a while since I’ve done this. Yeah, you make it clonable. Clone is multiple. Save clones in multiple rows in the database. I think we may want to do that. Yeah, I think we want to do that. Okay. Process card. I think that’s what we want to call it. A process card.
0:48:15
Because that’s really what it is if we look at this. This is a process card and I need to be able to clone it to make multiple process cards. I think this is going to work out. Maybe. I have 30% confidence in this. Alright, so process card, what makes up, I almost clicked on perfmatters on accident and left the screen. God, I feel so ADD right now. I’m really not an ADD person, but like when there’s so many things going on and I’m thinking about communicating all of this as I go, it’s tough. This, thankfully, because I use frames, counts automatically. You don’t put the numbers in manually or anything like that. It’s just going to automatically count the number of cards that’s here. That helps a lot. So each card needs a heading And This is going to be a this is going to have to be a WYSIWYG I think and this is going to be Description it’s a description of the process, right?
0:49:28
So process card, let’s update now. Let’s see what we’ve got going on on the back end. How ridiculous is this going to be? Process card heading description add more. I mean, it’s clean so far. It’s clean so far. So this is my SEO process heading. This is an SEO process step. This is an SEO process description. And I’m doing this with SEO in here because when I do my previews I want to make sure I’m seeing the right content.
0:50:07
And it’s not generic. I know it’s actually showing me content from the SEO page. Alright so this is an SEO process description. It should be a couple lines max maybe three I don’t know just writing nonsense in here and now what I want to do is add another one and I’m gonna say this is a second SEO process step and actually I don’t want these to be very long so I’m gonna do SEO step two and I’ll just put in the same content. This is an SEO process description for step two. And I will do this and then I will bold this and we’re just testing out some things, all right?
0:51:05
And I’m gonna hit update. And now the moment of truth, my friends. I’m gonna refresh. I am on the template page, so that’s good. These were inserted manually on this page initially So I want to delete process card Charlie’s All the ones I don’t need except the first one and I actually guys I don’t even know if I’ve ever in bricks Query, look at this guys. Watch this if I delete this first one right here. I Want to show you the auto counting so I’m deleting the first one. I’m deleting card number one.
0:51:40
I’m going to delete it. Look, card number one is still there because the new one became number one, right? It’s all very automatic and intelligent. So I only need one of these process cards. And what I need to actually do is make this a loop. And I have no idea. Look at this, group process. Wow, look at how easy that is in bricks you can just say hey I want to make that a loop from my grid. Man just things are I’m 40% I just went for 30% confidence of 40% confidence. Alright let’s do a heading here process card heading 50 we’re now at 50% confidence.
0:52:26
Alright, I am going to put this in and this is going to be description. Process card, I’m 60% confident right now. I still got to view it on the front end. Save. Moment of truth my friends. Oh no, oh no. What’s happened? What has gone wrong? I know y’all are laughing at my pain right now. All right, let’s get this done. Heading, process heading. This is my SEO process heading. Now did I have, I did not have a lead there, so that’s good.
0:53:04
We have failed my friends we have failed at the group query stage and this may just be a limitation inside of bricks that we cannot group these together step one step two let’s try one more thing I want to come down here and remember it asked us a question clone is multiple I’m gonna hit update I don’t know if that has any bearing on what we’re trying to do here let me take one out so we just have one that did not fix a damn thing Okay, what happens if we take this out of the group? I wonder if it can even be taken out of the group. It’s really this process card. I don’t think you can take those out of groups.
0:54:21
Let’s just delete that. Group. group. Okay, this is going to be process card and I’m going to make it clonable. Clone the default value. Let’s add our text for our heading and then our WYSIWYG or our description Come on Heading and Description And then our default value is going to be this is a heading We’ll do process heading and description. We will grab website Ipsum just a little bit and we will throw that into here as our default value. Let’s view this.
0:55:38
Okay. So now I have a process card and I can add more. They’re not grouped anymore, but I’m hoping that we can, that this at least fixes the query loop. And if it doesn’t fix the query loop, I’m going to have to put in a ticket with bricks or something because this is all I know how to do, honestly. Okay. So, step one. Why isn’t this, why doesn’t this have default values? Like I put in default values.
0:56:09
This is, let’s just paste that. Okay, update. And now what we’re gonna have to do is we’re gonna have to save this, refresh, and we’re gonna have to change this query loop. We have to change all of this actually so process card Charlie query loop MB group process card and Then for our heading We’re gonna need process card heading process card Yeah, hopefully that’s the new field you know Description description process card save come on baby yeah baby yes sir okay so this is just placeholder text on the alarm so now if I add more now now I put in the default there but it’s not I guess you don’t have defaults for WYSIWYG so this is gonna be step 2 and I’ll just put in the same content. Update. Okay, we’re back in business. It’s not organized in a group but we are back in business. And you see the auto accounting is taking shape. So I’m going to go ahead and just make four of these real quick. So we are going to add more and add more.
0:57:40
That’s nice and easy. Update. There they are. Okay. So this is good. This is, it’s not exactly the way I wanted it to be, but it’s doable. Okay. Next thing. We’re going to just keep going down the list. We’ve got that section done.
0:57:59
We’re going to grab this section right here, which is our featured quote section and we are going to get to the template and once again it pasted it inside I do not want you to paste this inside all right let’s collapse all these then I bring my featured quote down here at least drag and drop works better you know what I’m saying you know what I’m saying. So we have our quote and our citation. Notice, site tag, okay, cross them T’s, dot them I’s. Got to have that proper HTML structure. So I’m going to add a group. So Julie noted, anytime you’re going to need a repeater or anything like that, you’re going to not put that content in a group because a group in a group bricks breaks. Alright so this is going to be featured quote section featured quote yeah yeah do we need do we need to yeah we’ll just call the field in their featured quote text, so I’ll make this a WYSIWYG and I will make a simple text for citation So this will be our featured quote text Or we’ll just say quote text that’s it just quote text and Citation All right update citation. Alright, update. This is the page, we don’t want to mess with that page. We want to be on the template. Go ahead and save. And oh boy, it’s taking a bit to save. What’s going on? This is the point where you cross your fingers.
1:00:11
You hope it’s not going to break. Alright I’m going to pause and I’ll come back when I have a resolution here so you guys don’t have to sit through this nonsense. Okay it Okay, it did end up saving and no issues there. So I’m going to refresh. And I’m going to come down here and we’re going to remove this and we are going to pop in a quote text, more featured quote. And then right here, we’re going to refresh here. So now we have our quote text and our citation. This is my awesome quote text. It’s super quotable.
1:01:02
Have you ever heard this quote before? All right. Said by Kevin Geary, CEO of Digital Gravy. All right. So we’re going to update that. Refresh, there you go. This is my awesome quote text. I need to inspect and make sure we’re good to go with our DOM. So we have our block quote, our paragraph and our citation.
1:01:27
And the citation is inside the block quote. All of that is structured just fine. Okay, up here, we still have our good structure here, which should be an ordered list with an Li inside of it and Then we have our header and our body which they don’t really need header body tags Definitely don’t need a body tag, but doesn’t need a header tag That’s fine. That’s all good. Okay Just cross and tease and dot nice my friends. That’s all we’re doing here Next thing we’re going to do is we’re going to grab our latest web design projects. And we’re going to pop that into our template. And come on, Bricks, with this copy paste, they got to fix this, man. If I’m pasting a section, then that’s that right there. If I’m pasting a section, you got to not paste it within another section. Okay, so there’s our examples. I’m just kind of going one section at a time.
1:02:32
Mainly so it kind of keeps things more organized, but it also I think helps you guys follow along a bit better. Neat example, here are three of our latest, and this is another example of where should I just dynamically insert the name of the service or, you know, does this have to be super unique? Maybe I’ll make it unique. The more unique content the better obviously, but I just you know, it also creates more work. So let’s go with Group I really want to group here. I’m just gonna type a bunch of random stuff this is going to be our portfolio section Or just portfolio just like that. Okay, and we’re gonna add fields. It’s gonna be a text field and This is gonna be a heading And if we look at this we don’t That’s that’s really all we need there.
1:03:39
We just need the heading for there. So I’m gonna hit update, refresh, okay. Here are three examples of projects of companies. Here are, this is why I don’t like these fields, because you gotta sit here and think about copy. Here are three companies we here are three recent companies we have done extensive SEO work for something like that. All right let’s hit update go Go to our template again, get a little save, get a little refresh. Let’s come down and insert this. I’ll just do heading and I’m looking for portfolio heading. I love how Bricks groups those things together man.
1:04:42
Here are three recent companies we’ve done extensive SEO work for. Now the challenge becomes, is this actually going to work? Feature card Charlie is a loop. MB relationship projects with services. And I don’t know if this loop can actually work through a template. I’ve never tried this before in Bricks, and I just don’t know if it’s possible. And I’m thinking it’s not because it should have already been working oh no no no no no no back up back to hold the phone maybe no no I don’t think well maybe let’s go check something so me right this thing you guys you hear that my chair man sometimes you lean on it wrong and it’s just like the armrest tries to fly away Okay, it’s like a $300 chair to Services I just want to think here for a second so this is all based on relationships, and if I have not related any projects To this service. We’re not going to see any projects in Fact what I need to do just so I can avoid this problem in the future is on this query loop When there’s no results no projects to display Now I hit save It doesn’t it doesn’t show anything okay?
1:06:12
Well there you go. I don’t maybe there’s something else that has to be configured. Oh No, I just did that on my web design page my gosh No projects to display hopefully you guys are entertained because there you go I just feel like I’m all over the freaking place with this stuff there’s there’s a lot going on can’t be too hard on myself right alright where were we I don’t even know what the hell I’m doing I was relating services to projects. No, yes, yes, that’s what I was doing. Here we go.
1:06:53
So related projects, I’m just gonna for, you know, shits and giggles, for testing purposes, we’ll relate three projects right there. Oh my gosh, it already works. And I bet if I click this, my light box works My lightbox works and I see my project right up all there dynamically. My gosh, this just, this warms my heart. It absolutely warms my heart. Okay, let’s move on. Can’t admire your work for too long.
1:07:26
Let’s keep going here. We’ve got our web design page and our testimonial section. My foot is falling asleep because I’m sitting on it so let me reposition in the chair make sure that we are still recording. Yeah okay. Service single watch it’s gonna it’s gonna paste it inside the service. Can I like unselect I don’t have anything selected right now. It put it inside examples. Okay. So here’s, oh dear God, what has happened? Just go backwards. Where did it put it?
1:08:20
Okay, now I’m worried. Like I pasted it and it’s nowhere to be found. Let me save and refresh Hopefully our page isn’t all screwed up. I mean that looks Completely out of whack. Oh it is God what just happened? What just happened? Oh, it’s in the card I bet It pasted my whole section in in a card there it is right there that’s where it went. All right. That was worrisome. Now we’re back in business. Okay. So what are our web design clients saying? This is just doing that kind of thing. No, no, I want it to be unique. Okay.
1:09:23
Making an executive decision. Metabox custom fields, service page content, ad fields, group, and this is going to be called reviews and I’m going to just add a text field here for heading. This is way nicer because in oxygen you used to have to like make super descriptive things for everything and it was just not as fun. Let’s put it that way. All right, so the heading for reviews is going to be what my what our SEO clients Hear from some of our SEO clients Here’s what our clients think. Writing copy is hard. Here’s what our clients think about our SEO services. I’m just going to leave it at that for right now. I’m going to come back and make this stuff better, but for now it’ll do. So I’m going to come down here.
1:10:53
What are our web design clients saying? Remove, heading, reviews. I’m wondering if I want to make the star rating dynamic. Probably. No, because it doesn’t have to be attached to a service page. That’s just going to be controlled by the template. That has nothing to do with like actual services. So no worries. All right. And then this is going to be based on whether we have a, we’ve related reviews to services, which we have.
1:11:34
That’s why you’re seeing two reviews right here. So these two reviews are related to the SEO service and you can see that that heading length is not not great but that’s fine there testimonials I want to I want to make this say the name of the service and then testimonials so post title testimonials so now that’ll This is actually, oh dear, did I just do that on my web design page? Unbelievable. Unbelievable. Okay, let’s do it right here. Right here, there.
1:12:19
This is actually the H2, guys. This is just a paragraph. This is the H2 for actual SEO purposes All right That’s that’s an h2 right but down here on these sections. That’s an h2 This is the h2 and then this is just a paragraph Alrighty man, we’re looking pretty good Okay, I I think we have one more section to do and that is the FAQs. So we’re gonna copy that Where’s it gonna paste my FAQs this time?
1:12:48
Inside of my testimonial section FAQ section alpha bring that out Collapse Bring that up. Okay. Web design questions. This needs to be SEO questions. So it needs to be post title questions really. Okay. And then this is we’re going to need a heading and we’re going to need text. All right. So we’re going to say FAQs. And then in here we’re going to need text for a heading. And then we’re going to need a WYSIWYG for a description or lead really. It’s called a lead. And I think that’s all we need update Okay, and now we can edit this refresh Answers to your most pressing SEO now answers to questions about our SEO services All right have questions about our search engine optimization. See sometimes I want to use SEL sometimes I want to use the whole thing. Have questions about our search engine optimization services. Check out these answers and if you need more help, don’t hesitate to reach out.
1:14:52
That might be more content than I need. I’m gonna bold that, hit update, and we’re gonna save this template, refresh, and then we’re gonna put our content in. Alright, so this is gonna be our heading for FAQs. Look how easy Bricks makes this, like the organization of it. This is a lead for FAQs. And then let’s go take a look on the front end. Okay, you can see we have no FAQs.
1:15:30
What we’re going to do first is grab that loop. There’s our query loop. No FAQs. There are no FAQs for this service. Save. Refresh. There you go. So I at least get a badge there or like a little notice. Let’s put a, because I’m, you know, I like details. Let’s go ahead and, wait a minute, wrong thing.
1:16:08
Oh, I’m on the web design page again. All right, we’re gonna come down here to this query loop and I’m gonna put a period at the end of that. And there we go. And now what I’m gonna do here is, because there’s no FAQs in the database, and this is kind of shows you how this is done right. So right now you can see there’s no FAQs right so I’m literally gonna go add an FAQ and what I love to do I’ll just I’ll throw a little golden nugget in here when you’re building out FAQs for customers you go to SEO services near me so I’m just googling the thing that I’m interested in and guys Google is going to feed you the people also ask FAQs right here. So like how much do SEO services cost is like an example of one. Now don’t copy and paste what’s there you just rewrite it in your own words. How much do SEO services cost?
1:17:06
Okay and then we would put in our content like SEO services vary based on the scope of the project, blah, blah, blah. All right? And then I’m going to hit publish. Now obviously I’m going to come back and I’m going to fill that out. But what I want to do right now is I just want to relate this to my SEO service. And that’s what’s going to determine where this FAQ in an accessible toggle and as I add more they’ll just keep adding to that section right there. That’s what makes all this stuff so easy and amazing is I have an FAQ CPT, I have a template that’s going to automatically query them, I have bi-directional relationships that allows me to choose where they go and I can I can relate that to more than one page which means I’m having that question and answer show up on any other pages that I want All dynamic. All right, so that looks good there. Are we done? I mean are we done with this?
1:18:11
I believe we’re done with this. So that is gonna kind of conclude The tutorial and now what I what I can do is just come in and just fill out all these fields and hit publish do my relationships and and I’m golden. Like I don’t ever have to open Bricks and build out another service page. That just is, I’m trying to think if there’s anything that I missed. I mean we did the toggle there. I still need a solution for when that section is not there.
1:18:39
I mean it’s not the end of the world, right? But it would be nice if there was something there to take the place of it. I don’t know there’s there’s probably a few different ways that we could solve that problem. But I think that’s enough for this tutorial. I mean we are you know an hour and 18 minutes into this thing so thank you guys so much for watching. I hope you found this valuable. I felt like it was super ADD and all over the place but that’s just how the stuff goes sometimes. When you got a lot going on, you got a lot of tabs open, you got you’re not able to use your second monitor. Yeah, you’re just jumping around a lot. So, yeah, that’s it. I’m out. Peace.
