WDD LIVE 033: Web Design Critiques / Q&A / AMA

Hey, hey everybody. What is up?

We got David in the house. Tyree, welcome.

Jason, Andre. Andre is here.

Zale is here. Sylvia, Squinting Yeti, good to see you.

Calisthenics Ireland, good to see you. It is another Wednesday.

It is 11 a. m.

That means it is time for WDD Live. If you are new here, here’s what we do at WDD Live.

We do in-depth web design critiques. We look at everything that makes a website successful, or in many cases, unsuccessful.

And we learn from those things, we learn how to make better websites, and then you take what you learn here in WDD Live, and you bake it in to your next website. These things should be top of mind, right?

So as you’re building your next project, or maybe even you’re working on a project now and so you watch the stream, you go back to continue working on the project, you make some tweaks and adjustments based on what you learned in the latest WDD Live. We also do a bunch of Q&A.

We do an AMA segment, which is just Ask Me Anything, and when you ask questions, you get to get help on a variety of things. I mean, you can ask questions on SEO, PPC, copywriting, marketing in general, anything that your client has asked you that you’re not sure about, you can throw those in here.

You can talk about business, pricing, statements of work, process, hiring. I mean, it’s up to you.

It is AMA, Q&A, ask me anything, whatever you guys want to talk about. Today’s agenda, we have two website critiques that we are going to do.

Then I’m gonna give you a sneak peek of a frame that I’m working on. What is this thing on my mic that’s like buggy?

It’s like a hair or something, gosh. How am I, it’s like in my vision.

We are going to be sneak peeking a frame that I’ve been working on. We’ve covered, Frames has covered so many, it’s like tons and tons and tons of all the basics, like all the basics have been covered.

We’ve released some intermediate frames as well, for sure, and a few advanced frames, and we’re gonna be doing, you know, moving more into the intermediate and advanced frame territory now, because so much of the basics and foundational stuff has been covered, we get to really start having a lot of fun with frames. And one of the ones that I’m going to show you today is actually a frame, I mean, any website that uses a schedule of any sort, the frame actually came from, I mean, I’ll tell you more about it when we get there, but it actually came from one of the needs of one of my clients.

So it’s going to be a very, very useful frame, and it does present a lot of challenges. And we’re going to talk through some of those challenges and how we’re going to solve them.

And this particular frame is actually going to be an entire training in the inner circle. So I’m going to teach how to build this exact thing from scratch.

But we’ll, we’ll talk about that when we get there. And then, and then I didn’t plan this, but there’s breaking news guys.

There’s breaking news. Bricks 1.9. 1 was just released and it’s a bit of a juicy little update.

And so we’re gonna we’re gonna take a little pit stop a little side quest. We’re gonna if you will a little side quest into Bricks 1.

9. 1 and take a look at a couple of things that interest me caught my eye.

One of the things is a feature request that I put in like a week ago and it’s already here, which is absolutely fantastic. And it’s a really, really super useful feature request.

So we’ll take a look at that. And then after the little side quest and the frame sneak peek, we will open up to Q&A and AMA.

That’s a lot to cover. That’s a lot to cover.

I also don’t want to be here for like two and a half hours. I have, I have tons of work.

I got a video on Monday published. I got a video on Tuesday published.

I had to record this summit video. I’ve got inner circle videos that I’ve got to record.

And guys, I got – I mean as if I’m not busy enough, I got suckered somehow into being the head coach of my daughter’s softball team. And – but I got to tell you, the problem with this is – the problem with this is if you say, Kevin, do you want to coach this peewee softball team?

It’s peewee. It’s peewee, it’s peewee, you know, they’re eight, nine years old, whatever.

Actually, I put my five-year-old on it too. I was like, hey, you gotta be able to hit.

She wanted to be on the same team as her sister, right? I was like, you gotta be able to hit and you gotta be able to not play with the dirt, okay?

If you can not play with the dirt and you can hit, you can be on the team. And, oh, she’s crushing it.

She’s like, yeah, she’s a little slugger, okay? Now not playing with the dirt.

That’s another question We’re still working on that part, but she’s a slugger right all these other girls at her age in t-ball now She’s hitting she’s hitting real pitches, okay? But here and this is that you can already see me talking about it This is the problem when you’re like Kevin do you want to be a the head coach of the softball team?

I can’t just be like yeah, and then kind of like show up here and there. No, no, no, no, no, no, no, no.

I’m too competitive for that. I’m too competitive for that.

So, I mean, we’re doing, we got practices. We got games, like there’s like three games a week, okay?

There’s practices in between. I mean, we’re running this thing like, it’s, we’re gonna dominate.

I mean, that’s the bottom line. You know, we’re gonna go in and dominate.

So if you assign me, if you assign me to a role like that, we’re gonna go dominate. Okay, so here’s the thing.

We need to get right into this. These reviews might be, if there’s nothing super, super valuable or interesting that we’re coming across, we might not go as long on each website because I do wanna get to the sneak peek and I do wanna get to the BRICS 1.

9. 1 and I do wanna get to Q&A AMA.

We gotta try to fit everything in. It’s a tall task, but we’re going to get it done.

All right. Let’s see if anybody’s in the chat here.

I want to see the softball team website. No, it will not have a website.

It will not have a website. That doesn’t give us any value, right?

That doesn’t help us win games. All right.

Yes, yes, yes. Yeah, they didn’t have anybody else.

I did. I was an assistant coach last year, and they had more kids this year and they had to split into two separate teams.

They didn’t have a coach for the other team. So I decided to step up.

I mean, if there’s an opportunity to compete, we’re going to compete. You know what I’m saying?

Okay. Just checking the chat real quick.

Chat, chat, chat, chat, chat. Okay, let’s get into it.

Let’s get into it. We are going to start with Just Bath.

Let me get some screen share going here. All right, this is what we’re working with out of the gate.

Just Bath tub and shower systems. We’re gonna do our no scroll test first.

I will say there’s a lot going on here above the fold. There is a lot, quite a bit going on above the fold here.

So obviously this is a bath and tub remodeling. And we can see this here, bathroom remodeling in PA, MD, VA, DC,

0:07:20 okay?

0:07:21 Experience top-tier bathroom remodeling with Just Bath USA serving Pittsburgh and surrounding areas.

We transform your vision into a luxurious reality. All of our products are custom fit and backed by lifetime warranties.

So what do we all see, I think, right off the bat is we’ve got a transparency issue right here. This is a no-no.

We don’t want to be using a transparent background here when we’ve got this trying to overlap on top of this slider right here. There’s just it’s too much happening in this area right here.

Too much. Let me like this area right here.

We’ve got a bit too much going on. Makes the text hard to read.

The image is now sliding behind my text. So just make this solid, right?

Let’s go in here and see what’s going on. Now I will say, and by the way, if you submit your website to WDD Live, right, it lets you know what to expect.

And you guys know, this is called web design for Dommies, right? It’s like we look at the Dom, this is the Dom right here.

If you’re new here, we look at the underlying code quality. We look at things like accessibility.

This person put in the name field, in parentheses, avoid the DOM, or something to that effect. They were like, please no DOM.

That’s what they said. And if you tell me that, guys, I’m going straight to the DOM.

Okay, I’m going straight to the DOM. I gotta see what’s happening here now.

Now you made me super curious, right? All right, so here we are.

We’re already in the DOM. It’s really just to fix this thing right here.

Okay, so there you go. So the background color right there, let’s just go white.

Okay, that’s the easy fix, right? So this is what should be happening here.

Avoid the transparency in that situation. All right, so we’ve got call today.

Does this open an actual, okay, that’s interesting. That doesn’t actually do what it says.

All right, that opens a off canvas over here. Call today.

Does this button call? Okay, that button actually calls.

But I would avoid, this should say like get a free quote. Buttons need to, if the button text says something, it needs to do that thing.

So that’s going to be a little bit confusing for people. All right, what else do we need to look at on our no scroll test?

How about our navigation? Let’s see what’s going on with our navigation.

Okay we’re going like I would call this like maybe a pseudo mega menu kind of situation. It’s not like a traditional mega menu, but it’s not a traditional drop-down either.

Okay we’re gonna check out the accessibility of this in just a second. And I didn’t even look when I was in the DOM.

Is this oxygen? Yes this is built on oxygen for those of you who are curious.

And is it using automatic CSS? I don’t know.

Let’s see. Let’s go in here.

It looks like it is, okay. But it’s got some other classes going on here, like BoxShadowTL.

That’s not a CSS class. I mean, I guess we could view source here.

Yeah, automatic oxygen CSS. Okay.

All right, just getting a lay of a feel of the feel of what’s going on here in the environment. Okay, let’s let’s check first accessibility on this navigation.

Okay. Activate.

I can go in. Okay, it goes to the next one.

Okay, all right decent decent okay oh where we go where we going next uh-oh uh-oh hold on we’ve lost where are we now we’re on we’re on a telephone link but where is the telephone link I do not see it I don’t I don’t have any indication of what I’m currently selected on now I’m on services wrap why am I in services wrap I’m gonna keep tabbing now I’m on a link and I don’t know oh there they are down here, down here, down here. Okay we got a little bit of work to do on our focus styles because of the way you’ve styled these boxes down here.

It’s interfering a bit with the focus styling. We’ve got a tab situation that’s not accessible.

We’ve got a slider image situation that is not accessible. Doesn’t appear to be.

I don’t know if I’m on a, no, oh dear. 0:11:46

Yeah, I don’t know where I’m at. 0:11:47

Oh gosh, okay. Now we’re on somebody’s Instagram.

Okay, so the accessibility leaves a lot to be desired. Let’s just say that.

We need to do a lot of work on the accessibility side of things. All right, let’s continue down.

Our bathroom remodeling services from tub to shower, shower to tub conversions, hmm. And full luxury bathroom remodels, Just Bath can handle any custom bath requests.

I don’t, this is so wordy for you. Did you try to do, did you think this was like an SEO benefit or something?

Why, from tub to shower or shower to that’s, you know, it’s, it’s a given, right? You could go either direction.

I don’t think you have to say both of them explicitly. We have hundreds of custom bathroom designs to fit your style, freshen up your bathroom or completely redo it.

The possibilities are endless with just bath in charge of design and installations. We’ve got bathtubs.

Oh, I’m not real fond of this right off the bat. I’ll just tell you, okay?

Here’s the thing, if I like hover over it, it’s like, what am I selecting again? Like, I guess I kind of see a photo of it, but like, here you go.

Here’s a shower. Here’s a shower, right?

I don’t like the fact that the text goes away. They’re like, what I’m selecting, I have to, if I forget, you know, here I am looking at this, you know, great image back here, whatever.

And I’m like, wait, what again? Am I clicking on, what am I selecting?

Well, all the text is gone. All the indication of what I’m actually choosing is now not there.

So while this effect might be cute to some people, in terms of UX, user experience, it causes a potential problem, right? I’m a big fan of retaining the information that the user is about to click on.

So I would say to make an adjustment there. Like you can get rid of those text things, but leave the heading.

The heading should stay inside of this card so I can see exactly what I’m choosing when I choose it. And then I will say about the general style.

If we’re gonna comment on the general UI design of this website. To me, if I had to guess, I don’t know anything about the backstory of this website.

I didn’t even look to see who submitted it. I’m just pulling up the websites, okay?

So honest opinion is this is very like, you know, 2090. And it seems to be, if I had to guess, it was like a developer also did the design.

Not a true designer who is on the up and up when it comes to modern design trends and things like that. It feels old, it feels outdated, it feels a bit cluttered, it feels like this box shadow thing, or double layered whatever’s going on here.

That’s almost like, that almost feels like a bit more like early 2000s, right? Maybe 90s, I can’t even remember.

I’m not good with dates. What it doesn’t look like is 2023, I’ll tell you that right now, okay?

So the colors, it’s like, all right, I don’t know, I don’t know. We see like the background image here.

This is not to me a background image that a great designer would ever choose. This kind of gradient on the buttons, it feels all very old style.

Now here’s where I’ll turn to the chat. I’ll turn to chat and say, do you guys agree?

What’s your take on the UI here? Does this feel outdated to you or does this feel modern to you?

And we’ll just see what everybody says. Yeah, so Ruben says very 2000s style.

Let’s go on down. I’m not a huge fan of like, I’m just not a huge fan of gold in general.

There’s very few sites that use gold as a color that I’m like, damn, they did that really well. You know, it’s one of those colors that’s very easy to mess up.

And it does not look good. Like this to me this gold looks a little bit I don’t know if it’s too yellowy or too muddy I don’t really know how to describe it but it’s just not great it’s just not it as it you know gold sometimes can obviously scream like luxury right maybe that’s what they were going for but to me it’s this this particular version of gold just doesn’t really give me that vibe.

It gives me like an almost there vibe. I don’t know.

0:16:30 Okay, it feels outdated,

0:16:32 but the bathroom pictures also don’t feel very modern.

I know this right here, this is one of those, they do a lot of like, I don’t know if they’re using inlays or whatever, but I can tell that pattern, like it’s very, that’s like the latest trend. At least over here in the United States.

They’re doing this all the time with bathrooms now. It’s hard to tell honestly because these pictures feel a bit low res.

They’re far away, like tub and shower. Okay, I’m looking at a tub and shower but it feels like it’s 50 feet away from me and I’m looking at a tiny version of it.

So these images again, it’s like, hey, we can do this cute effect where we have an overlay and an image comes in. But then if we look at it, it’s like, but does that provide any value to the user?

They can’t really gain any information from this photo. We lost the actual name of the thing that we’re clicking on.

I mean, the cons list is just adding up and the pros list is, there’s no benefit to what’s happening here. So this would have been an idea that I would have nixed had it been presented to me.

And like just water, water. I mean, this is like, I don’t need to see this.

This is boring. This is, um, yeah, I don’t, I don’t know.

0:17:46 Uh, okay.

0:17:47 Let’s go to this.

This definitely feels outdated. This, I mean, what, what’s going on here?

Our process. I mean, is this supposed to be somebody calling the schedule an appointment?

We need a different photo here. We need a different photo here for sure.

Uh, Oh, I see. It’s it’s the, there’s a photo to go with each step.

Okay, let’s see. Book an appointment with us.

All right. I would still change that photo.

Plan with our design consultants. Okay, this is a stock photo.

This is fake. 0:18:18

Feels fake. 0:18:19

I mean, it’s, you know, it’s, I don’t know. We need a different photo.

This feels real, but it’s all pixelated and everything Measure and build your dream bath, okay This is not step three. I measure and I’m not doing it right so I would I would reword this here Install your new bathroom outfit.

I’m not am I doing the work I’m confused now like are y’all doing this or am I doing this? And that needs to be a different photo for sure.

So we need to rework our text here, we need to rework our photos here. Here are the, yeah, I’ll tell you this right now, this is the current trend.

This is the current trend in, at least in the US. This is what they’re doing to every freaking shower that they can get their hands on over here, okay?

And they’re charging mad money to do it. All right, I don’t really have a problem

0:19:12 with this gallery right here.

0:19:13 You know, this gallery’s fine.

Okay, let’s go down, why choose us? Notice that, you know, we had to get very far down, right?

0:19:21 Very far down.

0:19:23 Before, one thing I’m looking for constantly on websites is, and this is just like marketing 101, okay?

What is your unique selling proposition? What is your USP?

Why are you different? Why are you unique?

Why should I pay attention to you? And if we do a quick, just grade on USP, we just go section by section and ask ourselves, were we informed of the USP in this section?

Were we informed of the USP in this section? Were we informed?

And so you look here, it’s like bathroom remodeling, okay? Very just tell it like it is, factual headline.

Experience top-tier bathroom remodeling, serving Pittsburgh, blah, blah, blah. We transform your vision to a luxurious reality.

Everybody says this. All our products are custom fit.

Okay, so maybe this is a. .

. But I don’t know.

I think that’s everything in the bath space. I mean, backed by lifetime warranties.

I mean, if everybody can say this, then we haven’t said anything unique yet. There’s no unique angle on what’s happening here, which basically begs the question, if you don’t understand why a USP is important, people are weighing their options.

There’s this company I can choose, this company I can choose, this company I can choose. Why, which one should I choose, right?

Why, what is the difference? And your job is to communicate that difference.

Your job is to tell them why you and not someone else. Because otherwise, I mean, what I should just randomly change.

I just throw darts at the wall. I need to know what are the differences.

And then so we get to this section right here and we see, you know, it’s no, I mean, you have, OK, it’s the same same copy I see everywhere. Same options I see everywhere right here.

OK, so I come down to process, book an appointment, okay, that happens everywhere, doesn’t it? Doesn’t it?

Isn’t step one with every, every company I could go to, I, that’s probably step one. Okay, so plan with our design consultant.

I’m guessing that that’s also step two with almost everybody that I could hire. So this isn’t really doing the job of unique selling proposition.

Once you commit a one day remodel or luxury bathroom modeling project with Just Bath, okay, so this, this right here, this is a potential unique selling proposition. So, if I hire, let’s say there’s 10 companies to choose from, and nine of those companies, it might take a week for my bathroom to get remodeled.

But this other company says, no, no, no, this can be done in one day. Then that is a unique selling proposition.

Okay, that is something that these other companies cannot say, cannot actually pull off and execute. And it’s a promise.

It’s a promise that has a lot of value because I don’t want my bathroom to be out of commission for a week. I want my bathroom to be out of commission for a day.

That sounds a lot better to me. That’s a lot more valuable, right?

If this is in fact true for every project, this needs to be front and center. 0:22:27

This needs to be you. 0:22:28

So the concept that I refer to all the time is a journalist concept, right? It’s called bury the lead.

You’ve buried the lead. You’ve buried the exciting thing.

You’ve buried the important thing somewhere else in the article. And right here, we’ve buried the potential unique selling proposition four sections down and three tabs in, which means a lot of people are not gonna see it.

A lot of people are not gonna know that this is the possibility, right? So, you know, up here in the main heading of the page is an opportunity for you to talk USP.

Get people, wouldn’t that, okay, tell me this, which one would make you want to read more of this website? Bathroom Remodeling and PAMDVADC or one day bathroom remodeling.

Like just insert that one thing and it’s suddenly this headline becomes much more intriguing, much more intriguing. You guys can do this in one day, you can pull that off.

I need to know more, obviously. And if I’m comparing five different companies and this one saying it right there front and center, one day bathroom remodel, hey, hey, you got my attention, at least.

I’m, you know, it’s not a guarantee that I’m gonna choose you, but you definitely have my attention. And that’s the whole point of an H1 heading, is to grab people’s attention, make a promise, have a unique selling proposition, say something that everybody else isn’t saying, get them to read the rest of the page, right?

Okay, what do we got going on in chat? One day, definitely a game changer yes for sure the tab section feels especially weird because we need to read it from right to left correct yeah the options are over here right the the option should really be on the left-hand side and then the content should be on the right-hand side especially because you’ve also got something overlapping stuff going on here it’s hard for the eye to track really what’s going on right here.

And then the heading is to the right of the, yeah, everything is, it’s almost like a, yeah, an RTL situation going on here for no reason, because this is in English. So yeah, we need to get the tabs over here on this side.

All right, let’s see. Why choose us?

Here we go. Just Bath provides high quality service with a local touch.

My gosh. I mean, guys, close your eyes.

Close your eyes. And I will say the name of any bath remodeling company and I will read that sentence.

And I guarantee you have no idea that it came from Just Bath. I mean, everybody can say this.

Everybody will say this. Everybody does say this.

So once again, you know, if you’re writing copy, I’m trying to package this up into a practical scenario where you guys can actually improve your copy. Just when you write a sentence, just pause and be like, is everybody going to say that?

Is everybody in this industry going to say exactly that? Can they say exactly that?

Would they about themselves? Nobody’s going to be like, hey, we provide low quality service, dog.

I mean, that’s what we do. I don’t know about you, but we provide low quality service.

And we’re not local, you know, we, yeah, we’re not even near you. So I don’t even know why you’re here, right?

Like, no, everybody’s gonna be like, yeah, we provide high quality service and we’re local to you. Right, that’s why you’re here.

Everybody’s gonna say that. So what is the value in repeating that and saying that again?

Like, do we have the capability of saying something different here? Stop living with an outdated bathroom that no longer meets your needs, okay?

Give us a call today to explore your one day. So this is, you guys see my pet peeve with this?

Why choose us? And then I’m just not gonna give you a reason.

I’m not gonna say anything that’s different from anything else you’re gonna read, even though you’re acting as if I asked the question. And I am wondering, you know, why should I choose you?

Thank you for giving me no reasons. And look, we didn’t even mention the thing that we decided was super important up here.

Why wasn’t that mentioned? If you can’t say something different, why are you opening your mouth?

That’s the question, right? In marketing, don’t show up and just say what everybody else says.

That’s not marketing. That’s not what marketing is.

And by the way, you know, it’s, this, just to tie everything together, this is how, like, marketing can actually influence companies and products to be better. Because imagine you’re sitting in like a boardroom situation and you got all the leaders of this company gathered round, okay?

And you guys are talking and really you guys are saying, we’re kind of just another bathroom remodeling company, right? What can we start doing differently to make us a better bathroom remodeling company?

Well, we could use more materials or better materials, right? If we’re using cheaper materials, like that could be one thing that comes up.

But another thing that comes up is somebody raises their hand and go, hey, hey, hey, hey, I have an idea, I have an idea. Everybody in this area takes them a week to remodel a bathroom.

What if we can develop a process where we can come in, because we do planning so well, we do measuring so well, we’ve got a crew that’s dialed in, we’ve got this process to where we can in and remodel the bathrooms in one day. And why don’t we make that our promise to people?

And if, see, if that’s the situation that’s happening, it’s like, this is a service upgrade that came from a marketing discussion, right? You’re sitting around a table going, look, guys, we have to be able to say something that nobody else is saying.

What is that thing going to be? And this idea of the one day bathroom remodel comes up and suddenly that transforms this company’s process, it transforms this company’s promise, their mission, their offer, everything, right?

And now suddenly when we make a website for them, we know exactly what we wanna say. That’s why you’re supposed to have these brainstorming sessions.

If you feel like, if this is your project, right? A lot of web designers don’t consider themselves, and this is a huge problem, they don’t consider themselves to be consultants in these areas.

I mean, if I am building a website for somebody, I am not just going to build another bath remodeling website and type in text that I’m going to see on every other website. You know what I’m going to do?

If the copy was provided to me, which it shouldn’t be, right, we’ve already covered this, right? You should be leading the copy for your clients.

And this is why you should be leading the copy for your clients, because this is what they will give you back. But let’s say it is a situation, for some reason we weren’t able to do the copy, or they hired somebody else to do the copy who sucks and sends this generic copy back, whatever.

I’m building the website, I get on the phone with a client, and I’m like, hey, I just gotta be honest with you, this copy is not gonna convert anybody. And I’ll just foreshadow what’s about to happen.

I’m going to build this website and we’re going to launch the website and then we’re gonna run ads or we’re gonna do whatever we’re gonna do to get traffic to this website. And your conversion rate is gonna be a lot lower than it should be, a lot lower than it should be because this copy is extremely generic and that’s the most important thing on the page.

And you know, I don’t want to get blamed for the website not converting well. I just, I’m giving, I’m bringing this to your attention basically, that I do not approve of this copy.

This copy needs to be fundamentally reworked. And then if needed, I will go in and give them the examples just like we’re talking about here.

And then they’ll get it and they’ll be like, oh, oh, it clicks now. Okay.

Let’s redo some of this copy, whatever. You cannot just do what they give you and just say, oh, box checked, I designed a website.

You’ve got to be an advocate for your client’s success. If you’re recognizing that the photos that they’re giving you are trash, you have to bring that up.

You could say, hey, this really does not reflect well on your company to have low quality photos. Now I’m not saying that about this, but I’m saying in cases where they give you bad photography, you’ve got to point that out.

When they give you bad copy, you’ve got to point that out. When their designer, if a designer is at the helm here, gives you a design that looks like it’s from 2007, you need to point that out.

You need to bring that up. You need to be an advocate for your client’s success before you get deeper and deeper and deeper into the project, okay?

Because bad copy is not your fault until you put it on the website and hit publish. Then you’re part of the at fault team, okay?

You allowed that to go forward without saying anything. That kinda is your fault now.

What a lot of people do is they build a website, the conversions suck, and then after the fact, there’s this conversation about, well, why did the conversion suck? And the web designer goes, well, I don’t think the copy’s very good.

Well, you’re the one that put it on the page, dog, and you didn’t say anything when you were putting it on the page. That’s kind of a problem.

Like, you’re now in the at-fault team, okay? So anything that you see as like a potential issue, you better bring that up during the web design process.

Don’t be like, oh, well, that’s not my area, so I’m just gonna do my thing, and then if everything implodes later, I’ll just be like, oh, well, that wasn’t me, right? That wasn’t my responsibility.

You did it. You put it on the site.

Okay. It went through you and you didn’t speak up.

That’s a big problem. I have a big problem with that.

And so be more of an advocate for your clients in this regard. All right.

Riaz says, Hey Kevin, sorry I’m late. No worries.

Just glad you’re here. Glad you’re here.

All right. Derek says, wake me up when his rant is over.

I mean, if you’re not getting value, Derek, you don’t have to be here. If you don’t feel like this is a valuable rant, that’s fine.

It’s fine. I don’t understand.

I don’t understand this comment. Okay.

We have to go to the next website. We don’t have to go to other pages here.

