WDD LIVE 053- Niche Agency Website Critique + Live Hero Build + Q&A-AMA

0:00:00
Hello, hello, hello. Good morning, everybody. We have an unprecedented situation here. We are, we are, we are live streaming from the Sarasota compounds. First time ever, first time ever. What I need to know, can you see me? Can you hear me? Are things working?

0:00:26
Technically, technically speaking, there was no dry run of this. Let me go ahead and let me get this over to this to this side. It’s gonna be a little bit different today. I gotta get I gotta get used to the new setup. Hey, Amanda, good to have you cool web design is here. BZW Simon Merrill in the house coming through loud and clear says Maddie Eastwood. Let’s see if we can promote some comment. Well, look at that. That works too. Okay. Fantastic. Leanne says all good. Okay. Good, good, good. All right. Thank you. Thank you, Mark.

0:01:01
Clean setup. Okay. All right. Yeah, this is the B team setup. This is the B team setup, I think it, I think it came together, you know, quite nicely. Good enough, good enough for a free live stream, right? Okay. The camera takes 10 years off you. Oh, thank you. I appreciate it. I appreciate it.

0:01:20
All right.

0:01:21
Um, so here’s the agenda today for our WDD live. We do have a website critique to do. It is a niche agency. As you know, I don’t like to do a lot of agency website critiques, right? It’s, it gets very repetitive after a while. Uh, but this is a niche agency website and I, there’s some things that I want to discuss with regard to, I just took a quick look, see at it. And I think there’s some, some things, some value that we can

0:01:50
get out of, uh, this critique today. And then what I want to do is I want to do, I, it’s been a long time since I’ve done any kind of like live building, building action. And so we will do a live build of a hero section, which does present some, you know, it looks very simple. It looks like a very simple hero section, but it does present some. Interesting complications. And we will work through those complications and then we will

0:02:19
add this to frames as an option. It was actually a requested layout for frames. And you know, it’s been a while since I’ve been knee deep in automatic CSS 3.0 code. It’s been a while since I’ve actually built anything in bricks. So I just wanted to take a break, you know? It’s like, it’s very relaxing sometimes to just build something in bricks. Just, yeah, let’s work through it. Let’s figure it out.

0:02:45
Let’s, yeah, the camera lighting might be even better than Studio A. You know what it is? It’s the same, it’s actually the same lights, it’s same lights, same, there’s actually one fewer light. It’s the camera, but it’s not a better camera and it’s not a better lens. It’s actually a worse camera and a worse lens. But what I try to do, because the initial setup, I think, and I’m gonna go, when I go back to Atlanta I will make these same adjustments and then I think you’ll see it’s even better quality. I was always afraid to like stream in 4k and basically I was like I don’t know if I had the bandwidth for

0:03:26
that I don’t know if it’s going to cause problems with the stream that’s kind of part partly what we’re looking at today but I don’t think it’s going to be a problem and so I was you’re actually seeing like a 1080p stream in Atlanta and it doesn’t have to be that way I could I could switch it to 4k and we could go 4k and this is 4k. I think that’s why it looks better. And now that you know if this doesn’t have any issues with the stream I think you know we’ll be good to go. Where are we? Am I looking a little red though? Am I looking a little red? I’m not sunburned. Is the color

0:04:06
warmer

0:04:07
With the lights here No, we’ll just maybe we’re fine. Maybe we’re fine anyway Okay, so I think when I go back to Atlanta I’m just gonna switch that stream to 4k and then we’ll have really good quality in Atlanta as well It’s just a it’s just a choice on the stream quality so Oh, it’s just a little a little red. Okay. All right. Let’s bump that down. So we’ll go for now.

0:04:31
We’ll go 40. Let’s do 4,100.

0:04:33
Okay.

0:04:34
There, that’s a little cooled off. Oh, cooled off.

0:04:36
Yeah.

0:04:36
I, I mean, I am a little pink by nature. Okay. Like, I don’t, you know, let’s not get racist. Don’t hate on the pink. Okay. I have a little, I’m Irish. I’m very, I’m very fair skin. Uh, so sometimes I am pink and that’s okay.

0:04:53
Pink people are just fine too. All right, so let’s go ahead and dive into the critique. I would like to say hello to everybody, but there’s a lot of people here. We just need to dive in. A lot of people, you know, they’re like, just get to it. Just get to it. All right, we’ll get to it.

0:05:08
The one challenge we are gonna have here today is I only have one screen. It is a large screen, but I only have one of them. I don’t have the dual monitor set up so everything has to happen on the main screen and that’s going to mean I can’t see some of the stuff that’s happening. Let’s do a test of can we even share the screen. Let’s do a little test of that. There we go. Okay that’s working, that’s working back here. Alright we can switch back and

0:05:29
forth. Just doing a little bit of checks, checks before we go. Alright, well don’t want to do that. Alright so we’ve got supernovasites.com. We’re just going to dive into it. Supernovasites.com, and we are going to do our no-scroll test to start out with. And so what we see is health, wellness, and design. Transforming health and wellness brands is our main headline.

0:05:55
We create digital experiences that resonate with your audience’s health and wellness journey. We can get started is our main call to action. There’s not anything here actually. I mean, I’m on a very large screen so I can see the next row of content. So I guess we’ll read that next. Not everybody’s gonna be able to see that,

0:06:14
but I can see it. So I guess we’ll go ahead and read it. Quality designed to high standards and it shows communication from onboarding to launch. Expect clear communication each step of the way. Value service that will help your business grow and succeed in every way. Strategy, your goals are our goals

0:06:31
and we won’t stop until you reach them. So this is, I believe, a web design and digital marketing slash design agency, whatever. And it doesn’t really say that anywhere though. It’s like, this is one of the main problems I have with it. We have a headline that says, transforming health and wellness brands. So no mention of web design in here.

0:06:55
Health, wellness, and design. And then we create digital experiences. And that’s a cute way of saying websites, right? But the thing is, is maybe it’s not. Like there are other kinds of digital experiences one could have besides just having a website. So I think this introduces a little bit of confusion. Perhaps it definitely just doesn’t say what you do.

0:07:19
I’m a big fan of just saying what you do, like just let people know, right when they arrive, just let them know what you do. So they know that they’re in the right place, right? So that resonate with your audience’s health and wellness journey. So there’s really nothing here and nothing down here, nothing that really communicates. We’re a web design agency. That’s what we do. Or branding or whatever it happens to be.

0:07:40
Now I can go up to services and see brand identity, web design, social media, website maintenance. Okay, and then we have about, about us reviews, FAQs. We’ll talk about this, because I’m not a big fan of this either, okay? Which we’ll talk about. Let’s go ahead and inspect this. What kind of website?

0:07:59
Oh, we’re dealing with an Elementor website today. Okay.

0:08:03
Okay.

0:08:04
Elementor website.

0:08:05
And you don’t see these very often on WDD Live, you know, very, uh, usually when you see them, it’s people like, Hey, this is my Elementor site, but I’m about to rebuild it in bricks. I would love to know what you think about it so that when I rebuild it, maybe that maybe that’s the situation. I don’t know. So that when I rebuild that, I can rebuild it better. That’s usually what we see here, but I didn’t,

0:08:26
no notes came along with this website. So, but man, I mean, if you, if you, you gotta love you some divs, if you, and Oh, I love this too. I mean, let’s just, let’s take a look at, okay, main. This is actually, it’s quite interesting. You don’t typically see sections being used in element because they don’t add them by default. The person has to know to add them. Okay, just a fun side fact. All right, all right, let’s keep moving.

0:08:56
Let’s talk about this section right here.

0:08:58
We’ve talked about these kind of feature sections before. And it’s like you have an opportunity to say some really good stuff and really capture the audience or you have the ability to just kind of waste some space. And the number one rule, let’s do a little pop quiz. What is the number one rule for this section right here? And I’ll get you started.

0:09:28
I’ll give you a little tip. It’s don’t say, okay, and then I’m going to let you finish. Don’t say, don’t say what? Don’t say what? Let’s do a little pop quiz. Just put your answer in the chat. Let me pull up the chat here. Who’s hiding behind this show?

0:09:43
Okay, only the domain shows it’s about websites, correct. The Hunty says, let’s get the likes going. Absolutely, hit some likes on the stream. Yay, Justin, Justin wins. Justin wins the pop quiz. Don’t say what everyone else says. That’s the number one rule. Don’t say, besides the word solutions,

0:10:06
don’t say what everyone else says. Hit the nail on the head. Okay. Is everybody going to say quality? Yes. They’re all going to say that. Okay. By the way, by the way, they’re all going to say quality, whether or not the website is of any quality. Okay. So it doesn’t even have to be, they’re just going to say it to say it because they think that’s what should be said. And that’s you don’t want to go. Never go with the low hanging fruit.

0:10:30
Right.

0:10:30
You’ve got to think bigger. You’ve got to you’ve got to say something more important here. So everybody’s going to say this. And so it doesn’t have any value. The reason why you don’t say what everybody else says is because typically when everybody says it, it doesn’t it’s lost all of its value in the in what you’re trying to communicate. You’ve got to say something more important. You’ve got to say something different.

0:10:53
And especially don’t say what everybody else says when everybody lies, okay? Like, everybody can say this and will say this regardless of whether they mean it or not. So it doesn’t mean anything to the visitor. Then we have communication. From onboarding to launch, expect clear communication each step of the way.

0:11:10
If you’re gonna talk about communication, this is for all web design agencies out there. What is the number one pain point with communication in projects? It is that they never hear from the agency, right? They never know what the status of their project is. They’re not getting updates. They’re not getting, they’re like in the dark, right? Speak to that specifically.

0:11:28
Don’t just say, you know, we’re going to have clear communication. Like, once again, everybody says that. So how can you talk about this differently? You can say we know we know that there’s this major problem in our industry Where people are left in the dark about the status of their project? We’re not going to let that happen to you, and here’s how here’s how we’re going to make sure that doesn’t happen Here’s our protocol for communication see now I’m talking about specifics and these specifics are what people can actually latch on to and be like ah now That’s comforting right see just saying, oh yeah, we’re going to have clear communication like everybody else

0:12:04
says, that doesn’t comfort them in any way, shape or form. That doesn’t let them know that you know what the main problem in this industry is and that, you know, you have a way of avoiding it or solving it. Next one, my gosh, value. I mean, aren’t we all just trying to always provide value all the time and always? I mean, this is just very nebulous, zero specificity. It’s just, just talking to talk. It’s like, well, I needed a bullet point there.

0:12:30
And you know, that was, that was the best we could come up with, but it doesn’t say anything, you know, service that will help your business grow and succeed in every way. Well, I hope so. I mean, I hope that’s why you’re in business. I mean, hopefully you’re not in business to help businesses decrease in size and, you know, go the opposite direction, eventually close their doors and serve nobody, right? It’s like, we’re just stating the obvious.

0:12:51
We can’t use valuable space on a website to state the obvious. We’ve got to have something to say. And we have nothing to say in this bullet. This is a wasted bullet right here. This would be, this row would be better without that bullet in it, right? Strategy, your goals are our goals

0:13:08
and we won’t stop until you reach them. So I like this, your goals are our goals part, but you know, we’ve got to find just a better way to communicate all this stuff. It’s very generic right now. We don’t want to be generic, so we got to improve that section. Our services, web design, brand identity,

0:13:27
social media, learn more. That’s interesting, okay. So I see four things up here. I see three things right here. Little bit of a disconnect. Let’s click on learn more and see I’m just curious where this okay This goes like a services overview page womp womp womp. What is this? What is this? No man’s land of white space? Uh-huh. Perhaps we did not check

0:13:49
how this looks on a Larger screen right maybe maybe this is kind of what they were designing on right here But when you have the full experience, you’re, oh wow, geez, now look at, this is having to fill up all that space right there. See, these things should be capped, right? I also don’t know why there’s no, why is there no spacing between their paragraphs here?

0:14:12
Okay, some interesting things, what has happened here? here with 90 margin left 100 what is this what the things you find on Elementor sites guys it’s just it’s like what is going on this should just be a you know it’s because Elementor doesn’t have grid or probably didn’t have grid when this was built or the you know person doesn’t know how to use grid in Elementor and one of these things is true because this should just have a gap it should be a two-column grid with a gap and call it a day. Instead, we’ve got 90% widths on things.

0:14:55
We’ve got a hundred pixel margin lefts, just magic numbers everywhere. What does this number mean? Guys, what does this number mean? Let me zoom in here. Where did that number come from? Where did that number come from? How did I ask people all the time? How did you arrive at this value?

0:15:11
In fact, when we do the hero section build in a minute, you’ll see how we have to avoid some of this, right? You don’t wanna use magic numbers in web design, and this is very magic numbery. And it’s causing, obviously, problems, big problems being caused with this layout. I mean, look at this image. Yeah, they’re like way shifted left.

0:15:34
I mean, the content width of the website is like over here, right? I don’t know what’s going on with this section. Okay, so we’ve got some improvement to do there. Let’s go to the web design thing. More curious about that. Okay, packages and pricing. Well, that’ll be interesting to look at in just a second.

