WDD LIVE 064: Beginner Web Design Q&A PART 2 + Demos – No Question is “Dumb” or Too Basic!

What’s up, everybody?

Man, I’m rushing.

I’m rushing to get this going.

Got a lot of stuff going on today.

Let me go to, let’s bring up the chat, comments and reactions.

Say hi when you arrive.

Let me know what’s good today.

Okay.

All right.

Got Rob in the house.

Klaus, Reto, Justin, Sylvia, Mark.

Good to see you.

Derek, got a lot of familiar faces, which is fantastic.

We’ll see what our viewership is like today.

We’ve got a last minute announcement.

This is a holiday week in the U.S.

So a lot of people are, I think a lot of people in the U.S. are a little bit checked out this week.

My birthday, my birthday is in two days, two days.

It is in alignment with a national holiday, which is not fantastic, you know, if you like celebrating your birthday.

But it is what it is.

It’s all good.

What’s up?

Garth, Manny, Patrick.

Two Patricks.

One right after the other.

D-123 in the house.

Grant’s in the house.

Joel, Cyprian from Romania.

Here for the next hour until football begins.

Okay.

That’s probably, yeah, that’s the other thing we have to contend with, right?

Big football season right now for y’all.

As we say, soccer.

Okay.

No, I’ve talked about this before.

Actually, I think the word football.

Dude, it always does this.

It always does this.

Look at that delay.

Tremendous delay, too.

This is the problem with Arc.

Arc keeps tabs open in the background, even though they’re not actually listed in the tabs area.

And you never realize that those tabs are still open until they start auto-playing things in the background.

Okay.

Let’s go and just get started.

So here’s what we’re doing today with the agenda.

Last week, we had over 200 concurrent live viewers for a beginner web design Q&A.

Essentially, an open invitation to ask whatever questions you want.

There’s no dumb questions.

There’s no questions that are too basic.

And, you know, I committed to answering them in rapid fire fashion, which, you know, I do.

I do try to cover the topic as much as possible.

So my rapid fire is a little bit different from other people’s rapid fire.

But nevertheless, I tried to go question, question, question, question, and just pack in as much value as possible.

And we still ran out of time.

I did that for two straight hours, and there were still just dozens of questions that were left unanswered.

So what I’m doing today is a 2.0 version of that stream, which means you need to get your questions locked and loaded.

The way you do that is you put hashtag Q or hashtag question, and then you ask your question in the chat.

That way I can search and I can filter and we can go right through the list of questions.

You can start putting those in right now.

Go ahead and start putting any questions you have in right now.

If you’re not sure, if you’re like, is this intermediate?

Is this beginner?

Just ask it and I’ll decide as we go.

Okay.

MDN says, in two days, it will be one more year since, or one year since I bought ACSS LTD.

It was someone’s birthday.

Yes, absolutely.

Is it great having a public holiday on your birthday every year in the States?

No.

No, it’s not.

Everywhere you want to go to celebrate is absolutely packed.

Glasses are really dirty.

Everywhere you want to go is absolutely packed.

There’s fireworks going off everywhere into the night.

Nobody cares about you.

Okay.

They just, they just care about the birth of the country.

That’s, that’s the life that I, that I live.

Okay.

Let’s see.

Okay.

Good.

Questions are rolling in.

We will get to those.

Hey, I see a couple though that don’t have the hashtag.

If they don’t have the hashtag, the minute I filter to questions, they’re going to get lost.

So make sure you are asking with the hashtag.

Chris says, ahoy from Jacksonville, Florida.

You’re a little close to the Gators down there, Florida.

I’m talking about the football team, Florida Gators.

You know, you know how we feel about them up here in, up here in Georgia.

Okay.

But no, I do.

I like Jacksonville.

I like any, anywhere in Florida, actually.

Florida is a tremendous state.

Am I the only one that still says pound sign?

No, no.

I do say pound sign also.

But, you know, the younger crowd, I think, you know, knows what a hashtag is.

I don’t know.

I don’t know.

Chris says no Gator fan here.

Okay.

Good stuff.

Good stuff.

All right.

Well, let’s, let’s just, they’re, they’re rolling in.

So let’s go ahead and start answering.

All right.

We’re going to filter here.

Is there an updated start here resource, i.e.

Bricks setup, suggested tools, plugins.

Let’s go ahead and share my screen.

So I don’t forget to do that.

Suggested tools, plugins, and settings, et cetera, for someone starting out, following your courses, which are great, by the way.

I’m going to do an updated stack video, but there’s not significant changes to the stack, really.

So you can still go back and watch that stack video from a year or two ago.

And it’s still fairly accurate.

Obviously the builder has changed.

Obviously automatic CSS has changed dramatically with 3.0.

So, but if you’re watching ACSS 101, then you’re going to get all the information you need on the ACSS side of things.

That’s an ongoing series over on the automatic CSS and frames channel.

Highly, highly, highly recommend you watch that.

Everybody should watch that.

It’s just really good information on workflow.

But yeah, it’s not, you know, tremendously different.

It’s not tremendously different.

Okay.

How can I disable the automatic Gutenberg CSS style sheet?

I don’t use Gutenberg.

Similar question for the inline CSS, automatic core inline CSS.

Two ACSS questions right off the bat.

Oh, I do want to show you guys something as well.

I don’t know why we’re in here.

Okay.

So in automatic CSS, you’re going to go to options.

You’re going to go to Gutenberg and you’re going to see some toggles.

Load styles in the block editor.

Use block editor for page building.

You can generate a color palette where you can replace the Gutenberg color palette with ACSS colors.

You can implement the class first workflow, which moves the classes.

Box to the top of every block editor screen.

You can control the page block width and the post block width.

And then we have page width post types.

There’s documentation on all of this stuff.

It would take too long to explain.

But essentially what you’re going to want to do is you’re going to want to toggle these first two toggles off.

And then essentially you will have the default Gutenberg editor.

If you enable this toggle, you’re able to use utility classes in Gutenberg and see them live preview.

All of that.

All of that will work.

And then if you use block editor for page building, then you get the full experience of pages become full width.

You can do literal page building in Gutenberg with ACSS.

So this is the area you’re going to want to explore.

Now, keep in mind, and there is a long thread, many long threads that I’ve written.

Gutenberg, you know, when I say it is a dumpster fire, when I say it is a trash can, when I say it, it is all of those things.

Okay.

And for very good reason.

It’s not, I’m not even talking about the UX.

I’m not even talking, I’m talking about fundamental programming and development, just chaos, absolute chaos.

For example, if you have WS form installed or any, any plugin that adds a block to Gutenberg that is not on their V3 API, it will render in a non-iframe format.

If you don’t have any of those plugins installed, it will render in an iframe.

It will apply default reset styling, depending on those different environments.

It will make so many decisions about how things should be done.

And it makes decisions that it then overrides itself, its own decisions.

If you go in, there’s just tremendous conflict in the default CSS that underlines Gutenberg.

There’s static values everywhere for things.

There’s crazy rules.

There’s way more specificity than should be used.

It is an absolute trash can.

Like under the hood, it is an absolute nightmare.

So like, let’s know ifs, ands, or buts.

It is tremendously difficult to work with that environment.

And so, you know, we’ve had to put in so many different adjustments and tweaks and because we’ll get it working perfectly.

And some user will be like, well, I threw in this block and everything went to shit.

And it’s like, well, the minute they threw in that block, Gutenberg started making all these different decisions about how things should be rendered.

It’s just an absolute nightmare.

So, yes.

This is the safest approach right now.

If you don’t use Gutenberg all that much, you can load styles in block editor.

Don’t use block editor for page building.

The generate color palette, replace color palette, I leave those off because it’s useless.

There’s no organization in the Gutenberg color swatch picker.

It literally just puts every color, every shade, every transparency in there as a swatch with no labels, no organization functionality, no nothing.

It’s the most ridiculous thing I’ve ever seen in my life.

It’s just, yeah, you know, don’t, you know, try to stay out of Gutenberg.

It’s just kind of like, why are you using it that much?

Okay.

Hopefully that answers that question.

If you modify a frames class, what are the bounds of that modification and how would you backtrack to the original?

I’ll try to answer that question.

Let me see.

What version of automatic CSS is this, by the way?

Let me save.

I don’t even know what.

I just pulled up a random development environment, which is probably not the best thing to do.

But we’ll see.

Let’s go to options, bricks, because I just noticed something.

Yeah, let’s stack the elements panel.

Let’s pro mode for add elements.

Let’s hide redundant bricks components.

Okay, save.

Let’s see if we can.

So I was like, this is a little different than I’ve been used to lately.

Okay, there we go.

That’s a bit better.

All right.

Let’s go to add a frame of any kind here.

So let’s do a simple one.

We don’t want to go too crazy.

Let’s try Hero Victor.

Okay.

What is going on with you?

Oh, I’ve already edited it on this site, because that’s the one we were using last time.

In last week’s, when I was absolutely positioning things for somebody’s question.

So let’s not use that one.

Let’s go to footer Lima.

Okay.

So footer Lima is a fairly simple frame.

It’s got a class for Lima.

If you open it up, it’s got an inner.

It’s got a bottom, which is this legal kind of row down here.

In the inner, it’s got this content wrapper for your heading and this call to action.

And then it’s got the nav stuff over on the right-hand side.

I guess the footer is not that great to use, because there’s only going to be one instance of it.

That’s not really going to answer your question, is it?

Content Section Papa.

Okay.

Let’s put this one in.

Let’s throw a photo in so that we can see something happening.

Okay.

Great.

All right.

So let’s take this one for example.

FR Content Section Papa.

You’ve got an intro in here.

Intro Alpha.

You’ve got the inner, which is a media wrapper, media content wrapper for your content.

So you’re using this all over the website.

Maybe you use this like, you know, multiple times.

Pretend that those are on other pages, right?

They’re not.

Obviously, you wouldn’t do this on the same page, but you’ve used these all over the place.

It really depends.

Like, okay.

So maybe you decide you want the gap to be bigger.

Okay.

So if you come in here and activate the class on the inner where the gap is and you make it bigger, like times two.

So now I have a bigger gap.

They’re all going to get that update, which is nice, right?

Now, you know that that’s where that’s going to happen because of the use of BIM.

That’s only going to happen on the inner that is inside of Content Section Papa.

So the names of, this is the great thing about BIM.

Like the names of the classes inform you as to where those changes are going to take place.

So every instance of this exact frame of this exact little inner content thing, that’s the only area that this is going to apply to.

Now, some people will say, let me put this back to grid gap.

Some people will say that they only want to affect this one, right?

I don’t want to affect all of them.

I just want to affect this one right here.

Well, if that’s the case, then turn off the class and then right click, add your grid gap and do times two.

And so now I have my bigger gap on this one, but all of my other ones are left alone because now I’m styling at the ID level and IDs are unique to every single instance.

So you have the power to control one-off instances by themselves, but you also have the power to affect all of them globally.

The difference is, are you styling the class or are you styling the ID, right?

Does that answer your question, Terrence?

If it doesn’t, you can ask again in a different way or maybe give me a specific example and I’m happy to revisit, but I think that that’s what you were talking about.

Not sure.

Okay.

Let me know.

Grant says, as a beginner, do I need frames for Figma?

Why does everyone keep talking about it asking for it?

You do need it.

If you are going to follow like a truly professional workflow, Figma is a design tool, right?

Let me open, let me stop sharing my screen for a second.

Because I don’t know what Figma is going to open and there are some secret, there are some secret things that you’re not allowed to see in terms of what’s being developed and worked on.

And we need to make sure that we have a blank slate here.

Create new design file that is safe to share.

Okay.

Great.

So in Figma, right?

I can go frame and we can go like 1920, something like this.

Let’s not go that big.

Let’s go 1440.

Okay.

Let’s make it manageable.

And I can just start like with my layouts in here, like playing with design.

I can play with design.

I don’t have to worry about classes, making a mess of my database, content, CPTs, the da, da, da, da, da, da, da.

I don’t have to worry about any of that stuff.

I get to freely play with design, wireframing, content, try this, try that, get feedback from the client, do this, do that differently, make all these changes.

Without worrying about any technical development work, which is really, really, really nice.

This is how the design process in web design should work.

Okay.

You shouldn’t rush to your development environment to start piecing things together on a new project.

A new project should ideally start in a design tool where first you’re going to map out the architecture of the website.

Like we talked about last week, using Figma’s mind mapping tool is a really good way to do that.

And then you’re going to start wireframing.

The wireframing should be done in Figma.

The problem is, um, and by the way, you charge for the wireframes.

So, you know, there’s a way for you to make more money doing a process that’s more professional.

And so you, you start doing the wireframes, but then you realize, man, this wireframing from scratch takes a long time.

It’d be way better if I just had a library of frames, uh, that we could use to wireframe and then you could rapidly wireframe.

And so that’s what frames allows you to do rapidly wireframe.

And, um, then you’re putting in content, things like that.

And then you move into the design phase, which is you go from low fidelity to high fidelity.

Okay.

That needs to be done in Figma also should be done in Figma also.

And so you need, uh, a way to do that, like with a framework.

And so how do you do that?

Well, ACSS tokens, which are embedded in, uh, frames for Figma.

So it’s like two products in one.

Essentially we built automatic CSS for Figma.

And so you’re able to design in Figma using automatic CSS, which then maps over to the development side of things.

You use the same frames, the same settings, and you build rapidly once all the design is done, but you’re, and you can watch my video on frame.

I have a few videos on frames for Figma, why it’s important, why it matters, how it works.

I would recommend watching those obviously.

Uh, but this is a professional workflow.

A professional workflow is you use a design tool for design and planning.

You use a development tool for development.

Okay.

And that’s the cleanest, most efficient way to go from point A to point D.

Okay.

Then you launch the website and everything’s nice and clean.

Uh, it’s just, that’s the best workflow.

So we built the tools that enable that workflow.

And if you follow that workflow, I’ve written numerous blog posts on this.

You should also be increasing the amount of your projects, a significant amount.

Okay.

Because right now most people are running to a development tool and they’re only charging for the concept of web design.

They’re not charging for wireframes.

Well, they’re not charging for, um, discovery, which should be the first thing you charge for.

So you should charge for discovery.

Then you should charge for wireframing.

Then you should charge for content and content planning.

Then you should charge for design.

Then you should charge for development, right?

This is how that’s the workflow that’s really required to do the job really well.

And so that’s how it should be built out as well.

You follow that process.

You build for the process.

You make more money.

Your clients get a better result.

Everybody’s happy.

Okay.

That’s the quick and dirty of it.

All right.

Let’s see.

Uh, don’t know if you still want to do a video about it.

Why do we put the width of 50 characters in width in bricks instead of max width?

Great question.

Now, media, thank you for reminding me.

Uh, I did want to cover that.

Okay.

Let’s go to clear this out.

So get all these instances gone.

Put a section in, drop a, uh, let’s do written.

No, let’s do text.

Okay.

We were talking about this last, last week.

Let’s go to website, if some.com grab all of this.

Okay.

And come back and put that in.

Uh, let’s actually do, let’s do rich text.

Okay.

Bang, bang, bang, bang, bang.

It doesn’t actually matter that this is content or anything like that.

It could be an image.

It could be, it could be a lot of things.

Okay.

We’re going to talk about width versus max width.

That’s really what the question is about.

