WDD LIVE 027 – Web Design Critique, Cwicly Components, and Q&A

Hello, hello, hello. Good morning everybody. Good morning, Domies, I guess I should say. Welcome back to another WDD Live.

Say hi in the chat as soon as the stream begins. Make sure you toss up some likes to get the stream started. We’ve got, you know, we’ve got to get, YouTube’s got to get the algorithm going. Hello, hello, hello.

Here we go again. I made the same mistake as last time. That’s how long the delay is, by the way, which is, it’s kind of annoying. I wish there wasn’t that delay.

I had the stream going in the background, so it kind of duplicates over. Let me go and look at the chat in the software. That would be the best way to do it. Calisthenics Ireland is here.

Andrew, Ruben, Gavin. Launch site. Somebody, just somebody called LaunchSite. Dan Stanley, the Hunzey’s here, got a lot of familiar faces and some new faces as well, which is fantastic.

Aston is here, Aston, Aston, Aston, I don’t know, from China. Vitt is here, Manz is here, Daniel’s here, Paul is here, just to let you know what we do on WDD Live, it’s kind of a mixed bag. You know, it’s called Web Design for Dommies, which is a dommy is somebody who cares about the dom, somebody who cares about the underlying code quality, site architecture, best practices, BIM, accessibility. Okay, all the stuff that’s, you know, not obvious, not obvious.

But we do talk about the obvious things as well. We talk about the UI design and the UX design and we talk about the copywriting. We go very deep on our website critiques, but that’s not all that we do here. We don’t just do website critiques.

We do Q&A on every imaginable web design related topic, including business. We do live looks at things. We do live looks at different builders and tools. We do a lot of fun things.

And so it is a great place and a great time to hang out every single Wednesday at 11 a. m. Eastern. And as you can see, we’ve got all these great people here for this stream.

And so what our agenda is for today, just so everybody knows, we’ve got at least one, yes, James says we rant about practices and Elementor users and things like that. Definitely some rants on WDD Live. Today’s agenda, we definitely have one, at least one in-depth website critique. We have a live look at, quickly, their components feature.

We’re gonna take a look at that together. This is kind of a first look. It’s not like the first time I’ve seen it, but it’s really the first time I’ve interacted with it. So it is kind of a real first look.

And, you know, I’m a big proponent of components. I have said that it’s the biggest feature missing from Oxygen and Bricks and every other builder that doesn’t have it, but definitely oxygen and bricks because of the other kinds of functionality that they have, it would be a kind of functionality that you would expect. And so the fact that they don’t have it is a big disappointment. And I do hope that they will implement it.

I do believe that they will have to implement it based on the developments of Quikly and Webflow and the like right I Just don’t know how fast and I will say this. I haven’t heard from Thomas on the components front I haven’t asked him I could ask him what he thinks, but I haven’t heard anything You know You know I don’t know what I what I would hope To have happen is that you know like as with quickly, the developers of the page builders are, you know, forward thinking and like, if it were me, if it were me, so for example, like with automatic CSS, container queries, I feel container queries are gonna be a really big deal in CSS, they’re not here 100% yet, like the support, browser supports in the 80s, the high 80s. When it gets into the low 90s, it’s a wrap. Like we’re going to start using container queries.

And my prediction is that container queries are going to be wildly influential and powerful and widely used. Now, some developers have already disagreed with me. They’ve pushed back, oh, it’s just for advanced users or whatnot. I don’t think so.

I think as widely used as media queries are, will be container queries. That’s just how I see it, okay? And so they may not agree with me, whatever, but because I see it that way, I have already been implementing container queries in automatic CSS. Now the level to which a container query can be implemented in a framework, you know, appears to be fairly limited.

Container queries are like media queries are going to be a very custom thing. You know, it depends on what you’re trying to achieve with the component, with the element, whatever. And so you write custom CSS inside of a container query based on what you’re looking at, based on what you need to have happen. It’s not like a presets kind of deal.

It’s not like a throw some utility classes on it kind of thing. Nevertheless, they’re going to be insanely important. That is my prediction. They’re going to be insanely important.

And so knowing that they’re insanely important, what do you see me doing? You see me teaching them. You see me talking about them. You see me beginning to implement container queries into automatic CSS as much as we possibly can.

That’s what forward thinking looks like. That’s what innovation looks like. That’s what leadership in the space looks like. So if I had to knock, you know, bricks and oxygen as it stands right now, I mean it’s just facts quickly is leading the charge on component based functionality obviously and it’s a little bit disappointing that I haven’t heard a peep out of bricks on the component functionality front.

I get it, you know, they’re busy. Hey, so am I. It turns out I’m a little busy too, okay? Doesn’t stop me from talking about certain things.

And with oxygen, I have heard a peep out of oxygen. What I’ve mainly heard so far from oxygen unfortunately is like pushback of like we don’t know, will people actually use components, well you know, you know. That kind of thing. And so it is what it is.

I’m just saying it’s a little, it’s a little disappointing. To me it’s an obvious thing. I’ll show you and when we do the live looking quickly I mean it’s it should be obvious it should be obvious how how important and powerful this kind of functionality is. I don’t know why everybody doesn’t get it I don’t know why everybody doesn’t get it but you know it is what it is and some people will be last to the party and some people will be first to the party.

And we all get to decide what time we want to show up to the party, I guess. Okay, save your questions. So that’s the agenda. The agenda is going to be in-depth web design critique, quickly live look, then Q&A.

If we manage to get to two critiques today, maybe we can, we’re going to play it by ear. We’re going to do one critique first, then we’re going to do the quickly thing, then we’re going to do Q&A and we’ll play it by ear. But save your questions. If you have questions, and I do want to say this, people ask me detailed questions all the time.

You can’t believe, man. I do a video on YouTube showing a specific thing, it’s 30 minutes long, people will leave a comment and the comment is like four different questions and they’re detailed questions and it’s like, I can’t answer this in a YouTube comment. So what I end up saying is, hey, come to a WDD Live, ask your question on the WDD Live, and I will answer it there in detail. And this is your, so WDD Live is your opportunities.

But the same thing, when you show up to WDD Live, don’t just pop off with your questions. Wait till the Q&A segment, then I’m gonna say, hey, questions, let’s go. You pop in your questions, OK? But sometimes those people don’t show up.

We need you to show up to the Q&A segment. That’s what makes the Q&A segment lively. But hold those questions for the Q&A segment. All right, that’s it.

We’re going to hop into our first critique here. I’m going to go ahead while I ramble, and I’m going to pull this up. And this is actually from a regular WDD live viewer and a person that I believe is in the inner circle, kind of in all the things, they’re in all the things. And we’ve done one of their sites before on the stream.

I saw this actually in the, it was maybe the ACSS group or the inner circle, I can’t remember. There’s too many places, too many places. But I saw that they submitted it and I pulled it up and I was like, oh, this will make a good one. This will make, this will make a good one.

And it’s a good change of pace. And I will say this guys, if you submit your agency website, it just agency websites like that, all these it gets right, it’s we, to make WDD Live really good, we need sites from other industries. So if you submit your agency site, that’s all good and fine and dandy, but I mainly skip them over. Like every now and again, I’ll do an agency site.

But if we do an agency site on like every single stream, it’s like, oh my God, okay, it’s another agency site. Give us things to talk about in other industries. That’s gonna make WDD Live much more valuable. All right, so I’m gonna pull this up and we’ll go ahead and make sure that we’re screen sharing properly.

It appears that we are. And this is the site, okay. And I don’t know if Tyree, this is Tyree’s site. I don’t know if Tyree is actually here live on the stream.

If he is, he should say hi in the comments. Because I may have some questions for Tyree. We’ve talked about this on the past. You know, it’s like, if the person’s actually here in the stream, it’s better.

I don’t wanna bring them on live and do the audio and all that, it’s a lot of logistics. But if they are here in the stream and can comment back, then that would be good. So we’re gonna do a no scroll test to start off with. I see the logo at top left is called handle life.

Now the logo itself, there’s no tagline to go with the logo. So the logo itself, and it’s not obvious. I don’t, I don’t, I mean, that’s the stripes on a basketball. Like I can see, okay, I get the context from here to there.

If you saw the logo by itself, you wouldn’t have any context as to what this company is. So it’s relying on what’s going on in the hero and the rest of the page, obviously, to get the point across. I don’t know if there’s a little bit of a maybe room beside here or under here that we could make a case for hey you know should we have a tagline should we have a tagline to go with this logo I don’t know I it works the way that it is I’m just saying could it be maybe one step up if it had a little tagline to go with it. Then in the nav over here I see heavy ball I see training I see apparel, I see support.

This is a very simple navigation. Right off the bat we can test out tab ability here, which it does appear that we can. And hey, I just did a PV101 on navigation. You know, we could go right into DOM.

We could go right into looking at things. Let me put this on the left hand side. Always works best that way on streams. We have a nav, we have a UL, we have LIs.

This is using Bricks, so probably using the Bricks nav element. So all that stuff is gonna be good, pretty much out of the box by default. And then we have a hero that says, elevate your handle with the heavy ball. We gotta digest that.

Elevate your handle with the heavy ball. Elevate your, I’m not a big basketball guy. I’ll just tell you right now, look, you know, I guess I like basketball culture. I don’t like basketball sport.

I don’t like the sport of basketball. I’m sorry. It’s like my least, well, it’s not my least favorite sport. Football by far blows basketball out of the water.

It’s not even a competition. Don’t at me. We don’t have to talk about it. It’s just, you’re automatically wrong.

It’s okay. Football, especially college football. College football blows every sport out of the water. But yeah, I’m not huge into basketball.

But I’ve never heard, I’m not dumb. It’s not like I’ve never, this is my first time hearing about basketball. I don’t know what elevate your handle means. That’s what I’m getting at.

Okay, I’m going to keep reading. Train like the pros with their heavy ball of choice and gain free access to programs from their NBA skills coach. Buy ball. Okay.

Designed, oh, I’m scrolling around. I guess I shouldn’t be scrolling around. So what are my first thoughts on the hero section? First of all, a hero section should capture attention.

It should create interest and intrigue, it should clearly communicate exactly what’s going on here. And this hero section visually is striking. I really like the hero section visually. It’s a very engaging photo, it’s a high quality photo, it’s got a solid quality cutout, I love the shape in the background.

I love the color. I love the color on the shirt matches the color used in the background. This is the logo on the shirt. The cohesion here, the brand cohesiveness here is very well done in my opinion.

Even the brand color matching everything. This is, you know, and this is not easy to achieve because here’s the thing, this isn’t just a designer doing design things. This is photography has to be involved, so the photographers got to get their job right, which they did. The product itself, so this goes into product design, photography, product design, and branding all coming together at the same time in a very cohesive way.

And you see what that produces, that produces a very, it’s good, it’s good, right? So everything that’s going on in the Hero is great. I like this little block right here, this, you know, it’s a standard format. It’s a hero heading, it’s a lead paragraph, it’s a call to action, and then it’s like your top talking points.

But they took the talking points and they put it in a format you don’t see very often. So it’s got this block coming out of the side of the screen, it’s got the product back in here as well, and then just, you know, a fairly simple list of things that they want to call out, which is good. And then they’ve got the logos coming through here, which says trusted by. This is the only section of the hero that I’m not quite sure about.

It feels like there’s too much white space in this little block right here. Can I get my screen annotator up here? Annotate, yeah, I guess I can okay so like this just feels like a lot of wasted space and it’s kind of pushing the logo bar down below the other content not to mention I mean we do also have a lot of white space going on right here so if I was going to nitpick it’s like all everything in this area just feels a little bit off balance compared to Everything else that’s going on. The other thing that feels a little bit off balance is the white space here, so you’ve got that amount of white space and then this amount of white space and you can see those are two two very different things and So I think what we have to look at, and I’ve shown this here too, and when we have a good site, when we have a good site, we can look at more details, because we’re not gonna get stuck on all the things that are wrong.

So we can look at things that we don’t normally look at on sites like this. And so this presents a problem. It’s actually a common challenge. Whenever you overlap things, that’s the wrong tool.

This is the amount of overlap that we’re dealing with right here. We’ve got to somehow measure this overlap so that we know the value of it, and then we can apply that value to in here somewhere. And then that can create our even spacing top and bottom. So if we look at how, we would need to really dissect this page and see how this overlap is being accomplished.

So we’ve got a div there, we’ve got a div here, and there’s going to be a lot going on. And it’s actually, this is easier to do if you can get access into the builder. So that’s a separate section down here. The low, okay, so I didn’t expect that.

All right, the logos are actually in their own section. So we’ve got a section for the hero, then we’ve got a section for the logos. And you can actually see one of the problems right here. So that green outline is the padding that is in this section.

And the section below, you can see that green. And so there’s actually a duplication of spacing. There’s the bottom padding here being added to the top padding here. And because they’re both the same color, it’s creating extra space where there doesn’t need to be extra space.

So one way that we can start to fix that white space problem that I just alluded to here, and I’m just going to do this. You wouldn’t want to do this like this. But if I go to padding top, being able to type is a good prerequisite for working in web design. But if we do something like, now it doesn’t necessarily have to be zero, but I actually think zero would work well there if you know I this logo thing being below this is also throwing some stuff off visually but you want to take one of those paddings away one of those paddings is not needed they’re being added to each other and is creating extra space now let’s figure out where this block is I’m guessing it’s in the hero section then so we can just display this none and see if it goes away that’s that is it correct okay uh that okay that’s in the block with the logos interesting and this is interesting semantically because like I thought that was a section of logos like a trust section but it’s actually a talking point section.

Like these are two different topics kind of sharing the same section, which is interesting. I’m not commenting saying that it’s like necessarily wrong right now, I’m just trying to figure it out. Okay, so we’ve got a margin top of a calc of section space XXL times minus one. So they’re taking the value of section space XXL, they’re creating it negative and that is what’s going and bringing it up.

So if we take this to zero, then that’s where it was placed to begin with. And then with the negative section space XXL, now I’m curious to see what they did with the padding in this section. So you would see, you should see like the opposite calc. So let’s take a look at what they did, padding bottom, and there you go, section space XXL.

So I don’t think that’s actually correct. Let’s try this and anytime I do math on a live stream shit very very well could go haywire. We’re gonna take section space XXL and add it to section space M And that’s more along the lines of what I would expect to see. And I think that’s so you’re putting the section space and that may be section space s up there now that I’m looking at it.

I probably should have checked that. So padding top, but this is the concept that I would be looking for. Let’s go to computed. Well, I think computed is not going to help me in this regard.

Padding bottom. Why are there some ID? Okay. All right, because you did this.

This is a unique hero section That that that that it’s probably buried somewhere down here. Yeah, it is. Okay All right. So that’s just the normal section padding.

So that should be equal to M Basically what I’m getting at here is he knows the amount of this overlap because it’s equal to section space XXL So if you add just section space XXL to the bottom here, you’re actually not gonna get what you want. You need your normal section padding plus section space XXL to account for the overlap. But you can start to see that opens it up a little bit more. Now you start to get a problem in here.

Well, this was being cut off before. I’m just gonna refresh. See, his feet are being cut off. Which tells me, I wonder if this is a okay.

That’s a real image. I Don’t must be interested to see What that looks like when it’s not when the overflow is not Cut off like if his feet were coming into this section now They would need a little bit of a I don’t know we’d have to play around with that There’s something to look at maybe he tried that I don’t know But you can see here that this this is clearly not enough space Versus this and if we can get that calculation right, we’re gonna get perfectly even spacing between these objects, even though this has its own thing going on. So if we were gonna nitpick, this is what I would focus on, clearing up these little white space issues here and there. And now let’s talk about the copy.