0:15:52
With our web design packages, you will improve your confidence, okay? Poorly designed website, I’m just trying to connect that dot. That’s a little bit of a leap. Let’s see, a poorly designed site can impact your sales performance. When you share your website with others, we want you to feel confident. I don’t know.

0:16:16
I don’t know if that’s the thing brands care about most. They care about first impressions. They care about having a quality image. They care about, I don’t know, the confidence is the thing to really hit on there, but I’ll let you guys decide. I mean, remember, this is a interactive thing. You guys can put your thoughts and people whose website this is,

0:16:37
they read the comments, they read the chat. And so they want to see what everybody else has to say as well, you know? Get more customers, a good website will attract visitors, help boost your revenue while you sleep. Okay, yeah, yeah, everybody says that. All right, grow your business. A website allows you to expand your business

0:16:52
into new areas like online events, classes, webinars, selling books or products, receiving donations, more. Okay, so that’s actually a good thing to hit on, right? A lot of people don’t know how to use their website to grow their business, and so we’re actually giving them specifics. This is why this copy is better.

0:17:09
Anytime copy can give or speak to specific things, it’s instantly better. It’s instantly better because it’s easier for the person to connect dots, right? Like, oh, I didn’t even think of maybe doing online events. I didn’t even think of doing, I don’t know, about classes. Courses maybe, I don’t know. Webinars, what is a webinar? Maybe this person can help me set up some webinars

0:17:34
and use those to leverage to grow my business. Like, now at least it’s something to chew on, it’s something to talk about, it’s something for them to get their mind going. Okay, you see the difference. We gave specifics and suddenly we’re able to connect with this better. Cut back on costs, improve functionality to your site,

0:17:52
we’ll cut back on your overhead and admin so you save time and money. I don’t know, I don’t know, that’s another leap. That’s a little bit of a leap. And I need specifics on that. You can’t just say that and then not show how that’s going to happen. Which I don’t think that’s, if I had to guess, that’s not expanded on anywhere on this website. So, okay. Well, here’s our process, how it

0:18:17
works. Discovery, design, development, okay. Website audit, brand questionnaire, all right. So it is good to go through the process a little bit. We talk about processes, everything process is very important. Process is a huge part of a sales funnel. Uh, speaking about your process, what they say, what they, they say, uh, I don’t know what our customers say, what are, cause you’re, you’re a, um, health. What is going on? What am I clicking?

0:18:46
Oh, well, look at that. That link extends out into what look at this. The things you find on Elementor sites guys. It’s like what what what is this? Why is that happening? Um wow okay um I’m not a huge fan of this little testimonial layout. It looks a little bit dinky. It looks a little bit uh well first of all the spacing’s off. Look at the gap over here versus the gap over here. You know, some little details, some little details. I mean, we can inspect this thing. If I had to guess, maybe this is like just a plugin

0:19:21
they threw in here, it’s just like a testimonial slider plugin. I don’t wanna, there we go. I just wanna zoom in a little bit there. All right, yeah, Elementor Testimonial, here’s the slide, okay. Yeah, yeah, yeah, okay. Okay. Yeah. Yeah. Yeah. Okay. All right. Yeah. It’s actually gonna be redesigned.

0:19:48
You know, you never want like skinny little columns of text, right? You just, it’s never really a good look. Website packages and pricing. All right. Wow. We’ve got a giant table of check marks to look at. I think this needs a little bit of balance, right? The most important part is like what’s involved over here. This is very small text, which also, I’m thinking this is a table plugin. Right off the bat, my mind goes to, they just threw this together with a table plugin

0:20:14
because, you know the giveaway? The dead giveaway is it’s using a different font, right? Like this font, this font, and two different fonts. The important information is very small. The check marks are gigantic compared to the text, right? We need to flip-flop that probably, right? You need little check marks, and you need to highlight the actual features here.

0:20:36
But I don’t even think, think about like a typical client, customer, right? Do they really care? Okay, I get a style guide. I probably don’t even know what that is. So how do I value that? You know, custom design.

0:20:51
Okay.

0:20:51
That’s what I’m looking for. But I mean, every package has it. Do we really have to like show, bang, bang, bang, you know, look at all the stuff that every package has. Uh, e-commerce isn’t included here, but I, does a customer even know what e-commerce is? I mean, they might think that just, um, you know, getting leads as e-commerce or something, I, ah, this presents maybe a lot of confusion here. I don’t know. Uh, payment gateway

0:21:17
integration. I don’t know that they know. Do I need that? Do I not need that? I think this pricing table is, it’s introducing a lot of questions instead of a lot of answers. I would, I would get rid of this. This is too complicated. It’s too complex. It’s too much going on. It’s too many check marks and X’s. This is get rid of this, get rid of this. What is the pricing here? $6.99 a month. Is this a website as a service? Yeah. 12 month commitment, auto bill monthly. We got a little WOS action here. Yeah. I would, I know this is, this is, you know, classic WOS style approach. We need a different way, a different way to, to lay out our packages here, I would say. Okay, we got FAQs.

0:22:04
All right, let’s see if they’re accessible. Can I keep a keyboard navigate to them? I can. Okay, okay. All right. Get started. Okay, let’s get started. Let’s see. All right, just a little form. So basic little form. Got a little spacing issue here on the button All right. I was gonna go to FAQs here. Oh, oh gosh. Oh dear coming soon No, no, we don’t want to do this if a page is coming soon Don’t pop just don’t publish the page. Don’t put it in the navigation. Just don’t it’s just doesn’t exist yet

0:22:44
And so let’s just not let it exist Also not big on this font right here. This font, this font’s irking me the more I look at it. Like it started out like look at this G. Why is that G grinning at me so so fucking much? That that G needs to calm down sir, calm down. I don’t like this you know omega symbol Q thing going. I don’t know this font is getting on my nerves. The more that I see it, like you know it it got me a little bit at the beginning, then I tried to let it grow on me and it’s, it’s not working. What font is that by the way?

0:23:18
So we can all know to exclude this one from spoof. Ooh, I, yeah, just based on name alone. We got, we got to exclude that one. Uh, what was I going to hit on? There was one other thing I was going to highlight on. Oh yeah. Let’s talk about the niche in general. Oh, let’s also go to the portfolio.

0:23:33
Our work. Okay, so this is one of those things where, you know, I’ve talked about niching before and let me let me take a pit stop to the chat and just see what everybody’s saying here. Need a tool tip for each at least. Okay, table alignment not in a line with the column. I changed the color of the X’s and check marks green to make it easily scannable. Good call, good point here. I need to charge more if that’s the work they do on client for $6.99 a month. I don’t like the pricing scale, not enough of a jump. Yeah, we can talk about that maybe in just a second.

0:24:11
Vertical blue line on homepage above our services seems unnecessary and is not repeated on page. What are we talking about here? The main services page. Oh, yeah, there we go. Okay. Blue line, blue line, blue line, blue line. I’m not seeing a blue line unless you’re talking about that thing, but I don’t,

0:24:31
I don’t see any other blue lines. I’m not sure.

0:24:33
Oh, right here.

0:24:34
Ah, that thing, that thing. Yeah, you’re right. It doesn’t, it doesn’t come down here.

0:24:38
Does it?

0:24:38
It does not. It’s not on any of the others. It’s yeah.

0:24:40
Yeah.

0:24:41
I think you’re right. I get it. You know, it’s like a little act of trying to lead the eye, maybe, you know, down. Uh, but you’re, you’re right. It’s probably not necessary. I’m actually not a huge fan of the colors in general I feel like this this blue is very aggressive that’s a very aggressive blue which is fine I guess. Mmm you know I think one thing I’m not a fan of is the link color and the accent heading color being the same thing.

0:25:14
It’s, it like creates a blue sandwich right here. Like, you know, here’s the top piece of bread, here’s the bottom piece of bread, and it’s all blue. And then I don’t know which one to click on. Yeah, this has an arrow, that’s great, but it’s too much, it’s too much. I’d like that to be, you know, subtle, right? It’s, right now it’s competing with the CTAs.

0:25:35
And that’s really, I think the main problem with it. Plus you have, you’re using this like, this color is what your action color is everywhere else. And then I, see, I do this, but then I’ve got this other, I’ve got this like alternate action color, which is weird. Like it’s weird that this is, we’ll call that peach, right? I don’t know, I guess that’s a peachy color.

0:25:57
So it’s like peach color, and then the icons are that peachy color, but then you went blue here with the link. That link could have easily been the color of these icons and you just have consistency. Then we’ve got blue dots instead of peach dots. It’s like we’re a little confused on what our CTA color is, right? What our action color is. Definitely now that I’m seeing this, these stars got to go. These pixelated, low-res, single image stars, that’s got to go.

0:26:32
It looks, that’s, you’re getting, that’s very chintzy, very chintzy look. Okay, we got to get rid of that. Okay, I was going to talk really quick about the portfolio and I think then we’re pretty much done here. We got some, obviously some cleanup to do. I would highly recommend you rebuild this in bricks. We have the classic, we have some color, some color stuff I would definitely work to improve here. The underlying code obviously has to be improved. But just classic case of really it’s the copy that needs the most work here. The copy is just very generic copy, right? And that’s the thing that we have to spend the most time on. And that’s true of almost every website. Let’s go to our work.

0:27:15
Here’s the problem with this niche kind of approach, right? One is you’ve got to really, really, really, really, really, really be passionate about health and fitness and stuff because there is going to come a day where you’re like, I can’t build another health and fitness oriented website or I’m going to jump off a bridge face first. And you don’t want that to be your situation.

0:27:35
You don’t want to live that life. You want, at least for me, creatives. You know, you’re creative, right? You’ve got to explore that creativity. You’ve got to be presented with new challenges, new things to tackle and overcome and to work on, things that are exciting, things that are new and fresh. And if you niche yourself like this, you niche yourself to death because it just gets so routine and standard and boring and like there’s only so much you can do with

0:28:04
another health and fitness website and really if you want to maximize profitability you shouldn’t be designing all these from… once you’ve built you know five custom health and fitness websites you probably just start using those as templates and and you know does your client really need a fully custom website in a lot of cases I mean if they if they do for whatever reason you know you can at least start with the template.

0:28:28
If you have a scalable, maintainable kind of thing, like you’ve built on bricks, maybe with automatic CSS and frames, you bolt on the custom stuff that they need to it, but they don’t need it to be completely from scratch. And if they did, they should be paying a project fee, you know, not a website as a service thing, right? But look at this. Here’s the other challenge with this niche stuff. And what is this? This is not a health and fitness website. So you’re kind of specializing in health and fitness websites. This is the hard part of the niche. It’s like chicken or egg thing. How do I get the sites in the niche without showing work? I can’t get the sites in the niche. Just like I got to eat, you know, I got to put food on my table. A project comes along that I

0:29:10
got to take for monetary reasons. And I got to, I feel like I got to take it. And then you end up with a portfolio with like a rev hard motors in your health and fitness niche website portfolio thing. This has got to go. If you had to do this for money, you had to do this for money, but you can’t put it in the portfolio because your brand is about health and fitness websites now. This is the niche. So these need to all be health and fitness websites.

0:29:38
What is this? See, look at this construction, engineering and whatever. This is not health and fitness. And it’s like, I know you want to show it because you did it. But you’re trying to create this niche agency. And what people want to see when they arrive at a niche agency is work within the niche. That’s the whole point of it.

0:29:55
That’s, that’s what’s supposed to help you get the next project in that niche over somebody else. So that’s another problem with the niche. There’s other ways to niche, by the way, you can niche to service-based websites. That’s a niche. Say I don’t do e-commerce. I just do service. That’s, that was my niche, right?

0:30:12
When I was heavily focused on the agency stuff. So we need some, we need some niche refining here and maybe some rethinking. I don’t know. And supernova, you know, does supernova speak at all to health and fitness, not really. So at least you’re not boxed in with the name of the agency, but at the same time, it doesn’t really help you in that niche in any way, shape or form. So, you know, I would rethink that.

0:30:35
I would rethink that. You’re clearly doing work outside of that niche or willing to do work outside of that niche. So I don’t know if you’re unnecessarily limiting yourself in that regard. Let’s go back to the chat. Etta Ware says, yeah, the branding is totally off. Try to use less stock photos. That’s a good call. Good call. At least show some images where the target group can see themselves. Great point. Let’s see.

0:31:04
Look at resources real quick. Kind of interesting. All right. Let’s go to resources. Resources, blog, guides, templates. Let’s go to the main resources page. Okay. Therapy website, the Figma website templates design, specifically for psychologists and mental health companies includes six pages. It comes with Google fonts, colors, da, da, da, da, da. Product is for commercial use.

0:31:23
Hmm.

0:31:24
Figma website template. I don’t know any customer that would use a, this is, you gotta be, you gotta be offering this to what other agencies or something. I don’t know. That’s a little bit, I need more clarification on what’s going on there. Oh yeah, yeah, yeah, okay. I see here, style guide templates. I feel like this is therapy website template.

0:31:45
See, this is tough too. I mean, you’re selling a therapy website template for $15. Isn’t a typical customer gonna come here and be like, well, hold on, you’re selling that template for $15, but then you’re charging me $600 a month. To what? Give me that template? Like, what are we doing here?

