Web Design for Dommies 008 – Live Overview of My New Site!

0:00:00
Yo, what’s up everybody? Happy to be here. Welcome back to another episode of web design for Domies. As you can tell, I’ve still got a little, got some congestion going on. This virus, I think it was COVID, been hammering me for the past week and a half. Not like the worst things was the sinuses right here. And then this weird symptom, I think it’s called, it’s called COVID tongue. You can look it up. It’s ridiculous. Basically, it just makes your tongue swell. And so I just, it really, it was like having a sore throat in your tongue. Not like my throat wasn’t sore. It was just a sore throat, but in your tongue. Like in the back of your tongue, where it’s in your throat, right? And so it’s really weird and it just very, very hurt, really bad to swallow, hurt, really bad to talk.

0:00:56
I lost my voice after that live stream I did last week. I lost my voice for like four days. So that’s why there hasn’t really been any other videos. And I’ve just been kind of like, just on the mend, getting ready for today’s live stream to make sure that we could make this happen, because I’m very excited for it. I’ve been wanting to debut the site and that’s exactly what we’re going to do today. We’re going to do a deep dive on my brand new website. That’s what we’re all here for today. We’re not doing a normal web design for Dommy’s episode. We’re doing a deep dive on my new website, because I get a lot of, you know, I’ve done, I did a little bit of a deep dive on the, on the new frames website. I did a little bit of deep dive on another website as well. I think the digital gravy side a while back. And every time I do a deep dive on a site, I get a lot of people saying like, do you got to do this more?

0:01:51
Like, there’s so much value here. We love seeing real sites behind the scenes, especially when they use a little bit more complex stuff, a lot of custom post type stuff going on, a lot of custom fields, some bidirectional relationships, some different design techniques. Okay, so that’s what we’re going to do today is a deep dive. But first I want to say hi to everybody. So I got to figure out where our chat window is here. Okay, I got it. I got it. So yes, say hi. Let me know where you’re watching from today. We’ve got 80 people here already, which is fantastic. I got a lot of people tuning in for the deep dive. Oh, man. All right, we’ve got, yeah, we’ve got people from all over.

0:02:35
Okay, fantastic. A lot of faces that I’ve seen many, many times before, but also a lot of new people as well. Okay, here’s how we’re going to do this deep dive. We’re going to go, let me open my notes here. I just want to make sure that we’re going to hit everything. It’s going to be a little bit of me walking you through the site and kind of going into the places that I want to go. But I’m also going to watch the chat. And if you guys see anything where you’re like, hey, how is that done right there? Or you know, you just have questions about stuff. Go ahead and drop them in the chat and we’ll go into those rabbit holes. Okay, we’ll go where you guys want to go as well. But we’re going to do obviously a homepage review. This site was built with automatic CSS. It was built with frames as well.

0:03:22
So basically everything you’re going to see is a frame. And so if you look at the frames library and then you look at this website, you cannot tell that a website was built with frame. When somebody takes the frames and actually designs them up, okay, it’s very, very difficult to tell if a site was built with frames or not. It’s what I love about it. It’s not one of those design sets where immediately you see the website and you’re like, oh, that was that, okay, you just don’t know. You look under the hood, you look at the code, then you can see that it was built with frames. But if you’re just looking at it visually, it’s very hard to tell if somebody has actually put in the time to design up the frames. So everything you’re going to see is a frame. Also, the fact that frames are modular and can be mixed and matched, there’s going to be frame combinations that aren’t, they don’t exist in the library, obviously.

0:04:13
So that’s another reason why it makes it more difficult to just be able to glance at a site and tell that it was built with frames. Again, this is, I think, one of the most powerful aspects of frames is that you can build every website with frames and your portfolio is still going to look as creative and unique as you want it to look. It’s not going to, every site’s not going to look exactly the same. So again, I think a really, really good advantage to using frames. Now I will say there are some design elements and things like that that I put extra time into on this website. And the reason I can put that extra time into it is because I built a site with frames. Frames saved me so much time on the front end that you’re almost like freed up now to spend that extra time doing these little tiny details here and there. And so I think that’s another really, really, really big benefit. So built with ACSS and frames, there’s five custom post types in this website. There’s six custom field groups and there’s one bidirectional relationship.

0:05:19
We’re going to get into all of that. We’re going to go straight into the back end and we’re going to take a look at how all of that is set up and why and we’re going to go through it in a very detailed fashion. We’re going to do obviously all the pages review. There’s some templates that we need to look at. There’s some conditional logic that we need to look at. There’s a lot of good stuff here. A couple of ACSS settings that are fairly new that we’re using on this website. So let’s go ahead and you guys ready to get into it. Let me go back to the chat here. Ruben is here. The Hunsey’s here. Silent Fill is here. Calcynix Island. All familiar faces.

0:05:56
This is my audio good. Aside from the fact that I obviously sound congested. Okay. E-cam is like, hey, there’s a new update available. We’re not doing that during a live stream. It’s not what we need to do. It’s not a good idea. So let’s close that out of the way. All right. So we’ve got Brazil in the house. Los Angeles in the house. New York City. Florida. The UK. Italy.

0:06:23
Dublin. St. Louis. Rome. Germany. Man. This is fantastic. Maine. Amsterdam. London. Good, good, good stuff. Okay. All right. So let’s go ahead and pull this up. Let’s go ahead and screen share. Okay.

0:06:42
All right. So here’s the new site. We’re just going to chill here in the hero area for just a little bit. Obviously, this is a personal branding site. Okay. So it’s just very, it’s very me heavy. And I decided, you know, I don’t really, I do have a logo. I’ll show you in a minute. I do have a logo that I got done. But I didn’t want to put it up here because I wanted to make this header still like a little bit more personal. So instead of putting the actual logo up here, I just put my headshot again or my like my avatar and then I put my name and then I put, you know, kind of what I am. There’s a lot of things that I am. It’s very difficult to like, I was trying to find like, what is the box where I could just say this one thing and it’ll make sense.

0:07:30
There really isn’t one. There’s just, it’s two. There’s too many things. But anyway, that’s, that’s why that’s there versus just a traditional logo. You’ve got your very standard navigation. Guys, I am not a fan. I am not a fan of mega menus and like really super fancy navigations and things. I am very, very basic because to me, that is the best possible user experience, right? It’s like, just make it simple. Make them the links, make it obvious where they need to go. I could easily have put. I mean, there’s a lot of stuff here. We could have gone super fancy with like the blog menu, the videos menu, the projects menu. Could have gone very, very, very fancy, okay?

0:08:16
Yes. We should have a, yeah, there it is. Okay, I should probably refresh. So we’ve got our little live now badge. Yeah, we’ll talk about all this stuff. We’ll talk about all this stuff. People are liking it. I mean, hey, if you love mega menus, you love mega menus, right? I just don’t, I don’t like mega menus all that much. So I try to stay away from them. So yeah, the hover on the avatar, somebody mentioned that. There is a nice little hover effect. That actual hover effect is going to be on every, pretty much every clickable element here. And I liked it because it was very subtle. And it was, you know, it’s not super in your face, but it’s still different than a normal traditional hover effect.

0:08:57
So that’s pretty good. I wanted to make sure right off the bat, we just kind of list out everything that I’ve got going on, you know? So that this added glance, like you can tell, all right, here’s the guy, here’s what he does. Because again, it’s not, I can’t just describe what I do. Let’s just give people the projects, basically. Here’s the things that I’m, that I’m working on that, like people know me for or whatever. And then let’s get some calls to actions. We’ve got the join the list. We’ve got hire me, which this will just take you to the digital gravy site. But then join the list is a good one, right? Okay, so you can see the logo there. So you can see there’s, there is some branding going on here. And then, you know, just a nice, this is a frame, by the way.

0:09:40
Guys, this, this, this modal took me literally, I would say 14 and a half seconds. And this modal is exactly as you see it here, other than dropping in a photo, dropping in this logo, and then changing the text and swapping this native bricks form for a WS form, that’s it. This entire modal is exactly how it comes in frames. Like you just drop it in and book, okay, check the box on the modal. Let’s move on. So that’s the kind of like time saving stuff that I’m, that I’m talking about here. All right. And there’s the modal, there’s not a lot of else to see here in the, in the hero. It’s just, hey, here’s, oh, these pseudo elements, I really want to talk about these. I think I’ve found a fairly good, these things are really hard to manage. When we get down to the bottom, you’re going to see them again, okay? You’re going to see these, this little accent, these accent boxes again. This one is the 10%.

0:10:39
I think it’s 15%. I made like a custom one because 10 wasn’t quite doing it and 20 was a little too much. So I made like a custom, it’s like a 15% of my action color. And then this is a 15% of my, of the complimentary version of my action color. So I have those two kind of colors went, you’re not going to really see that color anywhere else on the site except right here. I’m using it as well, but that’s, that’s pretty much it. So we’ll talk about these because I, these are really, these are not easy to manage on most sites. So these little accent things attached to different stuff and you have to do a lot of manual work. So a lot of manual repetition. Well, if you look at this, these, both of these are added with a single class. We’re going to look at this in just a second in the builder. Added with a single class and then when I added them down below in the bottom section, also added with a single class.

0:11:33
But then you’re going to be like, how is that possible because they’re in different positions. So how is one class up here putting them in one position and the same class down here putting them in a completely different position? I got it figured out. I got it figured out and I’m actually, I’m going to do a full tutorial on it, but I think it’s probably the best way to manage accent pseudo elements like this when you’re going to be using them throughout a website, but they need to be in different positions when you add them. And also, I was playing around with a lot of G-SAP stuff because I didn’t actually turn them on for this overview. I’m still playing around with it and everything. But you can animate these, you can animate their rotation, you can animate them in, you can animate them on mouse scroll. There’s some really cool effects that I was playing around with. Again, I turned them off for this because they’re not quite done yet, but I was getting me into more of that.

0:12:25
And you know, I’m not a big G-SAP guy. I’m not a big animation guy, but I feel like when you have some cool little pieces like this and you can very subtly animate them, then yes, that can work. I think. And I have a new client project that I’m going to be doing and they want G-SAP on it. It’s a one-page thing, so I think G-SAP is going to be really good because it’s a basic one-page site. G-SAP can really spice it up a little bit. So anyway, I’ve been playing around. Okay, let’s keep moving down the page. So as you scroll down here, the first things I wanted, you know, people to run into were, hey, like, are two main shows that we do on this channel? Let’s go ahead and get those featured. So we’ve got digital agency table talk. We’ve got web design for dummies, nice little subtle overlay effect here or hover effect here.

0:13:17
And these just take you straight to those parts of my YouTube channel. So that was kind of like front and center plus a call to action to subscribe on YouTube. I threw in this little, just a little kind of highlight thing here. There’s one other variation of this highlight that’s called a, I think this is called a call out and then I called the other one a highlight. Just a little backwards, but whatever. It’s too late to fix it. All right, so we’re going to keep scrolling down. I did, you know, this, this guy goes to show like, you know, custom photography is very important. And we try to tell clients this stuff all the time, right? But, you know, I couldn’t create covers for these things. Like the covers were all really boring. I was trying to use like stock photos. Like, can I find a good one?

0:14:03
And it just all look like super stocky and like, ugh. And I was like, it’s just, I’m going to have to put my face on it, but I don’t have any photos of me. I don’t have any good decent photos of me. So I just literally called up a local head shop photographer and I was like, hey, I need, you know, headshots real quick, 750 bucks, whatever. Go in, get it done. Three days later, send them back to me. I cut them out in Photoshop, popped them in here, popped them into the hero. You know, there’s another one on the about page. And that’s it. It’s done. It’s like, you know, it really helps, you know, tie a site together when you have good photography. And then, you know, you’re trying to work with shotty stock images and all this other stuff.

0:14:41
It just hasn’t come out quite as well. And especially a personal branding site. I mean, it’s like, it should be you, I guess, right? It makes more sense. So, yes. But if you’re doing it about page for like a business or whatever, like get them to invest in the photography because it’s very important. All right. Let’s keep moving on. So the next thing I wanted people to see was projects and products. Like, what am I up to? Like, let’s take this list right here and expand on it. So we’ve got these nice little wide cards. They auto alternate. So image on the left, image on the right, image on the left, image on the right, got it?

0:15:17
Okay. That all happens automatically with frames. Guys, this is an entire section right here as a frame. So you literally pop it in. You change the colors. You change the content and you move on with your life. It auto alternates. It auto stacks correctly on mobile. You just don’t have to worry about it. It’s, again, seconds of, well, it’s not seconds. Minutes of time. Okay. Minutes of time. After that, I wanted to now debut like the blog section. Okay.

0:15:44
You didn’t, and this is how I think of a page. I think of a page as like the person lands, especially a home page like this. And I was talking to somebody about this in a coaching call. They were like, well, what do I need to put on my home page? And I was like, the home page is kind of like a whole menu. It’s like, let’s give people everything. And as they’re working their way down the page, anything that really catches their attention or interest, they’re going to click on it and engage with it and you’ve done your job. And if that thing doesn’t catch their attention, they keep scrolling. They need to see the next thing and the next thing and the next thing. And let’s help them find exactly what they’re looking for. So they don’t have to dig around necessarily in the navigation. They can kind of get a glimpse of everything that is going on. So they can see the projects here and then they can see blog articles. I’m starting fresh on this website with the blog, so with the articles.