Before we scroll down and look at the rest of the page, I would rewrite this. Let me go to the comments. Is this elevate your handle? Is this like some sort of terminology that’s commonly used?

Like if I was deep into basketball enough to buy this product, would I know exactly what this means? Somebody’s got to help me here. I mean, because copy does need to speak to the target market. I’m clearly not the target market for this, but I’m also not a sports moron.

I just, I’ve never really heard this terminology before. So I’m going to go through and see if somebody is explaining this to me. Sylvia says, I couldn’t understand that they sell balls at first glance, but maybe that’s because I don’t play basketball. Okay.

Soccer, soccer. Oh, oh, here we go. Here we go. No, it’s it.

Yeah. Okay. Hey, I’ll get I’ll concede this. I’ll consider.

I don’t know what the Americans were thinking when they named it. It’s clearly not. You’re not. I mean, you when you punt, when you do field goals, it is football at that point, right?

But for the most part, we are throwing the ball, carrying the ball, tossing the ball. And so football, I don’t understand, I will concede to you. I will concede to you that football and soccer, football is a better term for soccer. I’ll concede that, hey, but what I won’t concede is that college, I don’t have another term for it, American college football is the greatest team sport.

Okay, we can move on now. Let’s see what people are saying about, are you in the market for a training ball? If not, if you’re not, you’re not having a basketball, okay. Top of the head too close to the nav bar bothers me too.

Yeah, maybe. You know, there’s a, so when I was in photography, a lot of portrait photographers, especially if you want a close-up portrait, you’re gonna crop the top of the head to get a close-up portrait. Some people, that’s perfectly fine with them. It makes perfect sense.

They’re like, that’s the close-up. It’s close-up, that’s what happens in a close-up portrait. Some people just seem, it just, they can’t, they cannot handle it it’s like what they and they complain about it and It doesn’t bother me either way if you can see the top of the person’s head I’m fine if their top of their heads a little crop. I’m fine like it’s just how photography works So that that doesn’t really bother me.

That’s I’ll just chalk that up to the personal choice category I Would like to see the shadows on the feet in the hero picture. Yeah, that’s what I was saying. Like if this managed to overlap, he’d actually be like coming out of the hero section, which could be even more impactful, but it relies on the quality of the shadows under the feet. I already know that from a photography standpoint.

If the shadows are not good, it’s going to look like he’s floating. It’s going to look awful. And it could look like he’s floating simply because there’s a visual break right here. It’s something you would have to, again, test.

What I will say is the foot can’t half be in and half be out of the hero section. If you’re going to make that work, the foot completely has to be out of the hero section into the next section, which then, I don’t know if there’s enough space for it. See, these are the design decisions that actually are very tough, very complicated and you know hats off to designers when they are able to really nail this and get it right. Okay handling dribbling elevate your okay that’s that’s what he’s talking about okay see in my mind it’s like handle is that a fucking name for a hand like it’s my handle I got my handles in basketball I don’t know yeah you’re right you’re right it’s the handling skill is they’re shortening that to your handle.

Okay, it’s alluding to your handling skill. Got it. I don’t know that that’s the best hero. The best H1 that we can come up with.

So if we can get a better heading there, I’d be testing various headings. I think we can get something better for the heading. Train like the pros with their heavy ball of choice and gain free access. So this lead paragraph to me doesn’t do the best job.

Maybe I’m a parent of a teenager who plays basketball and I’m coming in, I’m like gifts, gifts for my basketball playing teenager. Okay, this kind of copy is not gonna speak to that. This speaks to the person that is in deep in basketball but not anybody else. And really good copy should be able to connect with, it doesn’t, it obviously speaks to the people who are in deep, but it also has the ability to connect with the people who aren’t in deep, right?

The people at other stages of the funnel. And so I think we can just do a better job here overall. And I’ll give you an example. Train like the pros, which is fine.

Train like the pros is fine. With their heavy ball of choice. If somebody does, if they’re not in deep, they don’t know why a heavy ball, first of all, what is a heavy ball? Number two, why does a heavy ball help?

It’s a little counterintuitive, okay? And so they are left, when somebody who’s not in deep reads that lead paragraph, what I think they’re gonna, what’s gonna happen is they’re gonna get more questions than answers. If your copy creates more questions than answers, by default it’s not really good copy. Okay, like they should be able to read this and immediately understand why this thing is important and why they should buy it.

This reading this one little paragraph should answer that question for them, and it doesn’t, it actually just creates more questions. So now it’s like, all right, now I got to learn what a heavy ball is. Like I get it. This is it.

But like why, why? It’s not answering the why. Why should I care is like, if you can’t answer why they should care right off the bat, maybe they won’t care and maybe they’ll leave. So I think this really needs to be improved right here.

Okay. We’re going to go down and we’re going to start looking at the rest of this page. Guys, I said WDD Live, we go deep. Like we’re 20 minutes in probably, what are we at now?

28 minutes in, eight minute intro, we’re 20 minutes of a hero section, okay? It is what it is, this is why people come to WDD Live. We’re not just skimming over this stuff. Okay, so the next one says, a cheat code to dribble like the professionals.

This is much better, this is what I call, and we’ve said this time and time again on these streams, burying your lead. I mean, I could almost take this heading right here and place it right here and it’d be a better hero section, right? So you tell me, elevate your handle with the heavy ball, okay? Or when I first arrive, the first thing I read is a cheat code to dribble like the professionals.

I know what a cheat code is. I know what dribbling is and I know what professionals are. There are no questions in my mind at this point. I’m like, damn, okay, that’s exactly what I want.

I want to dribble like the professionals, and I want a cheat code for that. It would be very nice. Why did we bury this better headline further down the page instead of using it right here? If you already have a very impactful headline, put it in the hero section.

Alright, just it seems to make sense. But people do this all the time. All the time, they bury their lead, right? They bury their best content on some other part of the page instead of making it prominent.

That’s just a simple swap for me. And you could A, B test this all day long, okay? So it’s like, oh, well, my client likes this one. All right, well, let’s let the data decide set up a split test Put this one in the hero on version to leave the hero as it is on version one.

See which one wins Okay So I guess these are professionals Kobe white. Okay, DeMar got it. Is this a slider of some sort? It is I would like okay, it is draggable, but there’s a problem with the drag ability maybe because I’m on a stream I don’t know notice.

I don’t get any handle. I don’t get a hand right Where’s my little grabber? I want to know that I can grab that and and and Swipe it I can definitely navigate here I’m interested to know is this Is this the default bricks slider? Mm-hmm it looks to be it looks to be okay hmm I’m keyboard navigating so we’re gonna see an issue right here so I’m on by ball right now you guys see that I’m on the outline on by ball so when I tab the the focus disappears I don’t I don’t know where the focus is right now it is on the slider though okay so I I’m navigating the slider with the keyboard right now, but there is no focus indication that I’m doing that.

So that’s definitely something that you would want to take a look at. And I don’t really know, let’s just figure out what I’m looking at right here in general. So you’re saying I get a cheat code to dribble like the professionals, and you’re showing me professionals, but I can’t click on these professionals. I can’t learn anything else about them I can just see them in cards and cards to my mind is like we’re showing clickable information But this is not clickable It’s gonna be it’s gonna get your hand, okay, these are really testimonials, right?

What I need is more visual context that what we’re looking at our tests. It’s not it’s social proof I won’t call them testimonials. We’ll just call it social proof. I need more visual indication that I’m looking at social proof.

So make these like quotes. Make this like quote text, put quotes in here. Yeah, it’s, there’s probably a couple other things that we could do to make this more obvious that these are like, you know, social proof cards. So I’d say that could potentially be improved a little bit.

And then I don’t know that a slider is just the best way to go here. I would almost go, I would almost just say grid this up. Like put this all in a grid. You got three, six, you got nine cards.

No, we don’t. Hold on. Okay, that’s confusing. There’s three dots, which indicates three, wait hold on, Chris Paul, all right so, DeMar Rosen’s in the middle.

Lexi Brown is in the middle. Chris, so there are three pages. What was happening a second ago when I dragged this? Okay, I guess it’s fine.

I would just do a grid of nine cards. And really that’s, visually speaking, it would show you like a wall of social proof almost. Whereas this requires the person to interact. Just make them scroll past a wall of social proof in my estimation.

Like you’re not hiding content anymore. It doesn’t require user interaction and it accomplishes the goal of like, look at all these professionals that back up this product. It creates a more striking like, wow, a lot of professionals back this product. Which right now you’re hiding six of the nine of them.

If the user doesn’t interact here, if they just keep scrolling past, they’re not gonna get the same social proof kind of impact. You’re loading less JavaScript on the page, like there’s a lot of benefits that we could take a look at. All right, so we have, I also don’t know, okay, that does make sense now. All right, nevermind, we’ll keep going.

Free app, learn pro moves with NBA skills coach Johnny Steffen, Steffen, Steffine, I don’t know. Like I said, I don’t know who all the NBA skills coaches are. I really like this dual device format here. This is a really good position.

I like the background. Those are basketball courts, okay? If you don’t know, those are, see, I’m not a moron. These are basketball courts.

And then, you know, it’s just all very cohesive. It’s nice. The one thing I will say about this section that I think brings it down a notch is the generic star icons here. If it were me, I would try to, you’ve done so well, like you’ve got the, even the ball has the branding in it, it’s like, but then we go to a generic font, awesome star icon.

That just feels like it’s a little chintzy, alright? So if we could kick this up a notch, I think that this would be a little bit better. I’m curious to look at all of this on mobile as well. We’ll take a look at all this on mobile and see how everything is stacking up.

Okay, what about this section? So immediately my first impression on this section here is, we’re a little off balance here. It almost feels like something’s wrong. Because we have a smaller image here that’s just kind of floating off to the side.

It just feels like this image was supposed to be bigger, doesn’t it? So let’s see what our little structure is here. Okay so we’re using like a I don’t know how many columns that is but that’s a that’s a lot of columns and then you’re spanning. You got this over to the right you got this over to the left.

This is going from grid column one to four. So very easy with grid to like, you could make this a little bit more striking. I don’t know. That almost even, doesn’t that just feel better?

It’s like, let’s just take up some of that space. Let me refresh. Doesn’t that just feel off to you? I feel a little broken.

Here’s where I would have to ask Tyree. Like, is this a design decision or is this something that’s broken? I don’t know. Okay, let’s look at what our selling points here is on the app.

So we got a free 30 day trial, learn how to use the Handle Life Heavy Ball with a 30 day free trial when you purchase the ball. Fresh drills, well first of all, let me also say this. The spacing is off in these cards. So you need a little bit, oh gosh, in these cards.

So you need a little bit, oh gosh, what are we? Content wrapper, okay. Here’s the UL. I like to see these in an unordered list, that’s good.

You’ve got padding in your unordered list, which is good. And then I’m looking at your LIs, these are your cards. This is all good. And then in your card, you’re gonna have a div for your content.

Why, oh, I see what you did. Okay, so you were trying to align that with the center of the icon. Which to me, that almost feels like it’s a little bit off. I kind of like it like that.

Because there’s so much content. Like I understand you want center alignment with the icon if it was just the headings. But because it’s got all the other text it just feels like this is actually a little bit more cohesive Because what this is doing is creating a little it’s a little Semblance of being off balance with the top white space. I Kind of like it like that and then what you would want to do is gap the content here We’ll just use something like 0.

5. Yeah, okay now that feels off Now if you just added your top padding back in now you you kind of get to something a little bit cleaner but what I was seeing before is that you you’re not like this is too squished these these two things are right on top of each other I think a little gap there would help out so something like that and I don’t know a designer have to cut I think this is all going to be better by the way if we have better icons these the chintz enos of these icons is just not helping this section out whatsoever. But anyway back to copy fresh drills new training drills and mindset videos added weekly. Here’s one thing I talk about all the time too that’s throwing this off the amount of content in this feature versus the amount of content in these other two features.

So if we took a look at shortening the content I’m not going to figure out what to say instead but I will show you visually what it looks like to more balance right and if we came over here and we just added some nonsense okay let me get in here with some more nonsense with some see my dyslexia right there I was like with some more nonsense but my brain wrote more some it’s fun it’s fun with some more nonsense there you go so and So and obviously, you know, we don’t want, see the now the OCD is kicking in and non-breaking space. Okay. Oh, it’s not actually going to parse it. But anyway, you can you can link those two words together so that, oh no, hold on guys.

Hold on. Hold on. All right. We may be doing we may be doing Q&A for a minute.

The fantastic Apple mouse has died and You know I would say hey, it is it’s no problem because I’ve got a charger cord right here But the geniuses at Apple we all know how good they are at product design the geniuses at Apple You know put the port on the bottom, so We won’t be doing any other mousing for a moment or two now the good news is it does charge quite quickly It’s going to get us another you know five minutes. We’ll have another probably hour. But I’m just gonna set that off to the side. Let’s go ahead and let’s move into the Q&A portion of this segment.

And if you have any comments that you wanna put on what we’ve talked about so far on this design, you can absolutely do that too. I don’t see Tyree in the chat, which is unfortunate. I’m sure he’ll watch the stream later, but it would have been good to hear from Tyree on this. But go ahead and drop in the chat any questions that you have now and any any comments that you want to put on the site that is up on the screen as well and any questions related to things that don’t require a mouse would be even more fantastic give me five minutes on this and we’ll we’ll get things going okay Apple designers were using Elementor by that time.

Most likely, most likely. I do have a second mouse on the way. My daughter took it though. I have another, sorry, a third mouse on the way.

My daughter took my second mouse to use for her laptop and she’s on a trip. She ain’t here. Okay, so that’s a problem. Let’s start a GoFundMe to get this man a wired mouse.

No I like see I that’s the problem is I like the Apple mouse so much I like everything about it and I do have another mouse in the drawer it’s just not it’s not it doesn’t have battery I don’t know it’s that’s going to take longer to solve that situation than just plugging this in for five minutes so. Okay so Nell Media has a question Dave Foy shout out to Dave Foy. Dave Foy mentions that it’s better to set the font size, the root font size at 100% specifically because of other plugins that might rely on that. Your thoughts, what would the impact be on other plugins?

Okay, it’s a common question and this is a good question. And I do want to show something that requires the mouse with this regard, but I’m going to do my best to do it without the mouse and then we’ll show You can remind me in a minute when our mouse is back and functional again To show you this because this actually involves a sneak peek of a feature coming in ACSs 2. 6 which we are less than a week away from August 1st will be the drop of ACSs 2. 6 If nothing if nothing major comes up ACSs 2.

6 will be released on August 1st. Big update. It’s a big update. And there’s a lot of fun stuff in it.

A lot of fun stuff. And I’ll give you a sneak peek of one of those things in just a minute. The root font size thing. So I will say this.

62. 5% is what I have used for a very long time now. And there’s a lot of people who use 100%. You can’t go wrong with 100%.

So if you want to choose 100% you can’t go wrong with 100%. Your life will be more difficult when you need to use REM units. Especially if you’re not using whole units. Ok and if you’re referencing pixels.

I actually had a fun little debate with Adam Lowe the other day. We actually need to have this debate I think live. It would be good to have this debate live. It was about getting away from pixels altogether.

The argument from Adam Lowe’s side was, and I’m going to do my best to represent his argument as accurately as I possibly can. His argument was we need to get away from pixels altogether and just think rim units. And I was like, well, the problem with that is that the R in rim stands for relative. We know these are relative units, right?