0:32:04
I would be a little concerned with that. Like, let’s go down. Where was this pricing? Man, I mean, look at these prices. Is that based on me getting that $15 template that you have on your resources?

0:32:14
I don’t know.

0:32:15
I don’t know. These are the questions that, I mean, most, let’s be honest. I mean, most customers are not going to dig around that much. You know, they don’t, they don’t do their homework all that well, but I am, I’m just clicking around a little bit and running into some, some challenges here. Canadian taxes for WordPress website. Who’s that for? Quote template.

0:32:40
Who’s that for? Logo design. Now we’ve got, now we’ve got competing audiences happening here. Not not sure. I’m not, this should be on your personal branded site, right? Like let’s move that stuff off. I think this is getting in the way. This is getting in the way right here.

0:32:56
Guides, templates, blog, Supernova wins, best website design, okay. Top eight brand photographers in Toronto, eight things you’re missing on your about page. The Barbie logo in 2023, can you use it? I don’t know how relevant some of this stuff is. Top five problems with artificial intelligence, logos, pride month, okay.

0:33:15
Black Friday deals, every web designer. Now we’re talking to web designers again. 2022 health and wellness design. Okay. All right. I’m not seeing a lot of stuff that would really tremendously help here. We could also take a little trip. We’re almost out of time for this website, by the way.

0:33:30
So we’re going to have to, we’re going to have to call it quits here. But let’s go ahead and unlock. I’m trying to keep these to 30 minutes come on one oh I’m trying to use okay fantastic all right come on now there we go there we I was trying to use the fingerprint on my keyboard because that’s what I do at home not realizing that this keyboard doesn’t support that so I’m over here hitting the fucking eject button or whatever that is up at the top right hrefs come on you’re not the fucking FBI let’s just all right now I can’t see,

0:34:05
now I can’t get in, right? Because I can’t just open my email up here. That’s why I need the second screen. Alright, we’re not going into Ahrefs today, I guess, or we’ll do it when I’m not screen sharing. Alright, that’s probably going to be the end of this website critique. We’re going to hop into our live hero build in just a second, but I want to spend a couple minutes with the chat here. Is the table responsive? I highly doubt it. I mean we could check it real quick services website design there it was check three options three free okay a little more, you know, confusing.

0:34:51
Yeah, okay.

0:34:51
Tables are tough, by the way.

0:34:53
Tables are tough.

0:34:54
I only use a table when it’s absolutely like required. I am not a fan of tables. Okay, let’s go back to chat. They need to work on their focus, cut out the fat and focus on the meat. Yes. A hundred percent. Uh, brutal review. Well, I mean, it’s, it’s we, our job here is to tell the truth.

0:35:15
Because, you know, sugar, sugar, sugar does not help. Sugar does not help people. Sugar makes people fat. Like me, kind of getting there. All right. Nav falls apart at 1024. All right. Well, you know, I’m sure there’s a lot. It’s an elementary site, there’s going to be a lot of stuff that we could find. We covered the main points here. How many people do we have on? Wow, are we over 200?

0:35:45
That’s just absolutely fantastic. Thank you everybody for being here today. Josh Hall of Web Designer Pro has great example of pricing packages in his courses. Damn, bro, it’s getting roasted. If this is your first time to WDD live? I mean, this is look, if you go to first of all, let’s let’s cover how we can, how you can submit a site, right? So I think it’s website critique application, if I remember correctly. Now, what is it? I

0:36:15
put the link in the in the just it’s down in the description of the video. Is it just critique application? I don’t have an actual link to it anywhere. It’s other than the video descriptions. There it is. Okay, so it says right here, you know, they have to consent to having the website publicly critiqued and then it lets them know after they’ve submitted, you know, to prepare for potential emotional damage. But everybody knows that watches WDD Live, that’s why they submit sites.

0:36:49
They’re here for like the honest truth and like what do I need to do to really, really improve this? And keep in mind, a lot of these sites, a lot of the sites are struggling. A lot of the sites, you know, they’re not getting traffic, they’re not getting sales, they’re not getting conversions. It’s not going to help me to be like, you know, oh, that’s great effort there. Fantastic. I mean, you’re on your way. It’s just going to happen for you one day.

0:37:12
You know, they want to know what the f**k is wrong with this site, right? So we talk about it, that’s what we do. And then everybody watching can learn too, you know? You start to see the patterns repeat. There’s like, I did the pop quiz, don’t say, and then it didn’t take but two minutes for somebody to finish the sentence, right? That’s, you want that drilled into your head,

0:37:35
these principles that are so common, and we can just avoid common mistakes. Most of WDD Live is talking about common mistakes that we see on every single website. So it’s not this person getting roasted, really it’s like the industry getting roasted because we just see it all the time. It’s everywhere, it’s rampant.

0:37:54
And so the more we talk about it, the more it gets ingrained and then as the person is building the next website, they’re like, ah yes, we can’t just say what everybody else says. Ah, yes, we can’t make that common mistake over and over again. Ah, yes, you know, do people even know where they’re at when they’re doing the no-scroll task? Did I say the right things in the hero section, in the header, wherever I need to say it so

0:38:15
that people know right when they arrive? Stuff that we talk about with CTAs all the time and colors and, you know, same stuff over and over and over and over and over again, but it’s important to repeat it until it starts to improve and then we will see sites that have nailed it and then we start looking deeper we start looking at SEO we start looking at the accessibility of the website is the DOM clean is this was this built in a maintainable scalable fashion that’s where we get into that side of things when they’ve nailed all the main things then we start to go deeper deeper deeper and use our time in other places. But with most sites we don’t get deeper because there’s too many of the

0:38:55
you know initial boxes that have been left unchecked. So yeah if you’re here that’s what we do at WDD Live if you’re new here. Okay so what we’re going to do now is we’re going to talk about building this hero section right here. So you know Samantha had put this in. I don’t even know if here we go let’s just do this all right maybe we can zoom on it a little bit because it won’t let me circle won’t let me make it any bigger okay so Oh internal temp high allow it to cool oh this could be an issue here did we lose okay see this is why I was worried about streaming in 4k this is why I was okay we may well good good thing that we got to the next segment, the camera, this is Sony, by the way.

0:39:42
See, I use a Canon at home. Maybe this is an opportunity for me to just rag on Sony for a minute. Uh, but we just reached a temperature warning, uh, of the camera. So, uh, that was, that’s yeah, there we go. Okay. So let’s go ahead and I can X that off of there. So you don’t have to look at that all day. Okay well at least we’ll be able to continue going.

0:40:04
You don’t actually have to see me for the next segment so that’s good. Perfect timing. What did that last? 40 minutes? We got 40 minutes before the camera overheated. That’s one of the issues with streaming in 4K. Yeah Mark said I had the same issue in 4K. Okay so that’s one reason we may not be able to go super high quality on the live streams.

0:40:25
Okay yeah that’s a thing in 2024, right? You wouldn’t think so. You wouldn’t think so, but apparently it is. Okay, so what we’re gonna do, flip the screen out to cool it down. The screen is actually flipped out right now. So, yes. All right, what we’re gonna do is we’re gonna go to Bricks. It’s cool, you don’t have to see me for this part. Well, that’s the good thing. So we’re going to go to the Bricks, the frame source website, because this is going to be a frame. And what we want to do is we want to build this hero section that was requested by a user. And as you see, this content, it’s a staggered image kind of thing going on here,

0:41:06
which we’re going to talk about modularity. When you’re building, thinking about modularity, thinking about blocks within blocks within blocks. And then we’re going to talk about this overlap situation because there are many ways to handle this overlap. But in my estimation, you know, when I saw this layout, I was like, ah, that’s going to take something a little special that I don’t think we’ve done before on a live stream or a video of any kind.

0:41:32
We need to talk about this. It’s very important because of the nature of that overlap we’re gonna I’m gonna show the problem with it that I foresee and then we’re going to talk about how to make sure that that problem is automatically solved okay so because well when you when you see the problem you’re gonna realize oh yeah that’s a that is a problem and then we’re gonna have to make sure that that’s not an actual problem especially because it’s a frames website now if our frames layout if you’re gonna build your own site and just put this in willy-nilly, I mean maybe maybe you don’t go to the extra level of detail that I’m about to go to

0:42:09
but I still would probably recommend it because it’s just good practice. You want to create at all times when you’re building what I call unbreakable situations. So you recognize when a scenario like this a layout has the potential to create a breakage. If things are adjusted or used differently than originally intended, there’s an obvious break point, not like an actual breakpoint web design, but a point where things will break. Right. And you want to build in a protection against that.

0:42:41
That’s like next level, right?

0:42:44
Development.

0:42:44
That’s what you want to get to.

0:42:46
Right.

0:42:46
So a lot of like beginner web designers, they don’t even realize when something is broken, okay? They just put broken things out into the world, right? And then intermediate realize, ah, you know, that’s broken, I gotta fix that. But they don’t fix it in a way that makes it unbreakable in the future. So the third level is like, ah, I see that that’s broken,

0:43:11
I’m going to fix it, but I’m also going to put in a protection so that it never breaks again or, or doesn’t, at least it doesn’t break. Um, you know, it takes a lot of effort to break it. So that’s what we’re going to take a look at here and I’m going to go nice and slow and we’re going to talk our way through it and I’m going to bring up the chat as we go. And because, you know, it’s very easy to lose people, especially if they’re new

0:43:33
here. I mean, if I just fly through this, we’re going to lose people, right? And that’s not the point of this. We have time. We’re just, we’re chilling, we’re hanging out, we’re having fun, we’re going back and forth. So let’s just take our time with it, right? So the first thing I need to do, because this is frames, I need to go type in hero, and

0:43:54
I just need to figure out what the name of this thing is gonna be. So we are all the way down to, I gotta get some of these, some of these windows you guys can’t see from ECAM out of the way. Hero Sierra, QRST, I need a T, don’t I? Hero T, I don’t see T. Now what is T in the UN alphabet, right? UN alphabet T, T, T, T, T, T, T, T, what is it? I should know it by memory here. Tango, that’s right. Okay, so I think we can go Hero Tango. Alright, so we’re going to oh no we don’t want to publish it that’s what I do by default typically when I’m working on local but we do not want to do that we’ll keep that in draft mode for now okay and we will edit this with bricks I wish I could see the chat while

0:44:43
I do this but I just can’t okay all right so let’s go ahead and add a section and we’re going to keep all of this open. We’re going to organize this as we go. Is the resolution of the screen sharing fine? Because this is a larger screen. I’ve already changed the resolution on it to make everything a bit bigger because it’s a 4k screen. But we’re not using nearly like I could go. I mean I could go crazy with this, right? Is it, is it a, can you see everything? Is it comfortable? I don’t want things to be too small, right? You know, if you can’t see what’s going on, that’s a problem. All right, resolution’s good, it’s perfect, looks good for me. Okay, fantastic. So if we’re looking at this, what I’m already noticing is I already have a subframe, we could call it, like a,

0:45:31
you know, because we’re talking about modularity, called an intro. Like this is just an intro layout. It’s like you could use this intro anywhere. It’s not a unique part of this particular layout, right? So what I’m going to do is I am going to go up to templates and we can go and we can just search for intro. And we’re going to see this is common patterns. You’re looking for common patterns in web design. So intro echo seems to give us that common pattern.

0:46:00
Now what we have to do is make the decision, are we gonna leave this accent heading in? Because in the original, there’s no accent heading. I’m a fan, typically, I’m gonna see how it looks, first of all, we’re gonna see how it looks. I need to change this to an H1 in this particular frame, because this is a hero, so it needs to be an H1, where normally this is like a section intro,

0:46:22
so it’s an H2 by default, but when people import this particular frame, it will be an H one. So that’s nice. Um, I’m going to look and see if this looks okay. If it doesn’t, I’ll get rid of it. But the reason I tend to leave these things is because the user can get rid of it if they don’t need it. That’s the whole point of frames is like, use what you need and get rid of the other things. The other things are there if you need them because they’re a good time saver.

0:46:45
It’s annoying to be like, Oh, I’m using accident headings. Now I got to go add one. Well, it’s already there. But it’s much easier to just remove it if you don’t need it. So I’m gonna leave it by default, right? The next thing I want to do is I wanna look at this image layout right here as its own block potentially, right?

0:47:05
So I’m gonna go up here, and the first thing I’m gonna do is search for image group. And I’m gonna see if there’s one that we’ve already, look at that, image group alpha. Okay now can we use this in this frame without causing any additional complications? That’s what we’re about to look at. I’m gonna get rid of this right here and so you see image group alpha is a little a little the way that it’s built is that it actually overlaps itself on the top and the bottom and for certain scenarios that’s good. For this scenario I don’t know how good it is because it is obviously covering up tax right now

0:47:41
Now we could fix this with gaps and so on and so forth I’m also trying to figure out their website width must be much narrower than ours Because this is feeling it’s feeling quite wide right? I’m using I think this is 1366. So we might be in a situation now where we have to change the content width of this entire section, which we’re gonna play around with in just a second. I’m gonna show you how that should be easy, very easy to do with automatic CSS.