0:16:39
And you can go in here and we’ll take a look at the blog template in just a second. But I’m going to be blogging more often, not necessarily for SEO, just for pure content. Just for pure, like good quality content. My ideas, thoughts, things like that. Or maybe some SEO worked in there, but that’s not the main priority of this blog. The main priority of this blog is to just really share more in detail about stuff I’m thinking about, stuff that I think is helpful and valuable. Yada, yada, yada. So you see a new, I’ve been teasing this for a while now. My arguments against website as a service. Why milestone payments don’t make sense for web design projects. It’s really good stuff in there, like business-wise, just agency-wise. For the blog articles, I wanted to post our latest video. The ACSS inner circle images are pixelated, wrong size used. They shouldn’t be there.

0:17:35
Well, they’re not pixelated on my screen. If you’re this one, this one might be. This one might be as well, just a little bit. Yeah, I mean, I could boost up the, it’s basically the source set on bricks. You know, you’re telling it what size to load in. But it also could be the ones that I use as well. So I was just pulling from my drop box. But I’ll double check it. It’s also their short pixel has done a good number on them as well. So just trying to get the file size as as small as possible. So again, something that we can definitely check. So this latest video pulls in from the videos page. This video’s page that we’re going to take a look at in just a minute is going to be like it’s what a lot of people have been asking for. It’s obviously not done yet because there’s just so much content that we have to get in and organize and all of that.

0:18:24
So we’re going to talk about the future of that video page. All right, let’s keep scrolling. So we’ve got the, now finally it’s like, okay, let’s talk about getting into the inner circle. We’ve got some icon issues from our speed, some speed optimization stuff we were doing. I decided very last minute. You’re going to see that these are SVGs right here. These are SVG icons. I decided last minute because bricks, loads, like three or four different font families for icons and they are, they just do a number on like speed optimization. And so I decided last minute to take them out and then I forgot to swap these out. These were using the fonts that we turned off. There’s a little check marks right here. I need to swap those out with our SVGs from right here, but that’ll take care of that. But this whole thing is just a frame.

0:19:16
And then here’s the other kind of highlight, little accent piece I was talking about here. So we can see, this is very easy to do. So for those who don’t know how to do that kind of stuff, it just adds a little life to your headlines. You can see up here, there’s a little bit different style that adds a little bit of life to the headlines. So this is just a different way to do it. We can go over exactly how that’s done as well. Now we’ll take a look at the inner circle sales page. I actually, I’ve used this forever right here, like since the beginning of time, this layout. And so what I decided to do is just make it a frame. So this entire page is a frame. So if you ever need a simple sales page, you can just add it in seconds. This whole thing is now a frame in the frames library. So that’s all done.

0:20:06
One big thing we did, we switched from thrive cart over to shore cart. And I’ve really, really liked that switch so far. But we will continue to see how that works going forward. But that is that. Then we get down to the footer down here. Again, this footer is a frame. The entire footer is a frame. You just pop that in and you are good to go. All right. So the next thing I want to do is we’ll take a quick look at the about page. So we’ve got this page is the page that’s really not done yet. I’m still coming up with different concepts for what exactly is this whole page going to have on it. It’s obviously going to be more than two sections. But I do want to make it super personal.

0:20:51
I do want to make it more about me and less about WordPress and design and development and plugins and everything else. It’s really more about just more about me as a human being. So I’ve got a photo in the middle and then we’ve got some stuff around the outside. And then I’m big in a music. I wanted to put artists I’m into lately here. This is stuff I listen to when I work a lot. So if you want to get into my vibe while you’re working, here you go. And then it’s going to go on and on and on. There’s going to be a few more sections down there. But I’m thinking of different ways to just really make it personalized and not like a typical about page that you would see. So that is in the works. This page I would consider like the least done page. And this entire site is basically the minimum viable like release of a website.

0:21:45
So still a long way to go on this website as it matures. But this is the beginning. All right, let’s get to the projects. We don’t really need to look at a lot here. It’s the exact same grid from the homepage. So this homepage right here, if you just go to projects, it’s the exact same grid. I didn’t, I just felt like it didn’t need to be anything else right now. It didn’t need to be any deeper or more detailed. People can go where they want to go and get the information. All right, let’s get to the next thing. This is the one of the big sections right here is videos. Okay. Let me, before we dive into this videos page, let’s, the music listening really pretentious to be honest. Okay.

0:22:25
Why, why is that Aaron? Why is music pretentious? I don’t know. Okay. Let’s look at some comments here. I want to make sure we’re not missing any questions either. If you don’t want your questions missed, make sure it says question in all caps and then you can ask your question. All right, let’s see. And yes, as Arnod said, because there’s some people that were like, I can’t watch the whole thing, it’s all, all these live streams are always available later. You can watch them at any time, every single live stream that I’ve ever done, you can go back into the live section of my channel. They’re all there. I don’t take them down or anything like that.

0:23:00
I don’t put them in the inner circle. They’re always there. You can watch them at any time. All right. Let’s see. Oh, did it. Okay. I actually love this subtle background pattern here. I think you might have been talking about the hero section. I’m not sure. Or, yeah. Yeah, that background, I don’t know if you’re talking about the kind of stripes, the Chris little Chris crossing. All right. Let’s see.

0:23:26
When doing G-Savory using add on like motion.page. Yes, it was, it will be motion.page when I do it. Agency table talk is without a doubt one of the best business resources out there for aspiring freelancers. I agree. And I cannot wait till it comes back. I’m really excited. I’m like itching to get it back. But I got to get all the podcast kind of infrastructure set up for it. I was working on this site. So now that this site is, you know, done enough, I can move on to digital agency table talk and getting it back up and running. All right. Let’s see. Why is it always a dark theme from your side?

0:24:04
Okay. Hmm. That’s not a dark theme. Okay. I don’t know. Like it’s, I mix it up. I mix it up a lot. I don’t do, I don’t always do dark. I don’t always do light. I just, I do what I feel matches like, you know, kind of the brand. Right? So, that is, that is that. And you know, with this site, guys, like some of the stuff you’re looking at, it’s my own site. Like, I take opportunities to just experiment with stuff.

0:24:31
I’m just like, let’s just play around. Let’s, let’s see what happens, you know. This site, somebody had asked in the comments, you know, what was the design process? There was not a design process for this site. This site was literally, I did the base level of adding frames to a website and customizing them. It was literally, let me add the frames so I can get the site structure down. So I created my wireframe with frames. And then I just started styling the classes. That’s all I did. And then I started, I was like, I don’t like that. Oh, don’t like that. Okay, let’s, let’s move on to this. So I didn’t use a designer for this website. I didn’t like, you know, we didn’t do the standard process.

0:25:09
We would normally do as an agency. This was just all me playing around trying out different things and, you know, saying, all right, whatever, we’ll, we’ll go with that. And again, it’s, I like to experiment. I like to play around with stuff. And that’s where a lot of the tutorial stuff comes from that I do, right? Like I find, I try to find really useful ways to approach things and then I just share that. But if I’m not playing and I’m not experimenting and I’m not trying new things, then I don’t really have a lot of interesting stuff to talk about. Like, you know, you, you always got to be kind of, you know, in that mode. You can’t always be in just business mode or so. Let me just knock out the website following a process like we always do. Let’s take some project time to just play around and experiment. I would have put the latest video before the blog articles.

0:25:59
Yeah, okay. That’s a, I mean, it’s, it depends. It’s like, you know, what’s, what’s most important? Here’s the thing is on the homepage. These were really highlighting videos in the YouTube channel, right? It’s like video, videos, videos. And then projects. And so yeah, you could say, let’s put another video here. But it’s like, well, maybe they’ve already seen a bunch of video stuff. Maybe they want to see some article stuff. And then they can see the latest video. But you could always move that up. Well, I don’t know. It wouldn’t really make sense up here somewhere in my eyes. I don’t know.

0:26:35
It’s kind of where I put it because I thought it was the best. You could make an argument probably either way. I don’t think it’s one of those things that ultimately matters all that much. All right. Let’s see, is this recorded or watch later? Yep. OK. Is anybody else using SureCart, by the way? How do you do the, the Hanzi says, how do you do the links to the headings on the about page, links to the headings on the about page, links to the headings on the about page, links to the headings on the about page, links, links to the headings on the about page. I don’t know. I don’t know what I’m confused. describe that differently and maybe I can catch on. What plug-in element for the sound player?

0:27:21
So these are literally just, they’re just Spotify widgets. So you just go to Spotify and hit Share, and it gives you an embed widget, and you just drop it in. I don’t like it because I can’t show you which songs I actually like. It’s literally just the artist, and then, and it just gives you previews. You can’t even listen to the entire song. But yeah, it literally just Spotify’s default website widget. And thankfully, they had a dark theme mode for it, which just happened to match my site. It just got lucky, so I dropped them in and went with that. All right, Aaron says, listening to your favorites and assuming others want to listen to your favorites. Yeah, I don’t assume that they want to listen to my favorites.

0:28:03
I don’t assume. These aren’t actually my favorites, like I just said. They’re just artists I like, and then you’re free to browse the artist if you want, or not browse the artist if you want. I thought it was something different, more personal to me. So I just, yeah, I don’t get the argument that it’s pretentious to tell people what kind of music you like. I think button links in the project archive are not working properly. That is very possible. Yeah, that is very possible, because that grid is not. I made it a global element. We got to talk about global elements in bricks, too. In fact, Tony was like, you got to do everybody’s confused about global elements in bricks.

0:28:44
I made them a global element so that when I changed them on the homepage, they also changed here. But then, kind of the last minute, again, I was like, no, I don’t want to do that. And I took away that and then forgot to update them here. But global elements in bricks, we have to talk about, because they’re very, they’re very confusing. The thing that are called global elements in bricks are not actually global elements. So you have to do it a different way. So yeah. All right. Let’s see. Let’s see. Let’s see.

0:29:12
Let’s see. OK. All right. Let’s go into. I’ll give it to more questions in just a second. So what people asked for mainly was all the videos, like in one place. And then can we get transcripts for videos? So we are going to do our best to bring transcripts to all the videos. This is going to take a while. OK, it’s going to take a while. But we’re going to do our best to bring transcripts to every to all the videos. We have more filtering options now.

0:29:39
Stuff that you can’t really do very well on YouTube. So you can filter by category. You can also see related tags. So there’s going to be a bunch of stuff. If you want to come in here and just see stuff related to custom post-highs. Now, obviously, all this stuff isn’t tagged up properly yet. It’s not fully categorized properly, because there’s so much content. It’s a big project. So we’re working on getting it going. But this is what you’re going to be able to do. It’s to sort stuff by tags, sort stuff by categories. You can filter and say, I want to just see all premium content here.

0:30:13
You actually don’t have to go to YouTube to watch these. So if we click on this video right here, you can literally watch it right here on this page. So we’ll just take a look at the video template real quick, very basic video template. You’ve got your description down here. And then the related tool section, this is that bidirectional relationship, where we’re going to say, hey, here were all the tools used in this video. So if you’re interested in using the same plugins or seeing the stack or whatever, you can see all the tools that were used in this video, that’s all going to be done with bidirectional relationships. We’ll take a look at that.

0:30:51
We’ve got Ajax Load More. So you don’t have to worry really about pagination type stuff. You can just go ahead and load more. If you go down to, here’s a CSS category. So there’s all of the videos on CSS. No more load more because they all loaded in the exact same grid. This stays sticky on the left-hand side. So as you scroll down, it’s always there for you. So there’s a lot of good sorting and filtering stuff. And we’ll probably be adding more types of filtering as well as we go. Some date-based filtering, I can see going on here. A lot of stuff. All right?

0:31:32
OK. So we’re going to take a look at the behind the scenes of all of this. Because I know that a lot of people were interested in this. There won’t be ACSS and Frames videos in here. If you want to see ACSS and Frames videos, there’s a little link right here. And then of course, we put it a little alert so that everybody knows, hey, this is a large project. So we can’t just snap our fingers and, whoa, there’s all the videos. They all have transcripts. And they’re all automatically tagged perfectly and categorized. It’s just not going to happen. So there’s going to be a little bit of a migration period here to get all of this stuff in.

0:32:08
All right. Let’s take a look at the blog. We’ve got the call to action here. And then your article is grid. This is just a frame. This is exactly how it comes. So very, very easy to do. I just added the little hover effect to it. And then we’ll go ahead and click on the blog. So we can see the template. This whole template is a frame. So you have, and these are modular too, by the way. So you have your hero section, which is a frame. And then you have the blog body frame. There’s obviously some customizations here with the way the images break out a little bit around the content.

0:32:46
We come down here. And we’ve got a little join the conversation strip to kind of separate the content from the comments. And then your comment form, which in the next version of ACSS, those of you who know using the form light class to get your form styling added in like seconds, that now works on the comment form in bricks, which is very, very nice, because those things are just they’re painting the butt to have to customize all the time. So the same class that you use to style your forms, you can now pop on the comment element. And it’s going to style the form exactly the same for you there. And we’ve got a little about here for the author section. I did this little circle.