All of these, you have static units, that’s pixels. Then you have your relative units. VH, VW, rim, M, these are all relative to something else. And so he said, his argument was, we don’t need pixel units.

Everything is relative to another thing. Like four rem is relative to two rem. You know, four is bigger than two. You just need to know that they’re relative and we can just only work with relative units.

And in my mind, I was like, but it’s relative to something. What is it relative to? You can’t escape that. You can’t escape the fact that it’s relative to something.

And we need to know what that something is. And I’m going to do my best to remember all of the argument, because this is kind of an inception level concept, when you get down into the details of it. But for example, first of all, another big problem is Figma. You know, somebody does a design in Figma, Figma doesn’t have M’s, okay, it doesn’t have rims.

I think it maybe now, maybe they’re introducing it, but people are primarily using pixels and designs in Figma, right? And so you’re using that as a reference, but even if you don’t use that as a reference, the browser itself has a 16 point pixel reference. 16 pixel is the reference point for browsers by default and so if you set the root font size to a hundred percent Which is relative it’s a hundred percent relative to the 16 Okay, and if you sit sixty two point five percent that’s relative to the 16 He’s still relative to something my argument was because he was he was basically saying no we need to get rid of all Like that thing that it’s relative to we can get rid of that which doesn’t make sense in my mind which is why I’m having a hard time even explaining his argument ok and I just use the I use pizza as an example because I think he actually brought up pizza I don’t know I don’t know who brought up pizza it got into pizza again once again pizza came up ok so my argument was you have to know it would be like saying well no they could just sell pizzas and say, well, a medium is eight slices and a large is 12 slices. And it’s like, that still doesn’t answer the question of how much pizza I’m getting.

If it’s not relative to a size that I can actually understand, like the medium is eight inches and the largest 12 inches, now I know I’m getting more pizza. If you just tell me how many slices it is I don’t know what is it relative to you can take a pizza this size and make 12 slices out of it that doesn’t help me understand how much pizza I’m getting that was my argument right we still have to know what its relative to and he seemed to believe that it doesn’t matter what its relative to we’ll still all get along and I that just doesn’t make sense to my brain you guys can weigh in on this if you want to. But back to 100% versus 62. 5%.

So for a very long time I’ve used 62. 5% because when you use 62. 5% it makes RIM calculations very easy. If you want to reference, for example, 60 pixels, I know that’s six RIM because 62.

5 happens to make it divided by 10. So you take the number in pixels that you’re referencing, you divide it by 10, and you know exactly what you’re getting in terms of rims. If you don’t set it, if you leave it at 100%, you got to divide by 16. Not the craziest thing ever, but a little bit harder for us math challenged individuals.

And I will say most of you can’t do the math if you’re dealing with decimals and such. Like 62 divided by 16, 62. 5 divided by 16. Now you’re getting into territory where you’re probably having to break out a calculator.

When it gets into workflow, this is a huge workflow challenge and hurdle because it’s like, all right, I’m just trying to design a website. Every time I got to pull up a calculator and figure this out, it’s an obstacle to my workflow. If you build a 62. 5%, you don’t have that obstacle.

Now, what is the downside to 62. 5%? Because I’m not going to sit up here and tell you there are no downsides to 62. 5%.

What I will say is, I have reviewed argument thread after argument thread on Twitter and Reddit and these other places where people argue 62. 5% versus 100%. I’ve read all the arguments. 90% of the arguments against 62.

5% are false arguments. They’re just wrong, they’re just false, okay? People don’t understand. Like you said at 62.

5 it won’t be accessible. Wrong, absolutely, 100% provably false, that’s wrong. 80 to 90% of the arguments against 62. 5 are wrong and false.

The argument that Dave Foy appears to be making when he says that this could cause issues with other plugins, that is the one argument against 62. 5% that is true. That is a correct argument. That is the downside of using 62.

5%. So if I have a plugin and they’re using rim units and I install that plugin, all those sizes are going to be smaller on my website. Now the question is how often does that happen and the answer is almost never. So yes it is a downside but from a practicality standpoint it almost never happens.

Now why does it almost never happen? Well in my estimation most of the plugins use pixels which they shouldn’t be doing right by default but my argument is I’m overriding what they’re doing anyway, because I’m going to closely manage the styles that are on my website. And so I’m going to switch all that stuff over to RIMS anyway, according to my root font size, it’s all going to be fine. So it’s either a non-issue or it’s easily overridable.

But it is a downside in some rare cases you might run into problems. I almost never run into problems. So that’s all I have to say. Now, the other thing I have to say is, if there was a way to get around the math calculation issue, you should use 100%.

I wouldn’t use 100% if there wasn’t an easy way around it because it’s too much of a hassle for me. That brings me to ACSS 2. 6. And a feature that I can sneak peek for you.

I’m just going to give this mouse a little bit extra time to charge up here. If I show you the sneak peek, you’ll understand. Oh, suddenly, the math calculation challenge is gone. When the math calculation challenge is gone, we can go back to using 100 percent root font size, and then there’s absolutely no downsides.

Dave Hoy is a user of Automatic CSS, so Dave will really like this feature, I believe. And in Automatic CSS, I should mention, you can use whatever root font size you want. There’s one little setting input in the dashboard. You can easily change the root font size to whatever you want.

So it’s not like Automatic CSS forces you to use 62. 5%. You can use 83% because that’s you know the year I was born maybe that’s what you like. Fine with me right?

You can use anything. So it’s up to you. Hopefully that answers your question. Yes, 100% is the best option.

However, if you want max compatibility, however it presents the math challenge. But if you have a workaround for the math challenge, then use 100%. Okay, Jake says you have to have a unit. I like that and I won’t just get along, haha.

100%, 100%, this did not make sense to my brain. It’s like relative units, we can use relative units without knowing what the thing is relative to. That does not compute, does not compute. Okay, any other questions?

I don’t even know if I can scroll in here with the keyboard. Let me click on this real quick. Let me click on the chat window. Let’s go back to the mouse.

Is my mouse even working? Oh, I turned it off. Okay, turning it back on would help. Let’s just hope it connects.

There it goes, it connected. Okay, all right. So we are, let me see if I can scroll. Nope, no keyboard.

Oh yeah, I do have keyboard scroll. Oh, no, I don’t have, nevermind. I don’t have keyboard scroll. Okay, let’s see what the mouse level is at now.

I’m gonna go up here to my toolbar, which you guys I don’t even think can see. Let’s go to Bluetooth, Magic Keyboard. All right, we got to 6%. We got the 6% charge.

All right, I think 6% is about 30 minutes. All right, so let’s go with, I don’t wanna zoom in on that. Let’s do the little sneak peek here. Let’s pull that up, let’s have some fun.

Then we’re gonna finish off this home page over here that everybody’s looking at so I’m gonna do bricks ACS That’s new alright, so here’s a little there’s a little dev site. We can get into here I’ll just give a little it’s a little just a little sneak peek. Just the tip just the tip as they say Okay, so We’re gonna grab. We’re gonna grab this heading right here.

Let’s say that I wanted to can you guys see this? Is everybody is everybody good? Maybe I should change my, see now people are gonna be like, change your screen resolution. Okay, hang on, hang on.

Display settings, there we go. All right. All right, are we good? I think we’re good, I think we’re good.

All right, so we go into this heading right here. Now you wouldn’t wanna do this because if I want this heading to be smaller I mean I’ve got my h2 variable that I can use I’ve got my h3 I’ve got my h4 I can do whatever I want here right I can do calcs up in here I don’t even have to write the word calc I can just say h1 times 1. 2 and I’m gonna get a 20% larger heading and the benefit of using these variables and all of this is that it’s automatically responsive right there’s clamp functions behind here. So you wouldn’t want to do this, but just an example of the feature working, keep in mind this feature is going to work in all of these inputs.

So there are many, many, many times where you would want to reference a pure rim value. So listen, I don’t have to care what my root font size is, by the way, because this feature already knows what your root font size is, and it’s gonna do this calculation based on your root font size. But what I will say is you want to choose your root font size before you build your site. Don’t build your site and then just start playing around with root font sizes, that ain’t how this works, okay?

You wanna pick one and stick to it and that’s your thing going forward. But let’s say you’re on a brand new install and you’ve used 62. 5 for a while now. And you’re like, I wanna go to 100%, but I don’t wanna deal with the math.

So you set your root font size to 100% In fact, let’s go back here in WordPress and do this. Okay, so we’re gonna go to Automatic CSS, we’re gonna go to typography and here’s the setting right here See how easy this is you go from 62. 5 to 100% All right. Now I’m gonna go back here in the builder.

Let me make sure that’s saved it did I’m going to reload and we’re just going to see now keep in mind this is an alpha and this is a live stream and when you combine alphas and live streams you never know you never you never know what you’re going to get. So we’re going to go into typography right here and we are going to write the reference for what we want in pixels. Let’s say we want this heading to be 60 pixels. So I’m going to write 60 and then I’m going to write CTR and I’m going to hit enter and you see what happens.

It just does the math. And that’s much quicker, right? Even for you mathematicians, I think, that’s much quicker than what you could have done in your head. And so you see immediately I get the exact rim that I wanted.

And so what does this do? It says, hey, I want 60, the equivalent of 60 pixels. And then CTR stands for convert to rim convert this to rim so and then I hit enter and it converts it to rim and now you might be wondering well Kevin can you do that down here because a lot of the rims that I use maybe is when I’m writing custom CSS okay and I don’t even know I don’t even know there you go okay so you can do this in the CSS box you can do this in your input fields. You can do this in a lot of places, right?

And now, there is no, see, we’ve overcome the math thing. And so you can go to 100% now and not even have to worry about anything, right? You’ve got max compatibility, you’ve got math being done for you. It’s fun, right?

It’s fun. I think it’s fun. So, yeah. Okay, so that’s a little sneak peek.

Nicholas says, you mean I’ve been doing endless calculations for nothing? Well no Nicholas, you’ve been doing calculations for a good reason, because this feature is not available yet. This will be available in 2. 6 on August 1st.

And this is just one of many, many fun, fun things coming to automatic CSS in 2. 6. Okay, oh man I could just go into Gutenberg right now and just show the Gutenberg sauce that is coming in 2. 6.

All right, I’m not going to do it. I’m not going to do it. I’m going to make you guys continue to wait. Okay, I wanna have enough mouse for, we’re gonna switch things up because I wanna have enough mouse battery for the quickly components first look.

So what I’m gonna do is we’re gonna quickly finish this page. I’m gonna plug the mouse back in and we’re gonna do Q&A while the mouse continues to juice itself up. And then we’ll do the quickly components immediately following some Q&A. All right, so we talked about this section.

I like this section right here. This is just another call out. This is a. .

. Okay, this is the coach. All right, this is good. This is good.

Ready to transform your game. I had a couple things that I wanted to say, especially about the navigation going on up here before I let this go, because I want to give Tyree the rest of the value that he came for. First of all, when you have three product options like this, youth ball, men’s ball, women’s ball I love the fact that our measurements are here. Hey guys.

Hey, hey Adam perfect example, right? Oh, we don’t we don’t need we don’t need any reference, right? Oh, they just know that this ball is bigger than that ball is bigger than that ball. Don’t say I guess that’s the argument Right.

We we don’t need to tell them the size in inches. They could just see one ball is bigger than the other Again, I think it’s important to have a some sort of static reference that the brain can wrap itself around see I think I mean this is case closed in my estimation even see size 7 size 6 size 6 I mean that’s relative 6 relative to 7 smaller without the inches I don’t know anything I don’t know anything so So case closed, case closed. All right, but I love this. I love that they’re like, all right, we got three options.

They could have just made cards, boring little cards, option one, option two, option three, product one, product two, product three. Look at the presentation that’s been created here. Now I got to click buy ball. Okay, hold on, let’s check this out.

One, is this Sure Cart? I wonder if this is sure cart It’s not deleting by the way, you might want to take a look at that. It’s not if I minus that it’s not removing it So I can I can uncheck it But then it leaves it there So, I don’t know what’s going on here. I don’t yeah, you’re gonna have to definitely take a look This is the most important part of the website.

This is the point where they’re like trying to buy the thing. We need to make sure that this is dialed in. You definitely take a look here at what’s going on. Oh gosh, there’s two of them.

Well, that’s even more fun. There’s a card up here and there’s a card down here. Definitely take a look at this page. I’m not sure what’s going on here.

I love this card over here. I love this card right here. I love the checkout page in general. However, this is kind of throwing me off.

Let’s go into here, annotate screen. Okay, you’ve got like a collision here, a collision here, and a collision down here. It’s a little, throwing my brain off. You got a collision with your text right here.

It’s a little like, whew, it’s abstract-y feeling. It’s kind of all over the place. Yeah, it’s just creating a lot of, I don’t know, my eye’s having a hard time focusing. And this is not the time to make focus issues for the user.

Like they’re about to give you the money, the wallet is out there, we don’t need to be creating a bunch of confusion right here. So I would say to clean this up a little bit, just make it simpler. It doesn’t have to be so much stuff going on here. We got a background color over here that’s different from over here.

We just got a lot of stuff going on on this and it doesn’t need to happen. It doesn’t need to happen. It’s only potentially causing problems. Okay, let’s go back.

So we got some, definitely some stuff to figure out there. What I was looking at is how do I choose which ball I want? So there’s the men’s and there’s the women’s. I never really said to add them to my card.

I just said I wanted to buy them. What I would do is like, imagine here, we hover over, the ball gets bigger, as you hover over each one, wouldn’t that be cool? And then I can click on it, and the ball that I click on, as they get bigger when they hover, the ball that I click on gets added to the cart. That would be maybe what I would expect to see here, and if you wanna liven this up a little bit, that’s what I would recommend doing.

And then fix your cart issues. Okay, we need to talk, because I saw something earlier that we need to take a look at in the navigation. Watch this. I’m gonna click on heavy ball.

To me, in my mind, this would take me to a page that explains more about the heavy ball, maybe show somebody using it. That’s another thing, right? We have no video, no video of somebody using this product. That is a killer on a product like this.

This product has got to have video showing the thing in action. Mandatory, I don’t care what Bev says, gotta have a video. Okay, so get a video going. And I would expect to see more information if I click this link.

But what happens when I click the link is I’m actually taken to the checkout. And this is actually a bad user experience. It’s like, hey, oh, hey, hey, I wasn’t ready to buy yet. Okay, why are you taking me here?

I thought you were just gonna tell me more about the product. That’s what I was looking for. I was looking for some more information about the product. You trying to, you know, you trying to Mac on me too early, right?

Like, we don’t wanna do all that. This is the first link in the navigation is like, no, buy it. And you didn’t even tell me that that was going to happen I would switch this up this does not need to take the person to the checkout and if you want a thing up here that says check out or buy or whatever that’s I’m all for that but make it explicit that that’s what’s going to happen this is like a little you know you’re tricking me here all right now I click on training and I don’t I don’t know if you guys notice this took me to a different website in the same tab tab handlelife. com handlelifeapp.

com most people are not going to know that they just left the original site and that they’re on a completely new site so if you want first really two things here if you want to open this in a new if this is going to take someone to a new site make it open in a new tab that’s number one but my question would be like why is this a different site? It should be handlelife. com slash app. Why is it handlelifeapp.

com? Why do we need a whole new domain for that? I just feel like you’re breaking the experience now. You’re taking me from one thing to another when that doesn’t really need to happen.