0:48:16
So I’m just, I’m thinking right now, I’m probably not gonna go with image group. Was that in a container, by the way? Let’s wrap in a container, just to make sure it’s actually following the website. Okay, that’s a little bit better. I’m still convinced that that’s a little wide. I’m going to default to not doing that.

0:48:35
I’m going to make this not a modular thing. I’m going to make this overlapping because of the nature of the overlap and all this, I think this is kind of pointing to the direction of just make this part of this frame and don’t try to make it a modular thing that people can use elsewhere. So that’s the direction we’re going to go for right now. So what I need to do is grab two images and pop those in. This is going to be called image group and we’ll do image, image. Usually I call these media but I don’t foresee these being videos. That would look atrocious, right? Side by side videos? No, I don’t think

0:49:10
that’s going to happen. So we will stick with images in this regard. So we have intro echo, which is its own separate frame. And then we just have this image group, which is going to be part of this hero section and it’s hero section tango, right? That’s what we decided to call it. All right, hero section tango. And then that has an image group.

0:49:31
And that’s really all that there is to hero section tango. Now that’s not the complication. The complication is still to come, but in terms of elements, I think that’s really all we’ve got there. So on these images, we’re going to go with a figure tag, make sure that we figure these up.

0:49:46
Okay.

0:49:46
Um, I tend to go image wrappers. Okay. So I am going to wrap this with a block. I’m going to wrap each one with a block while we’re here. And we’re just going to call this image wrapper. Now, the reason I wrap images, I think I wrote a little bit of an article on this at one point, but it gives you extra pseudo elements to use, which you can’t just magically produce later.

0:50:09
Okay, it’s better to have the wrapper and not need it than to need the wrapper and not have it essentially. And if you look here, you know, look at these little dots, this little accent dots. We’ll talk about how to maybe create that as well. Do you guys know how to create these, this little dot grid accent thing? It’s very popular in design. If you don’t know how to create that, by the way, you don’t go into Figma to create that.

0:50:29
Don’t go into Figma, don’t go into Photoshop, don’t go into Canva, okay, to create that. You create that with CSS, my friends. So we’ll take a look at how to create that. But see, you need a pseudo. Now you can use the figure wrappers as pseudo elements, but you only get two. And if there’s something fancy you got to do, you know, you might need extras. And so having an image wrapper is a good practice in my opinion So we’ve got image wrapper image, okay, and we are good to go

0:50:58
Image image yeah, yeah, okay. I think you know naming things is hard I’m just making sure that our names are logical and make sense so I’m going to auto BIM up here So we’ve got hero section tango, and we’re going to immediately say No to these these intro things right because they’re already their own block. We do want the image group and we do want the image wrappers all right and I think yeah I think we’re good to go there so let’s go ahead and apply classes. Excellent. All right so I’ve got hero section tango to work with I’ve got hero section tango image wrapper and hero section, Tango image.

0:51:39
So what I can do with this image group now is I can come down here and we’ll set this to grid. I’m just going to default to using grid here. We’ll just use a two column grid. We’ll put a gap in there of grid gap, right? And then we’ll just throw some images in here. I think we’ve got some placeholders. So let’s go to placeholders or go to gallery.

0:52:00
I like to start with real images. So we’ve got some real images that we just use for, you know, marketing purposes or whatever. And let’s go, let’s go with this one and let’s go with, oh, that’s not a tall image. Let’s see if we need tall images to make this effect. I mean, I can force the aspect ratio. That’s probably what we’ll do as well.

0:52:21
Cause we, this is a, okay, we’ll talk through this because this is an example of like what a real person might do, right? Let’s do this one. And because this one has an interesting crop, right? If somebody puts in wide photos, they’re never going to get this effect. That’s just never an effect they’re going to get with wide photos unless, unless we force an aspect ratio. So in order to preserve the effect, so this is the first step of identifying a breakable

0:52:52
situation, right? Person puts in photos that are the wrong aspect ratio. Suddenly they’re like, this frame doesn’t look like the source. Like now, now we’ve got complaints and we’ve got customer service time. Okay. So try to avoid these things. Don’t we? All right. Here are section Tango row gap. I’m going to come down and put a container gap on this because we don’t like these things touching each other. Okay, so let’s talk about forcing an aspect ratio. We’re just going to go to aspect ratio right here and you start to put in, you start to play around. Let’s go with like nine, that’s the opposite direction because I’m dyslexic. Let’s do this three, six, five, four, three point five, three point five, starting to get there, starting to get there. Let’s go with that for right now.

0:53:41
Let’s go on object fit of cover so that we’re not warping them. And see that crop situation here? So now we’re gonna have to think about our object position. Defaults to center, center. Now, this is something that I always feel like, you know, this is gonna be hidden for the visitor. I say the visitor, the user,

0:54:05
the user of the frame, right, is going to need to know. So I’m thinking now do we, do we give the user the ability to change it with like a locally scoped variable which would look like this, image group and I could put CSS to denote that we’re going to go with some custom CSS here. And I would say like Image one Aspect ratio. I’m sorry Not aspect ratio object position image one

0:54:38
And we can shorten it to a position but now that might be a little That might be a little confusing. Let’s do image one object position or I could say left image object position. I don’t know if that would help us much. Let’s go 50, 50. Okay and then let’s do image two object position. This is again you would not if you’re building this hero for yourself you don’t have to go this level of detail but for frames we have to because of these we don’t know what the person is going to put in there. They could put in anything. Now object one image one object position image two object position so let’s go over here and let’s do this object position okay

0:55:28
this is image two object position okay and I’m going to copy that and I’m going to go over here and oh did I do that at the class level? We don’t want to do that at the class level. What I thought I was I was on the class. Okay let’s let’s not do that. You want to do this at the ID level. Okay object position that’s image 2. Make sure we’re at the ID level. Object position this is gonna be image 1. Object position. Now let’s go do a quick little test. Make sure that we’ve got our controls set up properly here. Let’s go to, oh, look at Bricks. Why did it, have you guys seen that before?

0:56:05
Why did it take away our dynamic root selector? I put that and it’s like transitioning it. Look at that, look at that control we have now, okay? This needs to stay on the 50% access. So I can actually just move her. Like I can just bump her, right? Okay, all right, so look at that. Now what we’ve effectively done now is just given the person who’s going to use this

0:56:30
frame a little bit of a control point for making, because we’re forcing a crop. Anytime you’re forcing a crop, you now have to have control over how that crop is occurring, otherwise you crop out important information in the photo. So seeing this, we say we need to give a control point in the form of locally scoped variables that only apply to this frame and that when you read them you should by default know what the hell they’re doing. Okay, now you have to know what object position is but this is just base level web design stuff. Okay, but now we’ve given that control point so it doesn’t matter what kind of photo I

0:57:08
pop in there I’m able to quickly adjust what part of it I’m seeing knowing that the crop is being forced. Okay, so now what we’re going to do is we’re going to go to border and we’re going to pop a radius. I think we’re using FR card radius here for these, which, you know, we’ll be changing in the future, but we’ll continue with that trend for now. And let’s just take a look at what we’ve got on the front end. All right, so we haven’t even gotten to the complication part yet, right? We’re about to do the complication part.

0:57:39
Now, let’s talk about background colors. Right? We can go, I’m just, I stick with neutrals in all frames, right? So I can go to background color and here’s the thing that we’re talking about, at least I’m talking about this with myself internally, because we have the new color relationships in Automatic CSS, but the color relationships, auto color relationships, only work with classes, like background color classes because they’re just you know

0:58:05
they require too much for like a variable to do it so if I did something like I could do like BG base does this install even have it that would be the first question BG Oh what are we doing up there let’s go BG we could go dark or or ultra dark let’s just see if this is yeah see how the text just turned light? It was just like, oh, okay, I see the background’s dark. I guess I shouldn’t be dark too. And so it changes itself to light. That’s an automatic color relationship. Now it forces us to have to use utility classes for these things, but I think background colors is actually a really good use of utility classes.

0:58:44
Because background colors are typically managed based on the relationship to other content around that section. So it’s not like this section always should be dark. Now it is a hero, so you may want the hero to always be dark. If that’s the case, sure, you can put the background color on here and then manually change the typography. But if you want the auto color relationship to happen, that would require a utility class, one of the background utility classes. That’s neither here nor there, though.

0:59:12
Here’s how it would look if you wanted to do it programmatically based on the class. You would just come in here and you would choose the dark or ultra dark, whatever background color you want. Let’s go with dark. And then you would just go to typography and you would choose the text light or text light muted, whatever, text light. And you get the exact same effect, right? Okay.

0:59:30
Now what we want is we want to start talking about the overlap that’s occurring. So this little overlap right here, so it’s actually quite a large overlap. And I’m gonna show you what the problem is going to be here. And in order to illustrate this, we need to add some sections. So we’re gonna go section, section, section, we’re just gonna add a bunch of sections, right? Pretend that there’s other content on the page.

0:59:53
By the way, I keep looking at the camera, waving my hands, talking to the camera, as if you can fucking see me right now. I just realized, I just realized that I’m doing that a natural habit but fun fact because you can’t see anything that’s going on over here I wonder if I probably okay oh the cameras back the cameras back hang on it’s back from the dead it’s back from the dead can we get I don’t I don’t know how to get I don’t know how to get the camera back though what are we at oh no we

1:00:24
don’t want to do that oh geez we could we could mess up everything here if we’re not careful.

1:00:28
Uh…

1:00:29
Da da da da da… Okay. Oh, down here. Uh, down here. Video?

1:00:35
That looks like a video.

1:00:36
Uh, oh, is that me?

1:00:37
Okay.

1:00:38
Uh, what do we put in here?

1:00:40
Uh, face?

1:00:41
No, no. Cam Link 4K? Uh, Cam Link S and current scene? Okay. I don’t know that that’s… Yeah. I pretend that I can see you.

1:00:52
What’s this one?

1:00:56
Cam Link 4K, classic, okay. I don’t, it should be, should be showing, but it’s not. Okay, well, we’re just gonna, we’re gonna go without the camera. All right, I don’t think I can get it back. I’m not, I’m not talented enough of a streamer to get this camera back right now. All right, so we added our other content. So we know that there’s many ways we can do overlaps. There’s only one way that we can do it in my estimation for this particular frame. Now,

1:01:20
we could do a background gradient where this dark color is part of the gradient, and then the rest of the gradient is a color that matches the next section. But the obvious problem with that is that we have to know the color of the next section, and we clearly don’t know that. We have no idea what the frames user is doing in this context. And even if we did that, which also you can do with a inset box shadow, so you can use an inset box shadow technique to do the exact same thing, this also relies on you knowing the color of the next section. Not to mention that if the next section uses a background image or a pattern or something like that, these techniques will not be compatible with that

1:02:08
because there’s no way for them to extend the image or the background pattern into itself. So that’s broken, we can’t go that route. So there’s some limitations, right? In my mind, we need to go with negative margin. All right, so when we go with negative margin, I’m just gonna put, and actually instead of blank sections down here,

1:02:29
let’s just, we can put real sections. So let’s go up here and let’s put content. Let’s do like, let’s do this section, content section mic, okay? Look at that content section mic, just chilling down there. Content section mic is about to have its day ruined by this negative margin that’s about to happen above it, right? And this is where we’re going to see the

1:02:55
complication with this. Okay, so I want in hero section Tango the bottom padding probably to be zero so we can get these images as close as possible to where they need to go. And then we’re just going to pull, use them to pull everything else on the page up underneath them. And so what we’re going to do is grab the image group. That’s the container that contains both of these images. And we’re going to put a, we’re just going to test out using magic numbers first, right? If I put minus 200 pixels, I get the overlap that I wanted. Now, immediately you see the problem. Content section mic has just had its day absolutely ruined, right? It’s shine is being taken away.

1:03:43
It’s not good. So how do we know? Most people, I think, to fix this would come down to content section mic, which you wouldn’t want to do this on the class because this only applies to this one situation. And they would do some sort of padding here, right? So normal padding is section space M, but if I add 200 pixels to that now, I’m back I’ve recovered but again, we can’t be littering these magic numbers anywhere

1:04:09
This is I mean, you’re an absolute psychopath if this is what you’re doing, right? Cannot cannot be doing this. We have to have a token that represents the value of this overlap but the problem is where where are we going to put that token because The token needs to be accessible by both of these sections. I can’t just assign it to like a class or ID up here. I don’t think it’s going to be accessible by the next section below it as far as like a locally scoped variable goes. This needs to be a variable that’s accessible by all content on the page. I don’t, I can’t put this up here. I mean you could go to page settings custom code and put it up

1:04:45
here, but I can’t do that because when somebody inserts this frame, that ain’t gonna come with it. That’s not gonna tag along. That’s not gonna work. That’s another breakable situation. So that’s not good. So I’m thinking we go with a code block. We’re gonna have to put a code block

1:05:03
in this section right here. And I think there’s a way that we can just programmatically fix this. We don’t even need to know what section they’re adding below it. I think we can just programmatically fix this. So, let’s do this. First of all, we got to get, let’s get our code block going on. So we’re going to get our code block in here. If I could type properly. All right, so we’re going to drop a code block in here, and we’re