0:33:32
I still don’t think it’s perfect. It’s like half a pixel off over here, I think. But I did it with pure CSS, which is actually, it was a pain in the ass. But we could take a look at how that was done to get the little cut out. And to do this as a, let me be clear, to do this as a square is easy. It’s very easy. To do it as a circle, not so easy. So that was just a hassle. And then this will have more articles automatically. It’ll show you related posts. But there’s only four articles now. So there’s nothing related to this article.

0:34:08
So there’s going to be no related articles. And that’s it. That’s it for the blog page for now. Like I said, this is a minimum viable release. Now let’s look at tools. This was another thing people wanted updated, because on the old digital ambition site, it was never up to date. And it just, it wasn’t great. So now on a single page, you can go through and you can see all of the tools, all categorized. These are all done with loops and a custom post types, custom fields. And this is one of those things where this page cannot be built in oxygen.

0:34:51
And I want people to understand this. When I continue to say like, bricks is better than oxygen. Bricks is better than oxygen. This is a page that cannot be built unless you custom code it. If you custom code it, you can build anything, obviously. But out of the box, using oxygen’s repeater, this page is not possible. You cannot build it. Just can’t. It can’t be done. Why? Because you have to first query. There’s two loops. There’s a loop inside a loop.

0:35:17
The first loop queries all the categories of tools. And then the second loop queries the tools from that category. But in oxygen, you can’t query categories. You can’t query taxonomy at all with the repeater. So you can’t even start to build a page like this out of the box in oxygen. But in bricks, it was very easy. It took like, you know, seconds. So you pop in one loop program at the query categories of tools. And then you pop a loop inside that and say, query the tools associated with that category. And here we are. And then this is just a frame. It’s that.

0:35:49
And that’s all done inside a frame. So later I added the frame, which is this kind of side by side thing with these cards. And then I made this sticky. And then I just put one section on top of another. So it just kind of continues on down the page. And that’s that. That’s it. And then when you click on them, they will take you right to the tool. And it will also alert you with a little ribbon here, if it is an affiliate link. So we can let you guys know. Obviously, when you buy it, it doesn’t cost you any extra money. It just means that I get a little kickback, whatever.

0:36:24
And you guys already know I don’t recommend stuff, just because there’s an affiliate program for it, like a lot of creators do. I only recommend stuff that I actually use and like and know and trust and love. Yeah, yeah, yeah, yeah. OK. So there’s that section right there. And then of course, this has that ability to relate a tool to a video on the back end. So when we’re creating a video and it’s like, while we use these tools, it’s very easy for us to make those relationships. And then on the video template, it will show up. Let me go to like this one, for example.

0:36:56
You’ll see the related tools right here. OK. All right, perfect. Let’s talk about this. Oh, this template. So what you see here is a video embed, right? And you can play the video. All of that works. What you’re going to notice is though, if it is a premium video, and guys, you see this stupid border? OK, let’s, OK, there it goes. It went away. Bricks has a bug where if you try to set a border style, I don’t know when this bug occurred. It seems to be new to me because I’ve never encountered it before.

0:37:31
But it just, it overrides the border color with a Bricks border color variable. They already know about it. They’ve already said, all right, yeah, we’re working on fixing it. But it’s just, it’s annoying. Because it pops up like randomly. And I just fixed it, and that was cached, which is why we saw it. But now it looks like it’s gone for good now. So that’s good. But notice, there’s no player now. There’s actually just a cover photo, the inner circle cover photo. And then there’s this play button, which is fake. But this will actually take you to the video. Now, if you’re not logged in, you won’t be able to go there.

0:38:05
But if you are logged into the inner circle, it’ll take you right to the training, which is really good. But it’s the same template. So we’re just using conditional logic. We’ll take a look at how this is done. So it’s basically, if it’s a premium training, then it’s going to show you the cover photo in this link. And it’s going to show you this notice. And it’s going to say that it’s a premium training. But it’s the exact same template. So we didn’t have to create two templates or duplicate a template and then make changes to it to accomplish that. It’s just one template with conditional logic. All right, let’s hop in and see what everybody’s saying.

0:38:40
Got going on here. Pretty sure you can query categories and oxygen without much hassle. Now with a repeater, you can’t, unless they’ve changed something dramatically as of late, you could never query taxonomies with a repeater. All right, let’s see. The border bug appears on every element on bricks, kind of boring, especially for buttons. You can override it. But you’ve got to first see that it happened. And then I didn’t see it happen on this site until I had tashing on, which made it even worse to try to solve. But anyway, OK.

0:39:15
Duh, duh, duh, duh, let’s go up. Let’s not mention the O word. All right, let’s see. Love the video page, navigating to things inside the circle was painful for me. Yeah, I mean, this all definitely helped you out. If you want to go through this route to sort and filter videos, it definitely is good, right? Like the facets. This is all WP Grid Builder facets. By the way, they’re all just native out of the box. Oh, the search is another really, really good one, right? So if I, you know, it’s live search, right? So we don’t even have to reload the page or anything like that.

0:39:54
But again, this is why I just talk about WP Grid Builder so much. These facets are out of the box. I didn’t even design them. This is how they look out of the box. I was like, all right, that works for me. All I did was change the action color on them. And I was ready to rock and roll. So it’s really, really helpful. Question, can you show how you styled on the back end with frames, how you did logo background design, et cetera? Yeah, we’re going to take a look at the back end in just a second. Is the video search a WP Grid Builder facet? Yep, yep, it is.

0:40:26
Let’s see, how does the live now work? I take it, it auto appears when you are live. That’s a good question. And no, it does not auto appear when I’m live. Unfortunately, I got this idea to add this badge at the yesterday. It popped in my head yesterday. I was like, it’d be really cool if there was a notice on the site that said when I was live. And then I started looking into, all right, how can I quickly make this work automatically? I looked at Zapier. I looked at IFTT. I looked at plugins. I looked a lot of different things.

0:40:56
Nothing does it, apparently. Nothing I could find in a day’s search can do it. So I just rigged it up manually. And I’ll show you how I did it. But it’s still very easy. I do want it to be automatic, though. And I’m going to continue looking for a solution to make it automatic. And if I find one, I will, I’ll let you guys know. All right, so let’s go into, yeah, can you go into the how? Can you go into the how? OK, let’s go ahead and look at the start looking at the back end. So I’m going to bring this. That was an incognito window.

0:41:30
So I’m going to bring in this one. Because when I’m in the site, I think this is a WP grid builder thing. But when I’m logged, not a WP codebox thing, when I’m logged into the site, it flickers. And I think it’s WP codebox trying to auto refresh. And that seems like it’s only been happening recently. So I got to ask them about that. But yeah, let’s go in. So we’re going to take a look at the dashboard here. So let’s look at the custom post-types first. So I’m going to go to Metabox, Post-types. And you’re going to see there’s a video custom post-type. If you could have guessed, OK, whenever you’re looking at a website, if you’re new to custom post-types, whenever you’re looking at a website, start in your mind trying to imagine what things are controlled by custom post-types, and what things are not controlled by custom post-types.

0:42:20
What things might be bidirectionally related to one another? What things use custom fields? And what things don’t use custom fields? Really try to start to do it. And start thinking in that way, because when everybody asked me, how do you plan out all the custom fields and all the custom post-types and the relationships? Again, it’s kind of like the design of this site. First of all, I’ve been doing it for a very long time. So I literally just go in and I just make the custom post-type. I need a video as custom post-type. So I make it. Then I’m like, what custom fields do I need? I just start adding them. And guys, you can always remove them if you don’t need them.

0:42:58
OK, you can always delete them. So I just start adding the ones I need. And then I’m like, all right, what do I need? This one? No, I don’t really need that one. All right, what kind of custom post-type is that? Let me try to detect it. No, no, no, that needs to be a wizzy wig. OK, and then I just mold it to get it to where it needs to be. And it’s fairly quick that way, just because, again, I do have a lot of experience doing it. So it’s not that big of a deal. But I have the video custom post-type, because that was obvious. OK, we’re going to have videos on the page. Those are not going to be posts.

0:43:30
They’re not going to be pages. What do they need to be? Custom post-type for video. We’re going to have projects. All right, so we need a custom post-type for that. Reviews. Right, so that’s another thing. You go to the homepage. You scroll down. These are all queried. And this is a frame. Right, and again, it’s pretty much every frame that we use is query loop friendly, because I love using custom post-types. And you should be using custom post-types for this.

0:43:56
So this will actually show these randomly. And then I can query them onto different pages for different reasons. I can relate them to other things. You can do whatever I want to. Having them as a custom post-type makes things really flexible and powerful. So reviews always, OK? Projects always custom post-type. Tools. Obviously, you did a custom post-type for that. You don’t want to manage all those tools as normal posts or pages or anything like that. And then products, those have to be a custom post-type as well, even though there’s only one product.

0:44:27
Right? So if we go look at products, we just click on, there’s inner circle. That’s all there is. And somebody would be like, why would you make a custom post-type for one product? Because there’s probably going to be more. And then I don’t want to have to go backwards, right? You never want to go backwards. If you know, hey, there’s probably going to be more of these things in the future. Then just do it the right way from the beginning. Make the custom post-type. It requires three minutes of extra work, three minutes of extra work, to make it a custom post-type.

0:44:57
But it gives you tremendous value moving forwards. So why wouldn’t you take the extra three minutes to just do it? The only people that don’t do that are people who are scared of custom post-types. They’re like, I don’t know about all these custom post-types. I don’t know how to do it. OK, I get it. I get it. But we got to learn it, OK? Because it’s so fundamental to the work that we do. So even though there’s one thing in here, it’s a custom post-type. But now you look at something like videos, and you can start to see, oh my gosh, you would not want these. You know what a disaster this would be.

0:45:31
If you try to put these in as posts, or if you try to put them in as pages, and then just use categories, and a lot of the stuff that we’re doing with templates and query loops and relationship would be so much more difficult, so much more difficult, if these were just posts that were categorized, OK? So having them as a custom post-type, way, way, way, way, way better. Here’s the live streams right here. So if you want to know how the live stream bag is created, it’s literally a custom field. This is called a settings page in MetaBox. So if we go to settings pages right here, you create a settings page, which is like a custom post-type for the admin.

0:46:16
And it’s only a single, you could make multiple of them, right? But it’s like a single entry in the database. And then you can add custom fields to it just like you do anything else. But it gives you the settings page. And then you put your data in. So here’s the current live stream URL. Now anybody who knows anything about simple conditional logic is I made a button, position fixed. We can go look at it real quick. So we’ll go to bricks, templates, and we’ll go into the footer. And we will isolate. Let’s collapse all of these. OK. And then here’s the live stream badge right here.

0:46:53
So live stream widget. We just look at the conditions. The dynamic, we’re pulling from dynamic data, are checking for dynamic data, the live stream URL custom field. If it’s not equal to empty, OK? So if it’s not empty, then show the badge. If it’s empty, then don’t show the badge. So when I’m done with the live stream, I just delete, save, boom, badge goes away. Next time I do a live stream, I pop the URL to the live stream in. I hit save. Now the badge appears on the website is very easy. It’s manual.

0:47:25
It’s not nearly as good as doing some sort of automatic API check is Kevin live streaming show the badge if he is. That’s going to require a lot of extra work. Now I tried to take shortcuts, like I said. I looked at Zapier. No. Looked at IFTTT. No. Looked at some plugins. No. Not really. So we’ve got to find a solution for it. But this works in the meantime. This does the job. I guess the job done, as they say, in the meantime.

0:47:53
So very, very simple. And it’s just position fixed. So it’ll stay down there in the left hand side the entire time. And it’s got a little animation on it. No big deal. Let’s see if the animation is here or in, yeah. So it’s just a heartbeat. And then the code for the heartbeat is actually in WP codebox. And that was just pulled straight from Anomista. So I’ve showed this in my tutorials before. You go to Anomista.net. We’ll hit start. And then we’ll go to attention. Because we want to get people’s attention.

0:48:22
And then I think it’s the pulsate animation, which they call pulsate. But it’s actually called heartbeat here. So they give you all this code right here. You pop that in. And then you put the animation on your element. And then your element animates. And it’s like 10 seconds of work. And then you move on with your life. So I’ve showed these shortcuts before. But it’s not a lot of, it might look complicated on the surface. But then you kind of dig in the back. And you’re like, oh, that’s quite simple. It’s quite simple to do. Anybody can do that.

0:48:56
All right, so I’m going to leave this template for now. All right, what do you guys want to dive into? So we kind of did the overview. You’ve seen the overview. What do you want to dive into in more detail? Is it the videos? Is it the blog template? Is it the tools? What do you want to dive into the most? Let me get my chat back so I can actually follow what’s going on here. All right, let’s look through this. A lot of people, a lot of people are trashing divvies for some reason. I don’t know what got the divvy conversation started.