So when you go into layout and you go to sizing, you’re going to see width and you’re going to see max width.

Okay.

Okay.

In actual web design, if you were writing your own CSS, if you were coding from scratch, if you were whatever, you would learn that max width is the thing you should most often adjust.

Okay.

Uh, block elements are a hundred percent width by default.

Right.

So you would want to put a max width on them.

And here’s why.

Let’s say 50 characters.

Okay.

So the max width is 50 characters, meaning that block can’t get bigger than 50 characters wide.

However, it is allowed to get smaller because I’m not saying what the width should be.

I’m saying what the max width should be, which means the width is able to flow wherever it needs to flow within that 50 character limit.

So we can be smaller than 50 characters, but it can’t be bigger because max width is a max.

Okay.

Makes sense.

All right.

We’re all on the same page.

Now, if I take this and I say 50 characters in the width field, what am I saying?

I am telling that block to explicitly be 50 characters unless you’re in bricks because these page builders, they try to help you as a beginner.

They’re like, ah, beginners aren’t going to know the difference between width and max width.

See, in a real coding environment, if you tell that block to be 50 characters and you try to make the screen smaller, guess what that block’s going to do?

It’s going to be like, I can’t get smaller.

I’m not allowed to.

You told me to be 50 characters.

I’m going to be 50 characters.

I don’t care what the screen’s doing.

And it’ll actually cause overflow.

Right.

Which is why everybody who actually writes CSS by hand would put a max width of 50 characters and not worry about the width because then it would be responsive.

It would shrink.

It’s allowed to shrink.

Whereas if you say width 50 characters, it technically is not allowed to shrink.

It’s not allowed to shrink.

And so what bricks did is bricks said, beginners are not going to know that.

So what we’ll do is we will put a max width of a hundred percent on every element known to man.

Every element that they could possibly add to a website, we’ll put a max width of a hundred percent because we know they’re going to use the width field.

And what this does is it saves users from overflow.

But what it also does is for advanced users, it just confuses us because we’re like, that’s not how things are done.

That’s not how things have been done for decades.

That’s backwards.

And it actually, from a logic standpoint, doesn’t actually make a lot of sense because like one, you’re using the properties wrong.

Okay.

You’re using them the way they weren’t intended to be used.

But you’re, you’re, you’re, it’s hard for me to explain the logic because I’m dyslexic, but I wrote it out.

And when I write it out, it’s actually, you know, it makes sense.

Okay.

I’ll find the writeup and link to it somewhere, probably in one of the communities.

You can go read my writeup on why it’s backwards, but it’s not inconsequential.

Here’s the important thing.

So in automatic CSS, we try to allow people to go to typography, for example, and set a default max width on their text.

So if I went to all text and I went to max width, I can set a max width here.

Or you could do it on M text or L text.

You can change the max width sizes, whatever.

And this is because you never want to be in this situation where your text stretches all the way across the screen.

It’s bad.

Right?

So let’s pretend that I was able to put a cap of 50 characters on my text.

It would look like this.

Now people are like, but that doesn’t look good.

Cause you have a lot of white space over here.

Exactly.

Exactly.

You might, this is alerting you to like, we can’t.

Okay.

Here is, this is what’s funny to me.

It’s like, people are like, but that’s a new problem.

It’s not.

You actually started with a problem.

The problem you started with is you put a paragraph, you put multi paragraphs of text in a gigantic container.

That was your first problem.

Okay.

Most people solve this problem.

Let me bring in a frame by doing actual design techniques.

This is what normally solves the problem.

So like, where’s that section we just had content section, Papa.

So I bring this in, look at this.

Is this a problem?

No, it’s not.

Why is this not a problem?

I didn’t do anything to this text.

I didn’t set a max or anything like that.

So why is this not a problem?

Because it has media next to it.

It has something of visual interest next to it, which does the job of containing the content.

Nothing is containing the content here.

So what we would say is never let content.

The principle is never let paragraph content like this get beyond like 60 or 70 characters wide because it’s horrible for readability.

There’s been like major studies on this, like horrible for readability.

And it just looks bad.

It looks terrible.

This looks very amateur.

And so if we have a rule that we’re never going to allow content to be bigger than 60 or 70 characters or whatever we want it to be, let’s say 60, right?

When this happens, that’s not the fault of the limit.

That’s not the fault of the character limit.

That’s a fault of your layout.

It’s alerting you to like, yes, dog, that doesn’t look good.

It didn’t look good before we did this.

It’s showing you you need to do something else with this layout.

Okay.

And it’s respecting the principle that content should never get wider than that limit.

Okay.

So we can’t do this.

The point I was getting at, we can’t actually do this in bricks because this requires max width.

And if the minute, the minute we go down here and we override, or we put a value of something in the max width property, we’re overriding the hundred percent that’s there.

Now you can fix this by going over here and putting a hundred percent width on certain things, but there are numerous edge cases where this causes overflow and actually breaks layouts.

And so there is no workaround.

I’ve literally tried every single one.

There is no workaround to allow the user to set a default global max width on text that doesn’t break things because of bricks’s decision to do things backwards and save users.

Okay.

Save beginners.

All right.

By doing this, this little backwards trick that they do.

Setting every element to a max width of a hundred percent should not be done by the page builder.

This is not something that should happen.

There’s an open discussion in the bricks forum about this, that this is, if they want to do it, fine.

Put it behind a feature flag, put it behind a, like I should opt in and say, I’m a beginner.

I don’t know what the fuck I’m doing.

You can please save me in these certain situations, but I understand that there may be consequences.

Right.

And then for everybody that knows what max width and width is, you can turn that shit off because it just causes problems.

And it’s backwards.

That’s what should happen.

That’s the explanation.

Let me run to the chat real quick out of the questions and just see if that’s, if people are, are we confused by this?

Did I explain it?

Okay.

Okay.

Um, all right.

People talking about word camp.

That’s, it’s always a good side discussion.

Um, okay.

Nobody has any comments on that particularly.

So we’ll move on.

All right.

Next question.

Let’s see.

Uh, that one was answered.

Okay.

That one was answered.

Uh, okay.

Good, good, good.

Good.

Under what circumstances would you recommend?

It is beneficial to set default sections to content grid in ACSS.

Uh, there is no scenario other than you want to be cutting edge.

Uh, you want to be bleeding edge of like modern web design.

And you understand content grid really well and what it’s capable of doing.

And you’re going to take full advantage of what it offers.

Um, that’s it.

There’s, there’s no other reason why you would enable that by, by default.

The setting they’re talking about is right here.

So if I go to layout and I go to content grid, it is default sections to content grid right here, which fundamentally changes the structure of sections.

So we go from using flex with a centered inner container to using grid with a content grid layout system that allows you to do a lot of fun and cool things that are not really super possible with the traditional flex model, but it does require you to understand.

Now you can go to the documentation on content grid and you can read it.

You can watch my videos on content grid, and then you can play with content grid.

It is a new concept.

Okay.

Not many people are talking about it.

Not many people are doing it.

No other framework has it.

Um, if you leave this switch off, you can still use content grid.

You just have to use it with a utility class instead of defaulting sections to content grid.

Right.

Um, so yes, and I’ve shown some cool things that content grid does that is not easy to do, uh, or fun to do in the traditional model.

It’s really, really, really powerful.

Um, especially when you get into inheriting content grid, cause it, it actually content grid can be applied to children and grandchildren and do cool things with that.

Especially in Gutenberg, when you are limited with your canvas and your tools, content grid can do things that, um, the normal layout system is not able to achieve in that regard, like breaking content out of its containers.

Um, so yes, it’s very powerful, but you have to understand what it’s doing or it’s just going to be confusing, which is why it’s off by default.

Okay.

Let’s see.

Uh, apart from the, okay.

Um, do you have any good practice for sticky header, but with a top bar, which itself should scroll out of the viewport in bricks?

Yeah.

Bricks doesn’t really, isn’t really set up for doing that.

So you have to manually configure the sticky.

So you bring in a header with two rows and then you have to write the CSS to make the, um, second row stick and leave the first row alone.

Bricks is sticky header control effectively just targets the entire header template.

So yeah, you gotta, you gotta do that a little bit manually.

I can probably do a tutorial video on it.

It’s probably a little bit out of the scope of this, uh, live stream because we’d spend a little too much time on it.

We would not get to other questions, but I can do a video on it.

Uh, you said it’s better to make a video instead of blogs to promote web design business.

What videos do you have in mind?

Um, man, there’s so many concepts.

It’s like pick your poison, come up with something creative, but in general, you need something that appeals to business owners.

You need something that appeal without being general business advice.

Cause there’s a gazillion channels on that.

It’s gotta be something that shows off your skills at the exact same time, allows you to demonstrate how you work and the kind of work that you do and the kind of work that you’re capable of.

Uh, which reminds me I needed to, I’m going to forget this if we don’t do this otherwise.

So I’m starting the new UI style guide for frames.

Pad.

Oh, it’s a spacing alpha.

I think.

Um, so I’m going to show you this and, and, uh, in the inner circle, if you’re an inner circle person and I would highly recommend, uh, just, just join for this.

Okay.

I started a series in the inner circle called learn JavaScript with Kevin.

And I really do.

I’m starting to move into the territory of, I don’t think you need to master a JavaScript framework like, um, react or, or, uh, Svelte or view or anything like this.

If you’re going to build like software applications and stuff, that would probably, you know, be a necessity, but if you’re going to do just web design stuff in general, I do think you should know the basics of JavaScript.

Okay.

Um, and I’ve made that decision on my own, which is why I’m learning it and why I’m doing the series called learn JavaScript with Kevin.

Again, I don’t think you need to be an expert in JavaScript, but you have to understand basic things because part of our job does end up requiring JavaScript to certain degrees.

Okay.

Um, like I showed, let’s get rid of this and this, cause we’re done with those questions.

This layout right here, um, which, you know, has a code block that I have to activate.

And then I have to, uh, activate this loop to tell it what media gallery to pull from.

Um, but we can look at the, oh, actually I can get a link right here.

We can look at the live version of it.

Okay.

Okay.

This, this, this layout right here, um, requires JavaScript.

Okay.

It doesn’t look like it does, but it does.

And I did a tutorial on, on the JavaScript that’s required for this and how to do it and how to write it from scratch, because you will run into scenarios like this where JavaScript is required.

And you know, it’s good if you can just solve it on your own.

And so I’m doing this learn JavaScript with Kevin series, which I think is really fantastic, but I wanted to show you this layout I was working on.

Um, because this is going to be the next video in the series.

It’s called spacing alpha.

Let’s go to preview.

Let’s go to this on the front end.

Okay.

So this is what I, this is what I built.

So we have essentially two different sections that visualize.

This is for the UI style guide for automatic CSS.

Visualize the values of our spacing variables and our section spacing variables.

And it gives you the, it gives you the tokens over here.

It gives you the visual over here of how much space each of these things is.

And then it actually gives you the computed pixel value of the rendering of that space.

Right.

Um, which is cool.

And, and what I did is I did this all with JavaScript essentially.

So if we look at the template, let’s go look at the template.

You’re going to see that, um, these are essentially blank boxes.

There’s nothing in here other than, uh, the header.

Okay.

And then the rows and the row, and I’m using some unique concepts here.

Uh, let’s go ahead and let’s, let’s get rid of this.

I just wanted to preview this for you guys real quick.

Let’s go to the front end and inspect.

Um, okay.

So if you look at like even this concept in itself, I don’t, a lot of people don’t even know that you can do this.

Don’t even know that this is valid HTML.

Um, but you’re able to create custom HTML elements, like just by defining them, like just, just literally in, you can do this in bricks.

Okay.

So if you look over here, this row, I use a custom tag called spacing group row.

And then in here, and, and what this is, is a way to have, like, they all have a, a custom class on them, but they all have this other identifier, which is their custom HTML tag name.

Uh, plus they have data attributes on them.

And all this stuff helps tremendously.

I’ve found when, uh, writing your JavaScript for various reasons.

Um, but if you notice, like I have a blank row, a blank label wrapper, a blank value wrapper, and a blank spacer wrapper.

And what the JavaScript does is it actually loops through an extensions, uh, list, which is X, S, S, M, L, XL, XXL.

It appends whatever I want it to append, which for this table is space.

And for this table is section space.

It then takes that, um, generated token and uses it to set the width of these visual elements.

Then it measures the width of these visual elements and outputs that in the actual value field.

And then what it does beyond that is it sits there and watches and it waits to see if the width of these things change.

Because then you can go in and you can go to spacing and you can go to section spacing and you can start doing this.

And not only will, I mean, the, the visual thing growing just happens by default because I’m changing the value of the spacing variable.

But the calculation itself is changing in real time because it’s watching that block.

And it’s like, Hey, if that block changes, I’m going to quickly recalculate things.

And I’m going to show the new calculation on the front end.

And so that’s just an aspect of like the visual, the UI style guide that was, is well beyond the 1.0 version of the style guide.

And you know, this stuff is not possible without JavaScript.

So, um, I do think it’s fun to learn it.

Like when you start to get the hang of it, it actually is really, really, really fun, uh, to learn JavaScript.

So this is going to be the next video.

I’m going to build this from scratch and I’m going to, I do it like all my other videos.

Like if you want to learn JavaScript in like plain language and just like, Hey, here’s what you need to know.

Here’s the order you need to learn it in and to solve these problems.

Here’s what everything does.

Here’s what everything means.

Um, the point of this is it’s not a like JavaScript course and it’s not a, let’s make it say hello world.

And, and that kind of shit.

Like I, I get a real challenge and then we solve the real challenge together and I walk you step-by-step through how it’s done.

So really, really, really valuable stuff that’s going down in the inner circle.

Uh, but yeah, that’s, that’s, that’s where that is.

Okay.

Let’s get back to answering questions.

Let’s get out of here before I break something.

Okay.

And let’s get back into where did my, I lost my, uh, here we go.

My dev environment that we were in.

Okay.

Let’s go back to pages and let’s edit the homepage.

All right.

Next question.

Can you break the query loop to place other content in the middle of the loop?

Oh, oh, good question.

Really good question.

Um, so if you are, if you know PHP and, um, that side of things really well, it’s, it’s best to create a generic, like a custom loop, I would say.

But there is a workaround if you don’t know how to do that.

The, there is a downside to the workaround though.

Okay.

Um, let’s go to, okay.

Maybe, maybe the best way to do this is, um, I, cause I don’t want to build something from scratch.

Uh, let’s look at this for a second.

Okay.

Okay.

Uh, this might work.

Let’s go to edit with bricks.

I think if we look at this, it’s been a while since I built this, uh, profile card, I would imagine.

Yeah.

There’s an attribute data team member, data team category.

If we look at the actual Dom here.

So let’s look at me as an example.

So here’s my card and you can see it right here.

Profile card.

And it says the team category is leadership.

Uh, the data team member is Kevin Geary.

Okay.

So I’m outputting everybody’s name in the code as an attribute.

And I’m outputting the category that they’re in into the code as an attribute.

Okay.

And so what this would allow you to do as an example is, uh, let’s take, uh, Kristoff, right?

Okay.

Let’s take Kristoff data team member is our, is our attribute.

Okay.

Let’s go back into our builder.

Now the problem is bricks doesn’t render this properly in the builder.

So you’re not going to be able to see it in the builder.