Once again, there’s enough to work on right here that we don’t even have to go to the other pages of the website. Sometimes we don’t have stuff to talk about on the homepage, hey, we can go to other pages and see how good those pages are, right?

But this is, there’s enough here. You’ve already got enough to work on, to improve.

We don’t have to go any deeper into the website. Alright so let’s go on to number two.

Let’s take a visit in the chat first. I see some people posting some questions.

Hold your questions until the Q&A segment because I’m gonna have to scroll way too far back to find them. All right let’s see your koozie fell down in the background.

I don’t know what that means. I don’t know what that means.

Okay the content of the off-canvas should be aligned to the top not centered. Just going through chat real quick before we move on.

Oh Tyree does not like the font. I feel like a lot of people choose this font when it’s um it’s like we need an elegant font.

We need an elegant font. Rob says photos are sliding too fast.

I do agree with you, Rob. It feels like, oh, it’s like rushing me, my gosh.

Like, yeah, I naturally want to like slow that thing down. Okay, what else we got?

I’m looking for any other good comments on this particular website so that everybody, because, you know, this isn’t just my opinion. It’s everybody wants to be involved.

So if there’s any good comments on the website, I’ll put them up. Um, okay.

0:34:34 A lot of soft, a lot of softball comments.

0:34:36 Uh, okay.

0:34:37 Let’s see.

0:34:38 I like this one from calisthenics Ireland.

For anyone thinks Kevin got dragged into this, he’s talking about a head coaching the softball team. Please.

This guy is so competitive. He signed up himself.

Uh, no, I didn’t. I did not volunteer.

But it wasn’t that hard to convince me. Okay, it wasn’t that hard to convince me.

So you’re kind of right. Okay, whole feel is quite dated for me.

Sorry. Yes.

Choosing fonts can be a headache for sure, especially if you’re not a designer, I want my designer to handle that. The logo is interesting.

I like the logo. I didn’t really have any problems with the logo.

The typography portion doesn’t do a lot for me, but I like this symbol. 0:35:30

Okay. 0:35:33

Videos can help this website. I do believe that is correct.

The financing piece seems like an interesting difference for this business too. Nah, they, almost all of them offer financing.

And yeah, almost all of them. As far as I know, I’ve seen it constantly.

Same thing in like roofing. Definitely financing is a common thing.

Okay, I think we can move on. Test, testimony is not broken.

Somebody said to check mobile real quick. Let’s go here.

Okay, let’s get this out of the way. 0:36:13

This card is breaking right here at this break point. Oh, so there’s more text behind this card

0:36:18 from this card.

See this card’s text that’s supposed to be right there is actually behind this card’s text. So yeah there’s definitely some work to do on mobile.

That is the largest hamburger icon I’ve ever seen in my life. Did Bev have something to do with this?

Was Bev like that menu icon’s got to be bigger? That is the largest hamburger icon I think I’ve ever seen.

It is absolutely dominating the header. I’ll tell you right now, if you know, grandma ain’t missing that for sure.

I don’t know if they looked at the age demographics of this website, this users, this businesses user base. Oh dear, what’s going on here?

Got a definite problem here, definite problem. Okay, yeah, I mean, it’s, people tell me all the time, they’re like, don’t forget to check the mobile.

I mean, what are we going to uncover, right? That we didn’t uncover.

You’re either going to uncover some issues like we are here. I don’t like that these remain the same size and then these suddenly get wider.

That’s no rhyme or reason to that, it seems. But it’s just like, I mean, it’s mobile.

They either optimized it well or they didn’t optimize it well. There’s far more important things to look at.

I mean, if your copy’s bad, like I said last time, if your copy sucks, it’s not, the copy’s not going to suddenly get better on the mobile version. And that has most to do with conversions than anything.

The UI design is not going to suddenly go from 2007 to 2023 when we look at the mobile version, right? Like the mobile doesn’t give you a lot of extra value over what we’re already talking about and discussing.

That’s not a hamburger menu, that’s a Whopper. I don’t have a, maybe I do.

I don’t have anything for you. I don’t have anything.

I don’t have the little drum drum clash thing. Okay, we got to move on my friends.

Drug and Alcohol Rehab at Austin Pines Ranch is website number two. All right, no scroll test.

Now we see a design that C feels much more 2023. See how we just, it’s almost like we just got in our time machine and went from 2007 to 2023.

So it feels nicer, it feels more, and you know, the other, if you were going for luxury with that font, you can’t go for luxury with 2007 design trends, right? You’ve gotta, this would have felt much more, it’s like clean and warm and you know, hey, I wanna spend some money.

I wanna spend some money right now. The other thing was, it’s too, mm, did not feel good.

Did not feel as good, for sure. All right, Manny, yeah, Manny’s in the chat.

This is Manny’s website, Manny is in the chat. So our no scroll task, let’s see what we’ve got.

Right off the bat it just says, drug and alcohol addiction treatment, which is a very literal headline. Very, very literal.

Might like to see some lead text here to give me more to chew on. And I think, let’s see if we’re gonna run into the same problem of USP.

Let’s make that the theme of today’s WDD Live. How long does it take us to find a USP, a unique selling proposition?

Okay, let’s, we don’t have a lot to look at here on the no scroll test. We can see what’s going on with our nav.

Okay. Text size discrepancy between the main nav and the sub nav is a little much Does anybody feel like these are too small?

They need to be larger a little bit closer to what we have going on up here Or do you like what’s going on right here? You guys put your opinion in and let me know I feel like the arrows are a little large.

I don’t know. I mean, I know they’re roughly the size of the text here, but maybe they’re too dark.

Maybe my eyes are drawn to the drop downs more than the actual text. Maybe that’s what I’m feeling.

Maybe if we added a little, just a slight, let’s see what we can do here. Let’s get out of mobile mode.

Okay, where are we? First of all, we’ve got a Bricks website, we’ve got ACSS and we’ve got Frames.

Okay, so this is a Frames website. Okay, we got a little drop down action here, color, primary, all right, let’s keep it in the primary family and let’s do trans 70.

Oh, that’s gonna be for the entire, I don’t know if that’s just going to be the toggle, I think that’s doing everything. Yeah, that’s doing everything, not just the toggle.

Okay, so we can’t do that, can’t make that change there. Let’s just do a quick refresh.

All right. I don’t want to, yeah, this is the, yeah, that’s the SVG path.

It’s gonna be tough to figure out All right, we won’t mess with it too much right now. We’ve got a fill none on here, so we’re going to have to just investigate where the color is coming from.

I don’t know, I’ll let you guys say, like, do you like the nav or do you feel like these arrows should be smaller or the color toned down or some sort of difference, right? I don’t know, just feels a little in my face, I guess.

We’ve got a verify insurance button. I’m not 100% sold that that’s the best call to action, but we’ll see.

Manny’s here, I mean, we can ask him, did the client want this to say verify insurance? Did you want this to say verify insurance?

Was there any other potential CTA button text as an option that was discussed? Let me know in the chat.

I kind of like the, I like how the logo is very simple, very clean. Okay, we’re good so far.

Embark on your recovery journey with us. And then we have a very large photo.

I think the photo is, it doesn’t feel overly stocky. I think it’s a good choice as far as a photo goes.

What I would expect to see in a section like this is a video. So if there, and I know it’s like, all right, my client doesn’t have a video, so this is what we put here.

But I would be recommending to the client, hey, let’s put a really solid teaser style video here, or even a talking head video from the director of this campus, business, whatever you wanna call it. I don’t know if they have multiple locations yet, but that would be a thing to maybe consider.

Because embark on your journey with us, it’s great. The image gives us a little feeling, right?

But there’s an entire section here that doesn’t really give us any additional information about anything. It doesn’t really give us any value.

The entire section just gives us a little bit of a warm and fuzzy, but beyond that, it doesn’t really do anything else for the visitor. Video for this business is hard we need to use actors.

I can see that. The nav is louder than the logo and the nav CTA.

So let me put this up here. The CTA should be bold or the same as nav weight.

Tone the nav color down a bit to emphasize CTA and hero. Okay, so there’s some good suggestions to try.

It went from one hero to another hero unnecessarily. Yeah, I see you’re considering this to be almost like another hero right here.

I can see that. Okay, discover, ooh, I am going to refrain from making the obvious joke right now, okay?

I will, I will refrain. I will refrain.

That’s, Kevin, that’s not appropriate. Let’s not, let’s, let’s, let’s continue on.

Okay. It’s in my head though, and so I have to giggle.

Discover a healthier and sober lifestyle on our tranquil and picturesque ranch. These are very, these are big words, right?

A lot of good copywriters will tell you, like, hey, make this so a fifth grader can read it, right? We’ve got, man, picturesque.

I mean, that is, we’re really getting into the, you know, senior level, not old senior, like high school senior level vocabulary here. Austin Pines Ranch provides a calm and secluded setting for your recovery.

Located just outside of Austin and Page, Texas, our idyllic 14-acre ranch is the perfect environment to begin your recovery journey in comfort and luxury. Our addiction professionals, okay.

So we’ve done this before. When we’re grade, another common way to grade your copy.

We’ve talked a lot about us copy versus you copy and so I just want to point out and it just it always puts alarm bells off when I’m reading copies because I’ve looked at copy so much and rewrote copy so much. We okay this is us we, us we, us we our that’s us we copy right.

Now you can say begin your recovery journey. So we’ve said your, that’s you copy.

Okay, that’s good. Our, though, we’re back to us now.

Our addiction professionals. We keep going, keep going.

Okay, if you are ready. All right, good.

That’s you copy. But then it’s back.

Austin Pines, that’s us, we. Okay.

So we can rewrite this whole paragraph to be much more you focus like what’s going to happen when you come here Why does this environment help you in particular right? Get this focused a hundred percent on the person reading it Transform your life.

See this is a you focused headline Substance abuse doesn’t have to keep affecting you your loved ones and your quality of life. Okay, back to us, our, our.

You’re kind of saying, this is kind of saying the same type of stuff that was just said right here. So this is two sections in a row that’s kind of communicating the exact same thing.

So it’s a wasted opportunity to say something different, say something new, say something at a different angle. Now we get down to the experience.

0:47:14 But see, we’re back.

0:47:15 Like we, we, we, us, us, us, Austin Pines, Austin Pines, we, we, we, us, us, us, are committed to providing you attentive and individualized treatment.

Our experienced team works, our, our, us, our, we. Works tirelessly with each client to devise a personalized treatment plan for recovery by using only therapeutic interventions that can specifically meet all of your needs and none that won’t.

You can make the most of your time at Austin Pines. OK.

I still haven’t really, remember, what we’re trying to do, particularly today, we decided, is find that unique selling proposition. Right now, I’m reading copy that I would probably read on every addiction treatment center website that’s just like every other addiction treatment website.

Where is the unique approach? Where is it?

Because here’s the thing too. Lots of people already know the fact is, addiction is hard to treat.

Addiction often takes a long time to treat. People go to rehab centers and then they, you know, get cleaned up, whatever.

And then they end up back there a year later or six months later or two months later, whatever. So we know this is a problem.

Like there’s a common problem with addiction treatment and thus what most people are wondering is what’s your success rate? What’s your stick rate?

Why do you have that success rate? What leads to it?

Do you have some sort of unique approach to helping people with addiction? Or is this the same kind of addiction treatment that I’m gonna find everywhere and that’s I’m gonna get the typical results that most people get which is I don’t know if it’s gonna stick.

I don’t know if I’m gonna be back here in a year. I don’t know you know that kind of thing is very very important.

I mean we’re trying to sell them on coming here and choosing us. Do we have something different to offer them?

Like and I’ll tell you right now a pool out back. Okay, while nice, while nice, it doesn’t help my outcomes.

It doesn’t guarantee better outcomes than any other center. Okay, so what are we able to say about our process right, that is unique?

And so far I haven’t seen any inkling of that. Okay, so let’s go down and this is this is why I say copy is the most important thing on a website guys it’s it’s if you can manage to say something unique and different and actually have you know a process or a product or whatever a feature to back that up then then we’re good then we’re golden okay if we don’t if we’re just like everybody else marketing becomes very difficult marketing becomes very difficult when you’re just like everybody else.

All right, we can do medical detox. This seems to be in a different language.

Oh, no, it’s not. I was like, residentia el inpatiente.

No, it’s residential inpatient. Okay, so we need to fix that.

Your word is breaking right here. Partial hospitalization, intensive outpatient.

Just from a quick little design aspect here, I will say this needs a transition on it. So to demonstrate this real quick, let’s go in and I’m guessing it’s um yeah because see that see how it hovers when I’m my mouse is down here that lets me know that we’ve targeted the card and then the element that hovers.

All right so we’re going to investigate this and we’ll just see the difference between transition and no transition we’re using clickable parent here. All right, so that looks like it’s in the head.

Then there’s an SVG inside of that, so the head is actually styled. We’re gonna click this little button right here.

Oh, I need to move my, oh wait, no, hold on, hold on, hold on, I think I can move me. I can move me now.

Shift two, no, hold on, we gotta be in this tab over here. Shift three, four, oh, look at that, oh, look at that.

Two, look, look, I can just move myself over here. Okay, so if I select this, I can see our hover styles here.

And it’s on this, okay, we probably need to be on here and then select our hover styles to find it. Okay, text wrap balance, okay, head.

Actually, I just need to put it on the head. If I just put it on the head, because I already know that that’s what’s being, yeah, it’s this background color right here.

Okay, so the head is right here. Let’s come in and say, we’re gonna transition the background color.

I’m gonna do like one second ease. Normally I don’t do a second, but I wanna make it kind of obvious here.

Okay, so now that’s the effect you get, which is much more soft and subtle it’s not so sharp if I duplicate this here it is without a transition see that like very sharp like instantly the background color changes versus here you get that nice smooth just like mmm nice soft like calm not trying to not trying to shake people up right simple okay so add some of those I noticed them on your buttons too, I think. Now your button.

Yeah. Yeah.

You could definitely add that to your button. Like that one right there.

Anytime. See, that’s a subtle color change.

So you don’t notice it as like needing to transition a lot, but anything that’s a sharp contrast change that happens instantly, it doesn’t feel as good. So you can put a transition on these buttons and make that much better.

Okay. Austin Pines promise.

Oh my gosh, here we go. Here we go, guys.

Are we going to hear a USP? The path to recovery is fraught with challenges and we know the collaborative treatment and compassionate care that people need to establish long lasting cover.

Hold on. Is this a readable sentence?

The path to recovery is fraught with challenges and we know the collaborative, the collaborative treatment and compassionate care that people need to establish. This needs to be rewritten.

That is the hardest sentence I’ve ever read in my life. Let’s make this a lot, yeah, we need to make that a lot better.

Austin Pines Ranch offers the best possible environment to help you develop a healthier lifestyle with treatment facilities that are designed to provide a serene and encouraging setting for introspection and personal growth. We’re wholly devoted to providing our clients with outstanding addiction treatment, ongoing support, and overall care with kindness and hospitality.

” 0:53:45

Chat, did this convince you? 0:53:49

Do you feel like this says something different? Let’s just crowdsource this right now.

Do you feel like this legitimately said something where if you are an addict or You know an addict and you’re helping them get signed up for this place. Whatever.

I don’t know what the process is Did that convince you are you like oh, we got to go there. They got something different going on Rubin says that’s a bunch of words, but didn’t say anything That’s kind of the vibe that I get that it’s the but it’s here.

Here’s the thing It’s it’s honestly it’s a vibe I get on like nine out of 10 websites. Yeah, this is, this is what you say.

Let’s just explain it. This is what you say when you don’t have anything unique to say.

This is the obvious thing, right? Let’s talk about the, you know, serenity of the environment.

And I’ll give you a very specific example, okay? The Austin Pines Ranch offers the best possible environment to help you develop a healthier lifestyle.

This is called begging the question, right? What is the specifics of the, what makes it the best possible environment?

You’ve got to tell me something of substance. You’re just making a claim, but there’s no details for me to verify the claim.

There’s nothing for me to really chew on here. I just kind of have to take your word for it, right?

We want to avoid that. Like good copy doesn’t do that.

Good copy gives you the goods. When you read good copy, it clicks in your mind.

You know exactly why you need to choose this place and not a different place. This copy is very nebulous, right?

It’s very just like airy. 0:55:32

Okay. 0:55:33

Like, we don’t have anything good to say, so we’re going to say the obvious things, but this is what everybody else ends up saying, and that’s the problem with it. That’s why it doesn’t connect, and it doesn’t really help people convert.

Yeah, so Rob Locke says, any treatment center could say all of that. Right.

So like I was alluding to earlier, you would have to have, the treatment center would have to have something about their process, most likely. Something about here’s how everybody else treats addiction, here’s how we treat addiction.

Notice the difference? So when we’re looking at outcomes, you’re gonna notice a difference in outcomes.

Here’s the difference, by the way, that you’re going to notice. 87.

4% of people that come to Austin Pines have results that stick for five plus years, where the average is people are back in eight months. Whatever it is, okay?

You’re not going to have a perfect score, obviously, in the world of addiction, but you can have outcomes that are dramatically better. Why do we have outcomes that are dramatically better?

Because we have a very different process from everybody else. This helps you have a clear distinction.

And now when people are deciding, it’s like, well, I just went and read five places in my area and four of them seemed to all do the same exact thing. And the last one was like, no, we do things a lot differently here.

And this is why we do things a lot differently here. So I can understand, you know, why are we doing it this way versus that way?

And then I can understand why the outcomes are different. You can’t tell me you have the same process as everybody else, but the outcomes are way better.

And then I’m like, why? How, how does that work?

How does that math, math? And you’re like, well, we have a pool.

See that right there? We have a pool.

They don’t have that. They don’t have this pool.

That’s not the thing. Everybody knows that’s not the difference.

That’s not going to change outcomes. So you’ve got to give them something to actually chew on that they can connect in their brain.

Oh, I see how that would change outcomes. That’s where I’m gonna go.

That’s what we have to build into this website right here. Okay, got insurance stuff, okay, about us, our facility.

I mean, we can go to the about page. I feel like a lot of the homepage is an about page.

Okay, proven outcome measures. Begs the question once again.

So you’ve told me you have proven alcome measures. I need to know what they are.

I can’t just take your word for it. 0:58:11

Okay, let’s go down. 0:58:12

Dedicated staff, don’t they all? Our values.

Live by our integrity, focus on our clients, deliver on our commitments, respect individuals, provide compassion and care. Okay, so if I was, you know, somebody submitting copy, you know, and it’s like, here’s the copy we’re going to think about putting on the website.

Our mission is to foster and facilitate substance use disorder treatment by using measurable assessments and outcomes, establishing individualized goals and implementing proven strategies that promote long-term recovery. X.

That sounds like it came straight out of a corporate boardroom. Okay, so, next.

Next. Our vision, okay.

Vision is executed by leadership, industry trends, proven outcome measures, team members, need to the client, okay. X, next.

Dedicated staff, everybody has that. Next, X.

Our values, anybody can say this, there’s no additional substance here. X, next.

Our operating principles. Leadership is the ultimate deterrent.

Clinical quality is paramount. Focusing on shared vision, doesn’t mean anything.

Teamwork is a key component. I don’t know how that works in addiction recovery.

Leveraging competitive advantage. This is straight out of corporateville, okay?

X, next. Here we go.

Effective substance abuse treatment requires careful assessment of a person’s needs and goals for recovery. Offer an extensive array of programs and services to accommodate those needs.

Taking into account blah, blah, blah, blah, blah. Help a professional, okay?

Okay, evaluate substance abuse history. I don’t know.

It’s getting closer, but X So the whole about page At this point doesn’t need to exist. That’s why I tell them Hey, we got to be able to say something important or this page does not need to exist Because it’s not gonna it’s just a distraction.

It’s not it’s not helping anybody convert. I mean, it’s it’s it’s just corporate.

It’s corporate copy Let’s go into programs medical detox. So we get into some specifics here.

Here’s a medical detox program. Or should we do residential inpatient?

Let’s do inpatient. 1:00:09

Okay, because this severe addiction 1:00:11

may require intensive round the clock treatment that only a residential inpatient program can offer and the immersiveness of inpatient treatment is widely considered the most. I know a lot of people here are gonna be like, why are we reading copy?

We should be looking at the UI. There’s nothing wrong with the UI.

UI is fine, right? The general UX is fine.

The layouts are fine. All the way, I mean, all these things have been, those boxes have been checked.

I mean, we need to now talk about the thing that’s going to sink this ship, okay? In terms of competing with other treatment programs, we have to talk about the most important things that are going to make or break the success of the website.

And I’m telling you right now, it’s the copy. Okay.

So you got to, you’re informing people of what it is. That’s fine.

1:01:02 Okay.

1:01:03 All right.

Okay. This is like a good overview.

At some point I need specifics. I think that’s really what’s missing, missing here is specifics and specific copy is typically good copy.

Nebulous, like begging the question, going around in circles, corporate copy, none of that helps. None of that does anything for anybody.

Medical treatment, withdrawal management. I feel like this text could be smaller, less line height here.

I feel like these cards are way too big. But now we’re getting into specifics, medical treatment.

But it’s not presented as like, it’s presented more as like, 1:01:41

we’re gonna do all these things. 1:01:43

Whereas what I really would probably wanna see here is, what happens first, what happens next, what then happens? And then is there a follow up?

Like I wanna maybe a process kind of approach here. What am I, how am I going to be led through this process of recovery versus like, here’s all the things we’re going to do with you.

I need to know what the process actually looks like. And you can structure that in,

1:02:15 because if I show you my process,

1:02:18 actually go watch Processes Everything in my web design masterclass.

If I can show you a process that looks fundamentally different from everybody else’s process, it’s by its nature intriguing. So then if it says a lot of critically important things and gives a lot of details, people instantly see, instantly see what the unique selling proposition of this company is.

So once again, process is everything, right? Now we’re answering some common questions.

Okay, how are we doing on time? I think we need to move on from web design.

Here’s what I would say. This is a great website.

It’s a clean website. The UI is good.

The UX is good. People can debate about the photos all day, like this one.

I’m not, I mean, first thing that comes to my mind is this poor toddler, this poor toddler to be an alcoholic, I mean, at such a young age. I don’t know, my brain like immediately was like, that’s a toddler’s hand, not an adult’s hand.

I didn’t even see this hand right here. Maybe it’s because the blue shirt, right, caught my attention first.

I would get a different photo for here. But like this photo, fantastic, all right?

We got a great photo right here. So everything else is fine.

Like we could go in and look at the DOM, right? But it’s frames, it’s automatic CSS, it’s bricks.

The DOM is gonna be clean, the things are gonna be accessible out of the box. It’s like we don’t have to look at all of that stuff.

I, and guys, I do this on audits all the time. My brain goes right to what is the number one, number two, number three things that are gonna sync this website or make it successful.

And immediately my brain was like, we don’t have to worry that much about the UI, we don’t have to worry about the UX that much, okay? A lot of that is taken care of already.

So next, what’s next on the list, what’s next on the list? And then the copy is what stood out.

And that’s very common by the way, very, very, very, very, very common. Because good, great copy is not common.

Great copy is uncommon. Okay, do you think the website needs a contact form on the homepage and is this good practice for other websites or should I listen to Tyree and just have calls to action?

I’m not a huge fan of, here’s the thing, I guess this is how I decide. If the service or product is more of a like buy it now, commodity kind of product.

There’s not a lot of decision making that has to happen. Price point is gonna be an important thing.

Then show them forms front and center. Like, hey, here’s a form, fill it out, go for it.

Okay, like a plumber, for example. It’s like, how much, you know, if the plumber comes up first on Google, has good reviews, everything looks to be in order, like I would expect, right?

They look like they can get the job done. You know, I’m not going from plumber to plumber to plumber, like scrutinizing plumbers, okay?

Then just show them a form. Because it’s going to be like, okay, that’s the simplest, let me just fill this out real quick, let me put in my inquiry, I got other shit to do with my life, right?

But drug and alcohol addiction treatment, anything that takes a long process, anything that’s at a higher price point, anything that needs to be sold more, that needs more in-depth copy, that needs explanation. Now we’re not sticking forms in people’s faces.

We’re sticking important things in people’s faces. Like, hey, I know before you fill out a form, you’re going to need to know a lot more about what’s going on here.

So let me take the time to lead you through a narrative, to give you really solid copy that makes you want to click these buttons. Because I know if I can make you want to click the button, you’re going to click the button.

I don’t have to stick a form in your face. That’s kind of how I decide, right?

So if it’s more on the easier to convert side of things, the obvious, like, hey, they just want to get it done. They just want to sign up.

They just want to get the thing. Then put a form in their face.

If it’s going to be a longer approach to conversion, then let’s not put forms everywhere. Let’s just put buttons so when they’re ready, they can click the button and they can do the thing Okay, all right, I’m looking chat now Okay, let’s go up Okay, why why would you use Google Bard to rewrite that copy no, I don’t use chat.

GPT chat. GPT writes, um, nebulous copy.

Uh, don’t use chat GPT to write copy. That’s a, that’s a no.

1:07:00 Mm.

1:07:00 Hmm.

1:07:01 Hmm.

1:07:01 Hmm.

1:07:01 Hmm.

1:07:02 Somebody saying the font is hard to read.

1:07:03 I don’t know if they’re talking about the other website or this website,

1:07:06 the color contrast hurts.

I don’t think the color contrast hurts here. I don’t see I don’t see any color contrast issue that hurts.

What else? I’m looking for other oh here we go.

Body font needs to be bigger. So this right here.