0:49:33
Why do you use a review CPT instead of using a plugin like WPSocialNinja to pull reviews from other platforms? Because I don’t like to automatically pull reviews from platforms. And then I like to do a lot of stuff with my reviews. So I like to, again, query certain types of reviews on certain pages. I’ve talked about this at length in the past. If you have a specific service, like imagine that we were a roofing company, which is very easy example. OK, if someone’s looking for a roof replacement, I want to show them roof replacement reviews. I don’t want to show them roof inspection reviews or roof repair reviews or any other kinds of reviews.

0:50:17
I want to show them reviews from other people that got roof replacements, because that’s more powerful as a sales tool. I can’t do that if I’m using some dummy plugin that just automatically pulls all reviews, has no way to categorize them or anything else. Now, maybe WPSocialNinja is so advanced that you can actually categorize the reviews once it pulls them. I don’t know. I don’t know. Maybe it does. If it does, correct me if I’m wrong. But if it doesn’t, then it’s not going to work for me. Because of the way that I like to, the flexibility that I need, I like to bi-directionally relate reviews to certain things.

0:50:49
There’s a lot of things I like to do that if you’re using an auto plugin for that kind of stuff, you just can’t do them. And so there’s more value to me in putting in the reviews plus not all reviews are worded well, guys. There’s reviews that have typos in them. There are reviews that just don’t sound great. And it’s like, I don’t want that one on my site. They didn’t word it well. Or I want to just kind of make it make more sense, right? Or put the appropriate punctuation in. So when I manage them manually, I can make sure that they actually show up in a pleasing way on the website. How are you going to treat your blog versus custom post types?

0:51:28
So the blog is just posts. Because this is what wordpress is for. So this is where the blogs go. Now I got a lot of draft posts in here. Stuff that I’ve brought in from Digital Ambition that’s not published yet. I don’t even know if I’m going to publish it. But it’s just this is it. So posts here. The only difference here that’s very important is the categories. So here’s all the categories for posts. Well, guess what? If I go to videos, categories, they’re exactly the same. And this is I do see this mistake a lot.

0:52:00
That people will create a custom taxonomy called video categories when they also have posts that are all going to be categorized exactly the same. Now you have two taxonomies you have to manage. What’s better to do is create a shared taxonomy. You can share taxonomies in wordpress. So if I go into MetaBox and I go to taxonomies, no, it would actually be in post types. Because the post categories is a default taxonomy. So that’s not managed by MetaBox. Got all these plugins sound exactly the same to my brain. OK, so I was going to let’s go to video. So you’re setting up your video custom post type. And you have the opportunity to create a custom taxonomy for it or under taxonomies.

0:52:53
You can say, no, I want to use the default word press category taxonomy to categorize these. And now all of a sudden, your posts and your videos share the same taxonomy. So you have one taxonomy to manage. And then what I did is I created a custom taxonomy for the tags. And I used those for videos. Because I’m not going to be using tags for posts. I’m only going to be using them for videos. So that was the only thing there that I did like custom. Everything else is exactly wordpress out of the box for handling blog posts. All right, let’s go down and see what you’re using for the mobile menu looks snazzy.

0:53:35
OK, we can talk about that real quick. So that’s a quick one. So I’m going to go to the front end. I’ll go here. We’ll come down and bam. So I hate this. I hate how it’s the admin bar. Let’s do it here. OK, there we go. Now we can see it without all the admin junk in our way. All right, so this right here is actually a frame component. It’s the trigger component. So it’s a newer component that we released in frames. And then you click on it and you get the menu.

0:54:06
And then the menu will stack at the next breakpoint. So this menu is a frame. Guys, I told you the entire site is built with frames. They’re all frames. That’s it. It’s all frames. So this is a frame right here. It doesn’t look like this out of the box. It’s actually a sidebar. And so I was like, I don’t need the sidebar. So I just deleted it. And then this menu right here is split into two using CSS columns, not grid columns. And then when it reaches the minimum column width, it just automatically stacks on itself.

0:54:41
So it looks pretty good at every breakpoint. And then you’ve got the close button as well. And this, of course, animates. So yeah, that is, it’s just frames. It’s just frames. So you drop them in seconds. You’re pretty much done. So easy question to answer. All right. Let’s keep going up. CPT conditionals, bidirectional relationships, and frames, model for smaller screens maybe. OK, I think that’s what you’re wanting me to dive into. OK, oh, background elements. Yes, yes, yes.

0:55:12
We will do that as well. We’ll do that next. Let’s dive in to the hero image pseudo elements. Let me just make sure I didn’t miss anything super important here. What solutions did you use for premium paid restricted posts? We’re going to look at all that in just a second. All done with custom fields and conditional logic. Can you tell me how the relationship in MetaBox works? Yep, we’re going to do that too. So stick around, guys. We’re dedicating this entire episode to all of this stuff. You’re the first person I’ve seen who is actually showing us how to use WordPress like this, like to learn more and more tutorials.

0:55:53
Yes, I think this is so important. This is like, I don’t know why more people don’t talk about this show it because it’s so fundamental to using WordPress. Are those frames you use available right now? Yeah, every frame on this website is available right now. Nothing is coming soon or anything else. All right, let’s go into home page pseudo elements. All right, so these pseudo elements right here, let me close this, close this. OK, let’s get into this. So this is very important. I am going to do a dedicated tutorial on this. So let me go down to home page, edit with bricks. OK, so I am going to, you see this class right here, Accent Blur.

0:56:42
I’m going to turn that off. Notice that both accent blurs are now gone. And you actually see really how important these were. And why I came to the conclusion that these need to be there. So I got my headshot. I cut it out in Photoshop. All right, so I cut it out in Photoshop. And then this is a frame. So if you look at the frame on the front end when it’s finished, you’re like, that can’t be a frame. It’s too custom. That’s the point. The frame aspect is left-aligned content, right-aligned image, and then all the BEM classes are already on there ready to go for you.

0:57:18
And then you do what you need to do with it. So what did I need to do with it? Well, I obviously exchanged my photo. And then I needed to position it a certain way. So normally, the photo is just sitting there in the container because that’s how you might want to do a lot of heroes. But it’s not how I wanted to do the hero. So I could easily look through all the frames and be like, there isn’t a hero available with a cut-out image that’s positioned to align at the bottom of the point. That’s not the point of frames. The point of frames is get you the starting point, 80% of the work is done, and you do the last 20% that needs to be done to get it to where you want it to be.

0:57:55
That’s the concept of frames. So we swap this image, and then I position it. We’ll look at the positioning in just a second. And then I looked at it, and I was like, maybe it needs a shadow. And so then I put a shadow on it. Now I was like, maybe it needs more of like a, maybe it needs a glow, right? Let’s put the action color glowing behind me. And so I did that with a drop shadow filter because you can’t use box shadows on these. It puts the shadow on the outside of the box, which is obviously not me. So you can use the CSS, what’s called a drop shadow filter. It’s kind of like a box shadow, but it actually puts it on the outline, right?

0:58:32
So I tried that, and I tried it as a glow, and I was like, that worked for a couple days. That worked for a couple days. And I came back a couple days later, and I was like, nah, I’m not feeling it. Not feeling it. So I took it away, and then I was like, what else can we do? And then I started playing with pseudo elements, okay? And so accent blur, and then once I started playing with pseudo elements, I was like, okay, I’m gonna use, I might use these pseudo elements elsewhere, which I did at the bottom of the page, okay? So if we go down to the bottom, you can see it right here, and this is what I was talking about.

0:59:04
And then the other one is way over here in this bottom right corner. They’re very subtle, okay? And we’ll talk about how they were created, but the main thing I want you to understand, you see that class added them here, I’m gonna go down here, click on this section, guys it’s the same class, but they look completely different. They’re in different positions, right? It’s like, what’s going on here? How is a class doing that? Because a class is not supposed to be able to do that. Okay, so that’s exactly what we’re gonna talk about. The first thing is, how are they actually done? Okay, so I’m gonna go to Style CSS tab, and this is why I love, it’s why I just, Bricks makes this so fantastically easy, okay?

0:59:47
So the blue box is a before, and the after box is, an after, or the red box is an after, excuse me. So what I’m gonna do is I’m gonna switch this to zero, and zero, and this will reveal exactly what happened, what is going on here. So literally one pseudo element is a square box, and the other element is a square box, then they’re rotated, and then they’re blurred. That’s, that was it. So, yeah, so, and then it look, it’s all controlled via what are called locally scoped variables. And again, I need to do the full tutorial on this, okay? But if we put the blur back on, you’re gonna see them go back to being their blurred selves, and I kinda like that, you can control the rotation of them, you can control their width, you can control their position.

1:00:40
This is all very, very, very critical. And the fact that it’s done with locally scoped variables is what gives it so much flexibility to be used elsewhere on the websites. You’re gonna see how this works, okay? The display is here, because you may need to hide one, like you don’t always want both of them. That’s a case, a scenario, right? So we need the ability to hide them. Well, if we need the ability to hide them, we also need the ability to show them. We can also control their opacity, right? So I did not use, there’s the color right there. I did not use the trans colors, because I decided that’s too much work, let’s just make the box have an opacity.

1:01:24
So if I set this to one, you’re gonna see what it looked like at full opacity, which that’s obviously no good. You would never wanna do that. But we dropped the opacity down, now you have something that’s very, very, very subtle. Okay, Carlos says, this is an important question here. Is there a reason why you add the CSS in the element as root instead of adding it in code box? Yes, absolutely, yes, okay. We’re about to get there, we’re about to get there. All right, so then there’s some other stuff going on here. There’s just all typical like pseudo element type stuff, but you can see we take all these variables, and then you just inject them wherever they need to go in the actual pseudo element CSS, okay?

1:02:10
Now what does this give you the power to do? It gives you the power to come down here, where these boxes are rotated a certain way, blurred a certain way, position a certain way, you take that same class, and you pop it onto this section right here. And then what you do is in the ID level of that element, you can actually decide which locally scope variables you want to override. And this is important because with the pseudo elements, like this position right here, is done on an element by element basis. It’s unique to that element. So this is one area where it’s perfectly fine to do some ID level styling because I’m only trying to affect this one particular instance of this element.

1:03:06
And but this is the power of locally scope variables, okay, and if you, I’m gonna go over this real quick, this is not the full tutorial, okay? Real quick, just you understand what’s going on. A locally scope variable, you guys have seen globally scoped variables. Var action is a globally scope variable, which means I can access my action color from anywhere on the website, okay? If I put in var action, I’m getting action. That’s what I’m getting, okay? A locally scope variable is defined inside of an element, an actual element, like a class or whatever. And it only can be used in that class or in the elements, the child elements of that element, okay?

1:03:48
So you don’t even have to be careful how you name them, right? So you can see before display, these are very generic names because they only apply to what I’m doing with my accent blur. And I’m defining them at the class level, which means they’ll automatically be here when I apply the class, but you can override them at the ID level. So I come down here on this section and I’m like, well, here’s what I wanna do. I wanna change the width of the before and the after. I wanna change the inset, which is their position on the screen. And I wanna change the overflow of the container because I’m making them appear off screen. I need to have them this section basically cut off any overflow that’s going on.

1:04:30
So I can even control the overflow of this element as well. So I can now use these pseudo elements anywhere on the website through this one class. And then I can determine how they appear and behave and even how they’re animated if you’re doing G-SAP, okay? Some of this is gonna relate to animation as well. I can turn one off. I can turn the before off. I can turn the after off. I can have them both on, whatever I wanna do. So this I feel like for managing these types of design accent pseudo elements, really, really, really powerful technique, very, very flexible, versus needing like, you know, 30 different classes for, oh, well, now it needs to be different here.

1:05:15
Now it needs to be different here. Now it needs to be different here. Just use one class and then override the locally scope variables to make the element behave differently wherever it needs to behave differently. All right, did that all make sense? Did I cover that enough or are you still highly confused? I can explain it a little more if we’re still confused. Otherwise, we’re gonna go into video territory here. We’re gonna start looking at the video archive. And let’s take a look at our stream in general. All right, we still got, this got good viewership. This is good. It’s amazing how many people and agencies build WP sites that have no idea about proper use of post types and taxonomies just end up building junk.

1:05:56
Thanks for doing this. Yes. I talked to last livestream man about a site that I audited recently and hundreds of pages, hundreds of posts and needed about eight, 10 different custom post types had zero and it was an absolute disaster, just dumpster fire. All right, oops, I see a click here on click here for ACSS and frame. Yeah, there’s probably typos here and all this other stuff. It’s not, nobody said it was perfect. It’s the starting point. I’m racing to get it done and to get it out because we need to. We need to move on with our life.

1:06:35
All right, let’s see. All right, how did you make the image, the hero image larger? Let’s look at the hero image in general. So this is the only image of its kind. So I just styled it at the ID level and I was like, there’s only one that’s gonna be like this. So let’s just rock and roll with it. So it’s got a width on it. It’s position absolute and then it’s, this is actually really important, right? Let me zoom in here. Hopefully the voice sticks with us. So these variables are so important for so many different things, right?