1:05:25
going to go to content, and we’re going to get rid of the h1. I hate that they put like default content in there. Execute the code, render it without a wrapper, clear out the default stylings. Okay. So now what we’re going to do is we’re going to define the variable that we need. We’re going to attach it to the HTML selector and this is just going to be our overlap. That’s it. I don’t think it needs to be called anything else, anything fancy. We could say, we could say image overlap if you wanted to make it a little bit more clear. You guys want to make it a little bit more clear? Okay. We’ll do it. We’ll go with image overlap. And for right now, let’s just do minus 200 pixels. Okay? And let’s just save here.

1:06:08
And I think this is all new to me again. We’ve got to assign these codes. This is new in Brics, a security feature. Hopefully it doesn’t mess with anything we’re trying to do. Now let’s go to image group CSS and all we’re gonna do here is take that 200 pixels, right? And we’re gonna say image overlap. Now, another thing I should point out is I’m not a fan of going negative with the token value. I think, because I think you’re going to see why in just a minute, it adds additional complication that doesn’t really need to be there. The image overlap value is 200 pixels, okay? The fact that we need that to be negative is inconsequential because we only need it to be negative in one place and then it kind of needs to be

1:06:51
positive like everywhere else we would use it. So it needs to be negative on the image wrapper itself for this image group right here. So what I would do to do this is say times negative one. So if we take the overlap and multiply it by negative one and when I hit enter automatic CSS should wrap that for us times negative one we should get now the code block because I changed it has to be signed again in order for all of this to snap into action there we go okay so now I’ve taken a positive value 200 pixels and I’ve made it negative by multiplying it by negative one and I’m getting the overlap now and now the overlap is using

1:07:32
a token value that we all know what we don’t even care what the value of it is we just need to know what the name of the token is. Now if I came down to this content section Mike and I went to this layout right here we have section space M plus 200 well this is not plus 200 anymore this is the image overlap which needs to now be a positive value right? Okay so we have of our image overlap there and let’s just go to the front end and see what we’ve got. I mean, look at this. This is perfection, right?

1:08:04
This is perfection. This is what you’re looking for. The problem is, the problem is, the fact that I had to click on feature sector, content section mic, and add this manually. I mean, where I know to do that, because I’m the one that built the frame, but the frame’s user doesn’t know you have to do that.

1:08:24
When the frame’s user adds content section mic they’re going to see that and then they’re going to be like then they’re going to start magic numbering this padding to death to try to get breathing they’re not going to do this the right way come on let’s be honest guys i frames user i you’re you guys are fantastic you guys are fantastic but i think the average frame user would not be like oh i bet kevin uh you know define a locally scope variable in code block somewhere i just have to go find that reference that and make an account they’re not gonna I don’t think I don’t think that’s gonna happen I’m if it does they’re an expert they’re a pro frames user okay so what we’re gonna

1:09:00
do is attempt to do this for them attempt to do this for them okay so how are we gonna do this well we already have a code block handy so let’s just try it here and let’s talk a little bit of CSS okay let’s talk about how we can do this. So we have a hero section tango up here. So I’m going to say hero section tango plus now how are we going to identify the next section down? I can’t. I don’t know what it’s going to be. I do know it’s going to be a section of content most likely. Okay. Now I could say star. I mean, I could go that route too. That would apply to anything, but should we do that? Should we do that?

1:09:46
But effectively what this is doing is it’s selecting whatever I put here. If you’re not familiar with this, this would select a section that immediately comes after hero section tango, which would be the next. This is effectively I’m saying select the next thing, select the next thing after hero section tango, right? Let’s try using the star and let’s see. Now what are we going to do to that thing? Well we’re just going to go ahead and hijack the padding block start of that element and here’s where the thing is. What if it’s a thing that

1:10:18
can’t have padding? Hmm, hmm, I don’t know. Is there a thing that can’t have that? I don’t know. We’re gonna have to think about that more in just a second. But padding block start and then what do we want? Well we want its normal section. See I think in this case you would have to do, it would have to be a section because we have to know that we’re applying section padding. Otherwise what are we going to apply? But I think we can still leave it. It’s all right. So section space m is our normal section spacing. But then we’re going to the image overlap, right? I think that’s what we called it image overlap something like that. Okay, and let’s just sign the code and Okay, let’s see

1:10:57
What’s going on here? All right. Let’s make sure that it transferred to the front I think we’re seeing something a little different in the builder And then we’re seeing on the front end But look at this look at that hero section tango padding block start section space M plus image overlap. The fact that we put that in a code block makes that variable accessible to everything on the page. And now, let’s just do a little test. Content section Mike is out, and we’re going to see if we can just bring in a new kind

1:11:29
of section. And if our code is done correctly, we’ve created an unbreakable situation in the sense that whatever is added below is automatically going to space itself out from what’s already there properly and the overlap is not going to intrude on it. So let’s go and do like, let’s do content and let’s just do this content section golf, something nice and simple. Guys, guys, I mean, I just, this is, you know, you got to love it when you when you when you you’re like man normally Normally this would create this look at this look at this Did I even have to touch that frame no just inserted it and it just automatically is like oh, there’s a gap there

1:12:17
I got an account for that or there’s an overlap there I got an account for that and it’s just gonna miss it’s gonna happen. It’s just gonna happen for the user This is the kind of stuff where it’s like, man, I really feel good about that. I really feel good about that. Okay, so we did a little bit of extra work, but we did a little bit of extra work to create an unbreakable. Now, what if I want to change the overlap?

1:12:35
Here’s where the real magic happens. I just come in and I’m like, you know what? I want a 300 pixel overlap. Well, because everything is tokenized, I gotta sign that code block again. Because everything is tokenized, everything just automatically recalculates and adjusts itself. Like I have one control point now where I just change,

1:12:55
it just, the whole thing works, just works. Okay, let me hang out with the chat here for just a second. If you want to see in the chat, if you, oh, we need to do this offset shit. We need to offset these images a little bit. What about these dots? Do you guys want to go into all that? Do you guys want to get into the dots action?

1:13:13
Let me know. Let me know in the chat if you want to get into the dots action. How many people we got? We got 175 people watching. 25 people checked out on the hero build. Man, not, yeah, they’re not people who want to get better.

1:13:26
Hmm.

1:13:27
I wouldn’t think so. Okay, let’s go back to, let’s go back to the chat. Oh, let’s see. Yes, do the dots. Yes, please. Yes, dots. Did everybody understand what we just did anything not click on on like what we just did with the spacing the tokens the code block the

1:13:47
any of that I understand like it could be it could be easy to leave people behind did everything click okay all right everybody’s saying yes yes yes yes dot me up okay all right let’s go up here. I just need to check on the chat that was up here, here. So much to learn. Just when you think you’ve learned something and thought you’ve mastered it.

1:14:10
Okay.

1:14:11
Unbelievably performant and friendly server side. Okay. You guys are having side quests about vulture servers and okay. Which is good. Fantastic. I mean, yeah, the chat is the place to do that.

1:14:26
Okay, all right.

1:14:28
Camera’s not good. Okay, all right.

1:14:32
Why not use a two color gradient,

1:14:34
black and white to create the separation?

1:14:36
Great question, Anthony.

1:14:37
We did talk about that just a minute ago.

1:14:39
The reason is because we don’t know. I’ll show you why. Right content section, golf, let’s just go in here and go to background. Gallery. Okay, let’s let’s use this guy. Look at how my image ignore the fact that that’s like a low-res image, what happened there? It feels like it should have enough 1440. That’s a little better. Is that not 1920? Is there no 1920 version of that? Wow. Oh there it is, full. Okay. Look how the overlap is, see the overlap is not dependent on what I put in this section down here. Whereas if I used a gradient up here to create a,

1:15:42
what would amount to like a fake overlap, there would be a white space between the start of this section and this black up here, right? And if I use the pattern, doesn’t even have to be like a back, patterns are very common, use a pattern. That pattern is not gonna extend up here. If you use the gradient version of an overlap or the inset box shadow version of an overlap.

1:16:03
So the negative margin allows you no limitations in the content that comes below. So that’s the key reason why we didn’t go that route. But that is a good question because there are many ways to create overlaps.

1:16:14
Okay.

1:16:14
Let’s do the dots. Let’s do the dots. Let’s do the dots. We probably also need to do the overlap which here is This is you know This is one of those areas where I don’t I don’t like you saw in the beginning the image group alpha does this where the images? Actually are positioned outside of their container a little bit It causes other overlap issues

1:16:42
And if I can avoid it at all costs like I’m I’m in my the stage of life where I try to avoid it at all costs, right? So I might just hijack the height of the image, you know, to create like these pseudo overlap kind of things. And now I’m just playing around at the ID level right here to see what I might want to do. Because this is another thing where there’s a bunch of different ways to achieve what we’re trying to achieve. But see that, to me, like, it’s okay. The point of the, let me go back to the source frame. The point of that, like, offset is to just break up the boxiness of the layout, right? There’s a bunch of ways that you can accomplish that.

1:17:31
And so this is like one way to break up the boxiness a little bit of this layout. You know, is it the way you want to go with? I don’t know. I mean, maybe, maybe not. It’s an easy way to do it. It’s a super easy way to do it. And it still works, right? And thankfully we have control over the aspect ratio, not the aspect ratio, the object fit of these, right? So this can be, well not 520, don’t do, wait, oh I’m not hitting, I thought I was hitting delete. 50, okay, and then let’s go 20, 30, 40. I was thinking that that, that we could see, is there no, is it not cropping from the top? I guess it’s not, okay. All right, so you could go this route, you could go, you could absolutely do more negative margin stuff on the images by themselves. You could translate the images.

1:18:29
There’s things, but that’s going to create more gap issues that you’re going to have to find a way to programmatically fix. This is an easy way to create the offsets without anything coming outside of its parent container and disturbing anything else around it. Yeah, okay. I’m just gonna, I’m gonna leave it at that for just a second. Let’s tackle the dots. Now we would not add these dots to frames because this is like the, this is like a styling thing. This is like, that’s not what frames is. Frames is un-opinionated more or less, like as un-opinionated as it can get. Adding a little dot grid accent overlay thing is an opinion. That’s like a, you know, some people want that, some people don’t. It’s like a, you know, that’s not my style,

1:19:17
that is my style, kind of, it’s not things that we’re concerned with adding in frames. But I will show you how to go about adding it. So what I’m gonna do is I am going to add it now. Here’s a good discussion about classes versus IDs. You ask yourself the question, is that attached to both images? No, it’s attached to one images.

1:19:37
It could actually even be attached to the container of the images. So actually in this regard, I could attach it to image group. And at that point, I could do this at the class level so that anytime this image group is added, which it’s would effectively be on all the versions of this hero, because this is not a modular frame,

1:19:56
it would automatically be there in the same position and all of that. So maybe we do it with this image group right here. So I’m gonna go to layout and I’m gonna go to position relative. Now, why am I changing this to position relative? Because I’m gonna use a pseudo element to do this. I’m more than likely going to absolutely,

1:20:15
like 99.9% sure, we’re gonna absolutely position that pseudo element. And so I need to make sure that it sticks to its parent and its parent has to be not position static, which is the default. So it has to be relative. Now, would I make this group absolute? No, because I don’t want the group to be positioned absolute. I don’t want it to be fixed. I don’t want it to be sticky. So

1:20:36
the only other option I have, other than static, which I can’t use, is relative. So that’s the reasoning behind why this is positioned relative. Okay, so now what we’re going to do is we’re going to go create the pseudo element. Where is that going to happen? Well, you could go up here and you could create it up here in bricks. I avoid this section at all costs. This is the upside down. This is, you don’t want to go here. What are the demons in Stranger Things called?

1:21:01
This is where they live right here. This is not an area you want to be in, my friend. This is a no-go zone, no-fly zone, okay? I avoid this at all costs. The absolute objective best place to create pseudo elements is right here in the custom CSS box. So what we’re gonna do is we’re gonna do a after element for this. How do you choose before or after? Well I don’t know it’s up to you like we’ll do whatever you want. It’s absolutely position so now I

1:21:31
it’s on top so to me that’s like after. If I wanted to be behind I might do it before but then I can still control it with Z-index so it doesn’t really matter all that much. So just do you. You know, whatever, don’t overthink it. This is one thing you probably don’t have to overthink. I’m trying to zoom in for you guys without breaking everything here. Okay.

1:21:53
And we’ll just start to work through this nice and slow. What do I say about pseudo elements, right? The first thing you want to do is you want to get them on the page. We’re going to go with display block. We’re going to go with a width of 200 pixels. I just want to see it. Let’s go a height of 100 pixels. Is that a… let’s see if it’s a perfect square. Is it? That looks a little rectangle-y to me. Looks a little rectangle-y to me. Let’s do 150 pixels. Let’s do position absolute. Okay. And let’s do a background color of red. We just want to see our red box and let’s go save and let’s go to the front and let’s see what we see. See that? We got a red box. Now is that red box in the position that we want it to be in? No. So now we

1:22:38
have to change the position of the red box. So now we’re going to give it coordinates right? You give coordinates from the top, from the left, from the right, from the bottom, or then there’s logical properties called inset that you can use. I’m going to change all of this to logical properties in just a second, but we’re going to use the plain language stuff that everybody knows and then we’re going to translate it in just a second. Okay, so how far down from the top do we want to go? This is probably a situation where I might use percentages. They might work better than other things and I’m just going to say 10 percent and then I want it to be positioned on the right.