So I would just rethink that strategy overall, but definitely taking me to a new site in the same tab, that’s a no-no where’s my that’s the wrong one there we go that’s one of those that’s one of those okay apparel takes me to yet another this is a subdomain so yet another website shop dot handle life comm maybe that’s a is this a Shopify thing yep guessed okay so that’s Shopify. So we got three sites going on now, three different, I got, let’s calculate this, I got three links in the navigation that took me to three different websites. So, yeah, that’s a little bit, and then this one just takes me to my email. So every link up here takes me off this website.

Every single navigation link is, I’m gone, I’m somewhere else, okay? I’m not gonna think that that’s the best strategy for max conversions. Let’s just do that right now. What I would like to see up here instead is if this is a one page website, these need to be anchor links to like, what do the professionals say?

The app, right? The app, scroll me down to here. What is like, I don’t need that whole other domain dog I can get the app from right here why are you taking me other places okay this could just be a one-page website yeah that’s it that’s that’s that’s my final thought this is this this nav needs to be rethought out here the whole multi-domain strategy I would I would want to you know sort that out. Everything else is the way that we’ve talked about it.

I don’t think we have to, well, let’s go look at the app one more time. We didn’t really look at this landing page. I just wanna see, this is the funnel. Basically, this is a good entrance to their, oh, oh, oh, oh, oh, oh.

Oh no, no, no, no, no, no, no, no. Something has gone awry here. We wanna check on this section. This section is man down, man down right here in this section.

Oh, here’s what we were talking about earlier. That, my friends, can I zoom in? Does this work? Is this working on the, you guys hit me up in the chat.

Does this work when I zoom in? Can you see me zooming? Because I did this once on screen capture and it did not record what I was doing. Is this zooming guys?

Just let me know in the chat. But anyway, if you guys can see that shadow right there, that is not a good shadow. Oh yeah, no zoom. Okay, the zoom’s not working.

That’s not a good shadow on the feet right here. And if that was coming in your hero section that’s that’s not gonna work you definitely want to hide the feet in that regard okay I just want to look at this because it’s the entrance to the funnel train free for oh gosh not yet another another tab you’re killing me with the tabs all right I go here what is this taking me to select plan all right hold on hold on hold on train free for seven days. Okay. Is this powered by Playbook?

This is yet another service. You got services coming out of everywhere. All right, so I can choose my two options here. Join the app, whatever.

So I’m guessing that this app is like required to use the product. See, I don’t have a video, because I don’t really know. If a video would be really really helpful here and I didn’t read all your copy but okay you’ve got enough value out of this I think. Let’s let’s close this up we can go back to camera and I’m just gonna keep an eye on the chat.

I am gonna plug this mouse in so that we have enough to do our quickly and I’m gonna open up Q&A again. So bring on the questions while this mouse I can’t I can’t scroll back up now so you got to put your questions in now even if you asked the question earlier put the question in now. Question in all caps. As soon as this mouse has a little bit more charge in it we’re going into quickly we’re going to take a look at quickly components but little pause break for Q&A.

Use zoom and accessibility in Mac OS and it should show in the video recording software. That’s exactly what I was just doing and it does not work. I recorded a whole video, it was like a 45 minute video where I thought I was zooming in live with the accessibility feature in Mac. None of that was on the recording.

None of the zooms got recorded. Okay, questions are strolling in now. ACSS WP theme, would you consider creating an ACSS compatible block based FSE style WP, man that is such a mouthful, for use without a builder but with generate blocks. D123, I 2023.

I can do you so much better my friend. So our vision for Gutenberg is for the people who want to use Gutenberg. Okay we’re not going to force you into doing this. We’re still going to, ACSS is still going to work in bricks and oxygen and quickly and everywhere else okay.

But for the people who are like you know I don’t really want to build or layer. I really like to generate press, generate blocks experience. My vision as it stands right now is that automatic CSS or frames, I don’t know which brand it’s gonna be under, is gonna have an FSE theme. And it’s going to have, it’ll probably be ACSS honestly.

I don’t know, I haven’t decided yet. It’ll have an FSE theme and it will have native blocks and It will have native patterns. Those will definitely be from frames. You don’t know what patterns are patterns are like, you know pre-designed whatever it basically imagine frames as it exists in bricks in the patterns library in the FSC That’s what would that what would happen?

So you could technically build sites once this vision is executed on fully you could technically build complete sites with automatic CSS and frames and no builder. I think that would be pretty pretty interesting, pretty fun. Ok, not to say that I think that’s the best experience but it’s a massive market and you know it we’ve got to serve the you know massive side of its native to WordPress. You can’t get around the fact that this is the direction WordPress chose to go.

This is the native experience, and so we either gotta get on board or not get on board. Okay, are you happy about the new addition to Quickly Intersections? Yes, ecstatic, I’m ecstatic about it. I will tell you this right now, Quickly is quickly, it is bricks and oxygen should be on notice.

Just be on notice right now. There is competition in the waters and it’s getting more promising by day and if these builders don’t wake up to the fact like I was talking about the very beginning of the stream. It’s a little disappointing that we haven’t heard a peep out of BRICS with regard to global components or dynamic components, excuse me. And it’s a little bit disappointing that on the oxygen side of things there’s been pushback on why they don’t think that dynamic components are the way to go.

Well I’ll tell you right there, features like that are what can cause one page builder to leapfrog another page builder. If you have so many things that just start to come together, you have quickly fixing their section element. So now you have an accessible inner container. Well, guess what?

Now, see, that’s one thing Bricks had over Oxygen. And people may think that’s a little thing. It is not a little thing. That is a major flaw in Oxygen.

And Bricks doesn’t have that flaw. Bricks has an accessible inner container element on every section. Quickly had the same flaw that oxygen had. So if I was making the decision, well, would I move from bricks to quickly?

Well, not with that glaring problem. Quickly was like, well, we’ll just fix that problem. And they did. And so now that problem doesn’t exist.

And they have global components or dynamic components now. With bricks and oxygen seemingly, you know, nowhere to be found in the dynamic components discussion. These things start to add up, they start to come together where it’s like, I got to take a I got to start taking a closer look. Now, with that said, quickly is handicapped by the Gutenberg environment.

The question is, can we look past that? How easy is it to look past some of the handicapping? I will say they’re far less handicapped than something like GeneratePress, GenerateBlocks. Because they’ve created their own environment within Gutenberg.

For example, they have their own structure panel. That’s major. Because the Gutenberg structure panel is atrocious. Atro.

. . Make that as many syllables as you can. It is absolutely atrocious.

Quikly has fixed that by creating their own structure panel. So not all of the limitations are there for quickly. But there are still some things there are still some things that is like about the Gutenberg environment that quickly does suffer from. Okay, would you consider making a pro only branch off of a BRICS like builder was designed for those that do know CSS and web design standards?

I thought about that. I thought about like you could fork a builder and then just take it to where, and here’s the thing, my philosophy on builders is you can have a 100% builder tailored to professionals that beginners can also have a great experience in. If the beginners are just, they just make a simple decision like, I actually want to know what I’m doing. And then you provide the necessary education, everybody can be happy.

I did an interview, I’m just going to tell you, if I, I have to listen to it again. I did an interview on a channel the other day, it’s going to, it should come out this week or next week I don’t know I see I they haven’t posted it yet I haven’t heard anything about it yet so I’m not even a I won’t even say the channel until it’s actually live I don’t want to make any promise I don’t know I’d have to go back and listen to I felt at the end of the interview like I could have done better that wasn’t my best interview and it actually to me it felt like it went off the rails a little bit toward the end not the fault of the host or anything, the fault of the topic, which we got into talking about Gutenberg and beginners and vision and all this other stuff. And it’s it’s very hard to talk about Gutenberg because I believe the vision is completely wrong. I don’t even think there is a vision, honestly.

What we got into to bring a little clarity to the discussion is the leadership and the vision and the problem with it and the problem with it is a problem that any product would have they want Gutenberg to be usable by literally everyone guys I can’t pull it up because of my mouse is charging right now but I could go to the WordPress website and it literally says on there somewhere it’s like for everyone why does others give you I’ll just cut to the chase if you make a product for everyone, you’re making a product for no one. Nobody is going to have a great experience. Everybody can use the product, but nobody’s going to have a great experience in the product. Because you can’t take these people with wildly different needs and desires and then create something that speaks to everybody.

What you end up with is Gutenberg. You end up with what they have this is the result of a faulty vision so people ask me why is Gutenberg the way that it is because it has no vision it wants to be everything to everybody and that is the number one recipe for creating a failed product the number one recipe I don’t know why they don’t know that I don’t know why they can’t accept that whatever but that’s that’s the fact of life it is you try to make something for everybody, you’re making it for nobody. And so they can’t escape that. Until Gutenberg changes its vision, it will never really be all that much better.

So I was trying to explain this and we, you know, it was just I wasn’t doing a great job explaining it. I felt I don’t know, I sometimes I feel like interviews sucked. And then everybody’s like, that was the best interview I’ve ever heard. I don’t know.

I don’t know. I’m my own harshest critic, whatever. So I got to go back and listen to it. But that’s kind of I’m my own harshest critic, whatever.

So I gotta go back and listen to it, but that’s kind of the gist of the conversation. And so the question for me was about a page builder. Would I fork one? And what would my vision be?

Well, I happen to think the vision should be, and if we’re talking WordPress again, I made the distinction, and maybe I don’t know enough about WordPress core. When WordPress. com came out, I don’t know enough about WordPress. com.

Why? Because I looked, one look at it, and I was like, that’s not for me. And I stopped paying attention to it. I just stopped paying attention to it.

This person that was interviewing me seems to think that WordPress. com was like WordPress’s entrance into the managed hosting space. I thought it was more than that. I thought, and I think it can be more than that and should be more than that Guys if you like the simplified dumbed-down easy to use wix like Strategy of Gutenberg if you like that to me he actually this was the best question He asked me on the interview if you were like the leader of WordPress.

What would you have done? Knowing that you want to capture wix wix’s audience and Squarespace’s audience and all that, to me it is crystal freaking clear. You have WordPress. com, you have WordPress.

org. If you want a Wix-like, Squarespace, dumbed down whatever experience, put it in WordPress. com. WordPress.

org friendly to professionals and make wordpress. com where people go if they don’t want the technical shit they just want the Squarespace Wix like kind of thing build your website in Microsoft Word kind of thing. Fine do that on wordpress. com leave wordpress.

org to the side of things. Or just decide no we’re going to build a professional tool and then we’re going to teach beginners how to use it. This was the Webflow strategy and it worked. You can’t argue that that doesn’t work.

It clearly works. Webflow said we’re going to build a professional tool then we’re going to teach beginners how to use it and it worked. Ok so that would be my vision. My vision would be we’re not going to fork, first of all, we’re not going to fork a builder that currently exists, because I would re-imagine how a workflow happens.

I think all the builders right now are based on the first page builder. So the first page builder concept that came out, all of the builders that have come after that are based on that idea. And I think that it can be completely reworked. It can be completely redone, and the workflow can be made faster and the experience can be better so I would start from scratch if I was building a professional builder I would start from scratch and it would be a completely new vision for how the workflow is going to work and I can’t give more details on that because I still don’t know if we’re going to execute on this but you know it would be completely it would not be a fork of an existing builder but back to the vision I think you can build a professional builder and then teach beginners how to use it.

And I think beginners will want to learn how to use it. And there’s going to be some people who are like, no, I don’t want to learn web design, I just want to build my grandmother’s Bunko Club website. Fine, go use Squarespace, go use Wix. Companies have to be okay with saying you are not for us.

Every great company says that at some point to some capacity. And the newer you are and the smaller you are, the more you have to be adamant about saying that. Because the minute you’re like, oh, we’ll try to make this person happy and we’ll try to make that person happy and we’ll try to make everybody happy, the product goes to absolute shit really, really, really fast so Yeah, I would say we build a professional builder. We teach beginners how to use it if beginners don’t want to learn web design Then they’re not for us.

We’re for people who want to be web designers, right? That’s who this tool is for not for everybody for people that want to be web designers Does it mean it’s not friendly to beginners? No, it’s as friendly as it can possibly be to beginners Does that mean it’s dumbed down to be friendlier to them? No.

Does that mean we cut corners to be friendlier to them? No. But we can find ways to be friendly to beginners and we can provide as much education as possible so that we are friendly to beginners. Not only are we friendly to beginners, we empower beginners.

Not only are we friendly to beginners, we actually take the beginner from beginner to a different place, which you cannot do, by the way, by learning Squarespace or learning Wix. The only thing you can do is be a better Wix user or be a better Squarespace user. You’re not going to be a better web designer, like technically speaking, okay? So yeah, I think it’s a vision, WordPress has a vision problem and a lot of these tools have vision problems.

And they have an inability to say, we’re not for you. And that is a critical thing if you’re a product developer you have to be able to say I’m sorry we’re not for you this is who we’re for and we’re for them a hundred percent okay do we have enough do we have enough charge let’s see where we’re done. We’ve got plenty of charge for the rest of the day. Okay, so we are going to Screen share again, and we are gonna get into quickly here and we’re gonna see this firsthand right now We’re gonna see this firsthand right now What do I mean when I say that this is an important important important feature set?

All right. I need to get a quickly install going. I’ve got one of those handy. Okay can you guys see?

Did I, is my screen resolution still good? Yes it is. Okay main display, extended display. Oh gosh, oh gosh we just went crazy.

All right go back to the main display. Hitting the wrong buttons. Ah here we go. It’s that one that I want to change.

See now I don’t even know if I was looking at the correct, yeah I don’t know what was going on. That looks much better though. That looks bigger, easier to see. Okay, we’re now set up for success.

Let’s go into pages, let’s go into home. This is a live first look, this is not a tutorial. This is a let’s figure this out together, let’s take a look at this together, let’s talk about it together, that’s all we’re doing here, okay? This is quickly, this is the interface, so you’ve got this stuff going on, if this is your first time looking at quickly, you’ve got stuff going on over here, you’ve got the structure panel over here, you’ve got the main canvas in the middle.

Okay, here’s one of the things that quickly suffers from because of Gutenberg. And again, Gutenberg, see the Gutenberg team seems to think, oh, you only need three breakpoints. That’s all anybody needs. Who needs more than three breakpoints?

So this is a major limitation of working in the Gutenberg environment. I don’t even know if Quickly can get around this, honestly. I think if they could, they would have. Yeah, I don’t know, but that’s neither here nor there.

So let’s add a section to a page. We can also see, by the way, Quickly, full ACSS Quickly support is coming in 2. 7. So 2.

6 is generate press, generate blocks. 2. 7 will be quickly. Now, as you’re gonna see right here, a lot of stuff already works.

A lot of stuff already works out of the box. We’re just not claiming full support because we haven’t gone in and tested every single component. We haven’t done our overrides that are normally, you know, a needed thing on every single builder. I’ll just take this moment to reiterate.

A lot of frameworks are gonna say, yes, we integrate with Quickly. Yes, we integrate with Zion. Yes, we, they don’t, they really don’t, they don’t. They integrate like 90%, maybe 95%.

And the last 5% causes tremendous amounts of headaches for the user. And you just got to decide if you want to deal with those headaches or not. Automatic CSS, we said, no, the user shouldn’t have headaches regardless of the builder. So we’re slow to adopt to a new builder because we have to go in and do a bunch of extra work to make sure that we get rid of all the headaches that the users are going to run into.

That’s the extra legwork that we do. It’s just not being done really by anybody else. Okay. So we’re going to add a section element now, I believe that this is not so this is the beta with Components this doesn’t have the nested section element that’s in their other version So you’re not going to see the proper section element here which is kind of annoying but It is what it is I’m gonna add a div Okay, and we are going to grab that div first of all, yeah, I don’t even know.