1:07:15
So I was like, all right, well, the image started at the bottom of this container, right? If I put a zero here, it would be at the bottom of this container, but I needed to be at the bottom of the section. But how do I know how much space is here at the bottom of this section? Why didn’t really need to know? I just knew that I was using section space L. So if I just do section space L times negative one, it’ll get me the exact amount of space that I need to position from the bottom. And then the same thing was happening on the left because what I did is I took this and, let’s see if I did here, where did I define this?

1:07:53
Let’s go down to CSS, not there, alpha, content. I think I did this in WP code box. I defined a variable called content width for this right here. Maybe it was at this width 550, CSS, no, I’m on the image. I’m not clicking on the thing I wanted to be clicking on. On the inner wrapper, let’s check this, CSS right there. So I defined a variable, this is another locally scoped variable called content width at 65 characters width. And I put that on this box right here. So you could see this is referencing content width. Why did I do that? I did that because of this image. It is positioned absolute.

1:08:40
How do I tell it where to be? If I tell it to be based on its relative parent, right zero, it would go to the right of this section. It would be way over here. Didn’t want it to be way over there. And then if I started from the right, there’s no reference point for how far from the right it needs to go. So what I needed it to do is start left, right? And I needed to go the width of this content plus some. So if we look in here at its left position, it’s content width plus space L. So it’s the width of this content plus another space. And that gives it this like always perfect alignment. So that if this ever gets narrower, the image will actually come with it a little bit.

1:09:25
And it’ll stay in its proper position. So I don’t know. That’s how I did that. And then you just see, there’s just a pop of fixed width on it. And then as you scale down to mobile, I wanted it to still be there. And I was OK with it just being cut off. I didn’t want to squish my content to fit the whole image in. So I was like, oh, just let it be cut off. That’s fine. And then here, it just goes to basically, I think it went to position relative here. Yeah, it goes to position relative here. And just behaves like a normal image at the bottom of this container.

1:09:59
So that’s basically how that was done. All right. OK, let’s see. Let’s go look at the videos. It’s time. It’s time and time. Let’s leave not saving. Don’t save anything. I don’t know what I’ve just done. I’ve done a lot of clicking. We don’t want to save any changes. Let’s go to, let me get a sip here. OK. Videos, videos, videos. So we’re going to go open a video like web design for Dommy’s 007.

1:10:35
This is the one we’re actually on. Let’s do this one. OK. So the description goes right in the Gutenberg Editor. That’s number one. So that kind of makes that nice and easy. So let’s open the template while we do this. So you guys can juxtapose this with how it looks on this site. OK. So here’s effectively what we have. So this right here is put in by this Gutenberg content. Very easy. The heading is obviously put in at the heading. Got it. OK.

1:11:10
Now we have a couple of custom fields. Here’s your toggle for is this a premium training or not a premium training? So if I flip this switch, this video in bed will disappear. It will be replaced with a cover photo of the inner circle. It’ll be replaced with a little this whole page. We’ll now show a badge or whatever right here. This says, hey, this is premium content. Join the inner circle. It’ll have a premium content label up here. So all that stuff happens just by flipping the switch. That’s it. So you flip the switch. Now it’s premium content. Everything changes.

1:11:47
I’m going to leave it undone. You pop in the video URL. The video ID. Why is that here? Because bricks this video player requires the ID and not the full URL. Why is the URL here? Because we need to be able to link people to the full URL of the video. So you actually need both of these. And then you have video duration as well, which is automatically pulled in. Shout out to Tony on my team. Tony is responsible for. He basically exported all of this stuff, got it into a spreadsheet, organized, imported it into the custom fields.

1:12:20
So this was all kind of automatically imported. Here’s where you do the related tools. So for example, if I mentioned WS Form in a video, and I’m like, this video uses WS Form, I select it from related tools. I hit update. And then it shows up. I don’t want to do this because you make changes live. And it’s like, you forget what you did. And now stuff’s wrong. Here’s the page right here. That would show up right there in the related tools area. And then people can click on that. And it’ll take them to the tool. And everything is easy.

1:12:54
And again, this is the power. That is a relationship. So let’s go and see how we set that up. As far as custom fields go, this is very basic. Very simple stuff. Nothing magic crazy is happening here. So I’m going to go to custom fields. We’ll take a look at the video custom field. Right there. It’s four fields. Four fields. This is called a switch field. That toggle is called a switch. OK. We’ll just take a look at the logic here in just a second as well.

1:13:25
And all you do for custom fields, you create a custom fields group. This is called a custom fields group. Name it the thing you’re assigning it to. And then in settings, go assign it to that custom post type. So you assign it to videos. These fields will only show up on videos. Now as I showed in last week’s training, you can also share custom field groups between custom post types. That can be very powerful, too. But it wasn’t needed on this website. So they’re just assigned to videos. That’s all good there. Now we go to relationships.

1:13:55
Here you can see the relationship is set up. You would do new relationship. You’re going to get a field like this. And you’re saying object to object, post to post. What kind of post? Video to tools. And then in the Metabox tab, you just give it a title related videos, related tools. You determine where you want this box to show up on the page. And then you hit update. And it’s done. It’s done. It’s very easy. It’s why I like Metabox.

1:14:25
It’s not so easy in ACF, if I remember correctly. A little bit more going on in ACF. Metabox makes this very, very, very easy. So you can do these kind of complex or advanced things very, very easily with Metabox and WordPress, custom post types, custom fields, relationships. It’s all not that difficult. You just need to do it once or twice and get the hang of it. And I have tutorials on doing all this stuff already. There is a full tutorial on YouTube about setting up relationships. So maybe go to the new videos page and do a little search for that. See if you can find it.

1:15:07
OK, so let’s look at tools now. So we’re going to go to custom fields. Now we’re going to go to tools. And I want to look at the logic a little bit here, too. So we have the tool type. And let’s open a tool. So we’re going to all tools. See how organized this makes everything? And and peep the admin columns pro. My gosh, I can change everything I need to change about every one of these tools from right here. Inline editing, I don’t have to open every single tool. I can see what’s marked. And look at this. This is an affiliate.

1:15:45
OK, now it’s an affiliate. Now it’s not an affiliate. I can change it all from right here. Now it’s going to be a pain in the ass. OK, there we go. There’s a little delay. A little delay. OK, so here it all is. Nice and organized. Logos all in place. I can swap them in from right here. All this is inline editable. I can choose their categories, all that good stuff. But let’s open one and you’ll just see all the exact same fields.

1:16:14
Here’s the little affiliate toggle, product link, short description, the type. OK, why is this not a taxonomy? It could be a taxonomy, right? But I just felt like, yeah, that doesn’t really need to be. It’s just locally scope to each tool. It’s fine just like this. OK, so now what we want to do is we want to go into the tools page and just kind of see what’s going on in the back end with these tools. So we’re going to edit with bricks. All right, so we’re going to go over here and collapse all of this. All right, so here’s our sidebar. It’s going to show you with this little icon, what is a loop and what is not a loop.

1:16:59
So this entire container with the sidebar and with this right content side is a query loop. What is it querying? It’s querying terms. It’s querying tool categories. So that is what’s getting us. Let me go to the tools page. That’s what’s getting us this and this. Now, where does this category description come from? That’s actually a default WordPress thing. So if you go into tools, go way back here, under tools, tool categories, and then you click a category. We’re getting engines. So we’re having problems with, I don’t know if any of you have used Search WP.

1:17:46
But since I’ve installed Search WP, I get this random engine X error. OK, but anyway, as I was saying, it goes away like seconds later. But when I have Search WP off, no problems. So we’ve got to look into what’s going on with Search WP here. But here’s a description. This is just default WordPress. So you can actually come in here and give your every category any description that you want. And then you can dynamically inject that onto your category page or into your loops or anything like that. So that doesn’t even need to be a custom field. But this first query loop gets us this.

1:18:23
And then over here in this container, let me open up main, we just have a card. This card was a frame. OK, I renamed it Tool Card right here. And I built out the Tool Card, as you would normally expect. OK, here’s the little affiliate link badge. We’ll take a look at that in just a second. But if you look at the loop, here would be the thing that might not be so obvious. So the query loop. So you’re going to pull from your Tools Custom Postive. That should be kind of obvious. But then you need to come down here and say the Taxonomy Query is the Tools category. And then you need to get the term ID and inject it for the current category, which is the category inside this instance of the loop.

1:19:11
So for example, you’re basically saying in plain English, get the Pull Tools from the Analytics category, because this block right here is queering the Analytics category. That’s kind of all this does. It’s like self-referencing itself. So you’d say, hey, we’re just referencing the term ID of this term right here that we happen to be inside of right now. And so you put these two loops together, and you have the outcome of all of this being dynamically generated. This entire page is dynamically generated from two separate loops. So let me go back into the builder.

1:19:50
And you can see it right here. It’s literally how many containers are on this page? One, there’s one, two, three, four, five, six, seven, eight, nine containers. But there’s only one container in the structure panel. How many cards are on this page? My gosh. 50, 60 cards on this page. There’s only one card in the builder. It’s all dynamically generated. And so if I’m back here and I go Tools, Add New, check this out. Add New. I name the tool, Test Tool. And I give it a type, free, free me, I’m paid, whatever. And then I give it a description.

1:20:32
I market as an affiliate that shows the little ribbon or no ribbon. Give it a product link. And then I can even relate it to videos. And then I come over here and I say, you know what? It’s actually none of these categories. I got to make a whole new category. So I make the new category. I’m not going to do it right now, because like I said, I don’t like to mess stuff up. And then not remember that I did stuff. But I give it a new category and I hit Publish. You know what happens? On this page, a brand new container gets created with a brand new section heading and then puts that tool inside of that.

1:21:07
And so this page, I never have to touch. Just never have to touch this page. I can add as many tools, as many categories as I want to. I never have to touch that page ever again. It builds and manages itself. I delete a tool. Tool disappears. I delete a category. The whole block disappears. It’s gone. So it all fully manages itself. That’s kind of the power of this and why you want to put in the what? Five minutes, 10 minutes of extra work to make a custom post site, to make some custom fields, and then you use a query loop.

1:21:39
It’s not that much time. But it saves you tremendously moving forwards. So I want to make sure that we highlighted that. All right. Let’s get back to questions. Is the site publicly available? Yeah. Yeah. You can go to giri.co and see it live. What’s the benefit of using the colors behind your main image in CSS instead of just using Photoshop to create a PNG? So I showed you the major benefits, right? But we can go back and just reiterate it to make sure that everybody understands. Because you have to get out of this.

1:22:24
I see this all the time with, especially if you come from a design background. Like you love Photoshop, you love Illustrator. The name escape me for a minute. Figma. OK. All these design tools, designers love these design tools. And so when it comes time to design the actual web page in bricks or oxygen or whatever, they try to bring Photoshop with them. And they’re like, oh, I’ll just create that background in Photoshop. I’ll just create that instead of using CSS. Because it’s easier for them. But as you can see, we get into a situation like this where I have those two accident blocks like that in Photoshop.

1:23:02
So I got to make them exactly like I want them. And then I put it in as a PNG all as well in the world. Then I come and I decide, now I want to tweak that. Well, I can’t just tweak it. I got to go open the Photoshop file. I got to tweak it in Photoshop. I can’t exactly see what I’m doing or how it’s going to look on the page. Then I got to import it back in as an image. I got to optimize the image. So much stuff. So much stuff. But I could just create it with CSS. And then I can come down here. I can make any tweak and adjustment that I want.

1:23:33
And I can make that tweak and adjustment on the fly. And I can actually create that same effect down here. But with totally different positioning on these elements, that’s the power. And that’s tremendous power. You would never want to manage this in Photoshop. Never, ever, ever, ever, ever, when I ever want to manage this in Photoshop. 100% CSS, make it dynamic all day long. Also, it’s just going to load faster. Because instead of these being, you want to talk about load times, compare the load time of a blurred PNG image with a square CSS pixel. Yeah, the load times are going to be enormously different. So there’s a lot of reasons why you would never want to go anywhere near Photoshop.

1:24:20
For that type of same thing with images like this. Guys, you’d be surprised at what you see out there. People are like, I need circular images. They go into Photoshop and crop them into a circle and export them and then bring them in. Don’t do that. Got just put in the image. And then you CSS to crop it. You CSS to make it a circle. And then you can make it not a circle. If you wanted to not be a circle, you can make it into any shape you want. With a clip path, you could do a lot of different stuff. You can even change the part of the photo you’re looking at. So all of that should be done with CSS.

1:24:55
Not Photoshop. You got to avoid Photoshop at all costs. That would be the general rule of thumb. Avoid Figma. Avoid Photoshop. If it can be done with CSS, you probably want to do it with CSS. All right. We go over the video posts like you’re doing, but also go over the video cards. OK. Let’s look at the template for the video page. So we’ll go to bricks templates. We’ll go down to a single video. Video single.

1:25:25
Edit with bricks. OK. So here is what you see. Things will look a little odd in the builder sometimes, like the positioning on this, because it’s done with CSS grid. And the builder doesn’t always pick these things up correctly. But in any case, you can see everything here. So this little premium training badge has conditional logic on it. And it basically says, if this video premium training equals 1, then show it. And if it equals not 1, if it’s not 1, then you’re going to hide it, obviously. So what is the 1 in the 0?

