‫hey whats up guy and
‫Welcome back.
‫So in this video, we're going to be now talking about basically building a different home page, because
‫you can see this is actually the home page that we created with the free version of the elementor
‫And now we've got the pro version.
‫So why not make the full use of it?
‫Okay.
‫And trust me, after you will design this home page, you will be in love with the elementor pro and
‫you will also be in love with the Web site that you will be building.
‫And a special interest will be developed in the designing, basically in the UX/UI of the Web site.
‫And you will definitely be likely to go in that particular field because this is really a very amazing
‫field.
‫Okay.
‫And that's called a UX UI.
‫Now, let's go to let's talk about a design that we can do with the elementor.
‫And you can and there is basically endless possibilities how you think you want to build.
‫You can just build it that way.
‫So now let's go to let's wait for that.
‫First of all, we will be creating a home page.
‫And that's going to have a slider instead of this particular thing.
‫Okay.
‫And then we will be showing the categories using the call to action feature of the elementor
‫And then we will be adding the extra stuff that we added basically when we were building our site.
‫One dot itazneel
‫So if you'll look at a site when you can see that we build out using the free version of the elementor.
‫And that was possible.
‫But it 's.
‫But building an e-commerce Web site using that is not possible because there is not some stuff over
‫there.
‫So you can see this is how basically we're going to be building our Web site like that.
‫We will focus on the designing part right now.
‫So let's go to let's get started, first of all.
‫All you have to do is to go to new.
‫Over here.
‫And then you have to hit page over here.
‫So now we have already basically created our home page as the home name and our home page as well.
‫So very to be doing this to be home page design one.
‫OK.
‫So you can do it that way and then you can later than you can rename it.
‫OK.
‫And once you've got that, all you have to do is to just set this to elementor full width and then
‫you have to publish.
‫So once you hit publish, it will be published.
‫And now even if you go and read this page, you will see that this will be a normal page.
‫You guys do know about it.
‫So I don't know why I'm telling you right now, but I still want to make sure that you guys to learn
‫everything so you can see there is nothing.
‫And now going to hit edit with elementor
‫This is I can see this is what we were getting with the free version and we were making sure that we
‫made the use of full of it.
‫We basically made the full use of it.
‫So now in this video, we're gonna be using some of the pro features as well.
‫And now you will be amazed.
‫So we're going to be doing a slider or we here, we cannot drag and drop it here.
‫And this is right here.
‫Now we're going to make it full width
‫So for the photo that you have to basically click the section and then you have to select it to be full
‫width
‫OK.
‫And then you have to select this column and you have to go to the advance and you have to set the padding
‫to zero.
‫And the slider is fuller than you can see.
‫This is all the slider is looking.
‫And congratulations.
‫Now you are fully able to add a slider to your Web site using the elementor.
‫Now, let's go to let's work with it so you can see that these are the colors being implied at the background.
‫So we have to use something related to our Web site.
‫So now you can use unsplash dot com to get free images.
‫Now, basically, we will be using the store image that we use on that.
‫Our product design.
‫And we will also be using some more images.
‫So basically, we will be searching for a store over here.
‫OK.
‫And you have to basically search for something that you can use.
‫You can see this is the image that you can use.
‫You can download this image and then you can resize this image to one, two, a little by 720.
‫You can also use this image if you are particularly dealing with the clothes.
‫So like this, you can use this image as well.
‫So it's gonna tell you that this is actually a store.
‫And this girl is basically dealing this girl.
‫So this is how basically the store is working.
‫So you can download this image as well.
‫Now, once you have got your images, all you have to do is to basically come up here and then you have
‫to upload the images.
‫So for the first slide, for the slide one, we're going to basically get rid of these slides that we
‫can arrange.
‫Focus on one single slide right now.
‫We're going to select the image and the image that we're going to be selecting is going to be this one.
‫OK.
‫And now you can go it and you can hit the here and you can see it's right here.
‫Now, you can select this to be size, to be cover, not anything.
‫So if you select to be contained, you can see right here.
‫If you select auto, it's like this.
‫But you have to select it to be cover.
‫So now once you've got the cover, all you have to do is to apply your background overlay.
‫And that's what we have been doing so far.
‫And now you have to basically make this to be a little bit more darker right here.
‫We're going to keep it two point seventy five.
‫OK.
‫And this is right here.
‫This is how it's working.
‫Now, what you can do.
‫You can go to the content and you can get rid of fit.
‫And you can also, if you need the button over here, you can definitely at it.
‫But I want to get rid of this button and I'm going to just keep heading over here.
‫And this is how it's looking.
‫So once you've got your first slide done, all you have to do to duplicate this one more.
‫Now you've got this one.
‫OK, and here we are going to be doing we're going to be changing the image.
‫So this time we're going to be using this image.
‫We're going to insert media.
‫And now if you click over here, you can see this is actually we're right here in this particular image.
‫Now, here everything is right here.
‫So we don't have to do pretty well anything.
‫And now what you can do.
‫You can go and you can hit duplicate once more.
‫And here is what we have now.
‫You can change this to this particular image and you're going to want to have to just add the image.
‫So once you've got your slider done.
‫If you just come up here and then you click over here, you can see this is a one.
‫This is a one.
‫And this is the one.
‫And we've got these three images right here.
‫Now, once you've got your images, you have to basically just type the words according to that particular
‫image.
‫So for that, what we're going to be doing here, you can see that we're using the ware house image.
‫So for this ware house image, we're going to be choosing it to be our brand name.
‫So we're going to type in here.
‫One stop shop or what so ever your brand name is.
‫And then once you've got that, you have to go to the slide one heading over here.
‫And here in the content you can type here is is always opened.
‫And now you can type here in the content for you because you can see that we're dealing and public dealing.
‫So you can type here for you.
‫So it can now type here for you.
‫And here you can also add a heart sign.
‫So you can type here and Percent Hard's and the semicolon.
‫And here we've got that.
‫So now once you've got it, you can now style it using this style function and you can move further
‫with it.
‫But you can see how cool is it looking.
‫One stop shop is always open for you.
‫So now once you've got it, all you have to do is you go to these slide options and you have to work
‫it.
‫So first we've got the arrows on DOT so you can see these are the dots and the arrows and we're gonna
‫get rid of it.
‫We're going to send this to none so that everything is gone.
‫And it's just really simple.
‫And now we've got the auto play on pause and pause on hover, pause on interactions.
‫If anyone is interacting, it's gonna a pause.
‫And the auto play speed is basically 5000.
‫Okay.
‫Five thousand milliseconds.
‫Okay.
‫It's basically five thousand milliseconds.
‫And he transition that is going to take place is gonna be five hundred milliseconds.
‫Okay.
‫So you can do it that way.
‫And then we've got the content animation so it's going to up down and you can do it to be down.
‫So it's the content will be taken down from there.
‫So you can do it that way as well.
‫So if you just do it, let's just click over here.
‫You can see how is it coming downward.
‫So you can do this way.
‫Seemed like this.
‫You can work with these right here.
‫So I like it to be zoomed.
‫You can see how cool is it looking.
‫So you can use it.
‫Now let's go and let's work with something that it's called the keyboard effect.
‫So if you click over here, you can see it's right here.
‫If you just like this and see how this image is also moving in the background, it seems to be really
‫cool.
‫So you can just add that to every of the image that has that you are having in the sidebar.
‫So we're gonna be.
‫Ending them and
‫How's it looking?
‫So we've got this sidebar working any background now you can move your mouse over so that the transition
‫takes place and the slide goes to next new level.
‫Now we've got this.
‫Now what you can do, you can go and you can design this.
‫If any designing parts, you're going to want to have to come here and you have to select titles since
‫we are only getting this title over here.
‫And for the text color, we're going to be choosing the white color and the typography is going to be
‫the Meriweather and the size is going to be this.
‫And the weight is going to be really very light.
‫So you can even keep it to be 100 hundred as well.
‫OK, and is how its looking?
‫One stop shop is always opened for you.
‫Hey, so how cool is it looking right now?
‫Basically, there is endless possibilities.
‫You can choose anything you want to add and you can definitely add.
‫It seemed like this.
‫You can also choose a different font if you need a little bit funky font.
‫You've got a lot of fonts that she can use and basically you are allowed to use a funky font and your
‫slider.
‫OK.
‫Because slider is something that is not the content.
‫And you can definitely use it seemed like this.
‫You can use this one.
‫Can see how cool is it looking one stop shop like like if you are selling something.
‫A horror thing.
‫It can use this font if you're basically a store sales that.
‫So you can do it that way.
‫And it totally depends upon the font by color psychology and the image technology that you've been using.
‫So make sure to focus on that and your website will be like the best Web site you're ever going to imagine.
‫But since our Web site is basically kind of professional and very selling all the products, we don't,
‫we can just choose it.
‫So you can choose anything else.
‫So we're gonna be choosing Monserrat and we're gonna stick with it.
‫Now we can see how is it looking.
‫So now once we have got that, all you have to do is to go here and you can increase the height of this
‫as well.
‫A little bit.
‫Much more.
‫So we're going to be keeping it to be 550.
‫And that's perfect.
‫You can see how is it looking.
‫Now, once you've got it, you can go and you can hit update.
‫So now here, after this slider, we're going to be adding something more.
‫And in this, we're gonna be just selecting this.
‫We're gonna be selecting a full column.
‫And this is right here.
‫And if you basically go to the Web site right here, you'll see that we are basically using the categories
‫over here.
‫So for these categories, you're going to want to have to come here and you have to basically add a
‫title, add a heading over here.
‫And for the heading, we're going to be using the exact same strategy that we used over to a single
‫product.
‫So if you basically look over here and you go down, you can see this is the strategy that we used.
‫So what you can do.
‫You can click edit with elementor you can click single product and you'll be taken there.
‫Now you can go and you can basically copy the heading from there.
‫And then you can come up here and you can paste it right here so that we can speed up the process.
‫So we're going to go down.
‫We're going to come up here and we're going to copy it.
‫Now, here you have to come and you have to paste the heading over here.
‫And some like this, you're gonna want to have to come here and you have to select this color products.
‫Right.
‫So you're going to have to copy it.
‫And now here you have to come.
‫And you have to paste it right here.
‫And you've got any related products.
‫Now, what we're going to do, we're going to change this to basically featured categories.
‫So we're going to do it.
‫Featured categories.
‫OK.
‫And same goes with this one.
‫And we're going to change this, too.
‫So now once you've got this, all you have to do is basically click over here.
‫And then you have to go to the advance and you have to give some margins, because that's what the most
‫boring thing is.
‫And we're going to be giving at least 150 because the with the slider in this, there should be much more
‫spacing.
‫And so once you've got it, all you have to do is to just read with some more stuff.
‫But you can see it's really very big right now.
‫So I'm going to be keeping it to be a little less smaller.
‫And before doing that, I also want to go to this particular thing and I want to go to the layout
‫and I have to said this to twelve hundred pixels so that there is much more spacing.
‫And here I am now going to select this one heading.
‫And I'm going to set the size of it to be a little smaller, just like that, and the color is going
‫to be the same color that I've been using over here.
‫So you can go.
‫You can go to pick color history.
‫You can select the color that you were choosing.
‫It can.
‫Okay.
‫And then you can go to the copy to clipboard.
‫You can copy to color and you can paste it right here.
‫And I can said the opacity to be really very loose.
‫Now we can see how cool is it looking.
‫So once you've got your featured categories right here.
‫Now what you have to do is to click over here and you have to get the featured categories.
‫And for the feature categories, we're not going to be showing.
‫It's like we have been showing it right here.
‫So if you go to our homepage, you can see that we are showing the categories using a shortcode and
‫we're not going to be using this because this is really not good.
‫So what we will be doing.
‫Let me just show it to you.
‫So let's just come up here and let's add an inner section.
‫So we're going to drag the inner section and we're gonna drop it right here.
‫And once you've got the inner section here, we will be adding the categories.
‫So, first of all, we're going to add some more columns.
‫I want columns.
‫You have to work for that.
‫So here here in the search widget, you have to search for CTA.
‫CTA means call to action.
‫And this particular feature is really a great feature.
‫Trust me, when you will add it, you will love it.
‫So you can see how cool is it looking.
‫And this is how we're going to be using our categories so you can show your categories like this.
‫But don't worry, we're not going to be using it this way.
‫We're going to be using it to cover every.
‫So you can see how cool is it looking?
‫So this is how we're going to be adding just the title of the category.
‫We're going to show it.
‫We're going to get rid of the content.
‫So if you go to the content, we're going to get rid of it.
‫If you go to the button, we're going to get rid of it.
‫And here, Jessie title.
‫So here we're going to be adding the title.
‫So now we're going to be using the main categories only you can see to be used.
‫This apple, just to fill this column, we're going to be using the mean, the clothing, desktop,
‫laptop and mobile.
‫So let's just go on.
‫It's recorded.
‫I'm going to add a laptop over here, OK?
‫And now what you can do, you can add the category link.
‫So for that, what you have to do, you have to click over here.
‫And then you have to go to the laptop and you have to copy the link address.
‫OK.
‫And once you've copied.
‫You have to come and you have to paste the link over here and you have to set this two whole box.
‫So that whole box is basically linked.
‫OK.
‫And now what you can do.
‫You can go to the website if you want to add any.
‫And you can see.
‫Here is how the ribbon is going to work.
‫So this is most web use, but really not going to be using, especially in the categories right here.
‫And now we're going to go to the image.
‫I'm going to upload the image.
‫So for the laptop image, we're going to be using some it is the image that really goes with that.
‫So we're not going to be using this image because that made was just to show you guys how a Web site,
‫how you can add a category to how you can basically add an image to a category.
‫I'm sorry.
‫And now we're going to be using an image that really goes with the laptop thing.
‫So we're going to be using this one.
‫We're going to hit insert media.
‫And this is how it's looking.
‫Now you can see our categories done.
‫And now what you have to do, you have to work with just the styling.
‫So first of all, we've got the Box, you've got the vertical position.
‫You do it this way.
‫You you can set this to middle .
‫And now here, first thing first, we're going to go to the hover effects and we're going to set an
‫overlay over here.
‫So for the overlay, I'm going to be adding black color.
‫And you can see the black colors right here and you can see deserts looking.
‫And what you can do.
‫You can keep it to be less than that.
‫So this is how it's going to look.
‫Now, once you've got it, you can also work with the hover animations.
‫It's going to be.
‫Zoom in.
‫Zoom out.
‫Move left.
‫So you can see how is it looking.
‫So like this, you can do it anything.
‫But I like it to be zoom in way because it's really a great function.
‫Now you can work with the title.
‫Basically the content.
‫So we're going to be basically working of the title reget select it to be the Monserrat.
‫And here we're going to increase this sizing a bit.
‫I said the to be really very less.
‫So now this in the small letters.
‫I don't like it.
‫So I'm going to change the transformation to actually uppercase.
‫And now it's kind of looking cool.
‫Now, once you've got it, you've got to do is to duplicate this column.
‫And you have to duplicate this column.
‫And you have to duplicate this column once more.
‫And we've got our columns ready.
‫So now once you've got everything done, you can see this is how your final featured categories are
‫gonna look like.
‫Now, what you have to do, you have to change the images respectively and dealings, respectively.
‫And I'm going to do it really very fast.
‫Now, again, see that I've changed dealings and I've changed the title.
‫And the images, respectively.
‫Now what I've done, I've said the image to be this one for the desktop, for the mobile.
‫I've chosen this and for the clothes I've chosen this.
‫And now what you can do.
‫You can come here and you can also go to this particular section.
‫You can send the content to be full.
‫So that's these are much more better, .
‫So now what you can do seem like this.
‫You can also click over here.
‫And then you go to this right here and in the column gap, you can also send this to no gap so that
‫these are actually like this.
‫But we're going to be using it to be the default one because a default one seems to be really very nice.
‫Seemed like this.
‫You can also choose it to be fresh.
‫No gap.
‫Okay.
‫And then you can go to this pretty glue column and you can give the padding to the way you want.
‫So you can send this to be five pixel or you can send this to be one pixel or two pixel.
‫Art totally depends if you need a less spacing or if you need how much you want.
‫So it totally depends upon that.
‫But very going to be choosing it to be this one.
‫So now, as I've told you so much of time, there is and less possibilities you can do so if you don't
‫need this much spacing.
‫Definitely.
‫Again, said this to no gabb and then you can give your own particular spacing.
‫And then once you've got this, all you've got to do is to choose a divider and you've got to add it
‫over here.
‫Now, the reason why you should be adding a divider is because it really adds a sense to your Web site.
‫So you should be using it.
‫Now, we're going to set this here and align this to center and we're going to keep it right here.
‫Now, you can choose the colour and for the color.
‫We're going to be choosing the exact same color we've been using.
‫And you're going to have to be it.
‫And I can work with the gapping right here.
‫So we're going to keep the gapping to be this way and the way to be.
‫I think one point five and we're going to now bring this to top here.
‫So we're going to select this one, add a divider.
‫We're going to go to the margin.
‫We're gonna uncheck this.
‫We're going to bring this to really very top.
‫So some like this, you can also go to the condenser over here.
‫You can set the width to be a little less.
‫A little more.
‫It totally depends upon how much you want and you can then stick with it.
‫So now you can see that we are totally done with our categories and we are also done with this slider.
‫So in the next video, we will be talking about more stuff and we will be adding more stay tunedguys
‫and babye.