Video Summary

Alright, we’re about to build our first slider revolution every time I duplicate, like we did in the previous lesson, and then I go in and I start playing around with different images, that maybe different backgrounds. I’m gonna really try to find how are you going to transform this slide into what I want or what I want or need to portray. 

So this is where you start thinking about, you know, more time than now that we’re going to put in product promotions, or your top services that you offer, or the ones that are most popular are the ones that you want to use. This is the first thing that you’re using to see when they hit your homepage. So what is the most important usually that’s just talking about your product or services. So, with that in mind, we’re gonna hop in and we’re gonna start playing around. So the first thing I always try to play with first is the background or the biggest feature. So the background for this slide is a nice gray background we got a lot of options. 

We can change the behavior while different cause attacks you know, we could add different pictures, different icons, hold on for the stop and I think it was all working on to worry about things clashing with colors. 

Background using for a background image. So what I’m gonna do is I’m gonna hop into styling this photo first. 

So how do we see what this looks like when we have it saved on our website. So there’s two options. To do this. You can click first click save, make sure that you’ve actually saved and then another thing you can do is click on preview and you will be able to see the slide for what it is. But the only problem with this is that it’s a very good representation of how it’s going to look. Sometimes I like to see how it’s going to look on the actual web page. Let’s see how we can set that. So we’re going to come to the rehab and save what we’re gonna do is we’re going to come to my just your homepage right where you click you can just click auto mechanic rose, and you will land on this page. Well, why aren’t we seeing the kind of guy looking under the hood? That’s because we copied this slider. And what we’re going to want to do is we’re going to want to make the slider option that copy. So if you click on this and you don’t see copy, just refresh the page. 

So now what we’re going to do is we are going to click on this title or heading, and once you’ve clicked on it, it will highlight and it usually goes back into the Layers option that you’re currently in. So we in this option, we were working with a style on the background image. With this one, we just put you right to style, but what we want to do is play with the content. So if you click on content you’ll have this little open text area. This is where you can punch any kind of headings. 

Let’s just say today, you know, this is a pre-booked appointment and we’ve even put a exclamation point. Now if we wanted to, we can go over here to style and this is where we can change the colors a little bit. And I think that colors just a little bit and so what I’m gonna do is I’m gonna scroll down if you click on style and you’re the item or the element we’re looking at, as highlighted and you scroll down you’ll be able to tell the different colors was associated with so this is just BG background color. I just want to make this a little bit more blue. So what I’m gonna do is I can kind of take this over and just kind of rotate it around. Now if you are building this site out for yourself, I would suggest using coolers, T O L O R to be able to find the exact colors you’re using that over and over again but just for this example, I’m just having a little bit and just kind of used fuse from.

While we’re working on this if you come over here and you got to slow mouse, that’s the hover. So now if we click on hover and we scroll down, we can see that the text color is white and the background color is this dark blue. So now if we click on here let’s just choose it to read and see what happens. So as you’re as you’re within the hover portion, it doesn’t allow you that hover effect because I want to show you what that color is going to look like. So I’m going to click on this blue again but I’m going to kind of make this a little bit a little bit darker. What I’m gonna do is I’m gonna play with making this just a tad lighter. And I’m gonna click on this arrow to make it okay. And what I’m going to do now is just hover over it and see the different color changes, which is cool. Let’s go back to let’s go back to style. And what we can play with here is the font size. So this is the top one right here is just more or less the the overall font size, let’s just change it from 16 to 19. And you have to click out if you want you know once you hit you gotta hit enter or click out for it to work, but I think 19 is a very good very good size for that. Now you can make these different. You can make it super thin. I think 700 was the bold was working. You can play with different sizes for your spacing. 

By all means, if you’re in here, play around with stuff you’ve already made a copy of so you can break as much stuff as you want and rebuild it. So let’s just say that this is looking like a pretty solid slide. So we’re going to click on Save. And what we’re gonna do now is we can just go back to the homepage, and we can click Refresh because we’ve already updated into our new copy. 

I think that’s a pretty good slide to I think go back I think that for right now that we got some we got some nice, the nice title we got some explanation paragraph and we got a button. I think we can pop on to the next slide and buy money.