What’s the computed value? Font size.

Oh it’s already big. You know, that’s a very small typeface right here.

So I, yeah, it’s already at 22 pixels by default, which is definitely on the large side. That font itself is a tiny font.

Okay, that’s probably the issue that we’re running into. But I do agree, I do agree.

I think this should be bigger. Okay.

Mm-hmm. Any other good stuff in the chat?

1:08:00 We know you use Ahrefs,

1:08:01 but have you tried Ubersuggest in the past?

1:08:03 LTD for three hours.

1:08:05 I have tried Ubersuggest.

1:08:06 I don’t recommend it.

Ahrefs is, 1:08:08

the power in SEO is in all the filtering capabilities and a bunch of other stuff that happens on the backend that I actually haven’t covered in a lot of videos There’s a lot of tools inside hrefs and uber suggest is kind of just like a keyword tool And it’s missing by a lot of it’s missing a lot of the like advanced filters and stuff like that No, the font is actually small the font is actually small Uber suggests is always running an LTD, don’t get hyped. That is probably the truth.

Okay, all right, let’s move on. We gotta move on to, what are we gonna do?

Oh, frames, sneak peek, and BRICS 1. 9.

1. We wanna look at some things, and then we’ll do a whole bunch of Q&A AMA to finish up here, okay?

All right, let me pull up the template. So I teased this in the inner circle, showing hey, here’s what, well actually, I didn’t tease the frame version in the inner circle.

I only teased the live version on the client site that I’ve started to work on. Then I went and was like, nah, this has gotta be a frame.

We gotta add this to frames. This is some sauce right here, okay?

Anything that is, when I’m working on a client site in particular, in fact, this redesign of this client site has already birthed like five different frames so far. And that’s great.

Like it’s, you know, I’m looking for unique things to do on this new client site, and then that gives me things that go right into the frames library, concepts that go right into the frames, especially if it’s like got some sauce, right? And this definitely has some sauce, and it is something that is gonna be usable on so many websites, so many websites.

And if you have this as just drag and drop, then it’s absolutely fantastic. Okay, so what is it called?

Where are we even? Let me go, where’s date published?

All right, let’s go up here. Here it is, schedule section alpha.

Let’s preview this. Okay, so what we were tasked with is we have to show a class schedule.

Now, it doesn’t have to be classes. You could use this for a lot of different things, but we want to show a class schedule.

And we need this to be driven by a query loop, a single query loop. So I’ll tell you right now, when I initially built this, I built it with a query loop for every day of the week, because that seemed to be the obvious, like, easy thing.

I’ll query the Monday items over here. I’ll query the Tuesday items here.

I’ll query the Wednesday items here. Because on the back end, we need people to be able to go in and add new items to the schedule with custom fields.

We don’t want to be in Bricks Builder, like duplicating these cards and trying to move them around and things like that. And, you know, we can’t even do that in a lot of cases because there’s a lot going on here.

We have to relate classes to programs. We have to relate classes to specific locations.

We have to do a lot of stuff here. And then this needs faceting and filtering capability.

Okay, so just talking through some things. Let me go to, here’s, I’ll show you the version that I teased in here.

Because then I also wrote what we have to think about when we’re trying to create this. And by the way, you see that it has a horizontal scroll, okay, so that we can go, we can just see every day of the week, and we don’t have to worry about things getting all squished and all that when there’s not enough space.

But on mobile, I was working on this earlier, there’s actually going to be two options for 1:11:59

mobile. 1:12:00

You can keep it like this on mobile, okay? So you can do this on mobile, or you can stack it on mobile.

And I think this version stacks. So you see right there, so this is what would happen on like, I don’t know if that would be, that’s probably like an iPad, like a vertical iPad kind of situation.

So they can still scroll left to right, okay? And then they can still go up and down, no problem.

But the minute we start to get closer to being like, I don’t know, even that might be a tablet, right? You get to decide.

You can put whatever breakpoint you want. This uses a min-width media query, so there’s not a lot to change here, depending on where you want this to collapse.

But notice what’s going on here. Okay, this uses CSS grid.

So everything in here is a grid item. These headers are grid items, and so, but it’s positioning them automatically.

And that’s the other thing. Let me go over here and let me go, it’s probably one of the recent posts.

Come down, down, down, down, down. Here we go.

Okay. Well, here’s the version that’s looking live right now on the client site.

So this one has more styling attached to it. And you can see here, right?

It’s like, now you see columns can even be empty. Okay, like this presents, it’s a challenging thing, right?

And I’m excited to show the approach that I took and how we achieve this with just pure CSS grid. But people have to be able to also put in a class at any time, they’re just gonna add them randomly.

And the grid is responsible for putting them in the right column and potentially in the right order and then notice that you know they all don’t go in the same order in the grid but somehow when this stacks all the Monday items are under Monday and all the Tuesday items are under Tuesday and so on. There’s no JavaScript by the way helping to it to it this is pure CSS okay and I just think that’s really interesting.

And that’s why I’m doing a whole inner circle deep dive training on this, building it from scratch, from the ground up. We’re gonna do the CPT, we’re gonna do the custom fields, we’re gonna do the grid, we’re gonna show the horizontal scroll, we’re gonna show how to make it stack.

We’re gonna do everything, everything in this training, okay? So that’s gonna be pretty exciting.

Let me go down to chat here. My face is chasing me?

What does that even mean? I got to get the hide current comment.

There we go. The one thing I don’t like about StreamYard is that the comments don’t, I love that about Ecamm Live, is the comments went away after like a minute or whatever.

Let me go back to, do you guys want me on the right again? I don’t know.

I don’t know what face chasing me means. Yes, I did remove the comment.

So think about this. You can, if your client is like, what we need is a schedule for the seven days of the week where we show different things on different days or whatever.

And you can see here, like we’re also gonna be relating instructors. So we have instructors in the database.

We have classes are gonna be added to the calendar, but those classes relate to specific programs. So for example, think, well I can just give you an example here.

See, jujitsu is in the database as a program, but intermediate jujitsu, you can’t just query the programs in here because there’s beginner jujitsu, intermediate jujitsu, advanced, these things don’t have pages. So the actual event or the class that you’re adding to the calendar is not a CPT in itself.

Well, it is, it’s called an item, but it’s not a specific item like Jiu-Jitsu, right? So we have to be able to relate it to a class.

So if somebody says intermediate Jiu-Jitsu and they click on it, it’s gonna take them to the Jiu-Jitsu program page. If it’s beginner Jiu-Jitsu and they click on it, it’s still gonna take them to the Jiu-Jitsu program page.

So we’re not forced to have a page for every kind of class, right? We only want pages for programs.

We want the freedom to have a custom class that we can then attach to a specific program. So that’s kind of the thinking there.

And then of course we want the times. There you see the location.

I’m actually gonna go the step of color coordinating the class, the program type. So for example, if it’s a jujitsu class, it’s gonna be orange.

If it’s a fitness performance class, this accent color over here will be purple or something like that. And so your eye can immediately look for oranges or purples or whatever.

The other thing is that it will be facetable, okay? Which I learned, if you attach custom fields to a page because that’s what we started with right here So if I want to edit this schedule, for example, I just edit the page and I fill out the custom field It’s a it’s a repeater in ACF You can’t you can’t facet them with grid builder grid builder can only facet actual entries in the database actual posts So that’s why we have to move this to a CPT.

It’s gonna be called calendar, probably calendar, something like that. So you’ll add a new calendar item or a new schedule item.

Maybe we’ll just call it schedule. You add a new schedule item.

Then it’ll be facetable. So somebody can come up here and say, show me all jujitsu classes.

And it takes all the other cards away and it only shows where the jujitsu classes are. That’s a good example of a facet.

We can also do a locations facet. Hey, show me only things that happen in Buford.

Show me only things that happen at the Atlanta location. We can have the freedom to do that as well.

So you’re just gonna be able to immediately drop this in and then it’s up to you obviously to map custom fields, though we may provide an export for it. Like we can say, hey, here’s your ACF export that goes with this.

It’ll just bring in all the custom fields for you. And the custom post type.

It’ll just do everything for you. I think that would be a little more value, right?

That might be something unique that we could do. 1:18:11

All right, so I don’t know, what do you guys think? 1:18:13

You liking this? Is this good?

Most importantly, I think is gonna be the training on this because the way that I am positioning things in the grid is I think somewhat unique. I think somewhat unique.

And it’s, it all comes from the custom field. I’ll tell you that.

So when somebody chooses, all they have to do is say, this is a Monday item, the grid is automatically going to put it in the Monday column. I think that’s pretty cool.

They don’t have to do anything else. It’s just by default, it just happens.

They don’t even have to think about how it’s going to be positioned in the grid. The grid just takes care of it for them.

Okay, alright, let’s take a look at, that was a little sneak peek there. So training on that coming in the inner circle and then the frame.

Do you guys mind if I, should I put out the frame before I do, I’m gonna try to record the training today. In fact, I’m gonna get some lunch and then I’m gonna try to do the training today.

I’ll put out the training and then I can release the frame shortly after that. And then we can upgrade the frame by adding the custom fields, exports, and CPTs and all that.

Okay, let’s get this out of here. Let’s get this out of here.

Let’s get this out of here. And what do we need?

We need a BRICS training. Here we go.

Okay, I believe I already upgraded this to 1. 9.

1. 1:19:39

Oh, that’s the child theme. 1:19:40

1. 9.

1, okay. Bricks, builder.

io slash changelog, okay. Okay, I always do this.

I always go right, because the changelog takes forever to load, 1:19:51

and I always scroll first to look for it, 1:19:53

and then I end up at the bottom of the fucking changelog. Every, every time.

I don’t learn, every time. Which by the way, is the reason Google likes to avoid page layout shift.

There’s a huge page layout shift issue. The fact that this loads in line here, like that, see that?

So if you’re not patient like me, the minute you arrive, if you try to scroll, look, you’re past the change log, the entire change log, if you scroll too much. Okay, let’s look at BRICS 1.

9. 1.

So I don’t ever, hardly, hardly ever do I do translatable websites. So yeah, WPM, whatever, whatever.

Query editor is kind of interesting. But what I wanted first, I’ll just be honest with you, what I was hoping for first is when you query relationships that we would have a UI for adjusting the query.

And we don’t, we were not given that. We were just given this right here.

So that’s kind of womp womp. All right, more query additions.

These are interesting if you read through that. Inject section templates via hooks is quite interesting.

Though I need to play around with it a little bit. New element Instagram feed.

No, no. The minute I read that, I was like, why are we doing that?

Why are we doing this? Does anybody still use Instagram?

I thought Instagram was kind of dead. I don’t know.

ACF nested group support. This is super important.

This guys is super, super, super, I can’t tell you how many times I’ve created nested groups and then I can’t query the things out of it because there was no support for nested groups. And I was like, oh my God, I gotta go back.

I gotta ungroup everything. I gotta restructure all my custom fields because we can’t have nested groups.

This is a game changer right here. This is really, really, really important.

I’m very excited to see that. Custom CSS new root placeholder.

This is the thing I wanted to look at and look at with you. So let’s go take a look.

All right, I’m gonna go into pages. What should we build?

I don’t even know. What should we build?

Let’s add a new page. Let’s just build, I mean, I always default to building like a stupid card or something like that.

All right, we’re gonna look at root selector. Think if you hit edit with bricks, it publishes the page.

All right, let’s go to section. Let’s go to make this a three column grid right quick let’s go block okay and let’s call this I should give you guys a sneak peek I’m gonna do that right now I don’t know it’s not on this I’m not even on the right branch that would take more more work getting into but auto BIM is right around the corner guys right around and it’s good so let’s go um root card let’s call this root card.

All right, good. Let’s put some things in here.

So let’s put, let’s do a block block. Let’s do root card, root card double underscore.

Let’s call this the media wrapper or something. Let’s call this the body.

Let’s call this, let’s add a heading in here. Let’s add text in here.

Let’s add a button in here. Awesome.

Let’s add an image in here. Perfect.

Let’s select an image. All right.

They’ll work. Insert.

Good. Good.

Good. Okay.

Now this is going to be our media wrapper. I don’t know why I’m doing all this, but it’s just a habit.

This is our root card. I guess it does help you guys to see what everything is in here.

Okay, text button, great. All right, we’re gonna go heading here.

I’m gonna see the limitations of this as I had some theories as to how, I know this is gonna be a lot more beneficial, but just how beneficial, I’m not quite sure yet. And we might even run into a limitation of it that I was envisioning might exist.

And then I’m gonna have to think about what else we can feature requests to get around that limitation. Okay, let’s say that I was going to style this entire card from right here.

Hey, oh, hey, okay. This is new.

This is new. So it’s got a little placeholder action and I believe there’s a shortcut for it.

There’s R plus tab. R plus tab.

I don’t. .

. Okay.

R tab. I got it used to that.

That’s not a common, using the tab is not a common shortcut key. My pinky doesn’t have to do so much work.

You know what I’m saying? Yeah, I’m going to have to get used to that.

All right. So root card.

And then I just say of what do we want? Shade, ultra, light.

Let’s design the most boring card we can possibly. Okay.

Oh, background color. Guys, background color does not work nearly as well as background color, I’ll tell you that.

Okay, so then what I wanna do is I wanna say root card, and I remember I called it body, right? So this would be R tab double underscore body.

And immediately I’m doing the body, which I could just set a different background color if I wanted to, because I don’t know what I want to do here. Say, let’s say danger.

Oh, I’m liking this guys. I’m liking this.

You see, you see where we’re at with this? How about this?

How about we’ll just do something. Let’s do font size, text S.

Okay, so that’s gonna make that text nice and small. We can also drop some padding in here, all right?

So we’ll just say space S, maybe we don’t want a little more than that, space M. You know what we should probably drop in there as well?

You know, a little content gap divided by two action. Yeah, I’m liking this.

This is a age three, okay? That’s really, really, really handy.

Really, really, I’m really glad I made this feature request. What was the limitation I was thinking about?

It was something to do with BIM. Oh, modifiers.

How would this work with a modifier? RootCardDark.

So I want this to be a dark version of the card. Root card dark.

All right, R tab. This would be targeting root card dark.

Yeah, you can’t do something like this to reference the original class like root card because I need to do like body now, something like gonna work. Background color of black, yeah not gonna work.

I still have to manually type root card body like that. There needs to be, here’s what there needs to be, but then there’s no way for Bricks to know that that’s the thing.

Like a way to reference the original, the non-modified class. I just don’t think that’s going to be possible Because then I can go down here and say color white okay, and then I would have to do Root our tab that is not our tab.

I have to look at my keyboard to do that root and then root card heading Would be color white okay, that’s how you make a dark variance of a card see this guys this is the problem right here I rack your brains right now rack your brains rack your brains I don’t want to have to write this manually how do we get a reference token for this that works just like this reference token but there’s no way for bricks would have to almost like scan the element and look for another But it wouldn’t it wouldn’t be able to differentiate this class from another class from another class from another class I just I don’t think there’s a way to do it page builders Naturally struggle with BEM modifiers. So BEM block BEM element.

No problem whatsoever Fantastic golden BEM modifiers every page builder struggles. I have not seen a good BIM modifier workflow in any page builder ever.

And we’re still running into a challenge here. See, if I was on this class, this gives me exactly what I want to see right here.

Well, the problem is we’re just not on that class. Now, again, I’m just brainstorming.

1:28:42 I’m just talking nonsense.

1:28:44 I’m just talking nonsense.

What if you could select two classes and have a token for the other class, like a root alt or something, and it references the other class that you’ve selected? But then we wouldn’t know which one we’re applying styles to, would we?

See, more limitations, more challenges. 1:29:14

All right, let’s go to Ched. Does it accept nesting?

Give me an example, Nuno, 1:29:18

of the nesting you would wanna see. 1:29:23

Root card dark. 1:29:24

What would you wanna nest? 1:29:26

Where would you wanna nest it? 1:29:27

Well, I mean, we can’t, I don’t even know what you mean by nesting. Vanilla CSS doesn’t support nesting.

So vanilla CSS doesn’t support nesting yet. I think we’re still on the, what are we in the seventies, eighties, seventies, or it’s 74%.

So, I mean, that’s an irrelevant, kind of an irrelevant question anyway, because we, even if it did, we, we couldn’t support it. I mean, we wouldn’t use it.

You wouldn’t use it in production. Can you set a variable on main class then wild modifier override that?

1:30:09 You wouldn’t wanna do that here.

1:30:10 I mean, yeah, you have your main styles, then you could have your, you could say like, all right, this is gonna be, I’ll zoom in.

You could have a dark version. But you would just have, you’re forced to write it manually because you need to do this stuff with root card dark.

And then you could, you just have the opposite problem more or less. Because now I can R tab and say body.

And then I can say backgrounds color, backgrounds color is black. 1:30:44

That’s gonna work. 1:30:45

But I just have the opposite problem where I’m just having to put the, I’m having to manually write the modifier now instead of manually writing the original block class. 1:30:56

Oh wait, oh wait, hold on, hold on, hold on, hold on. 1:31:00

I think you’re right, I think you’re right, sir. I think you’re right, sir.

You’ve done it, you’ve done it. So we just do it all on the parent.

I like that, I like that. I think I like that.

Yep. Yep.

1:31:17 Mm-hmm.

1:31:18 Mm-hmm.

Yep. Dark.

1:31:21 I got to get used to that short, that, that shortcut.

I don’t know. Is that the, is that the best shortcut they could have come up with?

That’s my first thought. It’s really hard to do that.

It’s hard to do without looking at your keyboard I feel like you’re gonna miss R or you’re gonna miss tab You’re gonna miss one of them if you don’t look what I feel like maybe I just need to practice more So I put color of white here Color of white here I Like that and then you can see you know when you’re just selecting your parent item your main block class You can kind of see everything that’s going on. I do like that.

I do like that. What do you guys think?

Chat, you’re so quiet, chat. We got like close to 100 people here.

You know, I think a lot of people pull up the stream and they’re like, I’ll listen to the stream while I do some work. And then they’re not in the, they’re not in the chat.

Andre says, can you explain that? Uh, yeah, uh, sure.

But which part of it, I did notice guys that the stream quality is not, um, it’s not as good. It’s not as good as he cam.

Uh, I agree. And I’ve reached out to stream yard and I’ve asked them about it.

I’m streaming at their highest, like their highest quality that you can select 10 80 and supposedly 10 ADP. It’s supposedly 1080p.

So it is a little, I’ll call it like fuzzy. It’s a little fuzzier than Ecamm.

Things are not as sharp. Yeah, Tyree says, I love this.

1:32:56 Actually seeing it all at once is cool.

1:32:58 Yes, I mean, this is way better for organization purposes.

So I’ll just answer the question. We’re going to go into, somebody said, would class star equals root work?

We will try that in just a second, Patrick. That is a good question.

So we’re gonna go into Q&A AMA in just a minute. Now, see, I went on that question.

What was I about to ask myself? Oh, yeah, yeah, yeah, yeah.

A question a lot of people have been asking me lately. Saying, Kevin, I noticed you write, you like to write your CSS a lot in Bricks in the custom CSS area attached to a class.

Isn’t it better to have everything in WP code box so everything is in one style sheet, okay? I really want to explain that.

I’ve gone back and forth on it. There was once a time where I was like, I’d rather have everything written in the style sheet.

That was, if I remember correctly, in the Oxygen days, maybe once or twice, I still said that in the early BRICS days, but that was in the oxygen days. Now why would I say that in the oxygen days?

The custom CSS box in oxygen, and again, this is people say, there’s really not that much difference between BRICS and oxygen. No, there’s like a gazillion differences, and they’re really important differences.

This CSS box in BRICS blows the oxygen CSS box out of the water. They’re night and day.

They’re night and day. This is the Oxygen CSS box is like a toddler version of this.

This is like the adult version, okay? And Oxygen is like, that’s the toddler version.

You are severely limited in Oxygen in this area right here. Having the original root selector was powerful enough, now having this is five times as powerful, okay?

And here’s the general reasons why I say I put almost everything here. Now that’s not to say I don’t put stuff in WP CodeBox, I absolutely do.

There’s times where I need a mix-in, where I’m doing a style that I’m gonna use repeatedly and it’s not appropriate to use a utility class for that, I really need to use it with BIM, but I need to do it across various BIM classes and I don’t want to constantly repeat myself that with that same time. What that calls for is a SAS mixin.

You want to use a SAS mixin in that regard. So anytime I need a mixin or anytime I’m doing something really complicated and I need more, which now it’s actually that reason is going to be erased by this, I think I can already tell.

So really we’re just relegating stuff to CodeBox if we need mix-ins or functions. If I need functions or mix-ins, I gotta go do that in WP CodeBox.

Everything else is gonna live here. And here’s why.

Couple reasons. And I’m doing this off the top of my head, so we’re just gonna roll with it.

First reason is organization. It is not better to have all of your CSS in a single style sheet.

This is actually why a lot of people use Sass Partials because partials allow you to almost folderize your styles. So if you need to find something, you can go and say, okay, that’s related to my checkout.

If I need to find something related to my checkout, I can go into a Sass Partial called Checkout Styles, and I know, or maybe even Woo Styles or whatever. So I know all WooCommerce stuff is in this sheet right here, because what happens is your sheet starts to get longer and longer and longer and longer.

And then you’re like, you end up scrolling up and down. And by the way, you’re in a magic area.

You’re not in the builder. Okay.

So let’s say I open this page. All right.

So let’s, let’s say, all right, guys, here we go. We’re, we’re back here.

Transport your body three months, three months from now we’re back. Okay.

We haven’t touched this website in three months. I need to edit this page.

So I’m gonna edit this page. And I’m gonna say to myself, oof, oof, why is that card, why is the dark, this dark card using black?

We don’t, we didn’t want that to be black. We wanted that to be the website’s base color.

Black is not suitable for this. I need to change this style.

So I’m in a page builder, which is logical. I wanted to edit the page.

So I opened the page builder. I mean, it seems like a very logical set of circumstances have happened so far.

I’m looking at an element. Hey, there it is.

There’s the thing that I don’t like. I want to change that thing.

So is your first instinct to be like, you know what I should do? You know what the most efficient thing to do right now would be?

It would be to leave, leave this area. Well, let’s just, let’s just leave.

Let’s just go back. 1:37:43

Oh, we’re still not where we need to be. 1:37:45

Okay. 1:37:45

Let me go back again. We’re still not where we need to be.

1:37:47 Okay.

1:37:47 Let me go in here.

1:37:49 Okay.

1:37:49 All right.

1:37:50 I see some code.

Uh, still not where I need to be. Let me go here.

There’s my style sheet. Now let me scroll up and down to find the thing that I was looking.

Why? Stop.

Full stop. Full stop.

Where is it? There we go.

I hit it. I hit the right sound right off the bat.

Didn’t even know. Okay.

Good guess. Good guess.

Why would I want to do all of that when I can just open the page builder? Logical step.

Look at the thing. Be like, oh, I want to change that thing.

Okay. Click on it.

All right. There’s my classes.

Let’s go down here. Hey There’s all the styling that lives with this thing that I wanted to change, right?

I didn’t have to go look around in a style sheet Didn’t have to go to a magic area didn’t have to do 18 different clicks to find where we’re doing our work. Okay?

That is like you want ease You want organized? This is as organized as it can possibly get.

Not to mention now, with this new root selector, my modified version of this card is sitting right here with all the other styles. I can see what the main styles are, I can see what the modified styles are.

Also, what I’m not doing is going, huh, which panel’s it in? Huh, which input is it in?

Like, this is the number one knock on page builders is that they scatter your styles. All of your styles are scattered through inputs everywhere.

Whereas if you come down here, look at this, it’s all front and center right here. Plus, by the way, you know, I do a lot of stuff with locally scope variables, defining locally scope variables right here, and then being able to use them right here versus having to come up here.

So it’s like, I want to make a locally scoped variable for padding. All right, so we’ll come down here and you wouldn’t want to do this for this kind of card, but it’s just an example, right?

So we’ll just say card padding is space M. There we go, I made a locally scoped variable.

Now, if I’m gonna go, if I’m in input land, I would have to go back up here and use that token, card padding, okay? So now I’m in a different area from where I created the class or created the variable to where I’m using the variable versus now I can make the variable, just scroll down a little bit, use the variable.

So I’m keeping all my work in one place, which is really, really, really nice. This is, this just having the root selector in general was a game changer.

Having this version of the root selectors even more of a game changer. You’re gonna see me do a lot of work here, a lot.

And I would encourage you to, if you especially wanna elevate your game, maybe you’re not the best at CSS right now. Maybe you’re not a master at CSS.

I would start trying to use this area as much as you possibly can. Don’t rely on the inputs until you run into something where, shit, I don’t know how to do that in CSS and I don’t want to leave my workflow to chat GPT this or whatever or you know whatever just then use the input.

But if it’s something easy right and especially if you’re gonna have any card variations or you’re doing anything with locally scoped variables or something a little bit more fancy or you know like for example here well I could I don’t want to I don’t want to sneak peek the code of that calendar, but let me just explain. Let’s go back to Bricks.

I’ll just give you a hint, okay? Let’s go back and look at that template that we were looking at a minute ago.

Bricks templates. And this is what we’re doing with frames, by the way.

This is what we’re doing as much as possible with frames. Now we’re limited in a little bit of a capacity here.

Let’s go to preview this. Okay, everything that’s going on right here, even with the padding in here, in here, so many details, right, that are in other areas or would typically be in other areas, all of the styling for what you see here pretty much, besides the card itself, lives in the grid wrapper parent.