1:23:15
Okay, so from the right, if I did zero, this is where it would go, right? It would go over to zero from the right. Now, if we look, it actually seems to me like it’s outside the content width of the website, okay? So it actually needs to go more to the right. So I’m just gonna put in a little magic number here and this needs to be negative to pull it over there and we don’t want to pull it too far because as you can see you could potentially

1:23:46
create some overflow issues here. Now I might be inclined to use a variable here like gutter and that is the automatic CSS gutter and if you notice that, because I know sections have a gutter in them, and what I also know is that if it goes outside of the content but not more than the gutter, it can’t possibly create an overflow. So I, this is like a situation where I have a variable that references a value that is used for a very specific thing and it actually comes in really handy here where it’s like I want an overlap but I don’t want it to ever cause an overflow. Well what is the value instead of using a magic number I don’t need a magic number because I actually have a token for that exact situation the website’s gutter just kind of happens to automatically be probably

1:24:42
the most perfect value for that overlap. So I’m just going to go gutter times negative one. All right so now let’s just see what we’ve got on here. Isn’t that the exact effect we’re going for? But it’s at the same time using a value that creates, again, an unbreakable situation. Okay, so now what we’re going to do is try to get these dots in here. I don’t do this very often, so I’m just going to see if I can remember off the top of my head. I have a code pen, I think, where I created this once.

1:25:14
We’re going to go with background image and we’re going to use a radial gradient and we’re going to go the color of the dot which we need to translate all this into locally scoped variables in just a second. Black and then we’re going to go with the size of the dot which we’re just going to start out of the two bigs I may change this then we’re going to go transparent and zero radial background okay and then I think we need background repeat repeat I think we have to use we have to use a repeating background background position background position of 50 actually I think we just do center I think you can just do center on this radial gradient background image radial gradient black 2 pixels

1:26:13
transparent 0 I think I’m doing the background repeat right CSS okay let’s Let’s go in here. Sometimes you do have to check, okay?

1:26:27
Let’s go to my code pen.

1:26:31
I feel like the dots should be, did I do background size? Background size, that’s probably what I’m missing. In fact, I don’t even know if we need repeat. Let’s put a background size in here for a second background size I’m just gonna magic number this there it is there it is there it is okay okay it’s coming back it’s coming back okay it’s coming back all right try it repeat Center I think our background position Center

1:27:12
background repeat. I wonder if the background size determines, see how the dots, the only thing that’s concerning me is the dots are cut off on one side. Let’s go 14 and I’m just, okay, see, that only happens in some scenarios. So I’m not going to worry about it too much. Do we need the repeat even? Do we need the repeat? We don’t even need the repeat.

1:27:36
Okay. So let’s just pause there for a second. Now we want these to be white. We’re gonna have to tokenize this here. I’m not gonna do this on the image group. Actually, I shouldn’t be doing this at the class level at all. Because I’m gonna delete this.

1:27:47
This is not gonna be part of the frame. So I’m just gonna pop this down here. And good. Okay, so now what we’re gonna do is, I’m gonna start translating all of this. Because the black, the two pixels, the 1414, this is all nonsense. It’s all magic numbers, right? So what we need is the dots, the dots bg size, I would say, we’ll just call that dots bg size. Let’s set that at 15 pixels. And we’re going to use that here. Okay, dots bg size

1:28:22
and dots bg size, okay, because I want a central place to manage this from. What if I go 16? Okay. That works. Um, now I want the color. Okay. So we’re going to go dot, dot color, right. Dot color. And we’re going to actually make that white, but we’re going to use VAR white because this would actually make it, uh, compatible with all colors, color schemes, dark mode, whatever. Okay, and then we’re gonna take this and we’re gonna say dot color, dot color.

1:28:55
See that? Okay, now we’re gonna go with dot, dots BG, we did dot color, dot size, dot size, that’s the two pixels that we have right now. So we’ll do this is dot size okay we’re good there so now I’m giving myself look at the look over there I’m giving myself these control points for easily manipulating how these dot how this dot grid turns out okay what else do I need to translate absolute radial gradient dot color dot size transparent 0.bg size dot bg size I

1:29:35
think that’s pretty much it. What we would probably also want to do in this situation, the, maybe the top coordinate and the right, the right coordinate we would leave, but the top coordinate I might tokenize. Eh, we won’t worry about it. Let me do some logical property stuff. So width changes to inline size.

1:29:54
You guys want to start learning this as soon as possible. Okay? Height is called block size. Background size, background position, top is called inset block start and right is called inset inline end. So this is the inline axis, this is the block axis right, block start, block end, inline start, inline end. So you want to start translating all of this stuff And I think, I think guys that’s it. I think we just, we just created.

1:30:28
Let’s just go look on the front end. We just did it. We just did it. So you don’t need Figma anymore. You don’t need Canva anymore. You don’t need Photoshop. All right. You just use CSS for these things.

1:30:39
And all is well in the world. And now you can change the color of it on the fly. Like if I wanted to come in, dot color. What if I did like primary? Or this is frame site. So it only uses black and white but if I did red you know there’s red dots right pink hot pink okay oh look at that look at that see you could just you could quickly you can’t do that like what would you be

1:31:03
doing right now going back into fucking Canva oh I’m gonna change my dot color again and here you are back in Canva like a chump okay you don’t want to do that that’s not the life you want to live. What if you need the dots to be bigger? What if Bev comes along and she’s like, you know, I think, you know, can you go to three pixels on the dot? And you’re like, all right, fucking Bev, there you go.

1:31:23
Three pixels that we don’t have to go back in Canva, we don’t have to go into Photoshop. You have a fully manipulatable little dot, repeating dot pattern for yourself right here. Okay, let’s go revisit the chat. Let’s hang out in the chat just a little bit. And then we’ll probably do some Q&A. And we got to get out of here. Maddie Eastwood says, Yeah, this is gold. It is I mean, what this is what you come for, right? You come to WDD live, you come to WDD

1:31:50
for the gold. Okay. All right, so cool to create such effects in pure CSS. Yeah, it’s a little bit you know, I don’t I don’t hardly ever use those things. So sometimes it’s like hard to remember the exact process of, but we got there. We, we, we made it. We, we didn’t have to reference our code pen from the past.

1:32:11
Okay.

1:32:12
Um, all right, let’s see. Duh, duh, duh, duh, duh.

1:32:15
Okay.

1:32:15
So you can see this. Let’s go to Q and a, you guys can, um, man, didn’t even know that was a variable. Uh, it, it actually is a new variable in automatic CSS. It’s always been variabilized, but the old one was like section padding X, like X for the X axis, section padding X, and nobody could ever fucking remember it. So I was like, we’re calling it a gutter, and that’s going to be the variable going forward. It’s a gutter. Everybody knows what a gutter is, all right? Anybody who’s bowled before, which by the way, if you go to WordCamp, if you go to, you know, I am always down for a bowling competition,

1:32:54
all right? I’m not the best bowler in the world, but I will talk shit like I’m the best bowler in the world, all throughout the match, and we’ll have a lot of fun. So hit me up for some bowling if we’re ever in person. And really anything that is, you know, any sport-related activity, I will 100% be a part of. Let’s see, can you give us, yeah, questions use hashtag,

1:33:16
see this one right here, not formatted properly. At question doesn’t do anything for us. Hashtag Q or hashtag question will help me find the questions.

1:33:25
Can you give us a quick rundown

1:33:26
on using the frames, tabs, content, anywhere option? Frames, tabs, content, anywhere option. I’m gonna have to do a whole video, a dedicated video on that. What is the main reason for changing the language in CSS? So this is a move to what’s called logical properties. It’s better support for RTL languages, better support for other instances like charts and graphs use it a lot where the axes actually change based on something the user is doing and top is no longer the top and left is no longer left but inline block end is still the end of the inline axis

1:34:11
right whether I’m going right or left like if I’m in if I’m in left to right then the right side is the end of the inline axis but if I’m going right to left left is now the end of the inline axis so in if I want to position something like these dots on the end of the inline axis, and then this axis flipped, the dots would still technically be in the right spot because they would be on the end of the inline axis for the same effect that the user gets,

1:34:38
whether they’re LTR or RTL. And so basically, the CSS gods identified the problems with left, top, et cetera, nomenclature, right? And they were like, no, we need a better way to describe this. And so they came up with the block axis and the inline axis and then start and end of the axes. Okay, hopefully that answered that question.

1:35:01
Should, sorry to be nitpicky,

1:35:02
but shouldn’t the right image height be 10% less and pin to the top of its container? Yeah, I mean, you could do whatever you want. Um, I wasn’t, uh, I mean, in this, see the left image is lower than the right image. That’s all I was. That’s all I was, uh, trying to recreate there. Hmm.

1:35:24
Get back to Ecam. Okay.

1:35:26
I rewatched your WDD live from last week. Uh, your ACSS sales talk at the end was incredible. How did you learn to talk so convincingly fluidly? Are you? It’s I don’t know. I don’t even remember. Honestly, I don’t even remember what we talked. I don’t remember. I think we were I think it was part of the WD it was part of the life. Was it part of the No, that wasn’t with Mark. That was a diff. That was a different video. I don’t know

1:35:56
what the hell I don’t. I don’t know. I don’t know. I can’t keep track these days. Things go too fast. I’m doing too many things. I don’t remember what we talked about last week. How do you create signup forms on clients website with email validation WS forms requires two step for that any fix? What do you mean it requires two steps? You mean it requires a second field? I think you’re I think you’re gonna have to have a second field if you want to make sure

1:36:27
that the email is written, like typed correctly. But if you’re trying to validate in any other way, like does it have a, an app symbol in it, maybe, um, depends on what you’re trying to validate, honestly. Uh, but WS form also has, what do they call it in forms land? Um, a, it’s like a, it’s not a template. It’s like a, I forgot what they call it. I don’t know if I have WS form installed on the site.

1:36:50
Probably do.

1:36:50
A mask, it’s called a mask, I believe. Yeah, it’s called a mask. Do I have WS form on here? Am I just not seeing it? I feel like we should. Okay, well, let’s go to this site. So you can validate inputs with a mask, but that’s not, it’s only a certain type of validation. So go to website critique, for example, email.

1:37:11
Can you even mask on an email? I know you can’t like for phone numbers. phone. Okay, probably don’t, is it under advanced? Input mask. See this? You can create an input mask. Basically, but that’s not even validation really. That just ensures that it uses that format when people type in the value. So yeah, I don’t, I don’t, I’ve always done two input fields for that kind of validation that you’re talking about. And I don’t know why you would want to not have two input fields. Because you also want to make sure that they type the email address properly.

1:38:16
And if to do that, you need a second iteration of it to compare to the first iteration. So I don’t know, maybe clarify your question if there’s some detail I’m missing. It was basically how you can just be as fast with ACSS as styling at the ID level while still being maintainable but my question is more about the way you talk less. Oh um it’s just I guess it just comes from talking a lot and it also I mean I’ve written a lot of sales copy for automatic CSS plus I also know what the benefits are and the and the workflow and all of that so it’s it’s easy to talk about something when you like know, you know it, right?

1:38:53
Especially if you’ve thought about it a lot

1:38:54
and you’ve typed it out in different capacities and you know, it all comes together. Can you show us how you built the clamp calculator? Yeah, we went over that before though on a different WDD, but I mean, I can do it real quick. I’m on the wrong site. It helps to be on the correct site. So WSForm. If you’re new here WSForm is the best form system for WordPress. People don’t believe me

1:39:26
until two years down the line when they actually you know listen and give it a shot and like oh yeah you were right I should started using it two years ago and same song and dance over and over again just so everybody’s caught up and on the same page. This is why we’re in WS form. So I’ll go to the clamp calculator here. And so it’s a lot of math, but you can do this kind of stuff. So this is actually building the clamp function. It’s taking field 22 and adding the word rim to it.

1:39:52
It’s taking field 43 and rounding it. It’s adding VW to that. This is creating the center of the clamp function right here. And if we go to like what’s field 22, so that’s the minimum value, right? So we ask for what the minimum value and the maximum value are, and then they get inserted into the thing down here. Now there’s a bunch of hidden math. There’s a slope formula that has to be put in. There’s a slope 100 formula, which this just multiplies the slope by 100 so that I can use that in a certain way somewhere else. Then there’s something called the intercept that has to be calculated.

1:40:42
And then if you look at, see this is field 43. It’s using the slope 100 value right there in 43. The 29 right here is where the intercept is being used in this formula. Essentially what I did is I took the way that we calculate clamps in automatic CSS and I just rebuilt it in WS form. And so you use some hidden some hidden fields right and then you can use the values of those hidden fields up here. Other than that, it’s just what is the heart of the calc right here is just that is wsforms instruction in essentially, and people haven’t seen the the clamp calculator yet. So let’s go to gary.co slash clamp, calc you

