0:00:00
Yo, let’s go. What is up, everybody? Welcome back. Another web design for Domies, another Wednesday. It is, wow, I can’t even talk right off the bat. It is another Wednesday. It is 11 a.m. Good morning, Anne-Marie. Good morning, Steve. Flying Web Solutions is here.
0:00:19
Ruben is here. Ruben, we’re doing your site, my man. We’ve got that pulled up. All right, drop a comment in the chat as soon as you arrive and the stream starts. Drop a like on the stream. You already know we’re going to be having fun today. It’s going to be a good episode. If you don’t know what we’re doing here, Web Design for Domies is a weekly series where we do live in-depth website critiques. I forgot to check my audio levels before I started, so I’m just going to go ahead and do that real quick.
0:00:52
It looks like we are good to go. All right. So yeah, we’re looking at, we do a deep dive on these websites. Typically, over like a two-hour span, we’re looking at two websites. In fact, I only have two for today. Now, if we happen to finish them up a little early, then we’ll just get out of here a little early, or we like to fill in gaps with tutorials, like maybe some live mini tutorials.
0:01:16
We do a lot of Q&A. We try to pack as much value in as we can. And the goal, the mission of Web Design for Dummies is to make you a better web designer and developer and a better copywriter person, a better SEO. Everything that makes a website better, makes a website effective, that’s what we’re looking at. And so you can learn a ton here. In fact, many people have emailed me, messaged me, they said, I learned more in the Web Design for Dominion series than anywhere else. And that’s, I mean, it’s true because we’re looking at real, we’re not talking about theory here.
0:01:52
We’re not talking about, you know, just principles in abstract terms. We’re actually pulling up real websites that were executed by a web designer or developer or whatever, and then of course the copy, everything that goes along with that. And we’re looking at it from a standpoint of like, ooh, somebody created this, right? Not just as a test, not just as a portfolio, but for an actual business, let’s see what was done right, let’s see what can be improved or what was done wrong, let’s look at the whole entire thing.
0:02:23
And the rabbit holes that we go down, I mean, it’s just, it’s packed. It’s packed with knowledge, insight, and it’s going to, if you watch this series and you see the things, the themes that repeat over and over and over and over again, and you start incorporating these lessons into your own work, your work is going to get tremendously better. We’ve got Philip in the house. Ooh, we got a ninja. Look at that. We got a ninja in the house.
0:02:50
Calisthenics Ireland is here. Edward, Squinting Yeti, Steve, Sylvia. Hello, hello, hello. All right, we are on the, oh, just quick announcements. Get these out of the way. Quick announcement. Am I the only one getting annoyed by the ceiling fan? Yeah, it’s a little annoying, but it’s a little hot in here. So it is what it is. You know, when I’m down in the corner in just a minute, you won’t even notice.
0:03:13
You’re only noticing it right now because we’re not screen sharing Okay, so a quick announcement some biggest announcement biggest announcement digital ambition this channel. It’s called digital ambition gone Probably today or tomorrow Definitely this week. Okay. We’ve been leading up to this I’ve been letting everybody know that we’re rebranding right everything’s moving to gary.co go to digital ambition.co. We’ve just been slowly making this transition. This is the final piece is to switch the actual YouTube channel. Your subscriptions should stay the same, hopefully. Hopefully nothing blows up.
0:03:50
Everything should stay the same. It’s just when you log into YouTube, you’re gonna see giri.co instead of Digital Ambition, so don’t be shocked. I already changed the little profile picture. So this is the final step. Final step’s gonna happen today or tomorrow. Hopefully it goes nice and smooth. So that’s the biggest thing, is to not look for digital ambition anymore.
0:04:11
Second biggest thing is we have an automatic CSS release and a frames release coming out, if not this week, then next week for sure. We’re just in the testing phase. Everything is done, we’re just making sure, we’re testing everything. This is a major update, so there is a lot to test and a lot to just double check because, for example, custom breakpoints. We have the new ability to add two additional breakpoints, and that affects pretty much everything.
0:04:36
It affects like half the framework is affected by that because it adds all the classes for these breakpoints and on and on. You get it, okay? So we’re just doing a lot of testing, a lot of making sure, double checking things, crossing Ts, dotting Is. So as soon as that testing is completed, we will make the release happen. On the frame side of things, the modal is really, really, it’s coming along. Like the modal is really, really good.
0:05:02
And we have the new slider slash carousel. That’s gonna be released into beta in this release. We have the burger trigger. And we have, of course, the table of contents. So our accessible components library is coming along quite quickly. And I did a little ask in the group, and I said, hey, what’s the next one you want us to work on? Most people voted for accordion.
0:05:31
So we’ll be doing the accordion, which should be a fairly quick one, should be a fairly quick one. And then we can get on to the next one. I think the second place was tabs. So it would be accordion and then probably tabs after that. So this one, this library, I mean, it’s coming along quite quickly. Uh, so that is good. All right. That’s all I have for the announcements. Again, as I go through this, as I go through a website critique, you guys get to participate too. So in the chat, you can go ahead and tell us what you think about what you’re seeing on the screen.
0:06:03
You can also ask questions, just put question in all caps and then go ahead and write your question after that. And I will go ahead and answer it when I get to it. If you want to see a little mini tutorial on something like, Hey, how would you approach this? Or how would you approach that? We can, you know, we haven’t done it much, but I’ve got a little local install over here and I can just pull it up and we can just play around with it and see if we can answer your question. All right, you were the only one annoyed by the fan before you told us about it.
0:06:31
See, yes, you shouldn’t have said anything. Then now everybody’s going to be watching the fan. All right, let’s see. Let’s go ahead and bring it up. Let’s dive into the first one. We’ve got two good ones today. This first one is from a regular viewer of Web Design for Dummies and somebody you probably know in the ACSS group and just very active. We’ve got our man Ruben.
0:06:54
I’m gonna bring his website out. Let’s go ahead and screen share. And let’s bring that website up right now. And I’m just checking everything. Okay, yeah, everything looks good. You guys should be able to see what we’ve got going on. So the first thing we always do on Web Design for Domineers is called a no scroll test. We don’t scroll around. We just sit here and let it marinate.
0:07:17
And the goal here is to figure out, do I know what company this is? Do I know what they’re offering? Do I know who this is for? Who’s the target market? What is kind of the offer that they’re putting in front of people? And as I sit here looking at this, I’ll just ask you guys in the chat, what is the first thing that you see? What is the first thing that’s like, Hmm, that’s a little something’s missing.
0:07:40
Something is missing. I’ll give you guys a hint in that direction. Something is missing. What is missing? Oh, Ruben says, I’m so why am I so nervous? Let me pull this up here. Oh, there he is right there. There you go. Ruben is here and he’s nervous. As you should be Rueba as everybody should now I’m just kidding. It’s fine Ahmed says hey Kevin any bricks builder trainings coming in the future like you did for oxygen. They are still relevant today Let me put that up on the screen. I’m it. What are you talking about my man? I’m doing bricks trainings every week every week. They’re in the inner circle. They’re on this YouTube channel. They’re everywhere. That’s all I’m going to go ahead and click on it. Amanda says no text for the name of the site. Justin says location. Ninja says the smiling man and his teeth.
0:08:34
What’s the winner? Justin says location. I don’t know what you mean by location. Jeremy says company name. Wilco says the eyes. Odonaca says what kind of counseling? Suzanne says name of the business. Squinting Yeti says possibly ambiguous logo top left. Logo text is missing brand. There you guys go.
0:08:53
Okay, good. Got enough people that got the answer now. Yeah, yeah, the first thing I saw off the bat was like, where am I? Where am I? That’s a really important question, right? Where am I? You know, on the web. Where am I? Where am I?
0:09:07
That’s a really important question, right? Where am I? You know, on the web. I’m not even gonna try to pronounce this. We’ll tackle this in a minute, this domain name. But yeah, we gotta have a brand of some sort, a business name of some sort. And that is clearly what we are missing right off the bat. So Ruben, let’s see if we can add that. That would be good to have.
0:09:28
But we do have a phone number up here, which is good. And we do have a nice clear call to action of schedule and appointment, which we can take a look at that in just a second. We have a nice clean navigation. We can see all of these things seem to make perfect sense. Locations, all right, we’re not gonna get into all that right now. I just wanna, okay, there are multiple locations, so that makes sense.
0:09:52
Then you have forms and we have a team. I guess this is careers for hiring. Then you have forms and we have a team. I guess this is careers for hiring. Don’t know what groups is off the top of my head. So we’re gonna have to explore that. There’s a podcast, that’s interesting. We’ll take a look at that. Contact us and then we have our translation, which is a nice smooth experience.
0:10:17
Okay, good. Did you use TranslatePress for this? What did you use for this? All right, let’s take a look at our hero copy. Very, very important copy. And I wanna make sure I’m back on, yeah, English version. Okay, Counseling Services for Spanish Speaking Families. Call for an appointment today. I like the heading because it’s very explicit and it calls out the exact person that you’re trying to reach, okay?
0:10:54
I’m trying to reach Spanish speaking families. That’s who I target, it’s who I work with. And of course, I would guess, I mean, it is fairly explicit, right? This is family counseling services, all right? So I don’t think you need really any more specificity in this heading here. I think it’s a good headline. What I think is lacking here is this. We’ve gotta be more ambitious with our lead paragraph here.
0:11:20
You have another opportunity, again, we talk about this all the time, to expand, to clarify, mainly expand, right? You can only fit so much in a headline without getting super wordy. So this lead paragraph gives you the opportunity to expand on what you were trying to say with the headline. And just going call for an appointment today feels a little lazy. It feels in the copywriting department that would be a lazy thing to write there.
0:11:50
So I would replace this with new lead paragraph text and expand on what kind of like do you do any, you know, what are the main problems that families have when they come to you, right? Kind of call some of those things out. Or just talk about other selling points of therapy here. Like there’s a lot of things that you can talk about here that have more value than call for an appointment today. What I would say too is to get very clear on what is the preferred call to action.
0:12:24
Up here you have schedule an appointment, which to me that would be the preferred call to action, but here you have call us. Call us is like the secondary call to action. And it’s okay to have two different calls to action, but you need to assign one as like the primary, the thing that you really want people to do. And I would say, and I talk to small businesses and especially local businesses about this all the time, because a lot of them say, we want people to call us, we want people to call us, we want people to call us.
0:12:57
I mean that’s fine, but like if you can get people’s name and email, it’s way better. It’s way better. Name their email and their phone number. If you can get their name, their email, and their phone number, it’s way better. Because let’s say I have a job. Let’s say I have a nine to five job. I’m working all day. I get home. I’ve got a family, right? Obviously I have a family that I need counseling for. So I get home and I got to do family, I got to do the dinner, we put the kids to bed. Okay, now it’s 9 p.m. when I’m finally like I really need counseling. And I get online and I’m doing my, you know, research like I need some counseling and I find this site and I’m like wow I speak Spanish and I need counseling services for my family seems like a perfect fit call us oh it’s 9 p.m. ain’t nobody gonna answer that phone okay so you know yes it’s good that you’ve got this here but this happens all the time you know people doing before work oh we’re not open or I do call and nobody answers now I gotta leave a message I gotta wait okay so it’s better and by the way if they don’t leave a message, you got somebody to take the desired action.
0:14:04
This is why I tell small businesses all the time. You got somebody to take the desired action, but nobody was on your end to pick up the phone, okay? And if they don’t leave a message, you may lose that lead, right? You just may lose that lead. And so if you can get everybody to just fill out a form, schedule an appointment, or do like an online count, I don’t know what this whole process is. We haven’t looked at it yet. Ideally they would select a day and a time and all that stuff. That would be that would be fantastic. But you do something productive that captures their name, their email, their phone number, and now you know, hey I got a lead. And now you can follow up with that lead to close them on booking an appointment if they haven’t booked one already through the website. So I would say the phone number for people that just love to call is a good secondary call to action.
0:14:52
The primary call to action should be this flow that you have set up right here. Because you’re gonna get the most information out of the person, you’re gonna make sure that they’re serious, because they’re gonna take the time to fill this out, you’re gonna get their phone number, the ability to call them, and multiple times if needed to get to connect, right, because people are busy. So it’s best to have them go through that flow. So I would change this right here to the same call to action.
0:15:18
Then you can put the phone number next to it. The send us a message thing, I don’t know how valuable that is really. If they wanna contact you, they’re gonna click contact us right here, or they’re gonna scroll down here and look for a contact us link, which you already have. So, well, that goes to here. Well, that’s a little confusing, isn’t it? So you have a contact us page, obviously.
0:15:38
I click here, this is your contact us page. Okay, and so you just need to make sure that all your contact us links actually go to your contact us page. All right, so that’s kind of the hero. Let’s talk about the image here. This is how most people would see it, I guess. So on a very large screen, I see a lot of teeth. I mean lots and lots of teeth. You may want to position this. Okay, so let’s talk about background positioning here.
0:16:11
This is probably a real image. What is going on here? Let’s see. FR here. Oh, hey, alright. So we’ve got a frames website. Alright, so hey, did anybody just right off the bat when you saw this, were you like, that was built with frames. You can’t, you can’t, I can’t even tell. And I built the thing, so I built frames. So I can’t even tell. So this is good. It just makes my point over and over and over and over again. All right, so let’s look at, that just tells me that’s probably a real image There’s your button links. Okay. Section, maybe not.
0:16:47
Maybe it is a, maybe you did use. Now, hold on. Where, where is it? Is it up here? Yes. Oh, geez, come on. Come on, come on, come on. All right. There’s our section. Here’s our image right here. So you’ve got object fit cover. And so the default object position is 50 percent, 50 percent, which if I could see the entire image, that’s probably, we’re just looking right through the middle of the image.
0:17:21
So what I would do here is play around with your object position so that you can prioritize the top part of the image. And that way, on a large screen, their heads will still be way down low and we’ll be able to see all of their faces. And you cut out the information down here, which isn’t nearly as relevant. So I would just play around with the object position on here and get these people positioned properly.
0:17:45
But overall, I think the photo is fine, right? The photo is like, it’s a nice, smiling, happy family. And here’s the mistake I have seen on sites like this in the past, and I think it’s a really good thing to hit on. Whenever you’re selling counseling services or your work there’s like I was on a site where they were working with people with depression and all of this they all everybody on the site was sad it was like I get it you’re trying to show like hey we work with depressed people do you look sad like this but you don’t want to show the situation they’re currently in you really want to show the outcome of your work right so it’s like I like the fact that everybody on this site is happy.
0:18:30
And so that would be a big mistake in my estimation is when you are targeting somebody that has a pain point, showing all of this image of people in pain, right? Which does, you know, agitate the situation. So we talk about problem agitate solution all the time in copywriting. You define the problem, you agitate it a bit, but you can agitate it way too much. And in fact, if you don’t let the person visualize their future, that’s a big problem, right?
0:19:00
So it’s much easier to connect with these people who are like, let me put it this way. I land on this site, it’s easier for me to say, oh, I want to look like this happy family, versus if I saw a really sad family, I could be like, that looks like, you know, if I need counseling, right? You know, hey, it looks like us. But it’s like, you know, that’s not what we wanna be. So it’s a good thing here that everybody is smiling and happy.
0:19:25
They’ve, you know, seen the light. They’re on the other side. Okay, let’s continue scrolling around here. Notice we still haven’t, I still don’t know what business this is. So, you know, other than what’s up here in the thing, we still don’t know what the brand or business is. Convenient affordable counseling. Ah, here we go. Okay, so we finally say.
0:19:48
All right, our mission at, ah, this is tough. This is, how do we pronounce this? Is it, let’s go one word at a time. Let’s go one word at a time. Is it, and you gotta help me in the chat here. Is it Centro? Or is it Centro? Is it, do you like, do you roll that R and not roll that R? Don’t know.
0:20:08
You gotta hit me in the chat. A or B? A is Centro, B is Centro. The other thing is I’m like, do I use an accent just because I’m saying words that are in a different language? Or do I just say them as like an American would say them? It’s another thing I’m not sure about. All right, Squinting Yeti says, are they stock images?
0:20:30
I would guess that they are stock images. That would be my guess. All right, so somebody says, A is gringo, B, centro, is the way that you say it. All right, so then we have D, Concehedia? Is that how you pronounce that? Concehedia? And then, a familia, right? How gringo was that? On a scale of zero to gringo, how good or bad was that?
0:20:56
All right, is to empower and support the Latino community in Dallas by providing culturally sensitive mental health services. We offer a safe, accessible space for children, teens and parents to learn how to manage their emotions, develop their self-esteem and build healthy, happy relationships. Our compassionate team of committed experts promotes resilience, growth, and well-being for all members of the Latino community.
0:21:19
Counseling is affordable and covered by insurance. You need a period here. You need a little period right there. All of our counselors speak Spanish and are passionate about serving the Latino community. Counseling is affordable and covered by, okay, that all says the same thing. Remove these two lines right here, put a period right here, break this up into two paragraphs, and you’re probably good to go.
0:21:39
This is decent copy right here. All right, Spanish speaking people will read it easily. Yeah, I would guess too, just didn’t want to assume. Too much free space in the first header row for me, I would change the layout of the header with the enlarged logo. There are too many items in the menu, maybe worth grouping them. I mean, you could, there are a lot of items But it’s a good layout for a nav with a lot of items if you try to stuff all these items up here next to The logo then you’d be in a in a troublesome situation But this particular header layout is designed for more options in the header. It’s not to say that you couldn’t Perhaps well, I mean if you if you really look at it, okay, so home is kind of necessary.
0:22:28
I would say for this market it’s necessary because it’s not like a highly technical market, it’s a lay market. So you do want an explicit home link in there. Location seems quite important because they do have more than one location. Forms is always important for this type of business because there’s a lot of stuff people got to fill out before they come in to do the work. So you want to make that very clear and easy to find the team seems very important as well now You could argue that we don’t know what groups is yet we’ll look at that that you could have like an about and then locations can be under about and The team can be under about and career could be under about you could you could do it like that But again, it’s like I don’t think this is so much of a problem up here It’s not I’ve seen way way way more menu items, obviously, so I don’t think it’s a big issue.
0:23:16
And then of course, you do want this translation in there. Contact us, the podcast is important to put in there. Let’s see what groups is real quick. Group counseling for, okay. I would not have guessed that whatsoever. So that needs to be cleared up. This needs to say group counseling. And then, so now you probably need a services tab. Services would be family counseling and then group counseling.
0:23:39
But I don’t even know what the difference is, honestly. Group counseling is a powerful and valuable place for healing and growth, joining and learning, growing and healing together. Okay, so this is instead of like one-on-one, like, you know, the counselor works with one family at a time. Everybody comes in a big group and then they all work together somehow. I don’t know. Group counseling is what this needs to say. Groups by itself doesn’t really tell anybody what that is. In fact, I was thinking it was something different.
0:24:07
I didn’t know if it was a Facebook group or an online group of some sort or I didn’t know. I didn’t know. So that needs to say group counseling. And then of course, if group counseling now, and see now we get into, you know, SEO land, Group counseling, family counseling. Okay, let’s just see what our options are here. Matching terms. What is this? What is this visual going on? This is new.
0:24:32
I had to go read some documentation or something. This is a new feature. Haven’t seen this before. All right, so let’s scroll down. We’ve got family, family, family. There’s group counseling right there. So if that’s the same group counseling as the kind of group counseling you’re doing, then definitely you need for SEO value, you gotta stick the word counseling up in here.
0:24:59
And then that should say group-counseling in the URL. And then up here, look at your title tag. Oh boy, just says groups. So we have a lot of SEO potential here, but we’re failing on anchor text, failing on our URL slug, failing on title tag. But you do use it in the H1 which is good and then you’ve used it throughout the page. So all you need to do is fix your nav, your URL and your title tag. Okay let’s get back to the home page now. Okay. All right. Nobody was saying nobody rated my gringo speak. Nobody used the scale. So I don’t know. We’ll just assume that I did it mostly right. We talked about that section. All right. This is this section right here. You don’t have to parent alone. Emotional behavioral support for children and their parents. Okay. Sessions are facilitated in Spanish and or English. This little intro right here, well number one your spacing is off, which is a little bit of a pet peeve here. And the reason is because this P has a margin attached to the bottom of it. And so this just tells me in automatic CSS, you need to turn on, you don’t have fix paragraph and heading spacing turned on.
0:26:32
So if we go in here, automatic CSS, and we go to, it used to be under the typography tab, but now I believe it’s under the options tab, paragraphs and headings, fix paragraph and heading spacing. Because all these different builders and reset style sheets that are attached to all these things, they add their own styling to paragraphs. And it really screws up spacing on most pages in most applications. And so Automatic CSS already fixes, like just automatically fixes that for you.
0:27:07
Just flip that switch and all the spacing will be fixed automatically. But this is more like a, yeah, this is the accent heading for this section, but it’s not styled. So number one is style your accent headings. Number two, because you don’t want this, you don’t want it to look like just a, right now you have a paragraph floating above a heading that’s floating above another paragraph. And this is like, I don’t know what’s going on here. So visually, and I’ll just show you what I mean, right, where you take this accent heading, and there’s a class called FR accent heading in frames already attached to this, you just have to style it up.
0:27:43
So this gets a text transform of up, this is just an example, right? So font weight of 600, and then a line letter spacing of like 0.035 M, something like that. And then you could also put a before and after element after it, you could underline it, you could do a lot of different stuff with it. But you need that to be styled and we can just also maybe change its contrast a little bit on the page.
0:28:09
You could color it, you could do a lot of different stuff, but you need these accent headings to look like accent headings. And then they all should look the same throughout the website. Okay, let’s talk about this heading, emotional behavioral support for children and their parents. Let’s scan the headings. I do this often. You do just a heading scan.
0:28:28
If somebody was just scanning the page reading headings, would they understand what’s going on? So, counseling services for Spanish-speaking families. Got it. Convenient, affordable counseling. Got it. Emotional behavioral support for children and their parents. So now it’s like, really what this should say would be, you know, counseling services. Because you have, or counseling, you know, we’re really outlining the formats of counseling here.
0:28:57
So you can do individual sessions, you can do group sessions, but then you also have this third one of who we are. This section is causing some confusion. I would remove this third one. I don’t think this belongs here necessarily. What I would probably do is bring this to just two. Okay so you have your two columns here and then those are a little wide right so I would also probably do something like this or that. That’s probably good enough. All right, so now we have two options, right?
0:29:45
Which is easier for people to understand. Do I want individual or do I want group? Now this whole about us who we are thing, that just deserves its own section down. That’s a different topic, right? The topic that we’re on in this section is what format of counseling do you prefer? You want people to choose individual or you want people to choose group sessions? We need to change this headline because this headline says these things, but it says it in different words.
0:30:13
And then what it causes people to do is like, is this the same thing we were talking about earlier or is this something new? Is this something different or is it the same? And you don’t wanna cause that confusion. And you don’t need this right here You you just need to be more explicit like choose. I would I would tell them what to do choose your preferred Counseling style something like that. So they read choose your preferred. Well, let’s just change that here. Let’s see what it looks like So we take this Choose your preferred counseling style. There you go.
0:30:49
So now they read, all right, counseling services for Spanish speaking families, convenient, affordable counseling. We have a little intro here that talks about all the stuff that we do and the outcomes. Then I come down and it’s like, hey, you don’t have to parent alone. Choose your preferred counseling style. And that’s what I’m doing in this section. You’re telling the person that the topic of this section is and the action that I need you to take is choose your preferred counseling style.
0:31:14
And then we can choose individual or group, and that’s gonna make the person want to take an action in this section right here. All right, so let’s assume that they do that and they hit book today. Somebody says, Chaha Design says, why the icons when the images already show individual and group? That’s a good question. It’s a good question. I don’t think the icons are necessary here.
0:31:40
So you could drop, and that’s going to help out the flow of this as well. Let me just do this real quick. Does this even have a class on it? No, it does not. Okay. So unfortunately, I can’t display them all none, but we can just easily do this. Okay, and then of course we can’t see the other changes I made because I went forward and then backwards, but I think that’s cleaner. I also Personally I would get rid of this button or make it a I would make the whole card clickable And I don’t know I’m feeling like because of the amount of text in here The fact that it’s centered. I typically don’t like centered text when there’s a lot of it.
0:32:29
Yeah, I don’t know. I think this card can be maybe, I would do a box layout on these cards probably. And then I’d make the whole card clickable and I’d drop the button, especially because it’s odd that you can book today on an individual session, but then you have to learn more about group sessions. And then we have this find a group form. They honestly should both go to, there should be an individual sessions page that talks about individual session counseling.
0:33:02
That’s how I would treat this. So individual sessions goes to learn more. They would both be learn more, which at that point you can just get rid of the buttons and just make the whole card clickable. This takes you to a page that’s all about individual counseling. This takes you to a page that’s all about group counseling. And then on those pages, that’s where you have the calls to action of either booking an appointment today, or we already have this other one of find a group. That could be the call to action on that page.
0:33:30
So I would redo that a little bit. Make it a more traditional approach here. Because if somebody wants more information on individual sessions before they book, I don’t think they can get it right now. There really isn’t a individual sessions like sales page or overview page or anything like that. You’re really relying on the homepage to do all of that work for you. And then we need to get more clear to see where we’re building in, there’s more confusion.
0:34:03
Every next section I go to is a little bit more confusion. So there’s family counseling. In my estimation, there could be a lot of reasons why you need family counseling. There’s issues between parents, there’s issues between parents and kids, there’s issue with one specific child, there’s like a lot of reasons, right? And so we talk about basic family counseling up here. You talk about basic family counseling here, but you also talk about children’s, yeah, this is the whole family, children’s, teens, and parents, okay?
0:34:39
So you talked about family counseling, family counseling, and then you tried, yeah, this is, okay, now we’re still talking about family, but then down here suddenly, there’s this section of just my child needs counseling. And so now it’s like, am I signing my child up? Am I signing the family up? How does this all work? It’s basically generating more questions in the person’s mind. And this is why you need an individual sessions overview page.
0:35:06
So you can really outline, hey, how does this work? Who do we see? Do we see everybody at the same time? Like all of these questions that people are gonna have. And really it’s gonna depend on how you work as well as a counselor or how this practice works as a counseling practice. This is just, there’s a lot of unanswered questions here. And the different headlines that are calling out this concept of family counseling, but in different ways.
0:35:36
Does my child need counseling? And then up here, it’s for children and their parents, and then up here it’s just talking about it in general and talking about it in general. So we just need to get more specific on who exactly, why exactly, and how does this work. But let’s look at this as an overall copy section. Just you want the best for your children, it’d be hard to know how to help them. Counseling offers a safe, compassionate space for your child to feel heard and seen, but aren’t we doing the whole family, see where the confusion is kind of coming from, to learn new skills and developing their emotional intelligence?
0:36:09
Because I would also gather that even if there is a problem with the child or my child needs counseling, it’s kind of like, who’s that guy that does the dog training, the dog whisperer, right? He always says, I don’t train dogs, I train people, right? So like the child can be a problem, but what if the problem is really stemming with the parents and how the parents are treating the children? That’s what the counselor has to sort out. So I don’t know.
0:36:40
There’s a little bit of confusion when we talk about the child in one instance, then we’re talking about the parents over here, then we’re talking about the whole family over here. It all just needs to be more cohesive. And then you can do another call to action of send me a message, but that just goes to the same flow here. So that’s a little bit more confusion as well. So we gotta get these CTAs cleaned up.
0:37:02
We’ve gotta get the kind of general narrative cleaned up and it just needs to be tighter. That’s what it needs. That’s the best way to describe it, it needs to be tighter. All right, so we have some social proof of verified by psychology today. That’s good. See, now it’s the Association of Play Therapy and a registered play therapist, which leads me to believe that you specialize in working really with children.
0:37:26
And so is that who you’re gonna be working with? Are you gonna be working with a time for this? More questions, more questions, more questions, more questions. Now we get down here and we see specialties child Depression domestic, but these are not links by the way, so These need to be links eventually Yeah, okay, see now that we get it so child and then but look down here we have divorce Okay, so that’s clearly like well. I don’t know I guess that could be related just working with the kids, too and we’re gonna have to do that for our kids too.
0:37:57
We just need more clarity. We need more clarity and more focus in all of this. All right, let’s go to the, let’s just check out locations real quick and see. Arlington office, schedule appointment, directions. Okay, this is all very standard. Got a good picture of each, which is fantastic. Okay, that is all fine and dandy. Okay, let’s move on to forms. Okay.
0:38:27
All right, this is just like a, almost like a placeholder hero. It’s like you copied and pasted the hero, it basically is, copied and pasted the hero from the homepage and all you did was flip the image in the, or just change the image in the background. The question is, does this need a hero, right? Does this page need a hero? I think it needs a simpler header and just needs to say, forms you need for your appointment, right?
0:38:56
And then you can get down here to the actual forms. And then I don’t know that I’d put this in a timeline. I mean, it’s like, it’s, yeah, I wouldn’t put these in a timeline. I would get another format for this. There’s actually another frame that’s made for like little kind of horizontal CTAs, like simple CTAs like this. And I would probably use that frame instead. Because this isn’t a process, it’s not like a step-by-step thing.
0:39:18
It’s here’s for adults, here’s for children. All right, so I would rethink this page a little bit. Let’s check out the team. And really all of your, yeah, all of your subpages have the same exact headlines. So I don’t, maybe you’re not done yet, maybe you’re still, it’s all still in progress, but obviously these need to have different headlines and such Alright, so we come down here. We’ve got some left to right alternating cards These look good does the Do they stack properly they should because they’re frames I Would check your breakpoint that it is I do see that it stacks right there, but I would check the breakpoint it’s stacking at.
0:40:03
Because of the length of the text, you actually need to be stacking up here somewhere. That’s probably still a little bit acceptable. I don’t know, I would probably stack it right there. Because anything under that is too squished. Definitely right there, not working out. What is going on? My phone just started playing audio, just like all on its own. Okay, we should start playing audio right now. Okay, let’s get rid of that All right Cool. All right Image text image text. All right, it all stacks in the proper order. So that’s all good. All right, let’s get out of there We could say like, you know their title should you style their title differently than the rest of the paragraph text?
0:40:54
I would say yes. Because right now it’s the exact same style, it just blends in. So come up with a, you could use your accent heading style for that if you wanted to. Let’s go on to career. Okay. This all looks pretty good. Fixed paragraph and heading spacing will take care of everything that’s going on here.
0:41:14
All right, all that’s pretty standard. Let’s check out our podcast. Listen to our podcast. This page needs work. This is not very inviting. This is not very inviting. And I believe we had a frame, we do have a frame that looks really good for podcast episodes. I don’t know which one it is off the top of my head, but we definitely have, this layout is not working very well for this page Definitely not working that definitely not And in fact, I don’t even know if this is um, let’s see what’s going on here Yeah, this is looks like a custom grid that you built This is not even uh, this is not a frame So I would go grab a frame because it also doesn’t have any mobile responsiveness yet.
0:42:04
So I would go grab a frame that’ll work for this section and pop that frame in. And then I’m wondering how you’re running the podcast here. I’m curious about how this is on the backend. Are you using like a Blueberry or using like what podcast system are you using? Are you just posting the episodes here or are you running the actual feed through this website? I would like some insight on that. Alright I think we’re done with this website for the most part. I yeah I think we hit on the main important stuff to give you enough value to go back and make some adjustments and things like that. Let’s see what’s going on in the chat.
0:42:48
Less is more. Personally, I like the round headshot and keep the text in bullet points or shorter. What section are you referring to? A round headshot like here? Is this the section you were referring to? I don’t know because the text is tall. I like the tall image, but I don’t know if this is the section you were referring to. Question, how can we change the breakpoint thing?
0:43:11
I don’t know if this is the section you were referring to. Question, how can we change the breakpoint thing? So Marcus, good question about breakpoints, but I need you to clarify that question a little bit. So how can we change the breakpoint thing? There’s, that could go a lot of different ways. How can you change where cards stack at a breakpoint? Is that your question? So when I was talking about the, let me switch this back to English, go back to the team.
0:43:41
Are you talking about where these cards stack specifically? Let’s see what frame this is. So this is profile card echo. Okay, so in frames, let’s go into bricks.git, let’s go to the source site real quick. Or actually, let me just put this, better to do it here. Let me close this. So profile card echo. So I’m going to go open. We’ll take a look at this.
0:44:11
Profile echo, edit with bricks. Okay. Yes, that was his question. All right. So we’re going to insert. I’m going to search for profile echo. Let’s do echo. Here’s profile card echo profile grid echo profile section echo so i’ll just insert the entire section let’s import images to go along with this okay good so i’m going to go over here to profile card echo and we’re going to take a look at our css tab and you can see that this is a it uses the card is built with a grid basically okay so it’s a two to three grid. And so if we drop down in our breakpoints here We should see that it stacks right there See how the grid template columns change to just being one column at that breakpoint right there So literally all you have to do now, this is the old-school way. I should make this announcement. Can we turn off Grammarly?
0:45:08
Thank you quit Get out of my life Turn off. Yeah, okay, thank you. All right, so I should note that all of these are going to be using grid variables going forward. So this would actually look like this. All right, which is, you know, basically the same outcome, but it’s using ACSS variables now for grid. We didn’t do that when these were initially built because they didn’t exist.
0:45:36
But now that they exist, we’ve given people like a month and a half now, two months to update to the latest version. And now I feel comfortable with using these variables everywhere. Cause people should be updated now and nothing will break, okay? But right now that frame, I’ll just put it back to what it was. So it’s one FR at this break point, yeah?
0:46:01
So watch how easy this is. You take this, you copy it and you delete it you go up a breakpoint to where you need it to stack and then you just simply paste it there and now it will stack at this breakpoint instead of that other breakpoint okay and you do that at the class level which means every card all profile card echoes now have that change I don’t have to go from card to card to card to card making that change because it’s done at the class level. So now all of my cards stack at that break point, and so they won’t be squished anymore like he had it on his site.
0:46:33
So very, very easy change to make inside of frames. All right, let’s go back to chat real quick, and then we’re gonna pull up our second website. Simone said the team members. Okay, like these cards right here. Yeah, you could have a circular headshot image next to the text. That’s a fine layout too. I think it really comes down to just personal preference on that. Like there’s nothing wrong with a box layout, just like there’s nothing wrong with a circular headshot in a non box layout next to text. It’s just a different kind of layout and so it’s up to you as the designer which way you want to go.
0:47:17
The fact that they’re boxed kind of makes them more contained and kind of easier to see the divisions between who’s who and all of that. But it’s personal taste really. Marcus says, oh, that’s nice, thank you. Yep, absolutely. Happy to help. Okay, let’s move on to our next one. So Ruben, I hope that was enough for you. Hope you got some value out of that and you’re able to go back and make some adjustments to that website.
0:47:48
Let’s pull up our second one here. All right, we’ve got, I don’t know how to say it. I just don’t know how to say it. MI Unify is option number one. ME Unify is option number two. Would there be another option? No, I think those are the only two options. It’s either MeUnify or MeUnify or MyUnify. Oh, there’s a third one, MyUnify.
0:48:15
If you’re here, if you built this website, let us know how we’re supposed to be pronouncing this. But let’s do a no-scroll test. Ruben says, yes, took tons of notes. Good, good, good, fantastic. All right, no scroll test. Push your creative limits. Growing has never been easy, but we challenge you to push your creative limits. So no scroll test.
0:48:37
Do we know the company? Kind of, I just don’t know how to pronounce it. I know what the company is, but I don’t know how to pronounce it. Do we know what they do? No, the answer is no. Do we know who they serve? No. So our no scroll test here has kind of failed. So we need to work on copy.
0:48:58
I see a photo here, which you know, it’s a cutout. It’s a little bit, it’s really like a lighting thing really I think Just needs to be a little bit feel a little flat feels a little flat Like his expressions good and all that but it feels a little flat. I Don’t see anything creative about this though, right? There’s nothing in this imagery that is Triggering in my mind like creativity is happening here So you’re using you know creative creative a lot of like talking about creative, but this is just a guy. It’s just a guy. So this visual, I would say needs to be replaced in the hero. I’m noticing that you’re using a lot of these visuals of people. I don’t know who these people are, though. And I don’t know, they’re just no nice headshots. They’re not like, oh, this is a specific context or a specific situation or a specific type of person. or a specific context or a specific situation or a specific type of person.
0:50:10
I don’t know any of this. The visuals aren’t giving me any information to support any sort of narrative that’s supposed to be happening here. So we need to be thinking about how our imagery is either helping tell the story or doing nothing for the story. It could also be detracting from the story. Now in this case, I don’t think it’s detracting from the story, but it’s not helping tell the story.
0:50:28
So we’re gonna have to scroll around. Let’s see if we can get the gist of what’s going on here as we go down the page. So I see a heading here called content design. Everything you need to know about the content design category. Let that marinate for a second. What is a content design category? Why would I wanna know about it? Content design or the flyer design category, now we’ve introduced a new term. So we started with content design, now we’re introducing this, what seems to me like a sub concept, like a sub category, or flyer design category, takes designers through different activities and processes that will help them learn how to create unique designs for clients and employees?
0:51:17
We’re missing some punctuation here. Join the flyer group. Hmm. Okay, we’re gonna let that sit for a minute. We’re gonna come back. After we’ve tried to figure out what’s going on here, we’ll come back and talk about how we can make this more clear. Because right now it’s not clear in the slightest. UI slash UX design.
0:51:35
You guys notice something here? Look at the spacing between this Accent heading and this headline and this accent heading and this headline So what’s going on here with our spacing? Oh Look at this Got some little cute little br. Tags just coming along for the ride for no reason. Okay, let’s get those out of there So this is an oxygen website. Interesting. Okay. So we’ve got content design, UI UX design, everything you need to know about the UI UX design category.
0:52:12
So now we’re seeing this again, we go back to lazy copywriting. This is what would be called lazy copywriting. UI UX design category takes designers through different activities that will lead to a deep dive into user experience and its implementation in the creation of user interface. Very wordy. Lots of words. Okay. Join the UI UX group.
0:52:38
Logo brand identity design. Everything you need to know about the logo. I could have guessed that that was going to be the headline. I’m seeing a theme here, a little pattern. Logo design category explores the different processes of creating a brand identity. Okay, and then we have GDC VIP grow four times faster with GDC VIP membership. I don’t know what GDC means because there’s no G’s or D’s or C’s in the brand name. So what is this acronym that you’ve introduced as if as if I know what that is. You gotta be very careful with this, right? Don’t talk in like inside baseball terms with your website visitors.
0:53:21
They have no idea. They have no idea what any of this means. Develop your creative ability with daily feedbacks and corrections from professionals. Okay. One thing I would do right off the bat is this, whoa, hold on, what’s going on here? Check out that line height. What is going on with our text? Oh dear So this is one of the Yeah, okay. Oh, oh show me your dom all day on this website if you guys like Dom Dom Dom Dom this this is going to be a lot of Dom stuff here because we’re seeing we’re seeing the problems that arise with web design that is just, you know, we’re not following best practices here.
0:54:10
And we see the problems that are inherent in this. I mean, this is a big problem. To go from this to that, huge, huge. This text got, I need a magnifying glass now. So what happens here, guys? What happens here? Well, I can see that this text size is set at the ID level. It’s set to 24 pixels. We’re using pixels instead of relative units. A tsk tsk, a womp womp, okay? We’re styling at the ID level. That’s another one of those.
0:54:42
And then there’s probably just a breakpoint adjustment in here, right there, where oh, it just snaps down to 14. It goes all the way from 24 to 14. Now I want you guys to notice this does not happen with fluid responsive typography. So this would never happen on like an automatic CSS website for example. This is common when text sizes are set at different breakpoints. They snap from one breakpoint to the next. It’s not a very clean experience. Not that users are gonna be sitting here dragging websites around, but you see one of the problems that occurs is that when people aren’t careful, you get big jumps.
0:55:27
There’s big, big, big jumps. And it’s just, this is way too small, really, for any device size. And then the line height is changing as well. There’s a dramatic change in the line height because here’s the problem with the line height guys. Another best practice womp-womp we have the line height set on the section body. Why is this a section body though? Okay this is hmm we have a class called section body. It’s just kind of tossed in here that controls the line height. It tries to control the font size but the font size is overridden on this specific text block and the font size of the line height is set in pixels which is not relative to the size of the text so when the text size changes the line height stays the same and you end up getting a large line height here and almost no line height here.
0:56:27
So how do we fix this? Well, we first fix it by, well, there’s a lot of things that have to be fixed here. The line height issue needs to be set like this. So you have like 1.5, now we have a relative line height, okay? So anytime you have a relative line height, it’s gonna be a much better outcome. So check the, now we have actually more breathing room in our text here, and then when it snaps down here, look at what has happened.
0:56:54
That’s a simple fix, right? So you never really wanna use explicit pixels or explicit value for your line height. You just use a relative value, and regardless of what happens to your text size, your line height is still not gonna be whacked out. So that would be number one. Number two would be to get rid of all these font size declarations. I mean, think about this guys, think about this.
0:57:16
From a maintainability standpoint, from a scalability standpoint, from just a general do you hate your life as a developer standpoint, on this one block of text, we had to set a font size at the desktop and then go to different breakpoints and set a new font size in pixels. And now you have to do that to every text block on this page. Like if I click on this one, oh my gosh guys it was done here as well.
0:57:46
So now think about me coming in to fix this. I can’t fix it. You can’t just fix it. You have to undo everything that was done. Every block has to be individually interacted with to remove these instructions at the ID level. And then we have to go through the process of putting in the correct way to set font size on items like this. And really for this page, let’s look at this. This section, this section, this section should all use the same exact styling. The heading should be the same, the text should be the same, and so there should be a class that is shared among all of these in fact a class for this kind of section a class for this little heading this accent heading a class for this heading a class for this lead text a Class for the button and then everything is controlled from one point of control Right now everything is set independently and it’s all set at the ID level and so you’re overriding styles of classes you even added To attempt to control the styles, like this section body class.
0:58:54
Like why does this need to exist if you’re just overriding the values at the ID level? So there’s a lot of DOM related stuff going on here. That’s just not great. Okay. So now I have an idea of what’s going on. These are where we are. It’s basically groups to learn about each of these things. So if you want to learn about, I don’t know why this is broken down necessarily to flyer design, but like if you want to learn UI UX, you would join the UI UX group.
0:59:26
And we have a sales page here that we’re gonna go down in just a second and see what’s going on here. Practice consistently until you gain math. Free 30-day challenge, okay. All right, we just need better copy, better copy in general. We get rid of this category thing. I think this may be a translation kind of issue. This website is not translated. It is in English, but the person who wrote the copy, they think this means something that it doesn’t actually mean, or they don’t have a better way to say it, but this copy needs to be rewritten.
0:59:58
Let’s keep going down. It just jumped for some reason. Okay. So you have some testimonials. This is my second GDC, and I know for certain that, okay, the Munified GDC. What is this GDC term? GDC. There’s GDC, GDC, GDC, GDC, GDC, GDC, GDC, GDC, GDC. What is going on here? Wow, what? Tell me. Tell me what GDC is. What does it mean? Does anybody know what it means?
1:00:32
Ah, oh my gosh, finally, GDC is an acronym for graphic design challenge, which is a cohort based experience. Why was this kept a secret for so long? Why was this? Why was this kept a secret? So if you’re gonna use this GDC thing, you’ve gotta say that way up here. In fact, a cohort-based, I would say a group, a group experience, a group design challenge. We just call it that. You could even keep the acronym GDC, group design challenge. Okay, so, yeah, we’ve gotta get, okay, if we’re selling group design challenges, that’s the narrative we need to establish right here in the hero section.
1:01:24
We need to get somebody right off the bat knowing, hey, this website is all about graphic design challenges and we’re going to encourage you to join one of our challenges. That is the way the narrative needs to start off here in the hero section. And then all of this stuff makes sense. Suddenly when I know that this website is all about group design challenges or graphic design challenges, I come down here and I can clearly see, oh, you’re giving me options of which group I want to be in. That was not initially clear.
1:01:56
But if you can start your hero off, this is why the hero and the main headline on the page are so absurdly important because it just sets, you’re either setting the person up for clarity or you’re setting them up for confusion. Right now they’re set up for confusion and you’ve kind of buried, we talk about burying the lead all the time, right? You’ve buried the lead way down here in the very last FAQ item.
1:02:23
I feel like I should get a prize for finding that, honestly. Check out some of our works. All right. So we’ve got a class management app. So is this your students, the work that your students have done? This needs a little clarity right here. So it could be like, check out some of our, what would they be called? They wouldn’t be called contestants.
1:02:42
Participants, you know? Or like find a good word, find a cute word for them. But make this clear that maybe these are from things that your students did during these design challenges. All right, we’ll look at the footer in a minute. Let’s go up here and check out what’s going on on the practice page. Oh, that’s the homepage, okay. So that would be a no-no in my estimation, right? So you don’t wanna create a page called practice that they’re already, like it should just say home.
1:03:22
Okay, so this should just say home. Let’s see what learn does. Learn to monetize your design, your skill at all course. All right, we need to rewrite this. Growing has never been easy, but we challenge you to push your creative limits. All right, and this is a group. I’m not gonna read all of the copy. I can already tell though that it needs to be improved based on what I’ve seen so far on the other sections of the site.
1:03:47
No, there’s a lot here. This is, it’s not bad, let me clarify. It’s not bad to have a lot of content on a sales page. It’s not bad, but you’ve got to break it up. You’ve got to, and I’m not just saying in small paragraphs. You’ve obviously made small paragraphs. Great. You’ve got to break way more images, bolds, highlights. Just find ways to really break this stuff up and make it more engaging.
1:04:16
I’m not a big fan of the highlight being way down low like that. Okay. Let’s look at how all the text changes. Still having that problem all throughout the website. Is this using Oxyninja? Is that what this is? Okay. I think that’s what these classes are for. Background color bottom. Here you go. Right here. See this controls that highlight needs to be somewhere in there and then I would put the text on top of it But I think the highlight being like way below the text like it I’ll refresh this is what it looked like before That’s not really working for me. I don’t know if it works for anybody else, but it’s not really working for me All right, let’s go down and see what kind of prep Wow look how big this heading is very wordy and see what kind of, wow, look how big this heading is.
1:05:16
Very wordy. And when it’s long headings like this especially, I don’t like capitalized headings. Make that read, it makes it much harder to read. And then you have a different heading style all together right here. I mean, this is like a different font and everything. So I don’t know what’s going on. We got a lot of stuff to look at here. We’ve got different fonts.
1:05:41
We’ve got, this actually looks, and look at the difference here too, in the width of this text versus the width of this text. This kind of nice little clean narrow column is automatically just easier to read. I don’t know what currency this is. So I don’t know what, these are high prices, low prices, no idea. All right, still a lot of work to do on this landing page there, that sales page. Let’s check out our portfolio. Okay, let’s go back here for a second.
1:06:14
All right, that is the same font. All right. What are you guys thinking in the chat? Give me some give me some comments in the chat. Odonaka says isn’t really the original homepage, it’s still under development, you can access that home. The practice page is most important right now because the next cohort starts in a few days. Okay, got it. It’s Nigerian. Okay, cool. All right. I’ll give you a whole overview in just a second. So to be clear, since you’re here, Odonata, are the is this what the participants are producing? Or is this what the instructors have produced? What is? Because you’re saying our work, right? So is this the students?
1:07:14
That’s really what you could call them, right? Students. Their work or your work? And then we need an about us section. What we do. I would clarify all of this, right? Like, it’s not really we. You’re not like an agency. You know, you’re not like a, the service is this group education challenge kind of thing.
1:07:34
So don’t word this like an agency would word their website. All right, so let’s look at resources. Getting started, GDC guide, inner circle guide, blog about us, merch. Do you have any merch? No merch. All right, I’d get, oh, oh, geez. I would get rid of that. Oh, there we go, okay. GD, oh, all these are no good.
1:08:05
All right, is there a blog? Nope, okay. All right, I would do, I don’t even know why these, I guess they just don’t have URLs at all. Yeah, they don’t even have URLs. So when you’re building a navigation on like a dev site or a site that’s not actually done yet, or I mean, it’s live at the URL, but I don’t know if you’re sending any traffic to it or not.
1:08:31
At least put placeholder pages in for these things so that your nav can be a working nav and not get lost like this in a blank tab going nowhere. All right, so we can’t look at the blog, we can’t look at a lot of that kind of stuff. I don’t know why that, is that set to reload in a new tab? I don’t know why that does that. Why is that behave, yeah, I think it does. It is, target blank right there. So remove that ASAP.
1:08:59
All right, let’s check out the chat here. The site build started before I found Inner Circle, please have mercy. Yeah, it’s fine. It’s all good, you’re gonna survive. All right, so if I had to sum this up and wrap this up, I think we’ve done enough on this website. Meunify, first of all, tell me how to pronounce it. Is it me unify, like M-E unify, or is it my unify? Or is it Meunify?
1:09:32
I need to know that. It’s a design agency and a design education brand. Okay, so this is what we need to do when you have something like this. You gotta split them up, okay? So have a website that’s like Munify, I’d say I don’t even know how to pronounce it. I’m just gonna go with Munify. So munifyagency.com and munifychallenge.com or something like, or munifiedesign.com.
1:10:03
Or like just, I would split this up and have two domains. One domain is, this is our agency, this is we gotta speak to, because you can’t speak to both, those are two dramatically different groups of people. And you can’t possibly talk to each one effectively with the same website. So one website needs to be for your agency. That can be munify.com, whatever. And then you have a munifygroups.com or munifiedesign.com or munifychallenge.com.
1:10:35
You just have a separate domain for this thing that we’re looking at right here. And if I had to sum everything up, you have to craft a narrative of this is what these groups are for, make that very clear in the hero section, then clean up this copy just a little bit, swap out the visuals. I need to see for here, I don’t know why again I don’t know why this is flyer design versus content design or whatever but show me examples here. Show me examples of logo and brand identity design here. And then you can even make it clear. So imagine this for a second.
1:11:20
You’ve seen those logo grids, right? So you have a little logo grid action right here. Right underneath it can say, logos our students have produced in our challenge, in our logo design challenge or something. And then up here you can have a little slider that slides through different UI UX examples. And right below, it can say a little tagline that says, UI and UX designs our students have produced during our design challenges. So now we’re giving additional context and clarity to every single one of these sections.
1:11:55
Not only that, but I’m seeing examples of real work that was produced during these challenges. Much more engaging, much more clear about what is going on here than just random smiling happy people. So that’s how, if I were redoing this page, that’s how I would do it. I would have examples of each thing in each section. I would have the little tagline clarifying that this is what our students have done during the design challenge.
1:12:19
And then I would rework this copy here. The overall layout structure is fine. Of course, you’ve got still the DOM issues. I would clean those DOM issues up ASAP Then let’s talk about these images while we’re here So the question I had in my mind was was this a is this done with CSS because that would be cool Or was it a single image and the answer is always revealed if you always want to know Obviously you could go inspect the DOM, right? But the answer’s always revealed by just holding, clicking, holding, and dragging. And there’s your answer revealed right there.
1:12:55
So it’s an image, right? This won’t happen when it’s done with CSS. So you can see that this is just an image dropped in. Now what’s the problem with this? We refer back to a previous web design for DOMMIE’s episode. And on that episode, I said, kind of a general rule of thumb a general principle if it can be done with CSS my friends Please try to do it with CSS This is a template that would be done in Photoshop, right? So what do we have to do in Photoshop? well we got to take every single photo and we have to cut the person out and Then we have to drop them into the template with this shape and then these two little blobs, okay?
1:13:39
And then we save it and we export it and then we upload it here. And if you ever need to swap, you know, this image, like this guy, you’re like, yeah, I don’t like this guy so much anymore. We’re gonna throw a different person in here. Well, you gotta take that person into Photoshop and you gotta, you know, do all that work again. Even worse though, that’s just step one of being bad, right? Even worse, what if the brand color changes a little bit?
1:14:03
What if we decide, you know that yellow blob back there? We actually want that to be blue, right? Like this section is blue right here, it’s a light blue. We want that to be like a dark blue blob or maybe a light blue to match it. I don’t know. It doesn’t matter what we choose. The important thing is it needs to change. Maybe these blob colors need to change right here. Do you know how bad and awful your life is? You’re going to need family counseling from the counseling site we were just on. You’re going to need counseling because you’ve got to go back into Photoshop and reopen and hopefully you saved every single iteration of all of these images so that you can open every one individually and go change these colors and then resave, re-export, come back to the site, replace every single photo on every single page.
1:14:55
Does that sound like the life you wanna live, my friends? It’s not the life I wanna live. So, now the question is, can this be done with CSS? Can you maybe use a clip path? I definitely know we can use pseudo elements for these things right here. Can we get this effect done maybe with a clip path or something else, but something that gives us control over the shape of these blobs, the color of these blobs, and then all we have to do, the only thing we need in order to swap photos out is have a cutout of the person.
1:15:32
That’s really all we need. And we can drop it in to what amounts to a CSS environment that creates the actual blob shape cutout type thing. Now I’m not saying that this is 100% doable, it’s a little complex, but we could try for sure. And if it can be done with CSS, what’s the principle? It should be done with CSS, okay? Yeah, Ruben says, I don’t wanna live that life. You don’t wanna live that life. Being in Photoshop like a chump, right?
1:16:00
You guys have heard that before, right? Like a chump going image by image by image, because you know, you know, you create your, here, here’s how this works. You’re in Photoshop and you’re doing this little blob thing and you got this guy’s image and you’re doing this cutout and you’re like, God, this is going to be so good. This is going to be so amazing. Look at how, like look at the shape. Look at the, this is great. It’s fantastic. Way better than just putting a photo in there, you know, because that’s lazy and we’re a design challenge, right? So we’re doing this cool design concept here with these people and you do half a dozen of them, a dozen of them, you drop them on the page.
1:16:35
Now I know you’re probably your own client, but if you were doing this for a client, I know exactly what’s going to happen. You’re going to create all these things and then you’re going to send it off to the client and go, look how amazing this concept is, look, look at this, this is so fantastic. And they’re like, you’re right, it is. We really like that. We just, you know, we just want, you know, Bev, Bev in accounting thinks that we should change the color of some of these blobs.
1:17:01
And see, now, now you’re about that life. You’re back in Photoshop and you hate yourself. And you’re like, why did I even come up with this concept? This concept’s horrible. I don’t ever want to do it again. So that’s exactly how it would go. Bev in accounting always thinks that something should be slightly different. And if you’ve done it in Photoshop, it’s going to create a lot of extra work for you. If you’ve done it with CSS, not a lot of extra work.
1:17:25
Also, you’ll have the ability to change the color of the blobs based on the image, right? You could create a class where they are all the same. You could also make them one-off changes. You could change the shape on some, there’s a lot of stuff you could do if you did this with CSS that you just aren’t going to want to do if you’re doing this stuff with Photoshop. So that’s kind of the principle. Now I’m already thinking should we try to tackle this as a tutorial? I’m not going to do it live. This is one of those that’s going to need a lot of playing around, a lot of tweaking, a lot of problem-solving. It’s not easy. I’m not saying that it would be easy to do this. I’m just saying that if it can be done with CSS, you should do it with CSS and stay out of Photoshop. But I might tackle that as some sort of tutorial. I think there would be a lot of useful little nuggets that would come out of that. Okay, that’s it. I think we’ve done enough with this website. I think you know what needs to change. We need to paint the narrative.
1:18:25
We need to get this copy to be a lot tighter, a lot less lazy with your headlines here. Don’t just copy and paste the same headline and then change the keywords. Gotta get more creative with your copy here. And then you got a lot of DOM related stuff that has to change and improve. Okay, any questions? Drop them in. These can be general questions now.
1:18:49
They don’t have to be about this website. They can be about web design in general, copywriting in general, conversion, pricing, agency-related stuff. We’ll just do a little Q&A. We are a little early. We rolled through a little faster than normal today. So, Odonaka says, to pronounce, just ignore the first I, munify. Okay, got it.
1:19:13
Which begs the question? What’s the I for? If I’m just ignoring it? And I’m not pronouncing it? What is what is tell us what it means? What does unify mean? What is the what? How did you come up with that name? If they could do it with CSS, they can apply a parallax effect. And that would be very cool. Yes, you you definitely could. Yeah, these little blurbs, these little blob things right here could float. You know, they could do, you could do a bunch of stuff. Some of these things are actually a lot easier and faster in Photoshop, some.
1:19:48
They’re easier the first time. They’re not easier when stuff needs to change, though. Okay, it’s not Bev in accounting asking for changes. It’s usually the client bad photos taken from their old iPhone and the head is half cropped out. Yeah, that too. That too. Well, the larger, when you work with larger companies, it’s Bev in accounting. When you work with solopreneurs and very small businesses, it’s just that business owner, you know, having some grand idea or some great opinion about something. Mini tutorial Kevin could you show us how to correctly re-import a frame? What’s the word on Gutenberg? ACSS Jason says. Okay we’ll tackle both of those. So John says show us how to correctly re-import a frame.
1:20:42
All right well let’s tackle that real quick. All right so I’m gonna go in and And we’ll go to all pages And let’s say re-import frame publish edit Doesn’t I guess it doesn’t really matter what frame we bring in let’s bring in the new frame feature section Sierra Fair. Oh, I do want to show you guys another and I just added this to the FAQ so feature section Sierra is a quite a complex frame, quite a complex frame. A lot going on here. So we have page width, I did a whole video on this by the way, so go to the ACSS YouTube channel you can see the video on this frame, but it achieves page width or page aligned content on both sides, by the way, while allowing the images to break out to the edge of the viewport, it also allows the user to change the ratio on the columns. So, we come down here to these locally scoped variables. We have the feature span. How much does this features text span inside of our grid? If I put it at six, it’s going to be exactly even, half and half. If I put it as seven the content is going to get much wider, the images are going to get much smaller. Notice that nothing breaks. Notice that we still maintain page width alignment regardless of the ratios. This is all a little complex. Okay I tend to like this overlapping effect right here. You can also change your gap inside the card very easily. Notice that when you change the gap you’re not going to see any breakage, everything is gonna recalculate.
1:22:29
We can set the image aspect ratio to be whatever we want. Of course, as content grows and gets longer, wow, so does the image. So the content never leaves your image behind. That’s really helpful and good. We should probably style this stuff up to, because we need to, what you wanted to see was basically if you changed some stuff and then wanted to undo everything and kind of re-import it, is that what you’re talking about?
1:22:59
Well, let’s go ahead and we can just change the ratios here. All right, so I’m gonna go grab Feature Grid Sierra, and we’ll change this to a six and six, or maybe something more radical like a seven. And then we’ll do a 1.5 here, and we’ll leave the image aspect ratio the same. And then here’s what somebody asked me. They were like, Kevin, you know, I love this frame. I don’t like the fact that in the first card, the image comes first and the text comes second.
1:23:29
I really want to flip that around. Like, is it possible that we can have the text over here and the image over here? Well, you might think that, and I think this is possible, pretty sure this is possible. You might think that you have to drag things around inside the grid and all this. By the way, this is an auto-alternating grid. So let me collapse this up.
1:23:49
We’ll delete these two feature cards right here. Notice that we just have one card, right? So we have one card. What if I duplicate that card? What happens? Oh, it flips itself. What if I duplicate it again? Oh, it flips itself again. It’s gonna auto-alternate all the way down the page, which means by the way, that this is query loop compatible.
1:24:08
So if you love those alternating grids, but you also love query loops because you also love maintainability and scalability and dynamically building pages, then this frame will work for you. Okay, so let’s grab, oh yeah, yeah, yeah. We were gonna talk about flipping, flipping the alternation. So if I come down here you’re gonna see this grid alternating code and I did see that see how easy that was Wow now it just goes the other way so now all your text is going to come first in the first card and then your image and it’s gonna still alternate all the way down the page look how easy that was but I went to get frames dot IO and if we go to the frames library, which by the way is not, all of our frames are not in here yet, we just put this together. But if I go to feature section Sierra and I scroll down, you’re gonna see the video, you’re gonna see a lot of documentation, it’s gonna talk about the variables that you can adjust, but look down here in the FAQs it says, hey how do I flip the order so that the first card starts with the text on the left and the image on the right.
1:25:14
Let’s just open that up right there. Oh, look at this. You got your instructions right there. So you can make that change that I just made. So it’s all explained for you. That’s what we’re trying to do is make sure that you’re not having to just sit around figuring this stuff out. We’re trying to think ahead and make sure that all this stuff is documented, and this is just as easy as possible to use. But I’ve made some changes here. We made this go the opposite way.
1:25:42
I changed the gap, I changed the ratios, and now I hit save. We’ve just committed these changes to these classes right here. We can go look at this on the front end. Fantastic, fantastic. Everything is there the way that we changed it. Now, you’re like, I want to start over. I want to clear all of my changes and I want to start over. What is the process for doing that? Well in Bricks all these classes are assigned an ID in the background. You can’t really see it, right?
1:26:09
So even if you change the names of these classes The styles that we added are still assigned to the ID and if you reimport the frame It’s going to reimport with the exact same ID and so all the styling is going to be the same So what you want to do is you want to type in Sierra, would probably be a good one, right? So what did we change? Well, we changed feature grid Sierra. So we need to delete that class. Then I can type Sierra in again. Now, this is all going to be much, much easier once Bricks releases their class, whatever they’re going to call it, their class manager.
1:26:46
Feature section Sierra. I don’t know if I changed anything on that, but, um, and then here are all the cards related to feature Sierra, everything related to that Sierra. And then I just want to get rid of it. Okay. And now I can go up here, templates, remote templates. I can hit refresh and make sure I’m always bringing in the latest version of frames. And then I just reimport feature section. Look at that. We’re just back to the way that it started. Then I activate our little code block down here, bam, and save.
1:27:17
And then I’ll refresh on the front end, and it goes from this, which is that’s where our changes were, back to the default frame. Easy, right? So you just basically you delete all the classes associated with that frame really quickly. And the best way to do it is just to search the name of the frame, and then go bang, bang, bang, bang, delete them. And then hit Save, and then re-import the frame, and you’ll be starting from scratch on that frame.
1:27:40
So hopefully that answers that question for you. The other question was, what is the word on Gutenberg ACSS? So we are working feverishly on ACSS integration with Gutenberg. I said a year and a half to two years ago that Gutenberg, I believe the words I used was Gutenberg is a trash can. I can report that in 2023, Gutenberg is still a trash can. There’s a lot that we have to do.
1:28:18
It’s not just making ACSS work in Gutenberg. That would be just a small task. We also are creating some basic blocks, ACSS blocks for Gutenberg, because this is gonna make your life a lot easier. Because here’s the thing, one of the pieces of trash about Gutenberg is that it’s got a little divception kind of thing going on. You know, people talk about the clean output of Gutenberg. It ain’t that clean, actually.
1:28:44
All the blocks have inner divs that are just simply not needed. And when you’re using a framework, right, you’re trying to add like a utility class to something. Like if I just wanted to make a grid, just a simple grid. Can I, oh, by the way, there’s no container block in Gutenberg, there’s no section block in Gutenberg. There’s no, like the basic, basic, there’s no div block in Gutenberg. The basic building blocks of websites don’t exist in Gutenberg because Gutenberg’s a trashcan.
1:29:14
And so you have to use their group element, and it’s a nightmare. And if you try to go that route, and then you add a, let’s say a grid three, because you’re like, let me just drop in a blank block, like a group block, and let me put grid three on it, and then I’ll put some other blocks inside of that, and then you look on the front end, and you’re like, oh, that’s not a three-column grid. Why is it not a three column grid?
1:29:37
Well, because the utility class of grid three assigns a grid to the container that you put it on as it should. But when you have an inner wrapper that doesn’t need to be there because it’s a trash can, it actually makes that inner container the first item in the grid and now everything in your grid is actually contained in the first column of your grid. That’s not good. And so we either have to do one of two things. We have to make the grid three class, target an inner container when Gutenberg is detected, which that’s an absolute nightmare. Nobody wants to do, no, I don’t want to be about that life. Or we have to create our own blocks, our own clean blocks, so that you actually have a div, the most basic building block of any website in the world, right, is a div.
1:30:23
We have to give you one, because Gutenberg doesn’t give you one. We have to give you one that’s clean, that doesn’t have an inter-wrapper, that doesn’t need to be there. Then suddenly, you can create grids, and you can do a bunch of other things. Hey, you can do everything that you can do with a div. Why doesn’t a div exist in Gutenberg? Because it’s a trash can.
1:30:39
So there’s a lot more than just, hey, can you make ACSS work in Gutenberg? That’s a more complicated question than it should be, honestly. So we got to do a lot with blocks. And then we’re thinking about, all right, well, this also needs, we also need to be able to build frames in Gutenberg because we want to have frames be exclusive to Gutenberg at some point, right? It’ll work in Bricks.
1:31:03
Your frames will work in Bricks. Your frames will work in Gutenberg, maybe some other places, don’t know yet, but it would be nice if you could just build an entire website in Gutenberg with frames. Wouldn’t that be fantastic, spectacular? Well, the thing is we can’t build frames in Gutenberg without these blocks that we have to create first. And so there’s just a lot of work. It’s a lot of work, but we are working feverishly on it.
1:31:27
The other question is, is it just Gutenberg or do we have to get into FSC? Do we have to get into full site editing capabilities? Do we have to have a automatic CSS theme or a frames blank theme to run all of this? Because of how WordPress’s ecosystem is changing and evolving towards FSE. And we believe, based on internal discussions, that the answer is yes, we do have to have an FSE theme. And so that adds another layer of complication.
1:32:00
So there’s a lot that has to be discussed here. There’s a lot that has to be done, but it is in the works. I’m trying to be as transparent as possible and give you as many details as possible as to why this hasn’t already been done. All right, just finished my last site with Gutenberg, even with Spectra, a disaster, never again. Nightmareberg, that is a good one. When you create a landing page for social media lead magnets campaign, what tech stack do you use to implement the tracking and monitor the relevant KPIs?
1:32:32
Good question, Helmer. So a social media lead, well, I mean, it wouldn’t just be for a social media lead magnet campaign, right? I think what you wanna do is decide on an analytics and KPI tracking stack for the entire website, regardless of what you’re doing. It could be a social media lead magnet campaign, it could be a PPC campaign, it could be Facebook ads. You need a way to get clear analytics and track the data that you want to track and all of the relevant conversions and all of that.
1:33:02
So it really depends on the client. If it’s a corporate client, some of the larger clients that I’ve worked with, your options are very limited. They want to use an enterprise level system. So, and most often they want to use Google Analytics, they want to use the Google products that they already use elsewhere, they want to use Data Studio, they want, you know, all of that.
1:33:30
And so your hands are a little bit more tied. If you are doing this for like a private, small business kind of client, you have more options typically. And one that I’m liking, you know, an analytics platform that I’m liking a lot lately, I haven’t gotten deep enough into it to really, you know, make it like my number one recommendation or even do a lot of tutorials on it, but I’m liking UserMaven a lot.
1:33:54
It is listed on my site under tools, but I’m liking UserMaven a lot. I’ve used, you know, Heap in the past. I’ve used a bunch of different analytics platforms. Primarily we use Google Analytics just because it’s free and it’s the standard. And even though it also in a lot of ways is a trash can, but we’ve kind of stuck to that just because it’s like it is the standard or whatever. But I’m getting more and more into UserMaven.
1:34:26
I’ve done plausible.io, but that’s not really that great for a lot of it. Like, you know, it’s not really made for advanced conversion tracking and things like that. It’s mainly like a streamlined base level analytics platform. Hopefully that answers your question. I hope next step from you will be to build a new kind of CMS powered by ACSS and frames. I don’t know I don’t That is a ginormous project And it’s already difficult to keep up it’s already difficult I don’t see that happening right now I don’t see a builder happening right now The extent of what may happen is Here’s the thing, I’ll be honest with you, Fathom is just like Plausible.
1:35:19
Plausible and Fathom I feel like are interchangeable. Fathom is more technical. You have to be more technical in your knowledge base to set up Fathom over something like Plausible. But I don’t really see any other differences between the two. And like I said, they’re really like base level analytics platforms. I would not call them enterprise level analytics platforms. I think your question is being duplicated over and over and over again.
1:35:46
All right, so I’ll just be honest with you guys. If there was a way, I see the appeal of building websites in a native WordPress environment. And so having to needing a third layer, like an oxygen, or a bricks, or a quickly even feels like a, how do I want to say this, an X, it’s just an extra layer that perhaps we could wish wasn’t needed. I mean, wouldn’t it be nice if you could, if literally WordPress had like a professional, capable, native website builder? That would be nice. So I see the appeal.
1:36:37
There’s people who have switched, obviously, to generate press and generate blocks, and they really, really, really seem to like it, and it really, really, really seemed to work for them. And I see the appeal of, Hey, I don’t need this third party add on builder type thing. Now don’t get me wrong. Generate press and blocks is an add on to WordPress. These things are not native to WordPress. And I don’t buy the idea that, Oh, because at least it uses WordPress as native environment, that somehow it’s less risky than using a bricks or an oxygen.
1:37:13
I don’t buy that argument whatsoever. The Generate Blocks company could blow up tomorrow, just like BRX could blow up tomorrow, just like Oxygen can blow up tomorrow. They could all blow up tomorrow. The only thing that’s not gonna blow up tomorrow, most likely, is WordPress itself. But if you look at what’s natively available in WordPress, it’s absolute garbage. It doesn’t have any of the things that you need, and then all the things that it does have are just poorly implemented.
1:37:41
So people have to use a third-party system. They have to use Quickly, or they have to use GeneratePress, GenerateBlocks, whatever. But it is nice to not need a new environment, right? Because even if you’re using GenerateBlocks, you’re still in the native WordPress environment and it is faster. It’s faster to go through pages on the back end when you don’t have to load a third party builder. Not that bricks is terribly, you know, slow to load or anything like oxygen used to be.
1:38:14
Oxygen has gotten much faster, but that was a big thing. Uh, but still, I think it’s still a speed improvement to be doing work natively inside of WordPress. So I see the appeal of that and it would just feel good, just emotionally it would feel good to be like, I don’t need a third party build, I don’t need to open a builder environment, I can do everything natively in WordPress. That probably feels good to the people who are doing generate blocks and I can identify with that.
1:38:42
So if there was a way to build custom websites without limitation in the native WordPress environment. I still say, by the way, generate blocks still has tons of limitations. So I’m not saying that’s the answer. But if there was a way to build fully custom websites with no limitations whatsoever, and make them scalable, and make them maintainable, do all the stuff that we talk about here, and do it in native WordPress, that would be the best solution.
1:39:13
And so I can see myself switching to a native WordPress Solution let’s call it if that becomes available if that is you know exists at some point Because that probably would be a better scenario The thing is it doesn’t exist right now, so we’re just talking about you know fantasies Generate blocks code output is very good. Tom reworked the complete just for removing one unnecessary div. Yeah. And that is a fantastic update. That was the first thing when I opened generate blocks and I started playing around with it.
1:39:47
I was like, oh, it’s got the same ridiculous inner wrapper that Gutenberg has. And that a lot of these builders have, which Bricks does not and Oxygen does not. Oxygen has it on their sections, which is annoying. But bricks, 100% clean. So that’s fantastic. And I’m glad that they reworked it to remove that inner block. That is a big step in the right direction. There are just way too many other limitations. The list of limitations is exhaustive, in my opinion. We could just start with the fact that Gutenberg only has three breakpoints.
1:40:22
So like, for example, we’re expanding automatic CSS to six breakpoints. It was five breakpoint or four breakpoints before. Gutenberg only has three. All right, so that’s a big limitation, huge limitation in my opinion. We talk about lists, right? We talk about these, like this is a list of cards. This really needs to be a ULLI structure. Create the ULLI structure with Gutenberg.
1:40:50
Go for it. Can’t do it. Can you do it with generate blocks? Don’t know. Don’t think so. I don’t think you can do this structure with generate blocks. Can you create custom loops of any kind? I don’t think so. I think they have a basic post loop. Oh, let’s look at this.
1:41:08
Let’s look at this. I was like, I saw this element in Gutenberg the other day and I was like, could it be? Could it be? And no, it’s just a fake out. It’s a fake out from this trash can called Gutenberg. Where do I even go? I was like, does Gutenberg have a query loop? I type in, oh, look at that. A query loop.
1:41:32
Okay, let’s add it. Oh, choose a pattern. What’s a pattern? I don’t know. Why do they have to, why does everything have to have a cute name that means nothing? That means it has no tie in to any sort of development language or anything else. They’re just making up new shit every day. Create a pattern. What, okay, what’s the pattern? I said choose. Well, that’s ugly. All right. So I don’t even know what’s going on here. And is it the only pattern? Oh wait hold on I can I can hit this right arrow down here I didn’t even know that. Okay so like as a UX like where are my options? Well here just look down here in the little left-hand corner and find some little tiny ass arrows then maybe you can see your other options.
1:42:16
Alright so I’ll go through these. Alright here’s some options. Hmm man all these look ugly terribly ugly. What if I don’t want one of these? I wanted a query loop. Why are you showing me example blog posts? Okay, so let me get out of here and I was like, oh I want to start blank. That’s what I’d like to do. Let’s start blank. Okay, here are my options. Starting blank. I can have the title and the date, title and an excerpt, a title, date and excerpt, and an image. But wait, I thought we were building a query loop. Where can I just start with my query? Because the data that’s going to be in here probably depends on the thing I’m querying, would it not? So if we look at something like this, hey, I need to query an accent heading, I need to query a headline, I need to query lead text, I need to query button text, I need to query a button URL, I need to query a image from a custom post type.
1:43:10
I got some things I need to query, Mr. Gutenberg. So where do I choose those oh oh this isn’t actually a query loop that’s the conclusion I came to you don’t get to choose what you’re querying it just queries blog posts it’s not a query loop it’s a blog post loop that’s what it is and then you’re very limited very limited I mean title and date I bring this in and it’s already preset first of all you can’t even see anything over I don’t even know where to go let’s look at the here we go all right so we got a little list view right here in this trash can so here’s the title here’s the date these are predetermined blocks from somewhere in here okay if we look up date there it is post date then we look up is it title is it headline there you go post title these are all predetermined you can’t put your own custom data in here.
1:44:03
You can only choose from the predetermined blocks. I think there’s a featured image, post featured image that I could drop in here. And now it’s pulling in the featured image from our surfing stuff, which are the sample stuff that we had in here for the surfing concept. So I can move things around now, but I can’t add any other data that I unless it exists as a block here. I can’t add any other data Now, how do I how do I turn this into a grid? Oh, well, you can’t really do that without a bunch of custom CSS It’s just like what are we doing in here? Well like Tell me what we’re doing in here. Let me see some comments here Oxygen and bricks are basically web flow approach to WordPress They’re not. I get what you’re saying Nick. I’m not disagreeing with you.
1:44:55
Obviously they’re very similar to Webflow. Webflow is a UI layer to web design. That’s what Webflow is, right? So if you took the concept of designing a website and were like, Well, we need to turn this into a UI. You know, it’s exactly what it is, a user interface. That’s what you would build. You would build Webflow. And so if you needed to do it for WordPress, you would do the same thing. Webflow didn’t create some sort of new concept. It just codes for you.
1:45:30
And it just puts everything into a UI. Gutenberg, on the other hand, was like, no, we’re gonna reimagine how to build websites. You don’t need divs. And this is what, by the way, all these other builders did. Divi, Divi, the builder that doesn’t even have a div. It’s called Divi, it doesn’t even have a div. All these other builders were like, you know what, people are too dumb.
1:45:52
See, Webflow was like, well, we’ll just put a UI on top of a web development platform. And all these other builders were like, no, we need to reinvent how websites are built. We won’t have divs. We’ll have patterns. We won’t have classes. We’ll have presets. We won’t have this. We won’t have that.
1:46:09
We won’t have all the things that everybody knows already in web design. We’ll just reinvent them all and then we’ll give it to you in this ridiculous blank page of a Microsoft Word post editor and you just assemble things in the post editor. I know you can’t really see exactly what you’re doing, but you can see enough of it. And then, you know, if you want to use a framework, well, it will make that very difficult for you. And it’s like, what, why? Like Webflow did it right. Webflow is like, oh, we’ll take web development concepts and put them under a UI.
1:46:43
And then WordPress disagreed with that, apparently. As did Divi and, you know, all the others. This rant is gold huh? I mean it’s not even like do we it just seems like common sense to me it seems like common sense to me that this the answer to the biggest platform and by the way guys let me let me remind you okay let me pull up bricks let me pull up bricks where did bricks here we Oh, I’m just editing with Bricks. Okay, whatever. This interface, this builder that is Webflow-esque, that allows you to do basically anything that you could want and need to do.
1:47:24
Without limit, there’s really no more limitations to Bricks. Was built by like a two-man team. I don’t know, maybe they have three people. Maybe they have, I don’t even know how big the Bricks team is. A very small team bootstrapped. Okay. And we get this. Now, let me switch back. Tell me if this adds up. Tell me if this adds up. Let’s get out of here. Okay. This I’ve got a cuss. If you have kids, if you have, if you don’t like cussing, just go ahead and turn it off. Now I’m giving you your warning. Okay. I’m not we’re we’re done. We’re done with the value. Okay. We’re just, we’re just ranting now.
1:48:05
If you don’t like custom, you can go. This, here it comes, okay? This dog shit of a Microsoft Word, Google Docs, I don’t know what the hell that they were trying to build here. This is not how you imagine web development or web design on a platform that powers 25 to 35% of the internet and has millions of dollars and a gigantic team. You cannot give me fucking Google Drive to make my websites in.
1:48:37
It’s just, this is not a thing. Why was this, why did any of this ever happen? This makes no sense. The amount of money, the amount of time. Guys, this is years in development now. Years in development and it still looks like this and it still works like this and it’s still missing the basic why what somebody has to answer for this where are the people from automatic where get me somebody on the line to answer for this nonsense that we’re looking at day in and day out on a platform of this size it is I it makes no sense to my brain where we can have something like bricks, something like oxygen developed by a very small bootstrapped team, what is the answer?
1:49:23
What is the explanation? It’s 100,000% unacceptable. This is unacceptable, okay, what we’re looking at here. So I just don’t get it and I don’t know why anybody could be like, yeah, that’s definitely the environment we should be building websites in. It just doesn’t make any sense make zero sense whatsoever we’re missing classes okay let’s let’s go back in and look I mean I can make a list I should make a list let’s go back in how do you add a class to something right again we’re like oh let’s take take out such an important concept to web design toss that out the window bury it somewhere we don’t really need that so here’s my heading my heading needs a class.
1:50:02
Okay, great. So I’ve gotta grab my heading. We’ve got this duplicate tab situation. Guess what? Guys, I’m never in the right tab. I don’t know what the secret is to using Gutenberg, but when I click on shit, I’m never in the right tab, okay? So you gotta figure out what tab you’re on. Why would I’m interacting with a block? Why would I’m interacting with a single block, like a heading?
1:50:25
Would I ever want to change the page settings? Why what why does this need to be here when I’m Actually interacting with an individual element. This makes no sense whatsoever. I end up in this tab all the time Okay, so then I click on this and then I got to come down to advanced. There’s one thing. Oh, I’m sorry There’s two things in the advanced tab two things Two things. Why is this classes box not just up here, where there’s nothing? There’s nothing relevant up here. Guess what?
1:50:56
This color doesn’t matter to me if I have a class. This typography doesn’t matter to me if I have a class. None of this shit matters. Just give me a class box so I can put a class and style my shit. I don’t need all of this nonsense. And they’ve taken the most important thing and they’ve hit it away in like four clicks You got to get like four clicks to get down here to this thing. Okay, so there’s another problem right there How about this? Let’s duplicate this a lot. I ran into this problem the other day If you need to edit these three things, let’s say you you made a mistake You need to go I need to take my out of here. So I start at the bottom Okay, so I go here and I start at the bottom and I delete this.
1:51:39
Great, oh shit, it’s up here now. All right, so you go too many times. Okay, I made the mistake of putting the space back because when I put the space back, oh, that time, nope, there it goes again. Okay, so sometimes it does it, sometimes it doesn’t do it. But anyway, this toolbar, why does this hover right here? Because it always, 105% of the time, covers the exact line I need to go edit next, and I can’t get rid of it.
1:52:09
How do you, okay, I gotta hit escape, then I gotta click here, then I gotta click in here, because oh, that first click’s actually a block, and you gotta click twice to get in the block, but there’s really no visual showing that you’re selecting the block instead of the text in the block. Big problem, okay, look at this. It’s covering up the next line I need to get, it’s always covering up the next relevant thing.
1:52:30
So then I’m like, all right, can I position it somewhere else? It turns out you can, it turns out you can. Can I do it here in the options? Hide more settings? No, that doesn’t do it. It’s gonna copy the button, no, I don’t wanna copy. Duplicate, no, I don’t wanna duplicate. I don’t wanna do any of these things. Lock it, can I lock it?
1:52:48
Okay, let’s try that. Well, let’s just take a little side tangent here on this lock, okay? They just added this recently, prevent removal, disable movement, because you wanna know, for the longest time, if you disabled a block, you could still delete it on accident. Isn’t that ridiculous? So they had to come along and be like, oh, sorry, we fucked that up.
1:53:13
So now what we’re going to allow you to do is you can actually come in here. Where did I hear lock? Okay, you can actually Oh, you can prevent removal. Okay, like the most important thing of locking a block, because I didn’t want people to be able to delete it wasn’t there before. Now it’s there, thankfully, okay, they’re catching up. All right. Oh, I was I was trying to move this this toolbar, wasn’t I? So I come in here. Well, none of this works. You would think that the settings for the toolbar I want to move would be in the settings for the toolbar that I’m clicking on. But no, they’re not. They’re up here. So I click on these three dots, and then I’m looking in here and I’m like, where are the toolbar settings? Oh, preferences. Let’s go into preferences.
1:53:57
General preferences. Well, there’s nothing here for this toolbar. Oh, I can reduce the interface. Okay. Um, but that doesn’t do it. Where can I move? Oh, Oh, let’s go back to the three. Guys. It’s right here. It’s just a setting randomly floating here called top toolbar. All right. So you have to click this and now you get the toolbar up top. And so now if I click on this, ah, there are my things up there. And I no longer need, uh, this floating nonsense. Now I can freely get to all of this should be the default. And by the way, Google Drive and Microsoft Word and all the others figured this shit out like 20 years ago. Okay, this was solved 20 years ago.
1:54:44
This floating in your way nonsense was the, oh, we got a cute little feature that got in your way. So we took shit that was solved 20 years ago, two decades ago, this was solved, and we’re like, nah, let’s break it again. Let’s break that again. All right, now let’s watch this cute little feature I ran into the other day. So you can type forward slash, and you can type list if you want to create a list. Well, that’s helpful, right?
1:55:10
And we’ve seen this in Notion, we’ve seen this in other things. But the problem is in Gutenberg, when I do that and I say my list item here and another list item here, and I’m like, you know what? I want that to be an ordered list. Well, what the fuck? How do I get this to be an ordered list? Well, I go up here.
1:55:29
Well, shit, this little icon seems like a button, but it’s not a button. And I know that there’s an ordered list thing somewhere in here. Should I select the parent block? No, I don’t know if I need to select the parent block. Copy blocks, what do I do? Well, hold on, hold on, watch this. If I come down here and instead of hitting forward slash list, watch this.
1:55:52
If I take the paragraph and I convert it to a list, and then I start typing, oh, but the same thing happened. Hold on, let me try that again. So we’re going to come down here. We’re going to change this to a list. Whoa I get the options right there But if I click on the list, oh no, no now they go away and then that’s where the old Select the parent block comes from because you can only change the list style at the parent But if you’re on an actual list item, oh that shit’s hidden like if you didn’t know that, now you’ve got to, I spent 10 minutes, like how do I convert that to an ordered list?
1:56:31
Should I have to spend 10 minutes? Again, again, Microsoft Word, Google Docs, solved this shit two decades ago, but for some reason in Gutenberg, it’s a mystery. You got to figure it out, you got to figure it out. So that was another one I ran into the other day. What else? Anybody else want to share a Gutenberg experience? Hey Kevin, do this in Gutenberg and see how it’s done. What about, let’s go over here.
1:56:58
Can I take, oh let’s do the group thing. I was talking about blocks. What blocks do we have available to us? Do we have a div? Okay, oh did they just add this? All right, let’s see. Hey, did I add a div to the page? I don’t fucking know because there’s no indicator that I’ve added a div. Let me go to the list view. There’s a div there! Wow look at that! But there’s no visual indication that there’s a div. Okay so I want to turn this into a three column grid. Let’s see if they fixed anything here. Where do I go to add a class? Guess what? My little cute drop-down not there anymore. So I gotta go open that up. All right let’s click on that. I’m gonna go over here to classes.
1:57:40
God, I hope you guys are entertained. I hope you guys are entertained right now. Block property, oh, no, no, no, no, no. I forgot, I’m sorry. This is hooked into my automatic CSS VS Code database and the div is actually from automatic CSS. This is not native Gutenberg. Let me go into giri.com. This is not linked to the automatic CSS dashboard. Sorry, that was automatic CSS giving you things that Gutenberg should give you.
1:58:09
Let’s go into here. I don’t think Gutenberg has a div. Sorry, let’s do a page. Okay. We’re gonna call this trashcan. Okay. Save it, I’m not publishing it. I don’t want it on the front end. Okay, let’s edit with bricks. Oh no, no, we’re not editing it.
1:58:25
That would be the right thing to do sorry We’re gonna try to do this with Gutenberg. Okay, so we come in here, and we’re gonna add we add a div No No, no div okay. What do we have as an option? Do we have a container? Okay, we have a row we have a stack Guys What is a stack? Why would I ever need a stack when I have a div? A div, guys, hold on.
1:58:50
I didn’t think I’d get this worked up. Guys, shit on the internet stacks by default. It just stacks, that’s what it does, it stacks. What is a stack? Why would I need this as an element? I’ve added it to the, do you guys see a stack here? Let me go to the, okay, it didn’t add it. All right, let’s go back. Stack, what could this possibly do? What are we doing here?
1:59:27
Let’s add a heading, test. See, I can’t see what I’m doing, right? So let me open up this thing. All right, so test, can I duplicate this? All right, come on now, duplicate. It says shift command D can duplicate, okay, now it’s duplicating. Can somebody tell, what is the, this is what happens when you add headings to a page. What is this stack?
1:59:49
Is this all it does? Wait a minute, it allows you to change the orientation? Guys, that’s not a stack anymore. That now it’s not a stack. What’s happening here? Why does this exist? Why does this tell me right now? Why does it guys, the container? Let me delete this, remove, remove this nonsense. What is going on here?
2:00:19
So I go over here, container, right? Here are my options. If you just gave me a container, the most basic thing, guess what? It can go left and right. It can go up and down. We don’t need different blocks for these things. This is so unnecessary. Some, get me somebody from automatic. I want answers.
2:00:41
I want answers to this. So I’m gonna go into group. I added a group. I think I added, I didn’t add a group. Okay, let’s add a group. What can I do with the group? Can I add more groups to a group? Because this is kind of like the only block that I have. So can I add a group here? Let’s go group, group.
2:01:00
Okay, let me open my thing again and see what we’re doing. Okay, shift command D did not duplicate that time. Now we’re out of here. Okay, we’re going to duplicate and we’re going to duplicate. All right, now let’s go to the top group. Okay, can we put a grid class on here? Let’s go grid three. Okay, we can’t see anything happening in here, but maybe on the front end something is happening. So I’m going to put a heading in here.
2:01:29
These are going to be our cards. Okay, card one, and then I’m going to come in here, heading card two, and I’m going to come in here, heading, card three. Okay, publish. These should be in a three column grid on the front end. Yeah? Everybody agree? Okay, why can’t I preview? Let’s go page, URL, open the trashcan. Okay, they’re not in a grid.
2:01:56
And they’re way up there, because I have an overlay header. But that’s neither here nor there. So we’re going to inspect this and just find out why is this not a grid? All right, so let’s go up to our parent. Here we go. Here is the group that I added and there is the class Grid3. So this should establish a three column grid. And it actually did establish a three column grid. The problem is everything else I added. This is what I explained before.
2:02:34
All the other, here are the columns of my grid, all stuffed into one column because of this inner container that doesn’t need to be here. This doesn’t do anything. It provides zero value. There’s no reason for its existence. But here it is. Why? Why is it here? Zero value to all it does is break things.
2:02:56
Why is it here? Okay. So here are the other things. So what I really need is this needed the grid three. See now it’s a three column grid. Let’s take this off of here. I’m just proving this to you. There’s my three column grid. This is what I should have gotten from the beginning now how do I fix this let’s go back in the trash can can I put a class on the inner container to make this work right no you can’t access the inner container it’s there but you can’t touch it why why is it like this this makes no sense whatsoever.
2:03:38
So no, I can’t use a framework. I can’t use utility classes. Does this have native grid controls? No, it doesn’t. It has very basic flexbox controls in the form of apparently cute little blocks called stack. And row. What does row do? Let’s see. Yeah, so row gives you some columns here.
2:04:00
So heading, OK, card one. Notice the whole UI gone. I was just looking at, look, let’s go back, let’s go back a step. I mean, delete, delete, delete. Watch this, watch this UX. Guys, I don’t, anybody that disagrees with me that Gutenberg is a trash can, you’re watching it. Explain yourself. If you don’t think this is a trash can, explain yourself.
2:04:24
Look at this. So I’m gonna go to row. I’m gonna add a row. Here’s a row. You can visually see. Here’s a column. Here’s waiting on another column. I get it. Dotted, get it. We’re waiting on another column.
2:04:38
Okay, understood. Well, I’m gonna start with the first column. Okay, so I’m going in here. Heading, heading. Card one. I’d love to add another fucking column right here. How do I do it? I gotta go up here. I gotta open this structure panel and now I have to start duplicating things.
2:04:57
I can’t just, why? Because we’re building a website in fucking Microsoft Office, okay? That’s the answer to why and I don’t know why we’re doing that but that’s what they’re wanting us to do. So I come up here and I go to duplicate. All right, fantastic. How do I make these cards a different size?
2:05:17
Can I come over here? Block, what are my options for this block? Oh, wait a minute, these aren’t cards, these are just headings. Okay, so we’ve got to, oh, you know what this means? I guess I can’t access the actual columns of the row. Because I go to the parent, what is this, transform to a group, why would I want to do that? I tried to do that before, it didn’t matter. I don’t know, what am I supposed to do here?
2:05:49
Now I get this is why people are like, well use generate blocks, I get it, but like why are you making me build a website in Microsoft Office with this dog shit of a UX and UI, this thing that, number one, oh, I’ll show you a trick, I’ll show you a trick, because you’re like, Kevin, that side panel that you’re looking at doesn’t have to disappear. You can actually pin it there, I know, I know you can. Just hang on.
2:06:15
So we’re gonna go to preferences. It’s in here somewhere. I’m always looking around inside these panels. Use theme styles. Oh, it’s always open list view. Guys it’s already on. It’s already on. But for some reason the list view continues to disappear over and over and over again throughout the development process. But check this out. I was like let’s say I did manage to build a row or a grid. Well if I have lots of these things, let’s go here to duplicate. Shift Command D only works after you’ve manually duplicated it once. Okay, if I go in here, now it’s working.
2:06:54
But when I first added the row and I did it, it keeps trying to like add a bookmark and do a bunch of other shit, but let’s do this. So you’ve got all of your sections. By the way, you don’t have a section thing. Again, the most basic, beyond a div, the most basic container you could ask for is a section, and it doesn’t exist, okay? Search column block. Okay, I’ll do that in just a second.
2:07:17
I’ll do that in just a second. But imagine this is a page, and because you don’t like to live in a nightmare, you’re like, hey, I’d like to name some of these things. And I know they’re working on this, in all fairness. Okay, I’ve seen that they’re working on this, but here, can I name this? No. For the rest of time, in this entire website, you have to identify everything by its explicit name.
2:07:42
Just row, row, row, row, row, group, group, group, group, group. You cannot name anything. Nothing can be organized here. Nothing can be organized. So I’m gonna do a whole dedicated video. I must. Somebody has to put their foot down and be like, enough is enough. Ashton Kutcher, come out of the bushes.
2:08:01
I know I’m being punked. Where the fuck is Ashton Kutcher? Get out here and let me know that you have punked me. I’m ready, I am ready to face reality that I have believed that this was real for many years now, okay? Because it can’t be. Not with the budget, not with the timeline, things just did not add up. Something is awry in automatic land.
2:08:27
Okay. All right. Now I’m going to read the comments and I’m going to see if anybody disagrees. Okay. And we’re going to go through this together. All right. Let me, let me remove. Can I, is there a shortcut for deleting? Delete, delete, delete, delete. Oh, is it just the delete button?
2:08:42
No, it’s not just the, of course it’s not. Okay. Let’s, we’ll just leave those here. All right. So we come up, let me, let me scroll up here. All right, there’s a lot of people rolling on the floor. This is good. Okay. But I’ve already built 10 plus websites to my clients based on Gutenberg and generate blocks, because I don’t know much about coding and it’s very easy to learn.
2:09:08
Here’s the thing, I mean, if you were like, I don’t know the first thing about web designer development, and then we handed you bricks, you’d probably be like, I don’t really know what to do here. I get that, I fully get that, I respect that 100%. No disagreement there whatsoever. Hand them oxygen, hey, here’s oxygen. It’s all you need to build websites. Don’t know what to do with it, sorry. I get that, totally get that.
2:09:42
If you were like, let me hand you something that looks like Microsoft Office, but I don’t know what you would do with it, unless you started with a theme. You have to start with a theme. I’ve been doing this shit for 20 years. I mean, how old am I? More than that, more than that. I’ve been doing this for 20 years. I can’t build anything with this.
2:10:05
Maybe if I spent days and days and days trying to put, like if you told me, Kevin, start from scratch and build your homepage in Gutenberg without any other stuff, okay? No generate blocks, no, just take Gutenberg, however many millions of dollars they spent on it. Millions of dollars spent on Gutenberg development. By a company that is gigantic and powers 25%, take the native environment, build your homepage. Couldn’t do it, don’t think I could do it.
2:10:40
Maybe days, days, right? And this would look like dog shit and then everything would just be done with custom CSS on the backend, okay? So it’s not an environment for building, it’s just not, it’s not. And so I get it’s easy, it seems like, oh, it’s super friendly, right? But here’s, I’ve talked about this before. If you have plans to build one website in your entire life, hey, I’ve got this thing, I wanna market it online, I need a website, I don’t wanna hire somebody, I wanna learn to do it myself.
2:11:12
Hey, more power to you, my friend. Don’t build it in this trash can go to Wix go to you saw the commercials go to Wix go to Squarespace get it done hit publish move on with your life there’s no reason to use this okay if if on the other hand you’re like no I’d actually like to learn web design well don’t use this trash can because this is not web design. So you have to open bricks, you have to open oxygen, and you have to say, somebody teach me how to do this.
2:11:46
I’m going to do it the right way. Do not use this trash can right here. This is not web design and web development. This is not. It’s not. So there’s your use cases. If you’re a single one-off website person who’s like, I don’t really want to learn, I just want to be easy. Wix already solved that solution, okay? Squarespace already solved that for you. This is not a solution to that.
2:12:09
If you wanna build more than one website, then learn how to do web design. What’s gonna happen here is you learn the language of a trash can, and then when it comes time to actually up your skills and use a real builder like Bricks or Oxygen or something like that, you’re lost again. You have to learn twice. You have to learn once the language of this trash can and then a second time the language of actual web design and development.
2:12:37
Why would you want to do that? That’s very inefficient. Just learn web design and development. And then this begs the question, again, again I go back, 25% to 35% of the internet is powered by WordPress. Most websites, by the way, like actual website, I’m not talking blog, personal blogs and shit like that. Most real legit websites generating lots of revenue are built by web designers and developers. They’re not just built by Joe Schmoe who decided to get up one day and throw a website together. Those usually aren’t making much money, okay? It’s web designers and developers need these tools.
2:13:15
So in order to use Gutenberg, number one, we had to put a whole layer on top of it, and number two, we still have to learn the language of like, why am I building websites in Microsoft Office? So it’s just a whole experience that doesn’t jive, there’s no connection, it doesn’t make any sense. It just doesn’t make any sense. I tend to avoid Gutenberg at all costs. Oddly, clients seem to love it so far. Maybe that was automatic audience.
2:13:46
See, I don’t think that’s their audience. I don’t think that that’s their audience. Kevin, try to break a paragraph into three columns the same way you would apply CSS column count. Okay, let’s do it. Let’s do it. Remove, oh, there it is. Remove row. Shift, what is that? Control, option, Z.
2:14:07
Oh, I can’t even select it. Control, option, Z. That’s the weirdest. That is the hardest. Maybe I’m just not like, I have no dexterity in my fingers. Okay. All right, we’re gonna try this. I still don’t know what containers. Somebody that uses, am I supposed to be using the group? Am I supposed to, what am I supposed to be using?
2:14:30
I think to me, the only thing I have available is the group. That’s the only like seemingly clean thing that I have. So I go at a group, all right? I’m gonna add, well, really you would do this with just a list, like can we break? And at that point, I don’t even think we need, what did you ask me to do? Break a paragraph into three columns. Okay, yeah, we can do it with a list, we can do it with, all right, let’s just throw a paragraph in.
2:14:59
So we go to website, Ipsum, grab all this right here. Let’s try this, let’s see. I already know, I’m already foreseeing a problem. All right, so we’re gonna update. Let’s go look at our trashcan on the front end. Okay, there it is right there. You’re gonna have to ignore all of that for a minute. All right so, oh boy, all right good question. Where do we start? Well here’s your first problem. You can’t do this unless they’re in a container. So I’m gonna try to select all these and I’m gonna try to group them. Group. Hey okay. I was sweating for a second there.
2:15:40
I didn’t know if it was gonna let me do it. All right, so we grouped them all. Now what I have to do is I, well, there’s no way to do it. I mean, without a custom class. So you’re gonna have to come in here to additional classes and you’re gonna have to say, let’s just see if the regular call count three. What do you want, two? You want three?
2:15:59
Let’s do call count two and let’s hit update. Now, assuming, well, no, it’s already not gonna work. Pretty sure it’s not gonna work. Okay, it did work. Does that group have an inner wrapper? It does, but let me see here. Okay, I’m trying to figure out why it’s working because it technically shouldn’t be working because of that inner container. Okay, here’s your column count two.
2:16:29
But there’s only one item. It’s like reaching into this container right here, probably because of the way CSS columns work. Because if you tried to break that into a grid, let’s do grid two, update. It’s just the way columns work differently from the way grid works. See grid completely fails in that exact same scenario. Where technically grid should work there. So if you did this in Bricks, if you added a wrapper and a paragraph, and you set the grid controls, it would make your paragraphs into grids.
2:17:06
So let’s go back. It appears that the group is the only clean container. So if I wanted to make just three cards, I would have to do group, group, group. So there’s group. Okay, see, okay. I just shift command D did this bookmark all tabs. This is what happened. Now, if I click on this and I hit duplicate and you can see shift command D is the shortcut.
2:17:32
If I duplicate it once, I can now duplicate it again with my keyboard, but I could not do that until I did it once manually. I don’t know what the deal is with that. Okay, so here’s how you would have to create a grid. So you would say grid three, and then each one of these groups is a card effectively. And so you would have to come to the advanced tab here and say my card, and then this one my card and this one my card and then you would have to drop a heading in here Which is a I don’t know a paragraph that you can convert to a heading card heading Converted to a heading. Okay, let’s just grab that Now can’t put it in there. Okay heading card heading. All right heading card heading. Got it Okay, looking good over here looking good. Now. I want to add a paragraph to each one So I’m gonna add a paragraph tag. Okay This is my well this go here. Let’s just grab this BAM like that. Okay, come in here paste paste paste notice Wait, what are these? What is this notice we got? It looks like you’re using full height columns.
2:18:53
Did you want to change your page template to the, oh, that’s something from ShareCard, I guess. I don’t know what’s going on with that. Okay, let’s hit update. Notice that my always open sidebar list view that I desperately need because I can’t see anything that’s happening here because we’re building a website in Microsoft Office, I have to open it constantly. And then I have to open this constantly and then I have to open each one constantly. Is there a way to keep them all open? Remove, create, lock, insert, do.
2:19:23
There’s no way. There’s no way to open them all. If these are closed, what happens here? They don’t all open. So I got to open them all individually. My god if I had 12 cards, imagine. Imagine what that would be like. Okay, so I’ve got a card, a heading, let’s add a button, right? Let’s add a button here, button, button, button. What am I adding? Buttons, a buy button, an add to cart button, customer dashboard button. None of these seem to be the option that I’m looking for, which is just a button.
2:19:55
Okay, so buttons, even though I needed one button, I have to add buttons okay didn’t know that now you learn something every day all right this is going to be learn more now this is not the way that you would normally do it I know you don’t want to repeat your your so if I copy the guys I have the button selected I hit command C it just wants to paste the text of the button. Okay, alright, that’s how we’re gonna play it. I guess I gotta duplicate over here, and then drag, is there no drag indicator? Somebody explain what we are doing right now.
2:20:50
Explain it, I have no fucking idea why anybody would do this. Can’t do it, I can’t do it. All right, remove button. Let’s go down here, let’s just add it manually. Just trying our best. Buttons, learn more, okay? Button, learn more. All right, there’s our three cards. Man oh man, we have a class on all of them, right?
2:21:18
Okay, we know we can’t name them. Somebody else told me they were like, oh, you can just add an HTML anchor, okay? This would be like my card. But then I’m changing my HTML output. See, I get a little label right there, but I’m changing my HTML output in order to accomplish that. All right, so I’m just gonna take that off. Now, where’s my main group? Group right here.
2:21:40
This needs to be a list. Ah-ha, we’ve run into our first, hey, you just can’t fucking do HTML in Gutenberg, can you? Look at this. So, this needs to be an unordered list. Well, you give me the ability to change my HTML element, you just don’t give me a list option. So I can’t do it. Hey, guess what? It can be a main, which there can only be one of those on a, like, I just don’t understand.
2:22:12
I don’t understand. Okay, so, all right, I can’t name them. I can’t make proper list structure. Let’s just see if we can style it. And let’s get, let’s get something else ahead of here. So this is gonna be a separator of some sort. Let’s go with a an image. I don’t really care. Just something to push the content down the page. Ok so let’s hit update. Let’s go to the front end. I’ll show you how we’re going to have to do this.
2:22:42
Ok so there… Oh dear what is happening with these buttons? Ok let’s keep working. Let’s keep working with it. So I’ve got Grid 3 so I’m gonna have to go in here Let’s go back out here. Let’s go to code box WP code box. Okay, let’s make a new style sheet new snippet trash can SAS External file save Auto-reload changes Save, auto reload changes, enable.
2:23:16
Okay, grid three. Gotta target the ridiculous inner container with it. Grid template columns. Probably also needs a display grid. God, I cannot type. Okay, let’s zoom in here. All right grid template columns repeat 3 min max 0 1fr. Okay there’s my grid structure grid template rows 1fr save. Okay, let’s go here padding. Let’s go. Space L. Gap. Let’s go with. Space M. OK. I don’t know if those are display flex by default, so let’s go flex.
2:24:17
Direction, column, save, okay. Oh God, what has happened? Oh, what has happened here? Oh, that’s right, that’s right, that’s right. We cannot do, we can’t use this grid three class because it’s also putting a grid on the thing. Okay, so we can’t just adjust it. All right, I’ve got a solution. Okay, we’re taking grid three off of there. All right, so see, these are the things you have to do when you work with a trashcan.
2:24:56
We’re gonna go block, advanced. Let me get on the grid. There’s my grid three. Okay, this is gonna be called my grid. All right, update. Okay, now we’re gonna go back to WP code box and this is going to be called my grid. Okay. There we go. Okay, we’re getting somewhere. We’re getting somewhere.
2:25:24
Let’s put a background color on here. So we’re going to go my card, background color of base ultra light. No, base light trans. Let’s just do base light trans 10, it’s just something to blend with the current background. So I can see my cards. There they are. Is there a gap in my grid? So what we would have to do here is say my gap. Update back my gap also targeting the ridiculous inner container and Here we’re going to go with gap of var grid gap save Okay There we go, all right fantastic what is happening here? What is this button issue?
2:26:27
Is that button wrapped in a div? Why? Why? It’s so unnecessary. Another div? There’s the button right there. What is the purpose of this and this? Just give me the button. I just want that right there. Look how easy that would be. Why did those two, I’m just proving to you, there’s the button, it still exists. Those other wrappers were so unnecessary.
2:26:59
Go add a button in Bricks and look at the output in the DOM, it’s gonna look exactly like this. So those other things make it so you can’t do this. Look, you go to Advanced, you go to Additional CSS Classes, hey, button action. Eh, maybe it works, maybe it doesn’t, let’s see. Look at this bullshit. That’s supposed to be my button, but because we have just useless nonsense divs that don’t need to exist, this is what we end up with, with a simple button class. So now what do you have to do?
2:27:35
Well, you’ve got to go make a whole new class, targeting the things that are nested two levels deep that don’t need to be nested in the first place this is what I’m talking about I got a look at the comments I need some support oh golly I was supposed to be out the door ten minutes ago but I can’t leave at least you’re loving the rant. This should be part of each show. I feel like this is what happens when you have giant teams building things. So much unneeded, poorly designed crap. Yeah, this honestly looks like Bev in fucking accounting made half these decisions, right?
2:28:18
Talking about Bev earlier. She keeps showing back up. Add, oh gosh, hold on, we don’t want to ban users, sorry, hit the wrong button. Add a column instead of a group. I don’t want columns though, that’s the thing. I want grids, I want clean containers. Shouldn’t be too much to ask for. The basic building blocks of web design don’t exist in Gutenberg. Backwards compatibility wasn’t thought out properly from the start.
2:28:52
Okay, I mean, hey, if, what’s dude’s name from Automatic? If he came on, Matt, is that his name? Mr. Mullenweg? If he came on and he was like, Kevin, I’m just gonna be straight with you. We fucked it up from the beginning and we can’t go back. We’re just, we’re trying to build on top of it as best we can. Hey, I’d be like, I get it, Matt. You can’t think everything ahead of time, right?
2:29:19
But at least that’s an explanation. Like I could accept that as an explanation. I can’t accept all this other nonsense of like, oh, it’s so minimalist, it’s so this, it’s so that. No, it’s trash is what it is. Worst thing of all, Gutenberg’s phase 2 is done. This is what it produced. Now they’re supposed to move on to multi-user editing. Can’t wait. At least it’s changing markup structure at almost every release.
2:29:50
Front page was even better than Gutenberg. For anybody that knows front page, the builder before Macromedia, Dreamweaver. Hey, don’t diss Microsoft Office. Many sites in the late 90s were successfully built with Word. That’s hilarious. Absolutely hilarious. All right. I got to get out of here in just a minute. We’re too late on this. I have actual work to do. But I like these comments.
2:30:13
Despite its shortcomings, I built my client sites with GV because creating accessible websites is not hard. The page builder often have inaccessible menus. Okay. For me, the first professional thing now I’m going back to MySpace. Only problem with Wix is that it’s truly not mobile friendly, no matter how much you try to make I mean, it’s Gutenberg, it’s got three breakpoints. How much can you really do? Something tells me that Matt Mullenweg is not going to sponsor any of your videos.
2:30:41
I don’t have sponsors. I don’t I don’t need sponsors. I don’t care about sponsors. That’s why a lot of it’s why you should love listening to this channel because I don’t have sponsors. Don’t care. It’s like none of the content that I make is made for like, oh, let’s make this specific group happy. I really I just say what it is that needs to be said. We’ll teach you how to build a website goes on to use nothing that a web dev needs uses or does exactly that’s automatic I Agree, it’s really made for being better than the old text editor But more for beginners to get a WordPress site up with a base theme Yeah, it’s really only use case any basic text of pages not making no it is though that that’s why they’ve got this whole FSE concept coming right It’s very fine for blog posts, simple pages, not for page layout, landing pages, no responsive controls.
2:31:41
Yeah, that’s the other thing, guys. I keep saying three breakpoints. There actually are zero. Native Gutenberg has zero breakpoints. You only get breakpoints when you’re using, I believe, like a theme that turns them on, right? So like the generate press theme activates breakpoint controls inside of Gutenberg. So the native editor doesn’t even give you like anything for breakpoint control out of the box.
2:32:18
Which by the way, I was editing the carts for the inner circle. Where am I? Am I, oh I’m in local? Okay, let’s go back here. So I was editing the shirt cart. Here’s the cart, right? Or maybe it’s forms I can’t Oh, let me let me save this for I get out of here. Okay, I’ll delete that later. So I go to shirt cart and I go to cart. Okay, I already saved it. It’s not the cart. It’s the is it the form? Sure cart form. Sorry, I’m new to Sure Cart.
2:32:51
Gotta figure this stuff out. All right, so I do this. Hey, okay. So, see these fields right here that are next to each other? I want them to stack on mobile. So I go to Sure Cart, column, stack on mobile. That’s a good option, stack on mobile, but you know, mobile is like, well, which mobile? There’s many mobiles.
2:33:19
So I’d like to kind of decide. But you can’t decide. And this is not a SureCard problem. This is just a Gutenberg limitation because Gutenberg doesn’t have breakpoints. There’s no controls for any breakpoints. And because SureCard is not a theme, it can’t add them for me. So you use something that’s Gutenberg. They want you to integrate stuff like this But they don’t give you the controls that are actually necessary to integrate stuff like this. So I was screwed I had to go write custom CSS to make it happen I Like this one, I love this one calm down. It’s only been five years years. Bricks, bricks 0.5 was 10 years ahead of Gutenberg. This is what I’m talking about. This makes me so happy to see you struggle to makes me feel like my troubles in Gutenberg are not abnormal. It’s not just you, my man, it is not just you. Okay.
2:34:18
Please no more. It’s painful. It’s too painful to watch. You’re right. Okay, best rant, enjoy this episode. I’m gonna get out of here. It’s an hour and 35 minutes. I really appreciate you guys for showing up, for sticking around, for being here every Wednesday at 11 a.m. for Web Design for Domies. If we need to do a Gutenberg specific rant video, let me know.
2:34:44
It was fun. As frustrating as it is, it is it is I have to try to make it entertaining because we have to laugh at all of this and we have to be lighthearted and we and we have to smile and laugh at some point because otherwise we would just cry. So it is what it is. But if you want a dedicated video on something like this, let me know. Other than that, I’ll see you guys next Wednesday. I’ve actually got another video planned probably for later this week or maybe over the weekend, but you guys will see me again soon. Don’t forget the channel name is Changing from Digital Ambition to Geary.co today or tomorrow.
2:35:25
Thank you guys for coming in. I love you. I’ll be back soon. Peace.