Let’s go to team grid.

I can just affect this team grid right here.

Okay.

I wish the inspector would stay up.

I think it was called data team member.

Yeah.

Data team member.

Okay.

All right.

Let’s go back in.

So we’re going to say data team member equals Kristoff sans.

Let’s make this case insensitive.

Okay.

And let’s just try order minus one.

And let’s see if we can get that to output.

Okay.

Uh, am I already, I might already be ordering myself, uh, minus one.

Let’s do minus a hundred and just see.

Uh, it also does help if you get the syntax, right?

Like colons and CSS.

Am I called those things are, turns out they’re, they’re fairly important.

All right.

Why is that?

Why is Kristoff not moving?

Let’s see.

See, now we have to inspect, figure out what’s going on.

Uh, team.

Oh, because data team category, if they’re in the development, they’re already ordered minus 30.

So now we have a conflicting rule here.

Okay.

Cause there was already order stuff being applied.

What I’m going to do is fast forward here for you.

The downside to this is that when I’m going to select different elements, now these aren’t actually clickable.

Okay.

But if they were clickable, it’s, it’s, it’s actually good that they’re not clickable because if they’re not clickable, you can do this.

If they are clickable, it changes the order of the keyboard focus.

So remember order, the order property is only visual.

It doesn’t change the actual underlying code base.

So selecting elements with the keyboard goes in the order of where they are in the DOM.

So naturally you would think that it would get Kevin first and then Mateo and then Tommy and then Wadji and you would go in an order.

But if you visually change the order of these things to plug something into the middle or put it at the beginning, it’ll actually focus on the true first item first and not the visual first item, which screws up.

That’s not accessible.

So that breaks accessibility.

So the rule is if they’re not clickable, you can get away with this order thing.

If they are clickable, actually, I think even, even just reading it might break accessibility in some cases.

So you have to be careful with it, which goes back to my original thing, which was you’re going to need to write a custom loop.

Okay.

So that injects something every certain amount of instances because the loop actually generates the underlying code.

We don’t want to visually change the order of things unless we absolutely have to.

You want to change the underlying code, which would require a custom loop.

So I know that’s the bad answer because now you’ve got to go learn about PHP and writing custom loops and all this other stuff.

But that is the correct answer.

In some cases, you can get away with the order property visually like here, but I’ve got other rules that are in place.

And if I go too far into this, I’ve got to undo it.

This is a live site.

This is not going to be a great situation.

So I don’t want to do that.

And at the end of the day, it’s not the correct way to do it because of those accessibility issues that we just discussed.

Okay.

But that is the theory of how you could potentially do that.

But you shouldn’t.

You really shouldn’t.

All right.

Let’s go to, will Control-C, Control-V, copy and paste ever be able to work properly with ACSS?

Bricks hijacks this currently, but it’s the number one thing that slows me down.

Right now, after decades of muscle memory, it is annoying.

It is a really good point.

I don’t think so.

So just to explain to everybody, if you have the builder open like this and you want to paste a value in this input or any input or whatever, maybe like box shadow, go to like additional styling, go to box shadows.

Here we go.

Right here.

I want to get rid of this.

I want to Control-V and I want to see it’s not pasting anything. that’s on my keyboard.

Nothing.

Why?

Why is this happening?

Well, Bricks, being the builder, needs to hijack those controls to do stuff like this.

Control, Command-C, Command-V, copy, duplicate things.

And so nothing else that lives in the builder is able to use.

And I actually think this is a bad decision on Bricks’ part.

I understand why they did it.

But the browser itself uses Command-C and Command-C.

These are operating system shortcuts.

Bricks decided, well, we’re going to hijack those and use them for ourselves, for our own thing.

What they should have done is created a new shortcut for this, like Shift-Command-C, Shift-Command-V, whatever, like a Bricks-specific shortcut for copying and pasting, because then that would have left the browser commands alone, which means that other applications running can use those operating system shortcuts.

Right?

But Bricks decided, no, they’re not going to do that.

They’re going to hijack the operating system shortcuts for themselves, and thus nobody else can use them for anything.

That is just, that’s, got to talk to Bricks about that.

But they’re not going to change it now, because then everybody has to learn new shortcuts and, you know, it’s an unwinnable fight.

It’s just one of those things that probably shouldn’t have been done initially like that in the first place.

And it’s annoying.

You’re right.

It is annoying.

But, however, you can still go to Box Shadows, right-click, and hit Paste, and that will work, for sure.

It’s just that the keyboard shortcut has been hijacked by Bricks.

And there’s nothing we can do about it that I know of, and that my team knows of.

So, we’re SOL in that regard, as they say.

Can you break, okay, we did that one.

What’s the difference between basic text and rich text?

Fantastic question.

Let’s go add text, basic text, rich text, okay.

Rich text, there we go.

Let’s put them in a container, so they’re actually, and let’s bring that container up here.

I don’t know why we had two of them.

Man, those two things look very similar, don’t they?

I can understand why a beginner would be like, what the hell?

That doesn’t seem to, like, why are there two?

Okay, let’s go to the front end.

So, out of the box, there is a difference.

If we right-click.

So, the first thing is the text element.

You can see Brixie text basic.

Look at this.

It’s a div.

Now, I actually don’t think this should be the case, but we’ll talk about this.

The second one is the rich text.

And notice it has a paragraph inside of it where the basic does not.

So, with the basic, you get no paragraph out of the box.

You get a dit, which shouldn’t be the case.

I don’t, that’s dumb.

This should be a paragraph out of the box.

Now, let’s go look at the next thing.

So, we’re going to go back in here, and we are going to change that to a paragraph.

So, we’re going to specifically say that that should be a paragraph.

Now, is there a difference?

Yes, there’s still a difference.

There’s still multiple differences, in fact.

So, if I inspect this, now, Brixie text basic is just a P with content inside of it.

And the rich text is still a P that is wrapped in a div.

So, one difference is it is, the rich text is always wrapped in a div.

And you have the P inside of it, right?

Whereas this P is not wrapped in a div.

This div is the container that contains both of those things.

Why is there, hold on.

Let me go, let me go here.

Why is there that extra thing?

Rich text.

Oh, because it’s not in the container.

Okay, save.

We need them to both be in the same.

Then it will make more visual sense.

Okay.

So, let’s inspect this.

There we go.

All right.

So, now, you can see them side by side.

So, here’s the container, because I know a lot of people are like, they have no idea how to read what we’re looking at right now.

So, I’m trying to make it as less confusing as possible.

This is the container.

I open the container.

I have a P and a div, right?

The div is the rich text element.

It puts the P inside of itself, right?

It renders a div.

It puts the paragraph inside of the div.

So, there is a fundamental difference in the code output.

Now, why does that matter?

Well, watch this.

We’re going to go grab this lorem ipsum.

So, this is automatic CSS.

Ipsum.

Short.

Short.

Okay.

Guess not.

Let’s go to website ipsum.

All right.

Let’s grab this.

I want all these paragraphs.

Let’s go back in to the builder and bang.

Let’s put them in.

Then, let’s put all those same exact paragraphs in there.

And let’s space these things out so you can see them.

Oh, none of my things are working.

Okay.

Save.

Let’s refresh.

Okay.

It actually doesn’t know that we’ve saved.

Okay.

I don’t know what Bricks is up to.

I will say 1.9.9, guys.

1.9 has some issues.

1.9.9 has some issues.

Let’s refresh the whole builder and see if we can get back to some sort of functional working thing here.

Okay.

Do I have right click now?

I have right click now.

Do I have ipsum again?

I still don’t have that.

Okay.

We have to investigate that.

All right.

So, you see a big difference, don’t you?

All right.

Let’s go to the front end.

You should see a huge difference.

One of these things accepts multiple paragraphs.

The other does not.

Right.

So, if we look in here, what is going on?

Because I pasted multiple paragraphs and it just puts it as just a giant chunk of text.

Okay.

Whereas the rich text element, look how it is processed, all of those paragraphs.

It’s actually generated the paragraphs properly.

Okay.

So, big, big, big difference.

Which means that if you’re going to go use the basic text element, let’s go down to one.

Oh, I can’t even go down to.

Yeah, I can.

I can go down to one paragraph.

Let’s find it.

Let’s just cut it off right there.

Get rid of this.

Okay.

You have to essentially say that if you’re going to use basic text, it’s got to be a single paragraph.

That’s it.

Okay.

Now, why would you do that?

Why would you do that?

Well, there are a lot of instances where you only want one paragraph ever.

That’s all you ever want.

For example, if I was building a card.

Okay.

You just got to kind of know the situation and choose the right tool for the situation.

So, let’s bring in feature section Yankee here.

And look at right here.

This card is using a basic text element.

Why?

We don’t want to support multiple paragraph.

This is not a situation where you should ever put multiple paragraphs in.

The card is designed to have one paragraph and one paragraph only.

And so, the basic text element actually helps us in this regard.

It naturally limits our ability to put multiple paragraphs where they shouldn’t be.

Okay.

So, it’s actually really good to use it here.

And you change the tag to a P and it outputs a nice clean P.

But anything that needs rich text, you would want to use the rich text element because there’s another part of the rich text element.

See, even things that seem so simple, just they need a lot of different explanations.

Look what you can also do in rich text.

All right.

You can create lists.

Okay.

You can put images.

You can float images.

You can’t do that in any other part of the page builder.

Not easily anyway.

Not predictably.

Anything up here.

You can put block quotes in.

You can do a lot of different stuff.

And you can put multiple instances of like, this is bold and this is not bold.

You can flow multiple paragraphs.

If you use columns, right?

You can span them across.

Oh, that’s call span.

We need call count two.

Look how you can, like, that’s not one paragraph here, one paragraph over here.

And like a grid, that’s like a one block of paragraphs being flowed naturally into multiple columns.

Okay.

Rich text, really, really, really good for this.

There’s a lot of things that rich text can do that basic text can’t.

But there are some situations where you actually want basic text because you want to limit what can be done in that situation.

So it’s two viable tools, knowing when to use one and when to use the other, essentially.

And understanding how they behave and their differences is important.

Not just winging it and be like, well, I guess maybe rich text here.

You want to know exactly what it’s doing, which is why we’re doing these live streams, which is why we’re doing these videos.

Okay.

What?

Please react, recreate your Geary.co blog post template in Bricks.

Geary.co.

Well, you don’t need to recreate it.

It’s a frame.

You can just add it as a frame.

But again, that would probably, it’s too long to spend.

We’re not going to get to people’s questions if we spend too much time.

What platform do you use for icons and images for commercial use in your projects?

Icons.

I use huge icons.

Really like this library a lot.

Yeah.

It’s super simple, clean.

They have duotone.

They have two-tone.

They’re all super consistent.

The sizing is all really well done.

Solids.

Stroke sharp.

Solid sharp.

They got a lot of variations.

Really extensive library.

You can almost always find, like, I mean, it’s going to take a while to load.

You can just keep going and keep going.

You can go for days.

It’s, I, you would call it huge, I think.

Okay.

All right.

Sorry.

That’s my dad.

My one dad joke for the day.

Soccer or BJJ, which you prefer?

Wait, this is not even a question.

Soccer, I’m going to offend all the Europeans on here, but soccer, soccer’s, it’s not that exciting.

I mean, maybe a little bit.

There’s some times.

There’s some times.

Everybody’s getting riled up.

There’s some times where it’s exciting.

American football is much more, it’s much more versus, much more, there’s so much more to it.

So much more to it.

And then BJJ is, now, if you don’t know anything about jujitsu, don’t watch jujitsu.

Like, it’s not going to be exciting to watch jujitsu.

Just like, you know, football is not all that exciting.

Either, either version is not all that exciting.

If you don’t know the sport, if you don’t know what’s going on.

Like, I don’t ever watch fucking cricket.

Like, I don’t know how cricket works.

Like, people watching cricket could be the most, they’re the most excited they’ve ever been in their life.

And I don’t know what the fuck’s going on.

So I’m not excited about cricket.

Same thing with jujitsu.

But jujitsu is a, if you know it, the intricacies of it is, and it’s almost limitless.

It’s like chess that has a gazillion moves.

And you could use those moves at any time.

It’s, it’s very dynamic.

So, and the other, the other person has about, you know, a split second to respond to that, that thing you’ve decided to do now.

And very, very small details matter tremendously.

Okay.

The short answer is BJJ, for sure.

I have a hard time to be comfortable with bricks as my page builder.

I’m still using generate press and would like to know where I should start to switch finally over.

Um, it’s, you know, you’re coming from generate, which is not really a page builder, right?

It’s a completely different environment.

It’s Gutenberg.

Like if you were coming from Elementor to bricks, that would actually be an easier switch.

I think if you’re coming from oxygen to bricks, very easy switch.

If you’re coming from Divi to bricks, maybe probably a little bit more of a jump because Divi’s interface is so radically different, right?

And that’s the problem you’re coming from Gutenberg.

I think that one is you don’t just say, I want to learn bricks.

Okay.

You should say, I want to build something in bricks.

Like get, just get a basic landing page and just build the landing page in bricks.

And then what I would actually do, uh, is build it again and again and again, the same one, like the build the same one, like five times.

And you can actually use a different approach each time.

Uh, I just did a video on the ACSS channel.

I’m actually going to do one on this channel that you’re watching right now, uh, this week probably, which is, it’s going to be, uh, a comparison of three different workflows, ID styling workflow, class first workflow, BIM workflow.

So three, I’m going to build the same exact thing, three different ways.

Okay.

It’s just going to be a section, simple section, but I’m then going to show you.

The pros and cons of every single one.

Right.

And I would do that when learning bricks, like, okay, let me style everything at the ID level and just, you know, not worry about classes right now.

Not worry about all that extra stuff.

Let me just style everything.

I know this is wrong, but I just want to do it this way.

And you’ll familiarize yourself with where, where are things located?

You know, where’s the padding box?

Where’s the width box?

Okay.

And you can just block out all the other, like use static values.

Don’t worry about tokens.

Don’t worry about just build it wrong, but just build it.

Okay.

Then build it again and say, okay, but this time what I’m going to do is I’m going to use classes and I’m going to learn the, and I’m going to watch a video on BIM or something like that.

I have a video on BIM on this channel.

And I’m just going to build with BIM and I’m just going to make it maintainable this time.

So I’m going to make it more scalable, more maintainable.

And, but doing this, I’m going to learn, okay, how do you apply classes in bricks, activating classes versus not activating classes, attaching custom CSS to classes.

There’s more things you can pick up and then you’re going to get more comfortable.

Right.

And you’re not having to learn how to do a different layout.

You already did the layout.

You’re just doing the layout differently and then you’re going to do it again.

And I would say, now what I’m going to do is I’m going to build that same layout with a framework behind it.

I actually, we had this discussion last week.

Dave Foy believes this.

I believe this.

I think many other people are in agreement that you should learn web design using a framework, a CSS framework, like automatic CSS, because of the structure that it gives you, the best practices that it gives you and the workflow that it teaches you.

You’ll learn faster.

You will learn faster and you’ll have more of an understanding of what’s going on.

And then you can start to branch out and learn more CSS and things like that.

And I don’t even know your CSS knowledge level or your HTML knowledge level.

Obviously, the more you know already, the easier it is for you to adapt to a page builder, which is the last point I’ll make before moving on to the next question.

