0:00:00
What’s up everybody welcome back to the channel my name is Kevin Geary I’ve got another fantastic best practices training for you today we’re gonna take a look at how to add something like services to a website and why you should be using custom post types why you should be using custom feels we’re gonna take a look at how to build a services card properly in bricks we’re gonna take a look at the query loop builder so that once you create this custom post type with these custom fields how do we actually query that information onto the pages of the website you are gonna learn a lot in this tutorial I’m also gonna take a look at an example site here on a law office website and we’re gonna take a look at how they did their cards some things that they did wrong and how we can even improve on their design and their HTML structure there is a lot in this tutorial so buckle up and let’s get rockin and rolling so this is a site that I came across this is a not a theme or a template this is a real attorney website just started googling attorney websites because I know they have lots of services right but this is gonna be very common when you work with any service based business electricians plumbers gyms like every service based business typically has more than one service and what the big mistake is is people just build these out as pages of the website so when you go into WordPress you go to pages and this is where most people put these service pages and this is actually the wrong place to put those service pages if we want to talk about scalability and maintainability without getting too in depth and giving too much context and then getting too many complaints about how much I talk about how to make sure that you’re using WordPress the way that it was designed to be used it is a content management system so there are different ways to manage the content summer better than others well it just so happens that custom post types and custom fields is the best way to manage content of this type. I’m gonna show you exactly what that means and exactly what that looks like but pages have the least amount of functionality when it comes to managing content post on the other hand can be categorized they can be put into multiple different taxonomies they can be queried based on those taxonomies they can be queried based on bidirectional relationships now some of those things that I just said are they do apply to pages but not to any degree any similar degree post are much much more powerful in WordPress so you want to be using that to your advantage we do that with custom post types we do that with some custom fields now we’re not going to go crazy in this tutorial we’re going to keep things very basic I’m going to move slow and steady so that you guys can see exactly what I’m doing and I just want to say that if you are interested in this type of stuff best practices scalability maintainability really really in depth tutorials that is available to you in my inner circle. So I’ve got a link down below in the description I’ve got full website builds I’ve got accessibility tutorials we even dive into SEO Google ads all different aspects of running and building a digital agency it’s all there for you but we’re going to just kind of scratch the surface in this tutorial you’re still going to get a lot of value though so make sure you watch every single minute of it because there are golden nuggets all along the way. Okay let’s go back and let’s just take a look here at what they’ve got going on first thing I want to know because I’ve said this in previous tutorials is when you don’t really focus like you have no framework you’re not really focused on consistency and best practices just lots of different things just feel a little bit off and a ride and you can see right here I talk about this in my sections containers and divs tutorial about content alignment left to right right you see the logo here in the header is aligned with this. This breadcrumb but none of the grid here is aligned properly to the left and this practice areas header is not aligned to the left either it is aligned to the left but these elements right here have extra padding on the sides and it’s pushing them out of alignment with everything else on the page and it just feels a little off look as you come down this stuff is not in alignment with this and this happens because of you know just part of the person building the site not really being all that great and not really knowing best practices and following a consistent logical framework so just wanted to point that out there we also see a couple issues with these cards so while I’m going to do use this for inspiration and an example I want to improve on it and I want to show you how I would take something like this and make an improvement on it one thing we have to look at right off the bat is just poor HTML structure and poor accessibility and just poor best practices in general first thing I’m noticing the image is a link the heading right here is a link and the read more is a link there are three links to the same exact location in every single card that is an accessibility nightmare now I don’t even know they don’t they have no focus styling no keyboard focus so you can’t even keyboard navigate the website but even if you could this would get keyboard focus then this would get keyboard focus then this would get keyboard focus they would all be leading the person to the same exact place this is a horror show of accessibility and I’m not going to get into all the little details when we do build our card I have a full tutorial on how to build an accessible card properly it is an oxygen it’s not in bricks but if you follow the tutorial you can do everything I show in oxygen you can do all of that in bricks exactly the same way and I would highly highly highly recommend you watch that tutorial so you know how to build cards properly all right next thing I would do I’m not liking the fact that there’s no real hierarchy here between the heading and the text of these cards the text is a bit long for cards notice it’s making the cards very tall and so without any hierarchy between the text sizes there may be a little bit I’m not pixel peeping or anything here but they’re very very close together it feels like this text should be smaller and then it is too long and I have a solution and sometimes this is you know if the client is saying no this is this is what we have to say in these cards I’ve got I’ve got a little technique that I’m going to show you okay so we’re going to take the long text and we’re going to make it a little bit shorter and we’re going to make it a little bit shorter and we’re going to make it a little bit fancier and in doing this using the style that I’m going to show you it actually makes the person the visitor want to click on the read more link okay and then of course we’re going to put the read more in there we’re probably going to make the entire card clickable the other thing I want you to notice is you hover over these things and nothing happens there’s no indicator that this is a link other than the hand which is default by the way but nothing is happening on the page to let me know that I should be clicking on this this has a hover style this has a hover style the image has no hover style and again all three of these are separate links which is just bad practice in general so we’re going to fix all of this stuff now let’s go in and actually get started and actually get started.
0:07:55
Let’s talk about custom post types. So custom post types allow us to create a segment of content in the database. And remember, WordPress is a CMS. It is a content management system. That’s why we’re using it. It doesn’t make sense. It would be like, I use this analogy the other day. You wouldn’t go to Home Depot and buy a giant tool chest with all these different drawers for different types of tools in order to organize all of the tools that you own. And then take all of your tools and stuff them into the same drawer. That’s what you’re doing by making everything pages in WordPress.
0:08:35
You’re taking all these different tools, a screwdriver, and a buzz saw, and you’re trying to stuff them in the same exact drawer. No organization. And then you’re not using any of the other drawers on the tool. This makes no sense whatsoever. So don’t do it when you’re building websites with WordPress. Custom Post Types allows you to create drawers for specific types of tools if we’re using that same exact analogy. So with services, I can create a custom post type for services specifically. And that’s going to manage all my services pages. Then I can create a custom post type for something like reviews. And that’s going to manage all the reviews on the website.
0:09:13
And when I create separate custom post types, I can assign custom fields to each individual post type separately. So when I’m building out a service page, it’s asking for this type of information. When I add a review, it’s asking for a different set of information values. So we have the ability to compartmentalize our data in that way. The other thing is it allows us to create custom taxonomies. Those taxonomies can be assigned to individual post types. So not only can I categorize each post type, each post type can have a different set of categories. Or they can share the same categories. I can also relate them to one another using bi-directional relationships.
0:09:58
I can then go inquiry all of this data onto the website using different methods. I can query by category. I can query by relationship. I can query by custom post type. There’s a lot of different ways I can query and filter the information. This stuff is very, very difficult when you use pages. I can also assign templates easily to specific post types. Or templates to a post type or a post that’s part of a post type, but also in a specific category. Very, very, very powerful how you can manage content when you use custom post types. I have an entire video on the best use cases for custom post types and why you should be using them.
0:10:43
So if you’re not using CPT’s, you are not building scalable, maintainable websites. You need to go watch that other tutorial. Then you can come back to something like this. And you can see exactly how this works in practice. OK, so we’re going to start by going into MetaBox. I use MetaBox. You can use advanced custom fields and custom post type UI. There are other options out there. I tend to feel that MetaBox is the best option at the moment. Advanced custom fields, I have no problem with it. I would say more tried and true than MetaBox. Absolutely. But in my point of view, in my estimation, MetaBox has a better user experience.
0:11:25
And it works just fine. And it works with bricks and everything is good. So we’re going to use MetaBox. So what I’m going to do is go to post types right here. And you can see I have one for FAQ on this training website, but I don’t have one for our services. So I’m going to go ahead and hit new post type. And it’s going to ask me just for some general information. So the plural name is going to be services. These are our services. The singular name is service. Now I’m going to go over to labels. And you’re going to see that everything is pretty much automatically filled out for me. I’m going to go to the advanced tab.
0:11:58
There’s some advanced things that we can do in here. For right now, I’m not going to touch anything, except I do want to change our icon here. And I’m just going to change to something like, because I don’t want this little wheel that they have by default. So let’s see what we can change to. OK, I’m going to choose this little list type icon right here. It doesn’t really mean anything, but I think of it as like a list of services. You could do a thumbtack. You could do whatever you want. But I’m just going to choose this icon for right now. And the next, I’m going to go to supports. And we’re going to see that we can actually control what options are available to us when we go create a new post or when we’re editing a post.
0:12:38
So do I want the title to be shown? Yes, I want the title of the post to be shown. And now, because this is a custom post, even though these are technically posts in WordPress, you can think of them as service pages. But they’re going to have all the functionality that come along with posts. Do I want the editor to be displayed? Probably I do. Do I want the excerpt? Not really. Author, I don’t really care. Thumbnail. Sure. Trackbacks, custom fields.
0:13:04
Custom fields is a little bit different here than the custom fields that we’re going to get into. I know that’s a little confusing, but this does not have to be turned on. We don’t need comments. We don’t really need revisions, which can turn revisions on if you want to, if you feel more comfortable with that. And then page attributes we definitely want. OK. And then taxonomy is we’re not going to worry about quite yet. So we may not even need them at all. We’re going to see based on our use case. So I just hit OK. And right away, you’re going to see here’s services.
0:13:34
Look how easy that was. Now, all of my services get to go in this area right here. Now, before I go add a service, well, let’s just hit add new. So you can see. So I hit add new. And you’re going to see that I have my title and my post. It looks exactly like I’m editing a blog post. But there’s nothing else here. There’s no custom fields. So we are going to go backwards. And now that our custom post type exists, we can assign custom fields to it. And this is so easy as well. So watch, I go to Metabox and I go to custom fields. I’m going to hit add new.
0:14:07
And this is a custom field for my services pages. So I’m just going to write services. Then I’m going to add a field. And this is going to be a text field. And you’re basically just selecting what type of field am I going to add to the page, what type of data do I want to collect. So I’m going to make a general generic text box field. And all this is going to be is, if we go here. So here’s a decision you can make. Do you want the title on this card to be the title of your actual service page? So when I go to add new, I’m talking about this title right here. In some cases, it seems like that would be great.
0:14:48
But in other cases, you may want an admin title, a title that you see in the admin, and then a different title that is displayed on the front end of the website. So typically, what I do for maximum kind of scalability and maintainability and compatibility is I create a custom field for a service name. So this is going to be service name. And this is what’s going to show up on the front end of the website. And then that allows me to put anything I want as the title right here. This is not going to show up on the front end of the website. So I have service name right here. And I’m just going to close that.
0:15:25
That’s all we really need. I’m going to add another field. And this is going to be the service description, or I can even put service lead. And this is another decision you want to make. Do you want this little description, if you’re going to make a service page template, do you want this little description to show up as that lead paragraph as well? Or do you want to control these two pieces of data separately? Again, for ultimate scalability and maintainability, I think most of the time it’s best to have two different fields. So you could even put like card description. So I’ll do service card description.
0:16:04
And then you could have a service page lead text or something like that. If you want them to be the same, they could be the same. But they don’t have to be the same. You’re not locked in and being forced to make them the same content. So I’m just going to do service card description. And then we have to look here. What other data is present in this card? The read more is just going to be a hyperlink to the actual page slash post itself. But we do have an image right here. And then while we’re here, I will say one more thing about this card design. I don’t like the square images.
0:16:36
I really think this would look sleeker if it was more of a 16 by 9 format image. So that’s another adjustment we’re going to make when we build our own cards. OK, so I am going to add another field. And I’m going to add an image advanced right here. And I’m going to call this service card image. So I’ve got a service card description and a service card image. And then my service name. OK, so I am going to come down here. The only thing I want to change on here is, I think it’s one of these image right here. Max number files. I just want to limit this to one image.
0:17:15
You can’t put multiple images in here. You can only upload one image. All right, now before I save this, I’m going to go to settings. And I need to assign these custom fields to my new post type. So I’m going to remove this post right here. And I’m going to choose, you’re going to see it right here, my service post type. And then I’m going to go ahead and hit publish. I’m going to make sure that this is high after content, which is I believe the default anyway. So now when we go to services, add new. We’re going to see this looks a little bit different. I can add a title. I can add content here.
0:17:46
But I can also fill out these three custom fields down here. And this is great. Let’s just go ahead and add. We’ve got trust litigation is one of the services that we’re going to be adding. So I’m going to add that to both of these spots right here. I’m going to add this description right here to my service card description. And then I actually went and got different. Because these are webp images. And I can’t upload those to WordPress. I just went and found my own images. So we’re going to go ahead and add media. And I’m going to upload all of my images. So I’m going to go to downloads.
0:18:20
And we’re going to go into law. And we’re going to go in here. And I’m just going to throw all of these in. And then I’m going to find which one is the trust mitigation or whatever. Let’s see. It’s going to take a second to upload these. But as they’re coming in, I can take a look at which one is which. That’s securities. This is trust administration. Is that the one I’m doing? No, trust litigation. There’s trust litigation right there. So I’m going to select this one.
0:18:48
And now I’ve got my image selected. I can also put this as my featured image. This doesn’t really matter for what we’re doing here. But it is good practice to kind of do that as you’re creating your service pages. So I’m going to go ahead and hit publish. Now, I want you to notice that I’m not really categorizing these. I haven’t created a custom taxonomy. We don’t have to in this case. We only have the practice areas page. And it just shows all the individual practice areas. They’re not categorized on this. And since I’m recreating what we have here, I don’t feel the need to go into detail on creating custom taxonomies.
0:19:25
That’s something that I absolutely have done multiple times in tutorials inside the inner circle. So if you want that extra layer, go in there, and you’re going to get it. But this is, we’re just going to rock and roll with what we’ve got here. And it keeps this tutorial simpler. So for those of you who are new to custom post types, your new to custom fields, your new to querying things on the website, it’s going to be better that we don’t add custom taxonomies. That’s just another layer of complexity that you’re going to have to. It’s going to make the learning curve a little steeper. That’s all.
0:19:55
OK, so I’ve got my trust litigation. I can go ahead and go back. And I can add the next service. Now, I’m not going to make you sit through me writing all these services out, just filling in these custom fields. So I’m going to go ahead and jump to the end where I’ve done this work, and we’re prepped and ready to go. All right, so we’ve basically got all of the service pages in there. I didn’t do anything crazy in the back end. I literally just filled in all the fields, just like you saw me do with the first one. Now, I did realize I got to add one more custom field. So I’m going to go into Metabox Custom Fields.
0:20:30
And under services, I’m going to go to fields. I’m going to add one more field. And this is going to be the service card. Actually, I just need to add a text field. Then I can name it. All right, service card image alt text. All right, so that’s just going to be alt text for our service card images. And then when I go back to my service pages, you’re going to see if I open all of them up. Actually, I don’t want to, yeah, that’s fine. That’s a good way to do it. All right, so I’m just going to open all of them up. And I’m going to come down and you’re going to see this new field down here.
0:21:01
And I’m just going to say something like attorney going over securities, arbitration, and litigation documents, or something like that. Remember, in alt text just describes what is happening in the photo. So here are attorneys signing documents related to conservatorships. If I can spell that correctly. All right, and then I’m just going to go ahead and quickly fill out the rest of these alt tags. So at this point, everything that we need to build these cards and to query these cards on the front end of the website is done. We haven’t created pages for all of these services, but that can come later.
0:21:43
All we’re focused on in this tutorial is getting the data into the content management system. Wordpress. We use custom post-items, custom fields to do that. Now we have to build our card and query this data onto the front end of the website. So where would you put this kind of content? Well, you can put it anywhere you want to. You can query these cards onto the homepage. You can query them onto a services page. In this example, if we go look at the example website, they are querying them onto a page called practice areas. And so what I’m going to do is I’m going to go over to pages.
0:22:20
And now this is going to be an actual page of my website. And I’m going to call this practice areas as if I was building this for the client. So practice areas. Now, one thing I will note here is you can use the archive page for your custom post type. That is absolutely feasible. It depends on how templates work in the builder that you’re using. So in oxygen, you can easily assign templates to an archive page for a custom post type. I believe you can do the same in bricks. But it does put your page management for this kind of page in a different area. And to me, that creates a little bit of a disconnect.
0:23:04
So I tend to turn off the archive pages for these custom post types. And I just create a standard page. And I query these posts, these services, onto that specific page. So practice areas is our page. I’m going to go ahead and hit edit with bricks. All right, so first thing I’m going to do, we’re going to pull this tab over here so we can see exactly what we’re doing. We’re just going to make this little header right here. Now, I’m not going to build out this entire page. We’re just focused on this grid right here, inquiring this dynamically onto this page. So we’re not creating these cards manually and adding them one by one and then managing them.
0:23:44
And you can see exactly how that would become a problem. And I’m sure it’s become a problem when you’ve done that on actual website build, where you have a grid of services. And this grid of services may show up in four or five different places on the website. And you’ve done it all manually. And when you need to remove a service card, you have to go to every single grid and remove it manually. When you need to change the title of a service card, you’ve got to go to every single grid and change it manually. Even if you’re using classes to properly build these types of components, that only helps you with the styling of the component.
0:24:18
It doesn’t help you with the content of the component. So just as we use classes to maintain scalability with styling, we use the content management system and data querying, custom post types, custom fields and the query loops to maintain scalability and maintainability of the actual data, of the actual content on the website. All right, so what I’m gonna do is build this little top bar that says practice areas right here. That’s very, very simple. So I’m gonna add a section here and I am going to, you know, I’m using automatic CSS. So to whip little things up like this, I’m just gonna use classes. So we’re gonna do pad section, excess.
0:24:59
I want extra small padding here. And I want BG shade, B, I can’t type today. BG shade ultra light is the shade that I want. Is that light gray color? You see there? And then I am going to add a heading. And I’m gonna make sure that when I add this heading, it is an H1 because this is the page title. That page needs to say practice areas. So I’m just gonna make it say practice areas, just like that. All right, perfect. So we’ve got our first thing accomplished. The next thing I’m gonna do, because we’re now moving from a banner that has our page heading in it to a new section of content is I’m gonna add another section to this website.
0:25:41
This section is going to be for my grid. We’re gonna ignore the bread crumbs right here. Bread crumbs aren’t even important on this page because there’s really no nestling going on here. So this is just junk right here, probably defaulting back to whatever theme they used. But we’re gonna take a look at what’s going on down here. So there’s a couple different ways you can do this. You can create the query first or you can create the card first and then create the query. We’re going to, I typically what I do is create the query first, but that requires you to kind of know what the end game is. And if you’re a beginner watching this, that may lead to a little bit of confusion.
0:26:21
Now, I’ve never done this in bricks, so I don’t know if it’s gonna cause any problems to create the card first. In oxygen, it’s fairly easy to create the card first and then you build the query, but we’re gonna see what happens. I’m gonna build the card first so that you understand one, how we’re building this card, the structure we can talk about it. And we don’t have to worry about the querying until after one example card is already built. So I am going to go ahead and take a look just here at our container. Our container needs to have four columns, except I believe I feel, we can easily make four columns, but I feel, especially because of the length of this content, that three columns is more appropriate for this type of layout.
0:27:04
So we’re gonna make an adjustment and we’re gonna go with three columns here instead of four. So what I’m gonna do is use grid using automatic CSS. I recommend never using these column based layouts inside of bricks. These are the default, and I covered this in my other tutorial on sections versus containers versus divs. This is all using flexbox. And flexbox is inferior to grid for columnized layouts like this. So I am going to use grid, even though grid is not technically supported in bricks, it is with ACSS. So I’m gonna do grid three, and that’s gonna give me a three column grid.
0:27:43
I’m gonna do grid L1, which is gonna break that to one column on L break points, and then I’m gonna use a gap of M between our cards, a medium sized gap between our cards. I now have a fully responsive three column grid to work with. So, and I’m doing this directly on my container, which is inside of my section. Okay, so I am going to now add a div. Now let’s talk about div versus block here, because I know this new block element is, in fact, do I even have the block pinned? Oh, this version of, I don’t even have the RC version. So I don’t even have a block element on this install. But you can use the div element or the block element here, it doesn’t matter.
0:28:25
They are one and the same inside of a grid layout. So I’m gonna use a div, because that’s really all I have available to me. And you’re gonna see that is one third the length of my grid, because I asked for a three column grid. Now immediately right off the bat, what we’re gonna do is we’re gonna change the label over here, and this is gonna be for my card, all right? And you can even say service card, right? And this is just for organization purposes. This container, I’m gonna change to say grid. So this is my section, my grid, and my service card. All right, so on my service card, I’m going to start adding classes. And I teach the BIM naming convention for organizing your classes.
0:29:05
And so we’re gonna do service card, that is the block part of BIM, BEM, since for block element modifier, the block is a service card. So I’m gonna give it the class service card. Now what we’re gonna do is we’re gonna add elements the E part of BIM inside of our block, the B part of M. Okay? And I know this is crazy, because bricks has a block element, and Gutenberg has a block element, and BIM has blocks and elements and mod, okay. So the card is the block, the elements inside it of the elements, and then we can modify it, if we need to modify it, but that’s not, you don’t have to. And we’re not gonna do that in this regard.
0:29:44
All right, so I am going to add my elements. What elements do I need? Look at our example. We need an image, we need a heading, we need text, we need a link that says read more, but this link also has an arrow, which we’re gonna get there, okay. That’s gonna be a, what’s called a pseudo element, but there’s some hidden elements here that you may not realize. For example, it’s good practice to wrap your image with a div. All right, so this image is going to get its own wrapper. Now why do we do that? We do that because images cannot have pseudo elements by default, they can’t have before and after elements.
0:30:23
If you need to dress up this image in any way with extra elements and based on a design, we don’t have to do it here, but maybe we have to do it in the future. It’s just best practice for an image to be in a wrapper. We’re also gonna create a body wrapper here for maximum scalability of this card in case the card ever needed to have internal padding or a background color that’s separately controlled from the outer part of the card, right. So there’s gonna be an outer, there’s gonna be an inner, this is gonna be our body content basically. And then we’re gonna have a footer wrapper for this read more link. And this is typically how I do my cards.
0:31:04
Let me show you the actual structure here. So here’s my outer wrapper and I’m gonna put in three divs, okay, so we’re gonna go div and then that’s one div. You can’t really see it because it’s taking up the full width of the card. And then I’m going to duplicate it and duplicate it. I now have three divs. I’m gonna call this one media. I’m gonna call this one body and I’m gonna call this one footer, okay. So the media is gonna house my image. The body is gonna house my heading and my content. And then the footer is gonna house my links. And this is just general good card structure. Okay, the next thing I’m gonna do inside of my media is I’m going to add an image.
0:31:43
All right, so I’m gonna add an image there. I’m gonna grab an image. We can grab any of them and I’m gonna insert it. We’re doing this manually right now and bricks by the way adds a caption. We can set that to no caption to get rid of that text that’s currently overlaid on our image. Okay, so we’ve added an image and I do want to stop here and say this is very important. Notice that we are not using a background image. We’re not creating a container and then adding a background image to it. For cards like this, that’s an inappropriate way to build a card because you’re losing your alt tag.
0:32:19
You’re losing things like source set functionality. I don’t want to get too into the details, but it’s best practice to have a real image inside of your card. And we’re gonna address all the different nuances of how to make this image behave properly in the card. That’s why some people use background images because they feel like they’re easier to manage but it’s not best practice. So we want to make sure that we do it right. So I’ve got my image inside of my media container. I’m now inside of my body container going to put my heading, which is going to be an H3 level heading. And I’m gonna put my text, which is going to be a paragraph.
0:32:59
And so I’m gonna change that to a P so that HTML tag becomes a P. And then I am going to grab my footer and in my footer, I am going to add a link. Now to add a link in bricks, there’s a couple of different ways to do it. I recommend adding a div. And inside of that div, okay? We are going to just actually, I don’t recommend doing that. Sorry, I recommend just putting text inside. So we’re gonna do a basic thing. I believe that’s it. Let me go back and think. Yes, okay, this is gonna be just fine.
0:33:33
Okay, and that needs to say learn more. So I’m just gonna make this say learn more real quick. Remember, a lot of this stuff is gonna be dynamic in a minute, but for now, we’re just doing static. I’m gonna grab this and put it in a static content just so we can see what we’re working with. Okay, perfect. Now, notice that everything has really stuck together. We don’t want that stuff to be stuck together, right? So we need to work on our spacing. Let me get this content in here. Perfect. All right, so I’ve got my image, I’ve got my content and I’ve got my link. One little thing about this though, is for maximum accessibility, our heading needs to be the first thing in the card.
0:34:19
Our heading is also going to be the link, by the way. There’s only gonna be one link, and it’s gonna be our heading. That’s best for accessibility, but also we need our heading to come first. So what I’m actually gonna do in the HTML structure is I’m gonna make the body of my card come first. But I don’t want this to be the visual representation of my card, obviously, right? So on my service card, and I’m gonna make sure I have my class selected, notice it’s flexed column by default. That’s really good. Because what that allows me to do is it allows me to grab my media wrapper, and I’m gonna add a class to my media wrapper.
0:35:00
This is gonna be service card. Now I use a double underscore, and I write media wrapper. So this is the wrapper for, or you can use the word container. Technically, a container contains more than one element, and a wrapper only holds one element. So the top thing that’s around my image is a wrapper, because it only holds the image, and then the body is technically container, because it holds more than one element. But we’re getting way into the weeds now. Okay, so I’m just gonna call this service card media container, or sorry, that would have been media wrapper. Let’s, actually I think hold on, I can just quickly delete this.
0:35:37
Embry, look at that, look at that, fantastic. Okay, service card lets you media wrapper, just like that. And I wanna make sure that I double-dash that out. Okay, I’m not used to how bricks looks sometimes. All right, so I did service card media wrapper. Now what can I do here? Check out this order number. Very easy in bricks. I put a minus one, and it’s gonna make sure that that thing is the first element that you see visually, right? Inside of this flex container that is my card. So that’s it, we got the visual representation that we want, but we still have the proper HTML structure for better accessibility.
0:36:15
Okay, next thing I’m gonna do is I’m going to grab my body wrapper, and this is actually a container now, because it contains more than one thing. So I’m gonna do service card, double underscore, body container. Okay, now you don’t have to follow this wrapper container structure. If you’re just comfortable calling everything wrappers, call everything a wrapper. I don’t really care. If you wanna call them all containers, call them all containers. This is up to you. Being consistent is very important though, all right? So let’s talk about this body section now. I wanna space all this stuff out evenly. So I’m gonna do exactly the same thing.
0:36:50
We’re gonna come down to a row gap here, and I’m not gonna use automatic CSS for this stuff. I’ll try to just use, you know, basic CSS, we’re gonna do one M of spacing between our elements in our body. And then what I’m gonna do is handle this learn more. On my footer, I’m gonna put a one M margin top on my footer to make sure that that is spaced out as well. So I’m going to add a class service card, and this is gonna be our footer. I don’t need to say wrapper or anything else. It’s just the footer. And then our layout, margin top, I’m gonna put one M. As our margin top. And now everything appears to be spaced out, except for our body here.
0:37:36
I’m going to put this body container, one M of margin on the top. Now, depending on how the card layout needs to be, what just happened? Why didn’t I get my one M? Oh, I did, okay. Just now snapped into view. Okay, so you can see all of this is now spaced out properly. I’m gonna grab my image, and I’m gonna do service card, double underscore image, or you can do media, whatever you wanna call it. That doesn’t really matter, it’s up to you. So I’m gonna do service card image. Everybody knows this is the image associated with the service card.
0:38:14
And then I’m gonna come onto the border, and I’m just going to add a little bit of a radius. We’re gonna do 0.25M. Notice that on their design, they don’t have any border radius. But I think it looks better with a little bit of a border radius, a little bit softer, a little bit more modern. Okay, so we’re gonna put one on ours. Now, for this image, let’s talk about how we’re gonna handle this. We’re going to have to write a little bit of CSS. Now, you know, if you watch any of my tutorials, that I don’t like writing CSS in the builder. I don’t like writing CSS in the theme, or anything like that. I prefer to use WP code box.
0:38:53
So I’m gonna open WP code box, and the reason we’re doing this is because we can’t really do these things very well, at least I don’t think. I haven’t really looked. We do have object fit. So that’s good. Let’s do object fit cover. All right, that’s gonna make this behave more like a background image. And then we have the object position, which is defaulting to 50.50. That’s perfectly fine. I was looking for the aspect ratio. I don’t know if that’s part of bricks or not.
0:39:25
And so if we want our aspect ratio to be controlled, maybe we won’t go that detailed into it. Maybe we’ll just go old school, and we’ll use height. Yeah, let’s just do that. Let’s just use height. So we’re not gonna worry about a specific aspect ratio. I’m gonna avoid writing custom CSS as much as I possibly can here. We’re just gonna keep this as simple as possible. So I’m gonna go with a height of, let’s try 32 rim. All right, that’s too much. Let’s try 24 rim. That’s gonna be good. Okay, so I’m forcing all the images to be 24 rim high, which on my install is about 240 pixels.
0:40:07
Now, it’s not going to stretch the image when I do this because I put object fit cover. If I didn’t have object fit cover, it would squish the images. And obviously you don’t want that to happen. But with object fit cover, no squish happens. So we’re good to go. All right, so I’m pretty confident with the image. I’m pretty confident with our layout here. One thing I said is I want this text to be smaller. So what I’m gonna do is make sure that this text has a custom class of service card, body text, something like that, or you could just say text if you think that that is descriptive enough. I’m gonna make sure that my heading has a class. I want all of my elements inside of my block to have classes.
0:40:47
So I’m gonna do service card, double underscore heading. I’m going to click on my link down here and this is gonna be service card, double underscore link. All right, perfect, just like that. It’s actually not a link. It looks like a link because it has the arrow or it’s going to have an arrow in a minute. But it’s not actually technically going to be the link. But because it says learn more, most people think that’s the link. We’re just gonna call it link as our class. Okay, so let’s tackle our arrow in our link. I want to see how they did it from an HTML perspective. So they use an image guys. They put an image next to this read more link.
0:41:28
This is totally unnecessary. So what I’m gonna do is go, I’m just gonna type an HTML arrow in Google and there are unicodes for arrows. And you can actually just copy them to your clipboard, copy the actual arrow to your clipboard. And what I’m going to do is we’re gonna use a pseudo element called an after element. I’m gonna click on this little arrow up here and we’re gonna type a double colon and then after. And actually there’s already is one. But one thing is I gotta make sure I’m doing this on my actual class and it looks like I am. So I’m gonna grab my after. And then for the content, I’m just gonna paste in that little arrow and you’re gonna see it show up right there and that’s good enough for me.
0:42:08
Now what I’m gonna do is on my after, I’m gonna go to style, I’m gonna go to layout and then margin left, we’re gonna give this one M of left margin and it’s gonna space out our arrow. Now if that’s a little too far away from the text for you, you can make it closer, make it half an M. But I have one M here, one M here, and one M here. I think one M here looks good. It kind of keeps everything nice and consistent. The next thing I wanna do is on my service card text, I want this text to be smaller. So I think that I’m using 18 pixels or 1.8 rim as my main body text size. I’m gonna use 1.6 rim and see how that works.
0:42:49
And I think that looks much better, right? You have much better hierarchy between your heading and your text. Now one thing to note, you’re gonna see that I never use pixels as a value. You always wanna stick to relative unit. Ims, rims, VHVWCH, all these things are relative units. Don’t use pixels, they’re not accessible, it’s not good practice. They don’t even make sense on the modern web. They’re good for reference units, but that’s about it. I wouldn’t recommend using them anywhere in practice. Okay, so we have better hierarchy between our heading and our text here. Our Learn More link also probably needs to be our service card link.
0:43:35
We’re gonna go with typography, same thing here of 1.6 rim. Okay, I’m going nice and slow trying to keep everybody with us. If you need a fast forward, if you need to speed up, you can do whatever you wanna do with the controls. Let’s take a look at what we’ve got going on on the front end of the website here. So I’m gonna take a little preview action and this is looking pretty slick. Now, there’s a couple things I wanna do before we actually get to building our query. I wanna do my little trick here with how I’m gonna handle this longer content. Now, in order to do this, I wanna grab one of the examples of longer content like this one.
0:44:13
And we’re gonna paste this in instead. So I’m gonna go to my content and I’m gonna paste. You see one, two, three, four, five lines of content. Now, because I’m using a three column grid, and because I made the text a little smaller, my cards are still not nearly as big as the cards in this example, right? So I’ve already managed the content a little bit better, but I wanna go even one step further. So what I’m gonna do is on Service Card Text right here, and I think I have, yeah, I haven’t selected, I’m still learning bricks here, when I have a class selected versus when I don’t have a class selected, I’m gonna go ahead and add an after element to this Service Card Text as well.
0:44:54
And I’m gonna put just two quotes inside of the content field, which means blank, but just so you know, all pseudo elements require content in this field in order to show up. If there’s no content, they won’t display it all. So if you want blank content, like you don’t want an arrow, you don’t want text, just put double quotes, and it’ll be blank, okay? But that’ll allow you to actually have the service area content, or the pseudo element content. Okay, next thing I’m gonna do is I am going to do a gradient overlay, and I’m gonna add two colors to this overlay. The first color is gonna be transparent. So it’s going to, and I’m still learning this color palette stuff, and I’ll be honest with you, this is not bricks a strong suit of how they manage adding new colors and things like that, but I’m gonna make a transparent first color, and that transparent first color is going to go 100%, and then my second color, I am going to make white.
0:45:54
All right, so we’re going to come down to my global palette. I also don’t like how it continues to default to the palette I wasn’t just using. I would love it to default to the palette I was just using before, that would make things a lot easier. And I’m going to choose white as my color here, and then I am going to choose something like 30% on white. Now notice we’re not seeing anything. It’s because I have to choose how it’s displayed, and how it’s positioned. So I’m going to position this absolute, because I wanted to cover the entire text here, and I’m going to just do zero on all sides. And if you do zero on all sides, it is effectively going to make it take up the entire thing.
0:46:36
All right, so I’m going to see why we are not seeing our pseudo element here. Let’s do this, let’s do test. Okay, I am seeing the word test. Okay, you can see it right there. So our pseudo element is positioned properly. I think the problem here is with our gradient. I’m still learning the little gradient system here in bricks. So I’m going to go to my global palette. I’m going to choose white. And let’s just stick with white for right now. That’s my first color. My second color is also going to be white. I just want to white out the entire thing. So there’s white, okay, perfect.
0:47:15
We white it out the entire thing. Now what I’m going to do is go transparent on there we go. Now we’re getting to where I want to be. Okay, so let’s see if we can do a 30% here, a 40%, a 50%, a 60%. How much of this can we actually see? Ah, 80% looks like it’s going to be perfect. Now, I don’t just want to cover this up because look, there’s actually content down here that yes, it doesn’t appear to be there, but it doesn’t make this spacing all messed up now. And if the content was 17 lines long, we’d see 17 lines of space there. So what I actually have to do is clamp this content to a specific number of lines.
0:48:01
And in order to do that, we are going to have to write some custom CSS and we are going to have to use WP code box. So, because I don’t want to put this CSS inside the bricks builder. So I’m going to be targeting service card, double underscore text in order to do this. So I’m going to go back here. We’re going to open WP code box. And I’m going to go to my global style sheet here. I can delete this because I don’t need it. All right, what we’re going to do is service card, double underscore text, and then I’m going to open my brackets. And what we’re going to type, I’m trying to think about this because it’s not something I do very often.
0:48:35
And it’s, yeah, I hardly ever do it. And I have a utility class for it in automatic CSS in a future version that’s coming out. So I really have to think about this. So, the display is WebKit box, I believe. Now, everything else is with these prefixes. They’re with WebKit prefixes. So we’re going to go with WebKit, it’s line clamp. And I’m going to do four because I want to clamp it to four lines. There’s one more. WebKit, it’s like WebKit box. It’s not box shadow, it’s box orient, WebKit box orient, and then we want to be vertical with it.
0:49:23
And then I want to set an overflow to hit it. Okay, I’m going to save there. I think that’s all we need. I think that’s what we want. Okay, so we’ve got display WebKit box, WebKit line clamp is to four. It’s basically saying clamp is to four lines. We’re choosing a direction of vertical. And then the overflow of what comes after four is hidden. The overflow is hidden. Okay, so I save that. And then I’m going to go in here. And now in order to do this, I’ve got to make my this color fully transparent just to see if we’re clamping it four lines.
0:49:58
Look at that. We’re clamping at four lines. See the dot dot dot that comes, right? So you used to have to go into PHP and clamp with PHP and create a special function and all that. So we can actually do this with pure CSS now. So what I want to do is go back into my color too. And notice we’re getting a little wonky with our transparency here. Let’s bring that, okay, that’s the wrong one. I want to do this on the top one. Bring that down as far as transparency goes. So what I’ve done is I’ve clamped my lines to four and I’ve created this little effect of like disappearing content.
0:50:38
And what this makes people want to do. Let’s save and go back and look at this on the front end. Is it like it makes people want to click? It’s like, oh, I can’t read it all. I want to click and I want to read more. Okay, so it’s a nice little effect there. Now I think it’s a little bit, we could dial this in a little bit better. I don’t think this needs to be quite 80. I think we can go with 90 maybe or even 100. And it’s this one, oh, see this is a bug in bricks where it undoes my transparency. That’s going to be a problem. So let’s do 100 here. And then this is, this one’s my transparency.
0:51:20
Perfect. But now you see I can choose where the transparency really starts to come in so that we’re not getting as much transparency on the text up here. We’re only getting it where it starts to cut off. So that’s one more adjustment I’m going to make. And then I’m not going to touch it again because bricks is bugging out on me and it’s deleting my transparency. Okay, so I’ve got learn more down here. I want to make my learn more a little bit bolder. So I’m going to go to typography. And on my font weight here, I’m going to do like 700. Okay, save.
0:51:53
And then the other thing I want to do on my service card text is I want to choose different transparency on here. Let’s just choose shade dark. No shade medium. There we go. I want it to be a little bit lighter than what’s going on up here with our heading. Okay, so I save. Let’s take a look at what we’ve got on our front end. This to me looks like a much better card obviously than what’s going on on our example page where we’ve got like, ooh, long skinny cards, right? Lot of content, big text right here for our descriptions. Now we look at what we’ve got going on on our front end.
0:52:29
I feel like this is much, much, much cleaner, much more appealing to the user. Now what we need to do is get this all linked up properly. All right, so I’m going to come in and I am going to turn my heading into a link. Now my tag is age three. What I actually need to do here, I can’t change this to an A tag, but I can do this link to feature. And I can say internal post page, external URL. Let’s do external, now let’s do internal post page. That’s definitely what we want to do. Again, I’m still getting used to bricks, how this, how bricks does this versus oxygen. But I don’t know how we’re going to handle this with dynamic content quite yet.
0:53:08
So let’s not link this up yet. Let’s get our dynamic content going. So what I want to do, and I actually think you do this on the actual card itself, which is different from oxygen, you do it on the container, we’re going to do this on the card itself. So I’m going to say use query loop. Let’s save our work before I get too far into this. Look at that guys. It’s already starting to just duplicate this bad boy. Okay, so now I’m going to edit my query. So what is my type? Well, it’s a post, what is my post type? Oh, it’s a service. Now in oxygen, you have to do this all manually, you have to write all this stuff out.
0:53:42
I really like how bricks does this. It allows me to choose how I’m going to order this. Let’s do it by the title, so we can have everything in alphabetical order. The order is going to be descending, post per page. We’re going to do, it’s a three column grid, so let’s do nine, so we can keep everything even. I don’t need to offset this grid. I did my services, okay? Okay, okay? Anything else needed? I don’t think so. Infinite scroll, we don’t need to worry about that right now. Let’s just go ahead and hit save. And what you’re going to see is every card, oh, that’s looking clean, my guys.
0:54:21
That’s looking clean. Okay. Let’s, I’m not going to dial too much in right now. We can play with our gap in a minute. I think I might want to play with our gap a little bit, but let’s see what happens when I start to get our dynamic content in here. So now what I’m going to do is instead of trust litigation, I don’t want that to say trust litigation, I actually want this to pull the, let’s see, I’ve never actually done this in Metabox or in bricks. So let’s see how easy it is. Look at this, it’s right there for me. Oh my gosh. Okay, but I don’t want it to say that and trust litigation.
0:54:57
So let’s get rid of that. It’s only going to say the title. Now let’s go refresh. Oh my gosh, look how easy this was, will contest trust letter, but it’s going the wrong way. So we want to go back to our service card, which is our query loop. I’m going to edit my query and order, I’m going to change to ascending and I’m going to save, and then we’re going to take a look at how this works on the front end. Look at that. From A to Z, all of our services are nice and organized. Now what I’m going to do is instead of this content here, I’m going to use this dynamic data, and I’m going to use, I can search for service, and I can do service card description.
0:55:40
Guys, look how easy this is. Compare this to oxygen, this is night and day. This is so absolutely easy. OK, so I’m going to save here. Let’s take a look at what we’ve got. And look, it doesn’t matter how long the content gets. It all gets clamped the four lines, maximum, and it gets kind of like grade out here at the end. So it lets people know, hey, there’s more to read if you want to, go ahead and click. All right, we are seeing one thing here with our learn more. This one only has three lines, so our learn more is up a little bit. So I’m going to show you how to fix that. So because we put everything with classes, I only have to make this change on this one class. So I’m going to go to style, layout, margin top, is simply going to be auto.
0:56:27
And that’s going to make sure that it pushes down. Actually, it’s not on our service card link. This is a mistake. We need to do it on our footer. Our footer is what needs to actually move away. So style, layout, and I believe on our class here, we already had a margin top of 1M. I’m just going to change that to auto. And then on our body, which is in the middle there, I’m going to put a margin bottom of 1M. We had a top of 1M. We’re going to go bottom 1M. So there’s 1M or auto. And this should fix our learn more card. It doesn’t.
0:57:06
And the reason it doesn’t is because our cards need to all be the same height. They’re not all the same height. I need to add one more class to my grid. My entire grid, which is a stretch class. And this should stretch all the cards to be the same height. And now the footer responds accordingly by dropping to the bottom of those cards. So now I’m going to go ahead and hit save. Let’s take a look at our grid now. Awesome. We’re looking good. All of our learn more is aligned, even when the content is different in length. OK, we’re really getting there. So now I’m going to grab my image. And again, I’ve never done this.
0:57:43
We need to figure out how to do this dynamically. All right, ooh, look at this. Select dynamic data. Service, card, image. All right, now I can even choose a size. Let’s choose bricks large, 16 by 9. Oh my gosh, guys, this is so easy and bricks. So absolutely easy and bricks. We don’t want an external URL here. OK, because we use object fit cover, all of our images look good, even though they’re being forced to be a specific height. And now I can firmly say we do need a little bit more of a gap. I feel like on our grid. So I’m going to take away gap M and we’re going to do gap L. So I’m just going to make a little bit bigger gap there between our columns and our rows.
0:58:29
The next thing I need to do on our image is I do need to have custom alt text. And remember, I made a custom field for image alt text right there. So I’m going to save. And now we are going to check out the front end. So we’ve got a little bit more of a gap. And then if we inspect this, I should see that we have an alt, alt, alt, alt, alt, alt, alt, right here. Attorneys, signing documents related to conservatorships. OK, so we have alt text. We have a grid. What we don’t have is a link. And we don’t have these linked up properly. So what I’m going to do is I’m going to go in and I’m going to grab this right here. And now we’re going to see if we can link to something dynamic data. Look at that. All right, and I’m going to do service.
0:59:16
OK, so it’s not this post link. That should be it right there. There it is. And it shows you perfect. OK, so let’s look on the front end. Now one thing you’re going to notice is our style changed because we changed this to a link. All right, so I’m going to go to style. I need to be on my class. I’m going to go to typography. I’m going to go to color. And I’m going to make sure that this is the color I want it. We’re going to do shade ultra dark as our color. Now I’m wondering if this is going to be able to override properly. If it’s not, we might have to do a little CSS manipulation and then take a look at what’s going on here.
0:59:56
But font weight, I want to be 800. OK, and I’m not seeing anything changing here. All right, so I’m not sure. I’m going to have to investigate what’s going on with this. So for right now, I’ll investigate that later. For right now, what I’m going to do is target my service card heading. So with WP code box, I can do service card heading. And I want to do font weight of 800. And I will do important on this if I have to. And then color, we’re going to do a variable. We’re going to do shade ultra dark. And I just want to see if that’s going to fix things. It’s not fixing things. So let’s just do important for right now. This should definitely fix them.
1:00:46
OK, we’re still not getting it. OK, maybe I need to target this target the A that is service card heading, target the actual link. There we go. OK, all right. So now we’ve got the heading linked up the way that we want it to be. But the thing is, we don’t want that to be the only clickable part of this. We want the entire card to be clickable. That’s the best user experience. So what we want to do is we want to take that heading link and apply it to the entire card. And you can do this with a bit of CSS magic. Now, it’s a little bit complicated as far as CSS goes. So I turned it into a utility class called clickable parent. And basically all you have to do now, Bricks makes this a little bit more difficult, which I’ll explain in just a minute.
1:01:31
But you click on your link, whatever the link is inside your card. And you add the class clickable parent. All right. And I’ve already got the CSS on the back end. So what this does is it effectively uses an absolute position pseudo element to expand the link area to the entire card. Now if you know anything about absolute position elements, they attach themselves to the first relative parent, the first parent set to position relative. Let me dismiss my busy call alarms here. So in Bricks, in oxygen, this isn’t a problem. But in Bricks, Bricks sets everything to relative by default. That’s kind of problematic. I would choose to not have that happen. So what you have to do is you have to go to your heading first, your heading class, go to layout position static, which should be the default.
1:02:24
All right. We have to actually set it back in Bricks to the default. Then I have to go to my body, which is the next parent wrapper. And I have to go to layout and set that to static as well. And once I’ve done that, we should see on the front end that our entire card, look at that. The entire thing is clickable, which is fantastic. So if I click anywhere on this card, it’s going to take me to that URL, basically. And I’m looking right now at what’s going on with our URL. Is this, did we lose something here, dynamic data, post link? Probably because I don’t have the posts in there yet, but whatever. Okay. Like the posts are in there, but there’s no page for them. Maybe? I don’t know what’s going on with that.
1:03:10
But we are getting the hand on our entire card as we should be. I’ll investigate that later. But what we want to do now is we want to give this thing a hover style. And we want to give the hover style to our service card. So we’re going to go ahead and service card. We’re going to click the little pseudo state up here. We’re going to choose hover and we’re going to go to style. And we’re going to see what we want to happen. What do we want to have happen when we hover over our cards? All right. Let’s think about this for a second. Probably we want to transform it. You probably want to do a little bit of a translate Y, maybe one rim. What does one rim of translate Y look like? That might be good.
1:03:58
Okay. One rim, translate Y. And then I want to do a transition. And I don’t know where our transitions are done yet. Okay. So I just checked the documentation. And apparently you cannot set a transition anywhere in bricks. You can do it for certain things like buttons in the theme settings, but you can’t really do it anywhere else. So no problem. We are just going to do some custom CSS. So I’m going to do service card and I’m going to set the transition to 0.3 seconds, ease in out all. And that should take care of that. And there you see we have our transition nice and smooth.
1:04:38
Except I don’t want these cards to go down. So what I want to do. Oh man. Get back here. All right. I’ll just click out and then re-click on the service card element. All right. There we go. So I’m going to go to transform on my service card hover. Where’s my hover state? There we go. Okay. I’m going to go to my transform. Uh, no. Where am I?
1:05:04
This seems like service card. It seems like that should be right here. The translate Y should be right here. Uh, what did I do? I didn’t do this. Oh no. I did it on the ID level. Okay. We don’t want to do that. We want to take that off. Okay. Let’s just get rid of that transform. We want to grab our service card. Make sure our class is selected. Make sure hover is selected.
1:05:27
Now go to transform. Let’s translate Y. Uh, but let’s do minus one rim this time. So now it’s going to go up. And let’s just take a look at what happens on the front end when we do that. All right. Now we get a nice little indicator that we’re hovering. Okay. Let’s start wrapping this up now. Let’s talk back about scalability and maintainability. So you want to add more pretend like we’ve got these grids all over the place. They’re on the homepage. They’re on the services page. Each individual service page has a grid of other services that we offer. Okay.
1:06:03
So these things are everywhere. Let’s just say something easy like, hey, we’re adding a new service now. All right. You want to just go in to the back end and say, oh, not in there. We’re going to go into the back ends here. We’re going to go to services add new. We just basically fell out a couple of fields. So we add the title fill out these custom fields, hit publish. And now that new service shows up in every grid exactly like it’s supposed to. And it’s in the right order, right? All is like that. Or do you want to go grid to grid to grid to grid? Make a new card manually copy a card, paste a card, fill out the new content and do that in every single grid. And then if they say, hey, we’re removing the service now you’ve got to go in and remove it manually from every single grid.
1:06:51
Or would you rather just fill out the custom fields, hit publish on the new post and it shows up everywhere it’s supposed to show up automatically, right? Much, much, much more scalable and maintainable. And then you get into the just thinking about how are we doing querying with custom taxonomies? If we need to categorize all of these services, that now comes into play when you’re using a technique like this. So many benefits to using custom post types, custom fields and query loops. If you’re not doing this, you need to be doing this. This is how you build scalable, maintainable websites. All right. So I’m going to go back to camera here. Again, we have much more in-depth tutorials inside the inner circle. If you’re interested in that link is down below to get signed up. But again, I would just highly encourage you. Please use WordPress to its fullest capabilities as a content management system.
1:07:48
Stop putting services in the pages section. Stop putting reviews in the pages section. Stop using pages for most things. Use custom post types, use custom fields, learn how to use the query loop. This makes it way easier than oxygen, so you have no excuse. You can’t say, hey, that’s too complicated. I just showed you. Okay. It’s very, very simple, especially compared to oxygen. Start using this to its fullest capability. That’s it for this tutorial. If you guys like this, hit thumbs up, hit subscribe, drop a comment below. I love getting support and hearing from you guys. You know I respond to every single comment that gets left on my videos. That’s how it is.
1:08:31
I value my community. Plain and simple. Alright? So that’s it. I’m out. Be back very soon. Yup.