1:26:04
The 1 in the 0 is that little trigger element that I showed you by default. Its values are 0 and 1. So if I could go to metabox, custom fields, we’re going to go into videos. OK. And premium training right here. So if it’s marked as premium, this is called a switch in metabox. So a switch has a default value of 0 if it’s off and 1 if it’s on. So you don’t even have to set these up. They’re values. You just can use the default values and say, hey, if the value is 1, which means it’s switched on, then show this.

1:26:41
And then I made this little notice right here, this alert, same exact logic on it right here. So if it’s marked premium training, equals 1, show this notice. Then we come in here. Let’s go to feature. You can see here’s the frame featured media alpha, which uses grid to position. And this is really, this and itself is very important. You can do anything you want with this little accent strip down here. You can angle it. You could do a lot of crazy stuff. This frame is very, very, very flexible. And it creates a really cool divider type effect.

1:27:21
And it’s all done with CSS grid. But we come in and we see there’s a video in here. And then there’s a premium video thumbnail. These two things both exist in the same grid, because only one is going to be shown at a time. So on the video, we have the conditional logic that you saw before. But this is the opposite conditional logic. So you’re showing the video if premium training does not equal 1, which means it’s off. So you show the video. Then we look at premium training. Has the opposite logic, the same logic as this badge and this badge right here. If it does equal 1, you’re going to show the premium video thumb.

1:27:56
And then the icon, which is this play button, has the exact same thing. And you can see they’re all literally in the same container. Because this container just uses CSS grid to place everything in the center. So you can see this right here. So basically what this is saying is, hey, every element of this container needs to share the same grid area. And then we’re placing all items in the center of the grid. So it doesn’t matter if it’s a video, it’s going in the center. It doesn’t matter if it’s a play icon and a featured image thumb. That’s all going in the center. And so now the grid controls the placement of all these things automatically.

1:28:37
And then the conditional logic shows which one is being shown. First, which one is not being shown. And that’s it. That’s all there is to it right there. Here’s your related tools right here. I’ll show you. These are bricks makes these so easy to query. Not so easy to query an oxygen. Very, very easy to. Let me, I know my head is in the way. So let me do this. I’m starting to remember. I’m starting to get it. Where was I? What was I looking at?

1:29:06
Oh, yeah, yeah. This sidebar. Okay. Related tools, related tools, group, tools wrapper. Okay. So this is a query loop right here. So we have the related tools group, which is set to flex. I believe this is a flex box. Yep. Flex box wrap in a row. That’s going to make them go side by side. And then also stack on top. Whatever needs to happen. Needs to happen there. And then it’s just one tool wrapper with a query loop.

1:29:32
You come in and you just say, so it’ll give you the option. Do you want to query posts, terms, users, or if you have relationships configured, it’ll literally say, do you want to query the relationship that you set up earlier? Well, yes, I do. Thank you. And so you click that and then you hit save and then you move on to your life. Your job is done. That’s how easy it is to query bidirectional relationships in bricks. So all of these are queried. If we look at them, it just has a label. It’s got the little pulse. I made a class. If I want it, that pulse effect. I can just choose whatever element I want that pulse effect on and just drop that class on it.

1:30:12
So that’s nice and easy. And it just uses dynamic data for where it’s linking to. Just pulls the product link from the custom field and sends people off to the specific product that is mentioned there. So that is that. Very simple. One of the reasons why I’m showing all of this behind the scenes is because I think, and you may still feel like this is very complicated. You may still feel like this is above your head or above your pay grade or whatever. I’m showing you this because I don’t want you to feel that way. I’m showing you this because if you do it once, then you will, like your confidence level will go from zero to 95. There are some situations in web design where you do something once and your confidence level goes from zero to five. And then you do it again and your confidence goes from five to fifteen.

1:31:07
And then you do it again and it goes from fifteen to twenty five. This is a situation. Custom post-ides, custom fields, bidirectional relationships, conditional logic. This is a situation where I truly believe if you go through it once, your confidence will go from zero to like ninety five. It’s just, it’s not that difficult. When you’re trying to explain it, it’s a little difficult to explain. But once you’ve actually been led through it, you actually do it for yourself a few times. It’s just going to be like, you’re going to know going forward every website, exactly what needs to happen. It’s just going to make complete sense to you. It doesn’t make sense until you’ve done it. But once you’ve done it, it really just starts to make immediate sense. It’s very, very easy. So I just want to make it more like approachable for you.

1:31:56
I want you, if you don’t do this kind of stuff, I want you to give it a shot. And you can go in the inner circle and get help. People will help you if you get stuck. I’m trying to do trainings that cover this kind of stuff. But again, you just have to not be afraid of it. If you’re afraid of it, you’re like, nah, that’s too much. I’m not going to, I’m not going to do it. I’m telling you, once you know what’s going on, once your brain makes sense of it, it’s five minutes of extra work. It’s ten minutes of extra work. But it gives you tremendous benefit, incalculable benefit going forwards. And it’s really going to elevate your game. I don’t want you to be scared of it because it’s not scary. Job a script? Scary.

1:32:35
PHP? Scary. I get it. That takes a lot of time. It takes a lot of attention. It takes a lot of, this, not scary, not hard. You can pick, if you’re just not scared of it, you just decide, nope, not going to be scared of it anymore. I’m going to go after it. I’m going to do it. I’m going to make it happen. Then you’re going to do it. You’re going to get it. And it’s going to be very easy for you going forwards. Okay?

1:32:57
So this is not one of those times to make the excuse that I’m scared of it. I don’t have time. And you don’t have time to not do this. You don’t have time to do it the way you’ve been doing it anymore. Because that un maintainable dumpster fire of it, not using post-times, not using custom fields, not using conditional logic. That is nobody has time for that. You only have time to do it right. Because doing it right doesn’t take that much extra. All right. How did Tony import spreadsheets to custom fields? I believe he used WP all import. But he can chime in. Can they click on a tool like WSForm Pro and then only bring up videos that have WSForm Pro tool in it?

1:33:39
Yeah, that’s possible. I don’t think we’ve set it up that way yet, but it is 100% possible. Let’s see. What else we got? Question. Johnny, your question was blank, my friends. So if you could put that in again. I hate I sound with the sinus stuff going on. Yeah, I think I’m like this. Best accessibility practices for each section of text to be left justified. You can center the wrapper for the tax return line. Okay. I think you were replying to somebody else. It is relationships possible in ACF. Yeah, it is.

1:34:16
It is for sure. It’s not as easy, but it is. See what else is going on here. As a professional photographer myself, I find I’m constantly working to convince people of the importance of good photography. Hey, yeah. I mean, it’s, it takes them convincing for sure. I don’t know why. I don’t know why. You look at any major brand. They invest gazillions of dollars in photography and video. And then you get clients and it’s, oh, we don’t want to do that. Well, we don’t have time for that. Just can you stock photos? Like, come on, dog. Like you talking like a little guy.

1:34:52
You talking like a little fish, right? You want to be successful or not be successful. You got to invest in the right stuff. How did you add the word count inside Metabox text area? Oh, good question. This is fantastic. See, I like the interaction because we covered things that I was, just either going to miss or forget or just didn’t even think about in the beginning. This is good. Because this is not intuitive. This is not intuitive. So the first thing you need is a plug-in. Ugh. Ugh. Ugh.

1:35:24
I wish you did not need a plug-in for this. Metabox. Metabox. If you’re listening. Make this happen without a plug. This is not need a plug-in. My friends should not need a plug-in. So let me go down. Let me find it. Um. Hmm. Here it is. Metabox text limiter. Yuck. Ugh.

1:35:45
Ugh. Should not need a plug-in for this. What are we doing here? You should not need it. So not only do you have to install this plug-in. Then you got to know something else. So you got to go into Metabox, Custom Fields. And we’re going to go, what was limited? Maybe the video lead or something like that? The lead paragraph? Let’s go to… Oh, that wasn’t even there. What was limited? There’s so many things in the site. What did I do here?

1:36:16
What did I do there? All right. Videos, projects. Maybe projects. I didn’t want the text to get too long for the project description. There you go. Right there. Okay. You will see this, Editor Options, right here. And it was just saying, add new. And there’s no indication that this would be where you do this. So you get this one called Text Area Rose. Oh, sorry. This is actually for the Rose. This is not for the text limiting.

1:36:48
And this field does not limit text. So we’re going to find a different field. But for those of you who wanted to know how to control the height of the Wizzy Wig Box, which was also another hassle. So let me go back here. Videos. Let’s go to Video All Videos. Open this video. I know. It was projects. My gosh. My gosh. Projects. Oh, there we go. There’s W.

1:37:15
Search WP for the win right there. Let’s go to projects. Try to go to one and then the other. Okay. Let’s do it. Oh, my God. Search WP. You’re killing me, small. You’re killing me. Andre, if you’re watching Andre, I was like, I can’t reproduce this. I’m like, well, I’ve reproduced it a lot, my friend. Okay, here we are right here. This Wizzy Wig Box would normally be like this. Gosh, it’s so annoying. I just hit a link on accident.

1:37:46
All right. Let’s go back. It would normally be like this. And I was like, there’s got to be a way to make it like, less intrusive. Because if you have multiple on a page, they’re all like this. And it’s like, my gosh, that is awful. So you can limit the height of your Wizzy Wig Box using this obscure text area underscore rows editor option. And then this is basically the lines. So I think it’s like eight by default or ten or some ridiculous number. So you put it at three, hit update, and then you have a normal sized Wizzy Wig Box. So that’s a good one. All right. What else is text limited?

1:38:25
Anything text limited? Project headline? No. Where did you see it? I think it might be one or two things with text limited. Maybe a tool. See, Andrea, I wasn’t lying to you, man. It happens over and over and over again. But then it just magically starts working again. Short description. Rows two. Oh, maybe it’s an advanced tab. That is. Here you go. Here you go.

1:38:58
Here you go. All right. So you come in here after you install the plugin and you add these custom settings, which again, there’s none here to begin with. And they’re not even in a list. Like there’s no list. You have to know what they are. So you have to read the documentation. And you use limit 20. And then the limit type is word because you can also do character here if you wanted to. So you can limit it to words or limit it to characters. So it’s a two-step process. Install the plugin and then come into your custom settings right here for a specific field. And then add limit. And then a number, limit type, and the type that you want to limit.

1:39:35
Word or character. Okay. All of that to answer what seemed like a very simple question. Like I said, guys, it was not intuitive. Okay. How did my search for MetaBox work when there is no MetaBox tag? It says D123. Where did you search for MetaBox? Oh, on videos? I’m still like zoomed into the site too. Let me zoom out. Oh, you search for MetaBox right here. This is where you did it? Yeah. Okay. Because there’s no, you’re saying there’s no tag for MetaBox. And there’s no category for MetaBox.

1:40:18
So how did the search for MetaBox actually find the right things? Okay. So the reason we’re using Search WP. And this is a really good, really good question. Again, you guys are on point with the questions. So the reason we’re using Search WP is because you can go to, even though it’s giving me database problems. Let’s go to Search WP, where are you, my friend? Here you are. Settings. So when Search WP, which is not a cheap plug-in, but it’s good. You create a search engine. Okay. And in the search engine, I created one called Video Search. And I’m telling it to search the videos custom post-hack. Okay. So here’s the video. See out on normal site search.

1:41:04
Search all these things. We don’t want to search all those things when you’re just searching videos. We only want to search videos. Hey, another benefit to custom post types. Because all my videos are in one place in the database. Okay. So then you could say, search within what? Well, the title, and I’m giving it like priority here. The title, high priority. So if MetaBox is in the title, it’s going to find it. Content, medium priority. So it’s going to look in the content of the description or whatever, the post. If MetaBox is mentioned in there, yeah, it’ll, that’s relevant. Not as relevant as the title. If MetaBox is in the slug, super relevant.

1:41:41
Let me zoom in on this. You guys can see better. And then the excerpt, it’s not looking at at all. And then what we do, because search WP and WP grid builder, actually have a native integration. So we’re going to go into all facets in grid builder. And we’re going to look at the search facet, Video Search. I created a custom facet called Video Search. So I’m going to open that. I’m going to go to the behavior. I’m saying you need to filter the results with a search field. And then it’s saying what search engine do you want to use? Well, normally it would say WordPress right here. But we don’t want that. We want search WP.

1:42:21
And then it’s even showing me the custom search WP search engine that I made called Video Search. And then I had saved changes. And then the facet magically works. So it is a, who the video is archive. This is a WP grid builder facet that’s using the search WP search engine to automatically show results right here. And like you said, you don’t need tags to be able to search because it’s looking at the heading. It’s looking at the text. It’s looking at the URL of this item. It’s looking at a lot of different things to find the appropriate results for you. And it all happens fairly instantly, which is really, really, really good. So hopefully that answers that question. You’re using the same photo for two different people in your inner circle, FYI.