If you want to learn web design, never in a million years should you open Elementor to learn web design or Divi to learn web design or Generate actually is not bad in this regard.

But let’s just use those two builders as an example.

Those are the two biggest builders anyway, so that’s fine.

Elementor Divi.

You can’t learn web design using them.

You can’t.

It’s not really possible.

They don’t output code the right way.

They don’t use a real workflow.

When you learn on those tools, what you are learning is how to assemble pages, web pages, with that specific tool.

You are not learning any fundamental.

They don’t call the things their real names.

They have cute names for everything.

So you’re not learning the language of web design.

That was my whole point of page building 101, is you should not learn a builder.

And the good thing about Bricks, the reason I’m using this argument with Bricks, the good thing about Bricks is that it uses the language of web design.

And it outputs the code that you would output if you were writing the code yourself, for the most part.

It makes some stupid decisions, like the width max width thing, but that’s, you know, it’s minor.

Relative, like if we compare that to what Elementor does or what Divi does, that’s a minor inconvenience.

Minor inconvenience.

Okay.

For the most part, Bricks speaks the language of web design.

So if you know the language of web design, you could pick up Bricks and just start using it.

You know exactly what it’s doing and why it’s doing it.

If you pick up Oxygen, you can, Oxygen uses the language of web design.

If you pick up Webflow, Webflow uses the language of web design.

You could just pick these tools up if you know web design and start using them.

The block editor does not use the language of web design.

Divi does not use the language of web design.

Elementor does not use the language of web design.

So many builders do not use all of these block systems.

Okay.

Bloxy and this, these do not use the language of web design.

So a beginner can pick them up and learn them and learn the language of that system, but they’re not learning web design.

And an advanced user, like somebody who spent a lot of time in web design and knows the fundamentals of web design is put off by those tools.

They would not want to use those tools.

So the people advocating for like Elementor are people who learned Elementor and now they advocate for, they’re, they’re, you’re not going to see this very often, probably very, very, very rare that somebody who really understands deeply the fundamentals of web design would be attracted to Elementor and promote web Elementor.

That’s just, it’s not really going to happen.

There might be an edge case out there.

I don’t know.

I never say something for a hundred percent certain, but it just doesn’t make any sense.

It doesn’t make, cause it doesn’t speak the language of web design.

So if the more you know about web design, the more comfortable you’re going to be in bricks by default.

Another somewhat long answer to a simple question.

Okay.

Favorite Gracie brother.

I mean, it’s very easy.

So I’ve actually met Henner and here in Gracie multiple times.

Did a seminar with, with here in.

I really like Henner.

I like Henner’s.

I like his, if you’re on the inside, you know what I’m about to say?

I like his energy.

Okay.

It’s fucking stupid.

It’s so fucking stupid.

Okay.

I really like Henner.

I just like his whole, his, he’s a vibe.

He’s a vibe, but hoist.

It’s got to go to hoist because none, none of this would exist.

The UFC probably wouldn’t exist.

Jiu Jitsu, as we know it, it would not exist if hoist hadn’t have done what hoist did in the early days of the UFC.

So you, you have to give it to hoist.

But, uh, yeah, there’s, there’s a lot of Gracie’s that, that I, that I like.

Um, I, I just like Henner in here and like, you know, and what they’ve done for the sport and the art and all of that.

So that’s my answer.

Gordon Ryan or Felipe.

Gordon, Gordon Ryan is the goat.

Like there’s, there’s no denying it.

You can like, or not like his attitude.

Nobody, nobody’s fucking with Gordon Ryan.

So it’s just, that’s, it’s not even a, I, I go with Gordon.

When setting a transparent sticky header in bricks, the background is the website’s background.

What’s the best way to extend the hero section so that it reaches the top?

Um, it’s not extending the hero section so that it reaches the top.

It is, um, it’s, it should already be there essentially.

Um, let’s go into the builder and well, here’s a header right here that we can use.

Let’s add, we’re going to have to add something to this section.

Uh, let’s just pop in a, let’s pop in a hero.

So let’s go hero and let’s use something like.

Hero hotel maybe.

Okay.

Perfect.

All right.

So now let’s hop over to our header and let’s just enable sticky.

Okay.

Um, page settings, template settings, header, sticky header.

Boom.

Uh, it does help if you go to populate content.

I hate, I hate how bricks is search here works.

You got to go single post then, then you can find your homepage.

Okay.

Supply preview here.

Okay.

There you go right there.

Now we’re just going to leave it like that.

I know it’s ugly, but it essentially shows us what we wanted to see.

Um, there we go.

Let’s home.

I just want like one instance of this open.

Okay.

So it hasn’t actually done anything to the hero section.

The hero section is where the hero section always was.

What it did is it took the header out of the flow of the document.

So the header is no longer able to push content down.

And the header is now just sitting on top of the hero section that’s there.

Um, and so what this does do is it causes a fundamental spacing issue across your website.

And I think that’s what you’re referring to.

And what you actually, you don’t want to move the hero section down.

Like you, it might seem like that’s what you want to do.

That’s not what you want to do.

Um, you could fix it by changing the padding value in this hero section, but that actually doesn’t work all that well either.

Because remember this header exists on almost every page of your website, which is another area of complication because you need the ability to turn off how you’re managing this versus turn on depending on if the header is sticky or not sticky.

Um, there’s a lot of scenarios.

The one thing you need to know is as a, as a beginner, if we’re talking to beginners here, I know sticky headers are cool.

They do almost nothing for usability.

Uh, they cause lots of problems.

If you want more headaches on your, on your project, use a sticky header.

It, that’s all you’re doing.

You’re opting in for a bunch of headaches.

Okay.

And then, so what you, what I ask all the time, if we’re going to add a bunch of headaches to a project, I ask, what is the benefit that I’m getting in exchange for these headaches?

And it turns out with a sticky header, not fucking much, not much.

Okay.

Um, people will like here.

You can’t even, let’s just duplicate this a bunch of times.

We have to be able to scroll, right?

Okay.

So, oh, did I just duplicate the header?

Let’s not do that.

I thought I was in the actual page.

Okay.

Let’s go.

Yeah.

Home.

There we go.

Hero hotel.

Uh, let’s just duplicate you a bunch of, a bunch of times.

All right.

So now we should be able to scroll our page.

Let’s refresh.

Come on, InstaWP.

You can do it.

Okay.

Obviously it’s going to look terrible.

Uh, but we can scroll.

And so people will be like, well, when I’m down here at the bottom of the page, I can still see the navigation.

Um, well, I can just flick my mouse like, and get to the top.

I know where the navigation is.

There’s also tends to be a footer navigation, but mainly this shit is distracting.

It’s taking up real estate on a phone.

There’s not a lot of real estate on a phone.

Okay.

You’re taking up like a precious amount of real estate on the person’s mobile device.

A lot of times they wish it wasn’t there.

They can flick to the top and get to the top where the nav is in an instant if they need to.

And we have all these headaches that this thing, I just avoid them.

Um, I really don’t like them.

If you really need to have them, then you just have to opt into the headaches that they, that they cause.

Um, now let’s go to the front.

We talked about this spacing issue right here and, and how to resolve it.

Uh, one way to resolve it is you get the height of your header.

Okay.

Uh, let’s get the calculated height.

Looks like 75 pixels about, you know, you don’t even have to be, uh, you don’t even have to be perfect.

And you toggle this thing on that says offset content automatically.

And you tell automatic CSS what the height of your header is.

And now you get perfect balance between here and here across all your pages.

And if you happen to have a bunch of pages that don’t use a sticky header, you can come in and tell us what pages those are.

And we won’t do that on those pages.

Uh, and this is just an automatic fix.

It’s just like, like that.

It’s the whole, all the headaches just went away.

Um, and I’m, and I’m good to go.

So automatic CSS fixes all those headaches.

But if you don’t have that, then you’ve got to find a way to fix them.

And I’ll just tell you, it’s a, it’s a pain in the ass.

It’s a, it’s a, there’s a lot of edge cases that you have to consider.

It’s a big pain in the ass.

Um, so step number one, don’t opt into headaches that don’t actually provide you any value.

Step two, if you do have to opt into headaches, uh, that don’t provide you any value, have something that fixes it like that.

That’d be my suggestion.

Okay.

Let’s see.

Um, when using bricks and Gutenberg, we’ll use block editor for page building.

Screw anything for brick stuff.

Uh, IOW, uh, I can’t remember what IOW means.

Gutenberg is for blog posts.

No, uh, it will not.

So if we go into Gutenberg pages, pages, pages, pages, pages, add new page.

I don’t want to spend too much time on this because it’s, you know, ACSS specific publish, publish.

This is a page, right?

Let’s do, uh, options, uh, Gutenberg and here use block editor for page building.

I don’t even know what, what install we’re dealing with here.

Okay.

This is what happens when you use the block editor for page building.

Essentially, everything goes to a blank canvas full width.

Now you’re in a situation where you go here and you need to start using just like you do in bricks, add a section, add a div, add a this, add a that, start building your page, um, or use patterns or use Gutenberg or something like that.

You’re free to do all of that here from scratch.

And you’re going to get, here’s the class first workflow.

As you can see, um, you’re going to get live preview on everything, but you’re stuck working with these stupid, you know, generic blocks.

Or maybe you’ve brought in like generate or something like that.

That’s actually capable of page building.

Um, and, and, and, you know, you can do all of this.

So you’re good to go.

The question was, does that now affect, let’s not save that.

Does that affect blog posts?

Um, so we go to posts and we go to hello world.

Okay.

No, the answer is no.

So your blog posts are not affected because use Gutenberg for page building.

This is not a page.

So we don’t affect that.

No.

Um, now there are custom post types.

Gosh, uh, that are posts.

All right.

And you might want to use custom post types for page building.

Another scenario, an edge case like services, right?

So we edit this notice it’s not affected by default, but you can go into automatic CSS and say, Hey, by the way, my plumbing post type, my, or my, I’m sorry, my services post type.

I want to use that for page building.

You just tell that to automatic CSS and then automatic CSS will go.

Okay.

And then it’ll do that full width, like make it for page building kind of scenario.

There is a fundamental flaw that I wrote a long diatribe about in Gutenberg in the sense that Gutenberg exists.

The block editor exists in posts, pages, custom post types.

It can be used for none of those scenarios.

Like you could just use the block editor to output to dynamic data in a template somewhere.

And the fundamental flaw of the block editor is that there is no way to inform the block editor of where its content is going to live.

That is a fundamental architectural flaw because the block editor needs to behave differently depending on where the content is going to go.

And you can’t inform it of where it’s going to go.

Thus, you can’t change its behavior the way you need to.

Thus, the block editor is very, it’s a dumb environment.

Like I’m not, that’s not an insult.

It’s like, it’s dumb in what it knows and what it’s informed of because you can’t inform it of anything.

So it’s just, just a bad scenario.

It was not thought through in how this thing needs to work.

Um, and it creates a lot of problems and, you know, just headaches, headaches.

And again, I say, well, if you’re going to introduce all these headaches, what is the value that I’m going to get in exchange for dealing with these headaches?

And it turns out, uh, nothing, nothing.

You’re not going to get any value, uh, that you don’t already have in a page builder like bricks.

Um, in fact, bricks does far more than the block editor does and has far less headaches.

So I should just use that.

That’s the conclusion.

Okay.

Are you still aware of some invading CSS from bricks, such as the max with a hundred percent from ever?

Yeah.

We talked about that earlier on the stream.

Uh, and there’s nothing we can do about that.

Unfortunately, how does bricks handle CSS?

Is it add your custom CSS inline or does it generate CSS files?

Per page or global?

Good question.

Bricks, settings, uh, performance right here.

CSS loading method.

You get to choose inline or external inline is better.

It’s more performance.

I think a bunch of different scenarios have been tested with regard to this.

Um, now another thing you need to know is if you’re using bricks to write CSS and such, whether you’re using custom CSS or the input fields or whatnot, it only is going to write that to the styles for that page that is using those elements, right?

So it’s not writing a global style sheet that you’re loading everything for everything, which is good.

That, that, you know, helps on performance side of things.

Um, but other than that, there’s not a lot to know.

I would set this to inline styles and move on with my life and you’re, you’re, you’re good.

Um, how are you celebrating your birthday this year?

Uh, just something simple.

So, uh, for July 4th, I’m not allowed to celebrate on July 4th for the most part.

Um, so we always do something a different day, uh, with friends.

And it’s also like, I don’t want to make other people leave their, whatever they’re doing for the 4th of July to come, you know, celebrate with me.

I just do it a different day for the most part.

Now I love, love, love, love, love to go to Florida.

Uh, and I love to watch fireworks on the beach.

Uh, but I checked the weather, not going to happen this year.

Most likely there’s just too, there’s too much rain and such this week.

Um, high chance that that doesn’t happen.

Uh, so we’re staying here celebrating the 4th.

And then I’m just, I’m like, sometimes I’m boring.

I’m like, well, let’s just all go bowling or something.

And so, but I do like bowling, uh, bowling plus alcohol plus competitiveness.

Tends to be a lot of fun.

Uh, so that’s, that’s pretty much, I, I try to get people riled up.

Um, so, you know, I will, uh, shit talk their bowling abilities until they decide that they want to be competitive.

And then I got them.

Then I got them right now.

Now we’re into, we’re into a little bit of a game.

Okay.

You can’t just like, why, what is the idea of just go bowling and not really care about, you know, what’s going on with the other people’s scores and your score?

It’s no fun.

It’s no fun.

Gotta, gotta have a little competition.

Gotta get a little, you know, anybody that came to the R3 conference, we were on fire.

We, they took us to a bowling alley thing at the end of the conference.

Man, we were on fire.

That was fantastic.

It was, it was, it was wonderful.

So, um, yeah, that’s it.

That’s what we’re going to do.

All right.

Trying to create a listing page that shows cards.

What’s the best way to add, uh, pagination and filtering.

First, we need to have a, a debate about the word pagination.

It is in fact, I know a lot of people like pagination, but I don’t, I don’t know about you.

I don’t navigate pages on my website, right?

I do navigate pages.

If they’re going to spell it like that, I’m going to pronounce it like that.

So, uh, pagination is what I say.

Um, Bricks does this by default.

They, they do, they do pagination by default.

I actually don’t like pagination all that much.

Uh, from a user perspective, it depends on the situation.

Okay.

If there’s going to be like two pages max, don’t do the pagination thing.

Three pages probably not.

Don’t do.

I, I prefer a load more scenario.

Okay.

So you give them some of it, load more.

They see more of it.

And it’s got to be a manual load more that automatic load more nonsense.

Not good.

That’s not accessible.

So manual load more buttons.

Um, now this brings us in Bricks doesn’t give you manual load more by default.

At least last time I checked.

So I use WP code box.

I drop in a load more facet.

I hook it up to the repeater or the query loop, whatever.

And it’s pretty much done.

Um, pagination introduces SEO complications.

Um, and it’s not valuable unless it’s actually not all that valuable altogether.

I suppose in certain scenarios where somebody wants to share a link to a list of results that’s multiple pages deep, maybe it’s helpful there, but the content on those pages is not even guaranteed to stay on those pages.

Cause there’s more things are published.

They might get moved to a different page.

Pagination used to be like the, we don’t have another way to do this.

Right.

Uh, like before load more and such.