Oh, it didn’t put the div in the section, okay. This is gonna be a little interesting, a little weird here, okay. Just a brand new environment that I’m not normally in. So we’re gonna try grid three here.

We’re gonna try a grid gap here. By the way, you can’t quickly cannot, it’s grid builder doesn’t work on main containers. It only works on their special grid container, which I think they’re fixing, but I don’t know why they did that. Like in Bricks, you can put a grid on a section, you can put a grid on a container, you can put a grid on a block, you put a grid on a div, whatever you want a grid on, you can put a grid on.

That’s not how it works in Quickly, which is a major limitation, major limitation, which I think they’re gonna fix, hopefully they fix. But what I was gonna say is, well, with automatic CSS, it doesn’t matter. ACSS, you can put a grid on anything you want at any time. So ACSS is an example of the framework overcoming a limitation of the builder.

So I’m gonna put a div in here, and you can see that it’s one third of our other div because it’s in a three column grid. So that’s fantastic. This is gonna be our grid. This is gonna be our card.

And what do we wanna build, guys? What kind of card do we want to build? Let’s build a service card. So our service card should have an image, our service card should have a heading, it should have text, it should have maybe a button, I don’t know.

So let’s put some structure in our card. And this is what I always get confused on. Is this plus sign going to put something below this card or inside this card? Let’s find out.

So put it inside. Okay. So this is going to be our media wrapper. And then I am going to add another div in here.

Now, I don’t want to add a paragraph. That’s not what I want. Ah, what is it doing? All right.

Oh, okay. So if you click it, it adds a paragraph. If you hover it, you get these options. Got it.

All right. So I’m going to put another div in here. I did not want it in the media wrapper. This is, and this is classic Gutenberg.

Gutenberg to me, there’s no rhyme or reason to like when Gutenberg put something in something, under something, next to something. It’s just like, seems to be random. All right, this is gonna be our content wrapper for our card. We’re gonna try to build this the right way.

We’re gonna go nice and slow. We’re just gonna see how everything works. So we’re gonna call this service card. That’s gonna be my class service card, all right?

This is gonna be the service card media wrapper. All right, I actually want to copy this right here. All right, so we’ve got service card media wrapper, this will be service card content wrapper. Inside of our content wrapper, I absolutely hate, guys, look at the canvas right now.

This is yet another, now quickly may be able to overcome this, and I will say that they should work on overcoming this. I’ve added many things to this page, I can’t see a damn one of them. Nothing. It’s a white page.

I get it. They don’t have any heights or widths. But in oxygen, in oxygen, oxygen is like, OK, you add a div. We get that there’s nothing in it, but we get you still want to be able to see it.

So in the builder, there’s a builder style that sets a minimum height and a minimum width. Therefore, you can see the element that you put on the page, even though it doesn’t have anything in it and it doesn’t technically have any dimensions. See, that’s the builder helping the user experience out. The idea that I just added one, two, three, four, five things to this page and don’t see any of them, that’s a user experience problem that needs to be overcome.

I’m going to hit the plus sign and we’re going to do a heading. We’re going to do a paragraph. That’s all we’ll add for now because we need to save some things for after it’s a component to see exactly how this component functionality really helps things. Is this my tag that’s going to go to an H3?

Okay, so this is going to be called service card. And then we need to go to website ipsum here. We need to grab some of this, everything looks so much bigger. This is so odd.

Okay, this resolution is not my normal resolution. So the service card content wrapper, I need to add a little bit of a row gap. We don’t have variable expansion yet in Quickly. So I’m just going to have to do this by writing the actual, whoa, what happened there?

Oh, oh, I know what happens. Let’s take this out. That’s so interesting. All right, command Z, watch.

I bet I can guess. I’m just going to guess what happened. Let’s go to the front end. I’m guessing, here’s my guess.

We’re going to take a look. This is like display block. But when I put a value in the gap field, quickly was like, hey, that gap’s not going to work on display block. So it set it to display flex for me, but it set it to just display flex, which by default is a row and not a column, and it screwed up the whole layout.

Just setting the, see that’s a beginner would be totally lost right there. Like what the hell just happened? I have a guess as to what happened. Let’s go see if we can verify our guess.

First of all, where is the content? All right, we’re not off to a good start. Am I viewing the wrong thing? What, okay, I’m in preview, which I know causes problems and okay I guess it’s the preview yet another Gutenberg fantastic feature of like let’s give them a special preview link That never seems to preview the thing that they want to look at Okay, so now let’s inspect this card.

I don’t know why my fonts are different either All right, let’s bring this down Here’s my service card There it is, display block. So what quickly was saying is, I’m going to grab this card right here. Hey, if you’re from quickly and you’re watching, Louis, are you watching? If I put this as a row gap, let’s do content gap and hit enter.

Well, hold on, that time it didn’t do it. Why did it do it before? Something switched my display. Oh, it’s already set to display.

I’m so confused now. All right, now that flex is not chosen, let’s see what happens if I put a gap in. Now, it’s still, I don’t know what happened the first time, but it definitely switched me to, what is this? That’s row, why isn’t it putting it in a row?

And why isn’t it giving me a, dude, this is all screwed up. Card, oh, content wrapper, that’s why. Okay, so we’re gonna go back. We should be on this.

Okay, take that flex away. Take this away. I think I’m back to where we started and I’m gonna refresh the builder just to see. Okay, I’m just trying to verify if this is actually the experience or not.

So we click in here. See, I clicked in here and thought I chose the content, no, no, we’re not. Okay, now we’re on the content wrapper. No flex set, no direction set.

What happens when I put a content gap in? Var, see that? Ah, it’s doing it, see it? Watch, see it?

Okay, quickly, you’ve gotta fix this. You can’t be just switching this to flex row on people. They’re gonna have no idea what’s going on. See now if I hit this down arrow, now it’s gonna get me to what I actually expected to see.

Okay, we’re gonna update there. That is a user experience issue. Let’s go into inspect this. I’m gonna see if it’s adding any other craziness.

Okay, we’ve got a div, we’ve got a div, we’ve got a P. All this appears to be good, perfect. Okay, my content gap looks a little aggressive. So I’m gonna go back in here, automatic CSS, and we’re gonna go to spacing.

Oh gosh, oh, other sneak peeks. Oh, oh, don’t look too close. Okay, let’s go back. All right, now we have a better content gap.

All right, so we’ve started our card. Let’s go into our media wrapper. Now we’re gonna add an image oh no see I hit the plus sign got a hover image there we go okay so our image is set where right here okay and let’s go to unsplash grab something quickly from here don’t really care what it what is this guy doing all right weirdo let’s go let’s go choose a different one. Oh gosh.

Unsplash is kind of crazy with some of their images. Yeah, let’s just do, let’s do this. We don’t need any people in it. We’re gonna get canceled if we’re not careful.

All right, select this. All right, so there’s service card. Now what I can do is on my service card, I wanna set this to flex column because now I’m getting that, see Bricks sets all these things to flex by default They’re all flex column by default But in a builder that doesn’t do flex call by default you got to come in here and set it to flex call Then you can start using your gaps properly So it’s just part of learning right get a little content gap action in there What else do we want to do? Let’s add a background color to this.

Let’s style this up a little bit. Let’s go backgrounds. Gosh, I don’t have any of my colors in here. Okay, there’s that.

And then let’s go into our content wrapper. We actually may not need the gap on our card. How do I get back to that? It’s here, service card, get rid of the gap.

Okay, here’s another question. Am I editing the class now or not editing the class now? Which one is which? When it puts the class in here, is that when I’m editing the class?

And when it says div, whatever, I’m not editing the custom class? So this is actually on the wrong thing, and so is this, and so is this. I need to select, this needs to be better. And I don’t know what this white dot is.

I don’t know what that does. See, there’s things that are unclear. So I’m gonna click here. I’m guessing because that’s now in the class box.

I just, how about make this like when it’s not, okay, yeah, now it’s got a border around it. All right, there’s like very minute details of like what’s happening on interaction here. It’s not obvious enough. You gotta make this more obvious as to what’s going on.

Okay, I’m gonna go flex column here, and then I’m gonna put my, I actually don’t need the row gap here. On my content wrapper, I’m gonna go into spacing, margin and padding. I’ve never been a fan of this little layout right here, just to let you know. Let’s do something like space M.

I like that it does all sides by default, that was kind of nice. Let’s hit update and save and refresh. Okay, so we’re getting places. Let’s do a little bit of a border radius here on our card.

And I’m just doing a little bit extra, you know, because I just, I want to use quickly a little bit more. I don’t want to rush right to the, right to the thing. Here’s this, I don’t like this either. Okay, so like in bricks, let’s pull up bricks.

I just want to give this as an example. Okay, pages, edit, I don’t care which one. So I select an element like this and I go to style and it’s like, bam, layout, typography, background, border. Like my brain immediately is like, I know exactly.

If I’ve never used Bricks before, it’s like I know exactly where I should go. Because it’s like speaking to me. It’s using language, okay? When we try to condense the dashboard down into just icons, yeah, now I gotta hover, okay?

That’s annoying. It’s annoying that I can’t just at a glance know what’s going on. Like, these dots, that doesn’t say layout to my brain. I don’t know what this is.

How does this have to do with margin and path? Like finding icons to communicate things is very, very difficult. And to me, it’s just like, well, that’s why you shouldn’t use icons only. Like it should just be text that somebody can click on it.

This was a re-imagining of an experience that was not made better in my estimation. It’s yes, I get it, okay? After a while of using it, you’re going to know. Your brain’s going to know.

But you’re requiring me to learn a builder instead of just being able to deploy my web design skills. Now, I’m like, what does what and what do I click on? And too many questions, okay? I was going to round the borders.

I was looking for borders, okay. Then we’re going to go with var radius m. See, I don’t care about like what unit do I use it? No, no, we just use a variable, just use a variable.

And you’re gonna notice that we don’t have border radius on the top. That’s because the image is overflowing the corners of the card. So we’re gonna have to figure out where our overflow property is. And that’s anybody’s guess.

You look at a thing like this like oh could be anywhere. Advanced, okay margin padding wouldn’t expect it to be in there. Relative styling, pseudo classes, oh god then there’s more tabs. Anybody’s guess.

All right does anybody any quickly users know where overflow is found? There it is. Oh no, these overflow wrap. Let me go to the chat real quick.

White. shows hides the class name in the front end DOM. Hold on, what? White.

show hides the class name in the front end DOM. I don’t know what that would be. He said layout tab, okay. Layout.

Where? Ah, finally, okay. There we go, all right, we got rounded corners. Woo!

Finally, okay. There we go, all right, we are rounded corners, woo! Save. Up, up, up, just close that.

All right, file, reopen, close tab, thank you. All right, so I think we’ve done enough. We’ve done enough here. All right, so what we wanna do is we wanna componentize this.

We’re gonna call this service card. So we’re gonna create a component now. I’m gonna right-click this. I’m gonna hit create component.

And this is where the magic is going to start to happen, I’m gonna hit create component. And this is where the magic is going to start to happen, friends. Service card, create. Okay, and now you have this little components area where a service card lives.

I like the fact that it screenshots it for you, kind of shows you a representation there. And so now imagine that I’m in here, and actually I’m wondering if you can do it from here. I guess you can’t. What do these do?

Link copied blocks, copy paste styles, add to design library, nope. Okay, I’m just going to go up here and can you drag it in? No, you can’t drag. All right, can I click it in?

I can click it in and I’ve added two more. Now before I do that, I guess it doesn’t matter what order we do it in, but I need to program the component. And I’ve been thinking of how do I teach this concept to people? What is the easiest way to teach this concept to people?

And to kind of teach it to myself from my own brain, okay? So I’m gonna grab the service card, and you can see now that it’s a component, which means you can’t see anything inside it in the structure panel, unless I hit modify. Then I can see the structure panel again, because I’m modifying the component. We have styles, we have properties.

What we really are wanting to concern ourselves with right now is properties. And here’s how I would explain properties to people who don’t know what’s going on right now. If you are familiar with a custom field, like advanced custom fields, meta box custom fields, what do we know about those? We can create a custom field and we can assign it to a post or to a page or to a custom post type.

And then we can go to that post, we can go to that page, we can go to that custom post type, we can fill out that custom field and we can publish the page, the entity, whatever you want to call it, right? And then in a query loop, we can use dynamic data to pull, say, hey, we’re going to query all of our service cards. So imagine that this is a link to a service CPT. And you put custom fields on the service CPT itself.

And you would have like the name of the service, which would get dynamically pulled in here. You would get the, maybe you have a lead paragraph or a description. Service description, custom field on the custom post type, you would pull this in dynamically, OK? A lot of this is solved by custom fields, but there are various things that are not solved by custom fields that are solved by components.

But you need to think about component properties as custom fields. They’re just not assigned to a post or a page or a CPT. They’re assigned internally to the component itself and they follow the component wherever it may go. Where a custom field like ACF or MetaBox, they’re assigned to a post or a page, they don’t follow individual components all over the place, but a property follows the component anywhere the component happens to go.

So it’s a custom field that is mapped to the component itself, not to a post or page in the database, if that makes sense. And you tell me, does that make sense to you? Or do I need to find a different way to explain it? I can find a different way to explain it, okay?

But I think that makes the most sense. So what we wanna do when we create a component is create properties. You need properties to display the data of the component. Okay?

So what I’m gonna do is I’m gonna click this component, service card, we’re gonna modify the component, and I’m going to create a property. I need an image property for this. It’s just like when you’re doing custom fields. I need a text component for this.

I need a text component for this. So let’s do the image first. I’m going to create an image, and this is going to say, service card image. OK?

And I can choose whether it’s simple advanced. I don’t even know what this means. OK? I just know the concept of creating components.

I don’t know what controls this adds or doesn’t add. We’re just going to go with simple. The next thing I’m going to do is add another one. I’m going to add the text.

This text is going to say service card heading. Now, keep in mind, some of this data could get pulled from a custom field, but some of it may not get pulled from a custom field. We can maybe look at some differences here in just a second. I can also set a default for what this property is going to populate into the component when no content is actually provided for the component.

So I can say that this will be like a sample heading. And then I don’t even know what the placeholder does, so I’m not even going to worry about it right now. I’m going to create another property. This is going to be another text property, and this is going to be service card description and then the Default can just be this.

Okay, so you can you can have a little default action of website ipsum and That’s it for now. Okay, so I’ve got three properties now what I need to do Let’s hit update here and I don’t even know how to get out of this modification area Or even if I need to now I do I do need to stay in the modification. So now I’m going to go to image and let’s do the heading first. I think that’s going to be easier.

So the content, see when I click on this, it added this content area on my heading. And so I basically need to tell it that this is the service card heading and I need to make a connection between that div, that DOM element, it’s not a div, it’s a heading, that DOM element and the properties that I created. So I just made the connection right there. And notice that when I made that connection, what did it do?

It said, hey, here’s your default content that you asked for. Okay. So now what I’m going to do is I’m going to click this paragraph text right here, click content, and I’m going to say, this is the service card description. Connect.

I’m connecting these just like you would do with custom fields and dynamic data. Just like you would do with custom fields and dynamic data. Now I go to the image. I’m guessing that we take the URL out of here.

And I just don’t know how quickly wants me to connect the image now. Because it’s not here. And keep in mind, this is a beta. So, source.

But maybe somebody from Quickly who’s done this knows how to make that, how do I make the image connection? That’s what I want to do. Dynamic. Oh, right here, right here.

Look at this little icon. Service card image. Okay, I made the connection. And I don’t think there’s a default image.