So you don’t have to go, there’s a lot of children involved in what’s going on here. There’s a lot of children in this card.

There’s more children in the card than there are in the grid, actually. There’s a lot of child elements in the card.

You don’t have to go to every individual child element to be like, how do I change the styling for this? You can change it right from the parent.

So you just select the card and then there’s all the styles. It’s like so easy.

If I had it my way, I’d probably need to do another poll. I’ll do another poll.

I mean, if I had it my way, this is what you would see in frames. Now, so many people are like, no, I want it in the inputs.

I want it in the inputs. I’m like, why do you want to hunt down shit in input fields when you could just open this and see?

But it’s because they’re not like experts at reading CSS. And I get that, I understand, but I wish, I wish, you know, if it was just me using it, every frame, all the styles would be right here on the parent.

You would never have to click on a child to look for its styling, right? You would always just select the parent, and there’s the styling for it and all of its children right there.

And you could easily manage everything, change everything, add stuff to it, do whatever you want, all in one place, no hunting and pecking, no going anywhere else to any magic areas, it would be very, very nice, I think. Would that approach not expand your CSS in an unended, I don’t know what that word is.

No. In fact, this should be more efficient, because Bricks, I believe, is scanning the page for classes used on the page and only loading the CSS that is attached to those classes.

Whereas if you take all this and put it in WP code box, every element you style in WP code box, you’re loading the styles on every single page. Whereas this, I believe, I have to double check it, but I believe that Brics is only loading the styles for things that you used on the actual page.

1:44:04 David says, I’m liking this approach, still a CSS newbie,

1:44:07 but I like having everything in a single spot.

Yeah, I mean, that’s one of the most important things. Two versions of frames, beginner and advanced.

1:44:14 Oh my gosh, I just envisioned myself jumping off a bridge

1:44:18 right then and there when he said that.

I just face first, right off the bridge. No, there will never be two, one version of frames is quite enough, my friend.

Quite enough. My blood pressure is high enough as it is.

Having two versions of frames, that is a no. Yeah, and he even said, casual giant project suggestion.

I often transferred frame CSS to input fields. I guess I was on the wrong road.

Yes, my friend. Yes, pump the brakes.

You turn that bitch and yeah, go the opposite direction. You want, it would be better if you were taking things out of here and putting them in the CSS box.

Actually, that would be the best improvement. But if the project uses a page builder, the first logical action that you’re going to have is open the page in the page builder.

That’s what Kevin is saying. Yes, that’s exactly what I’m saying.

We’re still waiting on an indicator for the CSS we write on a class level in the builder. It works on the ID level only right now.

I know, and there’s a bug report for that. And I have no idea why that’s not been fixed yet.

I feel like it’s one of those things where they could fix it in like a jiffy, you know? Technical term would be a jiffy It should be fixed.

It should be fixed already You are not in the builder when you want to change the card from black You are at the front end usually faster to go to know that’s that’s a hundred percent wrong The first thing that people do first of all the difference between being in the front end and the and the builder is this That’s the difference. Okay.

So there is no like you’re on the front end. Now yeah, if I could change styles from the front end maybe I would, but I can’t.

But the natural transition is like, oh there’s the page I want to edit, there’s a button that says edit, then here we are. And now I click on the actual thing I want to edit and go down to CSS.

Here we are. I don’t have to go anywhere else.

But even if, even if I was on the front end and you’re like, okay, now let’s go back. Let’s go back to the front end.

See, I like these arguments though because we can actually analyze them and we can see whether they pan out or not. Okay, I want to go to WP code box.

Don’t see an option. 1:46:46

Okay, so let’s go to the dashboard, I guess. 1:46:49

So still not in the right spot. 1:46:51

Let’s go here. And thankfully, maybe I’m in the right spot, but maybe I’m not.

Maybe I was in another sheet somewhere else. And so now I got to find the sheet I want to be in over here.

And then I still got to go find the styles for it. I mean, there’s no way you are going to convince me that what I just did is faster than what I did before.

There’s just no, there’s no way, there’s no way. This was objectively faster, right?

And here’s the other thing. What if, by the way, to, let’s just put this to bed right now, let’s just put this to bed right now.

When I was building the card, how would the styles get in WP CodeBox? It would mean that when I was building the card, I had to leave the builder to go put them there.

So, and that’s the real workflow. When I’m building a site, you’re suggesting that it’s more efficient somehow for me to bounce back and forth between WP CodeBox than it is to style the element that I’m actually building right here without going anywhere.

And all of its variants, by the way, and all of its children, by the way. I can’t, I don’t buy that.

I don’t, I don’t buy that that would ever be more efficient. Now there could be other arguments like, well, you can’t do mix-ins in bricks.

Hmm, now you got me. You can’t do functions in bricks.

Ah, now you got me. You can’t do nesting in bricks.

Ah, now you got me. If we’re using those as arguments, like Kevin, I have to be able to mix in everything for whatever reason.

I have to be able to functionize everything for whatever reason. I have to be able to nest everything for, okay, now you’re making a case for WP Codebox, and what you’re going to live with is less workflow efficiency.

And you are saying, I am going to make that trade-off. And that is a fine argument to make.

If you’re saying, hey, I recognize there’s a reduction in workflow efficiency, but I get these other benefits and I prefer these other benefits over workflow. I can’t argue with that.

There’s no arguing with that whatsoever. You do you, dog.

You make your own decisions, okay? What you’re not gonna be able to say is WP Go box is more efficient than writing the CSS right here.

Just from a, where do I go to find the styles? How fast can I get there?

When I’m building, how fast can I add them? It’s undeniable that the CSS box is the fastest way to do this.

1:49:13 Okay.

1:49:14 No, I’m suggesting opening CSS Style Sheet in VS Code, not WP CodeBox.

I’ll do a poll right now. .

0001% of users work in VS Code on WordPress. I’ll just tell you that right now.

. 00001.

And no, it’s still not, because I’ve got to open VS Code, I’ve got to find the right project, I’ve got to do this, I’ve got to do that, I’ve got to make sure the connection’s all, because that’s all, just getting all that set up in the first place, no, no. I’ll just open Bricks and I’ll just put my styles right here, that’s it.

Yeah, why open VS Code for a project done in a page builder unless you need some specific style? Yeah, there has to be another reason you’re doing it.

Nobody ever in the history of ever would be like, you know what’s the most efficient way to style a WordPress site in a page builder? It’s to go into VS Code.

That’s not, I’ve never, I would never expect to hear that argument ever. There would be other reasons why you might want to go into VS Code, but workflow efficiency is not one of them.

1:50:21 VS Code is a code editor.

1:50:23 It is a standalone IDE.

1:50:26 Here we go.

1:50:27 You want to see it?

Here it is. Right here.

Hmm. Yeah, you get all these panes, all these windows, all these everythings.

This is not where we would want to be doing page building work typically. All right, we are in an open Q&A for the next 10 minutes, then I got to go.

Open Q&A, AMA, put question, all caps. I think we spent too much time looking at BRICS 1.

9. 1, but it was interesting.

I think it was valuable. It was good.

But I do have to apologize to people who have questions who have been waiting patiently to ask questions. Can you replace radio buttons with images in WP Grid Builder facets?

My gosh, woo! No warmup, Rob.

You gave me no warmup, my friend. Zero warmup.

I don’t even know if I have Grid Builder on here. I do.

Facets. Ooh, event category selector.

Do we have an events page I can look at that has one on here? Events, events, events, events view.

1:51:42 Ooh, there’s a facet.

1:51:43 There’s a facet.

Uh, can we hijack a facet? 1:51:46

What is it? 1:51:46

What kind of facet is this? Radio buttons.

Okay. What would be a radio button?

Um, this, maybe we could radio button that. Yeah, we should be able to.

Um, what is that product order? 1:52:04

Product order. 1:52:05

That’s not product order. It would be like event order.

All right. Let’s just see what’s going on here.

There it is right there. 1:52:09

Okay. 1:52:10

Let’s change behavior. 1:52:12

Wait, there already is. That’s already as a what, what go back.

1:52:15 Event search.

1:52:16 It’s it’s this sort.

1:52:17 This might be one of those that you’re not allowed to hijack.

Let me see though. 1:52:20

Yeah, you can’t. I don’t think it’s going to render now if I change it.

Save, re-index. No, it doesn’t render.

It’s going to be hard for me to, like, on the fly, build a whole thing that’s going to be facetized and all that. That’s a question that I ask this in the inner circle, and then I will look into it when I don’t have, like, you know, five minutes left.

And I will give you an answer. We could actually go to WP, maybe just go, I don’t, see my biggest knock on WP Grid Builder is they show grid after grid after grid after grid after grid.

The faceting is the most important thing of this. They just have like one little area on their faceting and then here’s an example right here.

Okay, they need to sell their faceting more. In fact, I would like if they just sold the faceting part of this separately.

I don’t even need, I don’t need all the other grid stuff. I just need the facets.

That’s all I need. Give me a scaled down version.

It’s it’s I believe it’s this input right here. Radio control.

It’s an after element. The problem is, you want to use, let me go back to the thing.

Kevin hide the chat. What you talking about?

You talking about Rob’s question? Oh, I want to go back to his question.

Replace radio buttons with images. I’m just wondering why you would, what do you want to put there?

Do you want like one image is like an unselected thing? Like maybe, maybe it’s like a frowny face.

And then when you select it, if it comes to happy face, what do you want to do? What are you trying to do here?

If you give me more specifics on what you’re trying to accomplish, because right now I’m just like, why? I mean like what’s wrong with an op, a styled option field.

Is there something wrong with that? What is the use case for using images here?

1:54:32 Then I can tell you.

1:54:33 Okay.

1:54:34 Do you use WP CodeBox to style the content in Gutenberg

1:54:38 or do you style the content using Bricks?

You can’t style Gutenberg stuff with bricks. So that’s a little confusing.

I don’t do a lot in Gutenberg. I’ll tell you right now.

If I don’t have to be in Gutenberg, I ain’t in Gutenberg. The only thing I’m in Gutenberg for is like a blog post.

That’s it. That’s the only time I’m in Gutenberg.

At least for right now, at least for right now. But let’s say, I’ll just take your question, Tyree, and we’ll say, if you were using, for example, GeneratePress and you were making a card in Generate, where would you put the styles?

Well, in that case, I’d put the styles in WP CodeBox. Why?

Because I’m forced to, because they don’t have a class first workflow in Generate. So I can put a class on something in Generate, but I can’t add styles to that class in Generate.

Therefore, I’m forced to go to WP CodeBox to add the styles. Just like people who use Generate typically are forced to go to the front end and then open the customizer and put everything in the customizer, but then they can’t even see the styles and the customizer inside Gutenberg because Gutenberg’s a trash can.

And then it’s a blah, blah, blah, blah, and, and, and, and, and, and, and, right? That’s why I don’t do that workflow.

That’s why that workflow is terrible in my opinion. But yeah, if you’re forced to put things in WP code box, then that’s another story.

1:55:59 Okay.

1:56:01 Okay, Kevin is passionate about what he thinks to be true.

I like that. But it’s not what I think to be true, right?

Some things are just reality. It’s like, so that’s why I can just show it, just demonstrate it.

Like, hey, this way took me eight clicks. And when I’m coming back to a site three months later, it’s better for my CSS to live with the thing I want to change than to be in some other obscure third-party place where I’m not doing work.

And we can demonstrate that that is, that it’s more efficient this way than it is this way. And if something is demonstratable, it’s just up to people to be like, I accept reality, or I’m just going to continue denying reality.

I mean, clearly we’re, now somebody can come along and be like, no, let me demonstrate a different way. Maybe you’re missing something.

Here’s what you’re missing. Let me demonstrate that this way is actually more efficient.

Then I watch and I go, damn, you’re right. The problem is that never freaking happens.

People just say, oh, well, this Kevin’s opinionated. Kevin’s this Kevin’s that it’s like, dog, I’m showing you like I’m right here.

Here we all are together. I’m showing you, I don’t know what else to do.

If you don’t agree, you show me a different way and then I’m forced to take a look at another option. The problem is the people who are always like, oh, he’s opinionated, he’s this, he’s that, they never show any alternative.

Like where are your alternatives? Show me.

And they never seem to be able to hit record on anything. And so it is what it is.

1:57:36 All right.

1:57:37 You have your blog content customized, your images in a post are stretched beyond container width, for example.

Oh, yeah, good question, okay. I believe you’re probably talking about giri.

co. Let’s bring that in over here.

Blog, here, okay. Oh, by the way, if you watched that video the other day, there’s a full write-up.

I’m testing out, you know, sometimes we’ll do a full write-up, but you see here, like this image breaks out and the code blocks break out. The answer is yes, this is all done in WP CodeBox.

But it’s done in a way that it’s not like there’s no class for breakout or anything like that. I just target figure elements, iframes, and code blocks, and I break them out.

So they don’t even need classes on them, or they just break themselves out when I add them to the page. 1:58:30

Is the explanation earlier explaining the root function in CSS? 1:58:34

Yes, correct, correct, correct. Question, say you have an events website, is there a way to make the event titles and dates appear when people Google search business events without people having to open the site like a snippet?

Let me read this again. Is there a way to make the event titles and dates appear when people Google search business events?

So what is or isn’t a snippet is up to Google. You don’t have any control over whether it is or is not a snippet, but you do have some control over whether it’s snippetable, let’s say that, okay?

So if you look at how snippets are formatted, and then you format parts of your post to mimic that, and then for events, for example, there’s schema that you can add, and that better helps Google understand, hey, what this is and the details of it, right? And then Google is saying, okay, the schema that we need exists, it’s in a format, like the, it’s in a logical tight format where we can snippetize this, then Google might select you for snippets.

But it also comes down to, are there any other events for that? It depends on what the query is, whether Google’s even showing snippets for queries like that.

So you don’t have full control over it, you have partial control over it. It would be great to have all the CSS in the item from frames.

It would also be a great place to learn by breaking it and fixing it. You mean the parent item, like the parent block.

Yeah, I’ve made that argument before, but I was shot down. I was shot down in a user poll people wanted more people wanted the styles to be in input fields When we can when it makes more sense to put them there now Sometimes it doesn’t make sense to put them there It only makes sense and sometimes the input fields can’t do what we’re trying to achieve So we have to put it in custom CSS So in that case we do but then we do try to use input fields for basic stuff That should be possible using Dom tags, right Kevin Geary?

I think are you still talking about this stuff breaking out on the screen? Yeah, yeah I just in the blog post template so the selector is blog post template like right here and let’s go to inspect.

Maybe we’ll be able to see it, maybe we’ll be able to see it. Let’s select this image.

Okay and that’s in a figure tag right here. So you see Brixie post content targeting a figure that’s not no breakout.

So I have a class called no breakout. Anything that I, any figures that I don’t wanna break out, any code blocks that I don’t wanna break out, any, cause they’re all, remember, they’re all gonna break out by default.

So, but anything I wanna avoid the breakout on, I can put this class on called no breakout. And then this is what happens right here.

So it just gets 25% wider and then the margin fixes itself. And that’s it.

There right there is the, and there’s actually a variable called element margin that I can control as well. But yes, you’re more or less just targeting DOM elements, like the actual HTML selector.

Okay, let’s hide that comment. HTML selector.

Okay, let’s hide that comment. 2:02:01

Five minutes. 2:02:01

Do you think native facets from Bricks roadmap will make WP Grid Builder redundant? 2:02:06

I hope so. 2:02:07

I hope so. 2:02:08

I mean, 2:02:09

like I said, there’s no other reason other than facets to have WP grid builder. So if bricks is able to, the problem is, and I talked about this, the problem with page builders, I talked about this last week with regard to the bricks form element.

Forms are quite complicated. Facets are quite complicated.

I mean, let’s take a look at this. I mean, look at the ability that I have.

When I’m creating, let’s go to create facet. All facets create a facet.

So I can give it a name, this is easy. I can give it a slug, I can give it a facet title, whatever, this page, whatever.

But now we get to this tab. Now this is starting to look a little complicated.

I mean, look at all the conditional logic that’s going on here. So when it’s a load facet, it can have these options.

When it’s a filter facet, it can have all of these options. There’s map facets.

If I’m sorting, look what has to happen here. If I’m applying data, if I’m resetting, okay?

Like there’s a lot, and then every one of these options, look at what’s happening down here with things that you can do or not do. Not to mention that the facets then have to be able to target specific loops on the page that you actually want to facet.

So the question I have is, Brick’s gonna be able to replicate something as robust as this, or are they gonna have to give us some watered down bullshit that kind of does like, it does like the minimum, the basics, but if you get deeper into a project, you really can’t do what you need to do? That’s exactly how the form element is.

It’s a surface level form element. It gives you the ultra basics of adding a form to a page.

Anything that you need to do that’s more advanced beyond that, you can’t use the Brics form element. So then it becomes a, when you have a business doing this, you have an agency, you have a team, you have processes, you have workflow.

If Brics cannot mimic this faceting functionality, just like it can’t mimic the WS form functionality, we have to rule it out completely. Because we’re not going to create a situation where we go back and forth.

I was like, sometimes we use the BRICS facets and sometimes we use WP grid builder. No, because from a process standpoint and an efficiency standpoint and a maintainability standpoint, we want to use one tool to do the thing.

Like we want to use WS form to do every form. Some people will be like, well on certain sites I just need basic forms.

I don’t care. I’m still using WS form.

WS form does a basic form just as easily as it does an advanced form. So I would never want to be in a situation where I open a site and it’s like, oh this form was built with Brics form and this form was built with WS form or this site has no WS forms, it only has Brics form.

Because now your brain has to learn two systems, remember two systems, remember where different inputs are in different systems. No!

We want to avoid that completely. We want to stick with a thing that does everything we need it to do.

WS form will do every form I need it to do. And so I’m going to use WS form for literally everything.

Facets. Grid builder does everything I needed to do for facets, thus I’m gonna stick with grid builder.

The only way I would switch is if Bricks gives us a solution that is as robust, right? It can’t have any shortcomings.

If it has shortcomings, I’ll stick with WP Grid Builder because I don’t want to implement a brand new thing on some sites and not others. And now we’re stuck managing two different processes and workflows.

That is not efficiency. So hopefully that answers that question.

Tyree, I’m glad you like it. Glad you like it.

He says it’s one of the best WDDs so far. What advice do you have for getting clients in your local area who have poor websites?

Don’t get clients in your local, I’ll just give you, I’m not gonna tell you what to do to go get clients. I’ve already done plenty of that.

Watch other WDD lives, watch my inner circle trainings on getting clients, but I will answer your question with something that will help you tremendously. Is everybody listening?

Guys, come in, come in, come in, come in, come in, come in, lean in, lean in, lean in, here we go. I’m gonna give you something.

This is going to avoid you wasting so much time, okay? I’m about to, every dollar that you paid for this stream right here, you’re about to get your money’s worth, all right?

You do not contact people who have poor websites. 2:06:53

I’ll tell you that right now. 2:06:53

Do not contact people who have poor websites. Why?

Because they don’t give a fuck about their website. That’s why they have poor websites, okay?

Contact people who have decent websites who you think are not getting good results from their website. That’s who you contact.

Contact people who have obviously put money into their website. They have invested heavily in their website and you think they’re not getting results for whatever reason.

Okay, why? Because those are people who are actively investing in their website.

Do not find the guy, all right, imagine the plumber, the plumber that his website is obviously from 1999, okay, and you’re going to call him up like, hey dog, did you know your website is just absolute trash, like it’s from 1999, it’s probably, and you know what he’s going to tell you? I don’t give a fuck about my website.

I have so many clients right now, I don’t know what to do with them. My Google My Business is rocking off the charts.

I got yellow pages, ads, I got trucks. Whatever he’s doing, he doesn’t care about his website.

So you’re not going to be able to sell him a new website. He hasn’t put money into it since 1999, and he just doesn’t care.

He’s good with what’s there. And what you’re gonna find is the psychology of people with the shittiest websites, they just don’t care.

They don’t wanna invest in a new website. You need to find people who are already clearly investing in their website and start conversations with them.

Because they obviously care about it and they’re already putting money into it. All right, so hopefully that helps save you a tremendous amount of prospecting time and energy.

2:08:28 Okay.

2:08:29 Um, let’s go with hide current comments.

2:08:32 Good.

2:08:32 Okay.

2:08:33 Leaning in doesn’t help.

Uh, can’t see your face. 2:08:35

I’m just telling you guys, that piece of advice right there will save you days, weeks of wasted prospecting time. Okay.

I got one more question that I’m dipping out. 2:08:54

Let me find a good one. 2:08:55

I’ll find a real good one. Let’s see.

Uh, Cookie Consent plugin. No, I don’t, I don’t care about Cookie Consent.

I don’t care about GDPR. I it’s not, it’s, uh, America.

2:09:06 Okay.

2:09:06 We don’t, we don’t, we don’t, we don’t do GDPR here.

Um, which by the way is ruin the fucking internet. Every website I go to, I’ve got to close 17 pop-ups and consent notices before I can actually use the website.

My gosh, kill me. All right, let’s see.

Bricks Editor is wondering, okay, when would someone use the CSS classes under the code box in Bricks Editor? CSS classes under the code box in Bricks Editor.

Oh, oh, oh, I think I know what you’re talking about. Okay, here is the question.

When would, this will be the last question then I got to dip. This is a good question.

It’s never been asked before on a WDD Live. So I will choose it and we will go over it.

When would someone use the CSS classes box under the code box in Bricks CSS editor? Just wondering, because I’ve never used it.

So I will hide that. I will remember to hide the comment.

We’ll hide the comment, okay. We’ll go into any one of these pages.

We’ll get the job done. And here is a, oh, I guess this is the page.

Was this page where, no, this is just a different page with a very, very similar card. Hey, there’s a little toggle button that we made.

Okay, sorry, ADD. All right, let’s go down here and let me choose the actual card, concert card right here.

Okay, open this class right here, CSS box. You’re talking about these boxes right here.

Yeah, why is this here and why is this here? Well, the idea is here, even though I believe you can come up here, let’s deactivate the class, but it’s not great UX.

You used to be able to double click in here, or, oh, there you go, you can edit it, okay. So you can edit the idea from right here.

You can call this like concert card, which you would never want to do, because this is a repeating element, like never do that. But if you were doing like an anchor link, okay, you’re making an anchor link to this section right here.

I do this all the time, I give the ID right here. So I’ll just say anchor section right there.

And now look what’s happened up here. It’s just another place to edit your ID.

And then for classes, you could put utility classes here. Let’s say I, now it’s actually,

2:11:18 it’s not a problem.

2:11:19 In oxygen, it is a problem.

In oxygen, this would be handy. I don’t even think this exists in oxygen.

In BRICS, it’s not a problem, and I’ll explain why. So what I can do here is, watch this, what am I on?

Am I on the card? No, let me get on the card.

Let me go to here, and let me do BG base ultralight. Look at that.

Oh, let me do something you guys can actually see. BG base, see that?

It applies what I put here to the element. The difference is it does not create a class in the database up here.

So this class, had it not existed before, still will not exist up here, okay? Now, why is that important?

It’s really not, because when you add a BG base up here in the database It’s not loading any selector in the Brics stylesheet Unless I assign classes to it if I assign styles So if I unlock this class and I come down here and start doing things to this class Now it’s going to add this to Brics’ stylesheet style sheet. Okay, if this is a locked class and this style is actually coming from an external style sheet, which is what’s happening with automatic CSS, Bricsys is not adding this class to its style sheet as well.

Oxygen, however, is not so bright. Oxygen, if you notice, you inspect an oxygen site, every automatic CSS class in oxygen is again repeated in the oxygen style sheet and every selector is blank.

Like what? Like that’s, hmm, hmm, hmm, hmm, quit doing that.

I don’t know why it does that. It’s not intelligent.

Not to say that the developers aren’t intelligent, it’s just like an oversight or something. One of those things that should have been fixed like two years ago in oxygen that’s still not fixed, oxygen adds blank selectors.

So it would be a good idea to come in here in Oxygen if this existed and add your utility classes down here. But then the problem with this box is that you don’t get any auto fill or guessing or anything like that, auto complete.

You don’t get anything, you don’t get anything down here. It’s just a raw box that adds classes to this thing right here.

So I don’t know why this exists. There’s no reason, you know, somebody could be like, well, I don’t, I want to write my style in WP code box.

I don’t want to put extra, but Bricks is not going to put extra styles in its style sheet unless you add additional styles here. So it’s not a problem.

If you wanted to create, yeah, I don’t, I don’t even know. I’m racking my brain right now for scenarios where this would be super handy and I just can’t think of one.

So if anybody else can think of one, I mean, tell me what I’m missing. Tell me what I’m missing, because I don’t know what this box, what the benefit of this box is for versus just doing it up here.

And that’s going to be it for today, guys. That’s it.

Full screen that, well, I’m showing something. I’m showing something.

No, I can’t full screen my face, because if I do this, then I’ll start screen sharing shit and forget that you’re staring at my face. So it’s much safer for us to be here.

All right, guys, hit the like button. I’ll be back next week to do another WDD Live.

I got to get out of here. I’m going to get some lunch and I’m going to go start recording the advanced training for that nice little schedule that I showed you guys earlier.

So

Hey, hey everybody. What is up?

We got David in the house. Tyree, welcome.

Jason, Andre. Andre is here.

