WDD LIVE 035: Tabs Component/Frame Sneak Peak + Web Design Business & Dev Q&A/AMA

0:00:00 Good morning everybody. Let’s go to the chat here.

Say hi, I am back from fall break, feeling a bit re-energized. What’s up Dan, what’s up Andrea, Chris, Marcus is here, William, Steve, Lucian, Mike, Vince, Good morning. Hey, before we start, throw up some likes on this stream.

All right, let’s talk about the agenda for today. WDD Live is all about, it’s all about web design. And a lot of times we do in-depth web design critiques.

Sometimes we take a look at page builders. Sometimes we take a look at sneak peeks of things. We’re gonna be doing a little bit of that today.

We do like to dive deep on all different topics of what it takes to make a website successful. And then on the business side of things, what does it take to make an agency successful? And today you are going to get the opportunity to ask any questions that you would like.

They could be on business. It could be on marketing, pricing. It could be on the dev side of things.

It’s really up to you. This is a Q&A AMA episode dedicated to that primarily, but to warm up and to get started, we are going to take a sneak peek at two new frames, and we’re gonna do a little bit of a breakdown of these frames because there is, you know, an opportunity for some education and some insight when we take a look at these two frames. And you might have questions about these frames that we can answer.

You know, technical questions is fine. Anything that you guys would like. Then we’ll just move into pure Q&A, AMA, open topic, anything goes.

Okay? All right. What’s up, Admiral?

What’s up, Edward and Max? Good to see you guys. Ruben, good to see you.

Mafia. The mafia is in the house. Mafia salesman is in the house.

Mafia salesman says hello everyone. I don’t know if I should be worried. I don’t know what a mafia salesman even is.

Max is already lighting it up with questions here. Do you have more insight into Bricks components? Can you give me more?

Give me more insight. What do you need? What do you need on that question?

I’m not sure which direction you want me to go on that. Okay, questions need to say question or queue before them. That way I can sort them easily.

We all know what he is selling. I don’t I don’t what it what is he selling? What is the mafia salesman selling?

I don’t know. Yossi and says hello from South Africa. Johnny Hello from Denmark.

Oh, john is also here from Denmark. We got a john and a johnny that must be a popular name in Denmark. Sylvia’s here.

Hello, Sylvia. Good to see you. Andre is here.

Good to see you, Andre. Okay, let’s go ahead and get started with the sneak peek side of things. We got a good little viewership going here.

More are going to join as the stream propagates. Let’s go ahead with some screen sharing action. Okay, the first one I want to take a look at I was actually just gonna do Our new we’ve got a tabs component that I want to take a look at we’ve got a new tabs Frame to go along with that component that I want to take a look at but then I you know I thought why don’t we just pull up the table as well because this actually got a lot like People were way more hype for this than I expected them to be You know, it’s something that was requested a while back and and tables is one of those things where if you need a simple table there are pain in the ass to create in a page builder.

I mean there are pain in the ass to create in general. There’s some mobile challenges when it comes to tables and with the table guys by the way we’re talking about like a semantically accurate table. We’re not talking about a grid that looks like a table.

That’s what you’ll see a lot online. You’ll see grids that look like tables and they’re not semantically accurate tables which also means by and large they’re not accessible. Okay so you have to build a table a very specific way and when you do it a very specific way it’s a pain in the ass.

Now when you need a very advanced table there’s a lot of advanced stuff that you can do with tables. To me now we’re getting into the range of like get a table plug-in, an accessible table plug-in and use that because there’s a lot that goes into it. But if you need a simple table those plug-ins tend to be overkill.

And so a bunch of people requested a table and I fought it for a long time like I just use a table plug-in just use a table plug-in. But then I needed a simple table and I was like I don’t want to I don’t want to I don’t want this heavy ass plug-in just for this little table I need so thus this was born. Table alpha inside of frames and like I said I released this and people were way more hyped than I than I expected them to be but that’s good I like I like it when people are hyped.

So we’ll take a little bit of a look at this. First of all let’s let’s go ahead and collapse this all over here on the side. We have table alpha.

That is the actual frame. You can put table alpha wherever you need your table to be. It can be in a section, it can be in a container, it can be wherever you want it to be.

Here’s table alpha. Use it however you would like. Table alpha, the actual table alpha wrapper is a wrapper.

It is not the table itself. You’ll notice that there is a div on this wrapper. This allows you to do some other, just add some padding, add a background color, add a, you know, a wrapper type things, okay?

Just a little bit added flexibility. Inside of TableAlpha, you will actually find the HTML table. And by the way, this is very important.

Like when I talk about builders allowing you to use custom HTML tags, some builders have a little dropdown for the tag, but you’re limited in what you can select. There’s only a few different options, which means when it comes to creating semantic lists, in some cases, you can’t do it. When it comes to creating tables like this, you can’t do it.

And so I’ve said many, many, many times, a lot of these builders, like there’s no need for that limitation. Give us an open ended. That’s exactly what Bricks allows us to do.

You can hit custom. See they do have a drop down with, and this is what it’ll typically look like in a normal page builder. But there’s no custom option.

But in Bricks there is the custom option. You can literally write whatever HTML tag you want. Okay, so that’s very, very important.

So inside of the table, what you’re gonna see is that we have a caption. Okay, this is an HTML caption that goes along with the table. It kind of serves as a header for the table.

This is an optional element. Like if you don’t want it you can just delete it that’s fine. Then we have our header row and you’re going to see this has the custom tag of T head and then we open the header row and we’re going to see a TR okay and then we have the TH’s which are the header cells and then we have the actual data that goes inside of those header cells.

Okay so that’s the header and then in the body you’re going to see we have the T body, and then we have the body rows, our TRs, and then our THs as our data cell. And that’s kind of a header data cell. That’s why it’s a TH, and then we have the TDs after that.

So this is where you would put the critical information. Like if this was a person, this would be like the person’s name right here. And then any other data you want.

And again, you can use this table for absolutely anything. You can ignore the fact that there’s an avatar image in here. This was kind of just to demonstrate, hey, you can put image data in a table if you want to.

Like here’s an example of doing that. But it doesn’t have to be, you don’t have to use this column for images. You can remove the images if you want.

You can have images in every column. Whatever you want to do with this table, you are able to do. And then we have, so just the rows down here, auto alternating on the colors, right?

So as more of these expand out, as more rows get added to our table, you’re going to see that they just auto alternate the color. Notice here on table alpha CSS, it says right there, CSS. So that alerts us to the fact that there is some custom CSS going on down here.

I’ll go ahead and zoom in on this. And so if you’re wanting to customize the table, but you’re a little bit unsure about, hmm, how does this work, right? We’ve put a bunch of very helpful locally scoped variables that you can come in here and just customize.

So for example, the header background color is neutral light. I can change that to any color or variable that I want to. You’ve got your header block padding.

If you’re not familiar, block padding is top and bottom padding. Inline padding is left and right padding. Those are logical properties.

So you can adjust the header block padding. You can adjust the cell inline padding and the cell block padding, the table border width, the table border color, the caption padding, the alternating row color right there. So if you’re like, oh, how do I customize that alternating background?

Well, it’s just right here. You can just change that value and suddenly it’s a different color when they alternate. You’ve got your avatar size and your avatar radius in here.

We put a bunch of little notes in here. Of course, there’s also a bunch of documentation for this table. This is a query loop compatible table.

So literally all you would do is define your headers right here, and then you would delete every row in the table except the first one, and just query loop the first row, and then you can pull all of this data in dynamically, which is fantastic. Okay, so it’s accessible, it’s query loop compatible, it’s easy to put your data in, it’s easy to customize the look and feel of this. Now the question is, what happens on mobile devices, right?

Well, on tables, the thing that happens is the header, actually, these items right here, the things that give context to the data, right? So if this said like, headshot or something like that. So here’s all the headshots, okay?

But on mobile, the header cannot stay with the data of the table because of how the HTML structure is, right? And so what we end up having to do is we end up having to remove the header row. The header row disappears, which puts all of your data together in their row cells, right?

But with no context anymore. There’s absolutely no context whatsoever to what all of that data means. And so if you look at the approaches that are recommended and that people tend to take for this when they’re using semantically accurate tables, what we use is data attributes, okay?

So there are data attributes on these data cells and we’re going to open this up and we’re going to see that we have a data cell and then a data label and this becomes the contextual label for the data on mobile devices. Okay so what you put here is what shows up right change this to name and we’re going to see that when we go into the mobile area. Now what’s good about using data attributes for this is if you’re doing a static table you could just put these this static data name in or if you’re using a dynamic table if you’re using a query loop you can easily just use dynamic data here and the data attributes will populate themselves just like the data in the table is populating itself.

So it’s still even on mobile fully compatible with a query loop and dynamic data and all of that. So this is a really, just a handy thing to have. Again, if you needed a basic table, but you were like, I don’t want to do a table plug-in, I want to try to build this myself from scratch.

If you don’t have a lot of experience building tables, one, you may end up building it wrong. Two, I mean, you’re probably looking at one to two hours of work. You know, one to two hours of work to just build this all from scratch, get it styled up, get it working the way that you want, making it mobile responsive.

Who wants to do that one to two hours of work when you need a table, right? It’s just a headache, okay? So, and we’re just reinventing the wheel.

So, Frames comes along and says, oh, don’t worry about doing that one to two hours of work. In some cases, for some people, it’d be two to three, four hours of work maybe, especially if they’ve never built a table before, because you’re having to go in and research, okay, what has to happen next, what has to happen next? Okay, so now we’re three to four hours of dev time just sucked into this stupid little basic table.

With frames, you just add it in two seconds and you’re off to the races. Okay, let’s get rid of that one. Let’s go take a peek at the chat real quick.

I see some, let me star these questions here. I’ve got some questions I’m going to star from SK from Max. Oh, got like, oh, okay.

Two, two from Max there. Bricks quickly or you can build more. Okay.

Make sure your questions guys have a Q in front in all caps or the word question in all caps, something where I can differentiate. Okay. Let’s do one more.

This next one is super fun. Super fun. This uses the new frames tabs component.

So if you’re not familiar, frames is the component library for frames is getting very, very robust now and valuable. And I will say this, the price will be the price of frames will be increasing soon. I don’t have a specific date for it, but when we first launched frames, none of these components existed.

And these components are extremely valuable. We feel a lot of, most users feel, I would say, that even though some of these components exist natively in bricks, the ones in frames are better, more accessible, more flexible, you can do more with them. And I think what I’m gonna sneak peek to you today is an example of that.

But look at this library that’s being built out now. Okay, so we have the frames tabs component. I’m gonna go ahead and add a section here.

And then we’ll go add the tabs from frames. Okay, so frames tabs right here. And this is basically what you get when you add a tabs component from frames.

You get your tabs, you get your content area, and it’s up to you now to, just like any native component that you add, it’s up to you to add your data in, to style it up the way that you want, and there’s a lot of examples of how tabs can be styled. This is where frames comes in, right? The actual component side of things is a blank slate.

You can build it from the ground up, do whatever you want with it, but a lot of people are like, well, I would just like to use one that’s already pre-styled for me, pre-done, and has a lot more stuff going on. Like, for example, this just has text in the tabs, yeah? But what if you wanted images in the tabs?

What if you wanted two pieces of content in the tabs? What if you wanted a grid, almost, inside of the content area? Well, we can have presets for those.