Um, and before fastening, like fastening and load more.

So the idea that I’m just going to go page by page by page through archived content when I could just search by category, like, cause I have an interest in a specific category or use an actual search field to search for specific kinds of content, um, or see related content or whatever, like facets are way more powerful than pagination.

Um, and so I prefer a dynamic grid that reorganizes itself based on the faceting values that people choose and a search input and load more.

That’s, that’s what I prefer.

Um, and I think you see this when you’re using an e-commerce site.

I mean, all e-commerce sites could be heavily paginated, but they’re not, are they?

They, they provide the long list of results with load more generally.

And then people rely on facets to get to the content that they want to see and filters to see specific attributes of that content.

That’s the experience we really all want.

I don’t think anybody’s like, I wish this site had a hundred pages for me to go through.

Uh, nobody ever really says that.

Okay.

Let’s see.

When will we start properly referring to it as native WP instead of Gutenberg, which it’s not Gutenberg is an experimental beta class.

Well, yeah, I mean, that’s, uh, they’ve done a shit job with communication in general.

So everybody’s fucking confused.

FSC, this, that block editor, Gutenberg.

I mean, they’re just throwing out names, everything.

Um, I actually think the entire block editor and FSC, uh, should be a plugin.

Like that just, I should have to opt in to if, if it’s going to be a shit show, I should have to opt into the shit.

I don’t give me the shit show by default.

Uh, I want to have to opt into it.

So everybody that manages to somehow like that, they can opt in and then they, they are enjoying life.

And then we can enjoy life by not opting in, um, because we don’t go that route.

Mm hmm.

Mm hmm.

Okay.

Let’s see.

For digital gravy site, which tool did you use for the mockups?

Additionally, uh, well, digital gravy site is gone.

Um, if you go there, digital gravy.co, um, because we’ve shifted.

Um, we are now, and I’ve talked about this progression.

Um, but we are exclusively a software company now.

Um, automatic CSS frames etch.

Okay.

We’ve got, we’ve, that’s, that’s what we’re dedicated to.

And that’s under the umbrella of digital gravy owns all of these assets.

So, um, no more, no more, um, actual agency projects, uh, that are new anyway.

That’s just, that’s the direction we’re going.

What change have you made to your blueprint site over the past year?

Not many, not many.

Um, obviously, you know, upgrading automatic CSS to 3.0, putting in some new defaults and stuff like that.

Not, not, you know, I made the change from metabox to ACF.

Not much.

Like the stack is very, very, very, very similar.

Bricks, ACSS and frames, uh, in WS form does like 98% of all work you would need to do.

Um, and advanced custom fields.

Like the, the, it’s, I showed the stack the other day of what we were doing with something and it was just, you don’t need much else.

I mean, there’s some random, like, okay.

An image optimization plugin, uh, an SEO plugin.

Uh, I, okay.

But again, it’s, you know, it’s still the fundamental, same fundamental stack.

I can’t seem to sell the table header in frames and building responsive tables is annoying.

Tables in general are annoying.

Um, what is the value in ordering via dynamic data tag as opposed to via tax or meta value in the loop?

You could do it.

You could do it that way.

Um, it’s like, you know, how are you going to use the taxonomy?

What are you going to call it?

How can you not make it confusing?

Uh, there’s, there’s different ways to do it for sure.

Can you explain why the bricks default CSS for blocks adds flex wrap wrap when under six, seven, six pixel break point?

I don’t understand it.

It breaks my cards layouts.

Um, yeah, I’m happy to.

It’s another annoying bricks trying to save you.

Bricks putting its cape on super bricks coming in being like, well, okay, here’s why.

So let’s go with, uh, let’s go with a logo.

Okay.

Uh-huh.

Can we get enough of them?

This is the bricks 1.9.9 that we know and love.

You see what I’m saying?

See what I’m saying?

How many images do you count?

One, two, three, four, five, six, seven.

How many?

Oh, there they are.

You see them on the canvas.

I think what’s happened is to fix the lag issues or improve the lag issues.

They’ve done something called debouncing, uh, which essentially waits for the user to finish what they’re doing before it tries to render what they just did.

But then you’ve got to play with the debounce time because if you wait too long, it’s annoying.

Right.

Um, and, uh, well, I was going to say something else about JavaScript frameworks, but, um, because there is a better solution to all of this, uh, that’s neither here nor there.

It will come up in the future though.

Don’t worry.

Um, anyway, so we have all these images and notice that it, it, I did it too fast.

So the debouncing, something got lost in the debouncing and they just didn’t appear until I added a new one and then it all caught up with itself.

Right.

It’s kind of annoying.

Not, it’s not the best way to handle whatever the lag issues they were, uh, in my opinion, but what do I know?

Uh, so let’s go flex.

Actually, we got to use the bricks tools.

Okay.

So we’re going to go flex, uh, row.

Okay.

We need, we need more of these.

Okay.

You see how it breaks?

Like I just, you can go for days.

It will just overflow the container.

Right.

Okay.

Well, most people, um, when they’re building, they don’t do that.

Okay.

They just do enough.

Let’s just say this, but they don’t realize that if they never set the flex container to wrap that on lower break points, they will actually cause an overflow and you see it right here, but you don’t see it right here.

Why is it overflowing here, but not here?

Well, most people don’t realize if you watch this little, so you wouldn’t know.

Let me zoom in.

See this.

Okay.

This is not even, I didn’t even set a value.

The value of a flex container by default is to not wrap.

Okay.

It will just let you overflow shit.

And so if you want it to wrap, you need to set it to wrap and then it will wrap.

Okay.

Well, I have not set a value and on desktop, it didn’t look like I needed it to wrap.

And what Brick says is users will accidentally overflow containers too much.

So what we’ll do, watch, watch between this break point and this break point.

Oh, they snuck it in on you.

And it’s not even a real value.

It’s not a value you chose.

It’s just a value they snuck in on you because they were super bricks.

They put their cape on.

They’re like, we’re going to save these users from these overflows.

And they just make a decision.

Well, guess what?

This is yet another decision that is not without consequence.

This will actually break other things you’re trying to do.

If you don’t realize that it’s happening.

Okay.

And why did they choose this break point and not another?

I don’t know.

They just made an arbitrary choice and you don’t have control over that arbitrary choice.

What they should have done is it should be no wrap and it should always be no wrap.

See, now it’s no wrap at all times.

And you might be like, Kevin, it’s breaking the layout.

And you’re like, yeah, you fucking broke it.

Didn’t you?

You need to go set this thing to wrap at the appropriate break point.

But it doing it automatically for you is actually not a solution because it can cause other problems.

The solution is you understand what you’re doing with web design.

That’s the solution that like, okay, I need this to wrap because at lower break points, there’s not going to be enough room for this content.

That’s the solution.

The solution of it auto trying to make decisions for you.

It’s random break points and not even really setting the value.

It just kind of is happening behind the scenes.

I don’t think that’s a good solution.

So what is the solution?

There isn’t one that Bricks chose to do that.

There’s no way to turn it off.

You just have to know it’s happening and make your decisions accordingly.

Okay.

But again, but again, see, you know, yes.

Is that being critical of Bricks?

For sure.

Let me make it clear once again.

This is an issue that is more or less non-existent in relation to the things that like Elementor and Divi do.

I mean, those things are nightmares.

The block editor, nightmare.

Bricks is clearly not a nightmare.

Bricks has some quirks that are annoying.

But when you compare, like, what are my other options?

Elementor?

Divi?

Breakdant?

No.

Trust me.

They do shit way worse.

Way more nonsensical.

I mean, a laundry list.

Don’t even get me started.

I mean, I could list hundreds of things in these other builders that just make zero sense whatsoever.

And make zero sense in any form of, like, development.

Elementor.

The fact that if you put a class on a heading, you try to attach a class to a heading, it doesn’t attach the class to the heading.

It attaches it two levels up to the grandparent.

Makes no fucking sense.

Never would you ever want that to happen.

That’s, Elementor does that routinely.

It does that as practice.

In practice, Elementor is like, if it doesn’t make sense, we’re going to do it.

We’re going to, we’re committed to doing things that don’t make sense.

So, that’s what you have to understand when you’re using those tools.

Bricks. 99% of bricks makes perfect sense.

And then there’s a couple quirks here and there.

Okay.

What are some elements that can be used at root level?

Like, nestable slider can be unwrapped.

Are there any other?

I don’t quite understand what you mean.

Used at root level.

Like, nestable slider can be unwrapped.

Not sure.

Can you give me some more clarification on that question?

How to set a different excerpt word count on mobile using CSS?

You can definitely limit the character count for sure.

But would I?

Would I?

You really want to change the actual output of the content.

But that’s hard to do at a specific break point.

I need to see the scenario.

This is one of those questions where there’s more than one approach.

And until you visually see what somebody’s trying to achieve, it’s not possible to give the best solution.

Because it depends on the context of the situation.

So if you have a link, but you can’t share links in YouTube.

This is a question for the inner circle.

Come into the inner circle because you can post a link.

You can show the example.

You can say, here’s why I want to do this.

And then we can actually show you.

That’s kind of the best way to do that.

Is purely designing plus building websites a worthwhile business?

I see so many companies from India charging very cheap prices.

How do you compete?

Okay.

Purely designing plus building websites.

No, it’s not enough.

If you’re going to be an agency, we design and build your website.

That is not enough.

And here’s why it’s not enough.

Because you can design and build the most gorgeous, the most perfect, the most highly, like the conversion rates.

If there was traffic, the conversion rates would be off the charts, I’m sure.

Right?

You did everything right.

You did everything by the book and you hand it over to the client and it does fucking nothing.

It does absolutely, because they don’t have a plan for making it do anything.

They don’t have a plan for getting traffic.

They don’t have a plan for monitoring analytics and running tests and conversion rate optimization and or ranking.

They don’t have a plan for anything.

They don’t have a plan for anything.

And so when you then hand that over to them, they might go hire an SEO agency and the SEO agency is going to come in and be like, we don’t know how this website was built.

We don’t, we don’t, we don’t actually have developers.

We’re just an SEO agency.

And then, then, then you’re in a situation where they have to relay what needs to be done and dah, dah, dah, dah, dah.

And like, no, you should just have, um, a, an approach that includes design development and success.

Okay.

Now, however you want to go about the success path is up to you.

You can’t be an expert in every area, but what you can say is what we are experts in.

And then this has to fit the, like the niche you’re targeting or the type of person you’re working with.

Let’s say it’s small local businesses.

Okay.

What do small local businesses need to be successful?

Well, SEO in the old days, especially was a really, really critical thing for them.

Okay.

PPC, probably a really, really, really critical thing for them.

Email marketing, eh, not so much.

I mean, it might be good for them to have email marketing, but it’s not going to like, you know, it’s probably not going to make or break the website.

Um, so what you could say as an agency is, you know what we do?

We do design development and PPC.

So what we’ve done is we’ve added this success component so that when we design it and build it, we can also guarantee you’re going to be successful because we’re experts at PPC.

We’re going to bring, we’re going to bring in qualified buyers, qualified traffic to your website using PPC and get the conversions that way.

We do this for every client we work with.

So we know we can do it right.

Or, or you could say what we do is design and development and we’re experts in SEO.

So yeah, you might need another agency to come in and do PPC, but we’re going to have the organic traffic side of things on lockdown for you.

We’re going to get you ranking and that’s how we’re going to get you traffic.

And that’s how we’re going to make your website successful.

And maybe you also, because you’re SEO, you add content marketing into the mix.

So you’re doing the SEO blogging kind of thing.

Maybe you’re doing backlink acquisition.

Maybe like there’s a lot of things you can do, but the idea that it would be design development and good luck.

That’s not a good model.

I don’t, I think that’s a terrible model.

I like the model of design development pathway to success.

Okay.

And again, whatever you want that pathway to success to be is up to you, but there’s got to be a pathway to success to go with the design and development.

If you want to compete in this day and age, that’s my opinion.

Okay.

Let’s see.

When I try to add margin on a moon, a figure element bricks, zero out the margins with higher specificity.

How do I overcome this?

Ah, you rewrote it.

Hold on, hold on, hold on.

When adding a margin on a figure element, that’s good.

The moon thing was throwing me off.

When adding a margin on a figure element modifier class, brick zeros out the margins with higher specificity.

What’s the proper way to overcome this?

Hmm.

I don’t, this doesn’t sound like it should be the case.

Sounds like you might be doing something wrong.

Um, but there is a quirk with bricks figure elements.

Okay.

Fundamental rule of page building of a page builder.

If you’re a page builder developer, please listen, listen to me.

Okay.

Fundamental rule.

Do not generate a box that the user cannot select.

Okay.

So let’s see, let’s see this rule violated, uh, by bricks.

Now, uh, with the section element, bricks gives you a container.

That’s a box and you can, you can select it.

A lot of page builders don’t do that.

Gutenberg doesn’t do that.

The block editor, I’m sorry, doesn’t do that.

So they’re already a step ahead, but they violate the rule right here with images.

Okay.

And we have to understand what the code output is doing in order to understand this.

So we’re going to go to the front end, we’re going to inspect, and we’re going to see that I have an image.

Fantastic.

It out.

I did put an image on the page, but you know, so I’m getting what I asked for image.

Fantastic.

Great, great, great.

Okay.

Now let’s go back into the builder.

I’m asking for that to be wrapped in a figure tag.

Okay.

Go back front end.

Did it happen?

What happened?

Okay.

Figure around the image.

Yeah.

But in doing that, bricks just made some new decisions for me.

And I want to override those decisions.

And in order to do that, I need access to the figure tag.

Okay.

So the question is, can I select the, oh, there’s, there is no fucking figure tag.

There’s still just the image there.

It did not, it created a box.

The box has implications, but I can’t touch the box, right?

You know how much I like to touch the box.

So this is a, it’s a big problem for me.

It’s a big problem for me.

And many pages, Elementor creates hundreds of little boxes that you’re not allowed to touch, which is really annoying.

Bricks creates this one in this instance, and it’s a box we can’t touch.

Guess what?

I can’t put a class on the image separately from the figure or vice versa, because I can’t touch the box that was generated.

Man, it’s a big problem, isn’t it?

The big problem.

So let’s, let’s just test out what you were doing.

So you said when adding a margin on a figure element modifier class, I need to know what class you’re adding for.

Okay.

Let’s like, let’s add margin.

Wow.

We can’t even do it there.

Are you, are using a custom class?

Like my, my image.

Okay.

And then you add some margin here.

So let’s go.

I’m trying to think of what you’re trying to do.

Margin top of like a hundred pixels.

Okay.

Maybe this is what you’re describing because nothing’s fucking happening.

Let’s reload the canvas.

Oh, this may, this may be what you’re talking about right here.

Let’s inspect.

Let’s inspect.

Hmm.

Figure, figure class has my image.

Oh, you’re right.

Why did they do this?

See, this is, this, this is a big problem.

Bricks, bricks, Thomas.

Thomas.

Um, what is another fundamental rule?

Okay.

Let’s, and let’s just go like, I mean, it’s not like this stuff isn’t publicly available.

Uh, like let’s go to audit.

Let’s go to the automatic CSS blog and let’s click on, um, minimum page builder requirements for ACSS.

And let’s just scroll down.

And this is kind of written to page builder developers.

Okay.

And it says, well, you kind of have to have clean code output.

