Video Summary

Alright, so as we begin optimizing every section of our homepage, let’s just start off by doing the slider section first and then we’ll just move our way down. So I want you to do is while you’re in the Page Builder if you click on our slider, remember that the revolution slider or a slider revolution, section only allows us to choose which slider we want, and maybe some advanced CSS options. So I want us to do is go over into our slider revolution and just open up on the first page. 

Once you’re here, what I want you to do is is if you hover over this little TV icon, you’ll see desktop, notebook tablet mobile. So I want to make sure that each one of these are right before we start, so that way we can optimize for each individual section. But before we hop in and start doing that, I do want to show you that we have as if you click on this little gear and you see modal, General Options and we click on layout where it’s that computer that laptop and mobile device icon. If we scroll down, and we see we see basically what the generic size dimensions are for each device. So for desktop, we have set 1270 pixels by 680 pixels. 

Tall so if you kind of look at the bottom, this is how tall this is. And that’s how wide this is. And if you’re talking about the little dotted lines, right? That’s kind of the basis of that this section goes off of same thing with the brown with the or the notebook. This is the this is the basic width and height and so on. But if you look at this little designation above it says browser width. It says pretty much that this section will look the same until 1224 pixels. Okay? Now the notebook will work pretty much the same between 1020 23 pixels to 778 pixels. And this section will look good between like the things that you’re editing will look like that between 770 pixels to 480 pixels. And the minister was saying for the mobile device as that for 480. Pretty much 479 And below is what this section is going to look like. Alright, so just keep that in mind as we move forward move doing each section. So usually what I like to do is is that we we have these three slides and basically we optimize that for this top section. So what I will do is I’ll go over here to notebook and do is I’ll click on here and go okay, well this section. 

This section isn’t looking that great things are kind of clumped together. And you might not be seeing what I’m seeing because each one’s kind of really like a snowflake. That when it it just moves things in different directions when you’re trying to optimize it. So what we’re just want to do is want to make this look good. So what I want to do is I’m going to kind of just drag this over just a little bit, and I’m gonna move this up here. I’m gonna move this up over here. What I’m gonna do too is I’m gonna try to move this out from the exact side. 

So for instance, I kind of have to click a few times and then I’ll get the little arrows to come up or if I click down here, sometimes let’s do this one more time. All right. Boom. I think that looks great. So what I’ll do now is I’ll come back over here, and what I’ll do is I’ll just kind of go back back the other way. So I’ll just stay on this one. I’ll drop it down to tablet, tablet view. Okay, so we’re getting a little bit of space right here. This move this out a little bit, but it’s okay, we made this overlay really, really big. So all we got to do is just kind of just drop it down. And as long as everything we’re seeing is, you know, it’s got that kind of dark background over it. We’re good. So what we can do is just click on the title right here, just so we can highlight it, because if you click if you click on the shape is once it’s covering everything, so it’s hard, you can’t click through the shape, if that makes sense. So having to go in here and highlight the title. Now that that the the opacity shape behind everything. So now what I just want to do is I’m just going to move this up a little bit. I’ll move this down. 

And what we’ll do is is that okay, so for instance, if this is our shape right here, this is kind of formatting setup. Now if we use this little double arrow, white circle, icon at the bottom, it changes the font size, but what if we want to keep like a certain font size, but we don’t want it we kind of want to rearrange it. So what we do is we’ll, we’ll take we’ll use like kind of your more traditional circles up here to sizes so if you take this and size this down. What this will do is is that it will force the text to go below. And what we can do now is we can probably put this car back here, but this I’m guessing kind of right around here. And let’s just let’s just see what let’s see how this goes. We might have to do the manual route or restyle it. I think this will be okay. But we’ll do this all at once. So from here let’s This one seems pretty simple. We can just move this up this over this here and maybe we can move the picture over just a little bit. Alright, so I’m gonna do is I’m gonna click Save. And then before we hop over, I want to I want to remember what our dimensions are going to be for this. So I’m gonna click here, go to layout, and this one is 777 between 480 So what I’m gonna do is I’m gonna put in 777, Enter, and then I’m going to refresh. Let’s make sure we just save this one last time, just to be sure.