Not presets on the component, but presets in the form of frames that can just be added and the frame uses the tabs component and it’s all, you know, not fully styled, but it’s more stylish. And it makes it a lot easier for you to customize. And it does things that maybe you don’t really know how to do, okay?

So let me go ahead and delete that. Let’s just go to templates and let’s bring in Feature Tabs Bravo. Now, I’m actually gonna rename this.

We just had a discussion about, should we make the names a little bit more generic? Like, you could actually use this for services, you could use this for features, you could use this for people, you could use this for a lot of different things. So I think just Tabs Bravo is probably the way to go.

So we’ll be kind of renaming this. But I’m gonna go ahead and insert this and now you see like oh, there’s a lot more going on here, right? So we have tabs now with images in the tabs.

You’ve got your heading in the tab You’ve got this little description in the tab. I’m gonna my zoomed in. Yeah, I’m zoomed in Okay, so here’s what it looks like.

It supports five tabs natively Let me go to the front end and take a look at this Okay, and you’re also gonna see all this interesting it has a different color per tab now this is not required okay and we’re going to take a look at why this is and how and what controls this and this is why I wanted to dissect these frames a little bit because there is a lot going on here where you could just learn by dissection just like of okay how was that exactly put together so we can look at this together then the content area is a little bit of a grid. It’s got support for two images to go along with your content here. You know, a lot of people will ask like, you know, is the accessibility there?

Absolutely. You can keyboard navigate through this entire thing. A few people asked, Hey, what does this thing look like on mobile?

We’ll take a look at that as well. But yeah, this, this tabs component is pretty, it’s pretty fire, right? So it’s exactly the tabs component you just saw a second ago, like that had no styling whatsoever, and we just added the styling to it.

We’ve got the negative border radiuses going on, we can take a look at how that was achieved. So let’s go ahead and dive in, because I think this is a fun little frame here. Okay, oh, actually, let’s look at mobile first.

Okay, so that’s the big question. What happens on mobile? Well, that happens right there.

So we go from tabs, you guys know, like tabs on mobile can be very annoying, right? The tabs like stack and then the content’s way down here and then you gotta keep scrolling up and down to like, oh, choose a new tab, then scroll down to where the content is. Oh, I wanna choose a new tab, I gotta go back up and then come back.

No, no, no, no, no. So one of the great features of our tabs component in frames is that it will automatically convert itself to an accordion on mobile devices. So as we go down, you’re gonna see it’s just like, all right, I’ve run out of room, we are now going to be an accordion.

And the image goes next to the content. I’m gonna go ahead and refresh here. And I’m just gonna open it, and you see there is our content there.

And then if I want this tab down here, I can choose this tab. I still get the color, right? And again, the color is optional of whether you want that to be a different color for each tab or not.

The reason why we did this is a lot of people like to color code their features or color code. There was one person who was doing a, it was an e-com site. What was it?

It was like, it was vapes or something, right? And every brand of vape that they sell, they like color code the brands, right? And so they wanna change the color based on the brand the person’s looking at.

You could color code your people, you could like, whatever you want, it’s just an option, it’s an option. And it’s a unique way that we did it because it’s all query loop compatible. This whole thing is, you can generate this from a single query loop.

And you can even color code it from the query loop, right? It doesn’t use int child, that’s, you know, we had to make a decision of like, should we color code it based on the position in here? Like the second child is this color, the third child is this color, the fourth child is this color.

Plus, keep in mind, these are two separate DOM elements. Right, this tab and this background right here are not tied together. Even though they visually appear tied together, they’re two separate elements.

They need to always share the same exact color. And then how do you make that query loop compatible? You know, that’s a question.

So we’ll take a look at exactly how we did that. Okay, so we’re gonna go in here. We’re gonna go to Featured Tabs Bravo.

Now, on the actual component itself, you can control a lot of it just from this one panel right here, right? The accordion behavior, the tabs wrapper styling, the tab styling, the active tab styling, the content styling. You’ve got some accessibility options here.

But we did put a lot of custom CSS in here. And then we used some locally scoped variables again to make this nice and easy. So we have the container background.

This is the container right here. And then we have the tab padding. So the padding inside the tabs.

And this is actually critical because the tab padding influences, has to influence the border radius. We actually had a discussion in this. Just to let you guys know, you know, what kind of goes into frames here.

Let’s go to tabs, you know, and taking feedback from the, oh there it was, featured tab, bravo. Feedback from the community, you know, before these things are released I like to do sneak peeks, especially of these ones that are a little bit more advanced. So here’s the sneak peek I posted.

Then we go down, you know, and shout out to Pedro, right? Pedro’s like, hey, I love it. Please make sure the inverted border radius is concentric relative to the radius of the cards, tabs, items.

It will look much better, okay? And then he even gave me like a little code pen example of what he meant, all right? And so, you know, a little bit more discussion later, a little bit more changes later.

Okay, so what effectively has to happen? If you notice the radius of these elements inside, this radius is different than that radius. Same thing on the inverted radius, same thing on this outer radius here versus the radius on these images.

And so to sum up what’s happening here, you’re gonna set a radius on your items inside. This is the desired radius of the things inside of the tabs, right? And then the outer radius of the actual tabs flowing down here is a, and it’s you take that radius and you add the padding, okay?

So whatever the padding value is gets added to this radius and it creates this radius, which is like, I guess, you know, a concentric ratio that just looks good, okay? So if you are gonna keep this consistent, that lets us know, hey, we got to define these things with locally scoped variables. So the tab padding has to be a locally scoped variable, and that’s using space S or small spacing, right?

And then we have the tab radius, what do we want the radius to be? And then down here in a different route, we actually calculate the concentric radius. So there’s the calc, and then we use that for the radius in very specific places.

You’ll see where that shows up, okay? But all this stuff, like for example, if I change the tab padding, the radiuses are going to recalculate to fix themselves. If I change the tab radius, all the other radiuses are going to, and everything is going to just continue to recalculate itself.

So it’s like an unbreakable situation. It makes it very easy to adjust everything without screwing things up. You also have your tab gap right here, which controls the gap between the tabs, which also controls the height of the pseudo elements, which also controls the size of the pseudo elements to make sure that you don’t break your inverted border radiuses, because those are not particularly easy to create.

We’ll take a look at how those are created. But the fact that we can just come in here and change a tab gap and, you know, every gap changes without our pseudo elements breaking, that’s really fantastic too. Because these things can be, especially if you don’t know how to create them from scratch, they can be a nightmare, right?

So we want to make them easy to adjust without fear of breaking them. Okay, so let’s take a look first at the colors. How are the colors done?

So if we scroll down here, you’re just going to see this little area of CSS right here. And so we’re using data attributes and the locally scoped variables, right? So you have your tab active background.

So that’s the active color of a background on an active tab. We have data tab name one, two, three, four, five, okay? This is designed to be super generic out of the box.

But what you would do is you would change this, like let’s say you wanted to associate a color with a brand or associate a color with a feature or a color with a service, okay? Let’s take jujitsu for example. So it’s like, I want my jujitsu content to be a certain color, I want my nogi content to be a certain color, I want my muay thai content to be a certain color, I want my kickboxing brand or feature service or whatever to be a different color.

And I want, let’s see, what would be another good one? How about group fitness? All right.

So we’ve got these data attributes here. Data attribute name is Jiu Jitsu, Nogi, Muay Thai, Kickboxing, Group Fitness. Okay, so then I come into here.

And what we’re gonna see is that every tab, right? Attribute, data tab name right here, every tab has that same data attribute okay that’s what the CSS is referencing so if I go back here and I and by the way I would do this all from a query loop but I’m going to kind of show you how to do this you know statically so number two is it doesn’t really matter what the order is that’s what’s good about it right you can make any of these anything I put on no gee is going to instantly be warning light right so I’ll do no gee and we’ll just keep it on the second one for now. So I’ll go down here, tab, and it’s gonna say here, no-ghee, that’s actually the third tab.

Okay, so then we’re gonna refresh. Okay, you see, that changed to yellow, right? Now what about the body?

And now you can see kind of how this is structured, right? So now the yellow is going into a gray. So on container number three, we’re gonna need the no-gee attribute.

Content wrapper, I believe that’s the third one right there. And then so we do no-gee here. So you’re color coding your actual services.

See how that works? Now, how would you do this from a query loop? Well, you’re querying your services.

Your service is called no-gee. You just literally query the name of the service right there. And then you go into frames tab Bravo CSS and make sure that all of your service names are defined right here.

And then you just choose, all right, what color do I want them to be? And because we’re using variables, it’s very easy to swap a variable out. I just threw these in here, but you can obviously use whatever you want.

Primary, any of the shades, secondary, any of the shades, whatever you guys want to do with color coding. But this is how you can use actual named values to match with the color coding versus like inf child one, two, three, which the reason we didn’t do nth child is it forces everything to be in a certain position. In order for jujitsu to be yellow, it would have to be in position three or in position two.

That’s not very flexible. And color coding that in that form or fashion doesn’t live with a position. It lives with the item you’re color coding.

Wherever that item lives, it should still be the same color. This allows you to map that. You map colors to specific items.

You can name those items based on services, features, brands, whatever you want to do. So this adds a lot of flexibility. Now if you don’t want this, it’s literally as easy as just like take this little end of the comment and put it down there.

Did I comment that out? 0:27:11 Okay, hold on.

0:27:12 Let’s go back. I don’t know why it’s not uncommenting it.

Here we go. There we go. All right.

Why? If I take that and put it down here, it should do the exact same thing. Okay, well, let’s just delete it because you don’t need it anyway.

If you don’t want to use it, you don’t have to use it. So now we save and we go back and now it’s just going to be the normal active tab background color, which is controlled from right up here. Tab active background color.

You see neutral ultra light. So now if I just want them to all be the same color I just change the color here they’ll all be that color and we don’t have to do the fancy color code thing it’ll just work like normal okay. Let’s take a look at or is there any part of this that you want to take a deeper look at how about we do this we’ll just turn it over to the chat.

D123 says can you make the card radius and tab radius match. Let me go down into, let me do cuss, okay. So we’re gonna go down deeper into here.

And we’re gonna see, you see everything is kind of sectioned out. So here’s all of the radius styling right here. Here’s the references to the concentric radius on the content item wrapper if it’s not active.

That’s the other thing here is, you know, if it’s not active, we need a different radius situation happening here, right? And once it’s active completely different radius situation is happening if it’s a first tab we can’t have the little thing going off to the left if it’s the last tab we can’t have the little thing going off to the right like there’s a lot of a lot of stuff going on here can you keep the tabs horizontal also on mobile which is a good option if the tab text is short and is often used for mobile apps bricks of exorcism can you keep the tabs horizontal yes you can keep yes you can keep the tabs horizontal if you want to on mobile, it’s up to you. Inner radius is impressive, how do you do that?

Okay, we will take a look at that next. When is this frame available? This frame will be available probably today or tomorrow.

It’s in like final checks right now. Okay, let’s take a look at the inverted radius. 0:29:09

All right, so we’re gonna go in, 0:29:12 and what we’re gonna see, it’s all done from the CSS tab, so we’re gonna scroll down.

So we’ve got our radius styling, we’ve got our tab styling, and then we’ve got this at media, min width media query. So all of this stuff in this media query is only happening at 992 pixels and up. You can put in whatever breakpoint you want there.