1:43:11
I don’t think I am. Let me go back. Let’s see. Hmm, which one? Now, you may have seen in the builder you may have seen that happen. But that’s because the query loop has a query. What is displaying based on the query loop in the builder is sometimes duplicated in the card next to the item. So that may have been what you saw. But these should all be, yeah, they’re all the same people. I looked each one of them up on Facebook and stole their avatar. So I know that they are that took extra, extra work. That’s the other thing. When you pull reviews automatically, I mean, are you pulling the person’s photo or is it going to be some stupid placeholder avatar or is it going to be blank or like, you know, so those auto plugins, they have a lot of limitations.

1:44:04
Okay, I want to become a query loop conditions metabox grid builder champ. Well, this is the channel for you, my friend. You’re in the right place. Will we have those glowing accents in frames too? No. No, none of the design elements are part of frames is structural. It gets you the structural layouts, the accessibility, the HTML5 compliance. It gets you all that, you know, really important stuff. But it’s not going to design the thing for you. That’s the whole point. The design is up to you. Frames gets you all the, you know, 80% of the way there. You get yourself the last 20%. How do you make the 1000 in the inner circle section different in title? Okay, another good question.

1:44:48
So let’s go take a look. Let’s get out of this. Let’s get out of this. Out of this. Out of this. And go back. Okay. So actually I just could have just edited with bricks right there. Okay, watch. So I’m going to grab this heading right here. And you can see over on the side that there’s some spans. There’s a lot of spans. Ignore all these spans. These were from G-SAP experimentation. The one span that is important right here is this one called standout.

1:45:19
And so watch this. Change it to highlight. It does that. Change it to standout. It does that. Okay. So you’re creating these little class. All right. So we’re going to go back into. Now we go into WP code box land. Maybe. What is our. What is our site doing? Okay, there we go. Finally decides the load.

1:45:50
All right. Let’s go back here. WP code box. And. Global. All right. So we’re going to come down here and find. I think I put it in here. Yeah, here you go. Here’s span. Oh gosh. I just hit a key somewhere. Oh, there it is. Right there. Okay.

1:46:11
All right. So here’s the span highlight. And here’s the span standout. So we can take a look at what’s happening here. So for span highlight, you’re positioning the element relative. You’re giving it a color of action. You’re displaying it in line flex. Why are you displaying it in line flex? Because you need it to be in line with the rest of the content. It can’t create its own new line. It can’t act like a block element. It’s got to be in line flex. Then I’m rotating it minus five degrees. What we’re looking at is actually this one down here. Okay.

1:46:45
So that’s a rotation of minus five degrees. And then it’s getting a background color of base ultra dark. That’s that dark act. The same color as this, but a darker version. And then we’re giving a line height of one. Because if you had other types of line height here, this would not be even padding around the box. Then you’re giving it some padding. And then you’re giving it a border radius. A very small border radius right there. It’ll kind of slightly around the corner. And then you’re giving it some text shadow. And you’re giving it a box shadow. The box shadow is the glow. So we’re seeing it as the action color.

1:47:21
40 pixel blur minus 15 gets you this effect right here. Now on the standout, much simpler. Well, kind of. So we’re using a linear gradient background on this text. This is up here, what we’re looking at. And then you have to background clip the text and use a transparent fill color just so all of this behaves properly across different browsers. But it’s basically just using gradient text. And by assigning them to classes and then using spans, you can use, you could assign the class of the entire headline or a part of the headline or any of this text in here. You can use it wherever you want to use it. So it’s just simple. So I set up two little classes.

1:48:10
And actually by putting it on span here, it’ll only work on a span. So I have to use a span in order to get the effect. All right. Hopefully that answers that question. All right. Okay. Good, good, good, good. Andrea says, I swear. I can’t reproduce that in Gen X error. Well, I’m reproducing it a lot. Your image is a PNG. No, yeah, kind of. It’s WebP, actually. This is why I was talking about the other day when I said there’s really good use cases for WebP.

1:48:53
And this is one of them. Images with transparent backgrounds should be WebP all day long. Because a PNG is way heavier. Thanks for the thumbs down, by the way. PNG is a way heavier file than a WebP file. All right. Let’s see. But yes, it’s out of Photoshop. It was a PNG. And then when you upload it, so let’s go to our stack again. We’re going to put plugins. Yes, leave. Short pixel image optimizer takes that PNG, creates a WebP version automatically, and then replaces the PNG dynamically in all browsers that support WebP with the WebP version.

1:49:39
So this does all that heavy lifting for you. So that is your answer to that. How do you cache your query loops in Bricks settings? I don’t have them cache right now, but if you go into Bricks settings, I don’t think I have them cached. So that’s one of these performance cache query loops right there. So you just turn that on. I haven’t done tests with it on versus with it off. I leave it off right now because it’s experimental and I haven’t had time to experiment with it. I don’t tend to turn on experimental things unless I’ve had time to experiment with them. So I still have it off right now. But I do intend to do some experiments with that on versus off and see what we get.

1:50:23
What happens with dynamic content when switching themes are all your dynamic field content un-rendered or displayed on style that you are migrating to Gutenberg? Well, that’s the really good thing about custom fields. I mean, you’re going to lose all your styling anytime you switch a theme. That’s 100% going to happen. But what you’re not going to lose is your data, the ability to style those things independently. And this is one reason why I say, be careful, here would be the ultimate disaster. Not only are you using custom post types, or not using custom post types, and not using custom fields for something like videos. So let’s go to videos.

1:51:06
Here would be the ultimate disaster. The worst thing you could ever do in WordPressLand is instead of these being in a CPT, you create them as posts and you categorize them as videos. So now they’re just categorizes videos, but they’re really just posts, normal posts, okay? And then, and then, if that wasn’t bad enough, you egregiously design every page using a template but in the builder. So you don’t use a singular template that’s assigned to that custom post type. You actually just import a manual template onto every individual video page and use the builder to customize that version of it and then hit publish.

1:51:45
And this is what people do at blog posts all the time. And we should definitely tie people to a post in the center of time square or something when they do this, and we should lash them something to get the point across, right? Not that bad. Now, maybe with wet noodles, okay? Something do not use bricks builder or oxygen builder or any other builder to create your blog post. Absolutely do not do it. I will fire you on the spot, okay? You can, you should, not do it, do not do it. I will kick you out of the inner circle. I will do a lot of it is bad, it is bad.

1:52:21
Because once you end up happening, you have hundreds of blog posts, hundreds of videos, okay? The minute you need to go say, I am leaving bricks, I am going to Gutenberg. I am leaving oxygen, I am going to bricks. Every post, all hundreds of them, just blew up, just incinerated them. The design of them, gone, poof, up in smoke and you can’t get it back, you can’t get it back. You know why? Because now every one of those posts is littered with short codes from that builder, okay? Now, if you use one central template, which is what you are supposed to do, all right? So we are going to go into, so I will show you here, we are going to go to bricks templates, all right?

1:53:09
We will look at two different things. Let’s go video single. So you guys saw that one already. And then we are going to go find the blog post template, blog single, okay? All right. This one template right here controls every blog post, which means, and we are going to go up here and see, so we are going to template settings, conditions, post type, is post. So this assigns this template to all posts. Now when I go into a post, what does a post actually look like? Good question. Oh my gosh. I am tempted to just deactivate search WP, just for the duration of this video.

1:53:50
All right. So we are going to go into this one right here. It is so dumb, because it is like, if I just click it again usually, okay, this one, see, Andre, I am telling you, I am telling you, this is what was happening. I am seriously tempted to go deactivate search WP. Let’s see if it will help us just for a second. Hey, if anybody from Search WP is watching, what is up with this? Bro, deactivate this for a second. Now hopefully it actually helps us out. Then I don’t even know, like, did it cache the engine x page? I don’t know what is going on.

1:54:35
No, I can’t even do that. Okay, we will come back to it. What you would see if I open to this, is literally just a post. It is a post in Gutenberg. There is nothing special going on. You just write your post in Gutenberg. And then when you need to switch themes, all you need to do is create a new template to control all of your posts. You don’t have to go post by post by post. You don’t have to clean out a bunch of short codes. It is just very easy. All of your content is protected. And the same is true with custom fields.

1:55:02
So anything that is driven by custom fields is protected because you are using a script. Because you are using a singular template to display it. And that template controls the design of that thing. And so my video post, all I would have to do is create a new post for my videos. And then all hundreds of the videos are instantly fixed, like that. After I switch from bricks to oxygen, or oxygen to bricks, or bricks to Gutenberg, I can fix them all with a singular global template versus having all of them blow up like somebody nuked them, leaving a bunch of pieces laying around that you can’t even really clean up without just a bunch of manual labor like a chump.

1:55:41
So absolutely do not, do not, do not. I’ll say it three times just to emphasize. Use builders to create blog posts, to create singular custom post type entries, nothing. That’s all needs to be controlled via templates. Every single one of them. So that would be the most egregious error you could make inside of WordPress. It’s to use builders for individual posts. You can use them for pages, because there’s usually not hundreds of pages. But if it’s a post, no go in builder land, okay? Custom fields, templates, all that stuff, all day long. All right, let’s get down to more questions.

1:56:22
Can you please tell us something about the CSS method in bricks settings you are using external CSS? Yeah. I think you meant this, bricks settings. And go to performance maybe right here. Yeah, so external files is more performance-friendly than inline styles, okay? So I just choose external files, and then if you need to regenerate the files you can, but this is kind of my standard default setup. And then the same thing would happen in WP codebox. So if we are in our global style sheet, for example, how to render the CSS inline versus external, choosing external here as well. And then this is a SAS style sheet versus a normal CSS style sheet.

1:57:12
All right, can’t lie. In my beginning WordPress days, many years ago, I made that mistake with Divi. God, it was awful to migrate. Yes. I mean, you only do it once, or you should only do it once. Then you realize that was a terrible, terrible mistake. And yeah, I’m being facetious or whatever they say. I’m not being super serious. It’s not some sort of moral transgression if you’ve done this. I’m just trying to make it a point that if you don’t let noodle yourself about this, I will definitely let noodle you about it because it’s just a disaster.

1:57:47
And because I’ve come behind other developers into the nightmare that they’ve created, and the client’s like, I love here’s you to fix it? No, I actually just can’t just fix it. It is an absolute disaster. And we’re going to have to start over. Sorry. And you never want to have that conversation with a client. What plugin are you using to edit the CPT and Post content tags without opening the post? So that one is Admin Columns Pro. We’ll go to the plugins page right there. Admin Columns Pro. All right, you mentioned they might be using plausible analytics and previous videos.

1:58:28
Will that become a part of your tools? I was using plausible. I’ve switched over to user Maven for now. And I was doing some experimentation with it. And it was going really, really, really well. I really like it. I’m going to go into, here’s, I just set up Geary.co. Let’s see the giant spike today. But it makes it really easy to set up conversion funnels and things like this. See like conversion goals, you can see them. There’s some visual funnels that you can set up as well. I wonder if I set them up yet. I haven’t created any goals here.

1:59:11
I was just getting it all set up for each of the accounts and then I’m going to dive in more later. I think it was mostly set up for frames. But yeah, it gives you, I mean, it gives you all the standard analytics and stuff. But when it comes to setting up the actual conversion tracking and all that, it automatically tracks events. That’s what’s really cool. It’s kind of like, you know, in Google Analytics, you have to say, hey, Google Analytics, I want you to track X event. I want you to track Y event. I want you to track Z event. And then you can kind of compile those in a different analytics dashboards and stuff. This just tracks all interactions automatically. It’s much like a heap in that regard.

1:59:50
So heap.io. The way that heap works is very much seems like how user maven works. Where it’s like, it’s tracking all things at all times. So you can actually, you know, if you were like, I wish I had set up to track that. Well, you don’t have to wish anymore. User maven already tracked it. You just have to go now create the filter that you want to see. So it’s always tracking interactions and events and all of that. And then you can go create what you want to see after the fact, which is very, very, very powerful. So yeah, I would highly recommend checking that out if you are looking for new analytics app. I believe they have a GDPR friendly version as well for those of you who are, you know, overseas.

2:00:35
So yeah, I was actually turned on to me by somebody in the inner circle and in my mastermind group, who also, you know, I believe has to do a lot of GDPR type, you know, respecting GDPR, all that good stuff. So he actually recommended it. So, you know, if he recommended it, then I’m sure it’s, he’s probably scrutinized it a bit. I personally don’t care all that much about GDPR. It doesn’t affect me all that much, but yeah, he does. So if you care about that kind of stuff, check out user maven, it’s right there. Let’s see, what else, what else, what else. We got to go because we are over time now, but I’m going to do a last few questions. What is going on with BricksBuilder?

2:01:20
I read a lot of complaints on their Facebook. Nothing is going on with BricksBuilder. There’s really nothing to complain about at all whatsoever. There’s a few entitled type people in all groups, and you know, they’re very vocal. And they’re like, there hasn’t been an update in 76 hours. But where is Bricks’ failing? You know, it’s like, come on. This is absolutely ridiculous. There’s zero value people who’ve never contributed a line of code to anything in their entire life. Probably haven’t even built a personal site for themselves, but you know, they’re all, their panties are in a wide because Bricks is, you know, one hour behind schedule with an update. It’s just, it’s ridiculous. Absolutely ridiculous.

