0:00:00
So I think an important question to start off with is, why are we using a page builder in the first place? Why are we not coding every website by hand? Kevin, wouldn’t a professional code everything by hand? And I think the answer is fairly simple. We use page builders because it speeds up workflow, it takes away some of the tedious work that is involved in hand coding a website, and in many cases, it allows us to do things we otherwise wouldn’t know how to do.
0:00:24
And in many cases, it allows us to do things we otherwise wouldn’t know how to do. So there’s four languages primarily in the modern web design world, the types of websites that we’re going to be building. That’s HTML, CSS, PHP, and JavaScript. Now out of those four languages, PHP and JavaScript are the most difficult. And the good news is we can just push them aside. And the good news is we can just push them aside.
0:00:51
We don’t even have to worry about PHP and JavaScript when you’re using a page builder. So right off the bat, PHP and JavaScript are pretty much taken care of for you. That leaves HTML and CSS. The page builder is going to write all of the HTML for you. So that’s taken out of the picture. However, I do say that you need to know how to read HTML and you’ll see why in just a second. that you need to know how to read HTML, and you’ll see why in just a second.
0:01:16
You don’t need to know how to write HTML, but you need to know how to read HTML, and you should probably know what the output is supposed to be, and be able to inspect the page and see if the output is correct. That leaves us with CSS. Now the builder is going to write a lot of CSS for you, but there are things that the builder but there are things that the builder is not necessarily capable of when it comes to CSS.
0:01:42
So there are going to be times where you want to write the CSS yourself. So with CSS, you need to be able to read CSS. You need to be able to write CSS. So out of four languages, there’s really only one that you need to be able to both read and write. And that is CSS. And the good news for you is that CSS is the easiest of all of them, in my opinion. Okay. for you is that CSS is the easiest of all of them in my opinion. Okay so what we’re gonna do is we’re gonna take a look at what we’re asking the page builder to do. Can we verify the page builder is actually doing what we asked it to do? Because let me tell you right they don’t all do what you ask them to do and that’s very frustrating and we want to make sure that we’re using a builder that does what we ask it to do. And then I’m going to show you how to what we ask it to do.
0:02:25
And then I’m gonna show you how to actually inspect a webpage, which by the way, is one of the most important techniques for you to master. Because you’re gonna, it’s gonna be dozens of times when you’re building a website, where you’re like, it’s not working. Like something is broken, something is not going the way that I want it to go. You have to be able to inspect the page, you have to be able to see what is going on, find the problem, and then you can address the problem.
0:02:52
Otherwise, you’re gonna be one of these people going on, find the problem, and then you can address the problem. Otherwise, you’re going to be one of these people who runs to a Facebook group every five minutes and posts a screenshot of something broken on their site saying, how do I fix this? And really what those people are doing is they’re relying on somebody else to inspect the page and figure out what the problem is. I don’t want you to be that person. I want you to be empowered to inspect the page yourself, identify the problem, and then you’ll know how to solve the problem from there.
0:03:12
problem and then you’ll know how to solve the problem from there. So I’m going to go ahead and share my screen and what you’re looking at right here is Bricks Builder. This is a blank canvas. Bricks Builder is a page builder for WordPress. I also have Elementor, which is another page builder for WordPress. We’re going to kind of juxtapose these two against each other. In a lot of these videos, I will have two different page builders open and we’ll see how one page builder two different page builders open and we’ll see how one page builder behaves versus another page builder. We’ll do that more in the earlier stages and probably less as the course goes because it’ll become less and less important. But you do need to understand that these page builders are not the same in their output. And that brings me to my very first point. Point number one is I use a page builder because it speeds up my workflow. So I’m going to give you an I use a page builder because it speeds up my workflow.
0:04:03
So I’m gonna give you an example here of adding a section to a page. So I have added a section to this page, it happened like that. Like almost instantaneous it happened. Now I’m gonna hand code that exact same section and you can see if it takes me a split second or if it takes me a bit more time, right? But my secondary point here is, yes, speeding up is great, My secondary point here is yes, speeding up is great, but I only care about speeding up if I arrive at the same conclusion, which is high quality output.
0:04:36
If I get there faster, but the output is a jumbled mess and it’s a nightmare and there’s a lot of just stuff that doesn’t need to be there, then I don’t really want that outcome. I would rather use a page builder that speeds up my workflow, but gives me the same quality output. builder that speeds up my workflow, but gives me the same quality output. And so what we’re going to do is take a look at the two different page builders and see exactly how they stack up. And Bricks is going to be kind of my main page builder that we use. And then I’ll have another page builder open to compare. The reason I’m using Bricks is I feel that is the, the best page builder for WordPress at the time of this recording.
0:05:12
press at the time of this recording. It is number one in my estimation. It’s not the only page builder that’s acceptable to use. And I want to remind everybody that I’m not affiliated with any page builder. I don’t get affiliate commissions. I don’t get anything else. I’m going to get anything from these page builders. Okay. So I’m making this recommendation based on knowledge and experience and evaluation period. And there’s multiple page builders that you can use that are and there’s multiple page builders that you can use that are suitable for professional work, and then there’s page builders that are not suitable for professional work. Okay, so what we’re gonna do is I added that section, you saw it was basically snapping my fingers, it was done.
0:05:50
Now, if I was going to hand code that section, and this is gonna be your first introduction to both HTML and CSS, we’re diving right in. I’m not holding back, I’m not babying you, we’re diving right in to learning languages, okay? I’m not holding back, I’m not babying you. We’re diving right in to learning languages, okay? So what I’m going to do first is add a main tag. And this is important that all of your main content on a page is wrapped in a main tag. The minute that I added this section to this page, Bricks also wrote a main tag in the HTML that looks just like this.
0:06:21
The next thing that Bricks wrote was a section tag. And typically in Bricks, well, we haven’t styled anything yet, so we could just leave and typically in Bricks, well, we haven’t styled anything yet, so we can just leave it as a section tag. Now, you’re going to notice here in HTML, there’s typically an opening tag and a closing tag. The opening tag is the item, and then the closing tag is a forward slash and then the name of the item again. So I have a main open, a main close, a section open, a section close.
0:06:48
Now, inside of a section, there’s also an inner container, Now, inside of a section, there’s also an inner container, and that’s a very, very special container. All of these are boxes, and we’re going to do future tutorials in this course that dive deeper into all of these concepts. So if I gloss over anything, don’t get frustrated and say, oh my God, I wish you went into more. We’re probably going to go into more detail on that in a future lesson, okay? So all of these things are boxes, but they’re special kinds of boxes. All of these things are boxes, but they’re special kinds of boxes. So this has to have an inner box, and we’re just going to use what is called a div for this box right here.
0:07:22
So I need to have a div, and that’s got an opening and a closing tag. And then I can put something simple inside of this div, like an H1. And I’m going to say, my hero, and I’ll just say my hero section. How about that? So my hero section, and you can see it now printing on the page. My Hero section, and you can see it now printing on the page, but notice you don’t see any boxes on the page or anything like that. But why am I saying My Hero section? Because the first section of a webpage is typically called the Hero section of that page.
0:07:52
It’s a very important section because it’s what’s called above the fold. The person can see all of the content in it without having to scroll around on the page. So it’s quite an important section from a content standpoint, and thus it’s referred on the page, so it’s quite an important section from a content standpoint, and thus it’s referred to as a hero section. So, check out what I’ve got here. I’ve got a main, a section, a div, and an h1. Now, this little box that’s inside my section, that needs to have some special styling instructions added to it in order for it to behave appropriately.
0:08:24
What you’re gonna notice is the HTML is on the left What you’re going to notice is the HTML is on the left over here. I’m going to put styling instructions in a completely separate sheet. I’m not going to put my styling instructions here. I’m going to put my styling instructions over here. This is the CSS, the style sheet, and this is purely for styling things. HTML defines the structure of a page. CSS defines how those structural items are styled. defines how those structural items are styled. Think in terms of spacing and colors and all of that stuff, right?
0:08:55
So what I’m gonna do is I need a way to target this div because I don’t wanna style all divs the exact same way. I want to basically label this div, give this div a label that I can then target with my styling so that only this div or divs that are like it, divs that share the same labels, divs that are like it, divs that share the same labels, get this specific styling that I’m going to be adding. So I’m gonna add what’s called a class. So there are classes in CSS.
0:09:24
We’re giving you an intro now to CSS. As I’ve explained, you’re gonna be learning HTML and CSS throughout this course. I’m not doing dedicated modules to HTML, dedicated modules to CSS. I think it’s actually better if we learn HTML and CSS to CSS. I think it’s actually better if we learn HTML and CSS as we work through the course. Okay, so I’m going to assign a class to this called container. So I’m going to give it a class called container. Now there’s IDs. I could also say ID equals and I can give it an ID and this could be container one. The difference between a class and an ID, there are a few different differences, a few different differences, but or I say a few different differences, a few differences. So an ID is specific to one singular item in the HTML. So if I have two of these containers, they both can’t have the ID of container one. That is bad practice. Okay now with classes, let me take off, let me say this is going to be container two. Notice the class is shared and that’s perfectly fine. The container Notice the class is shared and that’s perfectly fine.
0:10:28
The container class can be used on an unlimited amount of divs in my website, that’s totally fine. But an ID needs to be unique to each element. Now, styling that is added to an ID, another big important thing here, styling that’s added to an ID will override styling that is added to a class, okay? So that’s one other important thing to note. Okay, so that’s one other important thing to note. But right now, we’re not even going to worry about IDs.
0:10:54
I’m going to remove the IDs, and we’re just going to be working with this class called container. So what I’m going to do over here is I’m going to target that class called container. And so when I’m targeting a class, I use a period before the name. If I was targeting the ID, I would use a pound sign. Some of you youngins refer to this as a hashtag. pound sign. Some of you youngins refer to this as a hashtag. It’s actually a pound sign where I’m from. But I digress. So I’m going to use a dot and then container because we are targeting the class. And then I’m going to do some special things to it. First of all, I’m going to give it a width of 100 percent and I’m going to give it a max width of 1366. That is my content width of my width of my website and then I’m also going to give it a margin inline of auto.
0:11:41
And you’re going to see that this content jumps over a little bit because now what I’ve done is I’ve defined a specific container to contain my content to a specific width on my website. What you’re going to notice with a lot of websites, like if I go to my website right here, the content is not touching the edge of the screen, right? It’s not even near the edge of the screen. touching the edge of the screen, right? It’s not even near the edge of the screen. There’s this wide gap over here, but it also ends before it gets to the other side of the screen.
0:12:09
There is a container running right down the middle of this page that contains your content. And it also ensures that all of your content is aligned perfectly, right? On both sides of your website, right? So this content, the edge of this card aligns with this content down here, which aligns with this card. So this content, the edge of this card aligns with this content down here, which aligns with this card and everything is in great alignment all the way down the page. That’s created by this inner div that’s inside of my section. Now we’re going to do a whole lesson on sections where we break this down, but for right now what I’m going to do is just add these specific instructions so that you can see, oh, we can label things with a class, with a class, we can style those labels in our CSS and we can get the outcomes that we’re looking for.
0:12:55
I’m gonna add a border of five pixels, solid red, just so you can see where this container lives on this page. And now you can see that’s why it’s pushing my content over from the edge. It’s contained inside of this box. The margin inline of auto basically said, hey, I want auto margin from the left, auto margin from the right, which basically means get away from the left, get away from the right.
0:13:12
auto margin from the left, auto margin from the right, which basically means get away from the left, get away from the right. And when it gets away from both sides equally, it ends up dead in the center of the page. And that’s exactly what we’re looking for from that inner container. Now, I’m gonna remove the border right here. I’m gonna go ahead and hit save. And I want you to see that what I did in basically like a second, a split second in bricks, right?
0:13:38
Let me do it again, just so you can remember how fast it went. a split second in Bricks, right? Let me do it again, just so you can remember how fast it went. I said, I wanna add a section. So I said section, bam, and I’m done. So we’re going to go ahead and preview this on the front end. You don’t really, well, let me put my header in there as well, my heading.
0:13:54
So I’m gonna put my heading in there. I’m gonna make it an H1 heading, and then I’m gonna hit save. I guess we can make it say the same thing, right? My hero section, okay, and then I’m gonna hit save, and then we’ll view that on the front end. My hero section, okay, and then I’m gonna hit save, and then we’ll view that on the front end. So there’s my hero section, and if we look in the HTML, look, it looks pretty much exactly the same.
0:14:11
So I had to write all of this, and I had to write this in order to achieve what I achieved in Bricks without writing anything and just clicking a single button, basically. So you can see how a page builder immensely speeds up our workflow, and how all of these speed improvements and efficiencies Immensely speeds up our workflow and how all of these speed improvements and efficiencies add up over time across the entire website build Okay So the next thing that we’re going to look at is the output because remember what I said if we speed up But we arrive at a terrible destination We arrive at an absolute mess with a lot of spaghetti going on that we have no idea what we’re looking at when we inspect it It’s not the code that we would have written if we were writing it by hand at when we inspect it. It’s not the code that we would have written if we were writing it by hand. I don’t want to end up in that place. I want to end up in a place where I got it done faster and it’s the right output. It’s the output that I asked for. What we’re gonna do is now learn how to inspect a page. Let’s see what the builder did. We asked the builder to do something. Now let’s see what it actually did. So I’m going to right-click. Now I’m doing this in Chrome.
0:15:12
right click now I’m doing this in Chrome. I would highly recommend you stick to Chrome or Firefox for inspecting your sites. So I’m going to go ahead and hit inspect and it’s going to bring up this window right here. And what this window is going to show me is the HTML and the CSS that were involved in building the webpage that I’m building. It’s the HTML that the builder wrote and the CSS that the builder wrote. that the builder wrote and the CSS that the builder wrote.
0:15:39
And we’re gonna see if the output of this bricks HTML is the same output that I wrote by hand. So what we’re gonna do is we’re gonna open our body tag. And then you can see this little arrow over here allows us to open up a DOM. This is called the DOM, it’s the document object model. And so these are all DOM elements and it allows me to see which DOM elements And so these are all DOM elements and it allows me to see which DOM elements are nested under this element. If things are a little hectic, I can always, you know, minimize a DOM element and then I don’t see its children. Like if I, I don’t care about what’s in the head section right now, so it’s minimized. If I have this open, well, there’d be a lot more stuff that I have to sift through and look at.
0:16:21
I don’t want that to be open, so I’m gonna collapse it and I only want to see what’s in my body. and I only wanna see what’s in my body. Now I’m gonna come down and hey, a main tag, right? That kinda looks like this main tag that I wrote right there. So now I’m gonna go back and we’re gonna open the main tag and let’s see what child elements are underneath it. Hey, look at that, we have a section and it has a class of BRXE section. Now the classes don’t really matter, they’re just identifiers, they’re labels.
0:16:49
What I’m most concerned about is the actual HTML identifiers, their labels. What I’m most concerned about is the actual HTML that’s being generated, right? So I’m going to come over here and I’m going to see, hey, there is a section right there. Okay, so we’re off to a good start. Inside of that section is a div and it has the class of container. So now I’m coming over to my code and I see, hey, I also have a div with a class of container. So we’re doing very very well. Now I open that div and I see we have a h1 that’s my heading and it says my hero section it has a closing h1 tag. Hey and that’s it that’s all it wrote when I created that section in the builder and added the heading to that container right there. It looks exactly the same. So in this case Bricks did a fantastic job of doing what I asked it to do and getting job of doing what I asked it to do and getting me from point A to point B faster with less hassle because even though I know how to write this HTML, there’s the question of, do I want to write HTML all day long?
0:17:48
Do I want to write CSS that should kind of be automatic all day long? Feels very tedious. I don’t want to do tedious work. I just want the builder to do all that for me so that I can focus on doing the more important parts of the website design process, right? of the website design process, right? So that’s why we use a page builder. Now, now, like I said, I wanna reiterate this. If the builder can’t get the job done, I think we’re gonna kind of run into some problems, right?
0:18:15
Because there are a lot of inefficiencies that can be created. These inefficiencies with bad HTML output, bad CSS output can make websites harder to style. They can make websites harder to inspect. So whenever there’s a problem, make websites harder to style, they can make websites harder to inspect. So whenever there’s a problem, you’re going to spend 10, 20 extra minutes trying to figure out where the problem is occurring because the code is so messy. You’re having to decipher all of this nonsense that’s going on.
0:18:41
When code is cleaner and it’s better written, it’s much easier to inspect. It’s much easier to identify and solve issues. But there’s implications beyond that. There’s performance implications. but there’s implications beyond that. There’s performance implications, there’s accessibility implications, there’s a lot of implications. Oh, so, and by the way, it’s just, it’s not too much to ask.
0:18:58
There are builders that can output clean code. So why would we use a builder that can’t output clean code? And remember, I gave 20 things that a page builder must be able to do in order to be considered a professional tool. The clean code output thing is only one of those 20 items. tool, the clean code output thing is only one of those 20 items. So if a page builder fails at that, yeah, that’s bad. But what if a page builder now fails at seven of those 20 things on top of having that bad code output?
0:19:26
Now we’re in a situation where it’s like, why are we entertaining this builder at all? We definitely need to use a different tool. So here’s the code I wrote. Bricks, we’ve already determined clean output as well. It did exactly what I asked it to do. We’ve already determined clean output as well. It did exactly what I asked it to do. Now we’re going to do the same exact thing in Elementor and we’re going to see how fast does it happen? What is the code output? You know, again, I’m not insulting your family members here. Let’s just follow along and see what the objective difference is. So the first thing you’re going to notice is there is no section element like there was in Bricks. So what I’m going to do is I’m going to add the container because that’s the only option in bricks. So what I’m going to do is I’m going to add the container because that’s the only option that I have. So I’m going to add a container to this page and then it looks like there’s already an inner wrapper inside of that container even though I can’t see it over here in my structure panel I know it’s there. I’m going to go ahead and I’m going to add a heading and let’s go ahead and drag that drag that in. This is going to say my hero heading and I’m just going to update that.
0:20:29
I’m going to check out what we’ve got going on the front end and there we are. So one difference right off the bat that you’ll notice is Elementor appears to be trying to do extra things for us, right? When I coded this by hand, my heading was black and when I did this in Bricks, my heading was also kind of a blackish color, like a dark color. color like a dark color but in Elementor it’s got this like light blue heading going on here and I didn’t really ask for that to happen something we would have to inspect and see a where is that coming from but it’s already kind of doing things that I did not ask it to do now the next thing is I am going to I like visually other than the fact that the headings blue I mean it looks exactly the same so let’s go ahead and inspect and see what the builder is and see what the builder is actually giving us in terms of output.
0:21:17
So we’ve got an H2, okay? So I already see that I need to change that from an H2 to an H1. So no problem there. I’m just gonna switch that up. I’m gonna hit update. I wanna make sure it’s all exactly the same if we can get it there. So I’m gonna inspect this and I’m gonna try to find our section.
0:21:34
So where is our section? And look at this. I’m not seeing a section. section and look at this I’m not seeing a section. Why are we not seeing a section tag the way that we see it right here and the way that we saw it in Bricks right here? Well very simple there was no section element I just added a container which is just a box and that container doesn’t have a section tag so what I need to do is click on that and I need to come down to additional options and choose section and then I can update and then I will probably see a section section and then I can update and then I will probably see a section output. So one important thing to know because it didn’t have a section element I had to do an extra step. Now a section is a very very common thing you’re going to be adding sections all the time. So think about this you always have to change the tag remember to change the tag to section on every section container that you want to add. It’s a little bit of extra work now all of a sudden the page want to add, it’s a little bit of extra work.
0:22:26
Now all of a sudden the page builder is not helping me as much as I wish it was. But here’s the section now, I can see it. I’m also missing though a main tag. It’s not putting a main tag on my page for me the way that it should be. And honestly, in Elementor, I’m not an Elementor expert, you know, I’m not sure where I would need to go to make sure that that main tag starts to show up. In Bricks, I didn’t have to decide that at all.
0:22:51
Bricks just knew, hey, you need a main tag show up. In Bricks I didn’t have to decide that at all. Bricks just knew, hey you need a main tag to wrap your main content so here you go. In Elementor it’s clearly not doing that so I would have to spend more time now poking around figuring out how to get that main tag to show up. But let’s look inside of the section now. So I’m going to open up this section and I see an inner div right there which so good, so far so good, right? I’m going to open that up and then oh well I don’t I’m gonna open that up and then, oh, well, I don’t see an H1. That was what I was kind of hoping I was gonna see next because remember when I wrote it by hand, inside of my section was a div and inside of the div was an H1.
0:23:25
But on Elementor, inside of my section is a div and inside of that div is another div. And so I’m gonna open that up. Oh, and then there’s another div inside of that. And then I’m gonna open that up. another div inside of that, and then I’m going to open that up. And then what is this? This is an inline styling block. So it’s actually taken CSS and injected it into the HTML, which is not a fantastic practice if you can avoid it.
0:23:55
So that I didn’t ask for, doesn’t need to be there in my opinion. And then finally I get to my H1. And so you see that with Elementor, And then finally I get to my H1. And so you see that with Elementor, we asked it to do something very, very simple, and it was unable to do that efficiently. So the efficient output is what I wrote right here. The efficient output is what Bricks generated.
0:24:18
Elementor generated twice the amount of DOM elements for a very simple request. So I think you can imagine as the simple requests pile up, simple request. So I think you can imagine as these simple requests pile up, we’re constantly doubling the DOM elements. We’re constantly re-nesting or, you know, ultra nesting different items. There’s gonna be other problems that we encounter down the road, but I think you can already see if we go back to that standard of, okay, if it speeds up my workflow, but gets me to a quality outcome, I’m cool with that.
0:24:48
But if it speeds up my workflow and creates a gigantic mess on the backend, with that, but if it speeds up my workflow and creates a gigantic mess on the back end, I’m not so cool with that. That’s not what we’re asking the page builder to do. We’re asking the page builder to just do its job correctly. It’s like if you hired somebody to come in and write HTML and CSS for you, and they wrote all this garbage code, you’d be kind of like, yo bro, what’s going on with you?
0:25:10
Like, you know, we need you to do better. Yet we use these page builders that are doing that exact same thing, and we’re just like, better yet we use these page builders that are doing that exact same thing and we’re just like, Oh, this is the best page builder ever. This, this should be the most popular page builder in the world by far, obviously. And it’s like, obviously I’m not so sure. I’m not sold, right? I want the page builder to output what I asked it to. Okay, so now what we’re going to do is spend a little bit more time in the inspector. So we need to learn how to use this little tool right here. Again, We need to learn how to use this little tool right here.
0:25:39
Again, dozens of times a day on the websites that you build, you’re going to need to inspect the output. And if you don’t know HTML, and you don’t know CSS, and you don’t know how to use the inspector, you are going to be completely lost. You will not be able to solve challenges as they arise. So let me explain again. On the left-hand side over here, now this is if you have your window, Let me explain again, on the left-hand side over here, now this is if you have your window, your inspector docked at the bottom of your window.
0:26:07
You can choose where this is docked. I can dock it to the left, and I can also dock it to the right over here. I can change its size like this, right? And so if it’s docked on the side, I have the HTML on top, I have the CSS on the bottom. A lot of times I like it docked to the bottom, so I’m gonna dock this back on the bottom. A lot of times I like it docked to the bottom, so I’m gonna dock this back on the bottom.
0:26:29
Then I have the HTML on the left, I have the CSS on the right. Now when you’re in the inspect mode, depending on what browser you’re using, in Chrome this is very easy, you can toggle whether you’re looking at the desktop view or the mobile view. And then of course you can use this little handle right here to change the size of the device you’re previewing on. of the device you’re previewing on.
0:26:51
And this is very important because the CSS is going to change based on the device size, right? We have to give different styling instructions to make a website look different on mobile than it does on desktop. So sometimes you’ll have a problem that’s on desktop and you’ll need to inspect it there. Sometimes the problem will only exist on mobile and you’ve got to inspect on mobile and see what the problem is there.
0:27:15
Okay, so I’m gonna put this just for now and see what the problem is there. Okay, so I’m gonna put this just for now into desktop mode and we’re gonna take a little bit more of a look at the inspect panel right now. So I’m gonna go ahead and click on my, and this is in Elementor, I’m gonna hop back over to Bricks here just for a second because this is gonna be easier for you because again, this is a clean output, it’s very easy to inspect and understand what is going on.
0:27:38
If you have a dirty output, inspect and understand what is going on. If you have a dirty output, then it’s gonna be much harder to figure out what is going on. All right, so I’m gonna click on this and I’m gonna highlight my section right here. So I have the HTML selected, and then over here on the right hand side, you can see all the styling that has been added to this section.
0:27:55
And builders will add a bunch of default CSS styling to various elements. And for the most part, you kind of need to know what’s going on. elements and for the most part you know you kind of need to know what’s going on but if there’s no problem occurring then it’s really not a big deal but we do want to be able to kind of read these and see what’s going on here so for example there must be a class called BRXC section assigned to the section that I have highlighted how do I know that it’s there well two reasons one I can see the dot BRXC section which means a class has been defined styling has dot brxc section which means a class has been defined, styling has been added to it. And then if I go over here in this in the HTML I can identify, yes there’s the class right there added to the section just like you saw me write it right here with this div. So it would be the same thing if I said class equals section. Okay now this is kind of a redundant class because because the section is already a section.
0:28:52
And in CSS, let me give you one other tip. We can style classes, we can style IDs, we can actually style direct HTML elements as well. So if I said section with no period and no pound sign, I can also do things like I can say border, five pixels solid red, and there you go, my section got a border. And it did that without needing a class and without needing an ID. got a border and it did that without needing a class and without needing an ID. Very cool, right? So we can style HTML elements. We can style classes. We can style IDs. I can take off this class.
0:29:25
Just to prove to you that that border sticks around, even though this has no class and no ID. OK, so I’m just going to remove that for right now. I’m going to go back to our inspector. OK, perfect. So we’ve got our section selected. Here Okay, perfect. So we’ve got our section selected. Here are some classes. Now what’s cool in the inspector is you can actually turn off different styles. So if you uncheck these boxes, you can see, Hey, what’s going to happen to the styling of this element if it doesn’t have this instruction, for example, or doesn’t have this instruction, for example. Now typically you don’t want to be just turning stuff off willy nilly, right?
0:29:59
If there’s a specific problem that you’re trying to identify, If there’s a specific problem that you’re trying to identify, you can toggle certain things on and off to see if they are causing the problem. Another really cool thing is you can just write your own CSS directly in the inspector. So before you do things in the builder, if you want to play around with the styling of an element and just see what looks good, or you want to fine tune some things before you actually go set it inside the builder that way, you actually go set it inside the builder that way, then you can just start writing CSS right here in the builder. For example, what if I wanted to see, Hey, what happens if I add a background color of red to that container?
0:30:36
Then you can see, Hey, that’s what the container looks like with a background color of red. And what’s cool about this is it’s not committing any sort of styling to your actual website. The minute I refresh the page, The minute I refresh the page, everything I’ve done in the inspector is gone. And I have a new clean slate based on what was actually saved inside the builder. And the same way that I just wrote that CSS, okay? So again, I’m going to show you background color of red.
0:31:07
I could go do that inside the builder and the builder will write that CSS for me. So if I want the builder to actually write the CSS for me, I can hop over into the builder. So if I want the builder to actually write the CSS for me, I can hop over into the builder, I can select an element, and then I can just, let’s say, add that exact same background color of red, and the builder will write that CSS for me.
0:31:27
I’m going to go ahead and refresh the page. You can see that that section is red. I’m going to go ahead and inspect it, and I want to see where the styling is coming from. Well, look here. It actually added an ID, and it added the styling to that ID. It actually added an ID and it added the styling to that ID. Why did it add an ID? Because I did not assign a class to that element.
0:31:46
We’re gonna deep dive classes and IDs and how styling should be applied to elements. But because I didn’t add a class and because I don’t want every div to be read, Bricks said, well, we need to create an ID for this and then we need to assign the styles to that unique ID. That way only this container right here that unique ID. That way only this container right here will have a background color of red and no other container will have a background color of red unless I go choose that container and add red to that one as well. Right there was no other option for bricks because you can style HTML elements. I could style the div but then all my divs would have that style. I can create an ID that’s unique and I can add styles to that or I can create a class and I can add styles to that.
0:32:24
or I can create a class and I can add styles to that. I didn’t create a class and it can’t style every div the same way, so it created an ID. So this ability to know where styling is coming from is very important, to know the difference between an ID and a class and styling the actual HTML tag. We know that we can write CSS inside the builder. You can actually write HTML inside the builder as well.
0:32:48
I can change that from a section to a div or back to a section. I can change that from a section to a div or back to a section. I can actually move things around I can Duplicate right so if I wanted to duplicate this element now, I can have two sections on the page I can actually drag elements around inside this inspector There’s a lot that you can do in the inspector now the next thing I want to take a look at is I’m gonna Grab this inner container right here this inner container right here. And I want you to note the colors that are on the page up here.
0:33:17
And I wanna scroll down until we get to this box. And you’re gonna see right here, there’s green, there’s yellow, and there’s orange. Orange is the margin. Then we have yellow, which is representing any border that happens to be on this element. Then there’s padding, which is green. And then there’s the actual content of the box, right? and then there’s the actual content of the box, right? And so why are these things important?
0:33:43
Well, we have to know what margin is, we have to know what padding is. Margin is spacing on the outside of the box, padding is spacing on the inside of the box, and then you probably are familiar with what a border is as well. And then you have the content itself. So if I’m trying to diagnose spacing issues, I need to know, well, is the spacing coming from margin? I need to know, well, is the spacing coming from margin?
0:34:03
Is the spacing coming from padding? Is there a border on here that I can’t see because it’s the same color as the background? What exactly is going on? Well, this box right here kind of shows you. And so you can see there’s no border issues with this box. There’s no padding on this box. And then there’s the content, but there is margin. And it highlights it right there. margin and it highlights it right there. You can see the orange going left to right on the sides of that box. And so now we know, hey, there’s a margin of 268 and a margin of 268. But I never told this box to have a margin of 268. And if I go up here, I’m not going to see a margin right or margin left of 268. Where is that 268 coming from? Well, it’s actually coming from the margin left coming from? Well it’s actually coming from the margin left and right of auto and it happens to be that on this screen size is 268 pixels from the edge of my content to the edge of the screen. As my screen grows or I look at this on desktop it’s going to have a different calculation for that margin. So I’m going to scroll down now it’s 410 because my screen is wider right. So sometimes you’ll have dynamic values here and sometimes you will have static values have dynamic values here and sometimes you will have static values and you’re going to learn more how to differentiate what this stuff means as we go through the course.
0:35:22
But I’m just giving you an introduction to the inspector because you need to know that this box exists down here, what these colors mean, how you can isolate where certain spacing is coming from. And I’m going to give you one last big tip, by the way, we’re going to do much more, much, much more with the inspector as the course continues to develop. By the way, we’re going to do much more, much, much more with the inspector as the course continues to develop. But let’s say you’re having trouble finding something in your HTML. You know, as as pages get more and more complex, sometimes you have trouble like, I can’t find that element in the HTML in order to inspect it. So I’m just going to give you a little trick.
0:35:57
All right. So what I’m going to do is I’m going to go into the builder. And let’s say I was having trouble finding this H1 right here. Like, where is that H1? Let’s say I was having trouble finding this H1 right here. Like where is that H1? I want to inspect it. I want to see what’s going on with it. So I’m just going to add a class to it. Remember a class is like, it’s like a label, right?
0:36:12
You’re just adding a label to this item. And that label is going to get output in the HTML. And you’re usually adding a class because you want to add styles to the label. But in this case, I just want to be able to find the label. And I’m going to remove this when I’m done finding it, when I’m done inspecting it. the label and I’m going to remove this when I’m done finding it, when I’m done inspecting it, I’m just adding it basically temporarily to help me find that item in the DOM.
0:36:33
Okay. So what I’m going to do is hit save. I’m going to go to the front end, I’m going to refresh and then I am going to come down here in my inspector and hit command F and when you hit command F it says find by string, selector or path. So what I can do is say inspect and then look at that. inspect and then look at that it finds the class that I added to the element and there is my h1 Revealed immediately so I don’t have to poke around in here now. I wouldn’t recommend doing this all the time You know because it is a hassle to add the class and go remove the class Just use it when you you’re having trouble you just you need like search and rescue You’re not finding the HTML item that you want to find Go ahead and add the inspect class to it and then go search for it in the DOM now you want to find, go ahead and add the inspect class to it and then go search for it in the DOM.
0:37:17
Now, there’s one caveat here, okay? You have to be using a builder that does things the way that it’s supposed to do them. Watch what happens when I try to do this in Elementor. So I’m going to go ahead and jump into Elementor. I’m going to click on this heading and I need to go to advanced and then I can come down here, I can go to custom CSS I believe. Now where is it? Layout, right here, CSS classes. custom CSS I believe now where is it layout right here CSS classes so I can say inspect and then I will update this and then I will go to the front end I will refresh command F inspect let’s find it there it is right there but wait a minute that’s not my h1 I was trying to find my h1 right I put the class on Why is this here?
0:38:03
So let me dig, there’s my H1, but wait a minute, the inspect class is not on my H1. It’s actually one, two DOM elements above on the grandparent element of my H1. And this, in my opinion, is an absolute travesty. I’ve said on, I did a live stream the other day where I said in terms of CSS, like we were all living in CSS land, I did a live stream the other day where I said, in terms of CSS, we’re all living in CSS land, you should get prison time for doing this.
0:38:31
I mean, this is insane to me that a builder is doing this when we ask for something as simple as, hey, here’s my H1, attach a class to it, please. There’s implication in terms of identifying elements, implications in terms of styling properly, just lots and lots of things, properly. Just lots and lots of things, hassles and roadblocks and challenges that are created by this that we don’t want to have to deal with. And once again the question is, is it too much to ask for the builder to do it the right way?
0:39:03
I don’t think so. We have builders that do it the right way, so it’s clearly not too much to ask. It’s just terrible, terrible practice, right? So while this may help you in certain builders, this little inspect class technique, it’s So while this may help you in certain builders, this little inspect class technique, it’s probably not going to help you all that much inside of Elementor because Elementor does not assign the class to the correct item in the DOM.
0:39:25
So I’m going to go back to camera here. We’re going to cut this lesson. We don’t want these lessons to get too long and drawn out. I want to keep it nice and digestible for you. But this was a good introduction to why do we use page builders? introduction to why do we use page builders? What is the page builder doing when we use it? Writing HTML, writing CSS for us. We talked about PHP and JavaScript about how we don’t really have to worry about those and we need to know how to read HTML, but not necessarily write HTML. We need to know how to read and write CSS and we’re going to be learning those more throughout this course. We’re only scratching the surface.
0:40:00
scratching the surface. We also talked about inspecting pages and how important it is to be able to see what’s going on, identify problems and areas where issues are occurring or where styling happens to be coming from so that we can address any challenges that arise. So you’ve got a good introduction to the inspector. We’re going to dive deep, deep, deep into all of these areas, but we can’t do it all in one video. in one video. So next one is coming in hot and we’re going to continue learning about page building 101. Cheers!
