0:00:00
What’s up, everybody? Good morning. Welcome back to another web design for dummies. We are live on this beautiful Wednesday. As you can tell, I I’ve been sick for the last few days. And I didn’t know if this live stream was going to happen. But we are on the mend. And thankfully, I can talk, you know, well enough, I think to get through a live stream. It may not be as long as the typical live streams are. We’ll see how much we can get through. But I didn’t wanna skip out on you guys. I wanted to be here for you and get you this good content. So go ahead and drop a comment. Let me know you’re here. Let me know that you are live and watching. I’m gonna cover some news before we get started and I want to talk about a couple things that we might do differently on web design for Domies.
0:00:58
So typically what we’ve done is like we’ve tried to get three websites in. What’s up Edward? What’s up D123 and Daniel? Good to see you guys here. We try to hit at least three website critiques and we try to do in-depth critiques obviously. What I think I’m going to do is, we’re just going to shoot for two website critiques and then in between the first, well in between the two. So after the first one and then after the second one, yes, I’ve been sick for a couple days, sinus infection.
0:01:32
So after the first one, we’ll do more Q&A or in-depth tutorial, like a mini live tutorial almost. So if you guys have a question that you’re like, man, I just want somebody to show me this or I want to get this question answered, we’ll do a little Q&A. I also, if we run into something interesting on a website that we’re looking at, instead of just saying, oh, that’s interesting, cool, or we need to, you know, if it’s something that needs to be fixed or addressed or I can show you maybe how to approach it a different way, we should just dive into that.
0:02:06
We should just dive into that, make it like a little mini tutorial, like allow ourselves to go down that rabbit hole, because it’s going to make, I think it’s going to make things a lot more interesting and a lot more interactive, instead of just like glossing over it and saying some things about it and then moving on. Because we end up hitting on a lot of the same points. I think it would be good to allow ourselves to go down a few of those rabbit holes and make these like mini training tutorials. So don’t be afraid to ask questions.
0:02:34
Don’t be afraid to say, hey, how should we approach this differently? I can bring up a little local test site and we can play around with it and we can go through it. So that’s number one. So we’re changing the format just a little bit to make it a little bit more interactive. Now, a couple of announcements. Big announcements. Number 1, automatic CSS, there is a big release coming in the next few days, probably this week, hopefully by the end of this week. We’re on RC3 internal testing. A lot got put into this release. We wanted to start off 2023 with a bang this is a really really good set of new features and updates and bug fixes and a lot of other good stuff okay so automatic CSS is on its way.
0:03:25
Frames another update coming for frames now we release new frames constantly all right so you can go look at the changelog every day sometimes there’s a new frame or a new set of frames coming out every other day, every three days. It’s very, very consistent. But we also want to release, obviously we’ve been working on some of the accessible components. So there’s updates coming to the modal. There’s updates, there’s a new burger trigger. There is just good stuff coming, good stuff coming for frames right now. That is in development. So for those of that’s an important component for me. I use, I don’t tend to use sliders. A slider is like I think of one at a time, right? One thing at a time.
0:04:16
A carousel is multiple items and you can cycle through them. Carousels are a lot more useful. But people, they use the word interchangeably and I think people use the word slider way more than they use the word carousel. So we’re calling it a slider. It has slider functionality and it also has carousel functionality. So that is in development right now. That’s a really really important component I think. It’s probably one of the most important components. Why isn’t there Tomas? Is that Tomas? Why isn’t there a public changelog for automatic CSS calm let me go ahead and get my screen sharing here okay yeah if you go to automatic CSS dot-com slash changelog should pull it up it’s just in notion right now you can actually see the changelog for a 2.3 because of the way notion work like it doesn’t allow us to hide things so you guys can see what’s coming out for two.
0:05:15
Look, it’s a hefty update. A lot of really good stuff in there. Very significant new feature. Very, very, for advanced users and for users who want a lighter framework, very significant new feature in there, okay? So I talked about frames, I talked about automatic CSS, I talked about a little bit of a change to the structure of web design for dummies. Last update, my brand new website that I’ve been working on is almost done.
0:05:47
And this is the website that I need to publish to make the official changeover from Digital Ambition to just my own personal brand. So we’re getting rid of Digital Ambition. This channel is gonna get rebranded. Soon as this website is released, we can kind of put all this stuff into motion. So Digital Ambition is going away. It’s just going to be my name basically, my last name and that’s it. So that website and what I’m hoping is next Wednesday, the first website on Web Design for Dummies will just be, will go through my new website. We’ll just take a look at all the stuff that there is to go over there. And there’s some really, I don’t know, they’re not like unique, but there’s a couple things that Bricks made really easy on this new site that really you couldn’t even do in Oxygen without a lot of custom coding. So I want to point out a few of those things. But anyway, those are the big updates. So next week, hopefully, Web Design for Dummies, we will look at my new website as one of the websites that we’ll be reviewing, and then we’ll go from there.
0:06:58
Okay, let’s hop into today’s set of critiques. I’ve got our two websites pulled up. I’m gonna bring in our first one, which is kodiaksnow.ca. All right, and we’re gonna do our first test, which is pretty much always the you know don’t scroll around anywhere. Can you see what’s going on? Can you see what this website is about? What they do?
0:07:22
Who they’re for? Without scrolling around, without doing too much you know digestion. And I see right off the bat with the logo Kodiak Snow Blowing Ink, I get a good feel for what’s going on. I kind of like the logo. I Don’t like the fact that it’s looks low-res. It’s like kind of blurred I don’t know if you guys can see this very well, but Probably if I had to guess this is a PNG Yeah, it’s a PNG and PNG is like they always look like this when you use them for logos. I just I really don’t I really don’t like it I really prefer SVGs now that this one’s a little bit more complicated of a logo.
0:08:00
So I don’t know how well an SVG would work for that. But, um, you know, you should at least try it cause this one’s coming out. The snow blowing part definitely is like super fuzzy. Uh, whereas an SVG would be tack sharp, but it says Kanata, uh, Kanata and Stittsville’s residential snow removal company. So we can see right off the bat, it’s very explicit in what’s going on. We can call, we can sign up. Sign up. I don’t know that I would want to sign up for snow blowing, right?
0:08:40
I might wanna hire you, I might wanna schedule, like I might wanna book now, that’s a good call to action. I don’t know about sign up. I’m gonna click on sign up. We’re just gonna go through the flow real quick. Enter your postal code. Okay. Oh, oh dear. Hold on. Hold on. Is this me? No. No. No. Okay. I can put text in here. That’s going to cost you some conversions I would guesstimate. So double check that. All right, let’s go out of the flow because the flow is not a flow.
0:09:28
Okay, Kanata and Stittsville snow removal, book online instantly. Here’s where the one thing we’re missing is that big headline, right? Where’s our impactful headline? That’s the first thing I see that we’re missing right off the bat. And we’ve talked about this before, right? Try to see the stuff that comes up over and over and over again. Kanata and Sisville’s residential snow removal.
0:09:56
Kanata and Sisville’s snow removal. One of these areas is wasted space. One of these areas is wasted space because we’re just saying the same thing twice. So which one is it? Well, I would say it’s this one, okay? Let’s come up with a better headline for this area right here. I do like the fact that, I mean, this is probably, you know, someone’s just like, look, do you have the equipment?
0:10:19
Can you move the snow? All right, we don’t have to have a long sales and you got to trust us and all this other stuff. Put some reviews up there, let people know other people have used you, you didn’t drive through their garage door, you know, so if you’re capable they’re probably just gonna hire you, especially you know if the price is right and all of that. So you can be more aggressive with it just like, hey I know you just got here but go ahead and book, okay? You can with a company like this you can be more aggressive like this. And we see the trust signal right here which is fantastic.
0:10:50
So we’ve got the Google logo, the 4.6 out of five stars. We got the best in Ottawa badge. Okay, I think this all works. I would just like to not see the same content duplicated within literally like three inches of where these two things are. All right, let’s go ahead and start scrolling around. I see something of interest right off the bat. Track your tractor. I wanna see what that does.
0:11:15
I’m curious. View service logs, report a complaint, snow removal Q&A. So the first thing I’ll say right off the bat with this little strip, if you want this to be a little bit better, take the time to find better icons for these. These look like the default well I don’t know what this one’s from but you know these look like the default font awesome icons or something and You notice like this one is much taller than this one here And it just I don’t know the ratios look a little bit off, and you can just tell they’re just Like it’s like almost choosing a stock image, right?
0:11:54
It’s like let’s just choose the quickest icons that we can possibly find Maybe find a set that has a little bit more life in it and a little bit more personality and you can spice that section up right there. Your trusted and reliable snow removal service provider. I mean, I’m not saying this is not going to work, right? I’m not saying that 100 people are gonna come to this website and zero people are gonna convert. But I guarantee, this is like one, if you asked AI to write a headline for this is what it would write if you asked Nine out of ten like low-rate copywriters to write a headline. This is exactly what they would write This is this is you will just see it. There’s nothing. There’s no personality. There’s nothing unique. There’s nothing There’s this is just like check a box Someone said I need a headline check a box right and then probably this these paragraphs right here Someone said we need some paragraphs here. Let’s just check the box, right?
0:12:53
There’s no personality, there’s no nothing really baked in. This is the most vanilla copy that you can possibly come up with. And I get it that snow removal is not that exciting, but you can be more exciting than what’s going on here. So again, I’m not saying that this is not going to, that nobody is gonna convert because of this, but you have an opportunity to put a little bit more time and effort. And this is one of those things where it’s like, oh, well, the client provided the copy. Okay, well, yeah, exactly. That’s why I say the client shouldn’t provide the copy, if at all possible. If you can talk them into paying for copy, get them to pay for copy, and then write better copy for them, and then everybody is hopefully happier. I don’t even, I don’t even, like, I can just read the headline and I already know exactly what this is going to say.
0:13:41
Cause it’s going to say exactly what every other snow blowing company’s website says. What makes Kodiak your best choice? Now we’ve got your three selling points. How are you going to sell me this pin? Okay, let’s see. Number one, driveway snow removal service at your house from November 1st to April 15th. Okay. That’s not, that doesn’t make you the best choice though.
0:14:03
That isn’t, wouldn’t that be like, every snow company can come to your house between these days, because that’s when it snows. Like that, tell me that’s not your first high value selling point, right? That’s not, if I was like, why should I choose you over everybody else? You’re like, well, we can come there when it snows. Is that not good enough for you? Like see what I’m saying? You got three points right here. Why you versus somebody else and the fact that you can arrive on the dates where it tends to snow is not number one. Okay so cross that off and we’ve got to go back to the drawing board. We’ve got to think better about what this is going to be. Number two. Two cleanings of your driveway on each snow day during this period, first cleaning at five centimeters of snow or more, second cleaning after the city plows pass.
0:15:00
Okay, it’s a little technical, it’s a little technical. And my first question would be, is this standard? Is there something unique about this? Does every other company only offer one cleaning of your driveway per snow day. Then, and I still think this needs to be rewritten to make it more basic, like dumb it down. But I need to know if that’s a unique point first. If this is not a unique point, then it doesn’t need to be here.
0:15:28
If everybody does this, then we don’t need to talk about it, okay? Or you could talk about it in the FAQs or whatever. It’s not one of your top selling points, is what I’m trying to say. Number three, real time GPS tracking for all our snow blowing vehicles, daily service logs, 24 hour live answer. Okay, I’m guessing that’s what the track your tractor is. So somebody’s like, I really need this snow gone, where the heck is my tractor? They can come on here and find it.
0:15:55
But again, is that I need to know and so if you’re watching if this is your site that you submitted, let me know, is this unique? Is this unique? Does every company in your area offer this GPS tracking or is this unique to your company? And then the next thing I would ask is, you know, how many people use it? So for example, if you polled a hundred of this business’s customers and was like, you know, what do you love most about us? Or you just ask, you know, explicitly, what do you think of the real-time GPS tracking do you use it you know it’s gonna be like five people use it is it gonna be half your customers use it and really love it and rave about it one way you can figure this start to figure this out is go just read your reviews in general let’s go ahead and do that real quick because you have you know 315 reviews is pretty good here.
0:16:52
So, what I would do, and this is really, okay, so copywriters out there are people wanting to write copy or better your copy. Here is a insider trick, okay? I mean, it’s not really a trick, it’s not really insiders, it’s just, it’s a kind of common sense, but just a lot of people just don’t do it. In order to write good copy, you need to know what the customers actually think and feel.
0:17:15
And so when a client has no reviews, well, you don’t really get any insights. You gotta go do the legwork of like, hey, all right, give me some of your customers, I wanna go talk to them, I wanna do a little bit of discovery here. But when your company has 315 reviews, my gosh, there’s just a whole library of thoughts and feelings right here. And in fact, you can get, guys, you can extract a headline copy straight out of reviews you can extract lead copy straight out of reviews call to action copy straight up selling points straight out of reviews all you have to do is the homework of going and reading all of these reviews understanding what clients think and feel about this company and about the service in general and then find the overlaps the things that you see over and over and over again, ok, along with what you’ve talked to the business about already and collected.
0:18:10
The business is like these are what we think our selling points are but then the customers are like this is what stood out to me when I did when I when I was a customer at this business and you’ve got to make sure those two things jive, ok, because sometimes the business is like these are our selling points but the customers all talk about different things and if we put what the customers talk about as the selling points on the website the conversion rate often goes way higher because the business hasn’t really done the legwork they’re just you know this is our theory of this is what we think customers you know but they haven’t really gotten into the thoughts and feelings of their customers it’s just about like you know if we were going to sell it this is how we think it should be sold, but they haven’t really done any legwork or research or anything else.
0:18:53
Okay, so sometimes there’s not an overlap there. But I’m just telling you, go here to their reviews when they have this many reviews, and then especially the bad reviews. So what are they saying that is wrong? And maybe we need to address some of this in the copy. Maybe it was expectations were not set properly. Well, you can set expectations properly with copy, with FAQs, with things like that. So you can get a lot of SEO value here, a lot of sales copy value here, a lot of FAQ value here.
0:19:28
This is just a goldmine because it’s literally the thoughts and feelings of 300 something people who use this business. Okay, I’m gonna go back here and I’m gonna also check in on chat here. Okay, so listen, if you are wanting to drop your own comments about what you’re seeing here, if what I’m saying is like you don’t agree with it and you want to put in a counterpoint, drop that in the comments. If you agree with something I’m saying and you want to reiterate that, like for everybody else say, hey, I agree with that too, drop that in the comments because that helps.
0:20:02
It all helps people understand what they’re hearing and what they’re looking at as we go through these websites. Any questions need to have the question in all caps, not the whole thing in all caps, but put question in all caps and then ask your question. Okay? All right, let’s keep moving through. All right, so basic of this section is rewrite all the copy, especially rewrite the selling points right here. And if your client did not pay for copy, I would go back to them now that the site is done and I would say okay here’s the thing I want this website to convert for you like crazy. People are going to come to this website and in fact you may even pay money to drive people to this website. I want every dollar you spend on driving traffic to this website to count and the thing is it’s going to leak.
0:21:02
We’re going to pour water in a bucket but you’ve got some holes in the bucket and that’s wasted money and it’s wasted time and it’s wasted effort wasted opportunity. We need to plug up some of these holes. So I’m going to tell you right now that one of the big holes is copywriting. This is me talking to your client right now. Ok this is how you you talk to the client. Hey I have your best interest in mind. Maybe we didn’t talk about investing in this at the beginning but it’s time to talk about it now because every day is wasted opportunity. You’ve got some holes in the bucket, copy is one of them. These selling points aren’t convincing anybody. This copy is not convincing anybody. So here’s what that means in real life. If you pay to send a hundred people to this website maybe you get one new lead. I want you to get five new leads. That’s a big difference. Would you rather have five leads or one lead?
0:21:56
Ok, what’s going to do that at this point is reworking this copy. We’ve got everything else pretty much in place. We need a little bit of the copy reworked and that get them to invest in it because if they know they’re wasting money if they know there’s a hole in their bucket they’re going to want to plug that up. So you can now go back to your client and sell them on redoing the copy. Alright next one stay warm stay inside let Kodiak clear the snow. Good. I say the same thing every week I feel like. What am I about to say about this right here? I want, let’s just, I’m going to give you a little bit, think back, because I’ve said it many times, very important point. What do you think I’m about to say about this heading right here? If you can come up with it, I know there’s a little bit of a delay, I’ll start looking at something else over here.
0:22:50
We’ll look at this section down here while you guys can guess what’s about to happen regarding this headline right here. Okay, how does residential snow removal in Kanata and Stittsville work? All right, and then what does our seasonal residential snow removal service include? This feels very check an SEO box to me. Like it was like, oh, we found that this is what people search for and so we want to try to answer it.
0:23:16
But the thing is, it takes you to this page, but this page doesn’t have this, you’re not answering this query really. I mean, you kind of are, but then it takes to this page, which this doesn’t have the query in the title tag or as the headline on this page. So my cat just literally opened the door and walked in. Okay, odd. So, yeah, this is like checking a box, but you checked half the box, all right? So we’ll talk about that in a minute of like how you need to approach this.
0:23:53
What does our seasonal residential snow removal service include, read the FAQ. I’m so confused here, hold on. It’s like there’s two FAQs. So here’s an FAQ about snow removal service. Here’s residential snow removal service questions. Okay. This we need to think about. Let’s go to the chat and see. Nobody had an answer? Okay. George had a guess.
0:24:21
It feels like there’s a little bit longer of a delay today than normal. But George says the CTA headline is too small, doesn’t stand out. That is a good guess, George, but that is not what I was going to say. Here’s what I was gonna say. I’ve talked about this before. Where you, it’s a term in journalism that you’ll hear over and over and over again. You don’t wanna bury the lead, okay?
0:24:48
You took your, I’m not saying it’s the best headline that there ever was but the best headline that’s on this page was buried way down the page almost at the end of the page you take this all you have to do is command C and then come up here and right here put command V because I think we can all agree we’ve already talked about how we’ve wasted an opportunity here because you’ve said the same thing twice. That’s always a wasted opportunity. So we remove this and we do it with this. Stay warm, stay inside, let Kodiak clear the snow. Put it right there because that’s what people want. They don’t want to be out shoveling their own snow.
0:25:33
They want to stay warm. They want to stay inside. So tell them that right off the bat. You get to stay warm, you get to stay inside, let us clear the snow. That’s a much better headline than rewriting the same thing that’s right there, right here. And then just saying, oh, but Kevin, I made some of it all caps and gold.
0:25:51
Doesn’t that help? No, it doesn’t help. Cause you said the exact same thing. You got to tell me something different. And good headlines speak to feelings, right? This speaks to a feeling that the person has. This just speaks to logic of like we’re Kanata and Fitzville snow removal and we’ve already told you that but we’re just going to tell you it again in all caps and gold this time. Ok so you hit the explicitly what we are now hit the feelings, hit them in the feels as the kids say with this headline right here and again it’s not like oh my god that’s such a an amazing headline but it’s way better than what’s already there repeated from here that’s the point ok so you bury the lead that’s and it’s just something that we see every week you know we can a week out same thing you wrote a better headline you just didn’t use it as the headline so that’s an easy fix.
0:26:51
Okay, let’s talk about what’s going on down here. We need one FAQ, okay? Now I know this is difficult, because here’s what I’m gleaning right off the bat. These are blog posts. These are literal answers to questions. So you wanted to write posts that answer queries, but, oh, maybe I’m wrong. Hold on. No, I mean, it’s formatted like a blog post answering the query.
0:27:19
The problem is it just doesn’t do a good job of it. This is, if you want to, there’s an SEO term called thin content. And if you look up thin content in the SEO dictionary, there’s probably a screenshot of this page, okay? Or this, you know, all of these, basically. This is exactly what Google is talking about when it talks about thin content. Google does not want to index any of these pages. None, nada, zilch.
0:27:51
It’s going to pretend like they do not exist, unless you’re literally the only snow-blowing company in this area, okay? We’ve, this has to be, each one of these needs to be like 800 words at least, more graphics, things like make them actual blog articles. But I think what you were thinking is, well some of these we want to have actual URLs to, and some of them, let me click on the FAQs up here. See this FAQs goes to here.
0:28:19
This, yeah, okay. I think you did this out of like some sort of technical architecture type thing And then I see what the links up here Because you put FAQs under residential snow removal Let’s see if that’s okay. So that’s a an actual service page which How do you even get there do you even navigate to that somehow? Snow removal Q… Okay, you’ve got the FAQ. Okay, oh man. All right. Customer service. No, I can’t even get to that page. Snow removal Q&A. Mm-mm. See this? Look at this. See this slug? Right? No, it’s not on this one. Well, hold on. Where was it? Oh, right here. So I take this FAQs off and I go here. This is a link, but this link does not exist anywhere in the navigation.
0:29:23
So that’s another wasted opportunity. Because this is the page that would actually probably stand the greatest chance of ranking, I mean, based on its title tag and everything else. Of course, I mean, your homepage as well. But you see, I don’t know how close Kanata and Stittsville are together. I don’t know if they’re the same general area. I don’t know if they’re two major service areas. Because if they’re two major service areas, then we’ve got to start talking about the service area page strategy that we need to employ.
0:29:53
But I’ll just tell you right off the bat, like having two FAQs, calling one a Q&A and one FAQ is super confusing. Architectural nightmare, because these are probably two different custom post types in the back end. It needs to all just be blog posts, okay? Or you could technically blend blog posts and FAQs into one Q&A section or one FAQ section using a shared taxonomy, okay? So you can share a taxonomy between normal blog posts and FAQs. And then when you query them, you can choose to query them as blog posts on this page or only as FAQs on this page.
0:30:36
You can do some different stuff with custom fields. So there’s a way to organize this much better from an architectural standpoint. So that I think needs to be, got to back it up, Terry, and see if we can redo this structure before you get even further into this this nightmare. That’s brewing here Okay, I’m really interested in GPS tracking. What is track your tractor? Okay, so the third-party app This map will become active once our tractors have been dispatched. Okay. All right, I guess I have to know other things too To be able to use this. So Kanata, Kanata, Ottawa. Okay. That’s all I can do. That’s all I can do.
0:31:20
I don’t know how else to use this. Hopefully there is, you know, you’ve got some instructions somewhere, maybe in an email or something else that kind of shows people how to use this. Cause it’s not, I mean, unless it just isn’t operational right now. I don’t know View service logs. Why would I want to do this? Let’s see Okay, all right, I Guess this is for it for okay. You’re just showing the amount of snowfall on the date But I guess this isn’t for a specific customer this is just for the area is what I’m gathering.
0:32:03
I don’t know, I’m not a snow blowing customer. So I don’t know how relevant this would be to me to grade it on, you know, does it actually need to exist or does it need to be in a different format? Or I mean, there’s a lot of questions that I have obviously but we would need to have a conversation about that. Let’s refer a friend. Okay, snow removal referral discount, earn 5% back. Okay, who are you referring here’s a little typo if you want to fix that their home address okay all right good all right we’re trying we got we got good things these are good things we want to see these do I need service logs all the way back to winter 2017 again questions I have questions right do these things need to exist on the website.
0:32:50
Does this convert the next customer? Does this retain a customer for longer? What is the purpose of these old, old, old service logs? Okay, we already, oh, oh dear. Ooh, wow, okay. All right, so we’ve got a whole, got a whole nother website going on. All right, we’ll check that in just a second. We cannot contact you. Okay, hold on, sign up, call us, contact us, wow! You guys see this right here? Alright so again we’ll talk about wasted space, wasted opportunity, confusion, alright I don’t know. All three items in this circle right here in this three inch circle, every link in this three inch circle goes to the exact same spot.
0:33:39
But they all say different things. And when I click to call you, I can’t call you Jack, so I don’t know what we’re doing here. Because this should be a phone link. This should open up my phone and try to call somebody. Sign up, we already talked about, is not a good call to action for this service. And then contact us, I would expect to see a contact form. Don’t do this, don’t do me dirty like this. I want to contact you. Don’t make me insert postal codes and Jump through all these flaming hoops. Just show me excuse me Wow just show me a contact form I thought I want to see I want to see a contact form and I want to contact somebody and same thing here Why can’t I just call you right? Why can’t I just call you?
0:34:20
I got to do this, but even though we already determined that this doesn’t work. So I’m stuck, you know. I don’t know if this is a live site, but anybody trying to do business with you is stuck. Alright, we’re going to, I was going to see if there was any other blog here, because I wanted to look into some SEO type stuff, but I’m not seeing any bloggage going on here. Okay, how about title tags? Snowblowing service in Kanata and Stittsville. Alright, well I mean one thing you can do here is just a little tweak, little tiny tweak, put the Kodiak snow, put the name of the business at the end. Because title tags do get weighted towards the beginning, so you want the snowblowing service, okay. And then one thing we could check just as a good little basic kind of SEO deal.
0:35:18
I wish this would just keep me logged in so I don’t have to do this every time. I hit remember me and it don’t seem to remember me. Let’s see if we can get in here. Alright, Keywords Explorer. So here’s the hard part about SEO guys. Hard part about SEO. If you ask 100 people, okay you need snow removal. What are you going to search for when you pull up Google? And people will search for snow blowing.
0:35:46
They’ll search for snow removal. Then you’ve got all the things like snow removal company, snow removal service, snow blowing companies, snow blowing service, snow this, snow that. It’s not always super clear which one you should actually go after and then you have to figure out does Google interpret all of these things to be the exact same and then there’s long-tail variations because it’s going to be like driveway snow removal, roof snow removal, sidewalk snow removal. There’s gonna be all these long-tail variations that you’re going to run into and then it becomes a question of do we need pages for those things as well and that’s one thing I’m just I can see right off the bat that’s missing when I talked about well there’s no actual service page there’s a home page but there’s no actual service page and being that there’s no like services link here there’s also no long tail service pages so let’s just take well we don’t even need to guess.
0:36:49
Let’s just go here. Okay, so snow removal. I’ll do Canada, just so we can make sure we’re in the right spot, okay? So Canada, I’m just gonna start with snow removal. We’re not gonna worry about snow blowing and maybe any other variations. Let’s match terms. Is this big enough for you guys to see? How about that?
0:37:11
How about now? Let’s close that. There we go. Okay, so we’ve got snow removal, snow removal near me. These are the exact same thing. Snow removal services. And then you see right off the bat that there’s some location specific ones. Then there’s people looking for snow removal machines. Hey, hey, look at that.
0:37:32
You got a brand, you got some brand queries. So what does this tell me? This tells me that Kodiak Snow Removal as a company, branding wise, marketing wise, trust wise, market share wise, is doing a really really good job. They have got a lot of searches for their company specifically. So this is fantastic to see. You always, when you’re doing SEO for a company, you always want to, this is really, really, really good. You want to see this. Okay, snow removal, snow removal, snow removal. All right, let’s throw in snow blowing. Guys, I don’t know what’s going to come up right now, okay? You could, there’s some X-rated things in SEO research sometimes. Don’t hold me accountable, okay? YouTube, don’t ban me.
0:38:25
If we run into something we’re not supposed to see. All right. It’s just going to be words. We’re not going to, nobody’s going to get injured. Okay. There might be some emotional damage. I’m just saying I’m not responsible. Okay. So we can see that the snow removal say is way high at the top. So that’s good. You got a lot of, um, I’m not familiar with this area, right? But we can see here that we’ve got Canada and Stittsville let me see if those are anywhere I want to make sure I spell them right before I search okay nowhere on this page so there’s going to be deeper down I would want to know if any of these areas are relevant you know that are much much much higher up on the list in terms of volume I just don’t know how far away these these are if they’re like totally out of out of range for this company. But I don’t see the areas that they’re actually listing here you know in these top results. I was gonna see if there was any there’s just so many for snow removal. Driveway, snow, removal, and then we can also do like sidewalk, and I just want to see if there’s any long tail variations going on here.
0:39:43
So there’s an example right there, driveway snow removal. Now, Ahrefs says this is the parent topic. So what that means is you need a page for driveway snow removal if you want to rank specifically in the top results for driveway snow removal. It’s not just your general ranking for snow removal is not going to get it done. So there’s a sidewalk snow removal but you see here that this is Toronto snow shoveling. Okay so now we get into snow removal versus snow shoveling. That was one I didn’t even think of off the top of my head. We can see let’s take out driveway. Let’s go ahead and refresh this. See I would gather that removal is still going to be at the top. It is.
0:40:30
Okay. But there’s roof. See that? Now, maybe you don’t do roof snow removal. So if you don’t do roof snow removal, you don’t want a page for this, obviously. Right. But if you do roof snow removal, you’re going to need another page. So we’ve already determined you need a driveway snow removal page. Where’s that at? It’s not there.
0:40:50
So we need to talk to the client. Hey, here’s another hole in the bucket. We need to get that filled in. And then if you do roof snow removal, you need a page for that as well. Then we don’t know if snow shoveling, if people are looking for the service or they’re looking for like how do you snow shovel? You know, there’s a lot of questions. And this is why SEO is not as easy as it seems, right?
0:41:10
At first glance. So there’s a lot of work to do here, but I just want to show you, there’s probably some long tail variations of what I was seeing off the bat is, there’s just no long tail service pages here whatsoever. There’s no service page here whatsoever. You’re relying 100% on the homepage to do the work here. And so I would say that that is a missed opportunity, okay? All right, we’re gonna wind down on this website right here.
0:41:37
I think we’ve looked at pretty much the entire thing. You know, design-wise, it’s all fairly basic. It’s a local service company. They’re not trying to win any design awards. It’s engaging. It doesn’t have any major flaws. We could look at the DOM and see, you know, are these things lists and all that good stuff. We could look at accessibility. I mean, right off the bat, I know that this is probably built on oxygen because I think I recognize this navigation. Let’s just go ahead and take a peek. Yes it is oxygen and therefore I already know it’s not accessible because it’s just how we roll. So oh okay oh maybe they’ve… hold on hold on yeah okay you can you can keyboard navigate. This didn’t used to be the case but like there see how it forces you into the drop-down, it forces you to go through every drop-down element.
0:42:30
So the fact that you can keyboard navigate it at least is good, but it’s still not accessible in the sense that we’re violating basic accessibility principles of navigation. And let’s see how we can keep going. I would actually change the focus color a little bit. There’s also a focus issue. Well, there was. Now it’s okay. It was skipping one of the links there.
0:42:54
Yeah, okay, so it’s not horrible. I was wondering if there’s a skip link. Let’s go all the way back. Up there, up there, up there, and no skip link. So we’re missing a skip link, and we’re missing a little bit of accessibility stuff in this dropdown going on here. Basically, the principle is somebody should be able to go through your top level links without being forced into the drop downs. Alright?
0:43:21
And then of course the skip link for those of you who don’t know should appear right here somewhere and it’s the first focusable element which allows you to skip all of these links here. Because somebody with a keyboard they navigate to like our company right? Okay now they’re here. Now they want to start looking at the links on the page. They cannot look at the links on the page until they go through every link in the header and the navigation again, including all of the sub links because you’re forcing them to go through those and it’s just a horrible experience to get to where they want to go on the page.
0:43:54
All right, so kind of the basics there of accessible navigation. We could read all this copy, but I already know. It’s going to be me, me, me, I, I, I, we, we, we, my cat, my favorite color, all this stuff. It’s not a you-focused copy, because I saw that on the homepage as well. All right, so I would go sell copywriting right now. Run to your client and start to explain to them why, all right, website’s up, it’s live, great, looks good.
0:44:22
We need to overhaul the copy now, okay? If you want to convert five out of every hundred instead of one out of every hundred let’s overhaul some copy. All right let’s take this away, let’s take this away and let’s check on our chat before we jump into website number two. See if there’s any questions. This is where we’re going to take the break. This is where we’re going to take the break and dive into questions. Maybe do a little mini live tutorial just based on what people are asking. We’ll see. All All right, let’s go up, up, up, up, up in the chat. Okay. Now I’m caught up. Rebranding. Let’s see.
0:44:58
D123 says, rebranding digital ambition. Great. Now I must rebrand all of my bookmark folders. Yes, there’s downsides. Think all the things I got to do on the back end for this. Question, what about WebP so Good question good question if you want to Have webp on your site depends on the type of you know server you’re running like nginx sites It’s not as straightforward. There’s a little bit of extra setup work that you have to do I Will use webp For the most part because now our blueprint setup. It’s already taken care of, like our servers, our blueprint, it’s all set up to do WebP, basically without me doing any extra work, so it’s just good.
0:45:45
But if you don’t have blueprints set up like that, it’s gonna be extra work for every single website. And you have to just determine, is the juice worth the squeeze, right? I’ll tell you where it is 100% worth it. I’m actually doing it on my new site. Like it has to be done on my new site. Because my new site uses PNGs with with transparent backgrounds and that’s where you get a ton a ton and ton of benefit so we’re talking about images that are like 400 500 K in WebP are like 40 K or 50 K like massive difference because WebP really shines when there’s a PNG with transparent background that’s where it really really really shines sometimes in JPEG it doesn’t really do all that much for you.
0:46:29
If you got normal JPEGs and you switch them over to WebP, if those JPEGs were already compressed really well and already really well optimized, you’re not going to get a ton of benefit. But again, if it’s easy for you to do, then no harm, no foul. This is good to do. Try a postal code starting with a text letter. Okay. Well, I would have done that. Maybe you’re right. There you go.
0:46:54
It needs a Canadian postal code. All right. Good, good, good. Love the snowball numbers. Oh yeah, those design elements, I think that she was talking about. They were snowballs, the one, two, three. What is the software with the code logo in the right on Kevin’s toolbar? That’s SiteBulb. So that’s what I used to do all SEO audits. Here, I’ll bring it up for you. You can take a look at SiteBulb.
0:47:22
Fantastic tool. Well, maybe it’ll start sometime this year, and then we can take a look at it. All right. Melvin says, okay, that was just a comment to somebody else. Site Reeks of the owner wanting everything probably against the wishes of designer. Maybe. Yeah, maybe. Or it could just been kind of a template. What is Sipo doing? It’s normally not like this. Oh, it needs to be updated. It’s yeah. So you know, the download new version, okay Continue to my project so you basically start a new project You put in the project name you throw in a URL You could choose your audit type here. I just typically go with standard You’ll do the I do the Chrome crawler which takes longer But it renders JavaScript content And then I’ll typically do the device as desktop first and then I’ll go through and do a mobile version as well.
0:48:28
We can just do test project. We definitely cannot wait for it to run a whole audit. It’s going to take a while. Let me go through. Okay so stop it. Hmm. Well that last audit. Alright that was that was on the old, old, old site, I think. Let’s go ahead and take a look at it. So I’ll kind of show you what it kind of tells you and what it does. First of all, it generates amazing audit reports. If you want to give your report to a client, right? So you can go up here to PDF report, and you could choose all the things that go in it. And then you hit print PDF, and it’ll literally print out like a 30 page PDF with all of the SEO hints, issues, all that stuff.
0:49:21
So like I’ll go to hints up here, and it’ll tell you here’s like high priority stuff, it’ll do medium priority stuff, low priority stuff, and then it’ll just give you different insights. This is actually like there’s not a lot going on here. On a typical website, you might just see, you know, 50, 60 items in this list. Just depending on, you know, how much work needs to be done on the site and what kind of issues there are. But then of course there’s a URL Explorer.
0:49:47
Like for those of you who use Screaming Frog, this is very similar, this URL Explorer. It gives you site visualizations, right? So I wanna see like a crawl radial. Hopefully it can generate this fairly quickly. This and this was a very small site. You’re actually not going to get a lot of data here for this particular one, but a large site what it’ll do is give you a visualization of how the crawlers compartmentalize the content on the website. So you can see like it’ll jump this off over to blog, and then you’ll see your categories, then you’ll see the posts in every category and it gives you a really good overview of the architecture of the website But this was literally like a five like a three page website five page website or something So it’s not gonna be a lot there Just a lot of really really really powerful tools And then of course you can filter all of this data to exactly what you want to see And then you can automate the reports so you can go in and make sure you’re fixing stuff every month for your you know High value clients really really really good tool is SiteBolt.
0:50:53
Okay let’s keep moving. Third party cookies switched off, tell Chrome to fix site, right hand of address bar. Okay, well we’re gone on that one now. You did a review of my agency site last year, I’ve just relaunched version 2.0 and submitted it for your pulling apart. Okay, good good good, I will look for it. Okay, we’re ready to move on to the second site. Let’s bring it in. Can do’s Napa Valley give guide can do’s Napa Valley give guy can can do give guide.org. Okay. No scroll test. inspiring a community of givers. 10 years, can do’s, give guidance.
0:51:41
One million raised from 1,571 donations. You out contributed all prior years. Okay, did I? Me? My first time here. I’m already winning. Okay, three ways to donate. Browse nonprofits, A to Z nonprofit list, donation form. Okay, as the no scroll test I’m feeling this fails the no scroll test because I feel like I need to scroll or go to another page to figure out exactly what is going on here. So I get it’s a nonprofit, got that part. I don’t know what it’s for, don’t know what it does, don’t know how I should participate, don’t know if I want to participate, got a lot of questions, which tells me the heading, the headline here needs to be rewritten.
0:52:32
I also am not big on this headline and this headline being separated by the exact same logo that I see right there. So here’s another example. You guys see how the same things repeat over and over and over again? We’re wasting either this space or this space. Now I can tell you we’re not wasting this space because that’s where a logo is supposed to go But we’re wasting this space we need to put something else here that communicates Something important to the visitor because right now the visitor random visitor gonna be a little confused doesn’t know what’s going on here So I’m gonna scroll that’s all I can do now. I can scroll and try to see if we can decipher Now you’re giving me three ways to donate but I still don’t know why I should donate, who I’m donating to, what I’m donating for. So this is a wasted opportunity because if I don’t know the answer to those things I’m just not going to take action on this. So let’s keep scrolling and we’re gonna do what most people I think would do and scroll past this and get to the next thing. Now I can see, okay, now there’s some categories.
0:53:40
Like, alright, we can donate to animals, art and culture, community, education. I like that we can see the number, the amount raised. This is really good. I like these icons. So obviously more thought has been put into the icons. I like the little duo tone Overlap kind of thing going on here Just gives a little bit more life to this section. It’s on brand as far as the colors are concerned Okay, so this is good Let’s click into Animals, let’s keep it nice and simple All right Whoo all right?
0:54:15
We’re met with a lot going on here Okay, find out your favorite non-profit by using the left menu. Choose one or more categories and donate easily to as many non-profits as, to as many non-profits you desire. Okay, gotta rewrite this just for basic grammar. I’m not, I will say I’m not a fan of, what do you guys think of this? Is this a little visually, it’s like, whew, a little off-putting visually, I think.
0:54:42
To have, got two different colors going on and then you got a bar floating at the top and a bar floating at the bottom I don’t know it’s a little it’s a little staggering I don’t know any other words to describe it okay let’s go down and see these are the things I want your guys’s feedback on drop comments in the chat and let me know like you’re seeing the same things I’m seeing what are your thoughts so I’m gathering that we can just this is a directory basically if we had to boil this down what category does this website fit in it’s a directory website for nonprofits now why does this exist that’s what I’m trying to figure out do you do nonprofits pay to be in this directory like I’m trying to figure out what’s the angle here.
0:55:39
But let’s keep going. See, and here’s an example of where this design decision fails, where we have this accent bar is actually creating a contrast issue in the text that was not there before you added the bar. I would have been able to read this text just fine. I could tell you that this half of the text up top fails a contrast ratio check right away because I don’t have contrast ratio problems with my eyes and that’s hard to read and even here it’s a little bit hard to read I don’t know I’m not digging it I’m not there it’s just a lot of confusion a lot of confusion where we don’t need confusion ok here we go you’re going to tell me why the can do’s give guide. That’s a mouthful by the way. A can do give guide. I don’t know exactly what it means. Can do give guide. And it’s only for one specific area for Napa Valley. So this is a niche directory site. But yeah tell me tell me why this is the single way to support a world of good. You care. You’re inspired to be part of this community of givers. Giving won’t break the bank.
0:56:53
Donations begin at $10. Okay, so you’re actually taking the donations and passing them on to the nonprofit. So you’re a middleman directory. And I’m gathering that you maybe they don’t pay you to be in the directory. But you take there’s a add on fee of some sort when somebody makes a donation and that’s how you monetize It’s just a guess we’re gonna find out in just a second, but that is my guess All right, we’ve got some company logos down here some sponsors Good, okay Isn’t just about nonprofits is about the entire community today more than 32 generous business owners and individuals support this ever increasing community of givers. Okay, so you’re also a local business directory. So this is good.
0:57:45
And they pay to be here, which is another monetization opportunity. I get it. Okay. Give a gift. Where does this go? Okay, we can buy a gift card. Send someone the gift of charity, fill out the form the amount you wish to send. Okay, I’m a little confused. What are we gifting?
0:58:09
What are we, what is the, who am I, who would I, like if I send this to my mom, like, hey, gift card to Tandu’s gift guide. What is she gonna do with it? Well, like, yeah, I have some questions here. Look, this is a little confusing. Does anybody else know right off the bat what would happen here? Am I the only one not getting it?
0:58:35
It’s always possible, it’s always possible. But here’s the thing, if I’m confused, I’m sure there’s other people that are confused too. I’m not the only one that’s confused. I don’t know, just, you know, if I was buying a gift card to a local spa okay I get it I get it I’m gonna buy the gift card they take the gift card to the local spa they get spa treatment right what do I do here with this gift what is the person going to do with this gift card after I send it to them all right like what is the gift of charity they’ll receive a code that can be used on the site but for what? Did they just use the gift card to make a donation that you already paid for? I don’t know.
0:59:22
Okay you tell me. I’m going backwards. Let’s go check out the actual process of donation. So I’m gonna go to Napa Humane. All right got a little cute picture here, and then we’ve got info about this Business or organization I should say You got some other ways that they can help or that you can help them Business partners that are attached really good from a standpoint of I would you know expect to see if we went on the back end Custom post type God my voice is all over the place tonight, weird. Being sick sucks. I would expect to see a custom post type for the organizations.
1:00:08
Custom fields, okay, this is a custom field right here. I’m just helping for those of you who are like, how do you set up a page like this and not do it manually, like one by one by one, ended up creating an absolute freaking nightmare to maintain. So custom post type for the organization, amount raised is a custom field, number of donations is a custom field. This is a custom field right here.
1:00:37
This is a custom field right here. This is a bidirectional relationship. This is a bidirectional relationship because you have a testimonials custom post type. You have a business partners custom post type, and these are bidirectionally related to a organization. Okay. Then you have related. This can also be a bidirectional. You can bidirectionally relate a post to its own post type, is what I’m trying to say.
1:01:12
So it’s not normally you see one CPT to another CPT but it can actually just be post by post inside of the same CPT. I did that recently with the frames, the frame site. We bi-directionally related frames to other frames. Okay good good good good good. And then over here cultivate systems 1000 matches been met, 5000 matches been met. Don’t know what that means in the slightest. Don’t know what all this is about. Maybe add a little link to like learn more. What does this do? What does this mean? I don’t know. You got to add some extra context right here.
1:01:49
Like, I don’t, why am I seeing a Kim Brown, like a random person? I don’t know. I don’t know what’s going on here. You have their contact info, all this driven by custom fields. That’s all good. Ok, oh I was going to try to see what the donation is like. I can ask a question. Ok, so this one I can’t donate to. There’s no way for me to donate to this.
1:02:15
So now I’m even more confused. So maybe they do just pay for a directory listing. Let’s go to NAPA cart. Cause guys, you see, it’s the same format on every, this is what it should be, right? But a lot of people will do this manually. They won’t create the CPTs. They won’t create the custom fields. They won’t create the bidirectional relationship. They’ll turn this into an absolute disaster. I wish we could get the login info and just go poke into the backend and see how this is all set up.
1:02:52
All right, I’m confused. I’ve gone to two now and I can’t make a donation. But over here it told me I could donate and then look on the sidebar it says your cart. Okay, what can I add to the cart? What can I add? What can I buy? How do I buy? General rule number one, I’ll just say, if somebody comes to your website and you’re selling things and they’re like, how do I buy it?
1:03:19
We’ve got some UX problems and some copy problems. All right, here’s your whole grid. You can sort it over here. I wonder if this is WP Grid Builder facets. Okay, I wouldn’t use these kind of buttons here. I would use either check boxes or radio buttons or a drop-down But it’s not immediately clear that these are and buttons Because see how it’s art and culture and community now like I’m gonna see both of them versus just seeing one at a time There’s really no indication there that that’s going to be the UX.
1:04:03
But if there were check boxes I would immediately know, oh check boxes mean I can check more than one. If I see radios, then it’s pretty clear that I can only do one at a time. And I don’t like the way that the label text moves when you, and see it actually creates layout shift. Because when these go away and the clear button disappears, it creates a layout shift on the page. That’s also not desirable. Put the clear button down here, maybe, and then it won’t create a layout shift. The layout shift is caused when this clear button disappears.
1:04:37
So when I take this off, that’s gonna go away, and the whole page shifts every time I do something, actually, so little bit of UX stuff going on there. Let’s see how these were built. Show me your DOM. We got to do a show me your DOM at least once, at least once per session. Okay, let’s bring this down. What are you doing? Where’s the, there we go. Okay.
1:05:01
All right. This is built in Oxygen. All right. So I already know right off the bat, it can’t be proper list structure because you can’t use proper list structure with Oxygen’s repeater. OK. There is your grid. All right, good. So we’ve got, see the ACSS utility classes on here. There’s your actual card right there.
1:05:28
So you actually have an opportunity here to use article tags, like at least something better than, you can’t use a list, we’ve already determined that, but you can use article, okay, like this. And an article signifies that this is a standalone piece of content, that it makes sense outside of this context, which these are all organizations, right? So just like a blog post is an article, according to the HTML5 documentation, really these are standalone organizations, right?
1:06:01
So they’re all articles in HTML5 speak. So this gives a little bit more context than just a div, right? And since you can’t use lists here, this helps. So there’s one little thing you can do if you want to continue to elevate the game a little bit here. What I’m looking for is, and I see it, we’ve got a TM card width is all about here. Let’s see if we can see that down below. But we do have a custom class. And now we’re going to look for, so we’ve got TM card. Okay.
1:06:37
We do have a BIM violation here. Well, not really, kind of. Because you’re actually using underscores instead of dashes. I would highly, highly, highly recommend dashes. Because it’s very difficult then, it’s like all these are component and component when really this is not a card in a TM. That’s how you’re supposed to read BEM. Even though that’s not a double dash, it’s a single dash. But then you’re trying to decipher what’s a single underscore, what’s a double underscore?
1:07:06
Just follow the BEM, the way it was designed perfectly. Okay, there’s no need to change it. So this should be tm-card double underscore header and then this is not you’re using a modifier for an element for a child element because this is not I don’t think this is a modifier class. So we’ve got some BEM violations going on here. This should have been a single dash header media. This is the proper way to write this. Right there, okay? TM-card, that’s your block. Header, media, that’s your element. And there’s no modifier, because we’re not modifying it.
1:07:49
So you’re done. This is it right here. This is the proper structure. All right, then we’re gonna go down here, and this link. Okay. What I’m gathering is we’re going to see multiple links within this card, which is a little awkward. I can’t click the card itself, but notice this is another thing, right? So a lot of stuff going on with these cards, a lot of stuff going on with these cards. Cards are not easy, guys.
1:08:18
There is a, you can say, hey, I’m just going to build a simple card. What could go wrong? A lot can go wrong. A lot can go wrong. If I cannot click the card, there should not be a hover effect on it. You guys see that hover effect? But I can’t click it. It doesn’t, you’re telling me I’m hovering a clickable element, but it’s not a clickable element. So that would be number one.
1:08:41
Then we have the image wrapped in a link. That’s link number one in this card. Now a card can have multiple links if the whole card is not clickable. Okay, that’s not an actual problem here. But what we don’t want is two links to the same place and that’s I think what we’re gonna find. So in this div right here, we’re going to find another link and where does oh wait, hold on. Okay. Yeah. Yeah. So this goes to the organization’s URL, 10,000 degrees. We come down here, link to the same place. So from an accessibility standpoint, this is an accessibility violation of, you can’t have multiple clickable elements inside the same block that go to the same place.
1:09:29
Because it forces people on a keyboard to, it’s redundant. You’re forcing them to go through meaningless things over and over again. So this is a perfect example of, and I do want to bring this up. You can use the clickable parent technique here. In fact, I would recommend using the clickable parent technique here. How we impact the community. Okay, does this go to the same place? That would be the last question.
1:09:54
Okay, we now have three links that go to all the same place, okay? Hold on, design, crack is here. What’s up? What’s up my man? Actually, you can use a list with oxygen repeater by using aria role equals list for the repeater and li tag for the carts. Okay, so that is a workaround. Yeah, what I meant is you can’t use a technical structural UL with allies, but he is technically correct.
1:10:22
If you wanna use an aria label, you could pull it off that way. I consider that to be a hack. Like oxygen should allow you, this is what I’ll say, oxygen should allow you to create proper UL LI list structure with their repeater. But it doesn’t because of the default div that’s inside of the repeater element, what you end up with is the repeater container is the UL, followed by that div, which you don’t have any control over followed by li’s and that’s semantically incorrect. But the aria role equals list is a way to get around that. So that is a good value add from design with cracka. If you are not subscribed to his channel definitely go search for that and subscribe. Okay let’s keep moving on. We found three links all to the same location So what this tells you immediately is drop all the links make the entire card clickable one thing goes to one place Okay, how do we do that?
1:11:25
10,000 degrees should be the link for this card Clickable parent technique expands that to be the entire card now what I was going to say is if you have a link like this, it’s not unique, but let’s for a minute just imagine that this actually needed to go somewhere different, okay? Or perhaps even a section of the page, which this one does not, because it doesn’t have an anchor on it. But let’s say it had an anchor. So you want the entire card to be clickable, but you also want this to be clickable as well.
1:12:02
Last I checked, I probably have to verify this, but last I checked, you can do this with the clickable parent technique. You switch this link to position relative, and position relative will elevate it above the clickable area of the rest of the card. So literally, every part of this card will go to your main URL, but this link will still exist as an independent clickable element that takes you to a different location.
1:12:30
So we can verify that, but I’m 99% sure that that works. But definitely 100% you can’t have a card with three links that all go to the same place. So we got to get that fixed up ASAP. Does anybody else know, let me go up here and see if anybody has answered the question about gift certificates on this website, and then how do I donate? How do I donate? That would be the other question. By the way guys, custom fields, custom post types, custom taxonomy, makes this site so easy to manage and look at all the stuff you can do. You can just take all this custom field data and inject it anywhere you want inside of these query loops. It’s really really really powerful.
1:13:19
Ok, I need to answer me guys. Where do I go next? Where should I go next? Alright, let’s do process. How to support GiveGuide nonprofits. Ok, we’ve raised over four million. Got it. Alright. Here’s an example of process. Giant wall of text. When I go to a process page, hit me dog like real quick, give me the bullets. You’ve seen it all before, there’s cards. It’s like step one, step two, step three.
1:13:50
You make it visual, you break up the content. That’s what we need here. That’s what we need here. Ain’t nobody wanna read all of that, okay? Especially when they’re like, just what is the process? What do I do? Why are you making me jump through all these hoops? So we need this to be visual, use a card layout, one, two, three, very, very easy to digest.
1:14:13
This is not easy to digest. And I don’t want to subject you guys to me sitting here and reading it, right? Yeah, okay. FAQ. All right, this is a good format for FAQs. Again, custom post type, custom taxonomy, the categories that each question goes into allows you, this was probably if I had to guess, most people build these pages manually.
1:14:41
I always custom post type this, okay? These should be query loops all day long because then it makes it so easy to manage. You need to update the answer to a question, just go edit it in the backend, hit update and you’re done. You don’t have to mess with the page, you don’t have to mess with these toggles, you don’t have to open oxygen, you don’t have to do all this other stuff. You wanna add a question, cool.
1:15:01
I add a question, I tell it what category it’s in, I hit publish, it shows up in this grid, in this I was gonna say grid, but in this accordion, in the section it’s supposed to be in, I don’t have to open oxygen, I don’t have to mess with the accordions, I don’t have to do anything. So very very easy and then it gives you the power of showing these FAQs in other parts of the website based on what the page is about, the context of the page. All right, same thing sponsors, community partners, all of these custom post type all day long. Custom field for their logo, custom field for their URL, query this into a grid, easy to add new sponsors, easy to sort the sponsors, easy to do a lot of different things.
1:15:54
Make this custom post type all day long. All right. Let me go check the chat and see if anybody’s come up with the answers to these questions here. For giving money, there was a square upright corner with a light border, but no text. Maybe you write your amount there. Okay, let’s give it a shot. Let’s go here, go here, go here. Talking about this square right here.
1:16:21
That’s just empty, nothing I can do with that. That has, it’s got things in it. Let’s see. Oh, it’s got a product cart button in it. It’s got a wish list button in it. I just can’t see them. So we’ve got, it’s definitely broken. Maybe it’s not done yet. Maybe it’s not built out. Maybe this isn’t, I mean it is, it appears to be live.
1:16:48
Not a dev link Question where can I learn more about CPT? relationships The first place is so I did a CPT video It was like the top 10 use cases for custom post types or something like that So that would be the first place I would start go to my channel type in Custom post types or CPT top 10 or whatever and that video will probably come up. It was like really, like I got a ton of comments on that video. A ton of likes, like it’s probably one of the top videos on the channel I would imagine. So definitely go watch that.
1:17:25
That’s going to give you the ideas for why is custom post types important? What use cases should you use custom post types for? How does that open the door? Paratus says, any good affordable plugin for creating custom post types? Yeah, there’s there’s two of them really that are like the industry standards So you have if you’re going to use advanced custom fields, then there’s a plugin called custom post type UI or CPT UI Let’s go to We’ll just look for it right here. It’s this one right here, custom post type UI. So this will allow you to create, now I’m not saying this is the one you should use, okay?
1:18:06
Just let me finish the whole answer before you jump in and start downloading plugins. This is the one you’re gonna wanna use if you’re gonna use advanced custom fields. Advanced custom fields allows you to create advanced custom fields, but it doesn’t allow you to create custom post types. There is an extension for advanced custom fields called ACF extended. And that allows you to, I believe, create the custom post types.
1:18:30
But, you know, we’re adding a bunch of plugins. ACF Extended comes with all this other bloat and all these other features that you may or may not be using. And then you’re creating your custom post types in a plugin that’s separate from where you’re creating your custom fields. And then, I don’t know if ACF Extended also adds the bidirectional relationship functionality. It didn’t used to, at least I didn’t think it did, and I always needed a separate plugin for that.
1:18:56
So I ended up with like three or four plugins to get my custom post types and custom fields and relationships and all that stuff worked out. Then I just switched to MetaBox. And MetaBox, it’s technically, Silent Hill says MetaBox is still two plugins, kind of. Like it’s the base plugin and then the AIO, the all-in-one plugin, which is the pro extension version, blah, blah, blah. But really, you’re only interacting with one plugin.
1:19:24
You’re not interacting with two different plugins. That’s really, from a UX standpoint, that’s the biggest benefit. So if I go to, let’s just go to this site right here. So you’re gonna see MetaBox, right? I can do post types, taxonomies, custom fields, relationships, all right there, all in one, and it’s just a better overall UX in my experience. This is what I prefer, this is what I recommend. I recommend going MetaBox.
1:19:53
It’s so easy, guys. And if you watch my other tutorials, especially Inner Circle tutorials, where I’m actually building real websites, and I’m creating custom post types all the time. If you go into like getframes.io, here’s another good example of how you can organize these as well. Jeez Louise. All right, if we can actually get in.
1:20:17
All right, so let’s go to MetaBox post types. All right so you see there’s a lot going on here. There’s an FAQ custom post type. There’s a frame custom post type. There’s an HTML 5 elements custom post type. There’s a changelog entry custom post type. There’s a component custom post type. So let’s take a look at this. If you look over here on the side you see the FAQs one right here. You see the frames one right there. Where is the HTML 5 elements one? Where is the change log one? Where is the components custom? You would normally see them here, but actually with MetaBox it’s very easy. I don’t know how easy it is to do this stuff with CPTUI and ACF Extended. I don’t use those anymore, so I can’t answer these questions. All I can tell you is how easy this is with MetaBox. So we go under frames you’re going to see that they’re actually nested because components are a type of frame almost but they’re not the same CPT they’re they’re clearly different and what this allows you to do is on the front end right if we go to components I don’t even think this page has been released yet. So you’re getting a sneak peek. Okay so here’s your component library.
1:21:39
So I can query the components onto a page very easily. You could have said, okay, these are frames and we’re going to categorize them as components. No, no, no, no, no. Because technically, they are different type, they’re not frames. They’re not. So don’t try to stuff them into the frames custom post type. Make a separate custom post type for components, nest them under frames because they belong here, and then you have frame types where we can categorize all of our frames. So that’s a custom taxonomy. So if we look at this, this is where you see the things like, is it a grid? Is it a modal? Is it a section? Is it single?
1:22:16
Is it a template? Okay. Then we also have frame categories. This is another taxonomy. This is where you can see, is it a badge? Is it a blog? Does it go in contact? Does it go in content? Okay, so you can see all of that going on here. Then we have the changelog entries. Well, obviously a changelog is not a frame, but this is the changelog for frames. So I nest it under the frame CPT, but it’s its own CPT.
1:22:48
It can have its own categories if it needed its own categories. It can even share categories. It can also be, let’s go to MetaBox relationships. It can also be bi-directionally related. Here’s all of the bi-directional relationships. So frames related to other frames. And I’ll show you how we get this, like what does this actually do? Okay, well, first of all, here’s the library page, right? So we can see the type.
1:23:16
So because there’s a taxonomy called type, we can also filter by the type. Remember there were categories. We can also filter by the categories. We can search for frames, then we can sort them. We can sort by A to Z, Z to A, whatever. Okay, now let’s click into a frame, slider, Bravo. Actually, let’s go to Yeah, let’s do slider Bravo, whatever. Okay, so we open slider Bravo Featured image. Let’s show one with hold on there was one Did I have one that was how to design to go? Yeah like this one. Okay, so timeline section alpha So this actually allows you to then style preview it So we have a custom field for the styled version and then a featured image is just the unstyled version.
1:24:06
I think this is very important. We’re gonna go down this rabbit hole because this is so important for people to understand more technical structure of how to really organize. This is using WordPress as a content management system. The biggest, one of the biggest mistakes I make when I audit websites, I just audited one last month. They came to me and like, it’s a giant site, giant site, so much stuff going on. I went in there, no CPTs, no custom taxonomies, no relationships, everything is a post or a page, no organization whatsoever, architecture destroyed.
1:24:46
What’s the answer to a site like that? It’s gotta be rebuilt, whole thing, whole thing’s gotta be rebuilt you just took something that could have been a alright we can give it a new face for 510 grand not now it’s 50 grand just got to do a whole thing over again it’s a total disaster and they couldn’t do a bunch of things that they want to do well how do we do that querying how do we do that fastening how do it sorry Jack you can’t do it can’t do it because the whole architecture was done wrong from the beginning you’re not using WordPress as a content management system. What you’re using WordPress as is a junk drawer.
1:25:20
That’s how so many of these sites end up. It’s just a junk drawer. It’s all pages. Just throw them in. Everything’s a page. Everything’s a post. You’re not using WordPress. Why are you using a CMS if you’re not using the CMS? Right? So don’t create a junk drawer of a WordPress install. Do not do it. It is an absolute nightmare. You’ve got all these tools at your fingertips. You’ve got to use the tools. Learn what’s available to you. Learn how to piece it all together. Okay?
1:25:52
So you see this is the templates, right? And then all this is driven by conditional logic. But here, right here, the HTML5 tags and attributes. We’ll look at editing a post on the back end and how easy this is. Okay, so I can actually tell it, hey we use ordered lists and list items in this particular frame right here. But actually if you come down here and you see related frames, this is a frame related to another frame. So I click on this, it’s going to take me to Timeline Alpha, which actually has other things going on. Like it actually uses different HTML 5 tags and attributes it uses the OL and LI but it also uses a time tag it also uses a date time tag now why was this another custom post type because I knew well some of these things I just want to link to the documentation like at Mozilla org right so it’s like what’s an OL well there it is okay so if you need to learn like what an ordered list is in HTML.
1:26:50
But the other thing I knew is that, well, sometimes we need to send them to mozilla.org so they can read the official documentation. Other times we need to send them to our internal documentation about how do you use that time element? How do you use the date time attribute? Oh, let’s do a whole write-up showing people exactly how to use this inside of this frame. And so this gives us the opportunity because it is a CPT, it can have, it is a post, right? It’s a type of post. That’s what a CPT is. So we can create our own internal documentation for it. Now let me go back and let’s actually look at editing something like, no, we don’t want to edit in Brics, sorry, edit frame. Okay, this allows us to add new frames without ever opening bricks, without ever touching anything.
1:27:40
Okay, so timeline alpha, check this. If it’s a component, oh and this is another thing, the components and the frames share the same fields. So even if they’re a cut, even though they’re different custom post types, when I go to custom fields, we’ll go to single. Okay, so I open this, look at where this is assigned. So this set of custom fields right here is assigned to two different places. So if it’s a component and it’s a frame, I have all the same custom fields available to me. I didn’t have to create all of this again just for the components side of things. They can just share the same fields. Really, really, really powerful. Okay, so now, this is for components. Actually, if we wanted to do coming soon for frames as well, we could.
1:28:32
Check this out. If you toggle this, okay, it gets this little badge. Now, you’re gonna see cuz the WP code box is trying to reload stuff on the fly. You might see some stuff flash on the screen. It’s cuz I’m logged in as the admin. But check this out. Anything that is coming soon gets this ribbon simply by flipping that toggle wherever I was where was I here we go ok let me organize my tabs so I flip this and it gets this but not only that guys not only that this this grid this CSS that’s how I did it with CSS if it a ribbon it automatically gets sent to the bottom. Okay so this does this by date we put all these in at the same time but if it has a coming soon ribbon it will appear after all of the other components. Okay so you see these three come first it’s not because of manual order or anything else I don’t really care about the order but I don’t want to show coming soon ones first I want those to always be last. So those get an order of one.
1:29:40
If it has the tag, it gets an order of one, which automatically in the grid sends it to the bottom of the grid. So you’ll always see available components before you see coming soon components. All that happens dynamically. I don’t have to think about it ever again. Now, platforms. See, I can flip a toggle. Okay, let’s go check it out.
1:30:01
So let’s go to the, none of this is live yet. So frames. So we’ll look at, well, which one am I doing? Let’s just go here. Why am I taking the long way? All right, so here we are. You see this right here? What is it available for? Bricks, Figma, Gutenberg. This has the same technique.
1:30:19
If this is active, it puts it at the front of the list. See, the order of these icons is actually Figma, Bricks, Gutenberg. But because Bricks is activated it sends it to the front of the line. So you always see what’s active before you see what’s inactive. So now what I’m going to do is flip Figma and hit update and then we’re going to refresh. And then because we’re doing this live, it’s not going to work. But no, it’ll probably work. Why is it taking so long to update though? Okay, let’s refresh. See, Figma and Bricks are now both active. See how easy this is.
1:30:55
I didn’t have to open Bricks Builder, grab the icon, change it from 50% opacity to 100% opacity, and then hit publish, and then go on to the next one, do it again for the next one. No, it’s just, oh, this one’s available in Figma? Okay, flip a switch, update, we’re done. Let’s move on with our life. Now I’m gonna deactivate that. Now we come down. Here’s your lead, which is right there, which is also on the card as well, okay?
1:31:20
Then we come down here and we see the styled image. There it is, okay? There’s the styled image, very easy to add. If it doesn’t have a styled image, what happens? Okay, let’s go down here. Good question. These all have styled images. Okay, let’s go, this one didn’t earlier. So look, no styled image, no toggle. Very simple. So we don’t have to have a styled image to put it in as a frame. It can be added later and when we add it, the toggle will just magically appear. There’s nothing that we have to do inside of the builder. This is all, no code. Guys, no code. Brics does all of this natively, okay? The only thing that it’s just some custom CSS.
1:32:03
So when I say no, it’s got custom CSS. But other than that, it’s not custom PHP or anything else going on here. All right. So now we come down, there’s your introduction text. Here’s your variables. Now, this is critical. We’re going way over and we’re at a dummy’s land. But this is really good because we came here from looking at a website and just say, hey, how would you structure a website like this if you got this as a client website and you didn’t want to turn this into a dumpster fire drunk drawer of a WordPress install?
1:32:37
That’s what we’re going over right now. Okay. Actually the FAQs. What’s best to, yes. Yeah, let’s do FAQs. You could do it with variables too, but it didn’t need to be done with variables. So this is a repeater. I’m gonna go over variables and FAQs because these are executed in two different ways for a very specific reason. The variables are always local to the frame and they never need to be a post. They never need a link. They never need anything else. So all we did here is create a clonable group. So there’s a double field group, a variable name, and a variable description, and in Metabox you can set it to be clonable, which means I can add as many as I want to. And Bricks will query them in a loop. So if you have three, Bricks will show you three. If you have seven, Bricks will show you seven. It does all of that automatically, okay?
1:33:38
So I’m gonna get rid of those. Now, what you’re gonna see down here, this is really, really, I think this is so interesting. I think this is just very, very like, the people on the front end will never know this is happening. It creates a seamless experience on the front end, and then on the back, it’s just, I don’t know. It’s really good. I don’t know if anybody else uses this technique, but I’ve been doing it like a lot lately.
1:34:08
So we need FAQs that are locally scoped to a specific frame. These FAQs don’t need to be searchable. They don’t need to be like, you’ll find them if you search them, because you’ll find that frame, because the answer is on that frame, but they don’t need to be in a FAQ directory, okay? But then there are FAQs, you can see them right here, that need to be site-wide and maybe even have their own taxonomy.
1:34:36
See these FAQs right here, this is a clonable group, right? So I can add as many as I want to. It has a question and an answer. And where will it query them? It’ll query them down here, right here in the FAQ section. I really wish I knew off the top of my head which one of these has an FAQ attached to it. Oh this by the way too I showed this in my other video. This is Admin Columns Pro or whatever it is. This oh my gosh on a site like this if you want to talk about absolute time saver I can see all the featured images right here I can change them from right here if I want to I can Change the lead text from right here without opening any frames. I can categorize them. I can give them a type I do not have to leave this screen You don’t have to open one edit go back open edit go back open like like a chump Right anytime you cannot be a chump.
1:35:40
Look at all the stuff and I can add more if I want to. I can see which frames have styled images. Okay. But I was looking for one with the FAQs. I’m not gonna be able to just find it because there’s only a couple. We just got started on this. Maybe it was like way early on. Let’s just hope. Let’s hope and pray. Oh gosh, okay.
1:36:03
Anyway, what you’ll see here is one single, oh, I can just open the template. Duh, I always open the template. All right, so I’m gonna go to templates. Let’s go to, we’re looking for single, frame single post right here. Okay, we’re gonna edit this with bricks. And guys, this whole site was built with frames, by the way. Like every, this hero is a frame, the cards down here, these are frames right here.
1:36:30
All right, so let’s go down. Oh, you see there’s a video too, right? Oh, I didn’t see a video on those other frames because there’s no video for them, right? So it just doesn’t show you the video. But if there is a video, there’s a custom field for that. We pop in the ID of the video and it just magically appears on the page. Same with this query loop compatible. We should probably reopen, I’m just bouncing around a lot.
1:36:54
We should reopen one of the frames posts. Just so you can see the custom fields again. Let’s do that first overview, then we’ll go check out the FAQs. So there’s the video ID right here. You could choose whether it’s query loop compatible or not. That’ll show or hide this badge right here. Okay, then you have your variables, so we saw where we can add those. Your accessibility notes can be added here.
1:37:20
Hey, does this card use clickable parent? Yes or no. Does it have hidden accessibility text? Yes or no. And that’ll show different things in this frame whether or not they exist, right? Right here. So this frame uses the clickable parent technique. So there’s a little notice. And what does this, why does this need to happen?
1:37:39
Because people need to know how that clickable parent technique works. So it’s gonna alert you that this frame uses clickable parent, and it’s gonna give you a link to the documentation on clickable parent. Same thing with hidden accessibility text. You need to know it exists. What is it? Why does it matter? How do I edit it?
1:37:55
Okay, so we give you a little notice, take you right to the documentation for what that means. All right, here’s your FAQs right here. So we see you have clonable group, but you also have related FAQs. This allows you to select global FAQs and attach them to this frame. Like for example, how do I, let’s see, how do I use the date, time, attribute and frames? How do I unlink category links with BricsDynamic data for my frames?
1:38:26
This can apply to many, many, many, many, many different frames. Do you think I want to write that question and answer manually over and over and over again on every frame that it applies to? No, I want to come in here and say, that question is related to this frame right here. But then I want the ability to, if somebody has a question about this one frame that doesn’t apply to any other frames, I want to answer that question right here, and maybe another one right here.
1:38:54
And then here’s what’s fantastic. This question and this question in the same accordion are two separate loops. This one queries the locally scoped FAQs. This one queries the global FAQs. For the user, they appear as one FAQ accordion, but for us, there are two independent loops inside the same accordion that allow us to show locally scoped FAQs and global FAQs on the same frame.
1:39:28
I think that’s fantastic. And so you think about like the architecture of, okay, well, we need this, but we need this, but for the user, they don’t need to know that it’s two separate things. They just need to see one thing that makes sense to them. This is how you kind of pull that off. Here’s your related frames right here. Okay, so that’s it. The HTML5, those had to be their own elements.
1:39:56
So you can see I come in, it’s like, all right, well we have another one we need to put in so we’ll open this date time so we can see oh look at this it gives you here’s all the frames that use the date time so far so far remember this is not fully built out okay now where’s where’s the URL where are we going to take the person okay well we can take them to the Mozilla documentation as you saw or we can take them to internal documentation. We can even say whether this is a tag or an attribute, and then do conditional logic based on whether it’s a tag or an attribute.
1:40:37
So this is how all of this is set up. This is like I said a minute ago, using WordPress as a CMS. This is what it looks like to manage content and architecture and not turn WordPress into a flaming junk drawer disaster. And I can’t tell you how many sites I’ve audited where it’s like, oh my gosh, what have they done? And it’s an absolute nightmare. You don’t want to build sites like that, okay? And this is the kind of stuff when you get a complicated website.
1:41:09
Some people ask, what makes a website go from 15,000 to 25,000? Well, not effing it up is one, not effing it up. All of this is extra work to set up. See, everybody wants to talk about how fast can you build the website? I don’t care, because if you build me a disaster that I can’t manage and maintain, why should you get rewarded for, oh, but I built it quick, right?
1:41:40
Yeah, you built a dumpster fire very fast. You throw a bunch of trash in and you lit it on fire. Congratulations. Now, if we want to build it right, it’s probably gonna take longer. But I think we can all agree, how much more value is there in a dynamic website that’s properly structured and organized, that can be properly managed and maintained, that you can easily add new content, take away content, edit content.
1:42:07
And the amount of work that does not have to be done manually going forwards, it’s just, it’s night and day. And the value is what, 3X, 5X, 10X? It really depends on the application, but there is so much value in doing it the right way. All right, how do you sell CPTs to your client? You don’t. That’s a really good question. It’s a really good question. You don’t.
1:42:33
You don’t sell CPTs to your client. You don’t sell database. You don’t sell technical stuff to them. What you sell them is experience, expertise, I know how the site needs to be built, and then you sell them the idea that if they go hire somebody else, there is a strong possibility that what could be built is a dumpster fire of a junk drawer. And that is going to be a nightmare for them. It’s going to be a disaster.
1:43:03
It’s going to cost them tens of thousands of dollars. We’re going to build it the right way. Now I’m not you don’t need to know how every bit of the sausage is made. We don’t have to get very technical about well, it’s going to be CPTs and there’s gonna be bidirectional relationship. If you wanna make a client’s head just start spinning, like, I have no idea what’s going on here. That’s the way to do it. You start talking super technical, you start breaking it down for them.
1:43:27
They don’t know, they don’t need to know. All they need to know is, there’s a wrong way, and there’s a right way. And we’re gonna do it the right way. And it costs more to do it the right way. And you’re free to go to hire anybody else in the world that they want to do it the wrong way. Fine. Now, the question is, how did they know if they’re going to be doing it the right way or the wrong way?
1:43:48
Well, if you want to be educated on how it all works, then that person should be able, number one, to communicate it, and two, willing to communicate it. Okay, if a client wants me to talk technical, they’re like, no, you’ve got to tell me how it’s going to be. Okay, fine. Let’s go through it. We’ll do it. No problem. In my experience, most don’t want to.
1:44:08
They just want to know based on the entire sales conversation that they can trust you. You know what you’re talking about and that you’re going to do it the right way. Because you’re the one educating them in the sales conversation on the fact that this could be done the wrong way. And it’s going to be really expensive if it’s done the wrong way. We’re going to do it the right way. And as long as they trust you, they don’t need to know all the other details. They’re just like, this guy knows what he’s talking about, we’re going with him, okay? So it’s just part of the education process of the sales conversation.
1:44:37
All right, two times queries I assume, one for checked items, then the query for unchecked items. How do you change the order of the cards if they have the banner? Okay, so there’s a few ways to do this. Let me see if I remember how I did it exactly. So we’re gonna go to, I think we could see it on, I’m really starting to lose voice here. All right, let’s go to, where are we?
1:45:00
Where are we? Oh, well, starters, let’s not be on the local site because that does not help us. Okay, let’s go to pages. Now we’re on the real site. All right, we’re gonna go to, and I bet the components is an archive template. So we’re gonna go to the archive template for components, edit with bricks. Okay, let’s see if we can find it quick, because it might be in code box too.
1:45:30
All right, unfortunately you see the ribbon like this in the builder because it uses a data attribute and bricks, Thomas if you’re watching, please make bricks render data attribute styling in the builder. That would be super helpful. It does not currently do that. Okay, so let me think here. Browser frame. Let me go, let’s check out code box just a second. I don’t know where this was. Why am I on the local side again? Let’s stop doing that.
1:46:09
Okay, let’s go back code box. God, these cold suck. Okay, oh, by the way, ribbons are coming to automatic CSS, not in this update, but in the next update. We need the global style sheet. Frame, accent, blog, facets, pricing, library. Here’s how the labels are done right here. So not it’s not a lot of code. Did have to do quite a bit of thinking on this though because my actually let me open the other one because I did want to point this out as well. Because I knew someone would ask about this. So frame single post.
1:46:58
The, you know, the Figma bricks, that kind of badge. So what a lot of people would do, what I even thought about doing initially was I was like, and then I was like, no, I don’t want to do that because I would be a chump. You create two Figmas, two Bricks, two Gutenbergs, and you need two of everything. And if it’s active, you hide the faded one and show the one that’s not faded, right? And then vice versa.
1:47:24
But anytime, kind of general rule of thumb, anytime you’re creating a duplicate object for that kind of purpose, you’re probably being a chump. There’s probably a smarter way to manage it. So what we did is, you know, if you toggle Figma, and the reason I was trying to do it that way first is because we were using a radio field. Then we switched to independent toggles. Independent toggles, when it’s toggled, it gives you a value of one. When it’s not toggled, it gives you a value of zero. And so we pass that, let me go here, Figma on, OK, style, attribute.
1:48:04
So we pass that to a data attribute. So this is the one or the zero. Then over here in WP code box, it simply says, if that equals one. So if that data attribute, platform support equals one, then and it has the class of platform label, then we change the opacity to one. So all of those are opacity 0.5 by default. They’re just all point, they’re at half opacity by default. That’s their default state. Then when this value of this data attribute gets passed to them, they become opacity one. And then here as you see, and the ones that use the ribbons use the same technique. So when it has a value of one, which is on, it also gets an order of minus one which brings it to the front of the line.
1:48:51
Okay, and then it also turns off the grayscale filter. So not only do they have a 50% opacity filter, they have a grayscale filter. So that when they get toggled on, they appear in 100% and, gosh, is there none open? 100% and in full color again. See, it’s no longer grayscaled out its full color. So that’s that. And the ones with the ribbons work exactly the same way. So when it has the ribbon, it gets an order of one, this is the opposite, one will send it to the back of the line, zero is the default.
1:49:28
So one sends it to the back of the line, negative one will send it to the front of the line. Hope that answers your question. All right. I mistook the question to be about BRIC, Gutenberg, and Figma checkboxes. Okay, yeah, so I showed both. It’s the same technique for both of them. All right, let’s see if there’s any other last minute questions before my voice is completely gone.
1:49:50
Can you create filter facets in MetaBox? No, that is done in WP Grid Builder right here. I always look for the WP. I see the WP code box I’m like there’s no WP grid builder so it’s just grid builder right here so let’s go over to facets so you get a lot of default facets but then you can make your own facets really easily so I can go create a facet which we can just look at like frame category so I’ll edit that facet so here’s the frame category facet we We can go to asset, we can go to behavior. It’s set to filter using a dropdown.
1:50:32
So I’m just showing you how easy this is. You don’t need to know any coding, no nothing, okay? How do you want it to behave? I want it to behave as a filter. What kind of filter do you want? Remember I talked earlier about how, hey, those could be radios, they could be checkboxes, they could be buttons, I think they were buttons. They should have been radios or checkboxes. I chose drop down. Okay. Then we come down here. What are we filtering? Well, we’re going to filter by taxonomy. What is the taxonomy? Well, it’s the frames categories taxonomy that I created right there.
1:51:03
Then we’re going to come down. You can add other additional filters to it if you want to. You can add other features if you want to. You can, how many choices are we filtering by or how many choices do you want to show? How do you want to order the results? All this stuff, all this by default is fine. Literally I went click, click, click, click, and then I hit save changes. And then inside of Brics, you can easily add the, I would have to go to the library page.
1:51:31
But WP Grid Builder has a native Brics integration, so that all you do is add a filter like a facet onto the page Just like you would add any other element in bricks and it just asks you which query loop Are you attaching this filter to and it even shows you the query loops that are on the page and you’re just like that one And then you hit publish and it’s done and it just works like magic This is why I say WP grid builder is like insane value just for the fastening capabilities. Okay, I officially have like zero voice left. Thank you guys for being here today, spending the time, dropping the comments, drop some likes before you go if you’ve gotten any value from this stream. I’ll be back next week.
1:52:17
We’ve got new ACSS coming out, new frames release coming out. My brand new website comes out, which we’ll take a look at next week. Love you guys. Thank you for your support. I’ll be back soon. Peace. Love you guys, thank you for your support. I’ll be back soon, peace.