Zale is here. Sylvia, Squinting Yeti, good to see you.

Calisthenics Ireland, good to see you. It is another Wednesday.

It is 11 a. m.

That means it is time for WDD Live. If you are new here, here’s what we do at WDD Live.

We do in-depth web design critiques. We look at everything that makes a website successful, or in many cases, unsuccessful.

And we learn from those things, we learn how to make better websites, and then you take what you learn here in WDD Live, and you bake it in to your next website. These things should be top of mind, right?

So as you’re building your next project, or maybe even you’re working on a project now and so you watch the stream, you go back to continue working on the project, you make some tweaks and adjustments based on what you learned in the latest WDD Live. We also do a bunch of Q&A.

We do an AMA segment, which is just Ask Me Anything, and when you ask questions, you get to get help on a variety of things. I mean, you can ask questions on SEO, PPC, copywriting, marketing in general, anything that your client has asked you that you’re not sure about, you can throw those in here.

You can talk about business, pricing, statements of work, process, hiring. I mean, it’s up to you.

It is AMA, Q&A, ask me anything, whatever you guys want to talk about. Today’s agenda, we have two website critiques that we are going to do.

Then I’m gonna give you a sneak peek of a frame that I’m working on. What is this thing on my mic that’s like buggy?

It’s like a hair or something, gosh. How am I, it’s like in my vision.

We are going to be sneak peeking a frame that I’ve been working on. We’ve covered, Frames has covered so many, it’s like tons and tons and tons of all the basics, like all the basics have been covered.

We’ve released some intermediate frames as well, for sure, and a few advanced frames, and we’re gonna be doing, you know, moving more into the intermediate and advanced frame territory now, because so much of the basics and foundational stuff has been covered, we get to really start having a lot of fun with frames. And one of the ones that I’m going to show you today is actually a frame, I mean, any website that uses a schedule of any sort, the frame actually came from, I mean, I’ll tell you more about it when we get there, but it actually came from one of the needs of one of my clients.

So it’s going to be a very, very useful frame, and it does present a lot of challenges. And we’re going to talk through some of those challenges and how we’re going to solve them.

And this particular frame is actually going to be an entire training in the inner circle. So I’m going to teach how to build this exact thing from scratch.

But we’ll, we’ll talk about that when we get there. And then, and then I didn’t plan this, but there’s breaking news guys.

There’s breaking news. Bricks 1.

9. 1 was just released and it’s a bit of a juicy little update.

And so we’re gonna we’re gonna take a little pit stop a little side quest. We’re gonna if you will a little side quest into Bricks 1.

9. 1 and take a look at a couple of things that interest me caught my eye.

One of the things is a feature request that I put in like a week ago and it’s already here, which is absolutely fantastic. And it’s a really, really super useful feature request.

So we’ll take a look at that. And then after the little side quest and the frame sneak peek, we will open up to Q&A and AMA.

That’s a lot to cover. That’s a lot to cover.

I also don’t want to be here for like two and a half hours. I have, I have tons of work.

I got a video on Monday published. I got a video on Tuesday published.

I had to record this summit video. I’ve got inner circle videos that I’ve got to record.

And guys, I got – I mean as if I’m not busy enough, I got suckered somehow into being the head coach of my daughter’s softball team. And – but I got to tell you, the problem with this is – the problem with this is if you say, Kevin, do you want to coach this peewee softball team?

It’s peewee. It’s peewee, it’s peewee, you know, they’re eight, nine years old, whatever.

Actually, I put my five-year-old on it too. I was like, hey, you gotta be able to hit.

She wanted to be on the same team as her sister, right? I was like, you gotta be able to hit and you gotta be able to not play with the dirt, okay?

If you can not play with the dirt and you can hit, you can be on the team. And, oh, she’s crushing it.

She’s like, yeah, she’s a little slugger, okay? Now not playing with the dirt.

That’s another question We’re still working on that part, but she’s a slugger right all these other girls at her age in t-ball now She’s hitting she’s hitting real pitches, okay? But here and this is that you can already see me talking about it This is the problem when you’re like Kevin do you want to be a the head coach of the softball team?

I can’t just be like yeah, and then kind of like show up here and there. No, no, no, no, no, no, no, no.

I’m too competitive for that. I’m too competitive for that.

So, I mean, we’re doing, we got practices. We got games, like there’s like three games a week, okay?

There’s practices in between. I mean, we’re running this thing like, it’s, we’re gonna dominate.

I mean, that’s the bottom line. You know, we’re gonna go in and dominate.

So if you assign me, if you assign me to a role like that, we’re gonna go dominate. Okay, so here’s the thing.

We need to get right into this. These reviews might be, if there’s nothing super, super valuable or interesting that we’re coming across, we might not go as long on each website because I do wanna get to the sneak peek and I do wanna get to the BRICS 1.

9. 1 and I do wanna get to Q&A AMA.

We gotta try to fit everything in. It’s a tall task, but we’re going to get it done.

All right. Let’s see if anybody’s in the chat here.

I want to see the softball team website. No, it will not have a website.

It will not have a website. That doesn’t give us any value, right?

That doesn’t help us win games. All right.

Yes, yes, yes. Yeah, they didn’t have anybody else.

I did. I was an assistant coach last year, and they had more kids this year and they had to split into two separate teams.

They didn’t have a coach for the other team. So I decided to step up.

I mean, if there’s an opportunity to compete, we’re going to compete. You know what I’m saying?

Okay. Just checking the chat real quick.

Chat, chat, chat, chat, chat. Okay, let’s get into it.

Let’s get into it. We are going to start with Just Bath.

Let me get some screen share going here. All right, this is what we’re working with out of the gate.

Just Bath tub and shower systems. We’re gonna do our no scroll test first.

I will say there’s a lot going on here above the fold. There is a lot, quite a bit going on above the fold here.

So obviously this is a bath and tub remodeling. And we can see this here, bathroom remodeling in PA, MD, VA, DC,

0:07:20 okay?

0:07:21 Experience top-tier bathroom remodeling with Just Bath USA serving Pittsburgh and surrounding areas.

We transform your vision into a luxurious reality. All of our products are custom fit and backed by lifetime warranties.

So what do we all see, I think, right off the bat is we’ve got a transparency issue right here. This is a no-no.

We don’t want to be using a transparent background here when we’ve got this trying to overlap on top of this slider right here. There’s just it’s too much happening in this area right here.

Too much. Let me like this area right here.

We’ve got a bit too much going on. Makes the text hard to read.

The image is now sliding behind my text. So just make this solid, right?

Let’s go in here and see what’s going on. Now I will say, and by the way, if you submit your website to WDD Live, right, it lets you know what to expect.

And you guys know, this is called web design for Dommies, right? It’s like we look at the Dom, this is the Dom right here.

If you’re new here, we look at the underlying code quality. We look at things like accessibility.

This person put in the name field, in parentheses, avoid the DOM, or something to that effect. They were like, please no DOM.

That’s what they said. And if you tell me that, guys, I’m going straight to the DOM.

Okay, I’m going straight to the DOM. I gotta see what’s happening here now.

Now you made me super curious, right? All right, so here we are.

We’re already in the DOM. It’s really just to fix this thing right here.

Okay, so there you go. So the background color right there, let’s just go white.

Okay, that’s the easy fix, right? So this is what should be happening here.

Avoid the transparency in that situation. All right, so we’ve got call today.

Does this open an actual, okay, that’s interesting. That doesn’t actually do what it says.

All right, that opens a off canvas over here. Call today.

Does this button call? Okay, that button actually calls.

But I would avoid, this should say like get a free quote. Buttons need to, if the button text says something, it needs to do that thing.

So that’s going to be a little bit confusing for people. All right, what else do we need to look at on our no scroll test?

How about our navigation? Let’s see what’s going on with our navigation.

Okay we’re going like I would call this like maybe a pseudo mega menu kind of situation. It’s not like a traditional mega menu, but it’s not a traditional drop-down either.

Okay we’re gonna check out the accessibility of this in just a second. And I didn’t even look when I was in the DOM.

Is this oxygen? Yes this is built on oxygen for those of you who are curious.

And is it using automatic CSS? I don’t know.

Let’s see. Let’s go in here.

It looks like it is, okay. But it’s got some other classes going on here, like BoxShadowTL.

That’s not a CSS class. I mean, I guess we could view source here.

Yeah, automatic oxygen CSS. Okay.

All right, just getting a lay of a feel of the feel of what’s going on here in the environment. Okay, let’s let’s check first accessibility on this navigation.

Okay. Activate.

I can go in. Okay, it goes to the next one.

Okay, all right decent decent okay oh where we go where we going next uh-oh uh-oh hold on we’ve lost where are we now we’re on we’re on a telephone link but where is the telephone link I do not see it I don’t I don’t have any indication of what I’m currently selected on now I’m on services wrap why am I in services wrap I’m gonna keep tabbing now I’m on a link and I don’t know oh there they are down here, down here, down here. Okay we got a little bit of work to do on our focus styles because of the way you’ve styled these boxes down here.

It’s interfering a bit with the focus styling. We’ve got a tab situation that’s not accessible.

We’ve got a slider image situation that is not accessible. Doesn’t appear to be.

I don’t know if I’m on a, no, oh dear. 0:11:46

Yeah, I don’t know where I’m at. 0:11:47

Oh gosh, okay. Now we’re on somebody’s Instagram.

Okay, so the accessibility leaves a lot to be desired. Let’s just say that.

We need to do a lot of work on the accessibility side of things. All right, let’s continue down.

Our bathroom remodeling services from tub to shower, shower to tub conversions, hmm. And full luxury bathroom remodels, Just Bath can handle any custom bath requests.

I don’t, this is so wordy for you. Did you try to do, did you think this was like an SEO benefit or something?

Why, from tub to shower or shower to that’s, you know, it’s, it’s a given, right? You could go either direction.

I don’t think you have to say both of them explicitly. We have hundreds of custom bathroom designs to fit your style, freshen up your bathroom or completely redo it.

The possibilities are endless with just bath in charge of design and installations. We’ve got bathtubs.

Oh, I’m not real fond of this right off the bat. I’ll just tell you, okay?

Here’s the thing, if I like hover over it, it’s like, what am I selecting again? Like, I guess I kind of see a photo of it, but like, here you go.

Here’s a shower. Here’s a shower, right?

I don’t like the fact that the text goes away. They’re like, what I’m selecting, I have to, if I forget, you know, here I am looking at this, you know, great image back here, whatever.

And I’m like, wait, what again? Am I clicking on, what am I selecting?

Well, all the text is gone. All the indication of what I’m actually choosing is now not there.

So while this effect might be cute to some people, in terms of UX, user experience, it causes a potential problem, right? I’m a big fan of retaining the information that the user is about to click on.

So I would say to make an adjustment there. Like you can get rid of those text things, but leave the heading.

The heading should stay inside of this card so I can see exactly what I’m choosing when I choose it. And then I will say about the general style.

If we’re gonna comment on the general UI design of this website. To me, if I had to guess, I don’t know anything about the backstory of this website.

I didn’t even look to see who submitted it. I’m just pulling up the websites, okay?

So honest opinion is this is very like, you know, 2090. And it seems to be, if I had to guess, it was like a developer also did the design.

Not a true designer who is on the up and up when it comes to modern design trends and things like that. It feels old, it feels outdated, it feels a bit cluttered, it feels like this box shadow thing, or double layered whatever’s going on here.

That’s almost like, that almost feels like a bit more like early 2000s, right? Maybe 90s, I can’t even remember.

I’m not good with dates. What it doesn’t look like is 2023, I’ll tell you that right now, okay?

So the colors, it’s like, all right, I don’t know, I don’t know. We see like the background image here.

This is not to me a background image that a great designer would ever choose. This kind of gradient on the buttons, it feels all very old style.

Now here’s where I’ll turn to the chat. I’ll turn to chat and say, do you guys agree?

What’s your take on the UI here? Does this feel outdated to you or does this feel modern to you?

And we’ll just see what everybody says. Yeah, so Ruben says very 2000s style.

Let’s go on down. I’m not a huge fan of like, I’m just not a huge fan of gold in general.

There’s very few sites that use gold as a color that I’m like, damn, they did that really well. You know, it’s one of those colors that’s very easy to mess up.

And it does not look good. Like this to me this gold looks a little bit I don’t know if it’s too yellowy or too muddy I don’t really know how to describe it but it’s just not great it’s just not it as it you know gold sometimes can obviously scream like luxury right maybe that’s what they were going for but to me it’s this this particular version of gold just doesn’t really give me that vibe.

It gives me like an almost there vibe. I don’t know.

0:16:30 Okay, it feels outdated,

0:16:32 but the bathroom pictures also don’t feel very modern.

I know this right here, this is one of those, they do a lot of like, I don’t know if they’re using inlays or whatever, but I can tell that pattern, like it’s very, that’s like the latest trend. At least over here in the United States.

They’re doing this all the time with bathrooms now. It’s hard to tell honestly because these pictures feel a bit low res.

They’re far away, like tub and shower. Okay, I’m looking at a tub and shower but it feels like it’s 50 feet away from me and I’m looking at a tiny version of it.

So these images again, it’s like, hey, we can do this cute effect where we have an overlay and an image comes in. But then if we look at it, it’s like, but does that provide any value to the user?

They can’t really gain any information from this photo. We lost the actual name of the thing that we’re clicking on.

I mean, the cons list is just adding up and the pros list is, there’s no benefit to what’s happening here. So this would have been an idea that I would have nixed had it been presented to me.

And like just water, water. I mean, this is like, I don’t need to see this.

This is boring. This is, um, yeah, I don’t, I don’t know.

0:17:46 Uh, okay.

0:17:47 Let’s go to this.

This definitely feels outdated. This, I mean, what, what’s going on here?

Our process. I mean, is this supposed to be somebody calling the schedule an appointment?

We need a different photo here. We need a different photo here for sure.

Uh, Oh, I see. It’s it’s the, there’s a photo to go with each step.

Okay, let’s see. Book an appointment with us.

All right. I would still change that photo.

Plan with our design consultants. Okay, this is a stock photo.

This is fake. 0:18:18

Feels fake. 0:18:19

I mean, it’s, you know, it’s, I don’t know. We need a different photo.

This feels real, but it’s all pixelated and everything Measure and build your dream bath, okay This is not step three. I measure and I’m not doing it right so I would I would reword this here Install your new bathroom outfit.

I’m not am I doing the work I’m confused now like are y’all doing this or am I doing this? And that needs to be a different photo for sure.

So we need to rework our text here, we need to rework our photos here. Here are the, yeah, I’ll tell you this right now, this is the current trend.

This is the current trend in, at least in the US. This is what they’re doing to every freaking shower that they can get their hands on over here, okay?

And they’re charging mad money to do it. All right, I don’t really have a problem

0:19:12 with this gallery right here.

0:19:13 You know, this gallery’s fine.

Okay, let’s go down, why choose us? Notice that, you know, we had to get very far down, right?

0:19:21 Very far down.

0:19:23 Before, one thing I’m looking for constantly on websites is, and this is just like marketing 101, okay?

What is your unique selling proposition? What is your USP?

Why are you different? Why are you unique?

Why should I pay attention to you? And if we do a quick, just grade on USP, we just go section by section and ask ourselves, were we informed of the USP in this section?

Were we informed of the USP in this section? Were we informed?

And so you look here, it’s like bathroom remodeling, okay? Very just tell it like it is, factual headline.

Experience top-tier bathroom remodeling, serving Pittsburgh, blah, blah, blah. We transform your vision to a luxurious reality.

Everybody says this. All our products are custom fit.

Okay, so maybe this is a. .

. But I don’t know.

I think that’s everything in the bath space. I mean, backed by lifetime warranties.

I mean, if everybody can say this, then we haven’t said anything unique yet. There’s no unique angle on what’s happening here, which basically begs the question, if you don’t understand why a USP is important, people are weighing their options.

There’s this company I can choose, this company I can choose, this company I can choose. Why, which one should I choose, right?

Why, what is the difference? And your job is to communicate that difference.

Your job is to tell them why you and not someone else. Because otherwise, I mean, what I should just randomly change.

I just throw darts at the wall. I need to know what are the differences.

And then so we get to this section right here and we see, you know, it’s no, I mean, you have, OK, it’s the same same copy I see everywhere. Same options I see everywhere right here.

OK, so I come down to process, book an appointment, okay, that happens everywhere, doesn’t it? Doesn’t it?

Isn’t step one with every, every company I could go to, I, that’s probably step one. Okay, so plan with our design consultant.

I’m guessing that that’s also step two with almost everybody that I could hire. So this isn’t really doing the job of unique selling proposition.

Once you commit a one day remodel or luxury bathroom modeling project with Just Bath, okay, so this, this right here, this is a potential unique selling proposition. So, if I hire, let’s say there’s 10 companies to choose from, and nine of those companies, it might take a week for my bathroom to get remodeled.

But this other company says, no, no, no, this can be done in one day. Then that is a unique selling proposition.

Okay, that is something that these other companies cannot say, cannot actually pull off and execute. And it’s a promise.

It’s a promise that has a lot of value because I don’t want my bathroom to be out of commission for a week. I want my bathroom to be out of commission for a day.

That sounds a lot better to me. That’s a lot more valuable, right?

If this is in fact true for every project, this needs to be front and center. 0:22:27

This needs to be you. 0:22:28

So the concept that I refer to all the time is a journalist concept, right? It’s called bury the lead.

You’ve buried the lead. You’ve buried the exciting thing.

You’ve buried the important thing somewhere else in the article. And right here, we’ve buried the potential unique selling proposition four sections down and three tabs in, which means a lot of people are not gonna see it.

A lot of people are not gonna know that this is the possibility, right? So, you know, up here in the main heading of the page is an opportunity for you to talk USP.

Get people, wouldn’t that, okay, tell me this, which one would make you want to read more of this website? Bathroom Remodeling and PAMDVADC or one day bathroom remodeling.

Like just insert that one thing and it’s suddenly this headline becomes much more intriguing, much more intriguing. You guys can do this in one day, you can pull that off.

I need to know more, obviously. And if I’m comparing five different companies and this one saying it right there front and center, one day bathroom remodel, hey, hey, you got my attention, at least.

I’m, you know, it’s not a guarantee that I’m gonna choose you, but you definitely have my attention. And that’s the whole point of an H1 heading, is to grab people’s attention, make a promise, have a unique selling proposition, say something that everybody else isn’t saying, get them to read the rest of the page, right?

Okay, what do we got going on in chat? One day, definitely a game changer yes for sure the tab section feels especially weird because we need to read it from right to left correct yeah the options are over here right the the option should really be on the left-hand side and then the content should be on the right-hand side especially because you’ve also got something overlapping stuff going on here it’s hard for the eye to track really what’s going on right here.

And then the heading is to the right of the, yeah, everything is, it’s almost like a, yeah, an RTL situation going on here for no reason, because this is in English. So yeah, we need to get the tabs over here on this side.

All right, let’s see. Why choose us?

Here we go. Just Bath provides high quality service with a local touch.

My gosh. I mean, guys, close your eyes.

Close your eyes. And I will say the name of any bath remodeling company and I will read that sentence.

And I guarantee you have no idea that it came from Just Bath. I mean, everybody can say this.

Everybody will say this. Everybody does say this.

So once again, you know, if you’re writing copy, I’m trying to package this up into a practical scenario where you guys can actually improve your copy. Just when you write a sentence, just pause and be like, is everybody going to say that?

Is everybody in this industry going to say exactly that? Can they say exactly that?

Would they about themselves? Nobody’s going to be like, hey, we provide low quality service, dog.

I mean, that’s what we do. I don’t know about you, but we provide low quality service.

And we’re not local, you know, we, yeah, we’re not even near you. So I don’t even know why you’re here, right?

Like, no, everybody’s gonna be like, yeah, we provide high quality service and we’re local to you. Right, that’s why you’re here.

Everybody’s gonna say that. So what is the value in repeating that and saying that again?

Like, do we have the capability of saying something different here? Stop living with an outdated bathroom that no longer meets your needs, okay?

Give us a call today to explore your one day. So this is, you guys see my pet peeve with this?

Why choose us? And then I’m just not gonna give you a reason.

I’m not gonna say anything that’s different from anything else you’re gonna read, even though you’re acting as if I asked the question. And I am wondering, you know, why should I choose you?

Thank you for giving me no reasons. And look, we didn’t even mention the thing that we decided was super important up here.

Why wasn’t that mentioned? If you can’t say something different, why are you opening your mouth?

That’s the question, right? In marketing, don’t show up and just say what everybody else says.

That’s not marketing. That’s not what marketing is.

And by the way, you know, it’s, this, just to tie everything together, this is how, like, marketing can actually influence companies and products to be better. Because imagine you’re sitting in like a boardroom situation and you got all the leaders of this company gathered round, okay?

And you guys are talking and really you guys are saying, we’re kind of just another bathroom remodeling company, right? What can we start doing differently to make us a better bathroom remodeling company?

Well, we could use more materials or better materials, right? If we’re using cheaper materials, like that could be one thing that comes up.

But another thing that comes up is somebody raises their hand and go, hey, hey, hey, hey, I have an idea, I have an idea. Everybody in this area takes them a week to remodel a bathroom.

What if we can develop a process where we can come in, because we do planning so well, we do measuring so well, we’ve got a crew that’s dialed in, we’ve got this process to where we can in and remodel the bathrooms in one day. And why don’t we make that our promise to people?

And if, see, if that’s the situation that’s happening, it’s like, this is a service upgrade that came from a marketing discussion, right? You’re sitting around a table going, look, guys, we have to be able to say something that nobody else is saying.

What is that thing going to be? And this idea of the one day bathroom remodel comes up and suddenly that transforms this company’s process, it transforms this company’s promise, their mission, their offer, everything, right?

And now suddenly when we make a website for them, we know exactly what we wanna say. That’s why you’re supposed to have these brainstorming sessions.

If you feel like, if this is your project, right? A lot of web designers don’t consider themselves, and this is a huge problem, they don’t consider themselves to be consultants in these areas.

I mean, if I am building a website for somebody, I am not just going to build another bath remodeling website and type in text that I’m going to see on every other website. You know what I’m going to do?

If the copy was provided to me, which it shouldn’t be, right, we’ve already covered this, right? You should be leading the copy for your clients.

And this is why you should be leading the copy for your clients, because this is what they will give you back. But let’s say it is a situation, for some reason we weren’t able to do the copy, or they hired somebody else to do the copy who sucks and sends this generic copy back, whatever.

I’m building the website, I get on the phone with a client, and I’m like, hey, I just gotta be honest with you, this copy is not gonna convert anybody. And I’ll just foreshadow what’s about to happen.

I’m going to build this website and we’re going to launch the website and then we’re gonna run ads or we’re gonna do whatever we’re gonna do to get traffic to this website. And your conversion rate is gonna be a lot lower than it should be, a lot lower than it should be because this copy is extremely generic and that’s the most important thing on the page.

And you know, I don’t want to get blamed for the website not converting well. I just, I’m giving, I’m bringing this to your attention basically, that I do not approve of this copy.

This copy needs to be fundamentally reworked. And then if needed, I will go in and give them the examples just like we’re talking about here.

And then they’ll get it and they’ll be like, oh, oh, it clicks now. Okay.

Let’s redo some of this copy, whatever. You cannot just do what they give you and just say, oh, box checked, I designed a website.

You’ve got to be an advocate for your client’s success. If you’re recognizing that the photos that they’re giving you are trash, you have to bring that up.

You could say, hey, this really does not reflect well on your company to have low quality photos. Now I’m not saying that about this, but I’m saying in cases where they give you bad photography, you’ve got to point that out.

When they give you bad copy, you’ve got to point that out. When their designer, if a designer is at the helm here, gives you a design that looks like it’s from 2007, you need to point that out.

You need to bring that up. You need to be an advocate for your client’s success before you get deeper and deeper and deeper into the project, okay?

Because bad copy is not your fault until you put it on the website and hit publish. Then you’re part of the at fault team, okay?

You allowed that to go forward without saying anything. That kinda is your fault now.

What a lot of people do is they build a website, the conversions suck, and then after the fact, there’s this conversation about, well, why did the conversion suck? And the web designer goes, well, I don’t think the copy’s very good.

Well, you’re the one that put it on the page, dog, and you didn’t say anything when you were putting it on the page. That’s kind of a problem.

Like, you’re now in the at-fault team, okay? So anything that you see as like a potential issue, you better bring that up during the web design process.

Don’t be like, oh, well, that’s not my area, so I’m just gonna do my thing, and then if everything implodes later, I’ll just be like, oh, well, that wasn’t me, right? That wasn’t my responsibility.

You did it. You put it on the site.

Okay. It went through you and you didn’t speak up.

That’s a big problem. I have a big problem with that.

And so be more of an advocate for your clients in this regard. All right.

Riaz says, Hey Kevin, sorry I’m late. No worries.

Just glad you’re here. Glad you’re here.

All right. Derek says, wake me up when his rant is over.

I mean, if you’re not getting value, Derek, you don’t have to be here. If you don’t feel like this is a valuable rant, that’s fine.

It’s fine. I don’t understand.

I don’t understand this comment. Okay.

We have to go to the next website. We don’t have to go to other pages here.

Once again, there’s enough to work on right here that we don’t even have to go to the other pages of the website. Sometimes we don’t have stuff to talk about on the homepage, hey, we can go to other pages and see how good those pages are, right?

But this is, there’s enough here. You’ve already got enough to work on, to improve.