So let’s take a look at this. Root tab active, here’s a before pseudo element. And then we have the first active tab styling.

We’re changing the width. The before does a lot of this. Let me see if I can change this to red so you guys can see this thing happening.

Okay, so I’m gonna take out tab active background and I’m gonna change this to red. Now this appears to be one piece happening and this is actually not one piece happening. What we’re gonna do is gonna go down we’re gonna see here’s a right curve and here’s a left curve okay what I want to do for right now I’m just gonna take this out okay so we’re gonna command C that and take it out this is the before element okay so let’s go back to the before element and this notice is filling the gap between so I between, so we had to put a gap in between the tabs and the container down here.

So this is like pulling back the curtain and seeing, all right, how did the magic trick happen? And like most magic tricks, you know, it’s super impressive when you’re seeing the magic, but then when you see behind the scenes, it’s like, oh, it’s a fucking block. It’s like a square, and then there’s a couple of other squares on top of it.

That’s really all that’s happening here. There’s squares on top of squares, 0:30:52

and one of those squares has a border radius 0:30:52 And then we do some magic tricks with the colors and things like that, okay?

So here’s the before so the width of the before element is 100% so it’s got to be a hundred percent the width of the tab right plus the value of the concentric radius Okay times two because there’s two sides and then minus 0. 5 pixels is a magic number to just adjust there was like a minus 0. 5 pixels is a magic number to just adjust.

There was like a half pixel artifact on some of the tabs, not even every tab, just some of the tabs had this weird little rendering artifact. And so minus 0. 5 pixels is just a magic number.

It doesn’t really mean anything. It’s not there for any particular reason other than it got rid of the artifact on all the tabs. So that’s the width of that element the height of it is the height of the concentric radius That’s why these variables all like you would not want to do this with static math Absolutely not and of course it wouldn’t be changeable anytime you change one thing Everything goes haywire, so these variables aren’t like mission critical to none of this breaking Then we have our background color or positioning absolute where are we positioning it?

From the bottom, the tab gap times negative one takes the tab gap value, so the height of the size of this gap, and makes it negative to move that block straight down into the gap. So it always sits perfectly in the gap, it’s always the height of the gap, nothing can break here. Then left 50 percent, translate minus 50 percent is a centering technique for absolutely positioned elements, this with the tab so it always stays centered wherever the tab is that item is Centered with it and it’s always the same width and it’s always the same height whatever it needs to be based on the other values Of the things that are going on here, okay?

Now what we can do is we can start adding in our pieces Okay that are going to go with this so I’m going to come in and I’m going to paste our code back I’m actually going to get rid of our left curve. Okay. Let’s just take a look at the right curve.

What is happening? So this is another pseudo element. It’s an after element.

What you’re going to notice that there would be pseudo elements with pseudo elements which is a problem because if you know anything about pseudo elements you know you only get two of them. So how did we get three of them? So there’s actually a tab itself and then there’s an inner wrapper and I actually made the inner wrapper so that we could have this border radius separate from the other border radius on the tab, but that inner came in real handy when I was like, I need a third pseudo element, where am I going to get it from?

Well, it just comes from this inner wrapper right here. So I’m just using other pieces of this to tack onto. So we come down here, there’s our right curve.

Okay, so we see that, and by the way, this is only when it’s not the fifth child, right? Not the last child in here. Now you can’t say, not last child.

You can’t do that, right? I tried, and then I was like, ah, it’s not gonna work. Because what if the person is like, I want four tabs, I don’t want five.

Like, are you forced to have five tabs? Are you forced to fill this whole entire thing in? No, you’re not, okay?

So we can take out the fifth tab. We can take out the fifth content wrapper. Okay, we’re gonna save hopefully I didn’t just delete the no I didn’t okay good So there we go.

Now we have four tabs Let me zoom out a little bit and of course our CSS is broken But look it’s gonna behave exactly as it’s as it’s supposed to okay now, let’s go back in go back to our CSS Let’s take a look at what exactly is happening with this. So we’re gonna go here, here, here, here, here. Actually, I wanna do cusps, because I want it up high.

Okay, so let’s come back in. Here is the right curve. So we’re taking the background color of the container background, which is like behind the whole tabs wrapper.

That’s white, that could be the color of your content section, whatever it happens to be. We need that to match. Height of the concentric radius, and it’s positioned on the bottom, again, based on the tab gap, and it’s positioned to the right negative the concentric radius value and I’m gonna go ahead and color this different so you can see it.

So we’ll just take this and say, yeah, blue. Let’s go with blue. And there it is.

That’s what that piece looks like. It’s literally a square with the dimensions of the concentric radius and then it has a radius of its own. The border in start radius, which is border in start is the bottom left-hand corner.

It’s the logical property for bottom left-hand corner. And it’s equal to the concentric radius. So there’s that piece right there.

But look, when you make it the background color of the container, it just looks like it cut it out. Right? So you would never know.

And then we add in the left side, okay? And I think I’ve screwed this whole thing up. Let me see.

Oh no, that’s because that’s the first tab Okay, let’s go here We need that second tab to be active in order to see what we’re doing because not first child So this is not going to because the first child doesn’t need a left side The left side only applies to things that are not the first one So again, we’re just doing a pseudo element on the active tab and again width height based on the concentric radius We’re just doing the opposite thing. Okay, so if I change this to blue you’re gonna see there’s the left-hand side but when it’s the container background color it just looks like it magically cuts it out okay and then we put that back if it’s that’s not red it’s the color of our container background then you’re gonna be good to go so annoying right like it’s it’s it’s not the funnest thing to build. And this is a, you know, we talked about the table, table alpha saving you like two, three hours, maybe four if you never built a table.

This kind of thing, I mean, you’re like in the four to five hour mark if you’ve never done this before, you’re trying to do it all from scratch. You’re probably in the four to five hour mark, okay? For everything that’s going on here to really dial it all in, yeah.

So the ability to just drop this in and be like, I want my tabs to look like that. And you try, and by the way, it’s not like a prebuilt component. You can do anything you want with it.

All of this stuff, you can add things to it, subtract things from it, do whatever you want with it. Nevermind, I’m guessing the not last child was just missing and that’s why I did that, yes. Do we need to delete inner tabs?

No, you don’t have to. No, I was just roguely deleting things and it wasn’t so good. Okay, so Ruben has a great question here.

I like this question from Ruben. How would you add a sixth tab? Can you show that process?

So here’s what you wanna be very careful of. There are limitations to tabs. I’ll just tell you that right now.

Tabs is not, you only want to use tabs in certain situations. It would be like services may not even be a good, you know if you had three services okay, because then maybe you had a fourth, you’re still good, maybe you had a fifth, but if you are working with a client where it’s like they could end up with 10 different services, tabs is not the way to go for that, right? You don’t want to put lots and lots of information in tabs, because you are limited in how much room you have.

This is built for five tabs or less. It can have two, it can have three and it’ll look great, it can have four and it’ll look great, and it can have five and it’ll look great. If you want to add a sixth, you have to decide, can I cram a sixth in there?

Now I will tell you, if these were just labels, then yeah, you could probably add a sixth easily. If you’re gonna add a sixth with images in here, you’re probably in a situation where you’re going to have to ditch the images because the images are going to start to get too small to really make out what they are. Um, it’s just, you’re cramming a lot of data in, um, now on mobile, it’s fine because we’re collapsing this to accordions.

So accordion can have as, you know, however many you want in there. I mean, you don’t want to go absolutely crazy, but horizontal space. I mean, you’re going to start to take up the space very quickly, right?

So could you fit a six tab? I don’t know. Can I get a fresh version of this?

Let me see if I can get a fresh version. I don’t think I did. Yeah, I’m probably not going to be able to get a fresh version here.

FR Feature, F Tab, what am I, oh, I’m searching. I don’t want to be searching. FR Feature Tabs Bravo, probably the, just the parent class.

I might be able to get away with just deleting the parent class, so that’s probably where I made the changes. Okay, let’s just, let’s refresh and see. See if we can get a fresh version of this frame.

All right, so we’re gonna bring this in, feature tabs, Bravo. Feature tabs, Bravo. FR feature tabs, Bravo.

Oh, hold on, this is not in the library. I’m pulling from a JSON, okay. That’s why, because this is not actually a published frame yet.

All right, so let’s go in here, bricks. getframes. Hey, don’t steal this frame while it’s active, okay?

I’m just going to publish it for a split second. We’re going to go Feature Tabs, Bravo, just to see if I can get a fresh copy here. All right, publish.

All right, that frame is live in the library. Don’t run off and steal it real quick. I mean, you can if you want to.

0:40:19 It’s not a big deal. 0:40:20

Okay, let’s go here. Let’s refresh. And Feature Tabs, Bravo, bring it in.

See, it doesn’t even have a screenshot yet. Okay, now I’m gonna go shut it off. Let’s go back, edit template, and sorry if you are on your way to grab that frame right now, you can’t get it anymore.

All right, it’s back as a draft. All right, let’s see what we’ve got. All right, we are back in action.

Okay, so here’s what you would wanna do. If you’re removing tabs, you’re just good to just get rid of the tab. Everything should work just fine, be good to go.

If you’re wanting to add a tab, okay, so what we’re gonna do is go into the navigation list and we’re gonna add another tab. So we’re gonna duplicate that. And you’re gonna see that it brings it down here because this is a five, it’s using grid, it’s a five column grid, right?

So it’s gonna start trying to stack them. We’re gonna need another item wrapper to match that down here. And then we’re gonna go in and we are going to see if we can finagle this to be six tabs instead of five Okay, so here is the grid structure right there So if I change the five to a six let me bring this cusp up here, okay good So I change that five to a six That’s not the only thing that I have to do and notice you are seeing now the tabs are Little squished little squished, but I’m going to come down here and I’m gonna look for any references to the fifth child.

So, inf item five is now gonna become inf child six. I’m gonna keep scrolling down and see if I see any other inf references. I know for a fact there’s at least one more.

Here’s a five, just change that to a six. Now, I really wanted to variabilize this, like tokenize that. Hey, just ask about how many columns or how many tabs are in this thing, but CSS vanilla CSS does not support Tokens in inf child statements just like they don’t support tokens in media queries.

It’s a limitation of CSS in SAS You could do this all day, but in vanilla CSS, you’ve got to be a chump You’ve got to come through and find the static references and and do it that way. Okay, so now do we have working tabs? We do.

There’s a little bit of a problem here with this sixth one, which tells me I missed a reference. Ah, there it is, right there. Five to six, save, refresh.

Does it look good? Look at that. So, not hard.

It’s not hard to add a sixth tab. But again, you have to decide, you know, can my content fit? Is my content fitting well?

It’s up to you but I mean you saw like it was not hard right I wouldn’t again wouldn’t go crazy with it seven eight I mean you’re getting a little a little too much for a tab situation right let’s see everyone take the frame when it’s live could we combine this with the carousel to add more tabs. You would not want to do that. It wouldn’t be a good user experience.

You’d have way too much going on here. Let’s see. How does it work with keyboard and add?

Does it jump into the active tab before highlighting the next tab or do users have to tab all the way to the end? That’s a big discussion that we had. I don’t even know if that’s been fully tested.

Right now, okay, so yeah, you see that, how I can go? I’m on the second tab, right? And there’s a text link right there.