By the way, there’s elementor’s code output versus bricks’s code output for a H2 heading.

Okay.

Uh, yeah.

You see, not great.

Uh, we come down requirement to low specificity or no specificity defaults.

And then I give examples and I show why is it?

And I even give the solutions.

How do you remove specificity?

How, how do you avoid specificity issues?

And then we see right here, somebody brings up a very valid example of where, look at this.

I’m going to hover over this.

Look at that specificity, uh, zero, zero, one.

Where’s the other rule that they were adding?

It’s on the figure right here.

Zero, one, zero.

They’ve attached a class to an element.

Okay.

Creating much higher specificity than is what is needed.

And they’ve just decided you’re not allowed to have margin on these things.

They’ve set the margin to zero.

Why did they do that?

Probably to override some other rule that they had some other, uh, opinion that they had put in.

But they’re, they’re doing this with like heavy specificity to the point where if I put my own class on the element, it ends up at zero, one, zero, the only way I can put margin on my image with a class is to, um, just manufacture more specificity, which I can’t even do with the builder interface because they don’t allow class chaining.

I can’t do my, I can’t do something like my image, my image.

This would win, but that’s not a valid selector in bricks.

Um, so I have to come down here and do a root root.

That’s probably how I have to do it.

Root root.

And then if we just say margin top a hundred pixels, now it wins.

Now it wins.

That’s a worker.

That’s a hack.

That’s a hack.

Um, why?

See, this is why I say page builders should do things a certain way.

And people are like, that’s just your opinions kept.

No, it’s not.

It’s not just my opinion.

It’s because we run into scenarios like this all the time.

Um, so there should be some fundamental rules that page builders follow.

There’s no need for all this specificity that they add in their opinions.

And you can be opinionated, just be opinionated with no specificity.

So that it’s easy for me to override your opinion.

Automatic CSS, every auto opinion that it applies, it applies with no specificity.

So if you need to override it, it’s very easy to override.

It also applies the opinion with a token.

So not only can you override the selector easily, you could just hijack the token.

There’s two different ways you can easily overcome it.

So, um, yeah, it’s just rules, rules that keep getting violated.

Um, if I need to exclude an entire CPT from a sticky header, can I do that in ACSS or just individual pages?

Uh, in automatic CSS for sure.

So you can go to, uh, layout header.

Okay.

Offset content automatically exclude pages.

It says exclude pages.

Cause I don’t want to make a long label.

Um, but this is any body class, any, any body class.

You can just exclude that.

So template custom post type.

Um, because if you look at a post type, let’s just go back here, uh, in the backend, let me get into the dashboard.

Okay.

Services, uh, all services, plumbing view.

Okay.

Here we go.

Inspect.

All right.

Uh, we go to body right here and we look for single service.

Okay.

Right here.

So these are added by WordPress.

Like WordPress adds body classes to things to help identify what they are.

Right.

So this is in the service custom post type.

It’s a single service page.

Um, sometimes it’ll say like post type service, something like that.

So you can just take those selectors and drop them in to automatic CSS is exclusion area right here, uh, right there.

So you would just comma quote, put the next one in.

Um, so that was single service like that and it’ll exclude that.

And so it won’t do the offset on any of those pages, anything with that body class.

Uh, or you can manually, I did a whole video on, on how to do this.

So just go watch the video.

Uh, that way we don’t spend extra time on this.

Okay.

Um, show workflow for checking possible error.

Okay.

How to work on the contact section, Foxtrot kind of confusing how to work on content section, Foxtrot.

Okay.

Let’s get rid of all these, all this contact.

This isn’t really a frames Q and a, um, which one of these is Foxtrot.

Oh yeah.

Yeah.

Yeah.

There’s a whole video tutorial on this.

This is a very advanced frame for dynamically placing map.

Markers generating a, um, uh, slider with a query loop.

And you’re going to need your location CPT.

And, uh, you’re going to need to activate this code block.

And there’s a, there’s a whole tutorial on it though.

Uh, if you’re an inner circle member, I actually built this from scratch in the inner circle.

You can just watch the entire thing get built.

Then you’ll know exactly how it works.

Uh, but I believe there’s also a video just for frames users on how to set it up.

Uh, okay.

There’s also documentation on it, I believe on the frames website, but that’s going to be beyond.

This is going to take us 30 minutes to get something working for that.

It’s a very advanced frame for a very advanced use case.

Now, if you, if you need that use case, that frame will save you probably 10 hours of time.

Um, but if you don’t need it, then you don’t need to worry about it.

And we don’t need to worry about it in this Q and a, okay.

Are you a good bowler?

Do you have pro gloves, shoes, et cetera?

No, Derek.

That’s the fun thing.

Uh, is I could be decent at bowling on any given day.

I could be horrible at bowling on any given day.

Um, I think my highest score, 180, something like that.

I don’t, I, yeah, not, that’s what makes it even more fun.

Uh, because I will continue to talk shit, even if I’m bad at it, uh, just to, just to make it more fun.

Um, and then, you know, I don’t mind losing.

Um, but I don’t, you know, I don’t want to lose.

And so this is what makes it fun, Derek.

This is what makes it fun.

Okay.

Um, and I, and I prefer, you know, it’s, it’s great if, uh, you know, when the pro bowler shows up with like their glove and their ball and all this shit, of course, I’d love to beat them.

Um, it’s not quite as fun.

I like, I like, my other friends, um, aren’t fantastic at bowling either.

So this is how you have a good time.

This is the, everybody roughly sucks at it.

Um, okay.

What is your opinion?

What is your option of Beaver Builder managing a website that was already built using it?

Oh, okay.

So great.

Elementor, Divi, Beaver.

They’re all exactly the same.

They’re all, they, they all are equally bad.

Um, they’re equally bad in terms of code output.

They’re equally bad in terms of accessibility.

They’re equally bad in terms of workflow, maintainability, scalability.

The list goes on and on and on and on.

These tools are known and loved by people who learned on those tools.

Okay.

Um, they’re not known and loved by people who are, you know, like understand the fundamentals of web design.

Uh, cause there’s not a lot to love there, honestly.

And I inspect the code.

Like I’ve shown the examples.

You just saw the code block I put of Elementor versus Bricks, right?

Like there’s very good reasons for these opinions.

Uh, they’re not just, it’s not just like, I don’t like the Beaver.

Like, I mean, yeah, I, I, I think it’s a dumb name for page builder.

Right.

Um, yeah, I, I don’t, I don’t like it, but that’s not the reason I don’t like the builder.

Right.

Um, some people will come to that conclusion on their own.

Like they’re like, ah, I just don’t like the branding.

I don’t like the people.

I don’t like the, okay.

I don’t like the technical output of the tools.

Uh, that’s what I’m talking about exclusively is that the technical output and the technical workflow is bad.

Objectively bad.

There is no like counter opinion.

Like bad code is bad code.

Non-maintainable, non-scalable workflow is a non-maintainable and non-scalable workflow.

There’s no other way to slice it.

It just, it’s objectively bad.

Now people prefer it because that’s what they learned on and they don’t know any different.

And they also don’t know any better.

Okay.

So let’s just be clear about this.

Nine out of 10 element or users have no idea what elements are is doing behind the scene.

They have no idea of the code that’s being output.

They have no idea that when you attach a class to something, it doesn’t actually attach it to the thing.

They, they, the technical stuff is unknown to them.

So they can’t even, they’re not informed enough to be critical of the technical side of the builder.

They’re gauging things like, does it make it easy for me to drag this thing on and put it over you?

Like they’re very basic stuff.

That’s what they’re grading and judging.

They don’t know that like calling columns, columns is actually a problem.

Like that, let me rephrase that.

Calling a flex layout columns.

Actually, Bricks does this.

It’s annoying as shit.

I think I have excluded it from this.

I, I uninstall their, their things that don’t make sense.

Uh, layout.

It used to be in layout right here.

Yeah.

You can’t see the name of it.

I think they have a columns element.

Correct me if I’m wrong.

But like, um, Gutenberg does this too.

Uh, let’s go in here.

Let’s, let’s go out here.

Cause I think people need to understand this stuff.

Like understand why this doesn’t make sense fundamentally from like a web design perspective.

There it is right here to call an element columns.

Okay.

This is ridiculous from a actual fundamentals of web design standpoint.

These are not columns.

This is visually their columns.

Okay.

But in CSS, in web design, these are not columns.

Okay.

Uh, so we can, we can prove this, right?

Um, we’re in the wrong build.

Here we go.

So let’s go back to our rich text element, right?

Rich text.

Uh, nope.

I don’t want to drag that out of there.

Uh, let’s go get our website.

Ipsum.

I’m going to show you what columns are.

I’m going to show you exactly what columns are.

Don’t worry.

Don’t worry.

All right.

Let’s put this in.

Okay.

Call.

Uh, column count two.

Okay.

Those are columns.

This is, this is actually, if you go to columns in the docs, these are columns.

Columns have CSS properties called columns.

Okay.

Uh, so the idea that we’re going to create an element called the same thing as another element, but it’s not going to do the thing. the fundamental thing does.

That’s that, that’s the workflow we’re going to rock with.

This is to a, to somebody that knows what this is maddening.

It’s maddening.

No, don’t do it.

No, stop doing that.

That’s not what that is.

To call things a block.

To call things a block even.

Just say that’s a block.

No, that’s, it’s not.

There’s a thing in web design called a block, a block level element that you assume certain things about.

And so to call something that uses flex a block, it’s not, doesn’t even behave like a block.

That’s hard.

It, it, it requires somebody who already knows what they’re doing to unlearn.

They know.

Okay.

That’s, but, but still you’re, you’re using underlying things that like, it could still be a block if I needed it to be a block, but it, but it’s, see, it’s fucking confusing.

It’s really confusing.

Um, and they do this all the time.

And why do they do this?

Okay.

The fundamental premise, and this is what I have argued against since the beginning, the fundamental premise of these tools is that you see all of you beginners that came here to watch this and ask your question.

I want you to know that the, these tools that you’re using, most of them, element or divvy, the block editor, they think you’re a moron.

That’s, and I’ve disagreed with that since the very beginning.

I don’t think you’re a moron.

I think that you are perfectly capable of just learning fairly simple concepts.

Okay.

And if we just teach the concepts, you will learn them.

And then you will be on the same page as everybody else.

There’s already a standard.

A standard is like, here’s the documentation for web design.

Okay.

And so if we all learn web design, it would be like in, you go to become a dentist, right?

And so you go to dental school and you learn all the ways of dentistry and you learn what all the tools are called.

And you’re like, fuck, I’m a dentist.

Let’s go work on some fucking teeth.

And then you go in and you go get hired by this dental agency.

And this dental agency is like, just to let you know, by the way, I mean, most dentists are morons.

So, you know, we’ve given everything a cute little name and everything that you’ve learned in dentist school is not really how we do things here.

We’ve just made everything easier for you.

So forget all the stuff you’ve learned and just learn our way of doing it.

See, see, see the problem that we’re, we’re running into.

And so we’re in a block editor where everything is called the wrong things and the controls are all wrong.

And why would an advanced user like this?

Well, they wouldn’t, but they didn’t ask us, right?

They didn’t ask us.

Elementor is the same way.

Elementor, Divi, they all feel like, we can’t just, people can’t learn.

You know, we, we just, we just need to make it so that they can use it.

But here’s the fundamental error of this philosophy.

Okay.

Fact number one is users aren’t morons.

Fact number two is users who want to stay morons.

Like if you say, I don’t want to learn, I don’t want to learn.

I just want to build websites.

You can’t, you can’t really, um, without years of still years of a learning curve.

And I’ve said this all the time.

Like it doesn’t matter how much you dumb the tool down, make it as dumb as you can make it like the block editor and then sit my mom in front of it.

She still can’t do it.

So you, you are, you are pursuing a path that has no real conclusion, right?

Other than you’re pissing off everybody who actually wants to use a legitimate tool.

That’s all you’re doing.

Um, so Elementor, Divi, like these are impossible to learn.

They’re impossible to use if you actually know what you’re doing.

And if you’re a beginner trying to learn it, when you get to the end of a two year pathway in Elementor, all you know is Elementor.

You don’t actually know web design.

Uh, so you’re not actually more equipped to do your job in any other capacity.

Um, and any advanced user trying to use Elementor is just frustrated.

It’s just a bad, it’s all bad philosophy.

It’s based on bad thinking.

How do you use hook term to address ACF DB bloat issue?

That doesn’t sound like a beginner question.

Um, viewable.

Okay.

Uh, how do you determine what to put on the homepage?

Woo.

Uh, that’s a tough one.

That depends on what is the business?

What is the product?

What is the offer?

Who’s the visitor?

That it’s different.

It’s different for every, uh, for every website.

Uh, we do talk a lot about this in the inner circle though.

Like a lot of, a lot of the discovery trainings are exactly answering that question.

So I would go do those because it’s not, it’s really not answerable.

It’s a case by case by case basis.

Uh, how did you change the widgets layout and the bricks UI on the left?

Uh, it’s it, that’s automatic CSS doing that.

So we just put in that feature recently because this is way more streamlined and easy.

The side by side, it’s just not a good situation.

So if you go to options, bricks enhancements, stack the add elements panel, just flip that on and you’re good to go.

Have you switched over completely to Insta WP?

Um, just for my tutorials and my test, uh, testing and all that kind of stuff.

Yes.

Do you have a tutorial on building a custom query loop for learn dash with bricks?

Uh, I don’t use learn dash, so I do not, but it shouldn’t be that fundamentally different from anything else involving a query loop.

I would think.

Hmm.

How do you do speed optimization for your brick sites?

Do you use light speed or WP rocket or flying press?

Uh, none of the above.

So we do caching at the server level.

We do Redis object caching at the server level.

We do, um, Cloudflare.

So Cloudflare, I believe it’s called APO.

Uh, it’s a specific WordPress optimizer, uh, on the Cloudflare platform.

Typically, that’s the typical route that we go.

Uh, let’s see.

Uh, and then we defer JavaScript.

I use, um, perf matters to get rid of all the junk in WordPress and to delay and defer specific JavaScript that’s running.

Uh, that is the one plugin that we use as part of that optimization process.

Can I send you a little complicated hero section on Figma to develop in bricks?

Uh, sure.

I can do it as, as a tutorial.

Does your entry level website product include the pathway to success?

Fundamental on page SEO, PPC, uh, entry level web product.

I’m not sure.

Like when we were an agency, our, our process was discovery, design, dev, SEO, and PPC.

So we were hitting both SEO and PPC and, um, in rare, in, yeah, I guess rare cases.

Um, I would also, so we’d be doing a lot of analytic stuff.

Uh, we will do conversion optimization.

Uh, and then for certain types of clients that it made sense for, I would talk them into doing a bunch of email marketing stuff.

Uh, and so I would set up email funnels for them, write the email copy, uh, things like that.

And, and cause you can, you email marketing actually has the largest ROI of any like of, of any marketing thing that you can do online.

If you’re good at email marketing, it’s the ROI on email marketing is absolutely insane.

And it’s an untapped opportunity for a lot of different businesses if they have a certain kind of business.

Um, and so I would sell them on, uh, implementing a whole host of email marketing stuff and automation for them.

Um, and it works out really, really, really well.

But again, they got to be on board with it.