We don’t have to go any deeper into the website. Alright so let’s go on to number two.

Let’s take a visit in the chat first. I see some people posting some questions.

Hold your questions until the Q&A segment because I’m gonna have to scroll way too far back to find them. All right let’s see your koozie fell down in the background.

I don’t know what that means. I don’t know what that means.

Okay the content of the off-canvas should be aligned to the top not centered. Just going through chat real quick before we move on.

Oh Tyree does not like the font. I feel like a lot of people choose this font when it’s um it’s like we need an elegant font.

We need an elegant font. Rob says photos are sliding too fast.

I do agree with you, Rob. It feels like, oh, it’s like rushing me, my gosh.

Like, yeah, I naturally want to like slow that thing down. Okay, what else we got?

I’m looking for any other good comments on this particular website so that everybody, because, you know, this isn’t just my opinion. It’s everybody wants to be involved.

So if there’s any good comments on the website, I’ll put them up. Um, okay.

0:34:34 A lot of soft, a lot of softball comments.

0:34:36 Uh, okay.

0:34:37 Let’s see.

0:34:38 I like this one from calisthenics Ireland.

For anyone thinks Kevin got dragged into this, he’s talking about a head coaching the softball team. Please.

This guy is so competitive. He signed up himself.

Uh, no, I didn’t. I did not volunteer.

But it wasn’t that hard to convince me. Okay, it wasn’t that hard to convince me.

So you’re kind of right. Okay, whole feel is quite dated for me.

Sorry. Yes.

Choosing fonts can be a headache for sure, especially if you’re not a designer, I want my designer to handle that. The logo is interesting.

I like the logo. I didn’t really have any problems with the logo.

The typography portion doesn’t do a lot for me, but I like this symbol. 0:35:30

Okay. 0:35:33

Videos can help this website. I do believe that is correct.

The financing piece seems like an interesting difference for this business too. Nah, they, almost all of them offer financing.

And yeah, almost all of them. As far as I know, I’ve seen it constantly.

Same thing in like roofing. Definitely financing is a common thing.

Okay, I think we can move on. Test, testimony is not broken.

Somebody said to check mobile real quick. Let’s go here.

Okay, let’s get this out of the way. 0:36:13

This card is breaking right here at this break point. Oh, so there’s more text behind this card

0:36:18 from this card.

See this card’s text that’s supposed to be right there is actually behind this card’s text. So yeah there’s definitely some work to do on mobile.

That is the largest hamburger icon I’ve ever seen in my life. Did Bev have something to do with this?

Was Bev like that menu icon’s got to be bigger? That is the largest hamburger icon I think I’ve ever seen.

It is absolutely dominating the header. I’ll tell you right now, if you know, grandma ain’t missing that for sure.

I don’t know if they looked at the age demographics of this website, this users, this businesses user base. Oh dear, what’s going on here?

Got a definite problem here, definite problem. Okay, yeah, I mean, it’s, people tell me all the time, they’re like, don’t forget to check the mobile.

I mean, what are we going to uncover, right? That we didn’t uncover.

You’re either going to uncover some issues like we are here. I don’t like that these remain the same size and then these suddenly get wider.

That’s no rhyme or reason to that, it seems. But it’s just like, I mean, it’s mobile.

They either optimized it well or they didn’t optimize it well. There’s far more important things to look at.

I mean, if your copy’s bad, like I said last time, if your copy sucks, it’s not, the copy’s not going to suddenly get better on the mobile version. And that has most to do with conversions than anything.

The UI design is not going to suddenly go from 2007 to 2023 when we look at the mobile version, right? Like the mobile doesn’t give you a lot of extra value over what we’re already talking about and discussing.

That’s not a hamburger menu, that’s a Whopper. I don’t have a, maybe I do.

I don’t have anything for you. I don’t have anything.

I don’t have the little drum drum clash thing. Okay, we got to move on my friends.

Drug and Alcohol Rehab at Austin Pines Ranch is website number two. All right, no scroll test.

Now we see a design that C feels much more 2023. See how we just, it’s almost like we just got in our time machine and went from 2007 to 2023.

So it feels nicer, it feels more, and you know, the other, if you were going for luxury with that font, you can’t go for luxury with 2007 design trends, right? You’ve gotta, this would have felt much more, it’s like clean and warm and you know, hey, I wanna spend some money.

I wanna spend some money right now. The other thing was, it’s too, mm, did not feel good.

Did not feel as good, for sure. All right, Manny, yeah, Manny’s in the chat.

This is Manny’s website, Manny is in the chat. So our no scroll task, let’s see what we’ve got.

Right off the bat it just says, drug and alcohol addiction treatment, which is a very literal headline. Very, very literal.

Might like to see some lead text here to give me more to chew on. And I think, let’s see if we’re gonna run into the same problem of USP.

Let’s make that the theme of today’s WDD Live. How long does it take us to find a USP, a unique selling proposition?

Okay, let’s, we don’t have a lot to look at here on the no scroll test. We can see what’s going on with our nav.

Okay. Text size discrepancy between the main nav and the sub nav is a little much Does anybody feel like these are too small?

They need to be larger a little bit closer to what we have going on up here Or do you like what’s going on right here? You guys put your opinion in and let me know I feel like the arrows are a little large.

I don’t know. I mean, I know they’re roughly the size of the text here, but maybe they’re too dark.

Maybe my eyes are drawn to the drop downs more than the actual text. Maybe that’s what I’m feeling.

Maybe if we added a little, just a slight, let’s see what we can do here. Let’s get out of mobile mode.

Okay, where are we? First of all, we’ve got a Bricks website, we’ve got ACSS and we’ve got Frames.

Okay, so this is a Frames website. Okay, we got a little drop down action here, color, primary, all right, let’s keep it in the primary family and let’s do trans 70.

Oh, that’s gonna be for the entire, I don’t know if that’s just going to be the toggle, I think that’s doing everything. Yeah, that’s doing everything, not just the toggle.

Okay, so we can’t do that, can’t make that change there. Let’s just do a quick refresh.

All right. I don’t want to, yeah, this is the, yeah, that’s the SVG path.

It’s gonna be tough to figure out All right, we won’t mess with it too much right now. We’ve got a fill none on here, so we’re going to have to just investigate where the color is coming from.

I don’t know, I’ll let you guys say, like, do you like the nav or do you feel like these arrows should be smaller or the color toned down or some sort of difference, right? I don’t know, just feels a little in my face, I guess.

We’ve got a verify insurance button. I’m not 100% sold that that’s the best call to action, but we’ll see.

Manny’s here, I mean, we can ask him, did the client want this to say verify insurance? Did you want this to say verify insurance?

Was there any other potential CTA button text as an option that was discussed? Let me know in the chat.

I kind of like the, I like how the logo is very simple, very clean. Okay, we’re good so far.

Embark on your recovery journey with us. And then we have a very large photo.

I think the photo is, it doesn’t feel overly stocky. I think it’s a good choice as far as a photo goes.

What I would expect to see in a section like this is a video. So if there, and I know it’s like, all right, my client doesn’t have a video, so this is what we put here.

But I would be recommending to the client, hey, let’s put a really solid teaser style video here, or even a talking head video from the director of this campus, business, whatever you wanna call it. I don’t know if they have multiple locations yet, but that would be a thing to maybe consider.

Because embark on your journey with us, it’s great. The image gives us a little feeling, right?

But there’s an entire section here that doesn’t really give us any additional information about anything. It doesn’t really give us any value.

The entire section just gives us a little bit of a warm and fuzzy, but beyond that, it doesn’t really do anything else for the visitor. Video for this business is hard we need to use actors.

I can see that. The nav is louder than the logo and the nav CTA.

So let me put this up here. The CTA should be bold or the same as nav weight.

Tone the nav color down a bit to emphasize CTA and hero. Okay, so there’s some good suggestions to try.

It went from one hero to another hero unnecessarily. Yeah, I see you’re considering this to be almost like another hero right here.

I can see that. Okay, discover, ooh, I am going to refrain from making the obvious joke right now, okay?

I will, I will refrain. I will refrain.

That’s, Kevin, that’s not appropriate. Let’s not, let’s, let’s, let’s continue on.

Okay. It’s in my head though, and so I have to giggle.

Discover a healthier and sober lifestyle on our tranquil and picturesque ranch. These are very, these are big words, right?

A lot of good copywriters will tell you, like, hey, make this so a fifth grader can read it, right? We’ve got, man, picturesque.

I mean, that is, we’re really getting into the, you know, senior level, not old senior, like high school senior level vocabulary here. Austin Pines Ranch provides a calm and secluded setting for your recovery.

Located just outside of Austin and Page, Texas, our idyllic 14-acre ranch is the perfect environment to begin your recovery journey in comfort and luxury. Our addiction professionals, okay.

So we’ve done this before. When we’re grade, another common way to grade your copy.

We’ve talked a lot about us copy versus you copy and so I just want to point out and it just it always puts alarm bells off when I’m reading copies because I’ve looked at copy so much and rewrote copy so much. We okay this is us we, us we, us we our that’s us we copy right.

Now you can say begin your recovery journey. So we’ve said your, that’s you copy.

Okay, that’s good. Our, though, we’re back to us now.

Our addiction professionals. We keep going, keep going.

Okay, if you are ready. All right, good.

That’s you copy. But then it’s back.

Austin Pines, that’s us, we. Okay.

So we can rewrite this whole paragraph to be much more you focus like what’s going to happen when you come here Why does this environment help you in particular right? Get this focused a hundred percent on the person reading it Transform your life.

See this is a you focused headline Substance abuse doesn’t have to keep affecting you your loved ones and your quality of life. Okay, back to us, our, our.

You’re kind of saying, this is kind of saying the same type of stuff that was just said right here. So this is two sections in a row that’s kind of communicating the exact same thing.

So it’s a wasted opportunity to say something different, say something new, say something at a different angle. Now we get down to the experience.

0:47:14 But see, we’re back.

0:47:15 Like we, we, we, us, us, us, Austin Pines, Austin Pines, we, we, we, us, us, us, are committed to providing you attentive and individualized treatment.

Our experienced team works, our, our, us, our, we. Works tirelessly with each client to devise a personalized treatment plan for recovery by using only therapeutic interventions that can specifically meet all of your needs and none that won’t.

You can make the most of your time at Austin Pines. OK.

I still haven’t really, remember, what we’re trying to do, particularly today, we decided, is find that unique selling proposition. Right now, I’m reading copy that I would probably read on every addiction treatment center website that’s just like every other addiction treatment website.

Where is the unique approach? Where is it?

Because here’s the thing too. Lots of people already know the fact is, addiction is hard to treat.

Addiction often takes a long time to treat. People go to rehab centers and then they, you know, get cleaned up, whatever.

And then they end up back there a year later or six months later or two months later, whatever. So we know this is a problem.

Like there’s a common problem with addiction treatment and thus what most people are wondering is what’s your success rate? What’s your stick rate?

Why do you have that success rate? What leads to it?

Do you have some sort of unique approach to helping people with addiction? Or is this the same kind of addiction treatment that I’m gonna find everywhere and that’s I’m gonna get the typical results that most people get which is I don’t know if it’s gonna stick.

I don’t know if I’m gonna be back here in a year. I don’t know you know that kind of thing is very very important.

I mean we’re trying to sell them on coming here and choosing us. Do we have something different to offer them?

Like and I’ll tell you right now a pool out back. Okay, while nice, while nice, it doesn’t help my outcomes.

It doesn’t guarantee better outcomes than any other center. Okay, so what are we able to say about our process right, that is unique?

And so far I haven’t seen any inkling of that. Okay, so let’s go down and this is this is why I say copy is the most important thing on a website guys it’s it’s if you can manage to say something unique and different and actually have you know a process or a product or whatever a feature to back that up then then we’re good then we’re golden okay if we don’t if we’re just like everybody else marketing becomes very difficult marketing becomes very difficult when you’re just like everybody else.

All right, we can do medical detox. This seems to be in a different language.

Oh, no, it’s not. I was like, residentia el inpatiente.

No, it’s residential inpatient. Okay, so we need to fix that.

Your word is breaking right here. Partial hospitalization, intensive outpatient.

Just from a quick little design aspect here, I will say this needs a transition on it. So to demonstrate this real quick, let’s go in and I’m guessing it’s um yeah because see that see how it hovers when I’m my mouse is down here that lets me know that we’ve targeted the card and then the element that hovers.

All right so we’re going to investigate this and we’ll just see the difference between transition and no transition we’re using clickable parent here. All right, so that looks like it’s in the head.

Then there’s an SVG inside of that, so the head is actually styled. We’re gonna click this little button right here.

Oh, I need to move my, oh wait, no, hold on, hold on, hold on, I think I can move me. I can move me now.

Shift two, no, hold on, we gotta be in this tab over here. Shift three, four, oh, look at that, oh, look at that.

Two, look, look, I can just move myself over here. Okay, so if I select this, I can see our hover styles here.

And it’s on this, okay, we probably need to be on here and then select our hover styles to find it. Okay, text wrap balance, okay, head.

Actually, I just need to put it on the head. If I just put it on the head, because I already know that that’s what’s being, yeah, it’s this background color right here.

Okay, so the head is right here. Let’s come in and say, we’re gonna transition the background color.

I’m gonna do like one second ease. Normally I don’t do a second, but I wanna make it kind of obvious here.

Okay, so now that’s the effect you get, which is much more soft and subtle it’s not so sharp if I duplicate this here it is without a transition see that like very sharp like instantly the background color changes versus here you get that nice smooth just like mmm nice soft like calm not trying to not trying to shake people up right simple okay so add some of those I noticed them on your buttons too, I think. Now your button.

Yeah. Yeah.

You could definitely add that to your button. Like that one right there.

Anytime. See, that’s a subtle color change.

So you don’t notice it as like needing to transition a lot, but anything that’s a sharp contrast change that happens instantly, it doesn’t feel as good. So you can put a transition on these buttons and make that much better.

Okay. Austin Pines promise.

Oh my gosh, here we go. Here we go, guys.

Are we going to hear a USP? The path to recovery is fraught with challenges and we know the collaborative treatment and compassionate care that people need to establish long lasting cover.

Hold on. Is this a readable sentence?

The path to recovery is fraught with challenges and we know the collaborative, the collaborative treatment and compassionate care that people need to establish. This needs to be rewritten.

That is the hardest sentence I’ve ever read in my life. Let’s make this a lot, yeah, we need to make that a lot better.

Austin Pines Ranch offers the best possible environment to help you develop a healthier lifestyle with treatment facilities that are designed to provide a serene and encouraging setting for introspection and personal growth. We’re wholly devoted to providing our clients with outstanding addiction treatment, ongoing support, and overall care with kindness and hospitality.

” 0:53:45

Chat, did this convince you? 0:53:49

Do you feel like this says something different? Let’s just crowdsource this right now.

Do you feel like this legitimately said something where if you are an addict or You know an addict and you’re helping them get signed up for this place. Whatever.

I don’t know what the process is Did that convince you are you like oh, we got to go there. They got something different going on Rubin says that’s a bunch of words, but didn’t say anything That’s kind of the vibe that I get that it’s the but it’s here.

Here’s the thing It’s it’s honestly it’s a vibe I get on like nine out of 10 websites. Yeah, this is, this is what you say.

Let’s just explain it. This is what you say when you don’t have anything unique to say.

This is the obvious thing, right? Let’s talk about the, you know, serenity of the environment.

And I’ll give you a very specific example, okay? The Austin Pines Ranch offers the best possible environment to help you develop a healthier lifestyle.

This is called begging the question, right? What is the specifics of the, what makes it the best possible environment?

You’ve got to tell me something of substance. You’re just making a claim, but there’s no details for me to verify the claim.

There’s nothing for me to really chew on here. I just kind of have to take your word for it, right?

We want to avoid that. Like good copy doesn’t do that.

Good copy gives you the goods. When you read good copy, it clicks in your mind.

You know exactly why you need to choose this place and not a different place. This copy is very nebulous, right?

It’s very just like airy. 0:55:32

Okay. 0:55:33

Like, we don’t have anything good to say, so we’re going to say the obvious things, but this is what everybody else ends up saying, and that’s the problem with it. That’s why it doesn’t connect, and it doesn’t really help people convert.

Yeah, so Rob Locke says, any treatment center could say all of that. Right.

So like I was alluding to earlier, you would have to have, the treatment center would have to have something about their process, most likely. Something about here’s how everybody else treats addiction, here’s how we treat addiction.

Notice the difference? So when we’re looking at outcomes, you’re gonna notice a difference in outcomes.

Here’s the difference, by the way, that you’re going to notice. 87.

4% of people that come to Austin Pines have results that stick for five plus years, where the average is people are back in eight months. Whatever it is, okay?

You’re not going to have a perfect score, obviously, in the world of addiction, but you can have outcomes that are dramatically better. Why do we have outcomes that are dramatically better?

Because we have a very different process from everybody else. This helps you have a clear distinction.

And now when people are deciding, it’s like, well, I just went and read five places in my area and four of them seemed to all do the same exact thing. And the last one was like, no, we do things a lot differently here.

And this is why we do things a lot differently here. So I can understand, you know, why are we doing it this way versus that way?

And then I can understand why the outcomes are different. You can’t tell me you have the same process as everybody else, but the outcomes are way better.

And then I’m like, why? How, how does that work?

How does that math, math? And you’re like, well, we have a pool.

See that right there? We have a pool.

They don’t have that. They don’t have this pool.

That’s not the thing. Everybody knows that’s not the difference.

That’s not going to change outcomes. So you’ve got to give them something to actually chew on that they can connect in their brain.

Oh, I see how that would change outcomes. That’s where I’m gonna go.

That’s what we have to build into this website right here. Okay, got insurance stuff, okay, about us, our facility.

I mean, we can go to the about page. I feel like a lot of the homepage is an about page.

Okay, proven outcome measures. Begs the question once again.

So you’ve told me you have proven alcome measures. I need to know what they are.

I can’t just take your word for it. 0:58:11

Okay, let’s go down. 0:58:12

Dedicated staff, don’t they all? Our values.

Live by our integrity, focus on our clients, deliver on our commitments, respect individuals, provide compassion and care. Okay, so if I was, you know, somebody submitting copy, you know, and it’s like, here’s the copy we’re going to think about putting on the website.

Our mission is to foster and facilitate substance use disorder treatment by using measurable assessments and outcomes, establishing individualized goals and implementing proven strategies that promote long-term recovery. X.

That sounds like it came straight out of a corporate boardroom. Okay, so, next.

Next. Our vision, okay.

Vision is executed by leadership, industry trends, proven outcome measures, team members, need to the client, okay. X, next.

Dedicated staff, everybody has that. Next, X.

Our values, anybody can say this, there’s no additional substance here. X, next.

Our operating principles. Leadership is the ultimate deterrent.

Clinical quality is paramount. Focusing on shared vision, doesn’t mean anything.

Teamwork is a key component. I don’t know how that works in addiction recovery.

Leveraging competitive advantage. This is straight out of corporateville, okay?

X, next. Here we go.

Effective substance abuse treatment requires careful assessment of a person’s needs and goals for recovery. Offer an extensive array of programs and services to accommodate those needs.

Taking into account blah, blah, blah, blah, blah. Help a professional, okay?

Okay, evaluate substance abuse history. I don’t know.

It’s getting closer, but X So the whole about page At this point doesn’t need to exist. That’s why I tell them Hey, we got to be able to say something important or this page does not need to exist Because it’s not gonna it’s just a distraction.

It’s not it’s not helping anybody convert. I mean, it’s it’s it’s just corporate.

It’s corporate copy Let’s go into programs medical detox. So we get into some specifics here.

Here’s a medical detox program. Or should we do residential inpatient?

Let’s do inpatient. 1:00:09

Okay, because this severe addiction 1:00:11

may require intensive round the clock treatment that only a residential inpatient program can offer and the immersiveness of inpatient treatment is widely considered the most. I know a lot of people here are gonna be like, why are we reading copy?

We should be looking at the UI. There’s nothing wrong with the UI.

UI is fine, right? The general UX is fine.

The layouts are fine. All the way, I mean, all these things have been, those boxes have been checked.

I mean, we need to now talk about the thing that’s going to sink this ship, okay? In terms of competing with other treatment programs, we have to talk about the most important things that are going to make or break the success of the website.

And I’m telling you right now, it’s the copy. Okay.

So you got to, you’re informing people of what it is. That’s fine.

1:01:02 Okay.

1:01:03 All right.

Okay. This is like a good overview.

At some point I need specifics. I think that’s really what’s missing, missing here is specifics and specific copy is typically good copy.

Nebulous, like begging the question, going around in circles, corporate copy, none of that helps. None of that does anything for anybody.

Medical treatment, withdrawal management. I feel like this text could be smaller, less line height here.

I feel like these cards are way too big. But now we’re getting into specifics, medical treatment.

But it’s not presented as like, it’s presented more as like, 1:01:41

we’re gonna do all these things. 1:01:43

Whereas what I really would probably wanna see here is, what happens first, what happens next, what then happens? And then is there a follow up?

Like I wanna maybe a process kind of approach here. What am I, how am I going to be led through this process of recovery versus like, here’s all the things we’re going to do with you.

I need to know what the process actually looks like. And you can structure that in,

1:02:15 because if I show you my process,

1:02:18 actually go watch Processes Everything in my web design masterclass.

If I can show you a process that looks fundamentally different from everybody else’s process, it’s by its nature intriguing. So then if it says a lot of critically important things and gives a lot of details, people instantly see, instantly see what the unique selling proposition of this company is.

So once again, process is everything, right? Now we’re answering some common questions.

Okay, how are we doing on time? I think we need to move on from web design.

Here’s what I would say. This is a great website.

It’s a clean website. The UI is good.

The UX is good. People can debate about the photos all day, like this one.

I’m not, I mean, first thing that comes to my mind is this poor toddler, this poor toddler to be an alcoholic, I mean, at such a young age. I don’t know, my brain like immediately was like, that’s a toddler’s hand, not an adult’s hand.

I didn’t even see this hand right here. Maybe it’s because the blue shirt, right, caught my attention first.

I would get a different photo for here. But like this photo, fantastic, all right?

We got a great photo right here. So everything else is fine.

Like we could go in and look at the DOM, right? But it’s frames, it’s automatic CSS, it’s bricks.

The DOM is gonna be clean, the things are gonna be accessible out of the box. It’s like we don’t have to look at all of that stuff.

I, and guys, I do this on audits all the time. My brain goes right to what is the number one, number two, number three things that are gonna sync this website or make it successful.

And immediately my brain was like, we don’t have to worry that much about the UI, we don’t have to worry about the UX that much, okay? A lot of that is taken care of already.

So next, what’s next on the list, what’s next on the list? And then the copy is what stood out.

And that’s very common by the way, very, very, very, very, very common. Because good, great copy is not common.

Great copy is uncommon. Okay, do you think the website needs a contact form on the homepage and is this good practice for other websites or should I listen to Tyree and just have calls to action?

I’m not a huge fan of, here’s the thing, I guess this is how I decide. If the service or product is more of a like buy it now, commodity kind of product.

There’s not a lot of decision making that has to happen. Price point is gonna be an important thing.

Then show them forms front and center. Like, hey, here’s a form, fill it out, go for it.

Okay, like a plumber, for example. It’s like, how much, you know, if the plumber comes up first on Google, has good reviews, everything looks to be in order, like I would expect, right?

They look like they can get the job done. You know, I’m not going from plumber to plumber to plumber, like scrutinizing plumbers, okay?

Then just show them a form. Because it’s going to be like, okay, that’s the simplest, let me just fill this out real quick, let me put in my inquiry, I got other shit to do with my life, right?

But drug and alcohol addiction treatment, anything that takes a long process, anything that’s at a higher price point, anything that needs to be sold more, that needs more in-depth copy, that needs explanation. Now we’re not sticking forms in people’s faces.

We’re sticking important things in people’s faces. Like, hey, I know before you fill out a form, you’re going to need to know a lot more about what’s going on here.

So let me take the time to lead you through a narrative, to give you really solid copy that makes you want to click these buttons. Because I know if I can make you want to click the button, you’re going to click the button.

I don’t have to stick a form in your face. That’s kind of how I decide, right?

So if it’s more on the easier to convert side of things, the obvious, like, hey, they just want to get it done. They just want to sign up.

They just want to get the thing. Then put a form in their face.

If it’s going to be a longer approach to conversion, then let’s not put forms everywhere. Let’s just put buttons so when they’re ready, they can click the button and they can do the thing Okay, all right, I’m looking chat now Okay, let’s go up Okay, why why would you use Google Bard to rewrite that copy no, I don’t use chat.

GPT chat. GPT writes, um, nebulous copy.

Uh, don’t use chat GPT to write copy. That’s a, that’s a no.

1:07:00 Mm.

1:07:00 Hmm.

1:07:01 Hmm.

1:07:01 Hmm.

1:07:01 Hmm.

1:07:02 Somebody saying the font is hard to read.

1:07:03 I don’t know if they’re talking about the other website or this website,

1:07:06 the color contrast hurts.

I don’t think the color contrast hurts here. I don’t see I don’t see any color contrast issue that hurts.

What else? I’m looking for other oh here we go.

Body font needs to be bigger. So this right here.

What’s the computed value? Font size.

Oh it’s already big. You know, that’s a very small typeface right here.

So I, yeah, it’s already at 22 pixels by default, which is definitely on the large side. That font itself is a tiny font.