If I hit down on the keyboard, it takes me into the content area of the tab and I can just immediately get to links, get to whatever’s clickable inside of that tab. Okay? So I think that’s pretty cool.

You’re gonna see a disaster of accessibility on most tabs. We’ve done our best to button up everything that we possibly can. I think there’s still a couple, like the answer is no, I can’t tab again to get to that link.

I have to use the down arrow on the keyboard right and then you know we’re a little bit out of whack on our tab order which I think we might be able to fix with some JavaScript but bottom line is you know I can navigate everything that I need to navigate with the tabs it’s just not a But I am going through the whole thing. Okay, hopefully that answers that question. Could a horizontal scroll be added?

Yeah, I believe the default nature. So if we go into tabs here, frames tab, bravo. I’m going to be doing a whole video that walks through every setting on these tabs.

By the way, we have a nice, unique little content anywhere setting, which means the container can be actually anywhere on the page. You can put the tab navigation separate from the container. We have an animating the active tab option that’s pretty cool.

It doesn’t work with this particular design that we did because of all these pseudo elements and everything going on, but normal tabs, if you just wanted to animate from tab to tab, there’s a really cool feature for that. Here’s the change to accordion, right? So this determines whether it goes to an accordion on mobile.

You don’t have to do the accordion on mobile thing if you don’t want to. And so at that point you could make these horizontally scroll within their container. That’s a definite possibility there.

So you have both those options available to you. 0:45:58 Let’s see, the inverted radius

0:45:59 doesn’t seem to be concentric. There’s a little too much space right in the corner in what in what corner I

0:46:07 Think the tabs accordion on mobile needs an indicator that it’s an accordion I 0:46:13

Mean you could definitely add that you can you can add that pretty easily. Can we set the breakpoint at which it changes to accordion? Yeah yeah yeah for sure for sure.

So you go to accordion once you see when I mark this as change to accordion I get an accordions area for settings and then it just lets you choose based on the breakpoints that you have active, which one you want to collapse to an accordion at. And then you can also make it like a toggle. So if you don’t want one to close when the other one opens, like you want them just, hey, they can be all open, or they can be all closed, just uncheck this close previous accordion option.

You can change the duration of the accordion effect. You can change the background color, the header. And it’s all taken care of by CSS in this particular frame, but you do have those options available to you.

Da da da da da, Rob says, loving this frame. Thank you, thank you. Yeah, this is a fun one, this is a fun one.

Okay, we’re about to wrap this sneak peek up and we’re gonna go into Q&A AMA. I just wanna make sure there’s no other questions about this. 0:47:36

Mm-hmm, mm-hmm, mm-hmm. 0:47:39 The tone falter again and again only here.

I don’t know what that means. Are you having audio issues? Is anybody else having audio issues?

Okay, love this element. It’s amazing the amount of thought and work that goes into these frames elements, thanks to the team. Yeah, it’s a good one.

I said we’ve, a couple weeks ago, we’re moving into phase two of frames where it’s like we’ve got any basic frame that you need is basically there. And so now we’re moving into now how much fun can we have with like some really advanced stuff that most people probably can’t do on their own. If they can do it, it just takes a tremendous amount of time or it’s a headache.

And a lot of times, this would be great to present as an option to a client in any layout of a page, right, where you think tabs are needed. But here’s the thing, a lot of people don’t recommend this to their clients or don’t propose it as an option in the design phase because they don’t wanna fuckin’ build it. They’re like, oh, we can just do it easy.

Like, you know, maybe this client doesn’t have the money for something like this to justify putting five hours into it, so we’re gonna go with a different layout that’s easier to accomplish, and so you end up with not having something like this, that’s cooler and more interactive and more modernized, right, because you just don’t wanna spend the time doing it or you don’t necessarily know how you’re gonna go about it, and so you just don’t propose it. Now, you know it’s there at the, like, with a click, and you’re like, hey, let’s propose this all day it’s gonna you know my clients gonna be you know really impressed by this and I don’t have to worry about the headache of actually building it I mean that’s it’s just you know phenomenal value there okay let’s see for frames can we make a video autoplay only when the tab is active I think it would be a cool implementation we do that with our modal, but yeah, that would be, first of all, I don’t like autoplay videos. That’s number one.

But, you know, if it’s in a modal, it’s okay for autoplay because the person’s requesting the video. Like, they know they’re clicking on a video to see it in a modal, right? So autoplay at that point makes sense.

I don’t know that I would advocate for autoplay in a tab situation, because they’re wanting the content in the tab that doesn’t necessarily mean that you know they want a video to start playing for them unless it was a tab of videos that they’re selecting video 1 video 2 video 3 maybe then it’s a situation where you would maybe want to autoplay it something we can look into can I add dynamic data in the CSS for the data attributes? I have four posts in a query loop. I had a fifth.

Do I have to go in and add in a new line of CSS to map that new post to a data? Yes, yes, CSS, yes, yeah, but it’s not hard. So you just, you go in like this and you go to style and you go to CSS, you come down here, you copy data tab name equals five, here’s one for six, or whatever that name happens to be, you drop in its color and you’re good to go.

So if you were gonna populate this dynamically, you would wanna know how many items you’re gonna loop, right? So if it’s features that you’re looping, or it’s services, you know, hey, we got four services, okay. So we need to take out data tab name equals five, get rid of that, here’s one, two, three, four, let’s name them what we want to name them let’s set the colors and then let’s query loop it and we’re done right I spend four hours on Monday building and tweaking a template for this for a client starting with Krakus tutorial there’s a huge time saver with more better functionality yeah exactly I mean it’s just that’s why I said like frames pays for itself like if you how much is four hours of your time worth, right?

Let’s get out a little calculator here. We can all do the math. Actually, I don’t even think I, yeah, I do have a calculator, okay.

Okay, how much do you bill? $125 an hour, let’s say this frame took you five hours. $625, is frames anywhere near $625?

No, like you can literally pay for frames the first time you use it. It’s stupid, it’s stupid value. That’s just one frame, one situation.

Forget the fact that you can use frames, just wireframe out page after page after page and charge for every single one of those wireframes. Like you’re generating revenue that you weren’t otherwise generating or that was taking you a long time to generate. The value is absolutely stupid, right?

Like if you don’t own frames or and if you use bricks now if you don’t use bricks I get it you don’t know because like it only works in bricks right now but it’s coming it’s coming to other places but if you own bricks and you don’t own frames I mean it’s just like I don’t know what to tell you I don’t know what you’re just you will just love burning money lighting money on fire not getting more revenue I don’t know it’s a thing that doesn’t it doesn’t calculate in my in my brain can you post something about stuff like data attribute or create a tutorial about it yes I can do a data attribute have we not done data attributes in page building 101 I don’t know that it’s a 101 kind of thing maybe that’s why I didn’t do it yet I probably wouldn’t consider it but I haven’t done a lot of stuff in page building 101 is not 101 now that I think about it Something we can put on page building 101 little data attributes intro Okay, good question. Good question Frames makes me enjoy building websites. Yeah.

Well that that’s so that’s one of the great things about it Something that I’ve expected obviously I can build all the things that we do with frames because I’m building, you know a lot of the frames. What it does for me is, like I just mentioned, try something new with a client. If I want to play around with ideas, I don’t have to build every idea from scratch.

It’s like I can import the frame that gives me most of the idea and then just play with it. And then if I don’t like it, all right, let’s play with a different idea. Bring in another frame.

Play with that idea. And so it makes web design fun again, because you’re not doing a lot of the from scratch chump work over and over and over and over and over again. Maybe I missed it.

Can I use a custom color field as DD when using a query loop to color the tabs? You can certainly use a color picker custom field you’re probably going to need some some JavaScript for that. I’ve never tried it so I don’t know out of the box if Brics is even able to pull in that that dynamically.

We’d have to take a look. But you’re using variables you know for all of your colors so you would you would want to make a dropdown of like, all right, I want this tab to be primary, secondary, accent, base, whatever, or any of the shade options. And you would want to map them out ahead of time.

And this is why guys, you would want to almost design this in Figma first. And so you would choose what the brand colors for each associated feature or person or service are going to be. And then those are just set in stone and then you just make those drop down like a select box I can choose which one I want or it’s all handled by CSS you don’t even need the option right let’s say my colors are mapped to my services so we have plumbing is going to be my action light color so my action light is going to go with plumbing I don’t even need to worry about it I just set that up as a data attribute.

Okay, so you come down here and you say, data name is plumbing. And then I say, action light. And there’s no reason now to choose colors in the service posts.

It’s just linked to the name of the service. So literally you put plumbing as dynamic data, the service name into the data attribute on the tab itself. So when you’re query looping this, you come in and the value would just be the post title.

The post title is plumbing, right? So it’s gonna pull in plumbing here, and the CSS sees, oh, that says plumbing, I’m gonna make it this color, and it’s done. You don’t even need a color dropdown.

That’s what’s great about data attributes. 0:56:20 Can frames be used for a right to left project?

0:56:22 Yes, because automatic CSS is compatible with RTL because we use logical properties for everything in automatic CSS. Now, Brics may do some things.

See Brics, Brics is a little behind on the logical properties thing. Like it’s not gonna use, if you put in padding values here, notice it says padding top, padding left, padding right. These are not logical properties.

So Brics is not compatible, fully compatible with RTL as far as as far as I understand so You’re you would need to be limited to you know custom CSS and automatic CSS Let’s see 0:57:01 Well frames ever become available or usable without having to use a CSS no

0:57:05 No, there’s there’s no point. There’s no point.

Automatic CSS, the consistency, the responsiveness, the variable library, just everything, it just makes life so tremendously easy. I would never want to build frames without it. I don’t want to build anything without it.

It would just be way more work for way less value. So, no. 0:57:37

No. Is it possible to propose for your consideration 0:57:39

a frame structure? Yes, fantastic question. We’re always on the hunt for new ideas.

Like half of my time right now is spent perusing gazillions of websites. Like that’s all I do is study website layouts and what people are doing and you know, have we covered every scenario that we want to cover? That’s the question I ask myself like every single day.

And so if you have an idea, if you found something on a website where you’re like, oh, this is fantastic, and it’s not just like cute or fun, or like it actually adds to like the user experience, it’s actually a very valuable layout. And it’s not like a one-off kind of situation where it’s like, oh, well, this layout would be good, but only for 1% of people in this certain situation. That’s not the kind of layouts we’re looking for.

Like I just showed you, this tab situation could be used for a numerous amount of things. The table, a numerous amount of use cases. And so that provides a tremendous amount of value.

That’s worth building, and that’s worth putting in the library. If you have ideas like that or examples like that, you can come in here into the community in ACSS, okay? And over here there’s a whole frames related section.

So you can go to general discussion over here. You can go to feature requests. Here’s feature request frames.

Just drop in examples. Now don’t just like give us a text. Some people will just come in and be like, you know what would be great is if we had a tabs, you know, pre-designed tabs that had an image in here and they don’t ever show it like there’s no visual example of what they want or what they’re asking for there’s not a lot of detail it’s just a super generic request there’s not a lot we can do with that but if you can give us a screenshot if you can give us a loom if you can give us a whatever you can give us that actually demonstrates what you’re wanting we will build that up for you 100% because we’re always looking for new good ideas.