So it’s going to just put in this placeholder thing right here. Okay, so guys, we’ve built a component. The component is done. Technically speaking, the component is done.

So now what does this allow us to do? Let’s preview this on the front end. Okay, good. So now what I want to do is I want to edit an instance of the component uniquely, because we don’t want, it doesn’t make any sense to have three service cards that say the exact same thing, right?

So what I need to do is I need to come in here and I need to customize my content. It appears that I can just click it and edit it, which is nice. So we’re just going to say service number one and then we need a description of service number one. So this is a description of service number one.

It’s about two lines long. Okay, great. Now I’m going to click this and I believe also I thought there was a way over here. Isn’t there, where’s the, there you go, right here.

So there’s another block panel. Notice it puts the custom fields for you right here for the, I keep calling them custom fields, but they’re, whatever they’re called. Forgot, attributes, I don’t know. But you can actually fill out a card from right here.

So service card number two. And so you can click into the canvas and edit, or you can edit right here. That’s a really nice feature. And then I’m just gonna copy this and say that this is service number two.

Okay, so now I’m gonna click this one. And again, I could just literally, I don’t even have to bother clicking on the actual elements. I can just fill out the custom fields, just like you would do on like a custom post type or whatever. So service card heading, this is gonna be service card number three.

And by the way, I’m not suggesting that this is how it should be done for service cards, right? We still have to talk about pulling data from a CPT as well. Yada, yada, yada. Okay.

We’re just looking at the functionality of components. So now I’m going to hit update and I’m going to go to the front end. And we see that we can get unique content into each component. I need to set an image for each one.

This is going to bring us back to Unsplash real quick. So we’re going, oh, that’s an Unsplash Plus. Thank you. All right.

So let’s do this one and let’s do, okay, whatever. Let’s go back here, grab this, set image, Bing, bing. Squoosh, they’re too big. Let’s come in here, resize.

My gosh, 10,000. No, we don’t want that much. 1920, okay. Can you, squoosh, squoosh, wake up, squoosh.

Squoosh is failing me. All right, 1920. What is it struggling with so much? Never struggles.

All right, resize 1920. Okay, thank you. Go back here, one, two, select, grab, select, select, select, update, preview. Okay, do you ever run into this problem with your cards where the aspect ratios of the image are not the same?

That happens to you, you can go to the image. I wonder if Quickly has a, now notice I did not even, I didn’t even put BIM classes on these. So that’s gonna be another interesting thing to look at. Technically with a component, I really shouldn’t have to, but we’re gonna figure this out.

So do they allow you to set aspect ratio? Because Brics does not allow you to set aspect ratio in the builder controls. And I’m just curious if we might be able to find that in here somewhere. Sizing, there it is.

Hey, look at that. Let’s do 16 by nine. Let’s hit update, save, refresh. Hey, okay.

So now, question number one. First of all, we’ve got unique content into all of these things. So here’s an example of what you cannot do in Oxygen or Bricks. Let’s say I wanted to add an icon above service number one right here.

Well, I’m modifying the component, okay? So in my content wrapper, maybe right above my heading I want to put a icon. So I don’t know where this is actually gonna put it let’s let’s hover over here is icon an option yes okay look how the icon magically appears in all of my cards why is the icon magically why did the icon just move in all of my cards do you think for a fucking second that you can do this in bricks or oxygen with unique content in every instance? The answer my friends is no, you can’t do it.

Okay. All right now what we need to do because I added an element we need to come up here to service card and we need to Let’s modify the component We need to create a new property and we’re gonna create an icon property and this is going to be called service card icon. All right, and then our default, sure, it can be a globe, whatever. All right, so now what we need to do is figure out how to connect that property.

So service card, and where do I go to, I’m gonna click on the icon itself. I gotta modify the, the only thing I get lost in is all these panels. Okay, icon right here, all properties, service card icon did that make the connection I don’t think that’s making the connection I need to figure out how to make the connection maybe I need to read let’s just refresh the builder just to make sure we’re not because I added new things maybe the builder doesn’t have the property available I don’t really know what’s going on modify component icon nope okay here’s service card icon right here I just don’t know how to, there’s no connect button like there was with the other things. So if you’re a quickly person, where do I make the connection for icons?

I would assume that it would be right there. Oh, wait, oh, it’s right here. Oh, this is the colors, that’s the icon color. Sorry, my fault.

So it’s this icon section right here this button service card icon now we have it mapped Okay, so now guys you have the ability Okay. Oh, well, that looks like a bug. No, no. No, I don’t know what null is.

Okay So we do have a default icon Anyway, I’m gonna go here. I Didn’t say it was going to be a bug free experience. It is a beta But now I can come down here and I can I can select what icons we’re gonna use for each service so this will be like this icon and It disappeared This will be this icon. I’ll see if they all disappear then maybe we can get them back I bet I know how we can get them back.

I bet I know what’s going on. I Don’t know why I was saying null on the front end, but I may know what’s going on here so let’s modify the component and we’re going to go into I need the icon size let’s just go into the icon and let’s set a size so let’s just do like text L there we go oh you didn’t know you can use text variables for icon sizes why yes my friend you can all right so do we have nulls. Okay, but this shows you like I added an HTML component or an HTML element and because I created a component, it showed up in all my iterations of that component. That is not possible in Bricks and Oxygen and that is a tremendously helpful thing.

Here’s another thing. Here’s another thing. And let’s just see if this works right. I didn’t BIMify this component, but technically if I add a class here, it should add this class in every instance of the component.

So this would be my service card double underscore heading. All right, now I updated that, save, refresh on the front end. And I’m just gonna do a little inspection here. H3, so this one does not have it.

This one doesn’t have it either. Do any of them have it? And the question would be why don’t they? Service card heading.

Oh, well, because I put it on the image. Well, you definitely don’t want to do that. Okay, service card heading. All right, service card heading.

I felt like, because I clicked on the, okay, whatever. That’s the other thing about Gutenberg. It’s like, you know, what are you clicking on? There it is, service card heading.

Look, it’s gonna be on all of them. Have you ever in Bricks created an element and put it in a grid and then you’re like, shit, I didn’t add my BIM classes. And then you either gotta delete all the cards, right? And then put it on the one you want, get the one you want correct and then duplicate it all.

Or you got like a chump, you gotta go one by one by one and add the class. Well if you create a component, it doesn’t matter what you forgot to do or you know did or didn’t do in the beginning when you made the component, because the component can be updated at any point in time and all instances of the component will receive the update. So you don’t have to get it perfectly right before you make all instances. And it doesn’t matter if I make a gazillion instances or two instances, I always have control over what’s happening in the component.

That’s the whole point of having a component. And that’s the tremendous power, right? If you don’t have component functionality and then you create something and there’s a gazillion instances of it and then you go, oh, we forgot an icon. We forgot to put an icon in the component.

Well, what are you gonna do now? You don’t have components. So good luck. Click on every instance manually of that element and add the thing that you forgot manually.

That’s what you’re gonna end up doing. With components, I don’t have to be careful. I don’t have to care about getting it perfectly right before we create a million instances, because all the instances are able to talk to the main component. Now, in bricks and oxygen, you say, well, there are global components in bricks and oxygen.

There are. Yeah, you can absolutely turn something in here. Let’s just do this. I’ve got it here.

I’ve got it right here. Let’s go take a look. This is what people were telling me the other day So we’re gonna add new and we’re gonna say non component That’s gonna be a good name for it. Let’s go edit with bricks So this is a whip together the exact same service card that we just created Okay, so here is we can do this much faster in bricks because we actually know what the interface is Doing.

All right grid gap. All right, we’re going to add a block. All right, we’re gonna call this a service card. I already have one.

Damn, my service card. All right, copy that, my service card. All right, we’re going to add, we’re gonna add our block block, block block, okay? So that’s gonna be our media wrapper.

We’re gonna put our media in there. Image, bam, choose, grab, insert, doesn’t really matter. Okay, in here, we’re gonna do our heading. We’re gonna, and then we’re gonna try to add the icon after the fact, right?

Bev, Bev is going to join the stream. In fact, where is Bev? Bev was here last week. Literally, Bev was here in the chat last week.

I need her back. I need you, Bev, to ask for an icon in just a minute, okay? All right, so we’re going to add a class to this. This is gonna be content wrapper, bam.

And I’m gonna intentionally not put a BIM class on here and not put a BIM class on here so we can see the problem More of the problem will appear so we’re going to go space M We’re going to apply that to all sides And then we’re going to go to our main block Element service card right here, and then we’re going to go to background. We’re going to go base Ultra light that’s fine. Okay. We did our rounded corners as well, right?

So border, border, radius, and we’re gonna go radius M, all sides, thank you. And we’re gonna go to layout, overflow is hidden. Perfect, we got rounded corners, save. We need a little content gap in here.

So row gap, content, content gap, okay. Works better when you can type. Now let’s view on the front end. Okay, so we just whipped up our little same exact thing that we’ve got going on.

Now what I’m gonna do, what you saw me do earlier, is duplicate. Actually, first, let’s turn it into a global component. By the way, guys, I’ll just be honest with you right now, I got no fucking clue what this does right here. I’ve tried to figure this out so many times, I don’t know what this thing does.

It doesn’t do anything that you would expect it to do. I’ll tell you that right now. If you want to create a global component, what you really need to do is hit save as template. Okay, so you hit save as template.

And then you have to call this a section, which is not a section, but you got to call it a section. We’re going to hit save. And now what you’re going to do is you’re going to insert a template and you’re going to choose that thing. So we’re going to say, and you can’t even choose it because you have to refresh the builder.

So we’re going to save, we’re going to refresh the builder. OK, and then we’re going to grab this, and we’re going to say service card. OK, save. And then this instance, for some reason, has, you know, caption type needs to be no caption.

And this is just going to show you the fuckery that is involved in this. And this is why this is not what’s going on in Quickly. It decided to show the caption. I can’t fix it.

Because I can’t access this. You know how I would have to fix that? I’ll show you how I would have to fix it. You have to go back to the magic area.

You got to go out of the builder and you got to go over here to Bricks templates. And you got to click on the service card that’s now a template, but it’s really a component, but it’s really not even a component. And so we’re going to hit edit with Bricks. So now, because I’m in a magic area that’s not within the context of my grid anymore, see this card looked fantastic when it was in a grid, but now it’s just slapped on a page in a magic area.

So it’s like, oh good, I get to edit a gigantic version of it. This is fun. So we’re going to make sure that it’s 100% width because that clearly didn’t get accounted for the first time. And then we’re going to, look, I don’t even, guys, let me go back what where is where’s the where is this why am I seeing this I am editing the guys that’s not here that’s not here I know where it’s coming from it’s coming from this caption type thing I’m gonna turn off the caption no caption save I don’t even know if it’s gonna go away honestly let’s go right here okay so we’re good on the front ends let’s refresh the builder.

Okay, it fixed itself. But look at the dance that I had to do. I had to go back to the magic area, I had to edit in the magic area, I had to come back. Okay, so now let’s duplicate this again.

And now you guys say, all right, you’ve got your global component. And then you say, Kevin, add that icon. I’m gonna show you guys, you’re gonna love this. You’re gonna love this.

Add the icon to this element, guys. Okay, back to the magic area. We’re gonna add an icon to it. So let’s add an icon.

Does anybody know what’s gonna happen? Can you predict the future? All right, so icon into here. Icon, icon, and what icon are we gonna use guys?

It doesn’t fucking matter because you’ll never be able to fix it again. You’ll never be able to decide to have a different one on a per card basis, so we don’t even really have to care. So there’s a, why isn’t it on the first one? Well the first one’s not actually the component.

The first one is the original thing that you built, but that’s not the component anymore. It would only happen if you actually duplicated the template, which in the builder now needs to be refreshed. Guys, this is an absolute mess. Okay, so there they are.

Now they’ve all got an icon. Now, let’s, that’s a little too big. It’s a little aggressive. Let’s go size, text, L.

Okay. Now it’s a little bit more manageable. So now let’s go refresh. Hey, okay, all right.

Today all, it all happened. It all, do you not know what’s, what’s, what’s already about to occur? Okay. Watch this.

Now you finally get to the point where you’re like, all right, cool. Let’s, let’s put in the You can’t you can’t now all the cards if you want them to stay as a component are Forced to have the same content There is no unique content situation happening here because there’s no way to map these to anything Right so but then you’re like well Kevin you could just unlink it. Okay. Let’s unlink it.

So let’s go How do we even forget how to unlink it you got it? Oh instead of instead of adding it as a template. You’ve got to add it from here. You’ve got to edit Sorry, there’s two magic areas So there’s the magic area on the back end and then there’s this magic area where you can add the same thing But not as a template even though it’s called a template.

Okay. All right. All right we’re gonna add it here and it did not add it into The grid let’s put it in the grid And it doesn’t have an image now see now I can edit it, right? So I get the editing going.

All right, so let’s choose this. And now, guys, I can actually have unique content, unique heading, all right? And then I can say unique text. All right, save.

Let’s go to the front end. Did I achieve what I wanted? Yes. Err.

Womp womp. No, no, no, no, no, no, no, no. Womp womp. We’ll just do all, just do all the sounds.

Just do all the sounds. You know why? Because the minute you were like, well, no, this isn’t the component version. This is just a thing that looks like it.

Well, now watch what I’m going to go back to the magic area where we were managing the component. Hey, Bev decided she doesn’t want the icon anymore. Okay, no problem, Bev. All right, let’s delete the icon.

Let’s hit save. Let’s go back to the front end. Why is that one still have an icon? Cause you unlinked it.

It doesn’t communicate with these anymore. You wanted unique content, you said. This is the problem. This is a disaster.

This is a nightmare scenario. So when, and the only people who don’t think that this is a disaster are the people who didn’t realize that a builder could give you the functionality, like component functionality like Webflow has given, like Quickly is giving you. Having this componentized functionality in Quickly is, I’ve said it, it’s an absolute game changer. It’s the biggest missing feature from Bricks and Oxygen.

And it is a high demand feature. When people actually start using components, just mark my words, mark my words. If Bricks offers it, if Oxygen offers it, if people start using quickly in mass, here’s exactly what’s going to happen. There will come a point, it won’t take very long, where people will basically say, how did we live without this?

That will be the general consensus of component functionality in page builders. Right now people are like, I can’t even imagine people using this. The consensus in a year will be, I can’t believe we built sites without this functionality. The consensus will completely flip from what it is right now, okay?

So you just mark my words, you can come back to the stream in a year. Now if Oxygen doesn’t add it, if Bricks doesn’t add it, if they haven’t added it in a year, we probably won’t be using them but it’s once people get their hands on component functionality and realize because I what I’ve shown you by the way with with the components and quickly that’s just scratching the absolute surface that’s the skin of the Apple my friends okay it goes way deeper way deeper so I’ll repeat it again just so there’s nobody lost or confused. Give people components for a year and then ask them and they will be like, I don’t know how I built sites without that. That’s it, that’s what the consensus is gonna be.

Okay, let me read some comments. By the way, oh, let’s just, here. Notice in quickly how everything that I wanted to do involving this component was done in the builder workflow. That is another critical piece for user experience.

This idea of magic areas, so generate press, putting you on blast. Oxygen, putting you on blast. Bricks, putting you on blast. What else?

Pretty much all of them, honestly, pretty much every builder. Even quickly has a back-end. Let me go to it. I’m pretty sure they have a magic area somewhere in here.

Let’s go to quickly, role editor settings, themer. What’s this thing? Yeah, okay. So this is a magic area right here.