They got to be willing to invest in it and give it a shot.

And it has to be the right type of business, but those would be the three, cause those are the three things I use other than content.

Um, people always ask me about social media.

Uh, we should probably hit on this because people they’re like, well, what if I want my thing to be social media?

No, no.

Uh, if you’re a web design and development agency, you are not also a social media agency.

Okay.

We have to be very, very clear on this.

This is coming from somebody who I think does fairly well on social media, given the tiny niche that I operate in.

Um, you can’t, you can’t, you can’t, uh, you know, any, any web design agency selling social media services is selling bottom of the barrel surface level nonsense.

That’s really not going to do much of anything.

If to do social media, right, you have to go all in on social, like you, you have to be dedicated.

There’s gotta be a personality behind it.

There’s gotta be usually like, you know, either film or design something behind it.

Um, that is, you know, very skilled in that regard.

Uh, and, and think about even organic stuff.

Like it’s all personality driven.

So, and you, your agency can’t like be the personality and unless you’re working for very high end clients, not like you’re going to be hiring personality or something like that.

It’s like, just take an average small business.

Take my jujitsu gym, uh, as an example, because I’ve consulted with them, uh, on social media stuff.

And I’ve kind of told them, told them this is like, you guys have to like, I know people at the gym have, there’s some people with a good personality, right?

But you have to put them in a position where they are dedicating hours and hours to social media.

Okay.

They’ve got to be doing a whole bunch of stuff on Tik TOK, on Facebook, on Instagram, uh, in different based on the platform dedicated to it.

Right.

If you look at social media influencers who are racking up tens of thousands of subscribers and views and social media is their full-time job.

Like the idea that you are just going to like, Oh, well we have this add on social media package.

Like what you have an add on social media package.

Oh, what were you going to put out a few posts a week of like memes and graphics and sales and shit.

That’s not social media.

That’s not social media.

Um, so yeah, you, if you’re going to do a social media agency, you got to go all in on being a social media agency and you got to hire a lot of fucking people.

Um, cause it’s a lot of work.

And, um, if, if you don’t have the clients to pay for it, you’re going to have to coach the clients on how to do it.

And then there’s the question of, are they actually going to execute to the level they need to execute at social media is a beast in itself.

There is no add on social media service.

There’s no, well, we designed the website and build the website and then we just do social media.

No, that’s, that’s maybe there’s an edge case where some, somebody employing some super secret shit.

I don’t know about, but from what I know of social media, you have to be dedicated to social media and you have to have personality and narrative and skill, uh, and a lot of time, a lot of time.

Okay.

Does your mom know she is famous here on your channel?

She has no idea as much skill as she has in building websites.

That’s as much knowledge as she has, as she has of her, um, notoriety and fame on WDD live.

And I want to keep it that way because the one day I do put her in front of a screen with a camera on, it’s just going to be magic.

It’s going to be every, you’re all going to know her and, uh, it’s going to be absolute magic.

And we’re going to let her use, I don’t know, an element or a divvy or something.

That would be, that would be super fun.

Mom, here’s the thing you need to build, have at it.

Now, the reason we haven’t done this yet is I haven’t come up with the format.

What is, cause we’re all not going to sit here for four hours to see if she can get a heading on the page.

Okay.

Like nobody has that level of attention.

So how do we, how do we manage it?

Like we got to put her in the seat.

We got to turn on a camera.

Should I, should it be a time lapse?

Should that, is that what we should do?

Like time lapse it?

Um, I thought of doing like a Mr.

Beast thing.

Like if she, if she does it in this amount of time, like the first section in this, you know, something like five people win a thousand dollars or something.

And then we’ll put the timer on the screen.

We’ll play the music.

I’ll stand there and I’ll, you know, I’ll, I’ll give a play by play.

What, what should the format be?

We got to do something with it, right?

We got to do something with it.

Um, let me know.

Whatever ideas you have.

Let me know.

People are saying the root font size, 62.5% for easier rim calculations affects accessibility since it doesn’t respect user font sizes.

What is your stance?

Uh, those people are dead wrong.

They have no idea what they’re talking about.

Um, now if you do the root font size, let’s pull up automatic CSS.

It’s very easy.

It’s actually a very easy question to answer.

Uh, so this website has a hundred percent as the root font size.

62.5%.

Now if I update should be able to, uh, let’s refresh.

And see how everything goes back to the way it was.

So it doesn’t actually break because automatic CSS just recalculated the entire framework and was like, Oh, we have a new root font size.

Okay.

And so now everything looks the way it’s supposed to look.

Um, that’s, what’s good about automatic CSS.

You can, you can fly, you know, flip back and forth.

Um, now if you did this, well, ACSS doesn’t even let you do it.

Cause the percent is hard coded.

Okay.

Uh, so let’s get, here’s what you would have to do.

So you would have to, let’s go body page settings, uh, custom code, custom CSS.

Okay.

So you do something like this, right?

Um, this breaks accessibility.

So you’re changing and it doesn’t really matter if it’s body or root.

Okay.

You are breaking accessibility because you used a fixed pixel value.

Um, that would absolutely be wrong, right?

62.5% equates to 10 pixels because of the browser’s native root font size of 16 pixels.

Okay.

Um, but it does not break accessibility.

If you did this, which is a shortcut that does break accessibility, but 62.5%.

Anybody who says that breaks accessibility has no idea what they’re talking about.

Okay.

That was an easy one.

We’re almost done and we’re out of time.

So I’m going to do like two more.

Uh, do you use AI for general work purpose, web design, your plugins, text generation, any preference between chat GPT, Claude, or okay.

I’ve only used chat GPT.

Uh, I use it very minimally.

I never use it for content.

I hate it when people use it for content.

Um, I have used the image generation AI.

Um, what’s the name?

What’s the name?

Mid journey, mid journey.

I’ve used that.

I think it’s fun.

I think it’s in some cases it’s helpful.

Um, I, I’ll have to do a whole video on how I think AI should be used.

I do think it’s actually a really good learning tool.

Let’s, let’s say you were going to learn CSS.

Okay.

Pull up chat GPT or something and say, tell chat GPT, say, I am learning CSS.

I’m going to be asking you some questions.

I don’t want you to give me the answers to the questions.

I want you to give me hints.

Okay.

And so you’re setting up your relationship with this, with this AI, a very specific way that is going to facilitate you learning without just doing everything for you.

Okay.

And so you start to ask you questions about CSS and it’ll say things like you’re on the right track, but maybe think about this or whatever.

And it’ll give you little hints and it’ll actually say, do you actually, do you want me to give you the answer?

You can opt into getting the answer at any time, whatever.

But I would try to limit yourself to how much you allow it to help you.

And the hints can be very helpful because they get you unstuck, but without just feeding you a bunch of copy paste code.

Right.

That’s the kind, that’s how I use AI and a lot of like when I’m learning JavaScript, that’s literally what I wrote and told it.

I was like, I’m going to ask you questions about my JavaScript.

I’m going to ask you questions about JavaScript in general.

I do not want you to give me code blocks.

I want you to give me hints as to what I should think about next or what I’m doing wrong.

And then it helps coach me and it helps teach me.

That’s how I think AI can be used really, really, really well.

If there’s anything that involves repetition, like I had a, I wrote a redirect line and I was like, I need to apply this to like all these URLs.

And I didn’t really know how to do it in a spreadsheet.

I’m sure you can use some spreadsheet ninja shit to do it, but I’m not a spreadsheet expert.

Okay.

So I just copied them all.

And I was like, here’s the format.

I want all these lines to be in rewrite all these lines for me.

And it rewrote all the lines.

Okay.

That’s a legit use of AI where we’re just like, I don’t want to do all this repetitive bullshit.

Just do this for me.

Like I already know what I’m doing.

I did it to one line, but I need you to do it a thousand more times.

And it does it a thousand more times.

Those are really good use cases for, for AI.

Did your agency specialize in one flavor of PPC only or keep it broad?

It was only PPC for small local businesses, for service-based businesses.

Okay.

So that was like the, now it wasn’t a specific industry like plumbing or electricians or anything like that.

If you’re a service business, we worked with you.

And that was actually the kind of the fun of it because we had to figure out how to make the funnels work based on what we knew about the SEO and the company and the offer and all this other stuff.

So that’s where the creative aspect of it comes in.

I actually don’t like niching down that specifically because you turn yourself into a factory where it’s like, you’re just churning out the same shit every single day and it doesn’t tickle any of your creativity.

So, but yeah, we weren’t like, oh, e-commerce, come on in.

We’ll do your PPC.

No, that’s not what we were doing.

All service-based businesses and all local businesses or regional, they could be regional businesses too.

But it was kind of focused in that regard.

Okay.

One last question.

Actually, let me go to the chat real quick.

See what people are up to.

I do dislike the fact that I can’t see the chat while I’m in the questions list.

So I’m a little disconnected from the chat.

Okay.

CSS appears to have been correctly in video column attributes.

Okay.

I wish I could put the, you know, I can’t even put the chat on the screen either.

I really need to look at some, how can we expand this out to make the experience a little bit better?

I’ve been a Divi designer and Divi builder for six years and I’m a semi expert.

I’m now moving to bricks, ACSS frames and finally learning CSS.

Yeah, that’s fantastic.

That’s from Marl.

I think that’s how you pronounce your name.

That’s absolutely fantastic.

That’s good.

And, and it’s not that these tools like Divi and Elementor can’t give you like some confidence to like, oh, I can, I can do things.

I can simple concepts.

Like there are things you’re going to learn, but you’re just missing so much of the fundamentals.

So, but if it gives you the confidence to commit to learning the fundamentals, then that’s a good segue.

Man, there was a lot of questions I’m now seeing that were not hashtagged.

So they were, they were being skipped.

Okay.

What quirk irritates you the most?

That’s tough.

That’s tough.

I mean, the max width thing, cause it actually breaks a feature in automatics.

Everything in automatic, we’ve been able to find a workaround for, and that is one feature we cannot find a workaround for.

Do you mostly use 1366 as a base break point?

I use that as my content width for the most part.

Yes.

You got to use your imagination.

Let’s see.

Okay.

All right.

I guess we’re, I guess we’re, we’re ready to wrap this thing up.

I didn’t see any other, any other questions that stood out.

Use your iPhone to look at live chat.

I guess I could do that.

I can bring up the YouTube app, but then I got to remember to do it.

It’s very manual.

Okay.

When, okay.

We are, we already answered that question.

I’m trying to find one last question.

Get off, get out of here on.

Okay.

Okay.

Viewable.

Oh yeah.

The homepage is viewable.

Okay.

That’s fine.

Whatever.

Yeah.

I’m about to, I’m about to essentially delete all of those pages.

I know you could probably get there if you, you know, search for them or whatever.

Uh, if I need to disclose here to CPT.

Okay.

Just, just found Tony’s post on, please check your caches and other things that break your site.

Not sure if this is the right place, but wondering if you could show workflow for checking for possible error.

Um, we’ll end on this.

Yes.

Let’s let’s make sure everybody understands this.

Obviously websites are very complicated.

Obviously we have a builder environment.

That’s very complicated.

Then when you add additional builder environments in that complicates things even further, then you have a panel like ACSS, which lives inside of the builder environment or lives on the front end of the website.

And then people have all of this optimization stuff running.

So this is JavaScript, right?

Automatic CSS is built in Svelte.

And so it is, it is JavaScript and a bunch of people like there’s other scripts running.

Uh, the builder runs scripts, plugins run scripts and all of this stuff.

Automatic CSS doesn’t contribute to front end performance because it doesn’t load on the front end for logged out users.

Uh, so there’s no implications there, but other scripts do run on the front end.

WooCommerce scripts run on the front end.

Um, any other plugins that you have.

And so people are like, well, those things are causing performance problems.

And so they implement caching.

They implement, um, deferring and delaying JavaScript.

And a lot of these people, it’s like the page builder situation.

They don’t know technically what is actually happening with the deferring and the delaying and the caching.

And then they’ve got caching plugins, but they’ve also got server caching, but they’ve also got cloud flare, but they use, I mean, this is chaos, chaos, right?

And so what in, when, what inevitably happens, what a fucking complicated word that is, um, is they install these things like plugin, plugin, plugin server, server, server.

And then they open automatic CSS and like, it’s broken.

Uh, it’s not working.

Like granted, it’s not bug free.

Cause no software is bug free, but there are just an endless stream of, I, I did all this shit on my website with plugins and caching and delaying and deferring.

And, um, why is my dashboard broken?

And it’s like, well, because of all those things, right?

Uh, now you can exclude, you can put exclusions in so that automatic CSS still works and is not affected, but we have to walk them through that.

Right.

But the worst by far is the, I changed something in automatic CSS, which we know works like a fa like thousands of people are doing it every single day.

I’m doing it on live streams.

I’m doing it here and there every single day.

And it’s clearly working.

And the person is putting in a thread, like, why isn’t this working?

And this stuff never works.

And they’re, you know, it’s not just a, it’s okay.

If it’s like a, Hey, why isn’t this working?

Um, it’s still kind of annoying when it’s just, it’s a simple thing, uh, that it’s like, dog, you’ve got 18 caching layers.

Like, and they’re like, I cleared my cache.

I’m like, you did one of them.

Uh, but the other 17 caching layers that you’ve got on are still, are still caching the thing.

Um, and so, you know, we, we just have to explain ourselves like, like a thousand times a day for the same situations.

That gets a little bit frustrating.

So then Tony will create a thread, like guys, guys, guys, you can’t have 18 caching layers and ask us why you can’t see your changes on the front end.

And the notorious thing will always be like, it looks good in the builder, but it doesn’t look okay.

It looks good in the builder because the builder is not cached.

Right?

So that’s a clear red flag indicator that is probably a caching issue.

Um, but what we’re trying to get, you know, people to learn is managing the caching, but how do you teach them how to manage the caching?

You can’t, you can’t put a video on how to make, cause everybody uses different caching layers and types and all this other stuff.

If you use grid pane, you’ve got two different caching layers that you can add at the server level.

Then God forbid somebody throws three caching plugins on top of that.

And then you’ve got people with open light speed who you go on the light speed panel.

It’s fucking, there’s 400 switches.

Right?

And what, who knows what configuration they’ve gone with, right?

Every different configuration that’s imaginable in there could have different implications.

It’s the responsibility of the website owner to understand the options that they’re adding and the caching layers that they’re applying.

Hopefully so they can manage these things on their own, right?

And deferring and delaying JavaScript.

We got to know what our tools are doing so that when it creates a problem, we can go manage the problem ourselves and not inundate plugin developers with why are my 17 caching layers and 18 levels of JavaScript deferral and delaying breaking the, it’s obvious why it’s breaking.

It’s all the stuff you’ve done.

Okay.

And so you have to unravel that.

There might be plugin conflicts, right?

Because think about one person saying, why did this break on my site?

Okay.

Send us a login.

Now we got to log in.

Fuck.

You got two factor authentication.

Okay.

So I’m going to spend my time messaging you back going, I can’t get in because it’s two factor authentic or the password you gave me doesn’t work.

These are just hours of time get eaten up on this kind of stuff.

Then we managed to get in and it’s like, what is going on?

Like with this wild west of a WordPress install, we got to go diagnose every plugin.

I mean, we could spend an hour on this one person’s install.