I like your page builder 101 series would be very helpful hands-on touch of the topics you mentioned in Process is everything to gain the knowledge to provide proper SEO services. We have a bunch of SEO trainings in the inner circle I think would help you out tremendously if you’re if you’re interested in that side of things a lot of what was taught in that process is everything masterclass is Followed up on in depth in the inner circle 1:00:07

Can you do a frame for a gallery portfolio 1:00:10 Yes, but we like so there’s an example, right?

How many different styles of gallery portfolios. So if you can give us an example of one that you like, then we can build it. But it’s hard to just get into your head and wonder exactly what you’re wanting.

Honestly, visiting my old sites without ACSS makes me cry. Absolutely, absolutely. The first thing I do when I open it, because I’ve got a lot of sites that were built before automatic CSS, old client sites and all this other stuff.

And the first thing I do is I just walk right over to this wall and I just smash my head against it about five times, then I sit back down and accept my fate that I have to work on this website without Automatic CSS, without a variable library, without consistency, with static values, with like whatever was done. Whatever nightmare was created on that website, you just gotta live with it, right? Because I’m not into rebuilding sites for free.

So it is what it is, but once you’ve used it so much and it’s like, it’s your workflow, you go to a site that wasn’t built with it and it’s just a fucking nightmare, dude. It’s a nightmare, it’s an absolute nightmare. 1:01:34

From where do you learn the advanced CSS stuff? 1:01:36 I’m confident with my CSS, but would love to know more advanced stuff that you do.

Been learning by reverse engineering frames. Yeah, you know, honestly, and this is why I started this series in the inner circle. We just got started on it, but it’s a really fun series.

And it’s for this exact thing, okay? Let me go down into, what group is it in? Custom website training, yeah, Pop Quiz.

It’s called Pop Quiz, okay? And so what I do is I find scenarios, like here’s the latest one. I’m actually gonna do a dedicated video for how to achieve this.

So I give an example and I say, here’s what we need to achieve. But as usual, right, and you have to, so the answers, you literally go into CodePen, okay? So there’s a starter CodePen.

Here’s the starter pen right here. So I give you a starter pen. This is what you start with right here.

This is the HTML and that’s it. Good luck my friend. And you have your task with writing the CSS to get it to look like this.

And so what do we need? We need one image on this side, one image on this side. They look to be a certain aspect ratio.

Here’s another one with a different aspect ratio. Here’s two on top of each other that are different aspect ratios. Here’s one in the middle that’s double the width of the others, or it appears to be like 1.

5 times the width of the others. We’ve got a gap situation going on here. And then I’ll also come in and I’ll say, number one, don’t look at other people’s solutions until you’ve submitted your own, okay?

We all got to play by the rules here. You have to use CodePen to submit your answer. So you’re actually submitting code.

You’re not just submitting theory about, oh, well, I would use grid and I would use this. And it’s like, show us, dog. You can’t just say, like, it’s a little more complicated than that.

You’ve actually got to submit a solution. Items must be query loop compatible, which means there can only be one parent layout technique. They can’t be grouped into separate containers.

You can’t just dumbify your way to a, oh, it looks the same. It’s like, no, that’s not the best way to do it, right? That’s not, it’s not compatible with a query loop.

It’s not a lot of things, okay? The image group must be globally controllable, so no ID or single element styles. We’re looking for the cleanest possible solution, okay?

And then a bunch of people submit their answers. And through these exercises, you learn a tremendous amount about CSS. And again, I think it’s really good for us to take some trips outside of page builders.

Open up CodePen and do a little bit of work in there. It’s going to make your skills way better, okay? And you’re going to understand what Bricks is trying to do.

You’re going to understand the CSS that’s being written for you when you use the inputs. You’re going to see some of the downsides, right? And it’s gonna empower you a lot more.

So this series of pop quiz is just really, really phenomenal for improving dev skills, which is why we’re doing it, and it’s fun. It’s fun to do as well. So I’ll be doing a dedicated video on how to get this layout.

Yes, you do use CSS Grid. You can use Flexbox, but it’s not as great. CSS Grid is really, really, really good for this.

And we also want to have it be mobile responsive, not just stacking all the images though, we actually want to kind of keep the same exact effect, but scale it down on mobile. And Grid actually does that automatically, which is really, really nice. Okay, hopefully that was a long answer to that question.

Okay, I may not be seeing it, I searched the videos and saw the keywords for navigation or something, but things like how do you generate backlinks or how to use info from SEO tools properly, is that there? Well yeah, like doing the SEO research is there. Backlinking is not there because I’m not a fan of backlink acquisition in the past on streams and in various places.

It’s a philosophy. It’s not really a tutorialized thing. I can go over it again if you want to.

If other people are interested in going over the backlinking situation again, we can talk about it on this stream. It just depends on what people want to talk about. One thing that is going to be coming out soon on the SEO side of things is how to use SEO tools like Ahrefs to do competitor, thorough competitor analysis and research.

Figure out what your competitors are ranking for or what a client’s competitors are ranking for, what kind of content that they’ve produced to rank for those things, where the gaps are between what your competitors are doing and what you’re doing. And when I say you, I really mean your clients. There is going to be a training coming on that.

1:06:34 Could you please rapidly come back on the advantages 1:06:37

of having Bricks now use root instead of just root? Oh, well, you can see it in the tabs frame that we were just looking at. So if I go to feature tabs Bravo and I go to CSS and We zoom okay, so look I’m able to reference a child Element using the parent element which I could not do before so I can style the navigation list item Without having to statically write the name of it And then I come down here and what you’re going to notice is because of this parent root selector I don’t ever have to reference a class statically right here’s the content item wrapper being referenced Okay, here’s the tab being referenced in its active state Come down here.

I mean look at this look at that. They’re inside of not statements, right? And so what does this give me?

Oh god? I just blew that shit up because I hit command Z Let’s refresh don’t save anything. Command Z inside of BricsCSS is not, don’t ever do that, don’t ever do that.

Okay, so what this means is that I can actually rename. Okay, so I can go into feature tabs. Let’s go into feature tabs, Bravo, and hit head bam, right?

I can literally rename every, look at all of these child elements that it requires to Create this structure, right? I can rename them I can create new and remove old and you know, what’s gonna happen is when I copy the styles over It’s gonna copy the CSS and when it copies the CSS because of this root reference and the fact that there’s no static names referenced, nothing will break. When everything gets renamed, nothing will break because the names aren’t ever in there statically.

They’re all just dynamic placeholders for that right there. And that’s what’s really, really fantastic about it. Let’s see.

ETA on when frames for Figma will be on sale again. 1:08:42 I’m not sure, I gotta talk to Tommy,

1:08:44 see what our progress is on that. Do you have a video on how to set up Rank Math for a website or something similar?

Yes, it’s in my Blueprint video. Go watch my latest Blueprint, Bricks Blueprint video and I go through every setting and every plugin. But I will caution and I caution in that video, setting up Rank Math for a website, there’s only so much you can do in a blueprint environment.

A lot of the setup has to be done on a site by site basis. 1:09:22 Can you add a script to ACSS that disables

1:09:24 Command Z in the CSS editor? Probably not, probably not.

That’s just something, actually, Christoph did fix it. He did fix it. And he’s either gonna put it in the next release or he said he’s just gonna submit it to the BRICS team and just tell them to fix it and give them the fix for it.

He identified what causes the problem and it’s apparently a very easy fix. 1:09:51 Thoughts on using three to five website templates

1:09:54 for all customers when really niche down examples for fast efficient launch. Yeah, yeah, yes.

There’s actually a lot of ACSS and frames users that do that. And it’s amazing because you can just re-theme everything from the ACSS dashboard in seconds. And so now it’s like a whole new, like all brand colors are different.

But everything still works really like flawlessly. So yeah, that’s good strategy. How’s your new SEO plugin coming since you moved away from RankMath and mentioned you will report back?

I didn’t really move away from RankMath. I wanted to try SEO framework to just think, you know, give people a good free option super lightweight. I Don’t have an official report on it yet.

But I didn’t like, you know for larger sites, I still use RankMath. Okay, all right, let’s move into pure Q&A now. So questions on anything, SEO, business, marketing, pricing, you can still ask dev questions, no problem.

You can still ask frames and ACSS or whatever, but I’m just searching for questions now. Let’s see. Why is WooCommerce so bad?

It’s missing so many things and UX and functionality. It’s so bad because it’s a dinosaur, number one. Number two is they have very little competition.

So they’re not pressured to really be fantastic. They kind of have, they’ve monopolized e-commerce and WordPress for a very long time. Now I’m about to do a video, you know, I do think that there is a tool that is going to take them down.

I won’t say that is going to take them down, that has the ability to take them down. Maybe not take them down, but to be a the second viable player, you know, grow to as large as they are, yada yada yada yada, like provide real competition. And no, it’s not North Commerce.

But there is a tool out there, I will do a video on it. Bricks, breakdance quickly where you can build websites more like Webflow. I don’t understand this question.

1:12:14 I hear this question a lot actually, or this phrase. 1:12:17

Everybody says build websites more like Webflow. And I don’t ever know what that means Page builders are writing HTML CSS and JavaScript for you Aside from the custom CSS and HTML and JavaScript that you might write yourself But those are the I mean, these are the prime and PHP in in the case of WordPress, you know a lot of PHP is involved so we’re talking about tools that all write the same languages. And so, and they all do it in more or less the same format, right?

You have an elements panel, where you add elements to a canvas. You have a structure panel, where it shows the organization of all of those things. You have classes, you have variables, you have, hopefully, components, you know, is coming.

But what does build like Webflow mean? Because Webflow is just like Bricks, is just like Oxygen, is just like Quickly, they’re all just different variations of the same concept. So, but I continue to hear this build like Webflow phrase, and I just don’t know what it means.

Somebody on Twitter, like wrote the other day, like, you know, I really like Webflow, it’s the best environment for design. And I was like, what? What does that even mean?

What does that even mean? It’s all HTML and CSS. I mean, the design is up to you, my friend.

I don’t know what that means. So yeah, somebody clear that up, because I keep hearing it and it’s just not, 1:13:54

it’s not clicking. 1:13:55 When are you going to do the videos on the IC content roadmap,

1:13:57 especially the freelancer trainings? They’re all.

. . 1:13:59

What just happened to my mouse? Oh, there it is. Okay.

My mouse just checked out for a second. Okay, so let’s look at. .

. Let’s see, giri. co slash inner circle slash roadmap.

Okay, how to create a dynamic and sortable class event schedule page. I think we did that one. I need to mark that as published, I believe.

I believe we did that one. How to create a dynamic event management system part three. So that’s coming soon.

We did that, we’re doing, we’re in the middle, 1:14:30 we’re in the middle of a few different series of things.

1:14:32 And what I do in the inner circle, because if I spend all the time on one series that not everybody’s interested in, those people are like, what are we doing here? I’m a little, I’m not interested in that series, right?

So not everybody wants to know how to build this dynamic event management system. But a lot of people do, a lot of people do. But other people are like, well, we want more SEO stuff.

And then other people are like, well, we want more business stuff. And so what I do is I tend to bounce, right? So I’ll go, all right, here’s your event training.

And then the next one is gonna be on SEO. And then the next one is gonna be on this. And the next one’s gonna, and then we’ll circle back around and do the next event one.