2:02:01
So ignore those people. There’s nothing wrong with Bricks, and it’s perfectly fine. Why does the modal pop up on mobile menu and clicked, moved the content, I’ve noticed this when using frames, modal. Yeah. It’s a bug we’re actually working on right now. The Bricks Actress modal actually does it too. It has to do with the scroll bar on the side, the scroll bar being not present or present or being removed or not removed when a modal is open. That shift you see is exactly the width of a scroll bar, right? So there’s just some logic there that has to be worked out. And like I said, you know, we’re using everything from frames and that modal is in beta. And so I’m using a beta thing on this website. And so we’re getting a little beta behavior. Let’s see.

2:02:47
Can you please tell us something about the CSS method in Bricks setting? Oh, we already did that one. Okay. I was getting a similar on a dev side and grid pane the other day. Yeah. I’ve only gotten it on this site. Only gotten it on this site. All my other sites are fine. Haven’t had the engine X issue on any other sites. Just this one. All right. I’m going to re-enable search WP because Andreas said try now. All right. Let’s go into the post. I’ve got my fingers officially crossed.

2:03:21
Hey, look at that. Okay. So like I said, you will just see a post. That’s all you see. Notice the images are not breaking out. That only happens on the front end inside the template. So yeah. And we can look at how that works too. That was probably, you know, little nice little touch, I think. So if I come down here in a blog. Okay. Oh, I need to do this reminds me. You guys see this right here? Oh, this is a good one right here.

2:03:59
We going to do a tutorial on this one soon. I was forgot about this. I’m glad I opened this sheet up. It’s a technique I’ve been using lately in blog posts for lists posts specifically because lists posts are a pain in the ass. Let’s go to, is that one I just opened a list post? No. Let’s see if we can open a list post. You’re going to want to, you’re going to want to see this tutorial. If you blog, I don’t know. If you don’t blog, it’s not really a big deal. Okay. Clearly I’ve not clicked on a list post yet. Okay. Best word press plugins for Bricks Builder.

2:04:38
Is this a list post? Come on. Bigger scrolls. We’re not going to be able to see it in the builder. That’s the thing. That would be another thing. We’re not going to be able to see the list in the builder. All right. Let’s, okay. Here we go. See this number one. Admin Columns Pro. Number two. Let’s see what we can do. Let’s go to, the next CSS.

2:04:55
Okay. Check this out. Notice you don’t see this in the builder. What is going on? It’s auto counting. How is it auto counting these lists? And why is it auto counting these lists? Well, if you’ve ever done this manually, like you put in a number two, happy file is pro. Number three. You order your whole list. Let’s say there’s like 17 items, right? And then you’re like, oh, I want this one to come before that one. You’ve got to go like a chump, manually reorder your entire list. And then you can’t just use the list element because then it just becomes a nightmare to put all these images in. And it, it, Gutenberg blows up.

2:05:32
And nothing is, nothing is nice. Nothing, nothing is nice. So I’m going to delete this. And we’re going to look at the magic. The magic is right here. There is a group. Okay. You can create a group in Gutenberg. I, I, I struggle, guys, to like, I want to call it names as I talk about it because you guys know how much I dislike Gutenberg. But I’m just trying to stay very positive. But she could create a group in Gutenberg. And you can lock the group so that it can’t accidentally be deleted. Because that’s very easy to do that. Very easy to accidentally just like you hit backspace on your first paragraph, your group’s gone.

2:06:08
I’m telling you, amazing Gutenberg features. So you can lock your group to prevent, you know, the, the lesion on accident. And then what you do is you come down here into advanced and you put a class called head encounter. And what head encounter does, if we look in code box, is it creates a counter reset. And it will automatically counter, it will automatically counter your headings. It will automatically put a pound sign in and a colon. And so what you have on the front end is this, a nice clean number two, number three. And then if I want to move happy files in front of another one, it just automatically recounts them for me. And it just keeps them all in the proper order at all times. So I can do whatever I want on the back end. And then the reason it’s done in a group is so that you can have headings that exist outside of your group, like wrap up, and you’ll notice that wrap up is not numbered 13 or whatever. If we come down here, wrap up is not counted in the counter.

2:07:16
It’s just a normal heading because it exists outside of the group of list items that I wanted to count. So this has been a fantastic thing that I came up with that I was like, I am so sick of manually creating these lists in Gutenberg. And then not being able to reorder elements after the list is created because you got to go in like a chump and reorder it manually. And it was an absolute nightmare. And I’m like, I’m going to fix this. I’m going to fix this nightmare. This was my solution to fixing the nightmare. So I’ll do a tutorial on that very soon. How did you create the affiliate link ribbon? I will create a tutorial on the link ribbon as well. The link ribbon, by the way, is going to be an ACSS feature, native feature. You literally just add a text element, drop a class on it, it’s a ribbon, and then you can use locally-scoped variables to control how the ribbon behaves, the color, the width, all of that stuff, very, very easy.

2:08:08
That will be native inside of ACSS. Just like tooltips will be native inside of ACSS. Both of those things are being worked on this month. All right. All right. Is it time to answer what solutions you use for premium posts? I did. I did. I did go over that. You mark, you check a box called premium, and then the template changes to premium. And we looked at the template. Okay. If you had a certain priority for displaying custom, oh, you probably mean where are they hosted. That’s probably what you mean. So the inner circle is hitting the wrong keyboard shortcut. So the inner circle is listed on, it’s circle.so is the platform.

2:08:54
And so that just hosts the entire inner circle. The videos are actually hosted on Vimeo, but circle handles everything else. All right. Last two questions. Do you create a custom field for the custom post type and then order by that custom field priority? Can you ask the question a different way? I think I know what you mean, but I’m not positive. Let’s do this one. You were starting to show the image in the post. Thank you. Thank you. Feel very ADD sometimes. Okay. So this image right here. So what I didn’t want to do was I didn’t want to have to put a class on every single image in every single post. That did not sound fun to me.

2:09:48
So what I did is let’s go back to, I believe this is a WP code box. So we’ll go in here. Thank you for keeping me on track. You guys see the comments you have to, you’ve been on point today. Sometimes you got to reel me back in. You got to keep me on track. Back to where I was going. All right. Here’s the blog section. Should be in here somewhere. Okay. So what I did is target it all figure elements because Gutenberg puts everything in a figure element by default as it should. And I gave it a margin of element margin. Element margin is defined right here, which is my paragraph spacing times 1.5. So I wanted to take my normal paragraph spacing that spaces my paragraphs.

2:10:34
And I wanted to make it 50% extra around figure elements. Okay. So element margin is 1.5 times paragraph spacing. And then what I did is I added a border and I added a border of element border. What is my border of element border? That’s this. That’s because I’m going to use this border instruction in multiple places. And the rule is, if you’re going to use an instruction in multiple places, what is it guys? DRY. Dry. Stay dry. Don’t repeat yourself. Okay. Make a variable for it. So we made a variable called element border. And then I can use element border again.

2:11:11
Element border again. I’m not repeating myself because the instruction is one time created. I’m only repeating the token. Okay. So you’re not repeating yourself. All right. Then what I did is let’s come down here. There’s my, that’s for my code block. Here you go right here. So there’s a media query at a minimum width of 36, 1366 and up. Okay. So 1366 and up. That’s what MinWit does. If this was maxWit, it would be 1366 and down. All right.

2:11:46
So Min is 1366 and up. I’m taking the figure, okay. But not no breakout because I created a protection class. If there is an image where I don’t want it to break out, I add a class called no breakout. And so this is going to take all figures except ones that have no breakout. It’s also going to take the pre-element, which is my code blocks that I want to show. And it’s going to change their width to 125%. And then it’s going to give them a negative x-axis margin of half that. And that’s what’s going to make it appear to break out wider than the text. But not as wide as the full body of the template. So this is like the full body of the template over here, the white. See this breaks out to the full body width of the template. This little join our conversation thing. But the image is only breakout a little bit. I didn’t want to break out a lot.

2:12:40
They only break out a little bit. Here’s the, no, that’s a screenshot. But that’s basically what my code boxes will look like as well. All right. Let me see if Ryan asked this question again. It doesn’t look like he did. Okay. It’s a site fully accessible and how did you approach it apart from using frames? Well, there’s no such thing as fully accessible. There’s different levels of accessibility, right? I try to conform to double A accessibility standards. So I checked contrast ratios on all of our colors and text. All that looked good. We’ve got all of the typical stuff, skip links, skip to footer, skip to main content. You know, everything is keyboard navigatable.

2:13:29
Even down here, like in the, if I can get down to the footer here, I could have used skip to footer. But let’s just look at this for a second. Voice over on Chrome. Wordpress entrepreneur and edge of your visited link. Follow Kevin on YouTube. Visit link. Follow Kevin on Facebook. Link. Follow Kevin on LinkedIn. Voice over off. This is the kind of stuff that’s baked into frames automatically. I mean, you see the button actually just as YouTube and face-page. And Facebook and LinkedIn, right? But it announces that as follow Kevin on YouTube.

2:14:03
Follow Kevin on Facebook. Follow Kevin on LinkedIn. Why does it do that, right? So you go in and this is like the extra layer of that you just get with frames. Extra layer of detail. So we’re going to go into somebody said they didn’t like the footer going full width. I mean, fine. That’s just a, you know, not everybody’s going to like everything, right? Some stuff is just personal taste. The good news is that’s not the only footer frame, right? So there’s a lot of footer frames that you can choose from. This is just one of them. But if you’ll see here, this is indicating that there is accessibility text inside of this button. So by click on the button, that’s a template. Okay.

2:14:44
Good time to talk about global templates. This is how you use a global template in bricks. This because I use these buttons in a lot of places. And if I ever want to update the button set, I don’t want to go to every place and update them. So I made a template out of it. And then I use it as a global element or a global template. So I’m going to go down and find it. It’s probably called social something or other. There it is. Social icons. So we’ll edit this with bricks. So now I’m effectively editing this one thing, which it’s going to show up in the build or all, funcified because bricks still has trouble displaying singular global elements. Like because I have an overlay header, right?

2:15:21
So it’s not respecting the fact that I have an overlay header. But anyway, we don’t have to dive too deep. I’m just going to click on the label. And you can see that the label actually says, follow Kevin on YouTube. But it’s got this class on it from automatic CSS called hidden accessible. So this hides it from sighted users, but doesn’t hide it from screen readers. So it’ll announce the button properly. These are like the accessibility features that are built into frames. And there’s a lot of these. I mean, clickable parent techniques on all of the cards. So like these cards right here, this is the actual link in the card right here. So you can see the link. That’s an H3. And then this is a UL, right, unordered list with list items all done properly, right? The H3 is first in the card.

2:16:12
The image is actually last in the card, but then it’s first visually using CSS order property. And this clickable parent technique extends the heading link to the entire card. So the entire card is clickable, but there’s only one link in it. There’s only one link. And so, and that link is the most important text, which is digital agency table talk. So all that gets announced properly. These are not clickable. So the button is actually the clickable element, and they use proper text labels. Check out automatic CSS.com, take a look at frames. Okay, so it’s going to announce these using the actual text of the button. So yeah, it’s just, I mean, you can go through all of this stuff. And yeah, our goal is double a accessibility with our sites. And that’s what we strive for. There is no such thing as accessible or not accessible. It’s always on a scale.

2:17:10
Okay. It’s frames like a template library. You can go to get frames.io and read about it. It’s a lot of different things. It’s a lot of things in one. But it behaves much like a template library when you’re using it. Yes. So if we are in here, I can click templates, and I can go to remote templates, and here’s frames. And then I can say, hey, I want hero sections. Oh, let’s go look at footers. So you didn’t like that one footer right there. That was footer fox trot. Cool. And then I can say footer delta or footer echo or footer bravo or footer alpha or the squeeze footer charlie. Like there’s a lot of options, and there’s more being released all the time.

2:17:49
So if you don’t like this footer, that’s fine. That’s fine. I could see why somebody might not like this footer. I liked it. I thought it was different, right? And like I said in the beginning, I was like, it’s my site. I like experimenting. Okay. I like doing things a little differently when they can be done differently. And when there’s not a client breathing down my neck, I don’t want to do it that way. Like, you know, I get to be my own client sometimes, and I get to just try new things. So if you don’t like that footer, cool. There’s more footers you can definitely choose from. All right, guys. I am over two hours now.

2:18:23
It’s been fun. I hope you got a lot out of it. If you have any other questions, you can always drop them in the comments, because I will revisit the comments and reply to questions there. Tutorials are incoming for some time now that I’m starting to get my voice back. And now that my tongue is not swollen anymore from the Rona, I can get back to making videos. So yes, more tutorials incoming on some of the stuff that we discussed today. Thank you guys so much for being here and staying for a very long time. Thank you for the likes and the support. Thank you for the two thumbs downs that I got to. Those are always good to have. I’m out. I’m out. I’ll be back very soon, guys.

2:19:04
Peace. Love you. Mama.