And then the end conclusion is they didn’t even save the setting or something like it’s something so simple, but we just went through this diagnosis process that took an hour long.

And now we got to do it for the next person and the next person and the next person.

And we do try to keep up with it as much.

Like we try to go above and beyond and do as much as we possibly can.

But some things just come down to the user needing to understand what the hell they’re doing with their server configuration and their plugin configuration and their caching level.

If you’re going to install all this on your website, then it does.

It is important that you understand what it’s all doing and how to manage it.

A whole tutorial video on caching cookies, servers, hosting plugins, and basic terms and differences between all these essentials would be so helpful.

Yeah.

I almost think we’re going to need to do, we need to do like a round table with some experts on like performance.

And by the way, they’re going to all debate with each other on like how you should go, you know, approach all of this stuff.

It’s a discipline in itself.

It’s, it’s people ask me, um, how do I learn copywriting?

Well, you can’t, you can’t learn copywriting.

Um, you can study copywriting.

That’s what you can do.

You can’t learn it.

You can study it.

It’s an area of study.

And the more you study it, the better you will get at it.

And the more you practice, the better you will get at it.

But there is no like, go, here’s, here’s this copywriting course.

Go take it.

And you’re a copywriter.

Congratulations.

That’s not how it works.

Right.

Um, even CSS, CSS is, yeah, you can do a course and get comfortable.

Uh, but it’s an area of study because it’s always evolving as well.

Right.

Caching is always evolving.

JavaScript deferral perf matters.

These things are always evolving.

So they always change.

And so it’s important for people to be involved in the discipline of it.

Um, and yeah, that could start with a round table.

That could start with a video that could start with a whatever, but people do need to kind of like you’re in this field.

This is the field you’re working in now, the other thing you can do, which is what I’ve done.

You hire and you say, you know what?

I’m not managing all this shit.

I’m not managing grid paint.

I’m not managing DNS.

I’m not, I’m not managing caching.

I’m not managing performance.

I’m not, I hire somebody and go, that’s your job.

Welcome to the team.

Hey, all right.

Here you are.

And then, um, if there’s a problem, I go, Hey, doc, there’s a problem.

You fix it.

Right.

Uh, I don’t need to worry about it.

So you don’t need to worry about this.

That same thing with copywriting, right?

The idea that you’re going to design and dev and then write the copy and then do the SEO and then do the PPC and keep up with all this stuff and then do the caching and then do the security and then do the, Whoa, what are we doing?

That’s not possible.

One person can’t do all these things.

This is why I feel that the idea of starting a solo thing business doing this.

Um, if you’re going to be a freelancer, let’s, we’ll close out on this.

Is that the third time I’ve said, we’ll close out on this.

We’ll close out on this.

If you’re going to be a freelancer, freelance, don’t be a freelance.

I do, I do it all.

Okay.

Let people hire you for a specific thing that you’re an expert in, right?

You could be a freelance copywriter.

You could be a freelance security expert.

You could be a freelance developer, uh, like on like a page builder, or you could be a freelance JavaScript guy, or you could be a freelance PPC person or what those things you can freelance.

Don’t be a, if you’re going to be a, Hey, I want to get clients and I want to, I want to give them the whole package.

I want to manage their website.

I’m going to do everything for them, help them with the market.

You need people now, dog.

Like you can’t, that’s not a, your, that’s not a one person job.

Okay.

So you just elected to be an agency.

Congratulations.

You now must assemble talent.

Okay.

Otherwise this is going to be a shit show.

And by the way, it’s going to be way too risky for the client.

I mean, the idea that all this stuff, even if you were really, really, really, good at everything that it flows through one person, that that’s the bottleneck, that that’s the security risk.

That’s not even a good situation to put your people in your, your clients.

Okay.

Um, so if you’re going to freelance, pick a lane, pick a lane and go down the lane.

If you’re going to be a, Oh, I love the entire, I love this whole industry.

I love everything about it.

And I want to do a lot of different stuff.

Okay, good.

You just opted into being an agency.

Now assemble some talent and the weaknesses, anything that is a weakness on your part, like when you’re page building and you don’t know why, you don’t know why the cache hasn’t cleared on the front end.

You don’t know why the deferred JavaScript is breaking something.

That’s a sign that you need to hire somebody that actually does know that side of things.

Okay.

Bring them in to help you.

And now you can just hand it off and it’s all fixed and it’s all resolved.

Right.

Uh, we have an epidemic of people trying to do too much.

We have an epidemic of people trying to do things that are not really qualified to do.

Um, that’s what page build is like elements or divvy actually allow that in mass.

Um, we have an epidemic of people not wanting to learn the craft.

Right.

Uh, and, and so craftsmanship, I think is a big, important part of professionalism.

Um, and that’s why I’ve dedicated so much education to craftsmanship, uh, and workmanship and quality and crossing T’s and dotting I’s and accessibility and knowing what you’re doing and yada, yada, yada.

I was just having a conversation with Dave Foy, um, this morning actually.

And we, we talked, I talked about this concept of people being like a, um, what’s it called?

What’s it called?

Imposter syndrome.

You have imposter syndrome, right?

There’s two types of imposter syndrome.

Let’s close out on this.

Now, see, I’m now I’m just trolling you.

I’m just trolling.

Uh, there’s two types of imposter syndrome.

A, this is the legit imposter syndrome.

Okay.

And I’ve talked about my designer friend a lot.

Fucking talent up the wazoo.

Clearly knows what he’s doing.

Would blow any, just get 30 random designers and put them all in XD or Figma.

The guy will blow their sock, like technically speaking in design and actually technically speaking in the tool, put them in illustrator.

He will drown them.

He will take them into deep water and drown them.

He knows every part of it.

And he’s an amazing artist.

Okay.

People like that have imposter syndrome and it doesn’t seem to make sense, but you see it in what they charge people.

They undercharge dramatically.

They’re insanely talented and they undercharge dramatically.

Like $20,000 for a logo is what he could be charging.

And he might charge $1,500.

Okay.

Okay.

Dramatic undercharging.

And that speaks to what?

Imposter syndrome.

Okay.

The idea that I’m so insanely good, but I don’t know it and I don’t believe it.

And that is the real imposter syndrome.

How do you get out of that therapy or like somebody shakes you and they smack some sense into you and then they coach you on like, no, no, no, no, no.

You’re going to go in and you’re going to charge them 10,000 for this one.

Okay.

10,000.

Just do what I say.

I know you’re sweating bullets.

I see that.

You’re going to charge them 10,000.

That’s the number you’re going to say.

And then they’re going to pay it.

Okay.

Because of your portfolio.

And then they go in and they say, 10,000.

The guy’s like, yep, 10,000.

Here you go.

And they’re like, Oh, light bulb goes off.

And you’re like, yeah, exactly.

Now you’re never going to do 1500 again.

Now the next one you go in, you’re going to say 15,000.

Oh, I see you’re sweating bullets again.

You’re going to say 15,000.

And then you coach them and you force them to do it.

And it breaks them out of this ridiculous reality in their head of I’m not actually that good.

And it’s like, no, you are that good.

And you’re going to charge for it.

And now I’ve saved you.

I’ve rescued you from this imposter syndrome.

Great.

Imposter syndrome B.

You know what imposter, now a lot of people are not going to want to hear this, but you probably need to hear this.

You will have imposter syndrome because you are an imposter.

You don’t know what the fuck you’re doing.

You’ve spent three years in Elementor and you can assemble in Elementor.

But in the back of your mind, you kind of know, I don’t know what the fuck Elementor is doing on the back end back there.

I don’t know what this code means.

I don’t know much of anything.

And so you, you undercharge for sure.

And you stay low level.

And you kind of have this sense that like, I’m an imposter.

And it’s because you are.

Right.

And so how do you escape that version of imposter syndrome?

Well, you learn, you commit to learning.

That’s it.

That’s it.

You commit to being better.

And so that was what page building 101 and actually the philosophy.

And I told, I was in the conversation with Dave Foy, which was a very productive conversation.

And we should have more of these open conversations and record them and do live streams.

This would be great.

But what I told him is, let’s go back to the fundamental flaw of page builders.

What was their assumption of the people that will be using them?

The assumption is either A, they’re too dumb to learn, or B, they have no interest in learning.

So you, if those are your two assumptions of your user base, you have to create a dumb tool.

Okay.

And that’s exactly what they did.

Those are dumb tools for a dumb user base.

And I’m not, I’m not insulting the user base.

They insulted the user base by making the tool the way that they made it.

Okay.

And I said, that’s a false assumption.

I, my assumption is people who are coming into web design.

One, it’s a highly technical field.

The idea that you’re going to come into a highly technical field and be able to do so much without knowing anything is laughable.

It’s insane.

That if that is your premise, then you’ve already failed.

That’s, that’s, that premise is fundamentally flawed.

It’s like, if I was going to go into brain surgery and I show up on day one in the brain surgery office and I’m like, make it easy for me.

It’s like, it’s not really that easy.

Or I go work on rockets at NASA and they’re like, ah, it’s not quite that easy.

You’re going to have to, there’s going to be some prerequisites.

There’s going to be some things you have to learn, right?

That’s web design.

I’m not saying it’s brain surgery, but there’s a lot of shit to learn.

There’s a lot of prerequisites.

There’s a lot of education involved.

There’s a lot of shit to keep up with.

The idea again, that my mom is going to open Wix or Squarespace and we see the commercials.

The commercials are lying to you.

They’re lying to everybody, but we can see their fundamental premise in the commercial.

You’re an idiot.

Come on in.

You don’t want to learn this stuff.

Come on in.

You can still build websites.

And not only is that wrong.

It’s not even true.

Put my mom, again, put my mom in front of Wix or Squarespace or WordPress or whatever.

She can’t use it.

Nobody can.

Nobody off the street, grab any random person off the street and put them in front of these tools and say, here’s what you need to build.

How long will they be there?

How long is it going to take?

It’s not going to be that day.

I’ll tell you that right now.

It’s going to be a long time.

Okay.

They’re probably going to get frustrated and give up, honestly.

Actually, that’s what most business owners do.

How much of our business comes from watched a Wix commercial, tried to build it, got fucking frustrated, hired somebody who knows how to do it.

That is like a number one pathway to agency business.

Okay.

Wix lies.

They figured out Wix lied.

Now they go hire somebody they should have hired in the first place.

Because the fundamental reality is that you can’t just execute in a highly technical field with no knowledge, with no technical knowledge or understanding of what’s going on.

So they created a product for an outcome that’s not even achievable.

And so what I said, counter to the current philosophy is, no, no, no, no, no.

Anybody who wants to build multiple websites.

Now, let’s be clear.

If you want to build a Bunko website, like if my mom was like, I need a Bunko website, like ASAP, our Bunko club is on fire, son.

And we need a website for the Bunko club.

I’d be like, mom, go to Wix and choose one of the pre-made whole websites and just edit some content.

Okay.

That’s your life.

Just go do that.

Right.

You don’t need to hire anybody.

Just go do that.

Did she design a website?

No, no.

She chose a pre-built, pre-made thing and changed some content.

And that’s the extent of what she does.

And she hits publish.

And that, if that’s what you’re going to use the tool for, that’s a great use of that tool.

Okay.

You’re not a web designer.

You’re not going to be a web designer.

You didn’t design that website.

You didn’t build that website.

Don’t fool yourself.

You didn’t do a damn thing.

Okay.

And be okay with that.

Fine.

But if somebody says, I am going to work in web design, I am going to be in web design.

I am interested in web design, whether it’s a hobby, whether it’s a freelance, whether it’s an agency, whether it’s an interest, it doesn’t matter.

If they just say, if they have any interest whatsoever, my premise was they’re not dumb and they actually want to learn.

So what we do is we teach them and we give them a capable tool.

So you pair education with a capable tool and voila, they learn what they need to learn and they do what they need to do.

It’s not that hard.

And by the way, this is proven by Webflow.

Webflow proved this.

Webflow said, we see all you guys dumbing down your tools, appealing to the lowest common denominator, running ad after ad after ad of straight fucking lies about what people are going to be capable of with your tool.

We see all that.

We’re going to develop a tool with actual power that actually speaks the language of web design.

And then what we’re going to do is we’re going to invest millions of dollars into education on how web design works and how our tool works.

And then we’re going to go recruit an insane amount of talented designers to come use our tool and promote our tool.

And bang, they’re a $5 billion company, right?

And they prove that people actually do want to learn.

And if we go back to the imposter syndrome argument, the number one way to get rid of imposter syndrome is to be confident in the work that you’re doing.

The idea, like people, this is the, if you’re speaking to the underlying humanity of the individual, take somebody who has spent five years in Elementor and still doesn’t know the language of web design and somebody who did PB101 and WDD Lives and Bricks for five years and measure their self-esteem.

I can guarantee you the people on Bricks who know what they’re doing, who learn from scratch, who learn the right way, who can actually, who have command and control of their projects, have far more confidence and self-esteem and far less imposter syndrome than somebody who spent the last five years dicking around in Elementor.

I guarantee it.

Okay.

So speaking to a human level, we’re producing more confident, more capable humans with this approach.

And the dumbed down approach is continuing to churn out imposters.

That’s all that that’s doing.

So anyway, I made my decision.

I made, I, you know, I’ve, I’ve shown what I’ve shown.

PB101 has, has been wildly successful in terms of educating people.

I literally get emails every single day from people that were like, you rescued me.

I was on Elementor.

I was on Divi.

I was on Beaver.

I had no idea what I was doing.

I did PB101.

I’ve been doing this stuff in Bricks, putting it into practice.

I’m building better sites, better projects.

My clients are better off for it.

And they wanted to do it.

That’s the thing.

This, this idea that people don’t want to learn.

What is our industry going to become if our underlying philosophy is nobody wants to actually learn how to do what they’re doing?

What other industry is busy saying that?

Right.

Imagine like photography.

I like, you know, I’m, I’m interested.

Imagine if all photography was guys, guys, guys, guys, guys, guys, guys.

Nobody wants to learn the principles of photography.

Okay.

All we should focus on is auto cameras.

Everything’s auto and presets, preset everything in Lightroom and can’t, people don’t actually care about photography.

That’s not what they, they just want the photos.

That’s all they want.

No, no, no, no, no, no, no, no, no.

If you’re going to be a professional photographer or you’re going to be a hobby photographer that actually has confidence in their skill, right?

And actually enjoys the workmanship and craftsmanship and skill of photography.

You do want to learn photography, right?

So the industry can’t be actively working against you saying, uh, you don’t want to learn all that stuff.

Auto, everything, auto, preset, everything.

This is how you dumb down an industry and make it valueless.

This is how you make it not anything anybody wants to participate in.

Okay.

That’s my rant for today.

We got to get out of here.

I’ve got so much shit to do.

I did a little bit longer because you know, it’s, it’s a holiday week and we’re just having fun and we’re hanging out and, um, you know, half the people have already left and that’s okay.

Cheers to them.

Uh, no more questions.

I see more rolling in.

No more questions.

Uh, let’s get out of here.

Let’s get out of here.

Drop comments, hit a like, hit a like.

The streams don’t like themselves.

Contrary to popular belief.

Uh, you do have to hit the like button.

So hit the like, drop some comments, come see me in the inner circle.

Come see me in the ACSS community.

Come see me on Twitter.

Um, love you guys.

I’m out.

Peace.