Especially with like the event one, you know, we started getting feature requests. And some of those feature requests are like, you know, it’s like, wow, you’re asking a lot, my friend. You’re asking a lot.

And so some of the things I even have to like research in order to then go about implementing it and because it’s not like every day you build some gigantic dynamic event management system. So I got to research and that’s a take some time and some preparation. And so I got to circle back to it.

And in the meantime, I can do some trainings on some other things. So yeah, this is the kind of general roadmap. But we just we bounce around from one topic to the next and kind of hit on a little bit of everything for everybody and just kind of work our way forwards.

Right. You’re, you’re paying, you know, 16 bucks a month, 20 bucks a month. It’s not like a hundred bucks a month or 200 bucks a month or anything like that.

So, you know, a little bit of patience is involved. Okay. But we are, you know, eventually getting to everything on the roadmap.

Would like to see more agency training inside of the inner circle. So this is a request I see often. Here’s the thing about agency trainings, right?

I’ve done so much on foundational business, pricing, the content that is there at some point just needs to be executed on. There is no more like, I feel like people think that there’s some sort of like secret knowledge or information that I’ve yet to share. It’s like I’m just keeping it tucked away.

The information that’s already there in those trainings is all you need, okay? You just have to execute at some point. And I said this on a previous live stream, you know, there’s reasons why certain people, certain personalities don’t execute in certain areas, where they do execute really well in other areas, okay?

There’s a lot of people who refuse almost to get out from behind their keyboard. And they’re like, why isn’t my agency growing? Well, I’ve said on live streams, I’ve said in trainings, I’ve said multiple times, if you want your business to grow, you should leave your keyboard, okay?

Like get up out of your chair and walk outside and go make relationships. And that’s hard for some people to do. And some people don’t even like that answer, okay?

But it is the answer. It is the answer. Now there’s other ways to do it from behind your keyboard, but it’s probably gonna be a little bit more slow going.

It’s probably gonna be a little bit more hit or miss. All right? And we’re not gonna do things.

You’re not gonna go into the inner circle and I’m not going to have a training on here’s how to cold call people. Here’s how to, here’s how to blast everybody’s email in boxes. That’s, I don’t do that kind of shit cause I hate it.

I absolutely despise it. Um, so I’m, I don’t teach it and I don’t advocate for doing it. I advocate for being a human being and getting up out of your chair and going to build relationships the old fashioned way.

Really, really, really high like percentage approach to building a business. Very high percentage approach to building a business. Some people don’t want to do that.

Okay, well then it’s going to be a little bit more slow going for you. So that kind of thing. Pricing.

I mean how much more is there to say on pricing than has already been said. You can go watch the Processes Everything Masterclass, which by the way is free on my YouTube channel. You can then go into the inner circle, you can get my whole pricing guide, you can get my whole training on how to put a proposal together, you can then do my trainings on how to do a discovery call, how to do the sales follow-up series.

Everything is there that you need to land $50,000 projects, $5,000 projects, every range in there is already covered. At some point, it’s not more trainings on agency stuff. It’s execute with what you’ve already been given.

Execute relentlessly. Execute consistently with what you’ve already been given. Now, if you’re running into a specific problem, like, hey, I’m doing XYZ, something’s not working for me.

Okay, then we can look into exactly what’s going wrong in your particular situation and your particular life. But here’s the thing, that probably doesn’t apply to most people. So that’s more of a situation of book a consulting call.

Get on the phone and say, Kevin, I’ve done this training, this training, this training, I’ve implemented this, this, this, and this, I’m still stuck right here, get me unstuck. Okay, I can get you unstuck, but that’s not another training that goes, that needs to go to everybody else. That’s just a you thing, right?

And we can get you unstuck, but we don’t need more trainings to do that. We just need to actually solve the problem. So yeah, you know, as far as the, like so much business pricing agency stuff is in there right now that will get you so tremendously far more on top of that, you know, it’s like, what else are we going to say?

There’s no more, there’s no secrets, okay? It’s just good fundamental practice and then executing that good fundamental practice over and over and over again. Most people have, you know, a very small set of problems when it comes to building an agency.

They don’t have a process for the work that they do, they don’t understand the value of the process, okay, all of that is handled by the Processes Everything Masterclass. They don’t know what to charge or they significantly undercharge. Those are two very, very common scenarios.

Those are solved by trainings in the inner circle. They don’t know how to put a proposal together that wins, okay, that’s solved by a training in the inner circle. They don’t know how to get on a call and talk to people.

They don’t know what checkpoints to hit. They don’t know what questions to ask. They don’t know how to overcome objections.

All of that is solved by trainings in the inner circle that are already there. If you can get leads, if you can’t, and I show you how to get leads, in the top three ways to get leads for an agency, right there in the inner circle, okay? Very easy.

If you can get the leads, if you know what to say on the calls, if you know how to write a proposal, and you know how to price your services, and then you know how valuable your process is, and you actually have a process, what else do you need, my friend? 1:21:44 What else do you need?

1:21:45 At some point, you just have to look in the mirror and be like, I’m not executing in one of these areas. Which area am I not executing in?

And then we need to figure out why. But more trainings is not going to help you magically start executing in the core fundamental areas that you need to be executing it. Okay, any advice on security plugin or best practices around security in WordPress?

2FA changing login URL brute forces. I’m not really a security expert you know person so I tend to limit my comments when it comes to security. I, you know, go talk to the friendly folks at GridPaint would be my suggestion for you.

I have a page with an event data generated with MetaBox and can’t manage to set the time setting to a different date format instead of any, I, you know, I saw a bunch of people running into challenges with the date fields in MetaBox specifically, and those problems, excuse me, are not there in ACF. And I wasn’t, when I was with MetaBox, I wasn’t really able to get help with that from the MetaBox support team. So I don’t exactly know what to tell you on that.

Other than go post in the inner circle, because I know a bunch of other people have done MetaBox date related stuff in there and they probably would have an answer for you. Question how do you manage your time? I struggle to get things done fast enough to actually make money on my projects.

Well it’s not always a time management thing. So a lot of times we’re going back to fundamental problems in agencies, if you are undercharging for your projects, that inherently means you don’t have money to hire people to help you. The best way to handle time management issues is to have more people, right?

Now, yeah, there’s some people who are lazy or they just don’t manage their time well, they get distracted, so they don’t get as much done as other people get done. We can, we could try to solve for that. I don’t know if that’s happening with you or not.

I need to know more about your situation. What I do know is I’ll consult with people and they’re like, Kevin, I just, there’s just not enough time in the day. And I’m like, okay, well, tell me what you do.

Why do this and this and this and this and this? I’m wearing this hat and that hat and this hat over here and huh, huh, huh. And I’m like, yes, you’re right.

There’s not enough time in the day for all that. You need more people. That’s what you need.

Well, Kevin, I can’t afford more people. Why can’t you afford more people? Well, and it comes to find out they’re dramatically undercharging, dramatically undercharging.

Yes. Okay. So you’re promising too much.

You’re delivering too much. Okay. So let’s start to solve individual pieces of that puzzle if we start charging more we could take that money and bring on a Second person to help you on the development side of things which is where you’re spending the vast majority of your time And that alleviates that problem then there’s the objective Well Kevin, I don’t know how to charge more if I charge more people won’t agree to do projects with me.

Yes, they will Yes, they will. So the next piece that we have to fix is how you’re selling projects, how you’re proposing projects, how you’re doing your pricing, how you’re outlining your process for clients so that they understand the value in the process and all of these deliverables. And so they don’t think that just there’s magic and wicks happening behind the scenes or something like they saw in the commercial and this should all be done for $750.

It’s all perception. It’s all communication. And so we just have to get each piece of the puzzle fixed.

And suddenly you are charging more, you’re still getting clients, you have enough money to hire help, and you’re not wearing every single hat. And things are much better. So is that a time management issue?

Or is that a business fund to diagnose? One of the biggest pieces of advice is to have a strong process, write every aspect down and follow it. Too often freelancers design off the cuff and they are all over the place.

Follow a checklist. 1:26:08 Yes.

1:26:09 And process is not just important for that. That’s what most people talk about when people bring up process.

Highly recommend, go to YouTube and type in process is everything. You might need to throw my last name in there, Geary, I don’t know, maybe you don’t, maybe you don’t. Depends on the algorithm.

But watch that masterclass. It’s a free masterclass and it will absolutely transform everything about your business. Everything about your pricing, everything about your business, sales, everything will be transformed by watching that masterclass.

Highly, highly, highly recommend it. The sound is all messed up with my stream now, anyone else? Keep in mind that if your, you know, your internet goes wonky for a minute, it’s gonna mess up your individual stream.

But if anybody else is having audio issues, let me know. Okay, let’s see. How do you handle updating already made frames components?

Let’s say developer use a frame component and after a month you update it. Now the developer has to remake the component on the site. No.

You know most of the updates that we do to components are backwards compatible with other versions of the component so it’s really not a problem. 1:27:27 Okay, I’m scrolling back up through chat here.

Make sure I didn’t miss anything. If I were to start today and read watch every IC training knowledge item, 1:27:38

how long will it actually take to get through all of the content? I’m guessing at least a few months. Yeah, it would take quite a bit of time.

What happened to the monthly Tuesday ACSS video series? Well, we’re doing the live streams. That’s what it is.

And I just did I just did the live stream for 2. 7. But we will be doing an October ACSS Q&A.

We will be doing an October Frames Q&A as well. There’s still some unchecked on the content roadmap in the ICSL. There is no roadmap in the inner circle anymore.

This is the official roadmap. 1:28:19 There’s just ideas and requests inside the inner circle.

1:28:25 I took a two year break from my business and my page rank no longer even appears on Google. I used to be first in my area.

I’d love to know how to get my momentum back. Adrian, if you are still here, if you want, I mean you don’t have to, just put no thanks, answer my question in general, if you want me to. But if you want to put the URL to your site, we can actually pull it up and we can take a look and we can see what’s going on with other listings in your area for the same kind of business.

And we could actually talk through the approach that I might take. So Adrian, if you wanna do that, drop your link in. If not, if you just want a generic answer, I can just give you a generic answer.

1:29:32 The tabs you’re showing right now. Yes, Martin.

1:29:34 Go back and watch the earlier part of the stream. We did a whole breakdown on that tabs component.

What is your advice on going back to pre-ACSS BRICS websites, redesign pitch, any tips, how often a website should be redesigned? I think a website should be redone every three years or so. So you could start to pitch that to clients at around the three year mark.

But it depends. It depends on on, you know, what they’re using it for, you know, how ambitious are they, so on and so forth. Let’s see.

Are you considering ACSS for No, not at this time. We’re hyper-focused on the WordPress. We want to dominate the WordPress ecosystem, and that’s a large enough, I mean, come on, power’s what, 40% of the internet?

It’s a large enough ecosystem to work to dominate. So we don’t have to go into the web flows, we don’t have to go into PineGrow, we don’t have to go into these other areas. And I think if we did, it would limit our ability to dominate the WordPress ecosystem.

So, you know, there’s trade-offs, right? Okay, let me scroll down to new questions. Statement, I think ACSS, Frames, and IEC are the best investments I’ve made in a long time.

Well, I am happy, happy, happy to hear that. $96 Inner Circle was the best invention, I think you meant investment of my whole business career. That is good to know, Wario.

