0:00:00
Yo, what’s up everybody? All right, buddy, all right. This should be a fun day doing something a little bit different. Instead of our regular Web Design for Dummies material which are live in-depth website critiques, we will be doing a first look or first impressions of a page builder. builder and I think this is very important I think it aligns perfectly with web design for dummies by the way when you jump in to the stream drop a comment in the chat and let me know you’re here just say hi and I like to see everybody’s face what’s up what’s up Robert Sylvia calisthenics Ireland Andrew, Justin, Andrea, Karapos, D123, we got Rocky and William, we got Reuben in the house, Tommy, Andrew, okay.
0:01:00
So this is good. I think we’re going to have a lot of fun today. Let me tell you why I think this aligns perfectly with the Web Design for Domneys series. Typically on Web Design for Domneys, we are doing a live in-depth website critique looking in-depth website critique looking at all things that make a website successful from UX to UI to SEO to copywriting everything everything it’s the most in-depth web critiques that are available that I know of for free or really anywhere I don’t even know if anybody’s even doing paid ones the way that we do them here now none of that none of the critiques that we do you Now, none of the critiques that we do, you know, when we look at the DOM, right, we look at the actual code of the website, how clean is the output, is the site accessible, that stuff is made possible by the page builder.
0:01:52
Like we’re not looking at hand-coded websites, we’re looking at WordPress websites and these WordPress websites are either built with themes or they’re built with page builders and so page builders and so the quality of the page builder really, really, really matters and I’ve made this case before on other videos on this channel and other interviews that I’ve done. You know we talk about Gutenberg, we talk about bricks, we talk about oxygen. I haven’t talked a lot on this channel about the Divis of the world, the beaver builders of the world, the Elementors of the world, right? I haven’t done a lot of focused videos on those the world, the elementors of the world, right? I haven’t done a lot of focused videos on those but I did a really important video a while back called something like 20 features that a legit page builder must have and I would really encourage you to go watch that video and it really kind of outlines what I look for in a page builder, the most important things and I talk a lot about why those things are very important and of course I don’t talk a important things and I talk a lot about why those things are very important and of course I don’t talk a lot about Elementor and Divi and Beaver Builder because they don’t fit in that cat they don’t pass that test. Now we can look at why they don’t pass that test right it’s very like we’re gonna do quickly today we’re doing a first impressions of quickly builder today we could do a first impressions of Elementor and it legit would be a first impression I don’t I’ve never used Elementor to build a website before we could do a first And it legit would be a first impression.
0:03:13
I’ve never used Elementor to build a website before. We could do first impressions of Divi. It wouldn’t, in all fairness, it wouldn’t be first impressions of Divi. I have used Divi to build a website before. It was a long, long, long, long time ago. I haven’t used a recent version of Divi, so I have no idea what Divi has done lately. And I know Divi is coming out with a rebuild, which I am curious to look at, and I think we should probably do as part of this series to look at and I think we should probably do as part of this series of taking a look under the hood of some of these page builders. Beaver Builder, we can do a first look at Beaver Builder. I think it’s important for people to really understand what they’re getting or what they’re missing. What are you getting and what are you not getting with specific page builders and why does that matter? I think it matters a lot and so I think it’s very educational and if I think it matters a lot and so I think it’s very educational And if you’re you know considering other builders, or you haven’t settled on a builder yet I mean this is a good way to kind of discover You know what what builders should be at the top of your list versus maybe at the bottom of your list but in any case like I said we’re builders and so Our sites are not going to pass certain tests if the page builders don’t pass certain tests sites are not going to pass certain tests if the page builders don’t pass certain tests.
0:04:28
And we don’t pass certain tests. And when new page builders come out, you know, it’s a good idea to look at those as well to see, hey, is this thing viable? Like is this a, is this something we should be taking a closer look at or keeping our eye on? And so you’re going to see that the title is first impressions of quickly what I, what this is not. And you really have to understand this. What this is not is a review of quickly. this. What this is not is a review of quickly. There is a big difference between a review of a page builder and first impressions of a page builder.
0:05:00
First impressions can be very different from a review. Impressions change after you use a builder for a certain amount of time. Okay a review I wouldn’t do a review of a product until I’ve used it extensively or or I just ran into of a product until I’ve used it extensively. Or I just ran into roadblocks in my attempt to use it extensively where I was like, this is never going to work, so I’m ready to make my review.
0:05:25
But I wouldn’t just take a first look and say this is my review. And it’s kind of a pet peeve when creators do that. Anything, it doesn’t even have to be in web design, it could be in electronics, it could be in this and that. They’re reviewing a product that clearly they’ve used like once. They’re reviewing a product that clearly they’ve used like once, okay? Or they don’t really have intimate knowledge of, and they’re giving us their review of like all of these different aspects. And it’s like, come on, like how much can you really know about it when you really haven’t used it that much? So I, that’s not what I’m doing. And I, and again, that is one of my pet peeves.
0:05:56
Like if somebody is going to do a legit review of something, they better have really solid knowledge of that thing. This is not a review. They better have really solid knowledge of that thing. This is not a review. This is first impressions of quickly. And it’s going to be a first impression pretty much of every builder that we take a look at. All right, let’s go back to the chat and see what people are saying. Let’s go up, up, up. Okay.
0:06:17
All right. We got a lot of people coming in. This is fantastic. We’ve got strong viewership here. We need a first impression of breakdance. Okay. We can put breakdance on the list. We need a first impression of breakdance. Okay, we can put breakdance on the list. I have no problems with that.
0:06:31
I would enjoy watching your, well, I already know, I already know Elementor is a, do I have my, oh no, where’s my, hold on. Do I have my, oh no, where’s my, hold on. Oh, that’s not, oh wait, hold on. Do I need, oh, there we go, okay. That’s the wrong one. Nope, I don’t know what pad it’s on anymore. There we go. one. No, I don’t know what pad it’s on anymore. There we go. I already know Elementor is a show of a DOM. That’s you know, that already know some of these builders are going to fail in certain areas, right? I already know that. But it’s still good to look at other things, right? And it’s we’re going to be looking at the UX. In fact, let me just explain real quick what we’re doing. I have in my you can’t see it on this screen over here. I have two screens, you all probably know that on one on this screen over here. I have two screens. You all probably know that. On one screen, I have a 42 point checklist that we’re going to go through. So we’re going to look at 42 different things. Now I said I made a video about 20 things. Well, this is a 42 point checklist. It’s going to go, hopefully, you know, we can skate through some of these, you know, they’re not really, we don’t have to take a lot of time and attention on each one. But it’s a 42 point checklist that we’re going to put these builders through and we’re But it’s a 42 point checklist that we’re going to put these builders through and we’re going to see how they stack up Uh, let’s see. I’m into bricks not interested in looking around very often at all Um, you would break your sad trombone touch sound effects button on the element or first impressions All right. I would love to see your reaction. Okay, a lot of people talking about elementor So this isn’t an announcing of acss for quickly So this isn’t an announcing of ACSS for quickly.
0:08:04
No, I mean, not official. We will talk about that. We’ll discuss that when we do these first impressions of page builders, because I’m looking at this from many different angles. One angle I’m looking at it from is, would I ever want to use this builder? The other angle I’m looking at it from is, how difficult is it possible to get ACSS integrated Is it possible to get ACSS integrated with this builder?
0:08:29
Perhaps frames integrated with this builder? And how much work is it gonna take? How much work is it gonna be to do that integration? Stan says there are now many builders. Curious how they all are at this point. Some amazement today or some fun. We’ll see. If you create frames for Elementor, I’ll pay you today. I can’t, I can’t, I can’t do it because frames is built with automatic CSS, I can’t I can’t do it because frames is built with automatic CSS automatic CSS automatic CSS Automatic CSS has to be compatible with the builder I’ve already said element or does not pass the minimum requirements for automatic CSS. It’s just not possible Kevin you were pretty much focused on bricks. Are you moving your attention to other builders to?
0:09:08
No, not for the work that I do all of my work is being done in bricks currently work is being done in BRX currently. I don’t have any intention to change that but as the creator of automatic CSS and frames I have to be looking at these other builders and we have to work on expanding our our market share. We have to move into these other builders. It’s very important to do that but I’m not going to like I just talked about Elementor. I’m never going to stuff the square peg in the round hole. I’m not going to do that. It’s got to be a CSS is square peg in the round hole. I’m not going to do that. It’s got to be a CSS is round so the holes got to be mostly round like I got to be able to get it in there right so I’m not going to do that I’m not going to just say oh Elementor is a gigantic market let’s just find some way to rig up automatic CSS to work with it that’s not what we’re going to do. Absolutely not I’m just saying no we’re not going into that market. It’s got to be in alignment with what we going into that market. It’s got to be in alignment with what we believe in the way that we work and all the… not perfect alignment but it has to be somewhat close. Okay? All right so let’s see. If he could do element or he would have done it yesterday, talk about an upside mark. Exactly, exactly. Yeah we’re just we’re not going to do those things. Drop a like on this stream if you’re Drop a like on this stream if you’re ready to rock and roll.
0:10:27
Let’s go ahead and first of all, I wanna bring up our, let me go ahead and share the screen here. Make sure our screen sharing is working, everything is in the frame, we don’t wanna make any mistakes right off the bat. Okay, I don’t know, I think you guys seem pretty hyped for this because we’re already way more than normal in terms of viewership, so this is good.
0:10:48
I’m already at way more than normal in terms of viewership. So this is good. So I have a blank install. I think the best way to do this is to, you watch me install the theme. So you know there’s no shenanigans, there’s no, I haven’t pre-configured anything. I’m not sabotaging anybody or anything. It’s all above board. It’s just we’re gonna go through the whole process.
0:11:14
So I’ll show you right here. It’s just we’re gonna go through the whole process, so I’m I’ll show you right here. Here’s my plugins on this blank install I have metabox. I have WP code box. That’s it If you want to look at WP code box, there’s there’s nothing there. I I haven’t put there’s no snippets There’s no nothing running if we go to appearance we have the default WordPress themes. That’s where we’re starting from That’s where we’re at. I am in the dashboard for quickly right here that’s where we’re at. I am in the dashboard for quickly right here. I’m going to figure out how to download this thing. So I’m going to go over here and I’m going to download the plugin and I’m going to download the theme. Okay.
0:11:51
And so now we’re going to, we’re going to rock and roll. So the first thing I’m going to do is add the theme. I’m going to put that. Nope. I’m going to put that in there. Thank you. All right, we’re going to activate. All right, we’re gonna activate. Now we’re gonna go to plugins, add new, upload plugin, and we’re gonna drop in the plugin file. I don’t know if I have to put in my license key in order to use this, but we’re gonna go. Okay, so we’re gonna go through this setup process together. The first thing on my 42 point checklist is the setup process, naturally.
0:12:25
Like how easy is the thing to install, get set up, process naturally like how easy is the thing to install get set up start working with it I want to know how much setup is involved what is the setup look like what is the is there an onboarding sequence or whatever and in all fairness to these builders and to quickly to everything that we’re going to be taking a first impressions look at I’m not studying the documentation ahead of time there may be things that hey that’s covered in the documentation you’re a that hey that’s covered in the documentation you’re a moron I’m not reading the document we’re just seeing you know in a way we’re saying okay how intuitive is it right how can I get started I have you know over 20 years of experience doing this stuff so you know it’s not like I’m a beginner trying to figure this stuff out so it’s most things should be hopefully fairly intuitive and I get it if we would do something wrong that is covered in the document like I said this is not a review it’s just it’s just first something wrong that is covered in the document.
0:13:14
Like I said, this is not a review. It’s just first impressions. That’s it. All right, so I’m gonna say that I’m new to Quickly. And it says, let’s choose a theme. Quickly, default, 2021 or 2022. Well, I assume that the Quickly builder is gonna work best with the Quickly theme. So I am just gonna leave it as we’re using the Quickly theme.
0:13:37
All right, we’re gonna leave the site title and tagline alone. Theme all right. We’re gonna leave the site title and tagline alone. I don’t care about a Google Maps API It’d be nice if this right here had a tooltip I have no idea what what am I removing when I remove Gutenberg styles Editor quick inserter I’ve heard something about this before and I think we want that I’m gonna turn it on that I’m gonna turn it on and I like I’ll go with a dark editor mode okay I don’t know what that is right there next we’re gonna go the site editor explained by the way this is not the first time I’ve looked at quickly okay I have looked at quickly before I started to inspect it last week but I didn’t get very far because then I get very busy and I moved on to something else I got like I added a section to a page and I looked at some things and that was about moved on to something else.
0:14:25
I got like I added a section to a page and I looked at some things and that was about it. So I really don’t have hardly any experience with Quickly at all. All right, I’m gonna hit next and then it says we can build. Okay, documentation support. There’s a discourse and there’s a design library. All right, let’s go. Quickly HTML generation required.
0:14:49
Oh, all right, let’s go regenerate some things. required. Oh, all right. Let’s go regenerate some things. Regenerate the HTML of your blocks, CSS, classes, styles, whatever. Got it. Okay. Let’s just take a look at the settings real quick. So we did this. Oh, well, there’s the templates. Okay. There’s something called parts. All right. That makes sense. We got a header and a footer in there. We’ve got global parts. I assume these are All right, that makes sense. We got a header and a footer in there. We’ve got global parts. I assume these are like, you know, global elements and bricks or oxygen or something like that.
0:15:21
We have a settings panel here, different icon collections that you can load in. Font sets, all right. There’s the Google Maps API, custom code, add, code name, code position. Okay, looks like we can drop some basic code snippets in there. Advanced settings. Okay, looks like we can drop some basic code snippets in there. Advanced settings.
0:15:41
Oh, there’s a SAS compiler. Hmm. Oh, interesting. All right, let’s turn that bad boy on. Remove list container. In the list block with icons activated, toggle this option to remove the span wrapper. I always want to remove wrappers. Let’s just remove it. Deactivate heartbeat. Okay, these are just like optimization stuff.
0:16:02
Hey, remove classes and IDs. What does this do? Heartbeat, okay, these are just like optimization stuff. Hey, remove classes and IDs, what does this do? Activate this option if you want to remove block classes and IDs automatically when not necessary. I always like to do that. I think that’s fantastic. Let’s process changes. Quickly defaults.
0:16:16
We recommend you activate this option only if coming from, okay, well, I’m not coming from that. Remove SVG filters. This is one thing I did inspect, and we do want to do this. Otherwise, WordPress puts all these dumb SVG files and we do want to do this. Otherwise WordPress puts all these dumb SVG files in front of like, just clogs up your whole DOM and it seems to be completely unnecessary.
0:16:34
Remove WordPress global styles. Remove WordPress global styles if you essentially used quickly global styles. That tool tip does not explain enough of what this does. And I’m unsure, so I’m not going to toggle this. I would have to go to the documentation and read and see what that means. So I’m not going to toggle this. I would have to go to the documentation and read and see what that means.
0:16:53
Remove WordPress emojis, sure. Okay, I don’t really care about some of these small optimization things, but I do wanna see any of these major things. By default, all template parts that you add to your templates contain an outer wrapper that you cannot customize. When enabled, quickly removes the outer wrapper. Of course, we wanna remove. Guys, get rid of all, I just get, wrapper of course we want to remove guys get rid of all I just get if we don’t need the wrapper then what why is it there I don’t know just remove all wrappers remove all inner elements that don’t need to be there just clean we want clean code output that’s what we want remove quickly flex optimization quickly as a specific rule that allows all quickly bought blocks to appear correctly on the back-end editor all right I don’t think we want to remove the back end editor.
0:17:38
All right, I don’t think we wanna remove that. Use WooCommerce style sheets, we’re not doing anything with WooCommerce today. All right, so I feel like our settings are set up the way that we need them to be. I don’t know, the first thing I’m gonna do is I’m gonna go look at the front end of the website and just see what the heck we’re looking at, which is not much. So we have a sample page here, which we are gonna change to a homepage.
0:18:02
All right, this is different. a homepage. All right, this is different. So this is not, yeah, quickly has like taken over Gutenberg here and it looks, it looks different, looks vastly different. Like there’s some similarities, like that thing, but this whole top bar is definitely different. I guess this is where you change the name. All right, so we’re going to go with home and we’re going to go with update and we’re going to save and of course we don’t need any of this content. So I’m going to get Of course, we don’t need any of this content. So I’m gonna get rid of that. And hopefully this is my blank slate. What I’m looking for is a blank slate that I can just start putting things on a page with.
0:18:37
Let’s go back and refresh. That’s not gonna be the homepage because we’re gonna probably need to go to settings, reading and then set the static page home. Okay. Save. Thank you. There we go. All right, we have achieved a blank page. Thank you.
0:18:49
There we go. All right, we have achieved a blank page. So if we were gonna grade the setup process, I mean, of course we haven’t gotten anything on the page yet so we don’t know if we’re actually done with the setup process or not, but so far so good. There’s a few things that probably need more explanation in the tool tips. Let’s see.
0:19:09
Oh, by the way, if you are a Quickly user and you find a way to help out during this live stream, shout out me. Like be like, no, do this, do this instead and you find a way to help out during this live stream, shout at me. Like, be like, no, do this, do this instead, or go change this. If you think it’s going to help me, or if I get stuck, I might ask you, hey, are there any Quickly people? You know, it’s like you’re on a plane, and there’s a medical emergency.
0:19:26
Are there any doctors on board? That’s kind of what I’m going to do here with Quickly. Tahor says, I’ve used Quickly and Bricks on the same install, and you can just have Bricks render the WordPress version, or Bricks, or use the content block in Bricks. WordPress version where Bricks or use the content block in Bricks. Okay, I guess you’re just saying you can use these two things together. When you remove the Gutenberg styles, it’s the Pantone styling options, okay? Let’s see, all right. Price-wise, it should offer more compared to Bricks, which is a yearly price, therefore more expensive.
0:19:57
All right. Yeah, so I think, you know, why would you use quickly over Bricks? use quickly over bricks? You would use quickly over bricks in my opinion if you like the Gutenberg environment or you like the idea of a lot of people that like the Gutenberg environment I think they like the idea of not having to load a third-party builder where it’s like I want to edit the page natively in WordPress versus like being transported into this third-party builder environment like Oxygen and bricks. You feel like you’re just in the like Oxygen and Bricks, you feel like you’re just in the WordPress native environment.
0:20:30
And then of course if you’re building with blocks, it’s all blocks, Scott. Like in Bricks you’re building with blocks, all right, in Oxygen you’re building with blocks. Just because Gutenberg called them blocks, it doesn’t mean those are the only things that are blocks. To me it’s like they’re all modules, right, that you’re adding to a page. So the only difference is, are you in a complete So it’s the only difference is are you in a complete third party builder environment or you are in a pseudo third party builder environment?
0:20:55
None of them are Gutenberg. We already know that Gutenberg native is is a stripped like useless. Well, trash can, as we say around here, you know, even generate right. You’re in a pseudo third party builder environment. You’re not in Gutenberg. It’s it’s based. It hooks into Gutenberg, but it’s not Gutenberg. Gutenberg. It’s based, it hooks into Gutenberg, but it’s not Gutenberg. All right, did you check role editor settings? Okay, I don’t know. It’s so interesting to look, Kevin do some stuff on creating clean code outside of BricsOxygen.
0:21:27
Try the icon on the right corner there, you have quickly navigator open, that’s quite helpful. All right, okay, well let’s go. Let’s go to pages, let’s go to home, let’s get back in the builder. See how I didn’t load like a third-party Let’s go to home. Let’s get back in the builder. See how I didn’t load like a third party builder, right? That’s the experience people I think like with these types of things. Where it’s just you’re instantly in the page and you’ve got some quickly added options, but it’s hooked into this Gutenberg environment.
0:21:55
This is the quick bar on the right hand side where you have sections, you have a div, you have columns. We’re gonna talk about these elements in just a minute. Which ones are important that I look for, We’re going to talk about these elements in just a minute, which ones are important that I look for, which ones are not important that I look for. You can remove MetaBox, ACF Pro is included with quickly. What? What does that mean?
0:22:14
Let me go back to the admin. What do you mean, sir? I don’t understand what you mean. I don’t see an ACF Pro. I don’t understand. Tell me. Tell me more, Bryn. I don’t, I don’t understand. Tell me, tell me more, Bryn. Tell me more. Okay.
0:22:30
Let’s get back in the builder. Somebody said to click this wheel right here or wait, do I click that? Ah, there we go. Okay. Hold on. This is going to be challenging. This get this mic out of the way. All right. Quickly global styles. What was next on my list?
0:22:45
First of all, let’s just look. All right. So I was going to look at the main and body structure next. Um, I should probably add something to a page first. I’m gonna look at the main and body structure next. I should probably add something to a page first. Like here’s a section, and then can we like add a heading? And which heading are we gonna add? Here’s quickly block, so I’m gonna add the quickly heading. This is a pain in the ass already.
0:23:06
And this is, you know, Gutenberg, the environment that we’re hooking into, like kind of ruining the experience of what Quickly is trying to accomplish. ruining the experience of What quickly is trying to accomplish and I don’t know if there’s a way around this So for those of you who did this so in bricks or oxygen when I add a section to a page and I have that section Visibly selected. Okay, it’s visibly selected and then I go add another element It adds it to that section, but Gutenberg refuses to do this Gutenberg’s like oh you probably want the next element outside of that container Gutenberg’s like, oh, you probably want the next element outside of that container.
0:23:39
You just, why would you add a container? You want to put things inside of it? Nah, probably not. You probably want to put things outside of it. So that’s what we’re going to do by default. Again, trashcan. All right, so remove heading. I’m guessing I would have to drag it. Okay, thank you. All right, so this is my hero.
0:24:01
Perfect, all right. hero perfect all right what heading level are we are we in h1 are we in h2 or okay it says we’re in h1 apparently over here all right I’m gonna take its word for it I think we’re in h1 all right let’s get a can we get a background color on this section right quick I see ID I see class I see tag and I see class, I see tag, and I know Quickly has some weird class UX thing going on. And I’m going to have to process this again in my brain to really figure out how it works. And maybe those of you who like, for example, you see this class box, I don’t think you’re supposed to add a custom class here.
0:24:46
Now there’s this paperclip right here that says virtual classes. And then there’s this other thing that says global classes. virtual classes. And then there’s this other thing that says global classes. I think we’re supposed to add via global classes. And I think the paperclip is for like detecting, if I remember correctly, when I looked into this in the past, it’s for like, it’s for like detecting other classes that are being used on the page that you may want to reference or something like that. But it’s this global classes where I think you would add a an actual, you know, unique Global class is where I think you would add an actual, you know, unique class to this thing.
0:25:18
Like if we wanted to say, this is a hero section. So we could just do hero, like that. And see it adds it down here. And then I believe now because it’s selected, see when it’s selected, you can unselect it or select it. Which I don’t really like the UX of that necessarily. It’s not really changing the visible tag right here. It is changing what’s in this box though. visible tag right here. It is changing what’s in this box though. So I guess, you know, what it’s it’s I guess it’s easy to see that you’re editing the class because it changes it here. But I guess now I am editing the style of this class. Now I wouldn’t want to attach a background color to the hero class necessarily because many heroes could have different background colors. So what I’m going to do is I’m just going to go in and find background and we’re going to click on I’m just gonna go in and find background and we’re gonna click on this. I haven’t done any color setup yet But I do want to just see Let’s just do this. Let’s just do a gray and Maybe a kind of a light gray and I’m already seeing an issue that we may have to solve here. Let me go refresh That’s not how a section is supposed to behave. So we’re gonna have to We’re gonna have to investigate but I wanted to get something on my page. I’m also wondering investigate but I wanted to get something on my page. I’m also wondering what the heck this giant gap up up here is. So the first thing we’re going to do is we are going to inspect the main code output of what we have so far because what I’m looking for is is there a body tag is there a main tag like the absolute basics of HTML do they exist and how clean is this output so far and clean is this output so far? And so let me collapse these. All right perfect. So this is the minimized version of the website that we are looking at. Let me go back into the chat make sure we’re not missing anything obvious here. So Michael says the normal class field is for page by page classes. I don’t know what a page by… I’ll just be honest with you I don’t know what a page by page class is. Virtual page by page classes.
0:27:14
Virtual classes are for things like automatic CSS, okay? And global classes are where you add most classes. Got it. In page builder world in my head, you would have global classes, which is just a class. And it’s a class that you would wanna style with the builder. This is the distinction that I make in my brain. Like if I were coming up with a page builder, there are classes that you wanna be able make in my brain like if I were coming up with a page builder there are classes that you want to be able to edit with the page builder environment itself that’d be like a hero like you create a class called hero and you want to be able to assign all these styles to it that’s one workflow there could be another workflow doesn’t have to be another workflow all classes could exist in that environment every single class could exist in that environment then there’s could be another workflow where you add classes that you don’t want to environment. Then there’s could be another workflow where you add classes that you don’t want to ever edit. These could be utility classes for example like margin top M or something like that automatic CSS classes. Not all automatic CSS classes mind you would fit into this category but you could add classes to the element and those are not editable by the page builder that could be useful or useful or unuseful.
0:28:26
Bricks does not treat classes with two separate workflows. Oxygen does not treat classes with two separate workflows. And I prefer that because I think the more work and it appears that Quikly has three different class workflows. And I feel that every workflow you add adds confusion for the user. And it also probably adds, again, we have not built a site with Quikly yet, and it also probably adds, again we have not built a site with Quickly yet, but I can already envision that it causes some issues.
0:28:58
Like for example, you feel like, all right, all my automatic CSS classes are gonna go in this other workflow where I don’t edit them, and then I have my global classes over here that I do edit with the page builder, but then you come across something like button action. Button action, you add to a button, and then that applies global styles Button action you add to a button and then that applies global styles that are controlled by automatic CSS, which you can then customize in the ACSS dashboard.
0:29:21
We all know that, but there’s some things that it doesn’t handle. Like if you want a custom button. Well, what I always advocate for is you add more styles to the button action class. You already have a button action class. The class does not need to change its name. You don’t need another class. You just add additional styles to the button action class to make You don’t need another class.
0:29:37
You just add additional styles to the button action class to make the custom button style that you want. Well, if we were in this other workflow where you can’t style it with the builder, now you’re going to move it from that workflow to this other workflow in order to style it, and it just seems like now you’re moving backwards in your workflow. The way that bricks and oxygen handle it, which I think is very clean and very logical, is they allow you to lock a class. is they allow you to lock a class. So if it should not be edited necessarily, you just lock it and then you can’t edit it with the builder, but it’s still within the same workflow.
0:30:11
And if you ever changed your mind, all you have to do is unlock it and then style it. It’s fine, right? So I think I prefer that workflow. I think Oxygen and Bricks both did this the right way. I’m not saying Quickly did it the wrong way. I’m not saying quickly did it the wrong way. I’m saying that these three different workflows for classes add some confusion and perhaps some working backwards in certain areas where you’ve kind of made a mistake with how you’re interpreting or treating a class.
0:30:39
Michael says it’s over engineered and a bit confusing, so it takes knowing the differences to get used to. Okay. All right, good, good, good. used to. Okay. All right. Good. Good. Good. Let’s figure out this. First of all, let’s, we were looking at the DOM right here. So we have a body class. This is good. All right. We’re going to open this and we’re going to see the div for the admin bar and then we see this div for WP site blocks, which appears to be, these are all scripts. So this is our, this is our, These are all scripts. So this is our main really, but there’s There is no main tag. There is no main tag and that’s Something we’re going to have to figure out Uh, but then I see our section Okay, why is there?
0:31:30
So this is my main I have not applied any I haven’t asked for any padding. I don’t see any padding here Okay. All right. There it is here. Okay, alright there it is. There it is. This is the same problem. Oh this is going to be a good debate and you’re going to you’re going to you’re going to this is going to be a good discussion. This actually somebody asked this in the admin bar group the other day and I jumped in and gave my answer. I feel like there is an absolute objective. This is not a situation was like oh well there’s absolute objective, this is not a situation where it’s like, oh, well, there’s this opinion, there’s that opinion. I think this is objectively wrong.
0:32:09
The objective wrong application of padding. So let’s take a look at it. So here’s your section, and there is no padding on the section. There is an inner wrapper. This is exactly how Oxygen approaches this as well too. So this is not just calling out quickly. oxygen approaches this as well too. So this is not just calling out quickly. I’ve called out oxygen for this in the past. There’s an inter wrapper that has all of the padding and you see the inter wrapper has the site max width which is fine. That’s it’s supposed to have that. I don’t like this.
0:32:44
Notice it is assigning top and bottom padding and And then there’s no left and right padding. The left and right is, I would describe it as virtual padding, the way that this is constructed. The width of 90% creates virtual left and right padding. So this is not, our website is not going to touch the edge of the screen on mobile because of the virtual padding caused by 90% width. virtual padding caused by 90% width. The website, the container should be 100%. In my estimation, it should be 100% with a max width of 1120.
0:33:25
And then it should have padding left and right. All right? Which is in modern times called padding inline. You don’t do padding left, padding right anymore. You do padding inline now. All right, and then we could do something like right anymore. You do padding inline now. All right, and then we could do something like 24, sorry, 2.4 rim, which I don’t even know if this is at 62. Let’s not use rims. Let’s do, let’s just do Ms.
0:33:49
Cause I don’t know what this site is set up with for their body size. All right, so that’s what you should see right here. Now why inline padding instead of virtualized padding with like a width? Because I want to be able to control this number padding with like a width because I want to be able to control this number at different breakpoints actually I want to be able to control this number fluidly with a clamp function that’s what automatic CSS does it adds a clamp function but this padding is in the wrong place completely this is actually how this should all work okay you have the inner wrapper which has the max width of the website and that’s it it has a full width of a hundred percent I it has a full width of 100%.
0:34:28
I yeah, this is correct right here. If you take away these paddings, all right, then we go to the section. Guys, this is where your padding exists. So we have padding block and that would be your section padding. Let’s just say it is 8M or something like that. And then you would have your padding inline and this is a clamp function for your padding inline and this is a clamp function for sure but we’re just going to do something nice and easy right now and that’s padding inline of 2.4 M.
0:34:59
Why does the padding go on the section instead of the container? In Bricks this is a container it’s an inner wrapper right but why does the padding go on the section instead of the container and I’ll tell you right now okay this is the and I’ll tell you right now, okay? This is the objective reason why your padding should go in the section and not the container. When I set my website width to 1120 pixels, which I didn’t set, that’s just how it’s set by default, but let’s set it to 1280 or 1366 or whatever. That’s because that’s what I want my website width to be.
0:35:36
Now, the minute I add padding inline Now the minute I add padding inline inside of that container, my website width has changed. My website width is no longer this. I’m creating an instruction of a max width, of a site width that is no longer true. If somebody looks at this and they say, oh, the website width is 1120, it’s not 1120. It’s 1120 minus this number times two it’s 1120 minus this number times two because you change the effective width when you put padding inside that container and there’s no reason for padding to be inside that container the section is going to the edge of the screen it is the section that should have padding to protect the edge of the screen and when you put it in the section you haven’t changed your website’s effective width so it objectively needs to go in the section websites effective width. So it objectively needs to go in the section.
0:36:28
So I would say oxygen is wrong and how they approach this quickly is wrong and how they approach this. Bricks approaches this correctly if you want to look at it. Okay. All right let’s go take a look at our, see this? This now when it starts right here, my content, this is where the effective website width is. It’s not over where the effective website width is. It’s not over here where it should be. And keep in mind that this section is applying the padding to the wrong thing apparently. So because what is with my background color here? I applied the background color to the section element. Why is it acting like, why is this section so small? Where did, all right there’s a, hold on, there’s an empty Where did, alright, there’s a, hold on, there’s an empty paragraph tag floating in here.
0:37:18
What is happening? Alright, so here we are on the section. Let me go back to, maybe it’s because I turned these off, alright? So if I do padding, let’s do my padding block again here, and let’s do our 8M, there you go, right there. And my padding inline of 2.4M, and then we’re gonna go back to this, and we’re gonna take off this padding inline. This is what we should have. padding in line this is what we should have now I don’t know why what are we still doing let me get back to here and this should not be like this complicated okay you add a section to a page it’s supposed to go all the way to the edge of the screen and it should have its default padding in it and we shouldn’t have to be doing all of this figuring out why is this color not going all the going all the way to the edge where is all this spacing up here coming from all right so let’s go into the inner wrapper again I took away the all right so we got that and that yeah I’m not able to find why why is that why is this inner so tall and why is this color not going to the edge of the screen so what And why is this color not going to the edge of the screen?
0:38:27
So what do I have to do here? You can change that behavior in global style settings. All right, this, well I’ll just say, okay that’s fine, let’s go find it. This should not be the default behavior. The default behavior of adding a section to a website that is clean and you’re starting from a blank slate, is that section better touch the edges of the screen? That’s how sections work. So it better touch the edge, this is like a box layout then.
0:38:51
So it’s got like a default box layout. So it better touch the edge. This is like a box layout then. So it’s got like a default box layout, which we don’t want. I mean, we can add a box layout if we want to, but that shouldn’t be the default. So let me go to, where do I go? Global styles, right here. All right, let’s go to settings.
0:39:07
All right, here’s my 90% width. I want that to be 100%. My max width, let’s go with 1366. I want more usable space here. Let’s go with 1366. I want more usable space here. There’s my padding top and bottom. I don’t want this to be pixels. Let’s let’s go with something relative. So we’re gonna go with M’s for right now. There’s my left and right. Just for right now, we’re gonna go with 2.4. 2.4. Okay, we’re getting there. there default block all right I don’t see I don’t see how we’re getting how do we get our sections to the edge of the screen let me save where do we save settings ah right here save settings okay all right we were a little bit better now I think I this padding is still going to be in the wrong spot but we’re gonna move on I just need to figure out how to get the how do I get We’re gonna move on. I just need to figure out how to get the how do I get the sections to the edge of the page?
0:40:04
What is going on with that? I Remove the section wrap post content template part All right, let’s go back into temp. Here’s templates. All right, there’s no parts. Let’s inspect this template. This says index Okay There’s my header. There’s my footer. Ah There’s my header, there’s my footer. Ah, okay, here’s a section. Oh, that’s why. That’s why. So sections have default padding.
0:40:39
This is wrong. This is an improper setup here. This should not be default. It’s putting your entire website into a section. And that section has default padding, not be default it’s putting your entire website into a section and that section has default padding which is why it’s pushing this this gap right here is coming from the default section that’s in the default template and it’s probably duplicating some left and right padding now as well like look at look at the width of this we’re supposed to have let me refresh that I refresh okay we’re We’re supposed to have a 1366 pixel wide website.
0:41:16
We have effectively a 1289.2 pixel website. It’s not what I asked for. I asked for a 1366 pixel website. But because of the misapplication of padding, we end up with a 1289 pixel website. So this, I already see what’s going on here. So now what we need is we need a div. So now what we need is we need a div. Just give me give me a div. That’s all I want. Div. There we go. Added. Oh gosh. Come on. All right. So there’s the div.
0:41:49
I need this post content to be in the div. Get in there. Get in there. Okay. And we’re going to delete this section. Unnecessary. Oh look. Suddenly what happens, our content goes to the edge of the screen. And you know what I want? what happens our content goes to the edge of the screen and you know what I want I want to change the HTML tag of this div how do I do that I can the right panel is never open in Gutenberg all right it’s the block settings get this out of my face okay oh look at this main save save save all things I can’t Save save all things I Can’t rename this main because Gutenberg felt that renaming blocks was not a you know who would want to do that All right, I think we’re just gonna have to rock and roll with that so Hey Hey Now we’re looking like a website inspect. Oh There’s a main tag look at that. We have a main. We have a div here. That’s that’s still We have a main, we have a div here.
0:42:51
That’s still unnecessary. I don’t feel like this, I really want to see this. Why can’t I see my main tag under my body? Why does it have to be nested in some other thing? We wanna get rid of all this unnecessary nesting. Look at this. This thing does not need to exist. Then there’s our main tag. And then there’s another div, my gosh, tag and then there’s another div my gosh with the this is the divception that I kind of I don’t like in other builders and I’m for some reason I did anybody know where the blank paragraph tag is coming from I should see sections under main that’s what I should see right there get rid of that this is let me let me show you let me show you what we should see BAM just like that get rid of we should see our body, our mane, and then sections of content.
0:43:42
That’s what we should see. We should not see these other rappers. I don’t know if Quikly has to have them because Gutenberg, I know Gutenberg loves these, you know, rappers you don’t need. I’ve talked about that before. So that may be not a Quikly, you know, thing. It may be like, oh, they have to be there because Gutenberg’s a trash can and so we’re going to have a couple extra rappers. Could be the case. I don’t know. and so we’re gonna have a couple extra wrappers. Could be the case, I don’t know.
0:44:05
But look, guys, look, our section’s behaving like a section now. This is fantastic. The question is, should that have been necessary? Shouldn’t this have been the default, right? I just, I load it up, I throw content on the page, this should be the default outcome. Now, the padding is still in the wrong spot. It’s on this inner still, which I don’t like, and I don’t think we can get rid of.
0:44:28
Well, we can get rid of it. It’s on this inner still, which I don’t like, and I don’t think we can get rid of. Well, we can get rid of it. Let me show you how to get rid of it. So we’re gonna do this. We’re gonna go to advanced. We’re gonna try to make this the way that it should be. Global styles is where we were. Settings is where we were.
0:44:41
1366, 100%. Padding, gone, gone, gone, gone. Save settings. Go out here. Save settings. Go out here. How do I get back to WordPress? Here we go. Back to dashboard. Okay. WP code box. Target sections. I need padding block and I’m going to go with 8M by default there and then I want padding inline of 2.4M. Save. Here. What? No, this is a PHP here. What now this is a PHP snippet what is going on? All right it would actually help if we made a global CSS snippet. Now I don’t want to edit let’s just do a new snippet. All right global and then this is going to be a SAS snippet and it’s going to be an external file and we are going to save that. Then we’re going to Enable, section, save, refresh.
0:45:40
Hey, hey, look at that. Look at that. Now, now what happened guys? What happened? Inspect. Hey, you have a 1,366 pixel wide website, which is exactly what I asked for in the beginning. So this is how it should be by, beginning. So this is how it should be by objectively this is how it should be by default right. Padding is in the section inner container is clean. Now the next thing on my list is do they offer the four most important blocks? Do they offer the four most important blocks? Now I will say at setup I was trending towards like an A for setup right. I was like hey it’s been it’s been quite easy I was trending towards like an A for setup, right?
0:46:26
I was like, hey, it’s been quite easy so far. But then I added a section to a page and all hell broke loose. And now that, so I’ve got to downgrade the setup from an A to a C. Because there were things that I just had to do that you watched me do that I shouldn’t have to do. It should just, that should just be how it works out of the box. And I think I gave my arguments for why it should be.
0:46:48
And I think I gave my arguments for why it should be and I think you know it’s fairly objective so All right, so let’s just see do they offer the four most important blocks So we’re going to add what is the first of the most important blocks? Can anybody guess I’m going to go to the chat. Let’s just drop it real quick Or you could just do all four. What do you think are the four most important blocks in web design? Do all four. What do you think are the four most important blocks in web design? Let’s go to the chat and see what people are saying. Quickly, are you guys coming back to AppSumo this Black Friday or a private one on your site?
0:47:26
It’s quickly here. Oh, quickly’s here. Okay, fantastic. Welcome, welcome, welcome to the show. Andrew says, maybe if we all keep saying navigator, quickly has its own navigator. Quickly has its own navigator. keep saying navigator quickly has its own nav quickly has its own navigator. Where? Where is it? Where? Show me because I don’t this. This is not it right? This is the default Guten Gutenberg navigator. Where is the quickly navigator?
0:47:53
Somebody tell me. Alright, so someone’s look at this. Taku says Kevin, please use the quickly navigator I would I would love to tell me Kevin, please use the quickly navigator. I would love to. Tell me where it is. Lucian says div div div. Bryn says row. Just kidding. Repeater. No, it’s not a repeater. Use quickly navigator. Map icon right. Thank you. Hey. Okay. Can I dock it? Yeah, it kind of sticks to the window over there. Yeah, it kind of sticks to the window over there. I don’t want it to cover up my controls. All right, let’s bring this down.
0:48:32
Hey, and I guess it’s just gonna sit there. Is it? Look at that. Fantastic, fantastic. Because this is a trash can. Gutenberg has no idea how to do a navigator. They have no idea whatsoever. Can I rename these? Oh, thank you. Quickly to the rescue.
0:48:48
I’ll rename these. Oh, thank you. My quickly to the rescue. All right. So that can be a hero, for example. Oh, my gosh. Gutenberg, is this that hard? It’s not that hard, right? OK. Fantastic.
0:49:06
This just upgraded my experience. Now, I’m not seeing. Maybe I need to reload the builder. Let’s reload this. Does anybody know why? the builder. Let’s reload this. Does anybody know why? Oh, it’s probably because codebox cannot tap in. Oh, that’s going to be a problem. This styling right here is not being loaded in the Gutenberg editor. And this is not Quickly’s fault. This is the Gutenberg trashcan at work again. That you can’t just add custom CSS to your site and see it in Gutenberg. Who do that who would want to do that yeah so we’re gonna have to have some sort of hook and I don’t know what that hook is off the top of my head because I avoid the Gutenberg trash can at all costs so we’re gonna have to delete this and we’re gonna have to go back to even though it’s it’s not correct we’re gonna have to go back to okay how do I get to the oh well that’s a problem isn’t it the navigator covers up that window right there so I guess I have to kind of isn’t it? The navigator covers up that window right there. So I guess I have to kind of dock it like here. I don’t know now it’s taking up a lot of real estate.
0:50:08
Okay so let’s go back to advanced and let’s go to all right no global styles settings. Okay we got to go back to this area here. So change these back to M’s. Come on come on come on come on M. Oh Look at that when I change that here the list stays up and then it encourages me to click the wrong thing All right, so I’m gonna go to here make these M’s Make these M’s all right, we can go back to eight and eight now at least we’re gonna be able to see these in the editor 2.4 2.4 perfect. Okay. Good good. Good. Good. Oh, there’s that blank paragraph. Ah, look at that delete. Okay update Okay, good, good, good, good. Oh, there’s that blank paragraph. Ah, look at that.
0:50:52
Delete, okay. Update, now we’re getting somewhere. All right, refresh. Now we see what we need to see in the editor. Okay, back to the blocks. You can dock it, see the little icons on the top of the navigator. Open all, close all, dock left, dock right. Okay, now can I see? Okay now can I see…hey okay they think everything don’t they. Gutenberg does not think of everything but it looks like quickly has put some thought into that.
0:51:24
Alright Kevin it would be better if the Gutenberg navigator is in the dock on the left. What are you talking about? Like this? For me I think the Gutenberg editor should just you should be able to drag it straight into the should just you should be able to drag it straight into the trash can on that that’s what you should be able to do because it’s absolutely useless and it always goes away even if you tell it to be open so I that’s what I would do you know in the old days you had a trash can on the desktop you just drag it over there and that’s what you should be able to do with the Gutenberg at list view as they call it all right three four most important blocks are this you guys most important blocks are this you guys named one in the chat that is the div 100% div number two section number three container number four is code block those are your four most important blocks just basic blocks now there are more blocks that are important we’re going to get to them but the four most important basic blocks are can I add a div can I add a section can I add a div, can I add a section? Can I add a container? Can I add a code block? And that’s what we are about to find out right now. We already know we can add a section. We already know we can add a div. There’s a div right there. Now we are going to inspect this div. See I’m going to put something inside of it and we are going to inspect it. So I’m going to put this paragraph inside of it and we’re going to say this is a div. And then I’m going to update. Let’s go and see the This is a div and then I’m going to update.
0:52:50
Let’s go and see the front end. Inspect. Okay. Hey. Clean output. Perfect. Div. P. Those are the, I added two things to the page and I see two DOM elements.
0:53:07
A div and a paragraph tag. That passes. That’s what I want to see. That’s all I want to see. And I don’t know why that’s so hard to ask for in certain builders. That’s all I want to see. And I don’t know why that’s so hard to ask for in certain builders. But Divi, it’s named after the div.
0:53:23
It doesn’t have a div. You can’t do this in Divi. So this is good. I like to see this. All right, so now what we’re gonna do is we’re gonna see if we can add a container. Now what is a container? Because these are all containers, effectively. A section is a container for content. Because these are all containers, effectively.
0:53:38
A section is a container for content, a div is a container for content, but Bricks really named this the container element. And I feel like it’s a good name. I haven’t found a better name. I’m sure there could be a better name, but I haven’t found one yet, so we’re just gonna rock and roll with container. But a container is a site width div. It’s basically a div that is automatically your website’s width.
0:54:00
It’s basically a div that is automatically your website’s width. It automatically references your website’s width and potentially auto-centers itself, but it doesn’t have to. It depends on if your section auto-centers content or not. There’s a couple different ways you could do that and I don’t think there’s an objective right or wrong necessarily for how that’s done. I think my preference would be that the site width container auto-centers itself and doesn’t rely on site with container auto centers itself and doesn’t rely on a Section to Center it but that’s not my final answer either Okay, so do we have a container that’s the question so I don’t they probably don’t call it a container They have it yeah, so they don’t so we’re just going to go through quickly blocks So there’s columns their section So there’s columns, there’s section, heading, paragraph, image, button, tab contents, accordion, tab list, icon, video, gallery, slider, list, menu, there’s a div, okay, and the answer is no.
0:55:03
They don’t have one. And we have a problem with the section. So if we’re going to analyze our section, here’s the problem with the section. So here’s my hero section right here. The only clickable element in this section is a heading. right here. The only clickable element in this section is a heading, but in reality there are two elements that should be clickable, three elements that should be clickable, the section should be clickable, the inner wrapper should be clickable, that is the container element, and then there is the H1 element that is in that section as well. This is how oxygen approaches and I’ve said this for a very long time as well, this is extremely problematic. It is extremely I’ve said this for a very long time as well.
0:55:38
This is extremely problematic. It is extremely problematic to have an inner wrapper that you cannot select or easily target. It is always a problem. Bricks allows you to select and easily target the inner container. And here’s one reason guys. There are sections where you want, let me see if I can do this. Let me see if I can do this.
0:56:04
Duplicate, I guess there’s no short code. This is the other problem you’re going to see. Back to objective padding. Where does padding go objectively and why? So I’m going to duplicate this. There are many, many, many times where you want to group content in a section in page width containers. Obviously you can’t do that in this setup. Obviously you can’t do that in this setup. You can’t do that because the padding is inside of the container.
0:56:32
And so when you duplicate the container, you get duplicate padding. If my section had the padding instructions, I could have as many containers in that section as I wanted to, and I could space them however I wanted to, like with, if you’re an automatic CSS user, container gap, the contextual spacing class for spacing containers. user container gap, the contextual spacing class for spacing containers. Perfect, it’s amazing. It’s the best experience for creating sections. That’s not possible here, and it’s not possible in Oxygen either because Oxygen does the same thing.
0:57:03
They give you an interwrapper that you cannot select, and the interwrapper has the sections padding, which is a no-no. So if the padding were in the section, we could have as many containers as we want. If the padding were in the section, we could have as many containers as we want. Right now, we’re limited to one container. And I cannot even add containers into the section. I’m stuck with the one that I’m given, and I cannot add more, because even if there was a container element, it would have to be put inside of the default container element, and then we would have other problems.
0:57:32
We would have more nesting that we don’t need. So if I were to fix this, or give a suggestion to the Quickly team, If I were to fix this or give a suggestion to the Quickly team, and by the way, you can’t do this without breaking, it’s not going to break people’s websites, but it is going to shift people’s websites. So you would have to have a notice. It’s not going to shift them much, but it’s going to shift them slightly.
0:57:52
You’re probably wondering, Kevin, why are you spending so much time on this? Why is this? This is critical. You’re talking about the foundation of a website. When we built ACSS, of a website. It’s like, and when we built ACSS, we had to sit around for hours thinking about this and playing around with these types of elements, just the bare bones basics of how should this stuff behave?
0:58:14
Where should this stuff go? And these are the conclusions that we ultimately came to, and I’m showing you why we came to those conclusions. And if you use a builder that’s antithetical to these conclusions, these fundamental things, a builder that’s antithetical to these conclusions, these fundamental things, it throws the whole thing off. It throws everything off right from the beginning. Why? Because sections are fundamental to building web pages. Inner section, inner containers are fundamental to building web pages.
0:58:40
These have to be set up correctly from the beginning. Quickly can easily fix this in my estimation. You can make this default global padding over here. So let me go to global styles settings right here. padding over here, so let me go to global styles settings right here. This should apply to the sections div basically, that container, not the inner wrapper. Do not apply these things to the inner wrapper, make them apply to the section and then make the inner wrapper selectable in the builder. If you do those two things this all these problems go away immediately. Okay so that would be the big suggestion The problems go away immediately, okay?
0:59:14
So that would be the big suggestion that I would make. Give me access to the inner container, and I can show you guys how this looks in Bricks, because it’s beautiful in Bricks when it works like this. So we have a working, this is not a theory. We have a working version in another builder, right? When you write HTML, if you coded this site from hand, I would say the exact same thing. Put your padding in your sections, leave your containers alone.
0:59:39
The only thing a container should do padding in your sections, leave your containers alone, the only thing a container should do is automatically reference the website’s width. That’s the only thing that it should attempt to do other than perhaps centering itself. Okay, so that’s how you fix that. Do they have a code block? Let’s put this in. So let’s go to add code block. Here we go. Code, yes. What can I do with it? Show in What can I do with it? Show in the editor, prevent clicks, okay, sure, sure, sure. That’s conditions. Am I in my code block?
1:00:16
Where do I put the code? Do I just drop it in here? And forgive me because I’m not, I don’t do anything in Gutenberg. So if this is how Gutenberg code blocks work, I don’t really know. If this is how Gutenberg code blocks work, I don’t really know. I’m clicking a code button and nothing is happening. All right, somebody show me how to work the code block. What do we do here?
1:00:34
Because this panel does not, it’s not giving me any, in fact it looks a little broken. I don’t know. What’s this white border thing going on here? What does primary mean? I don’t know what that means. This is the block inspector. Make sure you trust the code you input here. inspector make sure you trust the code you input here. Well I’d love to input something but I currently cannot. Show on okay there’s the show in the editor. I don’t know where to put my code. Can’t type. Can’t type here. Click this thing that’s just to transform it. Code button doesn’t appear to do anything. Let’s delete it and let’s add another one. So let’s add code block. This is the one add code block. This is the one from quickly added to the page now it’s down here and still don’t know where to add the code. I cannot type in there. Okay I’m going to the chat. Save me chat. You will need to activate the different code settings in the rolled editor. Okay so that’s back here somewhere. Quickly Okay, so that’s back here somewhere.
1:01:41
Quickly settings, role editor. Code, code block, there it is. PHP, CSS, JavaScript, great. Those are all activated. I got confirmations, refresh. Let’s update this, refresh the page. Back to my code block. Ah, better, better, better. Back to my code block. Ah, better, better, better.
1:02:04
Okay, so PHP, CSS, and JavaScript is down there, but am I supposed to be able to scroll down to the JavaScript box? Because I cannot, I can’t get down there right now. Maybe I have to close these. Okay, I guess that’s fine. Okay, so it looks like, and this is the same, you know, bricks, oxygen, you can execute these three things. Okay, so it looks like, and this is the same, bricks, oxygen, you can execute these three things.
1:02:30
Seems good. Okay, I think we can move on with that. Except for, I mean, you could check for, I guess, wrappers in your code, but it’s not that critical of a thing that I look for. And I think we’ve spent time on other stuff, so we can probably move on. All right, so do they offer the four most important blocks? Div, check, A, A plus on a div. Do they offer the four most important blocks?
1:02:49
Div, check. A, A plus on a div. They get an A plus on div. Very clean output on div. Section. They get a C, a D on the section. D, D on the section because of the padding misplacement and because it doesn’t have a clickable container. They, there’s no container. That’s missing, so we need one of those.
1:03:12
And then code block is fine. Okay, is a, the next thing on my list. and then code block is fine. Okay, the next thing on my list, is a class-based workflow possible? We already know it’s possible in Quickly. They do have a class-based workflow. But my next question is, and by the way, well, let’s just go over it. So when I say is a class-based workflow possible, because there is confusion here.
1:03:33
People are like, Divi has a class-based workflow. No, they don’t. Just because a builder allows you to add classes Just because a builder allows you to add classes to an element doesn’t mean it’s a class-based workflow. So as we talked earlier, you need to be able to add classes, you need to be able to edit those classes with the builder itself. And then the third thing is classes have to be front and center. So if they’re buried in some advanced panel somewhere like Gutenberg does, somewhere like Gutenberg does, like Beaver Builder does, like Elementor does, like Divi does, it’s not a class-based workflow.
1:04:10
Because what it’s done is it’s completely murdered your user experience as a class-based builder, right? Because you’ve got to, it takes extra clicks and these add up to gazillions of extra clicks. That’s probably a scientific estimation of how many clicks it would take to really build a website Estimation of how many clicks it would take to really build a website with a builder that hides the classes box from you in an advanced panel Gazillion seems accurate so gazillions of extra clicks to use your class based workflow. That’s not a class based workflow So what we’re going to do is can I add classes easily to this hero?
1:04:45
Let’s go back to blocks. So I’m editing the block. Here’s the classes as we discussed earlier Here’s the classes. As we discussed earlier, I believe I need to add these via global classes. So I would do something like H1, just create an H1 class if I wanted to, something like that. This is probably not something I would do, but well, I wouldn’t create classes. I mean, you know, automatic CSS has all the classes you need already for things like headings and all of this.
1:05:11
Or we could do like, let’s do this. Let’s do something realistic instead of just making shit up. Let’s do like, let’s do this. Let’s do something realistic instead of just making shit up. Let’s open, oh good, it’s already open over here. Look at that. Look how handy this is. Notice that Gutenberg’s thing is nowhere to be found.
1:05:27
But this structure panel is already open. So I can delete that heading. And then I am going to add a paragraph tag. And this will be a good test too. P, why did I get two of them? P, what, why did I get, why did I get two of them? All right, delete this, get rid of that paragraph in the hero, oh geez, in the hero please. Okay, thank you. And this is gonna be an accent heading.
1:05:50
All right, so an accent heading is not a real heading. It’s just like a pseudo heading. And then we would want to add a class to this. And the class would be accent heading. Where the heck did my, why does this look different now? Where the heck did my, why does this look different now? Can I not put, oh, okay, I understand. I understand, this is a, okay. We have to add a quickly block. All right, so there’s a quickly paragraph block.
1:06:15
Put it in the hero. All right, now we can say accent heading. Got it, all right. Now we’re gonna put a class on this and the class is gonna be H accent, right? For heading accent. And now we can style the accent heading, hopefully. accent, right, for heading accent. And now we can style the accent heading, hopefully. So we’re gonna go and I just gotta figure out these panels.
1:06:32
So we’ve got colors, we’ve got typography. All right, well typography is something I wanna do. I wanna uppercase it. I want to maybe change the letter spacing. Let’s drop that to Ms.0.25m. Did that actually do any letter spacing? Yeah, it did, okay. Did that actually do any letter spacing? Yeah, it did, okay. But it switched back to pixels for some reason.
1:06:54
Let’s put that at M. All right, and then our size, let’s go with, let’s go with rims on our size. Let’s do 1.2, 1.1. Well, it appears one, one would be, it appears to be about 16, I guess, at this font. I don’t know. Okay, let’s leave it at that, and then let’s bold it. font I don’t know okay let’s leave it at that and then let’s bold it so where would we find bold wait there we go sorry I was looking for a drop-down most of the other builders I’ve used have drop downs but this is fine all right 600 update save okay let’s go to the front end BAM all right got a little accent heading let’s inspect it so we’ve got a p-class of H accent no other no we’ve got a P class of H accent no other no other classes on here which I love to see I don’t see an ID which I love and I don’t see extra classes that aren’t needed that’s fantastic output right here I don’t like the fact that okay now that’s that’s our sections in a wrapper so it did not put it in another wrapper this is fantastic this is good output right here exactly what I would expect to see this is a class based workflow you can add a class of something you what I would expect to see. This is a class based workflow. You can add a class or something, you can style the class, it’s all front and center, I didn’t have to go dig for it, this is all just fine right here. Okay I still don’t I’m still not sure, yeah see it’s finding other classes of things on the page and I guess you would just select them if you want to reference them. I don’t know how useful that would be honestly, I don’t I don’t know how useful that would be.
1:08:24
I don’t know how useful that would be. And I assume I can just add more classes to this. Like what happens if I just type here? So another class. Oh dear, okay. That’s renaming the class. Let’s just test that. Can you rename the class? Renamed class. Update, save, refresh.
1:08:46
Oh, oh. Wait a minute. Wait a minute, where’s my volume? No, it’s not. That’s the wrong one. Got to get the right volume going. Let’s try it again. Okay. All right. So if you rename the class, you lose the styling.
1:09:08
If you rename the class, you lose the styling. And that was very easy to do. Now let me try to change that back. easy to do. Now let me let me try to change that back. So it was H accent and look at that. My styling didn’t come back. It’s gone. It’s gone. That was too easy. There should be a warning of some sort there right? That was too easy to just toss like basically light your styles on fire. That’s kind of what that does right there. So if you just come up here and willy-nilly go hey let’s just That’s kind of what that does right there. So if you just come up here and willy-nilly go. Hey, let’s just write another class No, sir. Don’t hit enter. Do not hit enter my friend or you are going to light those styles on fire apparently So I think that can be improved for sure So I guess I would have to unselect that and then I can add another class. So another class. Oh dear, oh Wait, no, I’m in the wrong spot. Okay, then Oh dear. Oh wait, no, I’m in the wrong spot. Okay. So I said earlier, I was like, I can foresee the different class workflows getting confusing. Well, it has officially gotten confusing. So what I’m doing is I am trying to add another class and I’m forgetting to click that icon again.
1:10:19
They have to be added here. In fact, oh, did I add this one wrong as well then? I don’t think I did. this one wrong as well then? I don’t think I did. No, it’s in global. Okay, so I got to click global then I can add another one again. This input right here, I think you should have to like, like click an icon to edit this or something, right? This is too easy to just come up here and edit and you don’t really want to be editing that. Yeah, it appears, right? If you’re using global classes, you just want to do stuff here. So another class would be right here. Now we have global classes, you just want to do stuff here. So another class would be right here. Now we have two classes on the same element. This is all I was trying to accomplish.
1:10:57
And there you go. So H accent and another class. All right, so can you stack classes? That’s important. Yes, you can. But you’ve got to be very careful that you’re not editing in this box. You edit in this box, you lighten shit on fire. So that needs to be, that have some sort of protection there.
1:11:14
But class-based workflow possible, some sort of protection there. But class-based workflow possible, I’m going to give it, I’m going to give it, I can’t give it an A, because there’s some issues that we just found here, but I’m giving it a B. The class-based workflow is there. It does work the way I would expect it to work, other than this little caveat here and the extra workflow type of stuff.
1:11:33
So we would give that a B. All right, let’s keep moving down the list. All right, let’s keep moving down the list. Do elements support relative units and do they support any unit? Let me get back to the chat before we keep going. I just want to make sure that we’re not, I don’t want to open final cut. Okay, let’s get back to the chat. ID doesn’t show up. So what is ID paragraph? This right here is what you’re talking about.
1:12:00
would show up on the front end if I hadn’t selected to remove them in the settings is my guess. And I like the fact that this does not show up because it does not need to be in the output whatsoever. What we have as far as output right now is exactly what you would want to see as your output. But watch this. If I undo this and I style right here, right, this just default style something. Right here right this just default style something so I’ll do like capitalize the text instead of uppercase And then I’ll go to the front end look now now. It’s got that default class showing up now the ID still doesn’t show up So I’m wondering Because the ID styling is important sometimes right so How do I get the ID to show up? How do I get styles to apply to the ID? I guess would be my question because there are times where you would want to style the ID I guess it would be my question.
1:12:50
Because there are times where you would want to style the ID because this generic class right here may not have the specificity needed to override these other classes. And so I don’t really know how we attach styles to the ID specifically. That would probably be a question for a quick lease team. I don’t know. Okay, so what was I looking at next? I don’t know.
1:13:13
Okay. So what was I looking at next? I was looking at the chat. Never light your shit on fire. A good rule for life in general. Yes, absolutely. Try to live by that. Luckily, if this doesn’t work out, Kevin still can become a fairground ride operator. Can I?
1:13:34
What am I? What am I doing good that would make me a good fairground ride operator? Where’s the style sheet manager? All right. good that would make me a good fairground ride operator. Where’s the style sheet manager? All right, we don’t need to look for that yet. We don’t need one. Honestly, I don’t really think builders should be responsible for managing style sheets, like external style sheets.
1:13:50
You should probably be using like a full, fully featured like, you know, WP code box type setup. The ID doesn’t show up. Okay, we already did that. You can type the unit in the text field instead of choosing it in the dropdown. You can type the unit in the text field instead of choosing it in the drop-down. Okay, well let’s try that. And the question is can I use any unit? So I’m going to go with 14M.
1:14:13
Enter. Yep, okay, it works. That is a good workflow. I like that. That’s fantastic. Let’s do clamp. Okay, and it goes to, it automatically recognizes, hey, this isn’t normal what’s going on here. So we’re going to remove the unit. Hey, this isn’t this isn’t normal what’s going on here, so we’re going to remove the unit and You know we can just make up a clamp function. I don’t even know Let’s go 6m something like that all right good, so you can use clamps check that out. Oh the real test Here’s a real test and This is where this is where the Gutenberg trash can gets in the way. I already know it’s going to get in the way trash can gets in the way.
1:14:49
I already know it’s gonna get in the way. You come here and you go something like this. And you do something like this. And we’re just gonna say, you know, we can just do what we just did, right? This is a bogus clamp function. This doesn’t, don’t copy that. It doesn’t mean anything. It’s just made up nonsense. This doesn’t that’s don’t copy that it doesn’t mean anything. It’s just made-up nonsense So text M, but what we’re gonna try to do here is we’re gonna update we’re gonna refresh and I guarantee This is not gonna work. It’s probably gonna work on the front end if I had to guess it’s not gonna work here text typography size var text M. Oh It did Okay, so we have the ability to use variables It did. Okay, so we have the ability to use variables and you can see them in the builder From an external style sheet That’s an A+. You get an A plus for this There’s there’s not many Gutenberg things that I’ve ever encountered that can handle that So that is a huge plus That’s fantastic. I love to see that H plus.
1:16:01
That’s fantastic. I love to see that. That’s just fantastic. That warms my heart actually. Okay, let’s keep going in the chat. Okay, Webflow is the best padding and margin selector. Yeah, let’s look at the padding and margin selector real quick for the sections. So I’m gonna click on section. Here’s my hero. Let’s go to margin and padding. margin and padding. It’s weird because Bricks kind of puts all this stuff under layout and then I think Oxygen does too but it’s over here it’s got a separate panel. I don’t mind this at all. Do you guys have some sort of issue with this?
1:16:39
Top, bottom, left, right and then you can link them right here. I don’t really have any any issue with that whatsoever. I also like the visual indicator that’s I also like the visual indicator. That’s kind of nice. I also like that you can’t drag. There’s no draggable handles of the padding and margin and like the, I believe the divvies of the world, the elementors of the world, the bricks, oxygen even has this draggable handles. Guys, I’ll tell you right now, let me just, let me just make some people feel bad. I’ll tell you right now, let me just make some people feel bad.
1:17:15
I mean, if you’re dragging handles for your padding and your margin, like you’re just dragging random values into your container, my God, what are you doing? You’re a savage. You’re an absolute savage. Oh, man, we look at your DOM and it’s going to be like 87.2 pixels here and 34.8 pixels here. I mean, what’s going on? I don’t use the handles. No handles. pixels here, what’s going on? I don’t use the handles, no handles and because what the handles do if you’re using real like a real process to your website with actual consistency, the handles just mess you up. You try to click something, you accidentally drag a handle, now your sections got extra padding in it that you didn’t want, it’s like the handles only get in the way. So the fact that there’s no annoying handles here to drag around, I mean maybe you can turn them on here to drag around me maybe you can turn them on somewhere I don’t know but no no you’re if you’re dragging handles that’s like that’s man psychopath level I’m just being you know I’m playing with you but but still don’t know you don’t need handles we don’t need handles okay all right let’s go what are we on the What next 42 point list?
1:18:26
Do elements for relative units any unit? Yes, a plus do elements support variables as values a plus. I didn’t check every input for the ability to do variables, but I’m guessing that it’s fairly consistent here. Okay. Clean non nested HTML output for basic elements. Div section container. We looked at that heading. for basic elements. Div section container, we looked at that.
1:18:52
Heading, we looked at that, I believe. Let’s just go double check it real quick. Here’s my heading. Oh, that was an accent heading. So let’s get rid of that. Let’s just add, watch this. This is the Gutenberg trashcan in action. I am literally sitting inside of my heading right here. And I’m gonna say, you know what else I want? I want another heading element.
1:19:13
Okay, fine, it put it in, good. Maybe quickly is helping out I want another heading element. Okay, fine. It put it in good. Maybe quickly is helping out now that this structure panels open or something Okay, this is a real heading So I’m gonna go ahead and hit update there and let’s go ahead and inspect H1 real heading no extra nonsense going on So if you did that in Elementor or like Divi you’d have like three divs and then an h1 Okay, for no reason. I just here’s a bunch of divs to come along with the h1 that you asked for I think for no reason. Here’s a bunch of divs to come along with the H1 that you asked for.
1:19:42
So that’s good to see. Clean code, text, got it. Is there a rich text? Okay, so let’s try to add some sort of rich text. I guess that would be, I don’t know that there’s a rich text in Gutenberg at all, or like a need for one. I mean, you kind of do have a need for one. It’s kind of like, it would be like grouped paragraphs effectively.
1:20:00
Mean you kind of do have a need for one. It’s kind of like it would it would be like grouped paragraphs effectively Rich text media and text now, it’s not what we’re looking for Text text text text text not seeing anything. So I don’t think there’s a rich text element Button button button button. Yes button button very important add a button Okay, let’s see what’s going on with our button here. There’s a lot to look at on buttons my friends. This is a button I There’s a lot to look at on buttons my friends. This is a button. I don’t like that it doesn’t look like a button by default. But it’s fine I guess. So let’s add a class.
1:20:36
We’re gonna click the globe. We’re gonna do button action. So it’d be our standard button for a website. Background, let’s just go fire engine red, cuz we’re trying to make this as ugly as possible. because we’re trying to make this as ugly as possible. We’re gonna go to typography and where, now it would be under color still? Yeah, okay, so white, good. Why is my button, do you guys see a problem with my button already?
1:21:04
Link, Google, the Googles, send us to the Googles. All right, and then we’re gonna hit save. I see a problem with my button already. And then we’re gonna hit save. I see a but I see a problem with my button already Margin and padding Okay. Oh, I don’t have to click these. Okay, don’t click these got it. It’s in my head we’re gonna go with 1m top and bottom and then we’re gonna go with 2m left and right Okay, there you go that should have been a nice nice little button there All right.
1:21:38
Okay, there you go. That should have been a nice little button there. But it’s not, it’s not a nice little button. Let’s try to do a border radius. Can we do a radius of some sort here? So we’ve got layout. Let’s see what our options are. Typography, I’m not seeing borders and such. Colors, design, maybe it’s under design. Source, oh gosh, now there’s lots of panels.
1:22:00
Source. Oh gosh, now there’s lots of panels. Woo. Where do we go? Pseudo classes, transforms, effects, borders. There they are. Where am I? All right. So there’s a primary tab. We got to make mental notes. I need a little roadmap in my head. Okay. So there’s a primary tab that gives you access to basic things. that gives you access to like basic things. Then there’s a design tab that gives you access to all the things.
1:22:31
And then there’s an advanced tab. What can we possibly do in here? Scrolling stuff, attributes, oh okay. We’re going to look at that in a minute. That’s on my list for sure. We got a little sneak peek there. All right, design. So radius, that’s what we were trying to accomplish. trying to accomplish. We want a 1M radius on our borders. Good, safe, excellent. View the front end. Oh dear. Have I done something wrong?
1:23:02
No, I don’t think I did something wrong. So I button action. What’s happening here? Why am I not seeing these here? It’s got my class. Button action. It’s got my class, button action. Help, help in the chat, help. What has happened here? Why am I not getting button styles?
1:23:24
Class is right there. Styled the class. Class is on the element. No styles. All right, let’s go to the chat. Save me, save me chat. What’s wrong with my button? chat what’s wrong with my button hmm we’re only on the sixth item in the list this could be oh no no it’s gonna go faster it’s gonna go faster the the early the early things in the list are there’s a lot to look at on the early things but it’s gonna go faster um guys what happens what happened to the button help me out there you have the icon for link not only in button by the way the button help me out there you have the icon for link not only in button by the way the link is icon under design cat now it’s there’s no cash this is a local install the link is for color not URL oh well uh okay uh where was primary right here link is that breaking things oh maybe maybe because my button doesn’t have a Oh, maybe maybe because my button doesn’t have a URL then All right, where do I put the URL?
1:24:33
So I’m in here Oh With would love to hear the comparison verse bricks not verse the obvious bad ones. Well, I’m doing it a little bit, you know No, it’s a button for sure, right No, it’s a button for sure, right? Well, it’s a div because it doesn’t have a link, but once it has a link, it’ll be a button. But that shouldn’t really affect the styles unless Quickly’s adding the styles, like saying these styles only apply if it’s a link.
1:25:07
Advanced, design, primary, global style. No, that’s not it. This is block. Where do you do the link? Where do you do the link? If that’s not link, Where do you do the link? Where do you do the link? If that’s not link, well I mean what is that for?
1:25:20
I don’t even know, what’s a linked color? I don’t know. The link icon under the design tab heading. Why is it under design? Oh right there. Oh that thing? Wait a minute. I can’t click it though. I have the button selected. I can’t click that. I can’t click that. Can’t click it. It goes away when I click this tab. How do I add a link? Right above the ID. No, I see it. I can’t click it.
1:25:53
Shouldn’t this be like an input box like right here? Like front and side? Like I added a button. It’s the obviously I want it to go somewhere, right? right? Oh wait is it because there’s a… ah that’s it. When you select it when you have a class activated it deactivates the ability to add a link. Okay URL Okay, that was a journey. Do I just close this? I’m afraid. Do I just close this or do I lose my link? All right, why can’t I update the page now? Hero, update, refresh, frontend. Hey, let’s get out of mobile mode here. Okay. No, well I got styles but no link. Okay. Oh, my URL is gone. No, I’m not on my button anymore. Golly, I’m just all over the place.
1:27:00
Oh, it’s a type URL. A source. Oh my God, it’s asking me too many questions. Stat, here it goes. Man, I’m just sorry, I didn’t see this giant white box in the dark theme. Like all these inputs are dark. I was like, why is there a giant white box there? and the dark theme. Like all these inputs are dark.
1:27:14
I was like, why is there a giant white box there? Okay, it asked me too many questions. Shouldn’t the default be URL? And shouldn’t the source be static? I think those should be the defaults. Okay, then you have to hit enter. Then I can go out and update. That I would work on a little bit. That workflow needs to be worked on a little bit. Okay, now we inspect.
1:27:37
And we see that it’s not a div anymore. Now it’s an A. we inspect and we see that it’s not a div anymore. Now it’s an A. Okay. Got it, hold on. I had a little bit of sweat from that one. Okay, we’re good. It was dripping in my eye. I just wanted to clear that out real quick.
1:27:54
I don’t like the fact that it underlines my link text. I mean, you don’t want to see that on a button typically. So I would have to go to my button action class, on a button typically. So I would have to go to my button action class, typography, and then none. Update, save, refresh. All right. Good, good, good. Why is my button just, let’s just tackle the next question. Why is my button gigantic? Why is it stretching all the way across the screen? This is not the default behavior of a button on the internet. Go to design. Let’s there’s got to be a layout of some sort of size and positioning. Size, cover, content, and this is for backgrounds or something. Okay, primary. There’s a size right here which is not set.
1:28:42
But it shouldn’t need a size. It shouldn’t need a size. This is a button that shouldn’t need a size. It should be automatically the size of the content. It should be an inline element. It should be automatically the size of the content. It should be an inline element. I mean, we can go look and see, you know, what is it getting here that’s causing it to go all the way across the screen. Display flex.
1:29:08
That should be the default, right there, okay? If it’s gonna be a flex item, it should be an inline flex item because links are inline by default, right? It’s going to be a flex item. It should be an inline flex item because links are in line by default right so The idea that we’re going to have that this is what I should have gotten by default so I Don’t like the fact that I’m having to I’m going to have to finagle this So really what I would what I would need to do is select my button and my button action class And then I still need to find like layout. I like work there. It is right here And then I still need to find like layout.
1:29:38
I like where there it is right here. So here’s inline flex. There you go. So my buttons are gonna be inline flex by default. And then we can update. All right, so I do one extra step that I really feel like I shouldn’t have had to do. But whatever. We got a button. We got a button.
1:29:55
Okay. Gigantic buttons are the future web 4.0. Oh, yes. future web 4.0. Oh, yes. We’re we’re all yelling at Kevin as he is doing the wrong thing. Hey, it shouldn’t be easy to do the wrong thing, right? Shouldn’t be easy to do the right thing. Come on, you’re not telling me that that link workflow was, was like, you know, obvious, right? The little gray, I should have known the little grayed out icon that’s just hovering right here in the middle of the panel was the was the thing I needed to be focused on. right here in the middle of the panel was the was the thing I needed to be focused on and Then it deactivates when you have a class selected that shouldn’t happen. By the way, it should not deactivate when you have a class selected It should just know that hey this applies to HTML not CSS. So the class is irrelevant here It should it should allow you to add a link in any in any situation Are using flex column on hero container. I haven’t said anything on the hero container on hero container. I haven’t said anything on the hero container. We can go look at it.
1:30:54
So here’s our section right here, which is not going to matter by the way because well, I guess it kind of matters. No, it’s not. There’s no instructions. It’s a block. It’s a block. So then we’re going to look at the inner and the inner which has all of our padding also has a margin left right of auto It has all of our padding. Also has a margin left right of auto. Yep, no flex instructions by default. There’s no flex stuff going on by default. Okay.
1:31:32
And just to say, like, no builder is perfect, obviously. There, no builder is perfect, obviously. No builder is perfect. And there’s some things that, you know, if I did, like, I just did a first, I did a first impressions of Bricks a while back. It wasn’t part of Web Design for Dummies, but if you want to go watch that, you can. And I’m sure there’s a bunch of stuff that I pointed out that I didn’t like, because no builder is perfect.
1:31:58
And so, you know, don’t see this as like a condemning of quickly. see this as like a condemning of quickly. If I can work around it, then and I can get the eventual outcome that I’m supposed to be able to get, then I still call it a workable builder. Now, if I have to do that too many times, if there’s like all the things I’m trying to do require workarounds, then I just throw up my hands and I’m like, well, I wouldn’t personally use this builder.
1:32:25
So, you know, you just have to weigh the pros and cons So, you know, you just have to weigh the pros and cons of like, if the list grows too long for the things you have to do workarounds for, and just headaches, you know, at some point you’re just like, well, I don’t really want to deal with this. I’ll just go use a builder where I don’t have to deal with this. But ultimately, if you can achieve the correct outcomes, which we’re showing you, I can achieve the correct outcomes here. And so it’s passable, right? There’s just more headaches maybe than normal in this other situation.
1:32:48
it’s passable, right? There’s just more headaches maybe than normal in this other situation and they can alleviate these headaches for sure. They can make improvements down the road that alleviate these headaches, no problem whatsoever. There are certain builders where you cannot, it is impossible to achieve the correct outcomes. The ones I talk about all the time, right? Divi, Elementor, impossible to achieve the correct outcomes. So far with Quikly, it’s not impossible to achieve the correct outcomes. So you’ve got to, there’s two So far with quickly, it’s not impossible to achieve the correct outcomes. So you got to there’s two different categories and they’re worlds apart, right? There’s oxygen bricks so far quickly, and then there’s these other builders that you just can’t achieve the correct outcomes.
1:33:29
And then there’s some builders I haven’t looked at yet. So we’re not going to just throw them in a bucket because that wouldn’t be fair. We’ll look at them when we get to them. We’ll look at them when we get to them. All right. The inner wrapper has position relative as the default not cool. I do agree with that. Position, Bricks made that mistake early on, setting a bunch of stuff position relative by default.
1:33:54
Not cool is the correct answer. Okay, good, good, good, good, good. Let’s keep going on our list. So can you change the HTML tag on a page? So can you change the HTML tag on a div to anything you want? Woo! This is going to be a good one. Here’s our div right here. We’ve got a div. Here’s our tag select box right here. We have span, we have div, okay, well that’s the default. main article link button nav P Forms and inputs it can be form elements. It can be frames it can be images Yeah, oh, okay, okay look at all this Look at all of this. This is not something you see very often now I Get that you know this helps a beginner Now, I get that, you know, this helps a beginner, probably not even a beginner.
1:34:53
This helps like an intermediate user. An advanced user is just gonna type in, you know, the tag that they want, which is, well, there’s your problem right there. Mm. Oh no, no, no, no, no, no, no, no. I should be able to do this. I should be able to do this. 100% enter, should be able to do that. Update, I should be able to come here and I should be able to see this.
1:35:24
That’s what I should be able to see right there. And that is not possible. So that by the way is that’s kind of future HTML. That is 100% legit. You can do that all day long. Like you can do something like this. 100% legit you can do that all day long like you can do something like this and Get tooltip out output it in the HTML Okay, let me refresh this page and we get in here inspect. Where’s our div there it is and it should look like this That is a hundred percent Legitimate HTML and then you can actually target that element with CSS Target that element with CSS now. I I would like to see builders that allow this to happen Believe bricks allows us to have yeah 100% it does 100% So we go to Just any page. I don’t really care Edit BAM boom bang Section here we go add a div. There’s my div and I come over to HTML tag custom div, there’s my div, and I come over to HTML tag, custom, tool, tip, save.
1:36:32
Let me put something in it. Text, save, preview, refresh, inspect. Look at that, right there. Let me zoom in. Tool, tip, okay. You should be able to write anything you want, especially because this is valid HTML. especially because this is valid HTML. So the fact that all, like so many builders limit you to not being able to do that.
1:36:57
Now I will say, it’s a little, it’s up there, okay? We’re getting, you could call it nitpicky if you wanted to. I don’t think it’s nitpicky. I should be able to do it because it’s valid HTML. But the fact that all of this is available to you, I’m gonna give it, I’m gonna give quickly an A, available to you, I’m gonna give it, and I’m gonna give quickly an A, but not an A+. If you add the ability to write anything I want, A+. If you just leave it like this, you stay with an A.
1:37:25
But really what I was looking for, the ability to create like lists, something that’s like common, so absolutely common that you can’t do in so many builders. You can’t make this a UL, look. So, well, in Quickly you can, but in so many builders you can’t, is what I was saying. So well and quickly you can but in so many builders you can’t is what I was saying So now I come in with a paragraph tag and then we see oh and in Amazing Gutenberg fashion. I’ve added a paragraph and I’ve no idea where it is Where did it go it didn’t add it it didn’t add it. All right paragraph add Thank you and in true Gutenberg fashion. It’s outside of the div. Okay, so this would be my list item list item Gutenberg fashion it’s outside of the div. Okay so this would be my list item.
1:38:05
List item and then what I would do this is be a list item and here is gonna be a lot of people like well you use the list block. Okay this is not I wouldn’t create a list like this. I’m talking about a grid of cards that’s a list of features and the cards need to be actual list items that’s what I’m talking about. I’m just testing the ability to do this. So can you come in here and give this an LI I’m just testing the ability to do this. So can you come in here and give this an LI tag and then update and see a clean list on the front end? So we inspect this and Look at that Fantastic. No wrappers. No nonsense clean output a plus So in terms of when I when I look at my 42 point list here It says can you change the HTML tag on an element on a div to anything you want or really an element to anything?
1:38:48
change the HTML tag on an element on a div to anything you want or really an element to anything that you want they get an A. A plus if you allow me to write anything. Okay let’s move on. Can you create a grid of cards as semantically a list? Yes you would be able to do that using this markup change right here. Okay does it have a query loop? Does it have a query loop and I believe it says that a query loop and I believe it says that queries more than just posts. This is going to be a critical thing to look at. Before we look at it, let’s go to the chat and see what everybody’s saying. Wouldn’t running two builders at once be counterintuitive? I believe yes. I would never run two builders at the same time. Quigley inside Bricks for Gutenberg. Okay. Thinline Flex, you could use alignment settings and GAF if you have an icon in the button for example. Okay.
1:39:36
icon in the button for example okay. Oxygen makes buttons inline block and Bricks makes buttons inline flex which one is best as default. It doesn’t really matter at the end of the day I think inline flex gives you more options. Is there a way to change global and CSS reset? All right play with some fancy things like sliders yeah we’re gonna take a look at some fancy things in a second. things like sliders. Yeah, we’re gonna take a look at some fancy things in a second. Alessio says we want an ACSS builder. Probably not coming anytime soon. Oh gosh, that is that sounds like an absolute nightmare. Okay, so Aperture says this is important for the Quickly team. It may be tough to watch the builder being analyzed live, but the way Kevin is doing the demo is exactly how I tested the builder being analyzed live, but the way Kevin is doing the demo is exactly how I tested the builder and the UI UX was very overwhelming.
1:40:32
And I’m not harping a lot on the UX. I think that there could be some improvements for sure. 100% there could be, but you know what? There can be improvements to Bricsys UX. There can be improvements to Oxygen’s UX. Like I said, none of these are perfect. Like I said, none of these are perfect. I care less about where things are, because number one, it’s not entirely fair on a first impression round to say, oh, I don’t like where this stuff is.
1:41:03
Because there is a natural aversion to a new panels, where you just don’t know where things are, simply because you’ve never used it. Not because they’re not in logical places, You just don’t know where things are simply because you’ve never used it. Not because they’re not in logical places, and so it’s really hard to decipher, do I just not like this because I’m not used to it, or do I just not like this because it’s legitimately, you know, there’s things in the wrong places.
1:41:27
I don’t think it’s fair to make that analysis on like a first run, a first impression. So I’m not harping on that a lot. I just expect to be a little lost in a new builder that I’ve never used before. Just my expectation right out of the gate. in a new builder that I’ve never used before. Just my expectation right out of the gate. What I will, like the hills I will die on are when I do things in here, do they behave as expected, and what happens, what does my DOM output look like?
1:41:52
This is 100% hills that we should all die on. If the DOM output is not correct, it’s gotta go. It’s got, we cannot work with this. And so, so far, so far so good with quickly We cannot work with this and so so far so far so good with quickly and what we’re seeing in the dump There were some extra things that I had to do to get it like this and we’re still not You know good with our sections our section element needs a lot of work Okay, if that if that can be fixed and we can get some of these like defaults out of the way It’s where they’re not roadblocks when you’re getting started with the build then I have no problems I have no problems with quickly so far then I have no problems.
1:42:25
I have no problems with Quickly so far. And as far as being in the Gutenberg environment, you know, it’s better than I would have guessed at this point, okay? So let’s continue. Yada, yada, yada. All right, can you create a query loop? Query loop, all right. So what we need to do is go back here. We gotta go to MetaBox.
1:42:49
And didn’t I save this? Save, okay. Let’s go to MetaBox. box and didn’t I save this save okay let’s go to meta box all right thank you post types new post type oh god here we go here we go I believe that it is is there an update available for it it’s probably an out-of-date version update okay now let’s go to meta box post types new post type there we go all right so There we go, all right. So now we’re gonna do like reviews, review, reviews, publish. I’m not doing this by the book.
1:43:20
I’m doing this as fast as humanly possible because nobody wants to sit here and watch this. Hold on. Post types. Okay. We need to add a custom field real quick. So we’re gonna go to custom fields, add new, reviews, add field of text, fine, whatever, review name. fine, whatever. Review name. I just need something in there as far as like dynamic content. We’re going to assign this to the reviews post type, publish, reviews, add new. Don’t like this.
1:43:50
I guess it’s fine, whatever. So post title is going to be sample review. Review name. Bev in accounting Sorry, I do that’s an inside joke publish Some of you will get it. All right So we have Bev in accounting left a review. I guess I put my content up here I don’t like what it does to the native like can I get the native WordPress like? Builder back with some padding in here and such. I don’t know this is the padding in here and such?
1:44:25
I don’t know. This is the, hi, wait, I’m Bev in accounting. I think you should make the logo bigger and make the site pop more. There you go, okay. Bev in accounting always has the same feedback. Okay, so we’ve got a review. The question is, can we query our review? So the question is, can we query our review? So let’s do it.
1:44:55
We’re gonna create a new section here. Never done this, I have no idea what I’m doing. We’re gonna add a section. Bam, perfect. Okay, inside of our section, we are going to add, and here’s where I would want another container. I would want a container for the heading and lead for this section. So I’m gonna add the heading and lead for this section because you would do something like this, right?
1:45:19
You would add a heading. Thank you, Gutenberg. Why would I want the heading to be in the section that I just added? Of course I wouldn’t. And there’s a paragraph. So now I have to drag these into the section. This reminds me of the oxygen structure panel game. I feel like I’m at a carnival. structure panel game.
1:45:38
I feel like I’m at a carnival. What prize do I win if I get it to actually drag and drop into the right place? So this would be our reviews or hear from Bev in accounting. Okay, because she’s the only one that matters. All right, check out our reviews from people who don’t know what they’re talking about. All right, update. who don’t know what they’re talking about. All right, update.
1:46:05
I would want these two things grouped in their own container. And then I would want to add another container that’s gonna house my review cards from my query loop. But because there’s no container element, I can’t do that. What I have to do instead is I can group them with a div and then I can group them, you know, the next thing, you know, with a div, I can group them, you know, the next thing, you know, with a div, which I guess we can go through the trouble of doing that.
1:46:31
So here’s like, this would be like an intro. And so you group these together, just like that. And then you would have another div, and this is going to be for your, of course, why would I want this container in the other container that I’m working in? All right, so that’s gonna be there. All right, so that’s going to be there. So this is going to be your review cards over here and Then we would want to space these out and here’s where you’re going to see Can I space those out with gap?
1:47:02
Actually, let’s let’s do what I would really do in real life. So I would add a class called container gap and the container gap would set a gap which I don’t even know where here we go row gap and I know where here we go row gap and we’re just going to do like 2m for right now and we do not get a gap and Why don’t we get a gap? We don’t get a gap probably because it’s not a flex Element if I had to guess so here’s my section. There’s my inner The first question is where did it try to put the gap? That’s the first question. So there’s a div and there’s my other div try to put the gap? That’s the first question. So there’s a div and there’s my other div.
1:47:43
Shouldn’t the gap be here? Oh no. The gap does me no good on the. Hold on, hold on, So let’s revisit the discussion about why is it so important to have an inner container that you can actually select. This is another reason why. I’m telling you guys it is a laundry list of reasons why it is a horrible idea to put an inner wrapper in a section that the user cannot select because that I need this container gap to actually be on this inner wrapper but I can’t get to that to actually be on this inner wrapper, but I can’t get to that inner wrapper to add the class. I can’t add the class to the inner wrapper. This happens in Oxygen too.
1:48:34
It’s like a huge pet peeve. Now, what Oxygen does, in all fairness to Oxygen, what they do is when I select a section and add a gap, it adds it to the inner wrapper so that I’m still gapping my actual content out. that I’m still gapping my actual content out. This is adding that gap right to the actual section, but there’s nothing in the section that I can access. Everything in the section is actually in a wrapper in the section, thus, womp womp, right?
1:49:04
What I’m trying to do doesn’t work, but it’s a very basic thing. It’s a very, very basic thing. So I’m stuck. I’m stuck on being able to do what I wanna do right here. So I’m just gonna forget it and just say, being able to do what I want to do right here. So I’m just gonna forget it and just say we’re not we’re not gonna gap this out. What if I added it to not a class? Like would it do it right at that point? So I take this off and I come down to row gap and I go to M. Has it done it? Where’s my other… oh dear.
1:49:36
Hold on now other things have other things have gone awry Let’s put something in here first text Okay, yeah, oh no, okay, so by adding a row gap No, did I hit something else Yeah, it made it a flex Gutenberg I swear. Oh my dude. I’m about to I’m gonna yeah I swear, oh my dude, I’m about to, I’m gonna, yeah. There’s gonna be violence. If it keeps not putting things in the container that I have selected, it’s gonna get violent.
1:50:12
Okay, we’re back to where we started. Can I add a row gap without anything blowing up? 2M, oh God. Oh no, no, no. Can that be overused? Is that an overused sound? It’s setting it because it knows, be overused is that an overused sound it’s setting it because it knows hey you’re trying to use a row gap my friend we’re gonna need to make this a flex item but the default flex is rows instead of columns and so it’s putting it in a row by default and that is blowing up our stuff now if I switch it back to column it’s gonna behave properly that I would not like to see that behavior and this is why oxygen and bricks by the way set all of these to see that behavior. And this is why Oxygen and Bricks, by the way, set all of these containers and sections to flex column by default, so that you can use Flexbox controls out of the box without worrying about your layout blowing up. So update. Okay, now we’re back in business.
1:51:06
Now query loop, back to the query loop. Now, you guys see what I’m talking about, right? When I talk about, do the builders get in the way or do they really facilitate your Do the builders get in the way or do they really facilitate your work? This is an example of I wanted to add a query loop. I’m trying to do very basic things. I’m trying to group content into an intro. I’m trying to create another group for my eventual review cards that are going to be here. I’m trying to space out the two containers and I’m just, it’s like roadblock, roadblock, roadblock.
1:51:33
We’ve got to find ways. Now this isn’t a deal killer. It’s not a deal breaker as they say. a deal killer. It’s not a deal breaker as they say. We can this can be fixed. This can all be fixed and made better. But I’m pointing out what needs to get better. All right. So I just want to do let’s get back to action. Where is my repeater? Do I have a repeater? Oh it’s called a repeater. Good. Some people call it a query loop. This is a query that I’m looking at this little quickly icon right. That’s a little quickly icon. So that means it’s from quickly. So I just need to know I’m looking at this little quickly icon, right? That’s a little quickly icon. So that means it’s from quickly So I just need to know what is the difference between a repeater and a query?
1:52:09
I’m just gonna add them. I like to poke the box, right? I just like to poke things So I’m just gonna add this to the page and see what the heck happens Of course Gutenberg did not put it in. Oh my god. I swear. Whoo All right add query template Add block Add query template. Add block. You’re nearly there. Add a block to this container to get started.
1:52:33
Well, it would be a div, wouldn’t it? Okay, query template, query template, query template. I don’t know what’s going on here. Query, block settings, primary, tag, inherit query from URL, front-end rendering, infinite load more. Well, front end rendering, infinite load more. I’m guessing maybe this would be a default query, maybe for templates or something like that, like a archive template or something.
1:53:02
I don’t know. That doesn’t look like the direction we need to go in. I wanna do a repeater now. Okay. Okay, set source. Okay, set source, set source ACM. Oh, is this just for ACF then? Can you not use Meta box? Now we need to go back to our earlier discussion when somebody said, hey, you don’t need Meta box.
1:53:27
It’s got ACF by defined. No idea what that meant. Is there like a partnership between quickly and ACF or something that I’m missing? Let me go back to chat. All right, let’s see. All right, let’s see. Chat, chat, chat, chat, chat. Agreed, I think Kevin will love Pinegrow. Hey, look, we’ll put Pinegrow on the list. Maybe we can do a vote. What do you want to see next? Hmm, totally agree with you on the handles. Completely unnecessary and encourages bad practice. 100%. Design with Krakka in the house. If you guys aren’t subscribed to 100% Design with Cracka in the house. If you guys aren’t subscribed to Design with Cracka, you should go subscribe to his channel. I am a fan of Design with Cracka.
1:54:15
This would cost quickly mad money for such analysis. Hey, I mean, I’m basically doing charity work here, right? It’s fine. No, I love it. I enjoy it. This is good. It’s fine. No, I love it. I enjoy it. This is good. User testing is not cheap. You’re right. Okay. Okay, I need to go back and get your bricks content that builder was starting to make sense to me. You have ACF on board with quickly quickly seems to have ACF pro built in. I mean, you guys can’t just keep saying it right? Where is it? Show me the ACF. I don’t I don’t know where it is. Where is it? Show me the ACF. I don’t know where it is.
1:54:54
Use the built-in ACF. It doesn’t show up in the plugin list, however you have it in your menu bar. Okay, all right. All right, well, let’s do this then. All fairness, if that’s the way we’re supposed to do things, let’s go MetaBox, deactivate, deactivate. Okay. You talking about this right here? Custom fields, okay.
1:55:12
talking about this right here custom fields okay so what I do need to add then is what like CPT UI or something all right let’s add that activate okay god I haven’t used this in ages my god this is bringing back memories post type slug reviews I hope this doesn’t crash Clash with something that metabox has done Review Review, okay Populate additional labels sure add post type good. Okay custom fields oh Man, I’ve never seen this design. Okay, we’re just gonna rock and roll with this. How fast can we do it?
1:55:56
So add new field group title This is a text field This is a text field, field label. All right, so this is gonna be reviews up here. The field label is going to be the name. And it seems like all the other stuff should just be done by default. I don’t know, settings, post type equal to review. Fantastic, save changes. Did I do it?
1:56:17
Did I do it? My reviews, all reviews, add new review. Hey, look at that, Bev in accounting. Okay. All right. Accounting, okay All right This agency was great. I just wished they made the logo bigger and Made the design pop more. Okay Publish publish got it. Good fantastic now update refresh Set source ACF group Set source, ACF group, reviews, ACF field.
1:56:55
Oh, I don’t know what I’m doing yet though. Why am I choosing fields? I don’t have a block yet. I don’t know what I’m doing. This doesn’t feel like the workflow the way that it should be. Update, refresh, repeater content not found. Your block is safe, but quickly isn’t able to find valid content with the settings provided. But quickly is able isn’t able to find valid content with the settings provided. I Don’t feel like we should be deciding what fields I’m choosing from right here. I feel like we should be Just querying reviews and then I can put a block in here Like can I add a div in this repeater?
1:57:31
So that would exactly be the thing I would expect to be able to do is add a div in this repeater. Oh Guess it won’t let me in this repeater. Oh, it won’t let me. It will not let me. Okay. Without diving into documentation what am I supposed to do here? Location, post ID, location ID. No, no, no, no, no, no. This is not, this is not necessary. Should not be necessary. Okay. Let’s go down Okay, let’s go down to the bottom. What are you yelling at me about now? Remove repeaters, add query, got it. Okay. All right, I was doing this wrong apparently.
1:58:11
All right, so we’re gonna go to query. Review cards, add query template. That’s a little confusing. I don’t wanna add a query template, but whatever. We’ll go with this. Okay, add block. Div, just give me a div, thank you. Just give me a div, that’s all I want. That’s all I’m asking for. Block.
1:58:25
Div, just give me a div, thank you. Just give me a div, that’s all I want, that’s all I’m asking for. All right, so query, inherit query from URL, no. Query editor. Posts, ooh, look at this. Terms, users, comments. Guys, are we already at the two hour mark? My gosh. I always, I’m overconfident in the timelines.
1:58:48
I always, I’m overconfident in the timelines. All right, post terms users, I got 30 more minutes, I guess. We gotta move quick. But this is a critical part. I love this, I love this. You can’t do this in Oxygen. By the way, I will say this, you know, Oxygen, can’t y’all all agree that the query, I think we shall all agree that the query, the repeater in Oxygen, they should have given you the ability to query users and terms way before they gave you Emmet, okay?
1:59:26
This is way more important than Emmet. I’ll tell you that right now. So the fact that this is available in Quickly, it’s fantastic that you can query more than just, you know, posts and post types. just posts and post types. So I’m gonna post, post type, here we go, reviews, there it is, good. Include posts, we don’t need to worry about that. Exclude, non-inparent, post-parent, I don’t think any of that matters.
1:59:52
Can I just close it? Hopefully it’s not gonna blow up. Okay, so the question is, does this work like Bricks where you put the query on a block, or does it work like Oxygen where it creates a query, where you put the query on a block, or does it work like Oxygen where it creates a query, like a query container, and then you just put your blocks in the container and it somehow knows, like I’m guessing that’s what this thing is for right here.
2:00:15
So I’m just gonna say that this is our review card. All right, and then inside of our review card, we would put two text elements. Let’s just rock and roll with that. That’s all we need for right now. put two text elements. Let’s just rock and roll with that. That’s all we need for right now. And of course, Gutenberg feels that we don’t need those in the actual review card.
2:00:34
All right, so let’s go. All right, here we go. I’m playing the carnival again. Okay. All right, so paragraph. I can only see one of them on the page. I see one of them on the page. Okay, so this is the one I have selected. Now, next hurdle we have to tackle is dynamic content. I’m keeping my eye here.
2:01:01
Query card is a template, query editor is just dope. All right, good. But how do I do dynamic content now? I need to inject the dynamic content into this paragraph right here. Do I need to do some sort of, is there some sort of dynamic content block? Do I need to do some sort of is there some sort of dynamic content block That I’m missing Can I can I oh does it need to be maybe it needs to be Maybe it can’t be those paragraphs. Maybe it’s got to be this paragraph or maybe it’s got to be post content All right review card, let’s just throw post content in there I All right review card, let’s just throw post content in there. I Can’t put that in my review card. So oh, well, that’s it right there Okay, all right, hold on we’re making progress let me dock this to the left I’m tired of like getting neck problems already Because my screen is too big and I’m also looking through a microphone arm. So let’s go back here to dock left. Oh gosh. Thank you All right So we have a query template Thank you. All right. So we have a query template, post content.
2:02:08
I guess this is like, this then would be the review card. It’s kind of like oxygen. It’s like, is that a default div basically? We’re going to look at the output on the front end. Delete. All right. So there’s my post content, but surely I can choose what content I’m querying. Yeah? Surely I can choose what content I’m querying, yeah? Where do you do that? Put quickly blocks to get the dynamic available. Got it, okay. Maybe I don’t need post content then. Post content probably has to go. So I use a paragraph from quickly.
2:02:50
In the review card. In the review card, okay tag text that’s colors typography margin and padding link conditions design little icon database icon database I don’t see a database icon Icon database. I don’t see a database icon. Where is it? Relative styling, pseudo classes, transforms, effects, borders, layout. I don’t I don’t feel like it would be in any of those. It should be in the primary tab. First of all, if I’m if I can you not do it on paragraph elements? Oh, right Woo! Okay, source. ACF. No, this would actually be WordPress.
2:03:47
Post content. Post content? Post content. Post… Archive, archive, site, site, Arthur, Arthur. Okay, yeah, no. So we do need the post content So we do need the post content module back then. All right, so what this is gonna be is our ACF reviews name. Bevan Accounting, there we go. Okay, hey, hey, we’re getting somewhere. Okay, now what I just need is the post content probably. Content, post content, this it right here? Is this it right here? BAM There you go update oh No update failed Updating failed what has happened?
2:04:38
What has happened did I do something wrong? Did I break it? Oh, no, oh no Reload oh No. Reload. No. What happened? Oh guys, we might be, render post content block with post ID two block cannot be rendered inside itself.
2:05:08
What? Edit. Oh God, fatal error. Oh no, this is the worst of the worst. The worst of the worst that could have happened. This is the worst of the worst the worst of the worst that could have happened Pages add new can I get any page to work? Yes. Okay, what just happened guys? What just happened let’s get this back as quickly as we possibly can Div goes in the section Okay drop in a Div goes in the section.
2:05:38
Okay, drop in a repeater. No, query, it’s not the repeater, it’s the query. Add a query template, add a block. Div, add a paragraph, add a post content. Query template, no, we don’t want a div. Query template now, we don’t want to div that’s we decided that okay We want paragraph to be below post content Good. Okay. Let’s try to do all this again. It’s good. Anyway to figure out, you know, how this stuff works. All right No, no, it’s updating failed again. Okay. Hang on post content is probably loading the page You’re working on content inception can’t load probably loading the page you’re working on content inception can’t load. Post content. All right let’s get the query right first and then we’ll figure that part out. I’m just trying to remember where the query gets done. Yeah you got to turn this off then you get access to the query editor then you can select reviews then you can include no we don’t need to include posts. So we have post So we have post post type reviews. I think that’s all we need and then Post content would need It needs to be told what to pull from I mean, it’s kind of default I mean I tried not to use this Maybe it’s just not safe to use that But how else would I get the post content?
2:07:12
It’s just not safe to use that. But how else would I get the post content? Because if I use a paragraph tag, I cannot get it. So here’s the dynamic data that’s available to me. WordPress, post date, excerpt, ID, tag, time, title, comments, category, custom field. Yeah, you can’t. I don’t see how you can. You can’t, I don’t see how you can. It’s fastest to add blocks with the stacked icon that shows the block next to the name.
2:07:48
Where’s that? Like so not here. Yeah, I haven’t started using this yet. All right, I guess that could be a little bit faster. But what’s wrong with this query? I guess that could be a little bit faster. But what’s wrong with this query? Post contents not available. Okay. Well, at least the update failed thing went away.
2:08:23
Anyway, I checked. Anyway, I checked. That’s true. If you can’t do something or shouldn’t do something, it shouldn’t let you do it in the first place. That is true. Okay. Anyway, I answered the question. Because what I could do as a workaround is just put the body of the review in another custom field.
2:08:43
Then I could query it, no problem, and we move on with our life. But ideally, you would be able to query post content without destruction of your entire page. you would be able to query post content without, you know, destruction of your entire page. And what appears to be an unrecoverable error, because I don’t know how I would, how would I recover this? You can’t open the page to undo the problem you did. And this page is gone. This page was lit on fire.
2:09:08
And that definitely is an issue for sure. Okay. We got it though. We answered the question. Does it have a query loop? Can you query more than post? Yes. We got it though. We answered the question. Does it have a query loop?
2:09:14
Can you query more than posts? Yes. All right, header and footer templates we should look at. We don’t have time. Can you templatize CPTs, blog posts, et cetera? It appears you can, but I’m not gonna dive into it. Support for dynamic data is a yes. We already determined that. Conditional logic. I believe I saw something related to conditional logic here.
2:09:38
It was under advanced maybe. related to conditional logic here. It was under advanced maybe. So we had custom CSS scrolling attributes. Oh the attributes is good. Let’s look at that real quick. So for example I could add like a ARIA you know like ARIA label. If you say area I think you’re a psychopath because it’s clearly spelled ARIA. Source is static. Oh, because you can do dynamic data attributes. Fantastic. So this would be ARIA label of Bev’s review, update. Then let’s just go check out the front end. Well, it’s not that page, is it?
2:10:18
How do I get a preview? Right here, preview new tab. Oh, no. Oh, no. Oh no. Oh no. Oh wait, we didn’t we didn’t query anything. I thought we did. WordPress paragraph now just go okay, just to say ACF reviews and name. There we go. Bevan accounting update. Where is it? It’s right here. I can see it. So it’s It’s right here I can see it says Bevan accounting I don’t know. I don’t know what’s going on and we blew up our other page. So, okay What we’re gonna have to do is go out trash trash quickly add a new page This is going to be home Add a section. I just want a page that I can see content now. Let’s just get back to basics. Let’s go heading There’s a heading of course, it’s not inside my section Okay. Hi, I Have an aria label All right, publish publish All right, and then we’re gonna go to All right, and then we’re going to go to, we have our heading selected.
2:11:40
So advanced and attributes and add, ARIA label, source static, okay, hero, heading, update. This is not an ARIA label you would actually add, I just need to see something in the output. Okay, save, thank you. Preview, there we go. Inspect. There it is. Okay, good, good, good.
2:12:17
Attributes are very useful. Used for a ton of stuff, you know, way beyond ARIA labels and sites. They’re very, very, very important. ARIA labels and sites. They’re very very very important. So the fact that those are on there. I wanted to look at some accessibility stuff like with tabs. Like let’s just do that real quick because that’s very simple to do or should be. So what I’m going to do is go here and I’m going to add an accordion for example. So let’s add oh we’ve got got two different things. Look at that. I’m just going to add an accordion right here. So here it gives me an accordion header, accordion So here it gives me an accordion header, accordion content.
2:12:51
Okay, let’s just take a look at this. Let’s inspect the DOM. So this is a question. And then this is the answer to a question. And we’re gonna check out, let’s just check some basic accessibility of some of these components here. So accordion content, accordion header, accordion. How do I add more accordion items without breaking things? Accordion how do I add more accordion items without breaking things?
2:13:17
Do I just duplicate? if I duplicate this It doesn’t allow me to Is this where the accordions comes in Yeah, probably there’s probably a wrapper for the accordions, and then you can add accordion elements got it got it got it. Okay. I’m just and then you can add accordion elements. Got it, got it, got it. Okay, I’m just making shit up as I go. Okay, accordions, great. Where’d it go?
2:13:47
There’s my accordions. Oh, and it gives you an accordion. Okay, so we don’t need this one. So really you just need to add the accordions element. And there’s an accordion and I can duplicate this, get another accordion. Okay, this is what I would expect to see. All right, so now we say question three. we say question three. There’s that Gutenberg nonsense again.
2:14:07
Okay, we gotta go top toolbar, there we go. See, I couldn’t select the next one I needed to select. Gutenberg always trying to get up in your way. Question one, all right, update. Now it’d be nice if those were in the section, you know, so they’re not just floating out in space. All right, we can get rid of this heading now. just floating out in space. All right, we can get rid of this heading now. Excellent.
2:14:29
All right, let’s just take a look at some basic accessibility. No, sir. No, sir. No, clearly these are in the section. Gutenberg also does this to me all the time. I’ve changed things, I need to be able to hit update. It seems to think I haven’t changed things, thus it doesn’t let me hit update. It seems to think I haven’t changed things. That’s it doesn’t let me hit update Okay, let’s do question one Now I can update page updated. I Don’t have any caching going on. I don’t know why that’s still there It’s a good. Oh, it’s cuz Gutenberg’s trash can of a preview isn’t actually previewing the current version of the page Okay, hey, oh Okay.
2:15:13
Hey, oh, oh, oh. Passes test number one. Okay, let’s inspect. Oh, this is going to be a good one. This is going to be a good one. There’s so many things to look at here. Okay, it has an ID. Okay, it has an ID. It needs an ID. It’s missing some things.
2:15:51
It’s missing some ARIA attributes for sure. But it does have the button inside of… First of all, this should be… Okay. These should be headings, ideally. Okay, these should be headings. Ideally, you would see these as H3s. This is the way that it should look. That should be an H3 with a button nested in the H3. That is correct. This is the content. Now we see the ARIA labeled by, that’s correct. And we see the ARIA expanded ari expanded Wait a minute, okay All right, all right Let’s get into the content. All right. There’s a P just for the content. That’s fine Okay, this is very close to the way that it needs to be but you also need the ability Which I don’t know if we’re going to have this accordion right here. I should have the ability to set it. Oh I can I have this accordion right here.
2:16:50
I should have the ability to set it. Ooh, I can, I can, I can, I can. LI, which means accordions, UL, and this accordion, also an LI. Ideally, these would be driven by a query loop. So you would only have to do this like once. This is gonna be an LI. once this is going to be an LI look look at all of these things I’ve changed and it won’t let me update the page the Gutenberg trash can is just in flames right now do you guys see why I absolutely detest this nonsense so what I just have to arbitrarily change something on my page that I All right, let’s go back, refresh.
2:17:39
Oh, wait a minute. I don’t even know if I’m looking at the right preview now. I don’t. Okay. Inspect. Isn’t this supposed to be a UL? Then I asked this to be changed. Let’s go look at it again. Accordions. Oh, it didn’t keep it. Let’s go look at it again. Accordions. Oh, it didn’t keep it.
2:18:04
Why didn’t it keep it? UL. Do I have to hit enter? Enter doesn’t work. I actually have to select it from the list. Okay. LI. LI. We’ll just leave the other one. Who cares?
2:18:22
I just want to see if these update. There we go. There we go. Why don’t I have LIs? That should be an LI. Right there. Let’s refresh the builder. Grab the accordion. It says it’s an LI. It says it’s an LI. So why isn’t it it’s an LI. So why isn’t it an LI? Oh wait wait it is now. No there they are. Yeah I don’t good Gutenberg’s preview is just messing with me right now. This is why I usually get out of the preview and I just open like just show me the homepage of the site. I don’t even deal with the preview nonsense. The preview is The preview is so broken.
2:19:13
Alright, UL and LI. Fantastic. This is good. This is good. This is what I would expect to see. OK. You won’t get that out of most builders. I mean, I’ll tell you that right now. You’re going to. You’re going to get the inability to use UL’s and allies.
2:19:30
You’re going to not see the right aria labels. There’s going to be no button element. It’s not going to be keyboard navigated. Even bricks, bricks is bricks is accordion element. Bricks is accordion element. This is better out of the box than Bricks is accordion element. So that’s fantastic. All right. Flexbox and grid controls.
2:19:47
The last thing I want to look at is grid. I want to see what is going on with grid inside of Quikly. So let’s get out of the accordions. Now we need to figure out how to add a grid. I want to go back to the chat real quick and then we’re going to take a look at how to add a grid. All right. quick and then we’re going to take a look at how to how to add a grid. All right let’s see. Is it possible to add PHP? Yes it is. We looked at that earlier. There is a code block that you can put in and it does support PHP. Can you go over grid function span of a div within a grid and mobile? Yes that’s what we’re going to do right now. Kevin let’s say in a few months you’re Let’s say in a few months you’re like, damn, quickly is amazing.
2:20:27
Do you keep clients on the past builder you use or do you switch clients over ever? I will switch a client over if they pay to have it switched. I ain’t doing that for free. That’s a lot of work. It might be the preview, yeah, yeah, yeah, yeah, yeah. All right, we got it. You didn’t push enter for the tag change. Well, enter doesn’t work for the tag change.
2:20:48
You didn’t push enter for the tag change. Well, enter doesn’t work for the tag change, though it should. I actually had to click it in the list. I thought it was just me not being able to save. How did they not get this simple thing right? And it’s not quickly, that’s actually Gutenberg. I mean, that happens to me all the time in just a normal Gutenberg editor. So, okay, so someone says columns is the only way to add grid.
2:21:13
Well, that’s unfortunate. Columns is the only way to add grid. Well, that’s unfortunate. Should be called, really it shouldn’t be called anything. You should add a div, okay? This is my pet peeve on all of these block builders, by the way. Let’s talk about what doesn’t need to exist. So columns, section, heading, paragraph, image, button, accordions, accordion, tab contents, tab list, all of these are fine so far. lists all these are fine so far icon fine video fine list fine slider fine gallery fine modal fine menu fine div fine maps finds uh i don’t even know what a swatch is input fine hook fine fragment fine filter don’t even know what half these things are but they’re fine whatever um those are all very important uh where’s the where’s the columns important. Where’s the columns though? I didn’t see columns.
2:22:07
All right there they are right there. This doesn’t need to exist right here. We’re gonna add it we’re gonna see why it doesn’t need to exist. Select your layout. I don’t want any of this. I want to make my own layout so I’m just gonna do this one. All right perfect and in you know fantastic Gutenberg fashion you In you know fantastic Gutenberg fashion. You have no idea what the hell you just added to the page. It is a mystery Where is the columns? Why aren’t they in a section? Okay. There we go. Hey, there we go Alright, so it’s actually two elements. That’s interesting. We have a column and again columns. So this is a cell basically Cell oh gosh Oh gosh Cell no No, thank you. Okay columns Cell just just wrapping my head around this here. Okay, so now I can change Columns cell So that’s interesting that that’s this is hmm Why are these display controls on the cell and not the parent?
2:23:12
on the cell and not the parent. Because as we all know, the parent sets the flex or the grid. You’re not doing this on a child cell. So I’m confused right off the bat. I feel like this is where you should set grid. Then you have cells in your grid. Columns is the grid wrapper. It’s not though, because I can’t set a grid here. It’s not though, because I can’t set a grid here.
2:23:43
Unless I go to design, layout, grid. Now I can do grid. But why is that the default when I click on a cell? Why are these the default things? Like grid is right here as a default when I click on the cell. That should be the default when I click here. Well now it is. That should be the default when I click here. Well, now it is.
2:24:03
All right, now it’s just the panels confusing me now. All right, let’s go with a grid. What is this? Display, visual, position. What does visual do? Okay. All right, so we have a grid. Now I just need more cells. So let’s go to, oh, of course, of course duplicate is grayed out.
2:24:27
Now that tells me that this is some sort Of course duplicate is grayed out. Now that tells me that this is some sort of default wrapper. Column is the grid item. I don’t know, it’s not behaving that way. Why can’t I duplicate it if it’s a grid item? This is why this shouldn’t exist. This is how the workflow should be. Let me just show you. Add section.
2:24:47
I’m just gonna show you how the workflow should be. should be. The paragraph that you can’t get rid of. Good old Gutenberg. Section. Section. I had to click it twice to add it. Okay. So you add a section then you add a div or ideally a container. I don’t know. So you got a div. This is going to be your grid. Then you add and that’s got to be in the section. I would not be able to Then you add, and that’s gotta be in the section. I would not be able to, the fact that Gutenberg refuses to put content into the wrapper you already have selected, I’d get one day into my career in web design and I would go jump face first off of a bridge, that’s it.
2:25:32
Like, that’s too much, it’s too much for me. Can’t do that. That alone, like, if they don’t fix that, that. That alone, like, if they don’t fix that, I can’t use I can’t use any Gutenberg based thing. So now I’m going to add another div. And I’m going to drag it in. Okay, so this is going to be my cell right there. So then I would come to my grid and I would just say, Hey, hey, buddy, display grid. And then look at all these cells that I can duplicate. And I can duplicate again, I just want to make a three column grid, I’m just going to do this manually with divs, because this is all that you need, you only need divs. The question now is how do with divs because this is all that you need you only need divs. The question now is how do I get my layout? Where do I choose? It makes no sense to me that when I choose grid here I suddenly don’t have any controls because now I should be able to choose my grid structure. Where do I set my grid structure? Don’t tell me I set it on the cell. Just that’s not the answer. That better not be the answer.
2:26:24
That better not be the answer. Primary tab white icon, okay? Primary tab, white icon. They’re all white. I don’t know. What do you want me to do here? Where do I set it? Design layout. All the controls went away. All the controls went away.
2:26:49
As soon as I selected grid, I have no more controls. Now, juxtapose this with here we are in Bricks. OK? Here’s my container. If I want to display this grid, it naturally gives me grid controls. Hey, buddy, what do you want your grid to look like? It’s kind of the natural flow, right? It’s kind of the natural flow, right? Quickly says grid controls haven’t been…
2:27:18
Okay, that explains it. So they haven’t been implemented yet. All right, they’re on their way. All right, but I saw some video of a… Maybe this is a future release, maybe it’s a beta. I don’t know. I saw some fancy grid builder thing. Okay. All right. All right.
2:27:40
So let’s do this. All right, all right. So let’s do this, let’s do this then. So we are going to test out the CSS capability then. So we’re gonna do grid on this div right here. I’m gonna go to advanced and I’m gonna go to CSS. And I don’t know what I’m doing. What is this thing? What is that for? Edit in modal.
2:28:00
What is that for? Edit in modal. Okay. Do I have to do anything here like in Bricks, we got to do a root or anything like that? How can I auto-select the thing that I’m currently on? To target the class of this block, use the block class selector. There you go. Handy little tool tip. So we’re going to go display grid. Tool tip. All right, so we’re gonna go display grid and Well, this is probably tiny for you guys, isn’t it? Let me open this up grid template columns. Okay, we want to go repeat 3 min max 0 0 1 fr Hey, we’re in business gap of 2 M Update, we’re in business.
2:28:50
Gap of 2M. Update, okay. Now beginners aren’t gonna be able to do that, so that’s why the grid builder has to arrive at some point. But I like this little, I like this thing. This is a nifty little, nifty little guy right here. I wish Bricks would implement something like this. A floating CSS editor for the element Bricks would implement something like this a floating CSS editor for the element that you’re working on would be absolutely fantastic Beautify oh Hey, can you do sass in here? I saw something about sass processing in the settings earlier. Can you can you do some sass in here?
2:29:33
Yeah, so it would be something like this So it would be something like this. I’m guessing based on the colors that it’s not going to allow me to do this. I feel like something happened up here. I feel like something’s broken. But I guess we’ll find out. Yeah, no, it’s all it’s all broken. So no sass here. Man, that would just be absolutely fantastic. If you could, if you could do sass there. I don’t know. Okay, we’ll just we’ll just put it back. Okay, update. Well, this is this is usable, then this is We’ll just put it back. Okay, update.
2:30:26
Well, this is usable then. This is workable. So for an intermediate advanced user, you can do grids, no problem here. Oh, I like how they show you the CSS over here too. That’s nice. Oh, this is the size of that CSS box. It was just empty when I was first playing with it. Got it, okay. Whatever.
2:30:48
Anything else you guys want me to look at before we dip out here? Anything else you guys want me to look at before we dip out here? Two and a half hours is a lot. I get it. I do want to thank everybody for being here We still have a good audience size Anything else you want me to look at real quick Yeah, I’m excited to see Okay, so the columns I mean let’s let’s try to get the columns element going if that’s the way to go I mean, let’s let’s try to get the columns element going if that’s the way to go Let’s try to get the columns element going one more time So I go columns All right, let’s figure it out columns No, I didn’t want it I didn’t want it. Okay. There we go But do I have to choose a pre-made column?
2:31:34
And then how do I get back to that chooser if I if I make the wrong choice? How do I get back to that chooser? If I make the wrong choice off the bat, how do I get back to the chooser? I’m just gonna save time and re-add it. Are these my only choices? This seems like it would be a flex layout if I chose this. So, and do they have their own divs by default? So and and do they have their own divs by default that’s another kind of I don’t really like when they have their own divs I assume these are their own divs so we’re just gonna make these cards we’re gonna put a class of card on here so we hit here this is gonna be a card create card fantastic okay let’s just go to the layout real quick let’s go to margin and padding just link all go to the layout real quick. Let’s go to margin and padding. Just link all these.
2:32:30
Just do 2M of padding on all sides. That’s perfectly fine. Let’s throw in a heading and text real quick. Come on, come on man. Heading. Why can’t I add anything? If I’m if I have a card selected I oh is it because this thing’s open no no So these are not I am so confused Add a heading So I can put my heading in a card, but I can’t select the card and then add something Fantastic Gutenberg just wonderful Let’s make this an eight. Oh, well, I should have used the quickly heading. I got to remember that too. All right heading got to always use the quickly heading. All right, put that in there card heading and I’m gonna change this to an h3. Okay, that’s easy. Nice Let’s put a paragraph in there heading pair. Yeah, that’s why these are on the on the left, huh?
2:33:36
Heading pair. Yeah, that’s why these are on the on the left, huh? Got to learn to start using those don’t I? this is card text and Can I delete these? Yep, I can But then they turn into columns And I can’t duplicate my card. This is why I don’t like default containers. I don’t like default containers for this exact Reason it’s just there’s just too much getting in the way containers for this exact reason. It’s just there’s just too much getting in the way.
2:34:06
What I want is a container that I can just put divs in. And see my div has to be in a card and then this has to be in there. And then I’ve got a but now my car my div doesn’t have the card class. Watch watch the juxtaposition. Here we are in bricks. Watch the juxtaposition. Here we are in bricks. There’s my container that is my grid, right?
2:34:32
And watch this, I go block, block, block, or div, div, div, whatever you wanna do, right? I’ll just do div to keep everything nice and simple. So div, div, div, there’s my three divs. I made them myself, right? In fact, I can make one div if I want and I can call this card. And then I can duplicate it twice and now I have three cards. I can duplicate it twice and now I have three cards.
2:34:51
Then I can go to my container where I have my grid set and I can go to my grid template columns and I can do whatever I want. If I want to use automatic CSS I can just do grid 3 and I’m done and I move on with my life. If I want to write my own repeat function I can do repeat min max just like I was doing over there 0 1 fr and then I have my gap which is right here And then I have my gap which is right here I can set it to M or I can do my grid gap and then look I have these are my cards that I want To work with and just see how nothing is getting in my way I’m just free to do what I want to do. I can duplicate these all day long I can put elements inside them when I have them selected the heading goes in the container The text goes in the container and then because I have a card class on all of them and then because I have a card class on all of them.
2:35:40
Let me just here I can even delete them all now that these have actual content. Bam, bam, bam, bam, bam. And then I select my card, select my card class, go to style layout. I can do I usually just do all custom CSS, but you can find like the gap property. You can add your gap to it. I usually just go down here, write my route. I usually just go down here, write my root, okay? And I say, hey, I want a gap of, well, this would be content gap, okay? And then I would want a, I want some padding on here of 2M.
2:36:16
I don’t think I have my contextuals turned on. We’ll just do a 2M on our gap there. I don’t know why gap’s not working. What’s going on with that? All right, let’s save. Let’s go to the front end. Gap’s not working. What’s going on with that? All right, let’s save. Let’s go to the front end, but you see, there we go.
2:36:32
Now we’ve, oh, gap’s not working because I always use blocks, but I used a div for y’all. And divs are not flex items. So there we go. Flex and column, perfect. See, see how fast we get to what we’re looking for? Nothing, nothing like gets in the way, you know? And stuff is just, man, it’s just fast. way, you know, and stuff is just man, it’s just fast. Got a structure panel, you know, all the same, but it’s like, when we have these default little things, these columns, like, here’s my card, and then do I put a div in the card? I don’t know which one do I attach my class to because when I delete them, they come back like they’re just there’s always columns here. And I don’t know if those are cards or what they’re supposed to be. I don’t know if I should put my card And I don’t know if those are cards or what they’re supposed to be.
2:37:15
I don’t know if I should put my card class on that or in the div inside the column. It’s a little confusing right, but I’m gonna still work with it. Let’s update and go to the front end. Hopefully it puts something there for us to inspect. I just want to see what it’s doing out of the box like is it flex? No, it’s display grid. Repeat 3 1 fr that should really be a min max. 3, 1, FR that should really be a min-max. You do get some overflow issues from time to time if you don’t min-max this. Like that, that should really be the output that we’re looking for. And then yeah, those are the div cells. Oh, I don’t know why they’re getting these automatic instructions of spans. That would seem to over complicate things. That would seem to overcomplicate things.
2:38:05
When the parent is set to repeat three min max zero one FR, or even repeat three one FR, you don’t need any instructions on the children. That’s what’s good about grid over flex. Flex box, you have to put an instruction on the parent, you have to put instructions on the children. With grid, you just need instructions on the parent for the most part, unless you wanna do crazy shit, you know? Then you need to tell the children what to do. Unless you wanna do crazy shit, you know?
2:38:26
Then you need to tell the children what to do. But for the most part, you just need a parent instruction. Is this the thing that has that fancy grid builder though? I gotta find it if that’s the case. Grid. Yeah, I’m not really sure what to do here. Grow, shrink, basis, order. Can we like span? How do I span this? this order, can we like span?
2:38:52
How do I span this? If I want this to span two of the columns, where are our spans? Where’s our starts? Maybe these don’t exist yet. Maybe these are coming. Maybe this is a future feature. Set auto grid to not have those properties applied. Okay, columns, primary. Okay columns, primary, I saw it here, auto grid, auto template, auto fill, auto fit, aha okay well now gaps show up when we auto grid, okay update. So if I were to just make a suggestion here, see this again why I think you’ll get into trouble with 1FR 1FR 1FR probably creating some I think you’ll get into trouble with 1fr, 1fr, 1fr, probably creating some overflows in places.
2:39:44
If I had to make a suggestion, personally what I would do, I get that there’s probably a user experience, like a beginner would be like, where’s my grid element? Where’s my columns element? Where an advanced user would be like, now just give me a container dog, Where’s my columns element? Where an advanced user would be like, no, just give me a container, dog, I’ll turn it into what I need it to be.
2:40:07
Okay, so I get there’s a discrepancy between being beginner-friendly and being, you know, having advanced stuff. In this case, the advanced user is having beginner-type stuff get in their way. This is like beginner-type stuff getting in the way of like trying to do, you know, as an advanced user trying to accomplish something. stuff getting in the way of like trying to do, you know, as an advanced user trying to accomplish something. If I were to make a suggestion, if you want to leave the columns the way that they are, if you think this is friendly to beginners, fine, whatever, I’d probably make a grid element then. So I’d add it, there’d be a columns element, which would be a flexbox element.
2:40:47
I don’t even know if I would call it a columns element at that point. I’d call it a flex container or something. I would call it a columns element of that, but I’d call it a flex container or something. And then I would make a grid element and that would have grid controls. But what I would also do for the advanced user is just let’s pop a div in here. And then, so if I do this, pop a div in, put it in my section, and then I come here and I select that this is gonna be a grid.
2:41:12
So I go design, layout, grid, and I just need grid options right here. So I go design, layout, grid, and I just need grid options right here. What are you, what are, you know, be able to define it. And then bricks, people criticize bricks for this. So I’m gonna, I’m gonna select here. See they criticized bricks for putting these basic inputs, but in actuality, these inputs allow you to do exactly what you need to do. It’s not fancy, it’s not beautiful, it’s not pretty, but it does, it allows an advanced It’s not beautiful, it’s not pretty, but it does, it allows an advanced user to do exactly what they need to do without any limitations whatsoever.
2:41:46
The only thing I don’t know is if this supports like grid shorthand, but I, you know, we haven’t gotten that far, cause it’s really kind of nitpicking a little bit at that point. And you can do it with, you know, the CSS tab if you really need to, but just be able to do this on a div is so incredibly useful. But just be able to do this on a div is so incredibly useful.
2:42:06
And unfortunately and quickly when you switch it to grid, you get nothing, you get no other, but you know, in fairness, I guess they say that’s coming. So that’s just what I would like to see. I would like a div to be able to be a grid, and then I can put my own cells inside of it. I can fully control everything, put my classes, I know exactly what’s what. I know there’s gonna be no extra wrappers that we don’t need to have.
2:42:24
There’s gonna be no extra wrappers that we don’t need to have. So that’s an overview of grid. Okay. Columns, blocks, sections, div always confuse me, especially when everyone has a different meaning behind them. Yes. Yes. It is a little bit confusing. So quickly says that’s why it’s coming in the layout properties.
2:42:48
Good. I’m excited for that then. Good, I’m excited for that then. I don’t think you should have to turn on auto grid, that auto grid setting. It seems like the building block should be, it’s like let’s start with the basics and then you add things, right? We shouldn’t have to remove in order to get back to the basics. And I feel like that’s what we had to do with the auto grid.
2:43:12
Sometimes a powerful grid builder gives you more limitations. Sometimes a powerful grid builder gives you more limitations. Yes, yeah, it often does. I really haven’t seen, as far as a visual grid builder goes, anybody really, really, really get it right. I need to go use WebFlows. I haven’t used theirs in a while. They may be the closest to getting it right. But Bricks really got it right simply because they just gave you inputs to define anything basically that’s related to your grid.
2:43:36
they just gave you inputs to define anything, basically, that’s related to your grid. So, yeah, it’s not pretty, and it’s not beginner-friendly, but for somebody that knows what they’re doing with grid, it gives you so much power and control and freedom. How do I get the quick add column to the left of Kevin’s panel? I can answer that. I can answer that. You go into quickly, you go into settings, it was somewhere in here.
2:44:00
So quickly, you go into settings, it was somewhere in here. Advanced settings. Actually it was in the, no I think it’s in the builder. I think it’s in the builder. It was in the onboarding series, but I don’t know where it is now. I lied. Let me go into pages, I think maybe it’s in the builder. Edit, settings up here. These quickly settings.
2:44:26
Settings. Backend.