1:41:32
calculator, it does the math in real time, like you don’t have to submit anything. Okay. So see the clamp just sits down there and those calc that hashtag calc kind of thing is just WS forms way of knowing, like I need to be doing that calculation more or less on the fly. So like when I do 10 and 20 and then when I change the root font size, it’s going to change the inner numbers right here.

1:41:55
But yeah, it’s, um, it just, you don’t have to submit anything. You know, it just does the calculation on the fly and that’s, you know, WSForm makes this super easy. Super, super, super easy. I mean, the actual math is not easy, but I already had the math. The math was already done in automatic CSS. So I just took the way that we do the math in ACSS and moved it into WSForm, called it a day.

1:42:21
I think I, I think this took me like 20 minutes to build. Okay, let’s go. Where are we at on time we have 15 minutes we’ll just answer as many questions as we can in 15 minutes. Let’s see if I can get the camera back. I know it is weird to not see my face. If you weren’t here earlier the camera overheated. It’s a new camera, it’s a new situation. Let’s see if… okay show in current scene cam link 4k. There I am. There he is. Look at him. Okay. Stupid. All right, let’s see. Question. A little bit. Okay, then we did that one. I just want to

1:43:18
add more space variables and I want to control each value instead of auto-generated. You don’t need to do that. You don’t need to do that. The way that I would recommend doing it is let’s say see in this heading wrapper here well this is dangerous let’s not do this here let’s go to instaWP and let’s go to this site right here. We in fact don’t want to, did I get rid of the dots yet? I need to get rid of the dots before I forget. Let’s edit this with bricks. Let’s get rid of the dots that we did. You sir have to go. All right style CSS, delete, save. Okay we’ll we’ll double check that frame. That frame will be available a little bit later this week,

1:44:06
most likely. Okay, close that up, close that up, and close that up, and close that up, and here we are. Okay, so you get into situations where you’re like, ah, I need in between sizes, which to some people, that means I need more of them. No, you don’t need more of them. There’s a very easy way to manage this workflow. All right, let’s start over blank

1:44:32
slate section. I’m just going to do it with two little containers here. Okay, so see how these containers, these actually auto gap themselves because of ACSS and they’re using what’s called the container gap. But if you’re like, okay well, here let’s just review this. So we have these spacing variables called m, s, xs, right? I mean look at that value right there. You guys can see that right? Everybody can see? Okay, we’re looking at the the space between these boxes. So if I do s it gets a little bit bigger. If I do m it gets a little bit bigger. If I do l it gets a little bit bigger. I can do xl. I can do xxl. Now if I don’t know the names of these I can just right click and choose one.

1:45:15
I can also see it live preview exactly what it’s going to do over there. Okay. So, and I’ve got container gap, content gap, grid gap, XS, S, M, L, XL, XXL. Here’s all of my options. Now, for most cases, it’s like, I mean, come on, one of those has got to work, right? Like what, do you really need more than that? What are you doing that you need more than that? I don’t know. But let’s say there now there’s only a couple contextual ones like content container and grid. So these this is a gap between containers. So

1:45:49
naturally I should use container gap, right? Okay, well, it’s already doing that for me in automatic CSS automatic CSS already. That’s a setting I can turn on or off. But I think you’re a psychopath if you leave it off like you want this to happen. Because it has no downside. It just does this for you automatically but if you want to override it you can override it in any capacity. Like I could set it to zero here. I could set it to a different value. I could do whatever I want. It doesn’t harm anything. It’s set with zero specificity so I don’t even need to use any specificity to override it. It’s fantastic. Alright but now let’s say I want container gap, but I want like just half of it. Or twice the amount or any decimal in between.

1:46:31
Well, the workflow is very simple. You can choose container gap, which is not going to make any difference because I already had it. But then you could say times two. And when I hit enter, ACSS is going to wrap that in a calc for me. And I get twice the container gap. I don’t need another option to use. I just need to take the option I already have and I can literally do whatever I want. 1-6, 1-7, 7-7, 9, 0, whatever you want to do you can just you can just do it. Right? There’s no look at this look at this steps increments like I can do whatever I want here. I don’t need additional options. I just need to take the option I’m already given and I need to work it and make it whatever I need.

1:47:15
And I can do that very easily with a calc. So yeah, I think that that’s all you need to, it does not get any easier than that. It’s complex to introduce more and more and more options. In fact, because of content gap and container gap and grid gap, I’m hardly ever using the space system. The one time I would use it

1:47:35
is like when you’re making a card. So here’s a, let’s just throw a grid on here real quick. So we just throw a nice little three column grid. So there’s my card. And if I put things in the card, obviously they’re gonna touch the edges of the card. That’s not good. So this is an area where I would come in

1:47:52
and obviously I’d put classes on here and all that. But I would go here and I would use one of these, cause this is not, you’re not gapping. This is not a gap. This is padding. So it’s literal space that’s being used as padding. Uh, and I would do like L and then you can just apply it to all sides. And boom, look at that.

1:48:08
Fantastic. Now, if you’re like, I want less than that.

1:48:10
All right.

1:48:11
Well, that’s when you have M available to you and that’s when you have S and that’s when you have XS, I mean, look at how small that is. You might as well go to zero. If you’re not going to use that, go to zero.

1:48:19
Right.

1:48:20
But one of these is going to work for you. But if for some reason you’re like, Kevin, just none of those get to get the job done.

1:48:28
Okay.

1:48:28
All right.

1:48:29
Well, just take, take whatever you want to start with. M L whatever, and then do whatever you want to it. Then you’re done. You don’t need more options.

1:48:38
You don’t need more.

1:48:38
I promise you don’t need more. Stop asking for more.

1:48:41
You don’t need more.

1:48:41
Just do this. Very simple, very easy. Um, okay. So that’s the answer to that. We’ve got nine minutes, nine minutes left. Okay, let me go search for hashtag Q just to make sure I didn’t miss anything. Oh, I did. Oh, I missed a bunch.

1:49:01
Geez.

1:49:01
Geez Louise. Okay.

1:49:02
How regular will you release videos for the JS series in the inner circle, probably like I would, I’m gonna aim for like two of the JavaScript per month on top of the normal one to two videos that I do per month in the inner circle. I want like, you know, probably at least one, but I’m shooting for two on JavaScript specifically. Cause that’s a new, and people are super hyped about that, by the way, like people are super hyped

1:49:37
about that new JavaScript series. So, and it’s super important. I think it is very, very valuable.

1:49:44
Bricks or Breakdance, I don’t know which one to choose.

1:49:46
Both seem very similar. I’m currently using Oxygen and it feels like being on a sinking boat. They’re not similar, really, that much at all. Bricks, 100%. But, you know. Breakdance is like Bricks’ dumbed down little brother. That’s kind of like, that’s kind of the

1:50:04
best way to describe it. Why not do it all on the above section double containers one with the color and negative margin? I don’t know what you’re I don’t know what you mean. The overlap thing that we were doing here it has to be this this section has to have extra padding to account for this overlap. There’s no other way around it. But if you want to clarify your comment, I will take it into deeper consideration. I just don’t see another way to do it

1:50:36
without manipulating the section below the main section. What if someone wanted to add content after the image group but still in Tango? Hmm, what do you, oh. And still make it look like it’s part of the overlap. You, you, I mean, you wouldn’t like, you can’t have this effect. Notice that they didn’t do that. They have content down here in a separate section.

1:50:59
This is a new section of content down here. Um, so you wouldn’t, you wouldn’t put, unless it was like a caption for the image. That would be the only thing that would make sense is image captions, which you could easily add because they would be inside of the figure wrapper that we added. So they would exist just fine with no problems. But yeah, you wouldn’t throw willy nilly more content down here because that’s not the effect you’re going for. Um, like this is the end of that section visually, this is overlapping

1:51:24
the end of the section, and then we’re moving on to the next section. If you wanted something down here, you wouldn’t be doing this overlap effect.

1:51:30
All right.

1:51:30
Next question. Do we have an unbreakable solution for when the section padding m changes to let’s say xl value? Yeah, yes, yes. Let’s go back to the frame. We’ll talk about that. Bricks templates. Okay, so the thing is, is image group CSS. All right, this is and this is why we do documentation as well. Oh, we did this in the all in the code block, right? Okay, so this actually controls the section padding of the section below, right? You just control it from right here. Now, is that immediately recognizable? Well, when you insert this section right here and inspect what’s going on, and then we also

1:52:33
would have documentation to go along with this frame to explain it, they would see, oh, I want to manage, this actually needs, yeah, this, here’s another problem right here, because when they rename hero section Tango, this is not able to do a dynamic root selection. So this is a frame that has to have documentation to go along with it, to like, hey, here are the points you have to watch out for, right? You rename hero section Tango, you’re gonna have to update this code block.

1:53:03
If you, I’m wondering if, no, that root cannot, no, it can’t, it can’t. I was about to lose my mind. I was like, no, we can’t, we can’t use root there. Okay. So they’re going to have to update this. This is a potential breaking point.

1:53:19
And then if they want to, whatever they want the padding of the section below to be, there’s two ways to do it. They could control it from right here. Absolutely. They could control it from right here. Or they could take this formula, right? And they could take it down to the section here and add it into the padding field and then control it from there. I probably wouldn’t recommend that because then if you swap sections or you add another section in between it’s all

1:53:43
going to break. I would leave it here and just change the the spacing value right here. So the documentation will just explain that to them that that’s what they need to do and all will be well in the world. So okay. Unfortunately you know like there are situations where not everything can be a thousand percent automatic. There might be situations where you have to do some manual updates, but we creatively could get.

1:54:13
Okay.

1:54:14
Wednesday live now. Yes, the Wednesday live was permanently moved to Tuesday months and months and months ago. What do you think about Bricks’s enormous amount of inline CSS is being loaded even with load via external text? Hope they’ll do something about it. I don’t know what enormous amount of inline CSS you’re referring to. I haven’t seen an enormous amount. I’ve seen some of it.

1:54:43
But if you want to, you know, compare it to any other builder, like, I mean, compare it to Elementor, compare it to Divi, like, it’s not even in the same universe. What’s the benefit of placing media before content in the DOM and reordering with CSS in a card, for example? It’s mainly due to, you know, screen readers reading a page, the order of content that they encounter. You typically want them to encounter a heading before the rest of the content that matches that heading, because the heading is what gives them context for what they’re about to encounter next.

1:55:14
Remember, they can’t, there’s no visual indicators. So it’s the order of the DOM. And so if they encounter a heading that explains what they’re reading, like the name of a card, like this is, let’s say accounting services or something. And then there was gonna be text below it. Well, they encounter the heading accounting services.

1:55:35
And so now they know that this text belongs to accounting services, you know, along with other context clues. But if there’s an image before accounting services and that image doesn’t have a great alt tag to go, like the alt tag is not typically, it’s going to be like an accountant doing taxes or something like that. It’s not, that’s not immediately clear what the hell they’re encountering. But if they’ve already encountered the heading, then they can make better sense of the image. That’s the way that I’ve learned it and the argument that has always made sense to me. Okay, 3.0 peak. We don’t need to do a 3.0 peak because next week guys, mark your calendars. I haven’t made this official yet, but I’m aiming for will be revealed, will start to be revealed. Not revealed in its full

1:56:26
capacity, but it will start to be revealed on Tuesday, probably on this live stream that we’re watching right now, but maybe on the ACSS channel. I haven’t determined whether we should do it here or whether we should do it on the ACSS channel. I don’t, you know, maybe we do it here, but I’m aiming for next Tuesday. We will do a reveal of ACSS 3.0 because we’re getting very, very, very, very, very, very close. Now, I’m not saying the public beta will be available after that reveal immediately, but it shouldn’t be too long after that, and I’m pressing, you know, the team to try to hit

1:57:10
this deadline, to hit this goal that we have. So just keep an eye out, just keep an eye out. We’re getting very close. Okay, one more question and then we’re done. Let me find a good one. Okay, there’s one I might highlight that one in just a second. Let me see if there’s anything better. All right, I tend to use ID and add to the background. Okay, did it? Okay. Why not just change the container gap value in the ACSS dashboard? Okay, that’s a quick one. Yeah, you could, you could change it in the dashboard,

1:57:44
but then that would change for all of your sections. I was going over an instance where we have one section where it’s like, no, just this section I want it to be half or double or whatever. That’s how to manage that in one particular section. Whereas changing the value in the dashboard is going to change it for all container gaps. Okay, okay, okay, okay, okay. All right, good. Have you fed and watered the team today?

1:58:07
They’re very dehydrated from the weekend, but they were allowed 15 minutes of outside time today. And but they are back in the basement now. So they did get that 15 minutes. They got a little bit of water, a little bread and they’re back in action.

1:58:26
Okay.

1:58:26
Here’s the last question we’re going to tackle from Erica. How do you decide on content to put on each page? Sometimes that’s what I struggle with the most. Do you follow the same structure for service pages, about pages, et cetera? Um, so the process is effectively this. We do a discovery. So in the inner circle, I have a whole, like, you know, whole thing on Discovery, bunch of trainings on Discovery. And then in particular, there’s a copywriting workbook and workshop thing that I typically