Thank you. Yeah, I can full screen the face, Tyree, 1:31:22

but then we are in danger. We are in so much danger of me trying to show something 1:31:27

on the screen and forgetting I’m not screen sharing. 1:31:40 Let’s see.

1:31:41 Okay, where are we at on time here? Oh, thank you for the notice on web design for dummies.

Okay, a little late. Okay, we got about 20 minutes. We’ll do a last call.

Anything that you guys want? Here is your last call. Let me go unfavorite some of these that I answered already.

Get these reorganized. Okay. 1:32:02

How many of you, just curious, 1:32:03 do you build any sites outside of the WordPress ecosystem?

And if so, why? And how often? What percentage of sites happen outside of WordPress?

What plugin would you use to sell a WordPress plugin? 1:32:33 Well, we use Easy Digital Downloads.

1:32:36 But would I use that again? Hell no.

It’s even tough to get that out. Yeah, that’s a 100% hell no. Fully committed hell no.

I would use Sure Cart now. Zero percent outside of WP, no sites outside of WP, zero all WordPress. Question in the Facebook group I keep seeing, how do I use the ACF color picker?

Okay, no, no sites out of WordPress. 1:33:18 George has a comment about charging.

1:33:20 Do not let imposter syndrome get to you and hesitate to charge more for a task that may seem simple to you, but as a professional, you have spent hours understanding and completing. Exactly.

I have two to three clients on Wix who contacted me needing edits. Every request becomes an explanation why this change costs so much to make and how upgrading to WP could save them long term. Well you’re better than me Rob.

I don’t even take Wix clients unless they’re willing to rebuild. Yeah, a lot of people saying no outside of, 1:33:58

because I saw this asked on Twitter, people were, and Facebook, it’s every now and then you’ll see this question. 1:34:04 It’s like, if you had to design a simple brochure website, you know, what would you use?

Would you use WordPress? Why wouldn’t you use Word? And a lot of people are like, oh, well, you know, WordPress is overkill for that.

But the thing is, to me, it’s more important that every site be within our same process, within the skill set of our team, within the environment that our team is used to working with and used to hosting on. Now we’re getting into hosting implications, we’re getting into security implications, we’re getting into a whole different blueprint effectively. And then you ask the question, why?

Why go through that trouble to do it elsewhere? What is the benefit? And they go back to, well, WordPress is overkill, but why is WordPress overkill?

I can spin up a WordPress. It’s not like I have to go manually install WordPress and all these plugins. I have a blueprint.

I go into my hosting panel and I go click and a whole new website is just instantly deployed with all the tools that I want. Then I use frames to frame out that one homepage and then I get them to approve it and I design it. Let’s say they’re just doing a one page website, drop in the content.

And what part of that did WordPress get in my way? Did WordPress get in my way at any point in time there? No, it didn’t.

Then I ask myself, well, if we build a static site outside of WordPress, but then the client becomes ambitious and they’re like, oh, remember that one page web, static website we wanted? We have different plans now well now I have to have the conversation of the client well you know what we didn’t build your website on WordPress because you told us you wanted something simple and static so we decided to build it with this whole other workflow outside of WordPress and now that you’re asking for all these other things we probably need to move it to WordPress why would I ever want to have that conversation with my client so what is the benefit right if I can if it’s so easy it’s just as easy to do a one-page website in WordPress as it is a hundred page website in WordPress. So what is the benefit to going outside of WordPress?

At what point does WordPress get in the way or reveal its overkill nature? Because it’s not overkill if I don’t want it to be overkill. It’s still fairly easy to do.

I’ve never really understood the overkill argument. Which website hosting providers would you recommend? I recommend GridPaint.

That’s really the only solution I recommend. 1:36:35 For a website, for a travel site,

1:36:37 a travel site that has posts with travel packages that expire date-wise, is it okay to just update the post price and validity and change the posted date SEO wise? Yeah, I mean from what you’re suggesting, yeah, if you’re ranking like the area

1:36:58 people are gonna be traveling to, 1:37:00

that slug is not gonna change. The majority of the content on that page is probably not gonna change. But would you even have to update the date?

I mean, you have packages that are associated with that place. 1:37:16 The dates on those would change,

1:37:18 but the published date of the post doesn’t seem like it would need to change. But even if it did, it still would not be a problem.

1:37:25 Mm-hmm. 1:37:26

Any plans on making an official submission page for users to share request frames? 1:37:30 We could do that.

We could do that. It’s tough because then I’m gonna have suggestions 1:37:35

in circle. so or. so, I don’t even know how to pronounce that domain.

Then I’m gonna have them in my email inbox or in our help scout or like I just don’t want everything spread out all over the place, you know? 1:38:06 I noticed devs will build websites on platforms like Wix or Squarespace because the client requests it.

1:38:13 Yeah, no, I don’t do what the client requests from a technical standpoint. That is all our process, our territory, our experience, our expertise.

We make those decisions. 1:38:34 The advantage of not using WP is no plugin updating.

1:38:38 Correct, but then you also don’t have the scalability of the website, right? It’s like, the other thing too is, do I wanna build a small static website for a client that they insist isn’t gonna need a lot of changes?

I have to ask myself at some point, maybe my client is not ambitious enough. Okay, I’m gonna make a few dollars here, and then what? I’m looking for ambitious clients who want scalable and scaling websites, right?

The websites get bigger and better over time. I want them to be using those websites to generate revenue and rankings and all these critically important things and using it for advertising and marketing because those are all avenues that I can help with and that ultimately make them a great long-term client. Why would I want to take on tiny, non-ambitious clients who just want a 2000s brochure website, ignoring SEO, ignoring marketing and advertising in general and just, it’s gonna sit there.

Now why, why am I involved in that? I don’t need to be involved in that. Go find some lowly freelancer who desperately needs to work.

Like it’s not, I wouldn’t put that in my wheelhouse, right? I’m looking for more ambitious clients. And I would advocate that you look for more ambitious clients as well because that’s ultimately how you’re gonna have a better business.

You make better businesses by having ambitious, long-term clients that you work with for years and years and whose success they feel like man You know how much you’ve added to my our businesses success and then those clients go talk about you to all these other people Let’s see. Making a site with very large content type, over 50 fields, some repeatable, 1:40:40

lots of tables that need to be sortable. Do tables manually use ACF tables or try some plugin? That’s, that’s tough.

1:40:50 That’s tough. I would, that’s one where we would have to see the exact, exact data, exact scenario.

It can’t really be answered in general. There’s multiple paths that you could go down. I will say that once you start filtering and sorting tables, it adds a lot of accessibility complication.

There’s a lot going on there. So we would need to see specifically what needs to be happening. 1:41:31

Let’s see. 1:41:32 We scroll up, there’s a couple.

1:41:41 Had a meeting with an agency last week 1:41:42

who asked me to build a Squarespace website to which I replied, what happens when the client’s business grows and they want more functionality? Yes. Yeah, a lot of businesses only think about the now, especially smaller businesses with less experienced owners.

They think, oh, we just need a website up now. You’ll hear that all the time. We just need a basic website right now.

And it’s like, dog, don’t, don’t, don’t you intend for your business to grow? Like, isn’t that the ultimate goal? 1:42:13

Right? 1:42:13 So you actually don’t just need a website.

Now you need a website that is built to scale and built to help you grow that business, right? It’s not so many business owners are still in the mindset of, I need a digital brochure. They don’t understand what a scalable, like dynamic website can actually do for them.

They don’t understand what has to go on technically in terms of like PPC campaigns for example. The ability to dynamically generate PPC landing pages and do split testing on these landing pages and everything else that comes along with that, right? They don’t even have that, it’s not even a thought in their mind, which is why you as the consultant have to come in and say, no, no, no, here’s the thing.

Okay, yes, your business needs a website, but it needs to be able to do very specific, important things and you lay it out for them. And here’s why, because if we build that static brochure website that you think you need right now, the simple site that you need to get up ASAP, just for right now, if we build that, here’s what’s gonna happen. Nothing, nothing is going to happen.

We’re gonna check that box, then we can all pat each other on the back and be like, look at it, it’s fantastic. Isn’t it exactly what you wanted? Yes, exactly what you wanted.

And then we ask the question, what’s next? Where’s the traffic going to come from? Oh we never planned for that.

Oh well can we rank number one on Google? Not with this little site you can’t. Not with this little static site.

No no no my friend can’t do that. Well PPC well those PPC pages are gonna be quite expensive now because they’re a little bit more difficult to generate. But yeah I mean we could split testing oh well hmm it’s gonna be a little bit tougher.

Yeah, you see all the challenges. And then the client’s probably in a situation like, whoa, why didn’t you, why didn’t you tell me all these things to begin with? 1:44:11

Thought you were the expert. 1:44:12 Like, well, I’ll just do what you wanted, right?

That’s the difference between a pixel pusher and a consultant, right? A consultant stops the client. Hey, Mr.

Client, that’s what you think you need right now, but I’ll just, let me paint a picture for you of what needs to happen if you really want this website to grow your business then you paint the picture for them and then suddenly they realize oh what I was actually requesting is not really what I need I need something different from what I was requesting and I’m gonna let the experts handle this and I’m gonna let the experts execute on this that’s the you know conclusion you need them to arrive at, not just for your benefit, but for their benefit as well. There’s so many people are not willing to have that conversation with their client, right? 1:44:59

Okay. Can ACSS frames get Kevin Geary voice prompts? I’d love to hear a,

1:45:04 what are you thinking, dog, every now and then. That would actually be really, you know, if I built a page builder, yes, that I mean, wouldn’t that be it’s almost like a level of gamification, right?

But it’s just for fun. But like, you know, you’re, you’re, you’re, you’re constructing your page, and you, you, you add something to the page, and you start doing something that you’re not supposed to do. And it’s just like, it’s like, yo, dog, what the fuck you doing?

You know, like, it’s just some call out, I just hit you in your in your earphones That’d be pretty fun. That’d be pretty fun Or or you don’t assign classes to stuff right and then you start going back through and it’s like look at this fucking chump right here Just starts just ragging on you right? Just roasting you it just some yes, that would be man.

That would be so fun But it would also encourage better practices, right? Yeah, that would be fun. 1:46:02

I hate when clients say, 1:46:04 you didn’t tell us about this before.

1:46:06 I did, it’s in the proposal. 1:46:07

Yeah, usually it’s the, you remember all the ideas you rejected over and over and over again? That’s when we had that discussion. Pedro says I’d pay for that builder.

Yes. discussion. Pedro says I’d pay for that builder.

Yes, I do. I do think it is the best idea ever. Yeah, you do something.

It’s like you you put your colors in wrong. It’s like, dog, you don’t care about blind people. What’s wrong with you?

Yeah, I mean, we could just continue loading and every month, the update would just it would release brand new voice prompts, brand new, like every, you could get a new batch of voice prompts every single month. 1:46:56 Yeah, that would be great.

1:46:58 Yeah, see, I would love for Bricks to call me a chump 1:47:00

when I accidentally style at the ID level, 1:47:02 would save me time going back and fixing it.

Absolutely, it would bring the fun back to web design. Are there features you see in other platforms like Webflow that you would like to see in WordPress? Oh well I mean yeah yeah my biggest criticism of WordPress is that WordPress is a content management system and the WordPress leadership has completely abandoned the content management side of things.