Templates, parts, fragments. Magic, there’s a magic area. Doesn’t exist in the builder workflow. So people ask me, what would, what would the number one thing, Kevin, if you built a builder from scratch, what is the number one thing you would make sure you change?

No magic areas. I’ll put automatic CSS on blast. This is a magic area. It was way better at the time.

Here, let’s just talk about this. Automatic CSS was the first framework to give users a visual dashboard for manipulating the framework, period. Point blank. If I’m wrong, correct me if I’m wrong.

But I’m pretty sure we were the first ones. And so we didn’t have anything to go off of it was like, well, this is what I think would be the best experience. And if you measure this, this experience, compared to the experiences before with no visual dashboard, this fucking crushes, this is like, this was amazing. This was this made life so much easier, and still makes life very, very, very easy, right.

But we evolve over time and you know you don’t realize what could eventually be when you’re just you’re trying to make progress on things So we made progress, right? This is a magic area though and what i’ve decided the number one principle of web design workflow with page builders and wordpress do not create magic areas, so in bricks Let me go back where let me get out of here here. We go dashboard bricks Templates magic area. Oh breakdance.

That’s the other one breakdance. I’ll put them on blast because they’re fucking proud of their magic areas Right this idea that oh you’re going to go to this magic area over here to create global styles And there’s an other magic area to create you know Presets whatever they call them fuck all that don’t take me to a magic area to do anything. Magic areas are the bane of my existence. Every time I want to do something, it’s like, gotta leave the builder, gotta go somewhere else, gotta do things over here, then I gotta come back to the builder.

Ah shit, that didn’t work. Okay, go back to the magic area. This is not workflow. That’s not, flow is not anywhere in that term, okay?

So this templates area, fuck even custom fonts. Don’t make me come back here to do this shit. Notice when we were working in quickly, I never had to go to a magic area. Everything I wanted to do with the component was right here.

Is it the best layout possible? Is it the best UX? No, I think it could be dramatically improved. But at least, at least I didn’t have to go somewhere else to work on it.

Imagine, it was confusing enough right here just kind of figuring out where everything is, imagine if I’m hopping back and forth between the builder and some other magic area. Look what happened in bricks when they took me to a magic area. What the fuck is this? What is this?

I don’t want this as my user experience. I was designing cards in a grid. This is what I want to look at, but in a magic area it doesn’t have the context of this so in a magic area I would have to come set like a width of some sort so let’s just do 30 M or rim. It doesn’t even matter Okay, finally now I can look at it, but it’s touching the edge of the screen because it has no context for where it lives Because it’s a magic area.

It’s separate from the entire workflow, and I don’t want a width on this card I don’t want a width I want its width to be because I’m not going to I’m never going to add this card to a page without any other context. I don’t care what the width is but in order to edit it in the magic area it’s like I almost have to give it a width. I have to do something I don’t want to do just to see it render properly. This is a problem with magic areas.

So the number one principle is let people do everything that they need to do in the builder. Don’t make them go anywhere else. If you want a nail workflow, if you want the number one page building workflow, hands down without question, let them do everything that they need to do from right here. I just love the fact that I can switch pages in Bricks because coming from Oxygen, you can’t even do that.

You can’t even stay in the builder to switch pages. You got to go back to the WordPress admin go to the pages area click it so much Wasted time and energy and headaches Think here. I am with variables and utility I’m flying through page development and the only thing Holding me back is the fucking builder making me go back to WordPress back to a magic area back Oh, it gets such it’s it’s horrible after a while. You’re like, ah, not again, not again.

You hate every time you have to leave the canvas. You hate your life. So the principle I came up with is, just like another principle, you want another principle? Don’t add an element to a page, like an inner wrapper, that the user doesn’t have access to.

I mean, these are just basic, like, just basic rules of building a page builder, okay? Don’t violate these rules and you’ll create a good user experience. There’s so many, because there’s so many violations that I’ve run into that I’ve got a whole like, we could just do a whole document of them. Don’t do this, don’t do this, don’t do this, don’t do this.

Magic areas is at the top of the list. Adding wrappers that people don’t have access to, second on the list, okay? All right, is that enough of a rant? For WordPress theme codes components has got it all these builders beat Okay, I don’t know so I can go use theme people say try this try that and here’s the thing there’s a lot that goes into whether a builder is viable or not from my perspective as an agency owner as a framework developer, a lot of things, okay?

So let me just rattle them off the top of my head. I haven’t even, I haven’t written on this and I’m the kind of person, if you haven’t, yes, I’ve tried Framer, it’s an absolute fucking disaster. We can go look at Framer. We can go look at Framer in just a minute.

I’m not talking about Framer’s workflow, mind you. I’m talking about what Framer produces, okay? Look at the Dom disaster Dom. Absolutely.

The worst Dom I’ve ever seen in my life coming out of Framer. So I probably have a whole video plan. Anyway, I do these streams off the cuff. And my brain, my brain for organizing thoughts, I have to write things down.

So if I like write a whole article on something, then I can go talk about it really well. If I’ve never written an article, if my brain hasn’t physically written the ideas down, then you get what you get, okay? And that’s, you know, so I do try to pack a little bit of entertainment in here because of the fact that like, you know, I’m rambling half the time. So, that brings me to what the fuck were we just talking about in the first place?

You got me off track with the framework thing. Oh, as a framework developer, as an agency owner, what do I look, what makes a builder successful? Well, all the fundamentals, first of all. So, does it, and I did a whole video on this, like 20 different things the builder has to have, but then there’s more beyond that.

So, let’s start with the technical aspects. Go watch the video of like 20 features a page builder must have to like check the box. Be like, okay, good to go. That’s all on the technical side.

Now, what else does it have to have? It has to have a user base. So it can be the greatest builder that I’ve ever seen in my life. And if nobody uses it, nobody else uses it, that’s kind of a problem.

As a framework developer, it means I don’t have a community to market my product to. And don’t get me started on all the fucking you just want money thing. I’ve said it time and time again, if I just cared about money ACS would be for element or and I’ll be the end of the story ok obviously I care about the builders and their community so that’s not the only thing I’m looking for but at the same time I have never been able to walk into the bank and try to have as many times as I’ve tried to be like hey I got 12 views on the video can that pay my mortgage No, turns out views don’t pay the mortgage. No, no, that’s only money actually pays bills.

Okay, so if there’s a community around a builder and there’s like 12 people in it, that’s tough, okay, that’s tough. So, and then I also, by the way, if there’s 12 people in the community, don’t know what the longevity of the builder is. Why would I switch to this builder when it’s like, well, how is that developer eating, right? If that developer can’t pay his bills, how long is this page builder gonna be around?

So a very small community around a builder, it’s like, ah, that’s kind of scary. There’s a lot of risk there, it’s a lot of risk. So it’s gotta have a community around it. It also has to have other third-party developers.

It has to have content creators. I look for a lot of different things that signal, hey, this thing has legs, all right? Quickly is gaining legs right now. Quickly is gaining legs.

And content creators are a big part of it. If you get content creators, which by the way, that’s what fucking irked me so bad about Lewis from Oxygen, not Lewis from Quickly, Lewis from Oxygen, and that infamous live stream, the fact that he tried to say that content creators didn’t have anything to do with the success of Oxygen, give me the biggest fucking break you’ve ever given me. Like, that’s just dumb. And he knows it’s dumb, which is why he’s trying to recruit content creators to create content for Breakdance.

He knows how dumb that statement was. It is mind-blowingly dumb. Mind-blowingly dumb. A product has to have content creators.

That’s how it gets legs. That’s why Framer, let’s talk about Framer again. Man, this just goes in all different directions, doesn’t it? Framer’s getting legs quickly because of their affiliate program.

Here’s where I’ll call out content creators. Because I don’t do this shit. Okay, this stream, the channel, I don’t have sponsors, I don’t run ads, half my videos don’t even have the ads turned on. Like have you ever noticed that you try to watch a video on this channel and half the time there’s no ads?

And if there is an ad, it’s at the beginning and it’s skippable, there’s never an ad. Not, find me one video on this channel that has an ad in the content. You won’t, you can’t find it, I turn them all off. I don’t want to interrupt users and viewers with ads.

I don’t give a fuck about ad money. Like, ad money, it’s like, it’s chump shit, okay? I’d rather have people be able to watch the videos than me make another penny on an ad. So, none of that is going on.

What you’ll see is these tools come out and they create these like great affiliate programs And they try to go they go do you know how many emails I get will you please do a video for us do a video? For us we’ll make you an affiliate do a video for us do a video for us make it They get all of these content creators into these affiliate programs, and then they Instruct them on how to go create they actually will give you instructions on the type of content to create and so on and so forth. So, Framer has come out of nowhere because of, they’ve amassed an army of content creators who are backed by affiliate commissions to go tell you how great this tool is. And the only reason they’re telling you this tool is great is because of the affiliate commissions.

And I will call out content creators on that shit all day long. The reason you can come to this channel and know that what you’re hearing is fact is because I don’t care about affiliate commissions. I don’t care about advertisers or anything else. So I can get up and tell you, Framer is absolute dog shit.

The UX, yeah, it’s a, okay, it’s like a Figma-like experience that you end up with an actual functional webpage. Fantastic concept, execution, dog shit the Dom is terrible the Dom is the worst Dom I’ve ever seen in my life go use framer to assemble a page go look at the Dom it is a nightmare like prison time ok felonious behavior as we say here so the fact that a creator can get up there and be like this is the greatest thing since sliced bread you know what they should be saying is wow there’s a massive quality issue with the code output. And by the way, it does come from the fact that once again, we’re trying to create a tool that everybody can use. Come on in.

Hey, everybody’s welcome. You don’t have to know what the fuck you’re doing. Come on in and use the tool. And yes, visually you can get to what looks like a web page pretty easily and quickly.

However, there’s no semantic tags to speak of, there’s sections inside of sections, there’s no, it is just an absolute nightmare of a DOM. No scalability, no maintainability, nothing that matters is actually being done. Can you do those things? Probably, probably, I don’t know.

But the other thing with Framer, I mean, let’s just use it real quick. Framer. com. I used it for like five minutes just to look at the DOM and I was like, it’s exactly what I thought it was.

I don’t know what to do here. Let’s go here. Okay, good, no, we’re not doing AI. New project.

The problem with experiences like this is, okay, right off the bat we see the problem. All right, let me double double click this. All right, so 1366, okay. Now I can do it.

See, this all I like. I can get on board with all, it’s like a Figma-like experience, that’s great. Quit asking me to start with AI, like that is bothersome. All right, here’s pages over here.

I need insert layout. Frame, image, rows, columns, grid. Wrong, wrong, it’s wrong, immediately it’s wrong. Okay, stop this, every builder does this.

I don’t, this is for pure beginners. They think that this is friendly. And what’s friendly to a beginner makes no sense to somebody that knows what they’re doing. A grid and columns and rows are not different elements.

Full stop. These are not different elements. Okay, let’s go in to here. All right, delete.

I don’t care. Get rid of all of this. All right, let’s add a section. A section is an element.

Why is it an element? Because it has a special semantic HTML tag called section. It has an inner container. Okay.

This inner container, I want it to be a grid. Now it’s a grid. I want it to be a row. Now it’s a row.

I want to be a column. Now it’s a column. You don’t need separate elements. And why are you giving me separate elements?

Because presumably if I use the columns element, how do I even use it? I got to draw it on the page. Fantastic. That’s trying to turn a development thing into a design experience.

You’re gonna force people to use, learn, learn two different workflows now. Size, width, fixed. Do I want it to be fixed? No, no, I’m, let’s delete, let’s delete.

Can I add a section? Does a section do anything? There is no section. There is no section.

Okay, so let’s add a frame. All right, this is fun. What have I just done? I’m trying to add a section in Bricks.

Let’s review. Let’s close some things. We don’t need all this. Okay.

So in Bricks, how fast can I add a section? Done. Done, okay. Now let’s go into Framer.

What did I have to do? Oh, you got to draw a cute little box on the screen. Here’s your little box. I can’t even get it going.

All right, my cute little box. It has a background color. Why does it have a background color? I didn’t ask for a background color, but yeah, here it is.

Okay, let’s set it to white. Am I doing that at the class level, the ID level? I don’t see any classes. I don’t see the things that I need.

Where are my tools my real tools okay? I see a bunch of inputs, but where are the the tools just to get started right like classes? I got how do I I don’t want to just style everything independently. I already know that so where I’m looking for a way to Globally style things don’t think that’s possible Where is my inner container?

How do I create a gutter? How do I I can’t even start to assemble a page because I don’t know what they want me to do. But let me go to layout, let me go to rows. You get to draw rows, okay?

Now, and that is stuck there, okay? I can’t, I can’t, okay, no, it does move. Alright, I’m gonna center it. Now, I don’t even know why we’re off on this tangent.

Look, I can change the fucking direction. Why is it called two separate things if it can just be both of them. And it can also be a grid. Why are there three options up here?

This is very confusing. Very, very confusing. Okay, what is it called in the structure panel? Where is my structure panel?

Layers. Oh no, don’t do this to me. Okay, all right. So I have columns, frame, guys, there is no such thing as a frame in web design, okay?

Like what, this should be a section, right? And then, can I actually make it a section? Where on here? Here we go, tag, section, section, awesome.

Okay, woo, columns. So really what I need is an inner container. I don’t want columns. Like what if I just want another frame?

I guess I have to just add a blank one like this. All right, and then see like in bricks, it would have positioned itself, would have auto-centered itself. It would have done a, now I got to figure out, okay, okay. But I know heights are not what we want to be using here.

I don’t want fixed sizes, but it’s trying to give me fixed sizes by default It’s not once asked me for like my padding It’s just it’s such a foreign like What are we trying to do here? It also has the fill color again, which I don’t I don’t know why it has the fill color All right. Let’s add some text. Here we go.

Look at how the text is not positioned in the in the container. So heading How do I make it a heading? Did I have an option of adding a heading? No, I just have text.

Okay, so where, why wouldn’t like, don’t you think the semantic tag for like what kind of heading is this or what kind of text is this should be like towards the top. Now I got to scroll all the way down here and find it down there. And now it changed to the H2, but the style didn’t change. I mean, what?

Oh, I guess all text and framer looks the same. Probably got to go to some magic area to set up all of your styles. And look, it’s just floating in the box. It doesn’t behave like web design behaves.

It behaves like a drag and drop design tool. Okay, why? So anybody can use it. So you can, yeah, you can position stuff anywhere.

I don’t really care. I want to see the front end. Now keep in mind I changed this to a section tag would a beginner know to change that? No, they would leave it as a div or whatever it was.

So I’m going to update this and we’re going to go to, oh play? Is that okay? Is that what we’re doing here? We play our pages now?

Okay, this is and this is still in an iframe of some sort. So I don’t want to see how can I get to the front end? Well, this is a fun game. This link, okay.

Inspect. Good, good, good. Okay, let’s just see. Is it worse than Elementor?

Wow, we have a div. Come on, Framer can’t even get the basics right. We have a div with the ID of main. Why is that not like that?

So there’s no main tag. You’re not given a main tag. Just, you don’t need one of those. So no main tag whatsoever, just a div with an ID of main.

We’re gonna open that up and we’re gonna see a, what is this? Is it a, it’s not a section, it’s just a div. I’m gonna open that up. Hey, you got another div.

Whoa, this one’s got a min height of 100% on it. We’re gonna open that div, then we get another div. Oh, this has the name of section, but it’s not an actual section, just has the div tag. Then we’re gonna open that up, and here’s our inner apparently, and then we’re gonna open that up and we get another div.