1:58:59
lead clients through as part of Discovery. We want to know how to sell a person’s services. Here are your services or your products or whatever. We need to know how to sell them, what to say, what order to say it in, what kind of things we’re gonna talk about, what kind of narrative we’re gonna build around this thing. And so the narrative, once we have the narrative identified and we know what we need to say in terms of features, in terms of benefits, in terms of overcoming objections,

1:59:29
in terms of FAQs, in terms of how we’re presenting things, then we start to build a layout for that narrative, right? So you need to know what you’re gonna say, or at least the kinds of things you’re gonna talk about. And then it’s a matter of how best do we wanna lay that out. And there are patterns for that. There are common patterns for how to do that.

1:59:50
That’s what Frames is all about. It’s about common patterns. And so for features, for example, right? There’s a common pattern, or there are common patterns for features. Do I have Frames linked up on the site? Okay, I do. So if I type in feature, there’s a bunch of ways that we can highlight features for things. And then do we want to be able to click on that feature or not click on that feature?

2:00:13
And so I can just roll through here and decide how do I want to lay out these particular features? Is this a very visual service or product? And then I might want to use features that offer me image support, right? Or is this, no, these are like quick hit features that we just want to, you know, quickly hit on and then move on. Then I might go the icon route, right? I might want to, maybe I do this and I delete the icons.

2:00:41
I don’t even need icons for these. Like, whatever I want to do, that’s, I’m figuring out what is the best way to tell the narrative. But other than that, it’s also like, I mean, we know a page is going to start with a hero. So let’s just choose a hero that makes the most sense. So I type in hero and I come down here and like, what kind of, you know, hero layout do I want to go for?

2:01:02
And then you choose a hero layout and then you’re, you’re done, right? Let’s say I choose Sierra. Okay. This would be fantastic if this was like a book or a screenshot of an app or something like that, because it’s aligned with the bottom of this container. Okay, so I’ve done my hero. Now I determine what do I want to talk about next. Well, typical patterns and I’ve talked about why it’s important to follow typical patterns. All the websites that win design awards are usually

2:01:31
god-awful in terms of UX and conversion and all of that because they break norms and patterns, typical patterns, which throws the user through a loop. They’re like, ah, I don’t know what’s going on here. I don’t know what to focus on. I don’t know, yada, yada, yada, right? Look at that underline, doesn’t work with this font that’s chosen on this website, interesting. Okay, I think if we did an offset,

2:01:52
maybe we could get that to work. So features could come next. Social proof could come next. I could definitely go testimonials. Um, if you follow like the story brand framework, you would hit on, uh, the, the three main points, right? There’s a lot of things that I could do here. So I could go features.

2:02:09
I could go testimonial. In some cases, it’s really good to open with testimonials, social proof, right? In other cases, it’s better to open with your features or you could open with intro content. Um, so I could do like content and I could choose like this would be something very typical you would see Contents, that’s why it’s called alpha right now in this particular situation This does not look very good because we have media media kind of colliding, right? Not good. So I wouldn’t recommend that layout. And so sometimes the content sections you’ve already put in are starting to determine

2:02:46
What’s going to be able to go next. Let’s try, let’s go with features. So let’s go feature. And I’ll do another, you know, conventional one, right? Where we would do something like this, okay? Feature section Foxtrot. Okay? So now I go from my hero straight into like,

2:03:09
I’m going to talk about features here. Now I have my default set to H2 on this website. This is one thing in frames, this is why we’re going through and doing some spring cleaning. When we built a lot of these frames, our default was set on H3, and we thought that frames would commit that to the database

2:03:27
like, hey, he’s using H3s, let’s make them H3s, but it actually doesn’t. If you don’t explicitly tell it, even if it’s already your default, you have to explicitly tell it in order for that to commit it to the database. Really annoying. But there you go. So now we’ve talked about the features, right? Which also, I would recommend anytime you’re talking about features, guys, we got to know features versus

2:03:50
benefits. Wow, that’s a very long answer. But this is why I chose this question, because it’s a really good question. Anytime, I think, anytime you’re talking about features, you should be talking along with the features because features by themselves don’t have any value. There is no value in talking about features unless you’re going to map those features to specific benefits. So when you talk about a feature here, the reason there’s a blurb here, so you highlight the feature, right? You can even use an approach of headings where you talk about the feature and the benefit in the same exact heading. But you also have this space down here to make sure you link this

2:04:29
feature to a specific benefit, right? It’s like key benefit. And when I do the workshop, the, you know, how to write your content workshop thing that’s in the inner circle, it talks about all this, right? Okay. So then we’re going to go down and we decide what do we want next. Now we might go into like a longer content section. So I’m going to search for content.

2:04:46
We want more bodied content here. And so I could choose something, you know, we could go fancy, like content section mic with a lot of stuff going on. Maybe I want a more visual kind of narrative to go in here. Or maybe I want lots of imagery and I might choose like content section hotel, which gives me an opportunity to do lots of images. Content section Foxtrot where I can be overlapping stuff again. Here’s another visual one.

2:05:16
Here’s a big one. If I maybe I wanted to have a video next. Ooh.

2:05:19
Ooh.

2:05:20
So I go content section Delta next, which gives me the opportunity to take this image out. And this is why we call it a media wrapper because we don’t really know what people are going to put there. And you could throw in a video. Okay. And let’s go down. Where did it put my, where did it put my video?

2:05:35
What is bricks done? I? Don’t see the video rendering. Let’s go ahead. Oh YouTube video. Yeah, it should render a default video Let’s see if bricks just lost its mind for a second here Media wrapper video is this part of the new is there some security shit that I didn’t turn on that’s not rendering the video No YouTube ID provided. Vimeo. I don’t have a Vimeo. I don’t have one.

2:05:59
Usually it renders a placeholder. Hmm.

2:06:01
Okay.

2:06:01
Let’s leave it for now. I’ll get it in just a second. Let’s go and add another. Let’s go social proof now. For sure we want to, you know, we haven’t talked about testimonials yet. Let’s go add a testimonial section. So I’m just going to come down. I’ll look for a testimonial section.

2:06:15
Let’s go easy. You know, testimonial section alpha. Let’s bring that in, okay? I didn’t bring in the images for people, so we’ll just go and put this in here. It’s like, hey, Kevin left all these reviews. Now this is query loop compatible. You would absolutely be deleting two of these

2:06:40
and then query looping these testimonials. 100% every single time without question. Only a psychopath would manually put, I’m just kidding, it’s just a joke, okay? But only a psychopath would put manual testimonials in. Now notice how all the sections are white, right? That’s where you wanna come in here. This is really bothering me,

2:07:01
but I can’t go to YouTube and actually get an ID. I don’t know why Bricks didn’t put that in by default. Okay, let’s put a placeholder image there. Just pretend that’s a video. Let’s go image, okay, image selected, select image. Okay, pretend that this girl is a video. Okay, so you could have a video there. And then I wanted to start to break this up.

2:07:26
So this obviously probably needs a background color. So this is where I go like, BG, do I want a light background color? Do I want an ultra light background color? I don’t even need to choose the color because these are contextual, right? Which has to all be explained to you if you’re an ACSS person. But now I’m starting to break up the content here. And then I’ve done

2:07:49
testimonials, maybe I want to do FAQs. Now, you got to answer some questions, you know, let’s do FAQ. And let’s just do an easy one, you know, fact section, Bravo, just drop that in. These would also by the way be, and we change these to H3s, these would also be query looped. 100% put your FAQs in a query loop. We’ve talked about this before. So you would delete three of these and then loop the remaining one. And here’s another one where I can come in. I could even say BG dark on this, right? So, and look at that. It just changes all to white. Like I knew whatever, whatever you want to do here. Make whatever decisions you need to make styling wise, but you just want to break it up because

2:08:30
you don’t want the entire page to be, I’ll just do BG light. We’ll just keep everything nice and simple. Just keep everything, you know, white would just be super boring. Now in ACSS 3.0, we also have a new divider system. You could come in and start throwing dividers places programmatically, which is really fantastic. We’ll do a whole video on that. Notice the padding here that we’re getting, okay, this default spacing. If we go back in here, notice like this install, the spacing is kind of tight for sections, right? That’s

2:09:01
all controlled right here, okay? Notice that’s not the defaults. This has already been altered. So on this site we determined we wanted less white space, but if I reset these to their defaults, I can put them to whatever value that I want and save changes. The entire, this is the wrong template, let’s go leave that site, that’s the frame site. Let’s save this and go to the front end. Look at how the spacing has all opened up. Way more spacing by default, top and bottom, in your sections. Now what is the gap being used here?

2:09:35
This is how you can come in and just program, this is your content gap here. What I would probably say in that particular instance, let me refresh the builder, we’d want a more breathing room in there. Okay and let’s look at what our base spacing is. So 30 and our content gap, ooh somebody changed it to S. That’s a little bit tight. It’s a little tight feeling right? Let’s set that back to M. Okay, and this is a demo site, which is probably, I’ve been demoing these things, right? So, refresh, and now it’s spaced out more. Okay, and I can set those values to whatever I want, but now anywhere I’m using Content Gap, just got a little bit more breathing room in it. The sections got more breathing room because I changed the default

2:10:20
section padding, but we’re starting to come together with like a hero, and then we’re going right into features and benefits, and then we’re going right into a video that explains everything that we were just talking about up here, probably. And then we come down here and give them the social proof. Then we answer any questions. Look how it like goes in a logical flow and look how fast we’ve been just kind of assembling this and we’ve got the narrative starting. We just got to start popping our content in, add some styling and then we’re done.

2:10:47
We’re done. So super easy, super simple, but make sure it goes in a logical order. Like, would you start with FAQs up here? No, probably not, right? So that’s always gonna kind of go towards the end, most likely. Do you need pricing on this page?

2:11:05
Okay, if you need pricing, it’s just a matter of going up here and going, hey, frames, I need price, right?

2:11:12
Let’s see what we got available.

2:11:13
Now, if you don’t know, I think it’s called pricing. Um, if you don’t know what they’re called, obviously you can just come over to the bundle. You can come down here and you could say, ah, I want to see everything in pricing, but I just, like I F I find it’s faster to just, uh, type like when you already know the name of them, you just type it and you, and you get it. And then I could do, um, you know, what kind of pricing layout, this is like too fancy for the page that I’m kind of doing. Right. But this one pricing section, Mike might be a good one.

2:11:42
That has like a cool slider effect on it. Or I want to go super simple, like pricing section, Bravo. Maybe we don’t have a lot of features in our pricing options that we need to be talking about. So if I go feature section, Bravo, or I’m sorry, pricing section, Bravo, it’s going to give me those car. And I can turn these into go watch how fast I can turn these into cards, right? We’ll just go BG and we’ll go BG light on those. Now this is the, you know, I’m not doing anything with colors yet, but just to show you layout padding, I’m just

2:12:15
going to choose probably L’s for this. Let’s expand that to all sides, okay, and then maybe I want to add a little border radius here. So we’re going to link all those sides together and just choose M, okay, if Bricks would actually do it for me. Thank you. Helps.

2:12:30
All right, good.

2:12:31
So we’ve got our border radius on all sides. And I mean, it’s like, I got a little boxed pricing cards now that are just ready to go. Look at that.

2:12:37
Okay.

2:12:37
Now I just got to link up the buttons and maybe I don’t want the outline buttons, right? So I can come in and I can change my, I think that’s the default style of buttons on this website. So it is what it is. You would just go change the defaults if you want to. Because I was looking for an outline button class, but there isn’t one, which tells me this is just how buttons

2:12:59
are designed on this particular demo install. They’re designed as outline buttons. Which people ask me that all the time. They’re like, how do I make my normal button style outline buttons? Well, it’s very easy to do in the dashboard. So you go to buttons. Now, I don’t want to show you too much of this

2:13:13
because this is all about to radically change, but it’s absolutely, you just come down to action button right here, and then you use the values that would make that an outline button. And then you’ll get outline buttons everywhere. So you have global control over everything. Everything comes together very quick, easy, smooth.

2:13:33
It just feels kind of like you’re cheating after a while. It’s like, man, I just did this entire page. Drop some content in here, throw some color in here, throw a few styling accents in here. I mean, you’re not very far off from having a completed page. And we’re just dicking around right now. Like, I didn’t even have a plan of action.

2:13:53
I was just like, ah, just throw some stuff together. It’s just, it’s kind of too easy. All right, that’s gonna be the end of this stream. Let’s go to back to chat to say say bye to some people here. Carl thank you for watching until the very end. Squinting Yeti is here. Good to see you Squinting Yeti. Uh Witty Witty Walk. You must be new. I don’t I don’t recognize you, but welcome. If only we could change the ACSS colors radius etc but in the builder. I know Brendan, I know, I know this. Wouldn’t that be, that’d be fantastic. Okay, all right, we’re not doing any more questions. I see a bunch more have come in, but we’ll do these on the next WDD Live. Anyway, thank you guys for being with me today. I wanted

2:14:37
to test, we had a little problem with 4k. I don’t think we’re gonna be able to stream in 4k guys. Uh, this, this camera, maybe I can put ice packs around the camera or something, uh, see if that helps. I don’t know, but we might have to switch back to 1080p. But yeah, thank you guys for being with me. I’ll be back very, very, very soon. Love you guys. Love you guys. I’m out, peace.