They don’t release new content management features. They’re all concerned with their little Gutenberg FSE project. Like the fact that we can’t duplicate a page.

I mean, WordPress, just think to yourself. How embarrassed would you be if you were Matt Mullenweg and somebody sat you down in a boardroom and they’re like, Matt, we gotta have a question. We gotta have a conversation here.

Got some hard questions for you. Here you are, you’re Matt Mullenweg. Everybody puts yourself in Matt Mullenweg’s position right now.

And some board of directors, right, gets you into this boardroom, they sit you down, they’re like, Matt, here’s some questions for you. Why can’t you duplicate a page in WordPress in 2023? That seems like a very simple, straightforward, content management-y kind of thing.

You know, why can’t we duplicate a page? Why do we need a plugin to duplicate a page? Matt, why can’t we add pages in bulk?

Why do we have to go add new, type in a title hit publish go back. What what is with this? Dedication to chump like behavior what we can’t bulk add some pages or posts or data of any kind in this Content management system that powers 40% of the internet.

We why are these things? Why can’t we do that? What Matt why do we need a plug-in to customize the column data I’m looking at in a custom post type or pages or general posts.

Why are there posts versus pages? Why are pages just like posts but just with less functionality? Does that need to happen?

Is that is there a benefit to having that? Shouldn’t everything have the functionality of a custom post type? Everything on a website is just a URL.

Shouldn’t everything be based on CPT functionality? I don’t need pages versus posts. That seems very 2003.

You know, why isn’t that been resolved yet? Why aren’t we trying to make the best content management system possible? Why have we abandoned, Matt, the content management side of things in WordPress?

No new features, no love there. No, we’re off into Gutenberg land and FSE land and that’s all we care about anymore. That’s like, wouldn’t you be embarrassed if you were Matt answering those questions in a boardroom?

I would be, I would be. Okay, yeah, something like happy files, right? Matt, Matt, Matt, why is the media library just a giant fucking junk drawer for all types of media?

Why can’t I put things in folders or tag them or something? Why can’t I organize the media library in 2023 without a plugin? Isn’t that the most obvious thing?

Hey, I bet people want to organize the media that they upload to this giant website. Why can’t we do that? Yeah, I don’t know.

Okay, last question, last call. How often you use brick shortcuts when building websites? You told us some time ago to call you out if we see you not using them.

Well, I actually had to abandon some of them because then people can’t follow the tutorials. Because I’ll do shortcut shit and people are, whoa, where’d that come from? What just happened?

How’d you get there? How did that thing? No, so in trainings, I had to untrain some shortcuts.

But the ones that I use a lot, like that one, Command Enter, right, to add classes to things. So I will now not so much anymore because I now I have auto BIM right. But if I if I had a block in here.

And let me see, did that put it? Yeah, it put it in the right thing. So I click on this block instead of like my mouse going over here, especially if you want to add multiple like it’s actually better to do on the grid if I was using utility classes.

Now a lot of this has been solved by this, right? So grid, and I can just bang, bang, bang, I can add some stuff here. So you add your grid three, then you add your M, whatever.

Okay, so that solves a lot of that. But if I was gonna add multiple, like utility classes or something, the command tab thing is really, really, really beneficial. So I do grid three, and then you hit command tab again, and it opens it up so you can start typing You don’t to keep clicking with your mouse over and over and over again So, you know simple stuff like that.

I still use a lot the one thing I hate Maybe I don’t know if it can be changed This is the one I hate the most if you if you really want to know I Will grab and it can actually be yeah Okay, so see I can bold from right there. Well, let’s say I want to use the shortcut for but the universal shortcut for bolding things command B That does not bold that takes you to the medium breakpoint I do that constantly constantly and it makes me want to take bricks out behind the barn and shoot it in the face Because because then you’re like totally screwed up now I got to go back here, then I gotta click this, then sometimes this panel doesn’t even come up. Then I have to manually click bold.

Man, I should’ve just been able to do that with Command B. So yeah, that is a disaster shortcut issue. Oh yeah, see, see?

That’s Tyree’s fault, guys. Not 100% on Tyree. Tyree, that is on you, my friend.

That one is on you. See, I was gonna leave up the screen sharing I was gonna I was gonna leave it up the whole time okay so here it is right here so I select this text you can obviously bold text in here but if I hit command B to bold my text this happens I get taken to a different breakpoint and I don’t have bolded text and I have to go back and I got to click it again and then I got to click this manual it’s just that’s that’s terrible. They gotta change that one.

Let’s see. 1:54:04 Okay.

1:54:05 Yes, in those situations, Paige is 100% right. The protocol is, you have to close your eyes at that point and just visually follow along, right?

You’re imagining bricks, okay? I’m imagining an element being there. Okay, he’s hitting command B.

That probably took him to a different break point. Definitely didn’t bold the text that he was just on. See, you can visualize it.

I mean, it’s perfectly fine. You don’t actually have to see. Okay, final question, final question.

1:54:42 I saw it up here. 1:54:42

Let me go back and find it again. All right, let me see if it was this one. Can you do a quick guide on how to use to do a meta query within a custom query in Bricks?

So you don’t want to show events that are in the past in an event query. In the effort of not doing that completely from scratch, let me see. Events, WP admin, unable to start site.

I’ll just bring this over here so you guys can see it. Nope, it just did it. It was like unable to open site and then it opened the site.

1:55:23 Okay. 1:55:23

Cause I think I already have one that answers this question and it’s from the events training. 1:55:28 Is that our query loop?

1:55:29 So here’s the meta query right here. Okay, so it’s basically taking the event date.

1:55:41 All right, so what we’re doing with this query loop, we’re going to query events, which is this a custom post type called events. 1:55:48

Okay, so that’s all super simple. We’re ordering it by a meta value, which is the event date. Yeah, event date.

So it’s ordering these by the event days. It’s a long key. We’re gonna order them ascending, but then what we’re gonna do is we’re going to use the meta query to essentially filter.

So you see these include, exclude, include, exclude. Well, these are, you know, you can choose specific posts to include or exclude or categories, right? That’s all very, very straightforward.

What’s not straightforward is filtering by a meta key, like a custom dynamic data, like custom field, right? Like the event date, for example. And so we don’t want to show in this loop events that have a date that is in the past.

So what we’re doing is we’re pulling in the event date as the key. And this is very hard to, it’s not intuitive, okay? So the key, because you would think you would compare two values, right?

But what we’re actually gonna do is compare a key and I guess the value of a key with another static value. Maybe that’s the best way to explain it to people. Okay, so we take the event date and then we put in the value we wanna compare it to, which is the current date, and the current date in the same format as this event date.

Okay, so year, month, and day. And then we say is greater than or equal. So we’re gonna show posts that are greater than the current date or equal to the current date.

That’s all that this meta key or meta query as it’s called is doing. So does that answer your question? The challenge people run into here is they don’t know what to put for the key or the value.

And then the other challenge they run into is the formatting of something like a date, okay? Because when you’re comparing two numbers, that’s one thing. But when you’re comparing dates, it depends on the format the data is being output in.

Like if this is being output in month, day, year, and you’re comparing it to year, month, day, you’re not gonna get a functioning comparison, right? So the data has to be exactly the same format, but this is effectively how you do a meta query. 1:58:15

Okay, he says, yes, he got it, okay. 1:58:17 And in the inner circle, this is a whole training, this whole events system is a training in the inner circle.

And so we do that, I walk you through it, talk you through it. Every single step of building this event system is in the trainings in the inner circle. 1:58:33

Any idea on how to get SSL working on local sites so that one can copy and paste? 1:58:37 I don’t know.

I’ve tried, I’ve done it, I’ve tried it with local, I can’t get it to work. So I just get errors constantly. Yeah, so, and I know on PC maybe it’s a little easier.

I don’t know. I don’t know. Somebody, somebody, you know, chime in.

If you know how to get SSL working on local, specifically this local right here, like this thing called local, right? Not any generic random local installation, but this actual app called local. Because I do it right here.

Look, it’s tools, I think it’s under known. Let’s see. Oh, it’s right here.

SSL. So I can say trust. And it’s going to ask me for my password.

Okay. And then it says we ran into an issue trusting the local certificate. So now I click Learn more and I got to read all of this BS.

But but I’ve never run into a solution. And then it’ll say trusted on a lot of sites. 1:59:43

Like some sites I’ll get it to say trusted, 1:59:45 but then when I change the URLs to the HTTPS version, they don’t work.

So it’s all sorts of screwed up. I just am like, all right, well, I’m not gonna be able to use SSL on local. You have to edit the keychain.

Where do I do that? Oh, Mac key certs and manually authorized. Okay.

Keychain access and system preferences. Okay, hang on, Is this gonna reveal any passwords? 2:00:23

Let’s see. 2:00:24 How about we do this over here for a second?

2:00:26 Okay. Well, I’ve got Keychain open.

What would you do next? Do you add a site? 2:00:31

Oh, like you add a site? Oh, like you add the actual path of the site? You don’t have to add it to Keychain, but it does help.

2:00:56 SSL, this is just passwords though. 2:00:59

All right, hold on, import. It’s like, all right, website. 2:01:03

I’m gonna grab this one, open site. 2:01:08 Okay, events.

local. 2:01:11 Username.

2:01:12 One click admin. I don’t, I guess that’s my username.

2:01:23 And I don’t even know what the password is. 2:01:24

So yeah. 2:01:25 And I don’t even know what the password is so yeah

2:01:29 Profile Mm-hmm. Let’s just try this

2:01:33 Add password I 2:01:35

Don’t know what that’s going to do though. I don’t know how this is going to Affect local, okay No, we don’t want to do that trust 2:02:03

Now that didn’t help okay, maybe I’m doing something wrong 2:02:06 When you have keychain open left sidebar click system roots, I don’t have a system roots in my sidebar Go to the dashboard and settings update the site from HTTP.

I can’t do that till this is done or it’s gonna break my site 2:02:19 Double click on the local link First of all, I don’t have a keychain look I have this area called passwords.

That’s all I have 2:02:25 I don’t have there’s nothing called keychain and Then in this password area, I just have sites and passwords.

I don’t have any there’s nothing else you can do in there. 2:02:50 Marcus says he’ll send me a tutorial.

2:02:52 I did look this keychain. Okay.

Why isn’t that in system preferences? Okay, got it. Keys, certificates, certificates, system routes.

Okay. All right. I think I can find it through here.

Okay. 2:03:28 Okay, good.

All right, that solves that problem. All right, 2:03:31

I will go do it through there. That would be nice. It really the only the only reason I believe right is copy-paste.

You can actually copy and paste stuff in Bricks. Okay. All right.

That’s good. That solves that. See we make progress every single week on something new.

All right. I’ve got a phone it in or that’s probably not the right expression. I’ve got I’ve got a I’ve got to go do some work.

That tabs frame will be released later today if I can get everything buttoned up on it. I have to change all the class names because we’re going to a more generic name. Then I will publish that for you.

I’ve got to do a PB101 training for this week. So there’s another PB101 training coming this week. I’m going to try to record an inner circle training this week and That’s what’s up and coming.

Yeah, that’s it. So thank you guys for being here. It was fantastic.

I had fun I hope you got a lot out of it. I will see you again next I hope you got a lot out of it. I will see you again next Wednesday at 11 a.m. Eastern put that on your calendar my friends until next time.