Okay, that’s probably the issue that we’re running into. But I do agree, I do agree.

I think this should be bigger. Okay.

Mm-hmm. Any other good stuff in the chat?

1:08:00 We know you use Ahrefs,

1:08:01 but have you tried Ubersuggest in the past?

1:08:03 LTD for three hours.

1:08:05 I have tried Ubersuggest.

1:08:06 I don’t recommend it.

Ahrefs is, 1:08:08

the power in SEO is in all the filtering capabilities and a bunch of other stuff that happens on the backend that I actually haven’t covered in a lot of videos There’s a lot of tools inside hrefs and uber suggest is kind of just like a keyword tool And it’s missing by a lot of it’s missing a lot of the like advanced filters and stuff like that No, the font is actually small the font is actually small Uber suggests is always running an LTD, don’t get hyped. That is probably the truth.

Okay, all right, let’s move on. We gotta move on to, what are we gonna do?

Oh, frames, sneak peek, and BRICS 1. 9.

1. We wanna look at some things, and then we’ll do a whole bunch of Q&A AMA to finish up here, okay?

All right, let me pull up the template. So I teased this in the inner circle, showing hey, here’s what, well actually, I didn’t tease the frame version in the inner circle.

I only teased the live version on the client site that I’ve started to work on. Then I went and was like, nah, this has gotta be a frame.

We gotta add this to frames. This is some sauce right here, okay?

Anything that is, when I’m working on a client site in particular, in fact, this redesign of this client site has already birthed like five different frames so far. And that’s great.

Like it’s, you know, I’m looking for unique things to do on this new client site, and then that gives me things that go right into the frames library, concepts that go right into the frames, especially if it’s like got some sauce, right? And this definitely has some sauce, and it is something that is gonna be usable on so many websites, so many websites.

And if you have this as just drag and drop, then it’s absolutely fantastic. Okay, so what is it called?

Where are we even? Let me go, where’s date published?

All right, let’s go up here. Here it is, schedule section alpha.

Let’s preview this. Okay, so what we were tasked with is we have to show a class schedule.

Now, it doesn’t have to be classes. You could use this for a lot of different things, but we want to show a class schedule.

And we need this to be driven by a query loop, a single query loop. So I’ll tell you right now, when I initially built this, I built it with a query loop for every day of the week, because that seemed to be the obvious, like, easy thing.

I’ll query the Monday items over here. I’ll query the Tuesday items here.

I’ll query the Wednesday items here. Because on the back end, we need people to be able to go in and add new items to the schedule with custom fields.

We don’t want to be in Bricks Builder, like duplicating these cards and trying to move them around and things like that. And, you know, we can’t even do that in a lot of cases because there’s a lot going on here.

We have to relate classes to programs. We have to relate classes to specific locations.

We have to do a lot of stuff here. And then this needs faceting and filtering capability.

Okay, so just talking through some things. Let me go to, here’s, I’ll show you the version that I teased in here.

Because then I also wrote what we have to think about when we’re trying to create this. And by the way, you see that it has a horizontal scroll, okay, so that we can go, we can just see every day of the week, and we don’t have to worry about things getting all squished and all that when there’s not enough space.

But on mobile, I was working on this earlier, there’s actually going to be two options for 1:11:59

mobile. 1:12:00

You can keep it like this on mobile, okay? So you can do this on mobile, or you can stack it on mobile.

And I think this version stacks. So you see right there, so this is what would happen on like, I don’t know if that would be, that’s probably like an iPad, like a vertical iPad kind of situation.

So they can still scroll left to right, okay? And then they can still go up and down, no problem.

But the minute we start to get closer to being like, I don’t know, even that might be a tablet, right? You get to decide.

You can put whatever breakpoint you want. This uses a min-width media query, so there’s not a lot to change here, depending on where you want this to collapse.

But notice what’s going on here. Okay, this uses CSS grid.

So everything in here is a grid item. These headers are grid items, and so, but it’s positioning them automatically.

And that’s the other thing. Let me go over here and let me go, it’s probably one of the recent posts.

Come down, down, down, down, down. Here we go.

Okay. Well, here’s the version that’s looking live right now on the client site.

So this one has more styling attached to it. And you can see here, right?

It’s like, now you see columns can even be empty. Okay, like this presents, it’s a challenging thing, right?

And I’m excited to show the approach that I took and how we achieve this with just pure CSS grid. But people have to be able to also put in a class at any time, they’re just gonna add them randomly.

And the grid is responsible for putting them in the right column and potentially in the right order and then notice that you know they all don’t go in the same order in the grid but somehow when this stacks all the Monday items are under Monday and all the Tuesday items are under Tuesday and so on. There’s no JavaScript by the way helping to it to it this is pure CSS okay and I just think that’s really interesting.

And that’s why I’m doing a whole inner circle deep dive training on this, building it from scratch, from the ground up. We’re gonna do the CPT, we’re gonna do the custom fields, we’re gonna do the grid, we’re gonna show the horizontal scroll, we’re gonna show how to make it stack.

We’re gonna do everything, everything in this training, okay? So that’s gonna be pretty exciting.

Let me go down to chat here. My face is chasing me?

What does that even mean? I got to get the hide current comment.

There we go. The one thing I don’t like about StreamYard is that the comments don’t, I love that about Ecamm Live, is the comments went away after like a minute or whatever.

Let me go back to, do you guys want me on the right again? I don’t know.

I don’t know what face chasing me means. Yes, I did remove the comment.

So think about this. You can, if your client is like, what we need is a schedule for the seven days of the week where we show different things on different days or whatever.

And you can see here, like we’re also gonna be relating instructors. So we have instructors in the database.

We have classes are gonna be added to the calendar, but those classes relate to specific programs. So for example, think, well I can just give you an example here.

See, jujitsu is in the database as a program, but intermediate jujitsu, you can’t just query the programs in here because there’s beginner jujitsu, intermediate jujitsu, advanced, these things don’t have pages. So the actual event or the class that you’re adding to the calendar is not a CPT in itself.

Well, it is, it’s called an item, but it’s not a specific item like Jiu-Jitsu, right? So we have to be able to relate it to a class.

So if somebody says intermediate Jiu-Jitsu and they click on it, it’s gonna take them to the Jiu-Jitsu program page. If it’s beginner Jiu-Jitsu and they click on it, it’s still gonna take them to the Jiu-Jitsu program page.

So we’re not forced to have a page for every kind of class, right? We only want pages for programs.

We want the freedom to have a custom class that we can then attach to a specific program. So that’s kind of the thinking there.

And then of course we want the times. There you see the location.

I’m actually gonna go the step of color coordinating the class, the program type. So for example, if it’s a jujitsu class, it’s gonna be orange.

If it’s a fitness performance class, this accent color over here will be purple or something like that. And so your eye can immediately look for oranges or purples or whatever.

The other thing is that it will be facetable, okay? Which I learned, if you attach custom fields to a page because that’s what we started with right here So if I want to edit this schedule, for example, I just edit the page and I fill out the custom field It’s a it’s a repeater in ACF You can’t you can’t facet them with grid builder grid builder can only facet actual entries in the database actual posts So that’s why we have to move this to a CPT.

It’s gonna be called calendar, probably calendar, something like that. So you’ll add a new calendar item or a new schedule item.

Maybe we’ll just call it schedule. You add a new schedule item.

Then it’ll be facetable. So somebody can come up here and say, show me all jujitsu classes.

And it takes all the other cards away and it only shows where the jujitsu classes are. That’s a good example of a facet.

We can also do a locations facet. Hey, show me only things that happen in Buford.

Show me only things that happen at the Atlanta location. We can have the freedom to do that as well.

So you’re just gonna be able to immediately drop this in and then it’s up to you obviously to map custom fields, though we may provide an export for it. Like we can say, hey, here’s your ACF export that goes with this.

It’ll just bring in all the custom fields for you. And the custom post type.

It’ll just do everything for you. I think that would be a little more value, right?

That might be something unique that we could do. 1:18:11

All right, so I don’t know, what do you guys think? 1:18:13

You liking this? Is this good?

Most importantly, I think is gonna be the training on this because the way that I am positioning things in the grid is I think somewhat unique. I think somewhat unique.

And it’s, it all comes from the custom field. I’ll tell you that.

So when somebody chooses, all they have to do is say, this is a Monday item, the grid is automatically going to put it in the Monday column. I think that’s pretty cool.

They don’t have to do anything else. It’s just by default, it just happens.

They don’t even have to think about how it’s going to be positioned in the grid. The grid just takes care of it for them.

Okay, alright, let’s take a look at, that was a little sneak peek there. So training on that coming in the inner circle and then the frame.

Do you guys mind if I, should I put out the frame before I do, I’m gonna try to record the training today. In fact, I’m gonna get some lunch and then I’m gonna try to do the training today.

I’ll put out the training and then I can release the frame shortly after that. And then we can upgrade the frame by adding the custom fields, exports, and CPTs and all that.

Okay, let’s get this out of here. Let’s get this out of here.

Let’s get this out of here. And what do we need?

We need a BRICS training. Here we go.

Okay, I believe I already upgraded this to 1. 9.

1. 1:19:39

Oh, that’s the child theme. 1:19:40

1. 9.

1, okay. Bricks, builder.

io slash changelog, okay. Okay, I always do this.

I always go right, because the changelog takes forever to load, 1:19:51

and I always scroll first to look for it, 1:19:53

and then I end up at the bottom of the fucking changelog. Every, every time.

I don’t learn, every time. Which by the way, is the reason Google likes to avoid page layout shift.

There’s a huge page layout shift issue. The fact that this loads in line here, like that, see that?

So if you’re not patient like me, the minute you arrive, if you try to scroll, look, you’re past the change log, the entire change log, if you scroll too much. Okay, let’s look at BRICS 1.

9. 1.

So I don’t ever, hardly, hardly ever do I do translatable websites. So yeah, WPM, whatever, whatever.

Query editor is kind of interesting. But what I wanted first, I’ll just be honest with you, what I was hoping for first is when you query relationships that we would have a UI for adjusting the query.

And we don’t, we were not given that. We were just given this right here.

So that’s kind of womp womp. All right, more query additions.

These are interesting if you read through that. Inject section templates via hooks is quite interesting.

Though I need to play around with it a little bit. New element Instagram feed.

No, no. The minute I read that, I was like, why are we doing that?

Why are we doing this? Does anybody still use Instagram?

I thought Instagram was kind of dead. I don’t know.

ACF nested group support. This is super important.

This guys is super, super, super, I can’t tell you how many times I’ve created nested groups and then I can’t query the things out of it because there was no support for nested groups. And I was like, oh my God, I gotta go back.

I gotta ungroup everything. I gotta restructure all my custom fields because we can’t have nested groups.

This is a game changer right here. This is really, really, really important.

I’m very excited to see that. Custom CSS new root placeholder.

This is the thing I wanted to look at and look at with you. So let’s go take a look.

All right, I’m gonna go into pages. What should we build?

I don’t even know. What should we build?

Let’s add a new page. Let’s just build, I mean, I always default to building like a stupid card or something like that.

All right, we’re gonna look at root selector. Think if you hit edit with bricks, it publishes the page.

All right, let’s go to section. Let’s go to make this a three column grid right quick let’s go block okay and let’s call this I should give you guys a sneak peek I’m gonna do that right now I don’t know it’s not on this I’m not even on the right branch that would take more more work getting into but auto BIM is right around the corner guys right around and it’s good so let’s go um root card let’s call this root card.

All right, good. Let’s put some things in here.

So let’s put, let’s do a block block. Let’s do root card, root card double underscore.

Let’s call this the media wrapper or something. Let’s call this the body.

Let’s call this, let’s add a heading in here. Let’s add text in here.

Let’s add a button in here. Awesome.

Let’s add an image in here. Perfect.

Let’s select an image. All right.

They’ll work. Insert.

Good. Good.

Good. Okay.

Now this is going to be our media wrapper. I don’t know why I’m doing all this, but it’s just a habit.

This is our root card. I guess it does help you guys to see what everything is in here.

Okay, text button, great. All right, we’re gonna go heading here.

I’m gonna see the limitations of this as I had some theories as to how, I know this is gonna be a lot more beneficial, but just how beneficial, I’m not quite sure yet. And we might even run into a limitation of it that I was envisioning might exist.

And then I’m gonna have to think about what else we can feature requests to get around that limitation. Okay, let’s say that I was going to style this entire card from right here.

Hey, oh, hey, okay. This is new.

This is new. So it’s got a little placeholder action and I believe there’s a shortcut for it.

There’s R plus tab. R plus tab.

I don’t. .

. Okay.

R tab. I got it used to that.

That’s not a common, using the tab is not a common shortcut key. My pinky doesn’t have to do so much work.

You know what I’m saying? Yeah, I’m going to have to get used to that.

All right. So root card.

And then I just say of what do we want? Shade, ultra, light.

Let’s design the most boring card we can possibly. Okay.

Oh, background color. Guys, background color does not work nearly as well as background color, I’ll tell you that.

Okay, so then what I wanna do is I wanna say root card, and I remember I called it body, right? So this would be R tab double underscore body.

And immediately I’m doing the body, which I could just set a different background color if I wanted to, because I don’t know what I want to do here. Say, let’s say danger.

Oh, I’m liking this guys. I’m liking this.

You see, you see where we’re at with this? How about this?

How about we’ll just do something. Let’s do font size, text S.

Okay, so that’s gonna make that text nice and small. We can also drop some padding in here, all right?

So we’ll just say space S, maybe we don’t want a little more than that, space M. You know what we should probably drop in there as well?

You know, a little content gap divided by two action. Yeah, I’m liking this.

This is a age three, okay? That’s really, really, really handy.

Really, really, I’m really glad I made this feature request. What was the limitation I was thinking about?

It was something to do with BIM. Oh, modifiers.

How would this work with a modifier? RootCardDark.

So I want this to be a dark version of the card. Root card dark.

All right, R tab. This would be targeting root card dark.

Yeah, you can’t do something like this to reference the original class like root card because I need to do like body now, something like gonna work. Background color of black, yeah not gonna work.

I still have to manually type root card body like that. There needs to be, here’s what there needs to be, but then there’s no way for Bricks to know that that’s the thing.

Like a way to reference the original, the non-modified class. I just don’t think that’s going to be possible Because then I can go down here and say color white okay, and then I would have to do Root our tab that is not our tab.

I have to look at my keyboard to do that root and then root card heading Would be color white okay, that’s how you make a dark variance of a card see this guys this is the problem right here I rack your brains right now rack your brains rack your brains I don’t want to have to write this manually how do we get a reference token for this that works just like this reference token but there’s no way for bricks would have to almost like scan the element and look for another But it wouldn’t it wouldn’t be able to differentiate this class from another class from another class from another class I just I don’t think there’s a way to do it page builders Naturally struggle with BEM modifiers. So BEM block BEM element.

No problem whatsoever Fantastic golden BEM modifiers every page builder struggles. I have not seen a good BIM modifier workflow in any page builder ever.

And we’re still running into a challenge here. See, if I was on this class, this gives me exactly what I want to see right here.

Well, the problem is we’re just not on that class. Now, again, I’m just brainstorming.

1:28:42 I’m just talking nonsense.

1:28:44 I’m just talking nonsense.

What if you could select two classes and have a token for the other class, like a root alt or something, and it references the other class that you’ve selected? But then we wouldn’t know which one we’re applying styles to, would we?

See, more limitations, more challenges. 1:29:14

All right, let’s go to Ched. Does it accept nesting?

Give me an example, Nuno, 1:29:18

of the nesting you would wanna see. 1:29:23

Root card dark. 1:29:24

What would you wanna nest? 1:29:26

Where would you wanna nest it? 1:29:27

Well, I mean, we can’t, I don’t even know what you mean by nesting. Vanilla CSS doesn’t support nesting.

So vanilla CSS doesn’t support nesting yet. I think we’re still on the, what are we in the seventies, eighties, seventies, or it’s 74%.

So, I mean, that’s an irrelevant, kind of an irrelevant question anyway, because we, even if it did, we, we couldn’t support it. I mean, we wouldn’t use it.

You wouldn’t use it in production. Can you set a variable on main class then wild modifier override that?

1:30:09 You wouldn’t wanna do that here.

1:30:10 I mean, yeah, you have your main styles, then you could have your, you could say like, all right, this is gonna be, I’ll zoom in.

You could have a dark version. But you would just have, you’re forced to write it manually because you need to do this stuff with root card dark.

And then you could, you just have the opposite problem more or less. Because now I can R tab and say body.

And then I can say backgrounds color, backgrounds color is black. 1:30:44

That’s gonna work. 1:30:45

But I just have the opposite problem where I’m just having to put the, I’m having to manually write the modifier now instead of manually writing the original block class. 1:30:56

Oh wait, oh wait, hold on, hold on, hold on, hold on. 1:31:00

I think you’re right, I think you’re right, sir. I think you’re right, sir.

You’ve done it, you’ve done it. So we just do it all on the parent.

I like that, I like that. I think I like that.

Yep. Yep.

1:31:17 Mm-hmm.

1:31:18 Mm-hmm.

Yep. Dark.

1:31:21 I got to get used to that short, that, that shortcut.

I don’t know. Is that the, is that the best shortcut they could have come up with?

That’s my first thought. It’s really hard to do that.

It’s hard to do without looking at your keyboard I feel like you’re gonna miss R or you’re gonna miss tab You’re gonna miss one of them if you don’t look what I feel like maybe I just need to practice more So I put color of white here Color of white here I Like that and then you can see you know when you’re just selecting your parent item your main block class You can kind of see everything that’s going on. I do like that.

I do like that. What do you guys think?

Chat, you’re so quiet, chat. We got like close to 100 people here.

You know, I think a lot of people pull up the stream and they’re like, I’ll listen to the stream while I do some work. And then they’re not in the, they’re not in the chat.

Andre says, can you explain that? Uh, yeah, uh, sure.

But which part of it, I did notice guys that the stream quality is not, um, it’s not as good. It’s not as good as he cam.

Uh, I agree. And I’ve reached out to stream yard and I’ve asked them about it.

I’m streaming at their highest, like their highest quality that you can select 10 80 and supposedly 10 ADP. It’s supposedly 1080p.

So it is a little, I’ll call it like fuzzy. It’s a little fuzzier than Ecamm.

Things are not as sharp. Yeah, Tyree says, I love this.

1:32:56 Actually seeing it all at once is cool.

1:32:58 Yes, I mean, this is way better for organization purposes.

So I’ll just answer the question. We’re going to go into, somebody said, would class star equals root work?

We will try that in just a second, Patrick. That is a good question.

So we’re gonna go into Q&A AMA in just a minute. Now, see, I went on that question.

What was I about to ask myself? Oh, yeah, yeah, yeah, yeah.

A question a lot of people have been asking me lately. Saying, Kevin, I noticed you write, you like to write your CSS a lot in Bricks in the custom CSS area attached to a class.

Isn’t it better to have everything in WP code box so everything is in one style sheet, okay? I really want to explain that.

I’ve gone back and forth on it. There was once a time where I was like, I’d rather have everything written in the style sheet.

That was, if I remember correctly, in the Oxygen days, maybe once or twice, I still said that in the early BRICS days, but that was in the oxygen days. Now why would I say that in the oxygen days?

The custom CSS box in oxygen, and again, this is people say, there’s really not that much difference between BRICS and oxygen. No, there’s like a gazillion differences, and they’re really important differences.

This CSS box in BRICS blows the oxygen CSS box out of the water. They’re night and day.

They’re night and day. This is the Oxygen CSS box is like a toddler version of this.

This is like the adult version, okay? And Oxygen is like, that’s the toddler version.

You are severely limited in Oxygen in this area right here. Having the original root selector was powerful enough, now having this is five times as powerful, okay?

And here’s the general reasons why I say I put almost everything here. Now that’s not to say I don’t put stuff in WP CodeBox, I absolutely do.

There’s times where I need a mix-in, where I’m doing a style that I’m gonna use repeatedly and it’s not appropriate to use a utility class for that, I really need to use it with BIM, but I need to do it across various BIM classes and I don’t want to constantly repeat myself that with that same time. What that calls for is a SAS mixin.

You want to use a SAS mixin in that regard. So anytime I need a mixin or anytime I’m doing something really complicated and I need more, which now it’s actually that reason is going to be erased by this, I think I can already tell.

So really we’re just relegating stuff to CodeBox if we need mix-ins or functions. If I need functions or mix-ins, I gotta go do that in WP CodeBox.

Everything else is gonna live here. And here’s why.

Couple reasons. And I’m doing this off the top of my head, so we’re just gonna roll with it.

First reason is organization. It is not better to have all of your CSS in a single style sheet.

This is actually why a lot of people use Sass Partials because partials allow you to almost folderize your styles. So if you need to find something, you can go and say, okay, that’s related to my checkout.

If I need to find something related to my checkout, I can go into a Sass Partial called Checkout Styles, and I know, or maybe even Woo Styles or whatever. So I know all WooCommerce stuff is in this sheet right here, because what happens is your sheet starts to get longer and longer and longer and longer.

And then you’re like, you end up scrolling up and down. And by the way, you’re in a magic area.

You’re not in the builder. Okay.

So let’s say I open this page. All right.

So let’s, let’s say, all right, guys, here we go. We’re, we’re back here.

Transport your body three months, three months from now we’re back. Okay.

We haven’t touched this website in three months. I need to edit this page.

So I’m gonna edit this page. And I’m gonna say to myself, oof, oof, why is that card, why is the dark, this dark card using black?

We don’t, we didn’t want that to be black. We wanted that to be the website’s base color.

Black is not suitable for this. I need to change this style.

So I’m in a page builder, which is logical. I wanted to edit the page.

So I opened the page builder. I mean, it seems like a very logical set of circumstances have happened so far.

I’m looking at an element. Hey, there it is.

There’s the thing that I don’t like. I want to change that thing.

So is your first instinct to be like, you know what I should do? You know what the most efficient thing to do right now would be?

It would be to leave, leave this area. Well, let’s just, let’s just leave.

Let’s just go back. 1:37:43

Oh, we’re still not where we need to be. 1:37:45

Okay. 1:37:45

Let me go back again. We’re still not where we need to be.

1:37:47 Okay.

1:37:47 Let me go in here.

1:37:49 Okay.

1:37:49 All right.

1:37:50 I see some code.

Uh, still not where I need to be. Let me go here.

There’s my style sheet. Now let me scroll up and down to find the thing that I was looking.

Why? Stop.

Full stop. Full stop.

Where is it? There we go.

I hit it. I hit the right sound right off the bat.

Didn’t even know. Okay.

Good guess. Good guess.

Why would I want to do all of that when I can just open the page builder? Logical step.

Look at the thing. Be like, oh, I want to change that thing.

Okay. Click on it.

All right. There’s my classes.

Let’s go down here. Hey There’s all the styling that lives with this thing that I wanted to change, right?

I didn’t have to go look around in a style sheet Didn’t have to go to a magic area didn’t have to do 18 different clicks to find where we’re doing our work. Okay?

That is like you want ease You want organized? This is as organized as it can possibly get.

Not to mention now, with this new root selector, my modified version of this card is sitting right here with all the other styles. I can see what the main styles are, I can see what the modified styles are.

Also, what I’m not doing is going, huh, which panel’s it in? Huh, which input is it in?

Like, this is the number one knock on page builders is that they scatter your styles. All of your styles are scattered through inputs everywhere.

Whereas if you come down here, look at this, it’s all front and center right here. Plus, by the way, you know, I do a lot of stuff with locally scope variables, defining locally scope variables right here, and then being able to use them right here versus having to come up here.

So it’s like, I want to make a locally scoped variable for padding. All right, so we’ll come down here and you wouldn’t want to do this for this kind of card, but it’s just an example, right?

So we’ll just say card padding is space M. There we go, I made a locally scoped variable.

Now, if I’m gonna go, if I’m in input land, I would have to go back up here and use that token, card padding, okay? So now I’m in a different area from where I created the class or created the variable to where I’m using the variable versus now I can make the variable, just scroll down a little bit, use the variable.

So I’m keeping all my work in one place, which is really, really, really nice. This is, this just having the root selector in general was a game changer.

Having this version of the root selectors even more of a game changer. You’re gonna see me do a lot of work here, a lot.

And I would encourage you to, if you especially wanna elevate your game, maybe you’re not the best at CSS right now. Maybe you’re not a master at CSS.

I would start trying to use this area as much as you possibly can. Don’t rely on the inputs until you run into something where, shit, I don’t know how to do that in CSS and I don’t want to leave my workflow to chat GPT this or whatever or you know whatever just then use the input.

But if it’s something easy right and especially if you’re gonna have any card variations or you’re doing anything with locally scoped variables or something a little bit more fancy or you know like for example here well I could I don’t want to I don’t want to sneak peek the code of that calendar, but let me just explain. Let’s go back to Bricks.

I’ll just give you a hint, okay? Let’s go back and look at that template that we were looking at a minute ago.

Bricks templates. And this is what we’re doing with frames, by the way.

This is what we’re doing as much as possible with frames. Now we’re limited in a little bit of a capacity here.

Let’s go to preview this. Okay, everything that’s going on right here, even with the padding in here, in here, so many details, right, that are in other areas or would typically be in other areas, all of the styling for what you see here pretty much, besides the card itself, lives in the grid wrapper parent.

So you don’t have to go, there’s a lot of children involved in what’s going on here. There’s a lot of children in this card.