Well, guys, that’s not a, that’s a heading. Why is it a div? Well, let’s just open that up, see what’s inside there, and finally I get to an H4. Man, it’s just, yeah, like what?

This is terrible, absolutely terrible. And so the work that we would have to do, I mean, think about this. How do I even get back to the editor? I don’t even know how to get back to the editor.

All right, let’s go back here. So anytime I wanna add a section, I gotta, what? Draw it, then I gotta come down here and I gotta change this tag manually. Because there’s no section element, right?

Insert, well, here’s sections, but they’re all pre-done. Yeah, there’s no actual section element. I don’t know if you can create your own elements but like the fundamentals of web design are not here. Section, container, div.

It breaks, gives you a block which is nice but you don’t even need a block. Section has to be there. Container that goes in the section has to be there. Div has to be there.

Framework doesn’t feel that you need any of those things. They feel you should draw sections onto the page instead of sections being, what is this? The fact that I can just do that, broken, broken. Because this is not how, it’s gonna start positioning everything absolute on the back end.

It’s no scalability, it’s just, it’s a nightmare. No, it’s not gonna work, it’s not gonna work. We’re getting out of this. So once again, content creators though, I mean, go watch a video on Framer.

They think it’s the greatest thing since sliced bread. This is what the future of web design is gonna be. Not anytime soon, I’ll tell you that right now, but I’m glad you’re getting your commissions on the beginners that you’re luring to your channel. Hey, come on beginners, you just drag stuff around, drop it wherever it goes, hit publish, use the AI feature.

Now, they’re making money off the backs of people who have no idea what’s going on, no idea what an experience should be like. It’s all for affiliate commissions. That’s the only reason why people are talking good about Framer is affiliate commissions. And that’s why I gotta call content creators out because that doesn’t serve anybody.

People actually sell framer sites to real clients seriously. And I don’t know if they are or not. So I don’t claim to know. I mean, it’s a it’s a very new tool.

Who needs sections when you have the AI feature? The framer sites are very non accessible to even their own white. Yeah, for sure. Because the DOM is a nightmare.

You can’t have accessibility with a with a nightmare of a DOM like it relies it relies on a clean DOM. I’m reading Max’s comment here. Works on the designer level and assumes markup to emulate the visual positioning and add some groupings with rows and columns. It’s also an abstraction to react.

How long do we have to watch Framer shit? No more, trust me, no more. We’re not revisiting Framer any time soon. Literally out of nowhere, just woke up one day, Flux Academy, most videos are like Webflow, what?

Framer all the way. Yeah, yeah, I mean, because if you don’t have anything nice to say. Okay. So back to quickly components, we got to do, we’re going to jump back to more Q&A.

What time is it here? 1. 30. Okay.

30 more minutes. 30 more minutes. I’ll give you, then I got to get out of here. I got, I got actual work to do.

We can do questions about quickly components. We can do questions about anything that you want to ask questions about. We can go into business now. We can go into anything, anything you want.

It’s a free for all now. I do really want my own builder. Like I really, really want my own builder. The problem is I don’t wanna do the work that’s required to get my own builder.

It’s such a tough situation to be in. That’s why I’m using builders that are, you know, they’re very close to what they should be and it’s just like, all right, you got to put up with some quirks. And there will never be a perfect builder. Even if I made my own builder, it wouldn’t be perfect to a lot of people.

For sure. For sure. But I think what we could do is, you know, there are some things that I think everybody with like two brain cells to rub together could come to the same conclusion on you know like the magic area thing does anybody enjoy the fact that they have to leave the builder canvas to go do things and in a different area does anybody actually enjoy that or could we all just come to an agreement that like no if I could do it in the builder canvas it should be done in the builder canvas pretty like sensical and sensible um do you check blood pressure after the live streams i should maybe we’ll just go into i mean we’re we’re deep enough into the stream let’s just go into uh let’s just grab a generate uh install here well that’s not the screen that we wanted we want generate. Maybe we just look at some, maybe look at some, maybe just sneak peek, maybe a little bit more on the sneak peek side of things.

Let me get rid of this tab over here, this tab over here. Let me make sure we’re still screen sharing. It appears that we are. Ruben says, I love the magic area, but I want it in the builder.

So you really don’t want the magic area. Okay, here’s generate blocks, I’m just gonna we’ll rag on them for a second. And then we’ll just show the better stuff. So it’s like this global styles area.

This is this is a magic area. Okay, let’s go into an actual page, edit. This site actually has, this is the one, actually admin bar’s here. Shout out to admin bar.

This is the install that I actually rebuilt his homepage on. Go to the front end. So this is all with generate, press, generate blocks and automatic CSS. So basically I was like, you know what, I need a real site to like build so I can make sure nothing breaks and everything’s actually working.

So this is actually on, yeah, on generate. So I think it was in the main testing page. And actually I don’t know if I unhooked we need to make sure does this still save because this is actually hooked into VS code I think some of these installs I have it hooked into VS code and some of them I actually have the plug-in installed let’s just see what installed this I don’t even know of a fast way to check. Okay, I think this is hooked in.

Okay, first things first, I’m just gonna leave this, I’m just gonna select this container, okay? And I’m just gonna leave the page like it is. What do you guys notice? What is different about this?

If you’re a generate, I don’t know if there’s any generate users here. There’s a very important difference. Something has been added that is not usually there. It’s actually usually buried somewhere else.

That’s all the hint I give. We’re looking for the first Easter egg. And this is actually not just a GeneratePress GenerateBlocks edition. This is actually Gutenberg in general.

We have made Gutenberg, and it’s something I talk about all the time. We have brought something very important to Gutenberg. Anybody know? Anybody know?

You still have over 100 people here. I hate the delay on the on the chat. Okay, nobody knows. I guess they can’t find it.

All right, so this right here. This is critical. Oh, there it is. Max said it.

Max said it. Okay. Yeah, so now in Gutenberg, when you have automatic CSS installed, you are going to have a class first workflow in Gutenberg, my friends. You can now, it’s not truly class first, because you can’t edit these classes.

That’s the downside of Gutenberg. I mean, Gutenberg, hey, who needs classes, right? Who needs them? Now, this is not the only thing.

So let me take this away. And actually, hero pad, I don’t wanna break this page. Let’s go to a different page. So let’s go to our about page as an example.

And then let’s make sure this is full width full width. Okay, so basically it would work like this You add a container and then you add the inner section for the container and then I need to get my structure panel back All right, and then when you change this to a section Which is annoying this is annoying There’s no section element and generate but I change this to a section You’re gonna see that it gets acss’s default section padding which is pretty good so then we’re going to update here we’re going to add a heading if you didn’t add anything let me let me add a headline uh this is going to be hero section right here and then we can add a and generate this is uh you know we’re knocking if we’re knocking people right uh this is my lead paragraph. You actually have to add the heading element and then up here change it to a paragraph. And it still says it’s a heading over here in the structure panel but it’s actually not.

It’s a little bit longer. Okay, so then we’re gonna hit update and we’re just gonna see what we have on the page which again you got a preview and I hate this preview link so I’m just gonna take this away. Okay, so yeah we got what we want now. Question is, can we use things like utility classes?

So here’s our class first workflow up here, so I’m going to grab the outer. The what amounts to the section. OK and check this out. I can just write classes obviously.

So like BG base ultra dark or let me choose a different family so you can actually see it. So BG white will give us white BG base. This ultra light there you go. OK and we have light, whatever.

All right, so we got a lot of things that we can choose from. Or, or, or, I can right click. Now I have all of my, the whole cheat sheet basically. And, and, and I have live preview, right?

Oh, that’s nice. And, and, I can actually drag this now. And I can actually resize this now. I can put this wherever I want.

It can just hang out and then as I add things you’re gonna see them get added right here right and then I wanted to go over maybe change the let’s see how about some some spacing let’s go with how about some section padding maybe we can change that on the fly you get a little preview here of what your spacing is going to look like. Let’s make this small. It’s going to add it up there. And I actually liked the fact that if I click it again, it’s actually going to remove it from up there.

So you don’t actually have to worry about like copying, deleting, all this other stuff. So you can just add these here. So we can hit save. Um, let’s right click that again.

Notice it remembers, it remembers where I wanted my panel to be. So wherever you put it, it’s going to remember where you wanted it. Um, so I can do text, let’s do base dark, and then I can select my heading and I can do text, base dark on this one. I can hit update and I can go over here.

That’s not the page I’m previewing. Hey look at that! So I got smaller section padding, changed my text color, changed my background color. I can also go over here if I wanted to do this with instead of utility classes, so let’s take out pad section S and text base dark, something like that.

I can go over into our panels here. So padding on this container right here, I can do my right click. There’s my spaces right there. So I don’t even have to write the variables.

Okay, so this is nice. I also believe I have variable expansion. Yep, I believe I do. I also believe I have, let’s test it out, 60 CTR.

Oh, I got the, I got the rim converter in here also. That’s shaping up guys, it’s shaping up. I don’t think I have to show anything else. Can you dock the panel?

I want to be able to dock the panel or it’s not dockable yet. But I do want to make it dock. The challenge is we’re in Gutenberg, right? So it’s like if somebody’s using generate, they may want to dock it.

Like you can’t dock it here, then it would cover this up or maybe it would have to move everything else out of the way. There’s a lot of logistics to docking. There’s not a lot of logistics to this, right? So it’s just another thing that we have to continue to put more thought into.

But I mean, the fact that we’re here with just the ability to like, you know, quickly, quickly, quickly on the fly add utility classes, and you don’t even have to know, you know, what they are, right, it’s like you can search for whatever you want. You have the cheat sheet, anybody that’s used Plaster before, right? This contextual functionality, it’s really, really helpful, especially to beginners, especially when you’re learning the framework. Because like I said, you can always just go up here and type what you need.

If you know the names of the classes, you can just go ahead and type them. But having the cheat sheet available where you can just come in and bam, it’s like it’s there. Then I click it again, it removes it, that kind of thing. So much easier.

When you’re down here, the fact that like, you know, exactly what you would probably want comes up automatically when you right click the input field, really, really, really speeds up workflow. And then, you know, if you are just typing, right, the variable expansion and that kind of stuff, really, really, really good for workflow. But, I mean, think about this, like, without automatic CSS, you don’t even have this classes box here. Like, much less everything else, right?

You don’t even have this. They don’t even give you this in Gutenberg. It’s buried under the advanced panel down here. So anything that you wanna do with classes is an absolute nightmare.

You install automatic CSS, class first workflow in Gutenberg is there by default. It’s very nice, very nice. The only thing that’s missing, which you would have to have a quickly kind of thing to add is if I wanna make a custom class, like my custom section. So what do I do now?

Because I can’t, none of these inputs apply styles to this class. So what I have to do if I want to use BIM, this is the real challenge, like you can’t use BIM really with generate unless you’re okay with magic areas. Because now I’ve got to go the customizer. And then, oh there’s another fantastic thing about Gutenberg.

So where was I? This page gone. Okay, here it is. So here’s the section with my custom section.

So now I’m going to go add my custom section. And then I can do stuff to it. Let me, it doesn’t have any other styles, right? Okay.

So I’m going to hit update. I’m gonna do like backgrounds, color, var action. Okay. So there’s that, right?

I’m gonna hit publish. We’re gonna go back into the builder. I’m gonna refresh. Do you guys notice the problem here?

When one, I gotta go to a magic area to write CSS. That’s a problem. So we’ve already talked about magic areas sucking. Okay.

So now because of that, I’m flipping back and forth between tabs. But what are you noticing? What are you noticing? Guys, do you do you realize, you know, when I talk about Gutenberg being a trash can, this is the WordPress customizer.

This is not the generate customizer. This is not the bricks customizer. This, this is the WordPress customizer. This is WordPress’s native editing environment.

They don’t fucking talk to each other. The styles that you write here don’t show up in Gutenberg by default. You have to add a function to your themes, functions. php file to make the customizer styles show up in the Gutenberg canvas.

They don’t even talk to each other. The two native areas of WordPress don’t talk to each other. What is going on? It’s insanity, it’s insanity.

But yeah, so if you want to use a BEM workflow, you’ve got to add your custom class to an element, then you’ve got to go to a separate area and basically write CSS. So if you don’t know how to write CSS, you’re SOL, as they say. GeneratePress is not the site builder CSS is in block themes is integrated since, I don’t know what that means. GeneratePress is just adding blocks to Gutenberg.

This is the native Gutenberg environment. So the fact, if I added a native Gutenberg block, like it’s still not gonna pick up stuff that I do in the customizer. That’s a big problem. Have you ever had to audit Bev’s magic area?

Listen, listen, listen, you’re gonna get us, you’re gonna get us canceled. You’re gonna get this is a, this is a family. It’s not a family stream, but what magic area is not talking to other magic areas? How dare you WordPress correct okay that’s a good sneak peek that’s all we need to look at in terms of generate for generate users I mean I feel like this is an absolute game changer I am curious to see what the generates community is going to what their initial reaction because here’s what we’re gonna do we’re gonna I’m gonna record a video building a page in generate with generate press or generate blocks Pro and automatic CSS with the class first Workflow and the right-click context menus and the variable expansion and then I’m just gonna just leave it I’m just gonna drop it right there into the generate press Community and we’ll see what happens.

I Only care about one magic area and it ain’t on WordPress. Oh gosh, we definitely need some t-shirts that allude to some things. Okay, are there any generate users in the house? I know we’ve got like four or five people beta testing generate all of this is dropping on August 1st by the way and then quickly is next so imagine we’re in quickly and you have the cheat sheet this actually shouldn’t be here we got to remove this this is a this is why we don’t have official integration with quickly yet because we got to go fix some things for some quickly users.

But yeah, imagine, you know, you got your right click context menu. Oh, actually, actually, I just don’t think we have live preview. Let me see. No, it’s still not gonna see this.

This is the kind of stuff you run into. I wonder though, if design, layout, where’s spacing? See, I’m confused quickly on the primary tab, typography versus design typography. Is this the same thing?

It appears to be the same thing. I guess there’s more than one way to get there. I don’t know. But it’s a little confusing.

Okay, let’s go to spacing, sizing, height, height, aspect ratio. I don’t know why we don’t have the aspect. Why don’t we have the search bar and quickly? This is why we don’t support quickly yet 2.

7. But I was gonna try to add, where’s padding? Okay. I wonder if, yeah, it doesn’t work yet.

And I’m guessing variable expansion doesn’t work yet. Okay, that’s why that’s next. That’s 2. 7, not 2.

6. But for quickly users, imagine you’ve got the context menus, you’ve got the variable expansion, the calc expansion, you’ve got, yeah, just game changing for workflow. I’m a subscriber to GenerateBlocks and I own GeneratePress. I use GenBlocks, but looking for FSC style alternative to gen press like frost man I mean heard about frost okay all right that’s probably it for today it’s been fun August 1st mark your calendar that’s when ACS s 2.

6 is dropping fantastic update with a lot of goodies I’m gonna have a lot of videos streaming one after another, right after 2. 6 drops. Then it’s on to 2. 7 with quickly, official quickly integration.

That’s when things will get really fun for the quickly community. And then I can’t really reveal much after that, but we are, everybody knows we’re marching to 3. 0 and 3. 0 is going to be a completely new workflow experience.

And that’s what excites me the most. All right, I want to thank everybody for showing up today. Three hours in the books. You guys are rock stars.

Hopefully you got value out of this today. And I will be back next Wednesday. It’s every Wednesday, 11 a. m.

Eastern. I’ll be right here. Peace, love you guys. See you again very soon.

See you again very soon. See you again very soon.