There’s more children in the card than there are in the grid, actually. There’s a lot of child elements in the card.

You don’t have to go to every individual child element to be like, how do I change the styling for this? You can change it right from the parent.

So you just select the card and then there’s all the styles. It’s like so easy.

If I had it my way, I’d probably need to do another poll. I’ll do another poll.

I mean, if I had it my way, this is what you would see in frames. Now, so many people are like, no, I want it in the inputs.

I want it in the inputs. I’m like, why do you want to hunt down shit in input fields when you could just open this and see?

But it’s because they’re not like experts at reading CSS. And I get that, I understand, but I wish, I wish, you know, if it was just me using it, every frame, all the styles would be right here on the parent.

You would never have to click on a child to look for its styling, right? You would always just select the parent, and there’s the styling for it and all of its children right there.

And you could easily manage everything, change everything, add stuff to it, do whatever you want, all in one place, no hunting and pecking, no going anywhere else to any magic areas, it would be very, very nice, I think. Would that approach not expand your CSS in an unended, I don’t know what that word is.

No. In fact, this should be more efficient, because Bricks, I believe, is scanning the page for classes used on the page and only loading the CSS that is attached to those classes.

Whereas if you take all this and put it in WP code box, every element you style in WP code box, you’re loading the styles on every single page. Whereas this, I believe, I have to double check it, but I believe that Brics is only loading the styles for things that you used on the actual page.

1:44:04 David says, I’m liking this approach, still a CSS newbie,

1:44:07 but I like having everything in a single spot.

Yeah, I mean, that’s one of the most important things. Two versions of frames, beginner and advanced.

1:44:14 Oh my gosh, I just envisioned myself jumping off a bridge

1:44:18 right then and there when he said that.

I just face first, right off the bridge. No, there will never be two, one version of frames is quite enough, my friend.

Quite enough. My blood pressure is high enough as it is.

Having two versions of frames, that is a no. Yeah, and he even said, casual giant project suggestion.

I often transferred frame CSS to input fields. I guess I was on the wrong road.

Yes, my friend. Yes, pump the brakes.

You turn that bitch and yeah, go the opposite direction. You want, it would be better if you were taking things out of here and putting them in the CSS box.

Actually, that would be the best improvement. But if the project uses a page builder, the first logical action that you’re going to have is open the page in the page builder.

That’s what Kevin is saying. Yes, that’s exactly what I’m saying.

We’re still waiting on an indicator for the CSS we write on a class level in the builder. It works on the ID level only right now.

I know, and there’s a bug report for that. And I have no idea why that’s not been fixed yet.

I feel like it’s one of those things where they could fix it in like a jiffy, you know? Technical term would be a jiffy It should be fixed.

It should be fixed already You are not in the builder when you want to change the card from black You are at the front end usually faster to go to know that’s that’s a hundred percent wrong The first thing that people do first of all the difference between being in the front end and the and the builder is this That’s the difference. Okay.

So there is no like you’re on the front end. Now yeah, if I could change styles from the front end maybe I would, but I can’t.

But the natural transition is like, oh there’s the page I want to edit, there’s a button that says edit, then here we are. And now I click on the actual thing I want to edit and go down to CSS.

Here we are. I don’t have to go anywhere else.

But even if, even if I was on the front end and you’re like, okay, now let’s go back. Let’s go back to the front end.

See, I like these arguments though because we can actually analyze them and we can see whether they pan out or not. Okay, I want to go to WP code box.

Don’t see an option. 1:46:46

Okay, so let’s go to the dashboard, I guess. 1:46:49

So still not in the right spot. 1:46:51

Let’s go here. And thankfully, maybe I’m in the right spot, but maybe I’m not.

Maybe I was in another sheet somewhere else. And so now I got to find the sheet I want to be in over here.

And then I still got to go find the styles for it. I mean, there’s no way you are going to convince me that what I just did is faster than what I did before.

There’s just no, there’s no way, there’s no way. This was objectively faster, right?

And here’s the other thing. What if, by the way, to, let’s just put this to bed right now, let’s just put this to bed right now.

When I was building the card, how would the styles get in WP CodeBox? It would mean that when I was building the card, I had to leave the builder to go put them there.

So, and that’s the real workflow. When I’m building a site, you’re suggesting that it’s more efficient somehow for me to bounce back and forth between WP CodeBox than it is to style the element that I’m actually building right here without going anywhere.

And all of its variants, by the way, and all of its children, by the way. I can’t, I don’t buy that.

I don’t, I don’t buy that that would ever be more efficient. Now there could be other arguments like, well, you can’t do mix-ins in bricks.

Hmm, now you got me. You can’t do functions in bricks.

Ah, now you got me. You can’t do nesting in bricks.

Ah, now you got me. If we’re using those as arguments, like Kevin, I have to be able to mix in everything for whatever reason.

I have to be able to functionize everything for whatever reason. I have to be able to nest everything for, okay, now you’re making a case for WP Codebox, and what you’re going to live with is less workflow efficiency.

And you are saying, I am going to make that trade-off. And that is a fine argument to make.

If you’re saying, hey, I recognize there’s a reduction in workflow efficiency, but I get these other benefits and I prefer these other benefits over workflow. I can’t argue with that.

There’s no arguing with that whatsoever. You do you, dog.

You make your own decisions, okay? What you’re not gonna be able to say is WP Go box is more efficient than writing the CSS right here.

Just from a, where do I go to find the styles? How fast can I get there?

When I’m building, how fast can I add them? It’s undeniable that the CSS box is the fastest way to do this.

1:49:13 Okay.

1:49:14 No, I’m suggesting opening CSS Style Sheet in VS Code, not WP CodeBox.

I’ll do a poll right now. .

0001% of users work in VS Code on WordPress. I’ll just tell you that right now.

. 00001.

And no, it’s still not, because I’ve got to open VS Code, I’ve got to find the right project, I’ve got to do this, I’ve got to do that, I’ve got to make sure the connection’s all, because that’s all, just getting all that set up in the first place, no, no. I’ll just open Bricks and I’ll just put my styles right here, that’s it.

Yeah, why open VS Code for a project done in a page builder unless you need some specific style? Yeah, there has to be another reason you’re doing it.

Nobody ever in the history of ever would be like, you know what’s the most efficient way to style a WordPress site in a page builder? It’s to go into VS Code.

That’s not, I’ve never, I would never expect to hear that argument ever. There would be other reasons why you might want to go into VS Code, but workflow efficiency is not one of them.

1:50:21 VS Code is a code editor.

1:50:23 It is a standalone IDE.

1:50:26 Here we go.

1:50:27 You want to see it?

Here it is. Right here.

Hmm. Yeah, you get all these panes, all these windows, all these everythings.

This is not where we would want to be doing page building work typically. All right, we are in an open Q&A for the next 10 minutes, then I got to go.

Open Q&A, AMA, put question, all caps. I think we spent too much time looking at BRICS 1.

9. 1, but it was interesting.

I think it was valuable. It was good.

But I do have to apologize to people who have questions who have been waiting patiently to ask questions. Can you replace radio buttons with images in WP Grid Builder facets?

My gosh, woo! No warmup, Rob.

You gave me no warmup, my friend. Zero warmup.

I don’t even know if I have Grid Builder on here. I do.

Facets. Ooh, event category selector.

Do we have an events page I can look at that has one on here? Events, events, events, events view.

1:51:42 Ooh, there’s a facet.

1:51:43 There’s a facet.

Uh, can we hijack a facet? 1:51:46

What is it? 1:51:46

What kind of facet is this? Radio buttons.

Okay. What would be a radio button?

Um, this, maybe we could radio button that. Yeah, we should be able to.

Um, what is that product order? 1:52:04

Product order. 1:52:05

That’s not product order. It would be like event order.

All right. Let’s just see what’s going on here.

There it is right there. 1:52:09

Okay. 1:52:10

Let’s change behavior. 1:52:12

Wait, there already is. That’s already as a what, what go back.

1:52:15 Event search.

1:52:16 It’s it’s this sort.

1:52:17 This might be one of those that you’re not allowed to hijack.

Let me see though. 1:52:20

Yeah, you can’t. I don’t think it’s going to render now if I change it.

Save, re-index. No, it doesn’t render.

It’s going to be hard for me to, like, on the fly, build a whole thing that’s going to be facetized and all that. That’s a question that I ask this in the inner circle, and then I will look into it when I don’t have, like, you know, five minutes left.

And I will give you an answer. We could actually go to WP, maybe just go, I don’t, see my biggest knock on WP Grid Builder is they show grid after grid after grid after grid after grid.

The faceting is the most important thing of this. They just have like one little area on their faceting and then here’s an example right here.

Okay, they need to sell their faceting more. In fact, I would like if they just sold the faceting part of this separately.

I don’t even need, I don’t need all the other grid stuff. I just need the facets.

That’s all I need. Give me a scaled down version.

It’s it’s I believe it’s this input right here. Radio control.

It’s an after element. The problem is, you want to use, let me go back to the thing.

Kevin hide the chat. What you talking about?

You talking about Rob’s question? Oh, I want to go back to his question.

Replace radio buttons with images. I’m just wondering why you would, what do you want to put there?

Do you want like one image is like an unselected thing? Like maybe, maybe it’s like a frowny face.

And then when you select it, if it comes to happy face, what do you want to do? What are you trying to do here?

If you give me more specifics on what you’re trying to accomplish, because right now I’m just like, why? I mean like what’s wrong with an op, a styled option field.

Is there something wrong with that? What is the use case for using images here?

1:54:32 Then I can tell you.

1:54:33 Okay.

1:54:34 Do you use WP CodeBox to style the content in Gutenberg

1:54:38 or do you style the content using Bricks?

You can’t style Gutenberg stuff with bricks. So that’s a little confusing.

I don’t do a lot in Gutenberg. I’ll tell you right now.

If I don’t have to be in Gutenberg, I ain’t in Gutenberg. The only thing I’m in Gutenberg for is like a blog post.

That’s it. That’s the only time I’m in Gutenberg.

At least for right now, at least for right now. But let’s say, I’ll just take your question, Tyree, and we’ll say, if you were using, for example, GeneratePress and you were making a card in Generate, where would you put the styles?

Well, in that case, I’d put the styles in WP CodeBox. Why?

Because I’m forced to, because they don’t have a class first workflow in Generate. So I can put a class on something in Generate, but I can’t add styles to that class in Generate.

Therefore, I’m forced to go to WP CodeBox to add the styles. Just like people who use Generate typically are forced to go to the front end and then open the customizer and put everything in the customizer, but then they can’t even see the styles and the customizer inside Gutenberg because Gutenberg’s a trash can.

And then it’s a blah, blah, blah, blah, and, and, and, and, and, and, and, right? That’s why I don’t do that workflow.

That’s why that workflow is terrible in my opinion. But yeah, if you’re forced to put things in WP code box, then that’s another story.

1:55:59 Okay.

1:56:01 Okay, Kevin is passionate about what he thinks to be true.

I like that. But it’s not what I think to be true, right?

Some things are just reality. It’s like, so that’s why I can just show it, just demonstrate it.

Like, hey, this way took me eight clicks. And when I’m coming back to a site three months later, it’s better for my CSS to live with the thing I want to change than to be in some other obscure third-party place where I’m not doing work.

And we can demonstrate that that is, that it’s more efficient this way than it is this way. And if something is demonstratable, it’s just up to people to be like, I accept reality, or I’m just going to continue denying reality.

I mean, clearly we’re, now somebody can come along and be like, no, let me demonstrate a different way. Maybe you’re missing something.

Here’s what you’re missing. Let me demonstrate that this way is actually more efficient.

Then I watch and I go, damn, you’re right. The problem is that never freaking happens.

People just say, oh, well, this Kevin’s opinionated. Kevin’s this Kevin’s that it’s like, dog, I’m showing you like I’m right here.

Here we all are together. I’m showing you, I don’t know what else to do.

If you don’t agree, you show me a different way and then I’m forced to take a look at another option. The problem is the people who are always like, oh, he’s opinionated, he’s this, he’s that, they never show any alternative.

Like where are your alternatives? Show me.

And they never seem to be able to hit record on anything. And so it is what it is.

1:57:36 All right.

1:57:37 You have your blog content customized, your images in a post are stretched beyond container width, for example.

Oh, yeah, good question, okay. I believe you’re probably talking about giri.

co. Let’s bring that in over here.

Blog, here, okay. Oh, by the way, if you watched that video the other day, there’s a full write-up.

I’m testing out, you know, sometimes we’ll do a full write-up, but you see here, like this image breaks out and the code blocks break out. The answer is yes, this is all done in WP CodeBox.

But it’s done in a way that it’s not like there’s no class for breakout or anything like that. I just target figure elements, iframes, and code blocks, and I break them out.

So they don’t even need classes on them, or they just break themselves out when I add them to the page. 1:58:30

Is the explanation earlier explaining the root function in CSS? 1:58:34

Yes, correct, correct, correct. Question, say you have an events website, is there a way to make the event titles and dates appear when people Google search business events without people having to open the site like a snippet?

Let me read this again. Is there a way to make the event titles and dates appear when people Google search business events?

So what is or isn’t a snippet is up to Google. You don’t have any control over whether it is or is not a snippet, but you do have some control over whether it’s snippetable, let’s say that, okay?

So if you look at how snippets are formatted, and then you format parts of your post to mimic that, and then for events, for example, there’s schema that you can add, and that better helps Google understand, hey, what this is and the details of it, right? And then Google is saying, okay, the schema that we need exists, it’s in a format, like the, it’s in a logical tight format where we can snippetize this, then Google might select you for snippets.

But it also comes down to, are there any other events for that? It depends on what the query is, whether Google’s even showing snippets for queries like that.

So you don’t have full control over it, you have partial control over it. It would be great to have all the CSS in the item from frames.

It would also be a great place to learn by breaking it and fixing it. You mean the parent item, like the parent block.

Yeah, I’ve made that argument before, but I was shot down. I was shot down in a user poll people wanted more people wanted the styles to be in input fields When we can when it makes more sense to put them there now Sometimes it doesn’t make sense to put them there It only makes sense and sometimes the input fields can’t do what we’re trying to achieve So we have to put it in custom CSS So in that case we do but then we do try to use input fields for basic stuff That should be possible using Dom tags, right Kevin Geary?

I think are you still talking about this stuff breaking out on the screen? Yeah, yeah I just in the blog post template so the selector is blog post template like right here and let’s go to inspect.

Maybe we’ll be able to see it, maybe we’ll be able to see it. Let’s select this image.

Okay and that’s in a figure tag right here. So you see Brixie post content targeting a figure that’s not no breakout.

So I have a class called no breakout. Anything that I, any figures that I don’t wanna break out, any code blocks that I don’t wanna break out, any, cause they’re all, remember, they’re all gonna break out by default.

So, but anything I wanna avoid the breakout on, I can put this class on called no breakout. And then this is what happens right here.

So it just gets 25% wider and then the margin fixes itself. And that’s it.

There right there is the, and there’s actually a variable called element margin that I can control as well. But yes, you’re more or less just targeting DOM elements, like the actual HTML selector.

Okay, let’s hide that comment. HTML selector.

Okay, let’s hide that comment. 2:02:01

Five minutes. 2:02:01

Do you think native facets from Bricks roadmap will make WP Grid Builder redundant? 2:02:06

I hope so. 2:02:07

I hope so. 2:02:08

I mean, 2:02:09

like I said, there’s no other reason other than facets to have WP grid builder. So if bricks is able to, the problem is, and I talked about this, the problem with page builders, I talked about this last week with regard to the bricks form element.

Forms are quite complicated. Facets are quite complicated.

I mean, let’s take a look at this. I mean, look at the ability that I have.

When I’m creating, let’s go to create facet. All facets create a facet.

So I can give it a name, this is easy. I can give it a slug, I can give it a facet title, whatever, this page, whatever.

But now we get to this tab. Now this is starting to look a little complicated.

I mean, look at all the conditional logic that’s going on here. So when it’s a load facet, it can have these options.

When it’s a filter facet, it can have all of these options. There’s map facets.

If I’m sorting, look what has to happen here. If I’m applying data, if I’m resetting, okay?

Like there’s a lot, and then every one of these options, look at what’s happening down here with things that you can do or not do. Not to mention that the facets then have to be able to target specific loops on the page that you actually want to facet.

So the question I have is, Brick’s gonna be able to replicate something as robust as this, or are they gonna have to give us some watered down bullshit that kind of does like, it does like the minimum, the basics, but if you get deeper into a project, you really can’t do what you need to do? That’s exactly how the form element is.

It’s a surface level form element. It gives you the ultra basics of adding a form to a page.

Anything that you need to do that’s more advanced beyond that, you can’t use the Brics form element. So then it becomes a, when you have a business doing this, you have an agency, you have a team, you have processes, you have workflow.

If Brics cannot mimic this faceting functionality, just like it can’t mimic the WS form functionality, we have to rule it out completely. Because we’re not going to create a situation where we go back and forth.

I was like, sometimes we use the BRICS facets and sometimes we use WP grid builder. No, because from a process standpoint and an efficiency standpoint and a maintainability standpoint, we want to use one tool to do the thing.

Like we want to use WS form to do every form. Some people will be like, well on certain sites I just need basic forms.

I don’t care. I’m still using WS form.

WS form does a basic form just as easily as it does an advanced form. So I would never want to be in a situation where I open a site and it’s like, oh this form was built with Brics form and this form was built with WS form or this site has no WS forms, it only has Brics form.

Because now your brain has to learn two systems, remember two systems, remember where different inputs are in different systems. No!

We want to avoid that completely. We want to stick with a thing that does everything we need it to do.

WS form will do every form I need it to do. And so I’m going to use WS form for literally everything.

Facets. Grid builder does everything I needed to do for facets, thus I’m gonna stick with grid builder.

The only way I would switch is if Bricks gives us a solution that is as robust, right? It can’t have any shortcomings.

If it has shortcomings, I’ll stick with WP Grid Builder because I don’t want to implement a brand new thing on some sites and not others. And now we’re stuck managing two different processes and workflows.

That is not efficiency. So hopefully that answers that question.

Tyree, I’m glad you like it. Glad you like it.

He says it’s one of the best WDDs so far. What advice do you have for getting clients in your local area who have poor websites?

Don’t get clients in your local, I’ll just give you, I’m not gonna tell you what to do to go get clients. I’ve already done plenty of that.

Watch other WDD lives, watch my inner circle trainings on getting clients, but I will answer your question with something that will help you tremendously. Is everybody listening?

Guys, come in, come in, come in, come in, come in, come in, lean in, lean in, lean in, here we go. I’m gonna give you something.

This is going to avoid you wasting so much time, okay? I’m about to, every dollar that you paid for this stream right here, you’re about to get your money’s worth, all right?

You do not contact people who have poor websites. 2:06:53

I’ll tell you that right now. 2:06:53

Do not contact people who have poor websites. Why?

Because they don’t give a fuck about their website. That’s why they have poor websites, okay?

Contact people who have decent websites who you think are not getting good results from their website. That’s who you contact.

Contact people who have obviously put money into their website. They have invested heavily in their website and you think they’re not getting results for whatever reason.

Okay, why? Because those are people who are actively investing in their website.

Do not find the guy, all right, imagine the plumber, the plumber that his website is obviously from 1999, okay, and you’re going to call him up like, hey dog, did you know your website is just absolute trash, like it’s from 1999, it’s probably, and you know what he’s going to tell you? I don’t give a fuck about my website.

I have so many clients right now, I don’t know what to do with them. My Google My Business is rocking off the charts.

I got yellow pages, ads, I got trucks. Whatever he’s doing, he doesn’t care about his website.

So you’re not going to be able to sell him a new website. He hasn’t put money into it since 1999, and he just doesn’t care.

He’s good with what’s there. And what you’re gonna find is the psychology of people with the shittiest websites, they just don’t care.

They don’t wanna invest in a new website. You need to find people who are already clearly investing in their website and start conversations with them.

Because they obviously care about it and they’re already putting money into it. All right, so hopefully that helps save you a tremendous amount of prospecting time and energy.

2:08:28 Okay.

2:08:29 Um, let’s go with hide current comments.

2:08:32 Good.

2:08:32 Okay.

2:08:33 Leaning in doesn’t help.

Uh, can’t see your face. 2:08:35

I’m just telling you guys, that piece of advice right there will save you days, weeks of wasted prospecting time. Okay.

I got one more question that I’m dipping out. 2:08:54

Let me find a good one. 2:08:55

I’ll find a real good one. Let’s see.

Uh, Cookie Consent plugin. No, I don’t, I don’t care about Cookie Consent.

I don’t care about GDPR. I it’s not, it’s, uh, America.

2:09:06 Okay.

2:09:06 We don’t, we don’t, we don’t, we don’t do GDPR here.

Um, which by the way is ruin the fucking internet. Every website I go to, I’ve got to close 17 pop-ups and consent notices before I can actually use the website.

My gosh, kill me. All right, let’s see.

Bricks Editor is wondering, okay, when would someone use the CSS classes under the code box in Bricks Editor? CSS classes under the code box in Bricks Editor.

Oh, oh, oh, I think I know what you’re talking about. Okay, here is the question.

When would, this will be the last question then I got to dip. This is a good question.

It’s never been asked before on a WDD Live. So I will choose it and we will go over it.

When would someone use the CSS classes box under the code box in Bricks CSS editor? Just wondering, because I’ve never used it.

So I will hide that. I will remember to hide the comment.

We’ll hide the comment, okay. We’ll go into any one of these pages.

We’ll get the job done. And here is a, oh, I guess this is the page.

Was this page where, no, this is just a different page with a very, very similar card. Hey, there’s a little toggle button that we made.

Okay, sorry, ADD. All right, let’s go down here and let me choose the actual card, concert card right here.

Okay, open this class right here, CSS box. You’re talking about these boxes right here.

Yeah, why is this here and why is this here? Well, the idea is here, even though I believe you can come up here, let’s deactivate the class, but it’s not great UX.

You used to be able to double click in here, or, oh, there you go, you can edit it, okay. So you can edit the idea from right here.

You can call this like concert card, which you would never want to do, because this is a repeating element, like never do that. But if you were doing like an anchor link, okay, you’re making an anchor link to this section right here.

I do this all the time, I give the ID right here. So I’ll just say anchor section right there.

And now look what’s happened up here. It’s just another place to edit your ID.

And then for classes, you could put utility classes here. Let’s say I, now it’s actually,

2:11:18 it’s not a problem.

2:11:19 In oxygen, it is a problem.

In oxygen, this would be handy. I don’t even think this exists in oxygen.

In BRICS, it’s not a problem, and I’ll explain why. So what I can do here is, watch this, what am I on?

Am I on the card? No, let me get on the card.

Let me go to here, and let me do BG base ultralight. Look at that.

Oh, let me do something you guys can actually see. BG base, see that?

It applies what I put here to the element. The difference is it does not create a class in the database up here.

So this class, had it not existed before, still will not exist up here, okay? Now, why is that important?

It’s really not, because when you add a BG base up here in the database It’s not loading any selector in the Brics stylesheet Unless I assign classes to it if I assign styles So if I unlock this class and I come down here and start doing things to this class Now it’s going to add this to Brics’ stylesheet style sheet. Okay, if this is a locked class and this style is actually coming from an external style sheet, which is what’s happening with automatic CSS, Bricsys is not adding this class to its style sheet as well.

Oxygen, however, is not so bright. Oxygen, if you notice, you inspect an oxygen site, every automatic CSS class in oxygen is again repeated in the oxygen style sheet and every selector is blank.

Like what? Like that’s, hmm, hmm, hmm, hmm, quit doing that.

I don’t know why it does that. It’s not intelligent.

Not to say that the developers aren’t intelligent, it’s just like an oversight or something. One of those things that should have been fixed like two years ago in oxygen that’s still not fixed, oxygen adds blank selectors.

So it would be a good idea to come in here in Oxygen if this existed and add your utility classes down here. But then the problem with this box is that you don’t get any auto fill or guessing or anything like that, auto complete.

You don’t get anything, you don’t get anything down here. It’s just a raw box that adds classes to this thing right here.

So I don’t know why this exists. There’s no reason, you know, somebody could be like, well, I don’t, I want to write my style in WP code box.

I don’t want to put extra, but Bricks is not going to put extra styles in its style sheet unless you add additional styles here. So it’s not a problem.

If you wanted to create, yeah, I don’t, I don’t even know. I’m racking my brain right now for scenarios where this would be super handy and I just can’t think of one.

So if anybody else can think of one, I mean, tell me what I’m missing. Tell me what I’m missing, because I don’t know what this box, what the benefit of this box is for versus just doing it up here.

And that’s going to be it for today, guys. That’s it.

Full screen that, well, I’m showing something. I’m showing something.

No, I can’t full screen my face, because if I do this, then I’ll start screen sharing shit and forget that you’re staring at my face. So it’s much safer for us to be here.

All right, guys, hit the like button. I’ll be back next week to do another WDD Live.

I got to get out of here. I’m going to get some lunch and I’m going to go start recording the advanced training for that nice little schedule that I showed you guys earlier.

So Inner Circle peeps, that is on the way. Love you guys.

Thanks for being here and I’ll be back very, very, very soon. Thanks for being here and I’ll be back very, very, very soon.

Cheers.

 

Circle peeps, that is on the way. Love you guys.

Thanks for being here and I’ll be back very, very, very soon. Thanks for being here and I’ll be back very, very, very soon.

Cheers.