How to Make a Website With WordPress 2017 - Avada Theme Tutorial

Now , I've got a bunch of different products in here and you can edit all of these products in here as well in wordpress .

So like I said , there is a logo on this one .

So I'd probably want to switch out this image or maybe cover up that logo .

So you could just go over here to edit and then you can edit the item description in here and all of the images here as well .

So you can do everything on wordpress that you can over on Ali Express .

And then I would just want to go over to the featured image and maybe change that to a different one or I could just click on the little pencil icon and we can just kind of paint out that uh logo .

So I'm just gonna grab the eyedropper .

I just kind of grab this like light blue color and we'll just paint this out something like that .

You could even grab maybe this white color over here , just make sure that you're , you know , kind of being artistic about this to a certain degree .

In fact , we'll just kind of paint over this whole area .

There we go .

And then you can also get rid .

So if you're selling this to other countries , you could also get rid of this as well .

And that is generally how you edit your images .

And then I'll just click on save and then there you can see our image was just updated .

So the next thing that I'm gonna do is publish all of these products .

So right now they're all on my import list .

I wanna make sure that I publish them all .

So I'll just go ahead and publish this water bottle one while I'm here .

And then I'm gonna go back over to products and go to all items and click on that and you can see that the water bottle has been published right here .

So I'd want to go back into all of these and publish these as well .

Then the next section is our core value section .

As you can see , we have used some really beautiful colors and beautiful icons .

And when you have this as you can see a very beautiful animation as well , OK ?

So we'll see how to create all these things later on .

Then this is another section obviously with a background image which is a testimonial section .

We'll see how to do all these things the easy way .

OK .

Then this is the latest new section .

This is basically the posts , the posts that we have created the articles or post which you will be creating in this particular video .

OK .

Then the last section is this one , the trusted partner section .

This is actually a slider .

It has all the details .

In fact , all the logos of the partners or the clients with whom you work with .

OK .

Then we have this photo which is divided into four different sections .

This is a very short description of what your website with a logo and a call to action button .

Then this next section is a tweet section and the third section is contact us today's section .

So I'm just gonna do that real fast .

So I'll just click on quick edit and then I'm gonna change the status to published and click on update and then I'm just gonna do the same for all these Ok .

So now all of my products have been published .

So what I'm gonna do is just go back over to my store and I'm just gonna open that up in a new tab and I'm just going to scroll down and you can see my products here .

Now , obviously , I'm gonna show you how to edit the entire style of your site a little bit later in this tutorial .

But for right now , we've got our products in here and you can see that the prices have not changed .

So there are the original prices from Ali Express .

And what we want to do is actually mark them up because this is how we're gonna make our profit .

So this money is actually gonna be going to the manufacturer while any sort of mark up or margin is going to go to us .

So let's just go back over to wordpress and we're just gonna go over to the ali dropship menu over here and we're just gonna come down to settings and we're gonna go to pricing and then for the pricing markup formula , you can add your own formulas if you want .

But I really just think the ad recommended is a great way to go .

So I'm just gonna go ahead and click the ad recommended and you can see now that we've got all of these little if then statements here .

So if the product is $0 or less , it costs $1 all the way to , if the product is $5 or less , it's going to cost around $30.30 to 50 50 to 100 and so on .

It's going to mark these up by a certain value .

So then if we were to just go over and save this , so we'll just go down here to save changes and then just click on update prices and then just go back over to our website and we're just going to refresh the page and we'll just scroll down and you can see that .

Now , our products have been marked up .

Now , the only thing about this is that now they're all kind of got these like , you know , 95 26 50 .

So what we wanna do is price rounding .

So they are marked up now .

So we are going to receive our commissions off of these margins , but we wanna make sure they're price rounded so that they look better on the site .

So let's just go back over to wordpress and we're gonna check price rounding like that , then click save changes and just update the prices again .

So let's just say the regular is something like , I don't know , $39 and we're gonna sell this for , let's say $25 like that .

And then you can just go ahead and click on update .

It will just say , ok , and you can see it says changes saved successfully right up here .

So now if we just go back over to our site and we just refresh this , now , you can see that it says $25 .

So that's how you can edit individual products as far as the pricing goes .

Ok ?

So now the next thing that we want to do is import reviews .

So right now you can see that we've got the product we've got the price , but there's no five star review on here to tell people whether it is a good product or not .

Even if we were to click on a product , it's not gonna show us the reviews .

So you can see it says zero reviews right here , which isn't a good look .

So you want your products to look really trustworthy .

So what we're gonna do is import these reviews .

So just go back over to wordpress and then just go back to products and we'll just go to all items and I'm just going to click on my backpack product .

So I'll just go over to edit and then I'm just gonna scroll all the way to the bottom and then you can see we've got reviews right over here .

So I'll just go ahead and click on that and then for reviews , we're gonna say we're gonna go over to only five stars .

We're gonna change that to four stars and higher .

So we're only gonna show the highest reviews here and then you've got a few other settings here like removing images and the reviews .

So if you just want text reviews , you can say that or you can only do ones with images by selecting this option here .

So first of all , this is not just any common shared plan where you know , you have a shared plan where in many people are using the same exact plan .

So this is not that kind of plan basically .

And the most important and the most awesome feature of D MD is that it has SSD instead of HDD space .

And if you go and search on Google , SSD versus HDD web hosting , you will know the difference between both these things .

OK ?

And let's see anyone , let's see the first result , OK .

As you can see in this result guys , uh this speed difference is given in HTD , you can get the speed of 1 50 MB per second where in , in SSD , you can get the speed of 5 40 MB per second .

Sometimes believe me guys , you'll get 20 times more faster performance than HDD .

OK ?

And your higher is better .

But I kind of like all reviews to be able to come through .

So we're just gonna go ahead and leave that because the more reviews you have the better .

So it really shouldn't matter whether they have images with them or not and then you can say to skip certain reviews with certain keywords , you can write those keywords in here .

Um So if there's certain words that you know , you don't want to show up in your reviews or bad reviews based on certain keywords , you can write them in here .

But I'm just gonna go ahead and leave that blank and then just say import now .

Cool .

So now I'm just gonna go ahead and click on update over here and then I'm just going to go back over to this product and I'm just going to refresh the page and now you can see that we've got all of our reviews here .

So if we just scroll back to the top and just scroll down a little bit , you can see 20 reviews and they're all here and then they can just click on that button to close them or you can click on it again to open them and they've got all the images here , which can be clicked on .

So that's pretty cool .

So you can do that with all of your products by simply just going over to products , all items and then you can go ahead and enable reviews on each product .

So I'm just gonna go ahead and do the rest of these products right now real quick .

Ok ?

So now I've got all of my reviews imported for all my products and we can move on to step number six , which is to customize your home page .

So if we were to just go over to the home page , you can see that .

Obviously , this is all pretty stock .

So we want to customize it and make it look like our own outdoor store for this or whatever store that you are going for .

And so I'm gonna show you how to customize all of this stuff .

Now , first thing that I'm gonna do is just kind of clean up these tabs up here , get rid of everything that we're not using .

Keep a nice clean environment .

OK ?

So let's just go back over to wordpress .

And what we're gonna do is just go over to the ali drop ship menu over here .

And the first thing that we're gonna do is just go on over to customization and we're gonna go to home and here is where you're going to edit all of that stuff .

So you can see that we're using a slider on this website .

So it's going to slide between these different banner images .

So you've got banner one here , which you've got the desktop size , which is about 1920 by 960 pixels .

And then you've got the mobile version .

So this is just a little bit lower resolution image for mobile .

Since they're looking at a smaller screen , having a lower resolution image on here will help it load a lot faster on a phone .

So you want to have one for each .

Now , I do have images in the description if you want to follow along with me that we're going to use to replace all these images and you can just instantly download those from the description .

And if you do want to get free images to use on your site , I commonly just use pia bay dot com .

They've got tons of free images so I can just search whatever I want like hiking .

And I'm just going to get tons of images that have to do with hiking in the outdoors .

And if you wanted to use any of them , you could just come over here , click on one , say free download and you can download the 1920 by 12 80 to use for the desktop banner .

And then I just downloaded the 6 40 by 4 26 to use as the mobile banner .

And all you have to do is just click on download and then it will just enter your downloads .

So this is a great place to get free images .

Now , these sizes are also kind of like a recommendation , but it's OK to kind of hover around them and to not have the exact same size and we've got three of them .

So we've got that one , this one as well as this one .

So we're gonna start by replacing all three of these .

So if you've downloaded the images in the description , let's just go ahead and upload these .

So I'm just going to click on remove for banner number one .

And I'm just going to click on upload to put in a new one and just go over to select files which is underneath upload files right here .

And then we're just going to go over to where our images are .

And again , you can download these in the description and I've already labeled them .

So we're going to go with banner one desktop and click on open and there you can see our image was uploaded .

So now we'll just click on select , that's gonna put that in .

And then you can also just crop the image if you want to as well .

So I'll probably just bring this down just a bit and then just click on crop and there we go and then we want to do the same for the banner one mobile .

So we're gonna remove this one and then just upload a new one and we're going to go over to upload files , select files and we're gonna grab the banner one mobile , click on open and then just click on select and you can see that this is about 640 by 427 .

So I went even lower than their normal recommended size , but again , it's on a phone .

So the resolution will be just fine .

So I'm just going to click on select and then you can also crop the mobile version as well .

I think it looks pretty good right around there .

So I'll just click on crop .

Cool .

So now we're just going to scroll down and we'll do the rest of the images and then I'll show you how to come back and edit the text and the button , text and everything else .

So let's just go ahead and do banner number two .

And you can see that these are banners because if we go to our site , you can see that this kind of switches through a few different images like that .

So let's just go ahead and remove this one and upload a new one and go to upload files , select files and you can actually select all of these images at once and upload them all to your media library .

So I'm just going to go ahead and select all of these and then just click on open cool .

And then once those are all uploaded , you can just select the one that you want .

So this is banner two desktop , you can see the name right over here .

So I'm gonna select that one and you can crop it if you want .

And then I will also do this one .

So I'm going to just remove upload , select the banner two mobile select can crop that as well .

And then we're also gonna do banner three , upload banner three desktop select crap and then a banner three mobile , remove upload banner three mobile select and then crop .

So now I'm just gonna go ahead and save my changes so that I can show you what that looks like .

So I'll just say save settings , you can see changes have been saved right up there .

So now I'm just going to go back over to my website and click on refresh .

Cool .

So now you can see we've got our new images in here , which is really cool and it shifts between them all .

You can see the little counter down here .

It's about five seconds per image .

So it looks like it's working great .

And if you want to alter how fast those go , we can just go up to the top and you can see that we've got , our rotating time is five seconds right here .

So you could change it to 10 or three if you want to go faster .

I think three is a little fast .

So I'm going to go ahead and stick with the standard five and you can also change the text font size over here for desktop and mobile as well as the link , font size .

But I'm just going to go ahead and leave them the way that they are because I think they look pretty good just as the standard sizes .

And then you can also enable a video here for Android devices if you want to and you can put in the youtube video right here .

But I like the pictures .

I'm gonna go ahead and stick with them .

I just want to show you that that's where you can do that as well as the link color as well .

But white stands out pretty good on our website .

This is the white text with the white link here .

I think it stands out pretty well against these dark backgrounds .

So I'm just gonna go ahead and leave it .

So if we go back over to our website , you can see that we've got our text here as well as the shop now button over here .

So if you want to change that text , you can just go over here to whatever banner it is .

So this is banner number one , you can just come down below here and it says great collection of best products .

You can edit that text here if you want as well as well as the shop now button , you can change it to anything that you want .

Again .

I like the standard options because shop now is obviously a pretty good way to go for a drop shipping store .

So I'm just gonna go ahead and leave it .

But you can write , you know , more detailed things about your products in here or if you're running like a sale , you can put , you know , whatever is on sale or whatever the season sales uh that you're doing .

And then you can put in the links to your products down here .

So this is the thing that we would definitely want to change .

So let's say that I wanted to change this .

So this picture has a backpack in it .

So let's just say that this first banner , I wanted to change the text to maybe something like um all backpacks on sale now like that .

And then you would want to change the banner link to go to our backpack product .

So in order to do that , what I'm going to do is just go over to products over here and go to all items .

And I'm just going to open that up in a new tab .

And then I'm just going to go down to my backpack product and I'll just click on view and then you just want to take this URL up here for the backpack product and just come put that in here for the banner number one link .

So you just delete that one and paste in the new one just like that .

And now if I just go down and save these settings , you can see what's gonna happen .

So first , what I'm gonna do is save this and then I'll show you how to access those categories and get to those URL S .

So I'm just going to click on save and then we're just gonna go over to products and then go to product categories and I'll just open this up in a new tab just so I can show you , I'm not actually going to change anything in it .

But if we go to product categories , you can see now that we have backpacks here .

And if we just click on a quick edit , you can see that the slug is backpacks and the slug basically means that whatever is going to come after that forward slash like that .

So your domain name forward slash backpacks .

Now , you don't want to have that forward slash in there .

You just want it to say whatever the category is .

So if you're unsure and you want to link to one of these categories , just come in here and check to see what the slug is .

So I'm just gonna go ahead and close that and you can see .

So if I go up to my website again and let's just go over to the home page .

It says backpacks on sale .

Now , I'll just click shop .

Now that now takes me to my backpacks category .

So if I had another backpack right here or here , it's gonna show all of them .

Now , I've only got one right now .

So it's only gonna show the one .

But if you do have multiple products that you want to sell , I recommend linking to your categories .

OK ?

So let's just go back over to wordpress and then we can also go ahead and change the banner two if we wanted .

Now , I'm not gonna go too deep into these as far as linking to different categories since I just showed you how to do that .

But that's really what you want to do is just make sure you change this banner text to be something about your products and then change this link , which is the most important is where that shop .

Now , link is actually going to take them to cool .

And then the other thing that we're going to change is the banner down here .

So we've got the promo banner .

So if we just go back over to our website .

I'll show you what that looks like .

I'll just click on the home page to go back to that because right now we're just , we're just editing the home page .

So I just scroll down .

You can see we've got this banner here .

It's got this image of this girl here .

So we want to replace that .

And then you can also replace the text as well as the button as well .

So let's just go back over here and I'm just going to replace this .

So I'm gonna click on remove and then upload .

Then I'm just gonna grab the new banner image .

So this one's promo banner desktop , click on select and then we want to do the same for mobile .

So I'll just click on upload , grab the mobile version , click on select and there we go and then you can change the text down here as well .

So you've got the banner heading so new season .

So we could say something like , you know , new camping um accessories or something like that .

So I'm just gonna go ahead and change that to camping accessories with that slug with the little dash there because we can't write a space in a slug and then just click on save settings and then we'll just go back over to our website and just refresh .

Now , you can see that banner has the new image in the back as well as our new text on here and the new button .

So it's all working properly .

And then the next thing that I'm going to show you is if we just come down here , we've got a featured product settings area .

So what this does is it puts a featured slider .

So if you feature a product , it's just gonna be , you know , any products that you deem as really important or maybe new ones that you want people to see .

So let me show you .

So if I go over to the website and come down , it's going to be in between these sections .

So we've got the story section , which is just the blog section which I can show you how to remove if you don't want it .

But underneath here is where we actually put the featured products .

So let me show you if I go over to featured products , I can just go to add a product and then what we're gonna do is just select the products that we want to be featured .

So let's just say that we want all of them to be featured .

I'm just gonna check them all and then go to bulk action and change to add and then click on apply and then we can just close out of this , that's going to add all these products here to our featured list and then you can change the rotation time on that as well if you want to and just click on save settings and then we'll just go back over to our website and we're just gonna refresh this .

And now you can see that we've got this featured product area where it's going to scroll through all these products that we put on the featured list , which is really cool .

So if you do want to call out some certain products that are performing well , you could put them on the featured list and then they can just click on it and it will take them to the product .

So let's just go back over to wordpress .

And if you wanted , you could also get rid of the blog by just clicking on this .

If you don't want to show the blog , if you do want to write a blog , all you have to do is just go over to posts and then you can just add a new post and just write a new blog post and that's automatically going to show up here in the blog area if you have it to say , show blog , but I don't really want to write any blog posts for this store .

So I'm just gonna go ahead and leave that off and then you can also write a small article at the bottom of your website if you want to as well .

But we really don't need that on our website .

So I'm just going to go ahead and leave it blank .

So I'm just going to click on save settings , ok ?

So now we can move on to step number seven , which is to create a logo and a facon .

So we want to make sure that your site is branded obviously with your own logo and your own facon , which is just this image up here .

It's a little shopping cart right now just as a default , but it's going to be this little image that's on the browser tab and then also your logo for the site as well .

So if we go over to our site currently , we've got , you know , the standard Salvador dolly logo .

So we also want to , we want to create a white one and then we also want to create a black one for whenever we scroll down , you can see that it turns to black on this white banner .

So let's just go ahead and do that .

So what I'm gonna do is just go up to a new tab and then just go to logo maker without the E dot com .

And this is an awesome free software that you can use online .

You don't have to download anything in order to create a free logo within minutes .

So what we're going to do first is just click on , create a new design and we'll just go ahead and skip this little tutorial .

So I'll show you how to use it .

So you've got the font category .

So you've got things like 3d handwriting , scary , simple and modern , things like that .

So I'm gonna go ahead and stick with these simple and modern .

I do recommend kind of playing around in these and seeing which ones you like .

Usually , you know , a clean font is a better way to go than something crazy and kind of cartoony .

So I'm gonna go over to the font family up here and you can see that there's just tons of different uh fonts in here that you can choose from .

So I'll just select one that I like , like this one's pretty bold .

And then I'm going to scale this up and I'm also going to make it black just like that .

I'll just drag this down and I'll put my logo next to it and maybe scale this down just a little bit as well to be something like that .

And there we go within just two minutes .

We've created a whole logo for our site , which looks great .

So if you want to save this logo first , what I recommend doing is cropping .

And as you can see the text we used over a year is also very small .

Whereas with the text which we have used in our demo website is big , quite clear and it really looks cool .

OK ?

So now let's change all the typography settings .

So from your select typography , OK .

So the first one is body typography .

And throughout the website , we have used the railway uh text of the railway font which is Raleway .

So type in that and select this one and backup font family will be the first one aerial helvetica sensor if it will .

This is also similar throughout the website .

OK ?

Now select the font width and style , just click on this and go to medium which is medium 500 .

OK ?

Now change the font size to 15 pixels and line height to 2.27 .

OK ?

It is not necessary .

Again , I'm saying that you have to do all the same numbers .

OK ?

Download the low resolution file and it just asks you to credit logo maker and then that just hit my downloads there and I'm going to close out of this and we're also going to need a white logo for the main site .

So what we can do is just select the text as well as the icon by just holding a shift and clicking both .

And I'm going to make them both white .

And then again , I'm just going to click on save logo and then again , no , thanks .

Download the low resolution file .

So it's going to download that there as well .

And then we also need a facon , which is going to be this image up here in the little browser tab .

So we want to replace this kind of standard shopping cart .

So what we're gonna do is just change our icon back to black and we're going to delete our text by just simply clicking on it , hitting the delete key and we're just going to drag this tech or sorry , this icon up to be bigger .

So for now , I'm just gonna go ahead and close the uh downloads down here and then we're just going to go back over to wordpress and then from here , what we're gonna do is just go down here to general underneath customization and just click on that and then you can see this is where we're gonna put in our Facon .

So let's just go ahead and remove this one and then we'll just click on upload and we're going to go over to upload files , select files .

And I'm just going to grab my facon right here , click on open and then we're just going to click on select just like that .

So there's our facon .

So now I'll just go ahead and click on save settings .

Cool .

So now the changing the changes have been saved .

So now I'm just going to go up here to my site and I'll just refresh that and there you can see our new Fava Con has been added which matches our brands .

So that's really cool .

So let's just go back over to wordpress and then we want to put in our logo .

So what we're gonna do is just going over to header and here is where you can replace the black and the white logo .

So I'm gonna go ahead and remove these and click on upload and I'm just going to go to upload files , select files and I'm gonna grab both the black logo and the white logo and upload them both .

And I'm just going to start with the black logo here and click on select .

Mhm And then it's gonna ask you to crop this .

So we'll just kind of resize this just a bit to be this full page here .

So let's just go back over to wordpress and now we want to move on to step number eight , which is to generate pages and by pages , I mean standard pages that come with your site like terms and conditions fa Qs , things like that , you can actually automatically generate them .

So let me show you what I mean .

If we go over to the website and we scroll all the way down to the bottom to where the footer is , you can see that we have no pages in here .

So we want to go ahead and put some in and again , this theme , which is why I recommend this theme , it generates these pages automatically and then all you have to do is just click on them and you can just edit them however you want .

So let's just go back over to wordpress and we're just gonna go over to general again and then up here it says add default pages and menus .

Let's just go ahead and click on create and then just go ahead and click on save settings and then that's gonna save your changes up there and you're not going to see these pages show up here , but they've been added to the site .

So we'll just go back over to our site and just refresh the page .

And now if we scroll down , you can see that we've got all of these pages added here .

Like about us , contact us privacy policy , fa Qs everything .

And if you do want to edit any one of these , you can just go ahead and click on it like let's say the privacy policy , then you can see we've got all of our privacy policy stuff here and then you can just click on edit page in order to actually edit this information .

OK ?

So now we can move on to a quick step , which is gonna be step number nine , change your colors .

So whenever I say change your colors , I mean of certain things on your website with the shop .

So I'll just go back to my website and let's just go down to maybe one of these products .

Uh let's say something like this little fire pit and I'll show you what I mean .

And then I'll also show you how to change the car as well as the stars .

So let's just go back over here and then you can see that we can change our prices color our star rating .

So we'll start with that .

We'll do the star rating color and just change that to like a yellow because typically stars are yellow , maybe like kind of an orangeish yellow , something like that .

And then just say choose and then the cart payment buttons color .

We'll just change that .

Let's say that we want to make this kind of like a blue color , something like this and then just say choose and then you can also change the hover as well on that .

I think I'm going to leave that as a dark color like that , that dark gray right there .

And then you can also change the cart icon color if you want .

But I'm gonna go ahead and just leave that as dark and just say save settings .

And then let's just go back over to our site and we'll just refresh this again .

So now let's just go back over to wordpress and then we're just going to come down here to appearance and we're just going to go over to menus .

Cool .

So here is your menu dashboard here .

So right now we've got the about menu pulled up , which is gonna be this one right here .

And what that is is actually at the bottom here in the footer .

So if we scroll all the way down , that is this menu right here , you've also got the lettuce help you menu down there as well .

So what you can do is just go back here to wordpress and you can select which menu you want to edit .

So I'm not really going to get into the about and let us help you .

I'm gonna show you how to add the main menu and then these kind of just work the same way .

So let's do the main menu , which is the one at the top .

So once I do that , I'm just gonna hit select and then that's gonna show us everything in that main menu up at the top .

And again , these are all created for you and we don't actually have these on our site .

So first thing that we're gonna do is actually just delete all these .

So you can just open it up and hit remove and you just want to do that for each one of these , just drop down and click , remove .

So I'm just gonna do the rest of these really quick .

OK ?

So now once everything has been cleared from that menu , we can now start from scratch and you're going to find everything that you can add to your menu over here in these boxes .

So by default , the pages category is open right now .

So you can just toggle that on and off by clicking .

And if you do want to see all the pages that you have on your site , you can just click view all that's gonna show you everything .

Like the About Us page , contact us , page , all of that kind of stuff .

But typically for a store or a drop shipping store , you'd want to put links to different categories of products or maybe certain products themselves .

If you have one product that's performing really well , you could just put that product up in here .

So let's just say that I wanted to do that .

I wanted to add a product that is doing really well and I just want people to get right to that product from my main menu .

I'm just gonna open up products down here and then you can just select which product you want to put in there .

So let's say that maybe let's say the backpack is doing really well .

So I'm just going to click on that and then just say , add to menu and then that's gonna add that to my menu here .

Now , also what I want to do is add some product categories .

So I'll go over to product categories right here and open that up .

And let's just say that I want all my categories like camping accessories , backpacks and water bottles to all be in there .

And these are my parent categories .

And then I've got the actual subcategories underneath .

But let's just say that I want to add the parent categories in there .

So I'll just say add to menu and now that's just gonna add them in here just like that .

And then let's also say I want to go over to pages and maybe add like a Contact Us page just in case they need to get in touch with me .

So I will say contact us right here or you could even do the account page as well if they want to access their account .

So I'll do both of those and then just say add to menu cool .

And then you can also restructure these to be in a certain order .

So top to bottom is going to be how they're going to look left to right .

So let me show you first what I mean ?

First , I'm just gonna click save menu and then let's just go back over to our site and we are just going to go to the top and refresh .

So now you can see that we've got all of our different buttons in here that we put on our new menu .

So that's looking a lot better .

So what we can do is go back over to here and we can change the order .

So let's say that I wanted something like camping accessories to be .

First , I could go over here to wordpress and then I will just grab camping accessories and I'll just move that to the top just like that and click save menu .

I'll just put that underneath just like that fire pits .

I'll put that underneath .

Camping accessories , I'll put maybe survival gear .

I'll just leave that as its own category .

I'll just kind of move that over underneath the water bottles and then maybe sports bottles .

I'll put that underneath water bottles .

So now I've got these parent categories like camping and backpacks and water bottles and then these sub categories underneath .

And then if I even wanted it , I could just move the waterproof backpack to be underneath backpacks .

And I'll just kind of put that as another subcategory underneath laptop backpacks or I could put it underneath waterproof backpacks .

So that way we've got a three tiered system now .

So now if I just say save menu and then we go back over to our site and just refresh the page .

Cool .

So now you can see there's these little arrows added uh on top of all these little buttons .

So now if I go to camping accessories , you can see fire pits is added , backpacks , you can see waterproof backpacks and then the actual product itself same with water bottles and it kind of shows the products that are in those , which is pretty cool too .

So that's how you create a drop down menu on your site as well .

All right .

So now let's move on to step number 12 , which is to set up email order notifications .

So I am going to be getting into how to create payment methods and shipping methods and all that and we'll even do a test payment .

But what we need to do first is set up email notifications for you and the customer .

So let's go ahead and do that .

So what we're gonna do is just go over to the ali dropship menu over here and then we're gonna go down to settings and then just go down to notifications .

So the first thing that we're going to do is change the service up here , we're gonna change it to SMTP right here and then we just need to put in this information here .

So the way to find this information is just to go to your hosting company .

So in the beginning I signed up for host Gator .

So I'm just gonna go ahead and sign in to host Gator to my account that I use to purchase this website hosting .

And I'm just going to click on sign in and I'm gonna go to portal and then just put in the email that I use to sign up .

And then right here for your hosting package , you'll see your domain name over here .

We're just going to click on email accounts .

So we're gonna go ahead and create a custom one at our domain name .

So it could be something like support or it could be maybe shop whatever it is that you want to use , it would be shop at your domain name dot com .

And then I'll just go ahead and create a password and then put in that password again just like that .

And then the port , we're just going to come back over here to set up mail client and you'll see the port is 4 65 .

So we'll just go ahead and put that in just like that .

And then we just need the user name and the password .

So you can see that we've got the user name here and then the same password that we use to set up this email account here .

So I'm just going to take this user name here , copy it and then just come put it in over here and click paste and then the password is just going to be the same one that we use to create that account , which is obviously blurred out for a reason .

And then the last thing that we're going to do is change the encryption over to use SSL because we're actually using an SSL on our site , which gives this little lock symbol up here to make sure that our website is secure .

So we're going to be using that one and then just go ahead and click on save changes .

And then the other thing that we're going to do is come down here to purchase email notification and it's going to send a copy over to your email at Gmail .

So this is gonna be whatever you use to sign up for wordpress with and everything else .

So I'd recommend using the same email here and then you've got the email subject is thank you for your order .

This is just going to send you this kind of like template email .

Now , all this stuff is obviously going to get filled in with uh the customers info here .

So really just kind of ignore all these , you know , crazy codes and things like that here .

So what we're going to do is actually just send a test and that's going to say that it just sent a test email over to our Gmail account .

So now what I'm gonna do is just go over to my Gmail account and just check that to make sure that that all went through which you can see it did right here , the very top one and now obviously it's blank , it doesn't actually have anyone's details in it yet because they haven't actually created an order and I will show you how to do a test order in just a little bit .

But first , we need to move on to step number 13 , which is to set up payment methods .

Because what good is a job shipping website if you can't get paid for the orders that people are putting in ?

So let's go ahead and set that up .

So first thing that we're gonna do is just go back over to wordpress and I'll just kind of close out of some of these tabs , kind of clean things up a little bit .

And then we're just going to go over to payments right over here .

So you can just click on payments underneath settings and here is where you can put in the credit and debit card , uh information so that people can pay you through their credit card .

So first thing that we're gonna do is change the service from paypal over to Stripe and Stripe is just the free service that we're going to use in order to have that money be sent over to our account .

So it's just kind of like a safe method for people to pay .

It's super highly rated tons and tons of websites all over the internet use Stripe .

So what we're gonna do is just give this a title like credit slash debit card like that .

And then we're just going to enable the stripe payment option .

And then you can see if we just scroll down and we're gonna need to put in a few details here .

So you definitely want to make sure that your currency is in the correct currency for wherever your store is or you know , whatever country that you're hosting your store and I'm in the US .

Um So I'm gonna leave that as the US dollar because that's kind of how I want to be paid and then just make sure it says your language and then we just need to put in a couple of keys here which you can get at Stripe .

So I'm just gonna say retail and I will just say something like I'll just say other merchandise for now and then the website , which is just going to be your new domain name and then a description of your products and then just click on next and then we're just gonna say , no , our products are shipped from a fulfillment house .

And then it says how long after paying all your customers typically receive their goods , we'll say about within two weeks or you could do within a month .

It's really gonna depend on what your shipping methods are that you chose whenever you chose your products .

But I'm just gonna go ahead and say within two weeks and then this is what's gonna actually show up whenever somebody were to pay .

So the statement descriptor , it's gonna say your domain name up here .

I'm just gonna send you a little bit of a code and then you'll just put in that code and then you'll just want to save this little code somewhere wherever you can .

So I'll just copy it to the clipboard .

It's just in case you lose your phone and then you need to do the two step authentication again .

So just go ahead and copy that and put it somewhere safe on your computer and then we'll just say next and then just kind of review all of your details , make sure it all looks good and then just click on done .

Cool .

So now we still need to get the publishable key and the secret key .

So what we're gonna do is just go over to developers and then just click on API keys , then you'll see the publishable key here and then the little secret key .

And what we're gonna do is actually check view test data because we're gonna end up doing a test um purchase on our site .

So this is gonna allow us to use kind of like a default credit card that they give you in order to actually make a purchase on your site .

So I'm just going to go ahead and copy this , which has been copied to my clipboard and I'm just going to go put that in over here underneath the publishable .

And then I also want to put in the secret key .

Yeah , which just copied and then we'll just put that in here and then just click on save changes .

There we go .

Your credit card settings have been saved .

And then now you can also do paypal if you want .

So you can enable the paypal option right here .

So just go ahead and click on that , make sure that your currency is correct .

And then we're also going to change the integration method over to classic .

And that just means that all we're going to really do is just put in our paypal email .

Because now when I , if I , if I'll show you how to do that , I'll just put in some numbers and you won't understand what's happening over there .

OK ?

So what we'll do , we'll create all these things and at the end , we'll do all the margin and the padding settings so that you can understand better better .

Because the main idea is to explain you guys and you should have , you should know what you're doing .

You just have , don't have to follow me .

When I put two pixels , you put two pixels but you don't know why I'm doing that .

So that is not what I want .

I want you to understand .

OK ?

So I'll do that all these things later so that you can understand what's actually happening , all that .

Why we are putting this number , why we are doing this and that .

OK ?

Now let's again , click on open this link in a new tab edit page .

OK .

Now , first let's see what is the next section ?

This is the next section .

OK ?

We have a title Separator subtitle and then four different features over here .

OK ?

Now , the other thing that we want to do is actually add some trustworthy um icons that let the people know that it is safe in order to put in their credit card information here .

So in order to do that , just click on the main menu right here and we're just going to go down to customization and then just go to check out features .

And what we're gonna do is just scroll down and we're going to enable the trust box .

So that's gonna put these little symbols on here that lets people know that , hey , this is all safe .

It's good to go and you can even change the text here if you want as well .

And then we'll also scroll down and do this one as well .

Just anything we can to make it look much safer for people .

So let's just go ahead and save these settings and we'll save these as well .

Cool .

So now let's go ahead and check out our website so I can show you .

So I'll just open this up in a new tab and we're just gonna go down and add some products .

So let's just say that we want to add this fire pit product .

I'll just go ahead and click on it and I'm just gonna say add to cart and I was just gonna add it to our cart over here .

So I'll just go to proceed to checkout and there you can see we've got our trustable stickers over here , sorry , trustworthy stickers as well as down here .

And then we can now put in our information here and then we can continue to the shipping method which will go to the payment method .

Now , if you want , you can do a one page .

So right here is where you put in your shipping stuff and then you'd go over to the next one .

But really , we want this to be kind of like an easy one page sort of deal .

So let's go ahead and change that .

Just go back over here and we'll just scroll up to the top here and just check one page , check out and say save settings and then let's go back and refresh this .

There we go .

So now you can see that we've got the credit card payment over here as well as paypal option and they can put in their shipping details and do everything all on one page and then just complete the order .

Now , before we actually do the test payment to make sure that everything is working , I do want to move on to step number 14 , which is to set up shipping methods .

So right now you can see that all we have is the free shipping method .

I'll show you how to configure this a little bit better as well as add an expedited shipping or , you know , some sort of fancy shipping if you want to pay for a quicker shipping method .

And again , this is all going to depend on the products that you put on your site and whether the manufacturer can actually send them that fast .

But first let me update this website and see how a page looks like .

Then I'll show you that setting , then you will understand it much better .

OK ?

Now let's refresh this page .

OK ?

As you can see you guys at present , this looks really no ugly , but we'll do all those settings later on .

As I said , if you see over here , this is in two lines and here it is in one single line and I think this looks really better .

So we'll do all these settings later after we create this page .

OK ?

So that , you know , I will be able to make you guys understand why we are doing that setting and what changes that occurs when we do that setting .

OK ?

Now let's first create the next section .

This is the next section .

OK ?

So let's create this .

Come back to the dashboard , click on add container , select single column and in the add element , search for flip box .

OK ?

So this element's name is flip box .

OK ?

So make sure that whenever you're on Ali Express looking for products that they're actually able to do some sort of expedited shipping method .

So let's go ahead and set up the shipping .

So I'm just gonna go back over to my wordpress dashboard and then I'm just gonna go to ALI drop ship and then we're just gonna come down here to settings and go over to shipping .

So here is where you're going to put in all the countries that you want to ship to right now .

It says all are selected .

So that's every single country .

So what you'd want to do is unselected all and then just select the countries that you ship to .

So I would do something like United States and I'll do that .

I'll also do , I also shipping to Australia .

I could do maybe like New Zealand because it's right nearby , you know , and you could just add any that you want .

I could do China if I wanted .

It just depends on what again your manufacturers are actually able to ship to and you find all that information on Ali Express .

So let's just say that I did all of those .

So I've got four selected .

I might have a lot more depending on the products .

And then you'd want to select your default country , which is where you are .

So I'm in the United States .

So I'm just going to click save changes .

And then the next thing that we want to do is make sure that we have uh , free shipping applied to all products right here , which we do and it's set to enabled and that's $0 of any product in order to qualify for free shipping .

And then we also want to set up maybe like an expedited shipping .

So we've got expedited down here and we can also apply that to all products and it doesn't matter the amount again , we just want to apply it to all products and give them the option in order to pay for expedited shipping .

So what we want to do is actually come in here and edit this and edit the amount .

So shipping ID is expedited the title .

You could put Expedited shipping just like that and then the delivery time you'd want to put in whatever that delivery time is .

So you'd want to put something like , um , I don't know , 3 to 5 business days or whatever it might be .

It's all going to depend um on the products that you choose from Ali Express and whether those products actually have expedited shipping on them and how long that shipping is .

So that's all that stuff that I showed you in the beginning whenever you're searching for products and checking the shipping methods .

So you just want to put in the exact same uh numbers here for whatever their expedited shipping is .

So this is just kind of a placeholders that don't exactly copy this , but I'm just gonna put it in for now and then for the shipping cost , we're going to put in something like $10 or you could do $20 whatever it might be , but I'll just do $10 and then you can choose your shipping zone down here and then you can apply it to all products , um , or certain categories if you want to , but I'm gonna apply it to all products and just click add and then you could even select certain products here if you wanted to .

Um But I'm just going to apply it to all of them .

So I'm just gonna say add , add , add , add , add , add and then just click on the X .

So there we go apply to these products .

So you could do certain ones if you want to .

It's all gonna depend .

So this is what you want to do .

It's gonna get a little meticulous coming in here and writing the exact number of business days depending on what each product is .

Now , these are all gonna have different expedited shipping .

So again , this is sort of just like a placeholder to show you how to set up these shipping methods .

So now I'm just gonna click on save .

There we go and then just click back and there we go .

Now we've got , our cost is $10 for our expedited shipping and we've got five products in there .

You could also apply it to all products if you want to , I just went ahead and select them all .

Now let's just go up and click on save changes and then let's just go back to our shopping cart and I'm just going to refresh this page .

And now you can see we've got expedited shipping over here , which you can select , uh , right here and then that's just gonna add that shipping cost to the total amount .

And then they've also got free shipping on all these products as well .

And if you do want to put in a time , like let's say , you know , 10 to 15 business days or whatever it might be or 10 to 20 you can just go back over to shipping , go over to free and click on edit and then you can put in that delivery time here .

So I would say something like uh let's say 10 to 15 business days .

Again , it's all going to depend on which products you select and what the manufacturer can actually ship .

So you want to make sure that these are going to match the manufacturer .

Otherwise , if you say 10 to 15 , but it takes 20 they're gonna be a little upset that they got their product late and they might leave you a bad review .

So I'm just going to go ahead and click on save and then save changes and then go back to the shopping cart and just refresh this .

And now you can see 10 to 15 business days is the free version .

And now before we do the test payment , I want to show you step number 15 , which is to customize your thank you page .

So whenever somebody actually submits an order , it's going to take them to a thank you page that has like a confirmation of their order , which you'll see in the next step whenever we do the test payment and also show you how to check orders and things like that and submit orders .

But for right now , let's go ahead and customize that page before we get there .

So let's just go back over to wordpress and then we are just going to go down .

Actually , we're gonna go up to main menu and we're going to go down to customization and then go over to thank you .

And here you can see there's an image on there for the thank you page .

So we're just going to go ahead and remove that and put in our own .

So I'm just going to go to upload and I'll just select one from my media library like let's say this one right here and then I'll just say select and then you can also crap it if you want to .

So I could do something like this or maybe move it up just a little bit , just grab like the best part of the image here with the mountains in the back and I'll just say crop and then what you can do is come down here and you can customize that page a little bit .

It's gonna say thank you for your order .

Your order has been placed , things like that .

So , or if their orders failed , uh you can customize the message here if you want , but I'm gonna just go ahead and leave everything as default , but depending on your shop , you might want to customize this .

So I'll just say save settings .

All right .

So now let's go ahead and move on to step number 16 , which is to do a test payment and submit orders .

So obviously you want to know how to submit these orders so that people can actually get their products .

Otherwise , you know , you'll get bad reviews if you're just getting a bunch of orders but not actually giving people any product .

Now , you don't actually have to ship the product , but you do have to do a little bit on your end to actually submit it to Ali Express .

So let me show you what I mean .

So this is the recent work section .

But before we create recent work , these are actually different portfolios , we'll have to create different portfolios .

OK ?

So now before creating portfolios , let me tell you uh let me show you all these things which I have uh which I promised for example , adding some padding at the top , making this thing over here .

OK ?

All these settings now come back over here .

Now first what we have to do , we have to add some space at the top like we have below this uh content .

So we want some yellow space about this content also .

OK ?

So for that select the content , so this is the content over here and click on this column settings , go to design and at the top padding put in 50 pixels .

OK ?

Now click on save .

Now what we are saying , we are saying that uh about this uh column , we want 50 pixels of padding .

OK ?

And what that number is is 4242424242424242 .

And then you can just put in your name as the card holder name and then you can put in any expiration date and CV C that you want .

It's completely random as long as it's an actual uh month that's ahead in time and not one that's already passed .

So I'll just do something like 11 20 then for the CV C , I'll just do 123 .

Again , you don't actually have to put in any specific details here .

What's actually happening is it's reading uh this sort of test credit card number here .

And again , this is purely for testing purposes to make sure that your shop is actually running properly .

So once the customer were to actually put in their credit card and select their shipping , uh , it's going to give them their total here .

So then I'll just say complete order and that's going to take them over to the thank you page .

Uh , that's going to give them a confirmation .

It's going to give them an order number here .

It's got their shipping address on there and everything else and then they'll also get an email as well um , of this confirmation of the order .

And you as the shop owner will also get an email that an order has been placed on your site .

Now , as a shop owner here is where you come in .

So let's say that you are logged in to your site through wordpress and you get an order email notification , you can just log into your site , which again is just your domain name dot com forward slash WP dash admin .

And then what you want to do is just come up here to Ali drop ship and then you would just come down here to orders and then you'll see the customer's order right here and it says fulfillment is not processed and you could actually change that to process shipped , completed or refunded if you had to refund them .

But before you actually do that , you want to submit the order to Ali Express .

And what's going to happen is you're actually going to pay for the product yourself on Ali Express for the base price .

So what it's gonna do is it's gonna open up Ali Express just like that like it's doing now and you want to just kind of give it a minute to autofill everything just like that .

So it should automatically fill their shipping information and everything else .

And if it doesn't just give it a minute , you should see it start to do its thing and then you can see that all that we really have to pay is the $2.47 .

And so what you're going to do is actually pay for this order .

So underneath payment methods , you would just select the payment method .

And if for some reason you don't get taken to this page , you can just click on buy and then it will automatically fill in their shipping information .

But mine just kind of did it automatically um and your should as well .

But what we're going to do is select a payment method and I'll just do a card and I'm actually gonna put in my card info here and basically pay for the product , but it's going to be shipped to the customer's address .

And again , I'm only paying the 2 47 but on my site , I marked it up to $8 .

So I actually got that margin because I made the sale .

So I'm just gonna go ahead and put in my card info and then what I recommend doing is saving this card so that you can do this again for all your other orders and then change the address of the billing .

So you don't want it to be the same as the customers , which is in here right now .

You'd want to put it in as your address .

So again , if you have a PO box or something , that's where you'd want to put that in , it's gonna be whatever address is hooked up to your card and then you just go ahead and click on continue and then once that's done , you just wanna go ahead and place the order and it's gonna say payment successful , which is awesome and then they will ship it to the customer .

So then what you'd want to do is come over here to wordpress and now that says completed , which is awesome .

So then you just go ahead and close out of this and then you just want to change the fulfillment from pro or sorry , not processed over to shipped or processed , but shipped is the better way to go because then they're gonna handle all that stuff .

And then whenever they actually get their product , you can change it to completed .

So you can just go ahead and change it to shipped or if you don't want to manually change this fulfillment to shipped every time , you can just go over here to settings and just go over to general and then you'll see order fulfillment up here .

And then you can just mark orders as processed or mark them as shipped , which is the way to go because then automatically it's just going to immediately get marked in there .

And then , you know , to just go in and actually order it that way , you don't have to keep manually going back and changing all the fulfillment orders yourself and then just go ahead and save changes .

And another thing that I want to mention is that if you ever have any questions about how to work anything with Ali dropship , there's these little how it works buttons up on all of these cards here .

So it doesn't matter on anything you're in , in this customized menu or any of the settings , you can just click on one of these buttons and it will take you over to Ali Drop Ship's Help Knowledge Base and it will tell you everything about it .

It even gives you a video and tells you how to work that one section and what everything does .

So this is a great way to get information in case you're ever confused .

And then you can also just go over to help dot ali dropship dot com and then you can access their entire knowledge base here and you've got all these different categories like getting started settings , common errors , products , orders and shippings , literally everything .

So if you ever have any questions , this is a great place to go .

All right .

So let's go ahead and look at our final website .

So I'm just gonna go ahead and refresh this .

We've got our images , all of our reviews down here and we can add this to our cart .

We've got a working shopping cart over here and then again , our whole checkout page is working well since we just did that in the last step as well .

So everything on our site is working and looking great .

All right guys .

So that was how to create a drop shipping website with wordpress .

If you enjoyed this video , please feel free to hit the like button or leave me a comment if you built one with me today and feel free to subscribe to my channel for more tutorials on how to build professional websites from scratch and how to make money with websites .

And if you want more quick tips , web design inspiration or behind the scenes , fun for this channel .

Check me out on tiktok and Instagram .

All right guys .

Thank you so much for watching and I'll see you on the next video .

Now edit this page home page which we created .

OK ?

Now let's scroll down .

So let's again , add this thing .

So just click on this save container and first delete top one and top two because we don't need that and now create create top one and top two .

That was all uh you know , without all the settings , padding settings .

So that's why we deleted .

Now add this save container type in top two , click on save container .

OK ?

Now add this also , OK ?

Save this also , this is also very important .

So you can just type in title for example .

OK .

This is also used throughout the website .

OK ?

Wait , wait , wait , we forgot one more thing .

Uh If you see uh if you remember , let's see if you , if you have anything like that or you know , let's see the home page and let me show you what we missed .

OK , let's scroll down here .

If you see the , this text , everything doesn't start from here .

You know , it doesn't start from the beginning , it starts from here and it's ends here .

OK ?

So it is very short .

This is , this has a very short column at the top .

OK ?

So let's do that first .

Then after that , we'll add this title .

So let's delete first and do that setting first .

OK ?

So what you can do just click on this uh setting design .

OK ?

Then here we have this padding .

So under left and right padding type in 15% .

OK ?

Left and right , 15% .

Now click on save , click on update first .

Let's update this page and see as you can see at present it is like this and as you can see now this looks awesome .

We have some gap from both the sides .

OK ?

Now we can add this uh or say this container , OK ?

Scroll down .

Now let's save this container , click on save container type in any name .

I'm typing title , click on save container .

Fine .

Now again , go to these portfolios , click on portfolio from your edit this Florida health facility .

Now we can create all these things from your .

So in the demo website , if you see uh in the portfolio at the top , there is a slider so you can create a new slider similarly which I showed you earlier how to create a slider for the home page .

Similarly , you can create a slider like this .

So what I'll do , I won't use that slider .

I'll use the same slider which we put in home page .

OK ?

So let's see , let's minimize this .

We don't need these things .

OK ?

Let's see .

Let's go to slider , select fusion slider and we are selecting the same slider , but you have to create a new slider for this page also .

OK ?

Now let's add this section .

OK ?

Let me show you how to copy and paste from that .

We have saved this section if you remember .

So just click on container and now click on library container , select top one fine .

Now again , click on container from your library container .

Now top two find .

Now click on update .

Now let's see the changes .

Let's open this uh link in a new tab where you guys it says page not found , you know why ?

Because there's a mystic over here .

So what you can do just click on how a year click on this dashboard .

OK ?

Now go to settings and uh Perma links .

Click on this Perma link under settings .

You'll see Perma links have all that and click on Perma links .

And from here you have to select this thing post a name , OK ?

Common setting post to name and click on save changes .

Now let's cut this thing now again , open this post in a new tab .

And now as you can see it is showing it is not giving us that same error , we can see the page .

And as you can see without creating , we have we just copy and pasted everything from here .

OK ?

Now let's create the next section .

These are the two sections .

Now this is the time we will be using two .

Now till now we have used only single columns , but now we will be using multiple columns .

OK ?

So how are you here ?

Click on add container and this is a three by four plus one by four container .

OK ?

So select that here .

It is three by 41 by four .

Now , here at the top , we have a simple text .

So let's add that , click on this add element , search for text block , just add this text and this is left aligned .

So we don't have to click on this button again .

OK ?

Now there is a very small separator here .

So let's add that click on this add element , search for separator .

OK ?

No style select single border solid , OK ?

Design .

Hello , OK .

Now march in top margin bottom .

OK ?

Let's put 30 margin where you also bought a size two .

We don't want any icon for this .

Now separated with just type in 30 pixels .

OK ?

So this is because this is really small .

OK ?

And alignment will be left not center .

Now click on save again , click on add element and let's see again .

We have some simple text .

So search for text block .

Select this and add this text .

Click on save .

Now let's add these things over here .

OK ?

So click on add element text block .

OK ?

So let's add this thing .

Now again , click uh we have to add this separator , same separator .

So what I'll do , I'll clone this separator , drag one separator over here .

OK ?

So as you can see now , we don't have to create that separator again .

Now let's add these things .

So again , click on add element , search for text block , OK ?

Now add this , OK ?

Paste it over here but sometimes what happens , you know uh you , I am pasting but you won't be pasting .

You have to type OK ?

So what do you have to do ?

First select the first one ?

OK ?

Whatever , whatever you're typing at the top and make sure bold is selected over here and over your heading six is selected .

But when I click over here , I see some problem , there's some problem going on , I guess .

So what you can do , you can click on this text OK ?

And make sure delete all these things we don't require this .

OK ?

Now this date or your as you can see date and before this date , you can just type in add six and after this date , you can type in this head six .

OK ?

And then this is common , this is just simple text .

So this is how you do it .

OK ?

Now click on save .

Now let's clone this thing two times .

So we have this , OK ?

Now let's update and see the changes .

Actually , we have to do some changes for you also capping and so on .

But let's first see how it looks like , OK , guys , as you can see , this is how it looks like we need some space at the top .

And also if you see there is uh some space over here but here it is very less space .

So let's add some space over here also .

OK .

So come back again .

OK .

How are you ?

Let's go to design , add some top 30 pixels , top padding .

And as I said , there's some padding at the right over here .

So let's add some padding at the right side , maybe 20 pixels and click on save again and let's copy this thing one more time .

Just click on update , come back over you refresh the page and hopefully everything should be fine this time .

OK ?

There is one problem .

We added 30 pixels at top over here , but we didn't add 30 pixels over here in this top .

So that is creating some problem .

Don't worry again .

Come back over here , select this column also and make this thing also 30 pixels top padding , click on save .

OK ?

Now click on update now , everything should be fine .

OK .

OK , guys , as you can see now this looks awesome .

Now let's see the next section that we have to create .

We have to create this section the product gallery section , project gallery section , a beautiful section .

So let's do that again .

Come back to the portfolio page .

First , there is a title and a separator .

So let's first add that .

Click on add container , click on single column , click on add element , search for text block .

Just add this title project gallery .

Now let's add this thing , clone this thing , the separator and bring this separator over here .

OK .

Fine .

So we have the title we have this .

Now let's add a new column and add all these images .

OK ?

So what you have to do is click on add columns and here it is three by two Ys and one by two , OK ?

Two by three and one by three .

I'm sorry .

OK .

So let's search for this is the 12 by 31 by three .

So in two by three , this is the image .

So let's click on this add element and search for image frame , select this image frame , upload the image upload files , select files .

Let's see what image that was .

This is the image , select this click on open and make sure in this size or year , full size is selected .

OK ?

Click on insert into page .

OK ?

Now we have a frame style , you can have different frame style you have how style , for example , when I have here , you can see the image zooms in .

So let's select this uh or lift up , you can select anything OK .

There are different power styles .

We don't want any border .

So just put in zero and we want it to be same like this .

So don't , don't put any border radius .

If you want you know to be round round image , then you can put round over here .

OK ?

Alignment is fine , everything is fine .

Just click on save .

OK ?

Now let's add these two images over here .

So click on add element again , search for image frame , OK ?

Upload the image .

Let's see .

This is the image , click on upload files , select files .

OK ?

So this is the image I guess click on open , insert into page .

OK ?

See you now click on element and add a separator .

Why ?

Because if you see there is a small gap between both these images .

So a separator also does the work of you know adding gap , it does the work of adding this kind of separator but also does the work of adding some gap .

OK ?

So let us see how in this style this time select no style .

Now go to design OK ?

Now in the margin bottom , just type in 28 pixels or 30 pixels whatever you want .

OK ?

Now everything else is fine , just click on save .

So we have some gap .

Now again , click on add element , search for image frame , select the image whatever you want .

Click on upload image upload files , select files and let's search for the next image .

This is the one click on open , insert into page save .

OK .

Let's edit and let's add that how type also click on save .

Let's update this image again .

Come back over here , upload and update this file and we should see the changes .

Let's scroll down here as you can see , we have this settings .

So here , OK , when we have all this , it lifts up , this is the and we have all those things .

So here we have this gap over here also fine .

So this looks awesome .

Now , let's see the next thing which we have to do .

So this is the next section .

But before creating this section , we will have to create a contact form .

As you can see it is using a contact form .

So let's first create this .

We have updated this file .

Now what we have to do just how this contact and click on this add new file in a new tab .

So we'll be adding a new contact form but you don't have to worry , you don't have to do any coding or so on .

Just go to the downloaded file here .

You'll see the CS S folder open that there is a file named CS S open that again .

OK ?

And here there is a code , contact form code over here .

OK ?

So just select this code from your copy it , first name this contact form anything .

For example , CF one contact form , one .

Now delete all these codes and paste in your own code , click on save fine .

And now this is the code , this is the short code that you would be using to insert this code to insert this contact form in our page .

OK ?

So again , come back to the portfolio page .

Now let's first see what we have to do .

We have to add a section and then under that , that section , we'll have this thing .

OK ?

So scroll down , click on add container , select us .

No , don't select this one .

Why ?

Because as you can see , there is a lot of gap over here at both these sides .

So for that , what we will do , we'll select a special column this time .

Let me show you this one by 62 by 31 by six .

OK ?

Select this one .

Now what you have to do , just click on this element .

Don't put anything over here , OK ?

You don't need to put anything over here .

It will automatically uh uh say that one by third one third of this thing is blank and here also it is blank .

Now just add things over here in this column in this particular column and this is blank .

This is blank fine .

Now click on this add element and let's add this thing .

This get a code to the thing .

OK ?

Now click on and search for search for what tag , tag something , tagline box .

OK ?

Now background color , let's see .

This is the background color , the yellow color .

So put in your own color code fine shadow .

You don't do anything border size , we don't want any borders so zero , OK .

Highlighted border position , not important but still OK .

Center alignment , content alignment should be center button link .

You don't want any button link , tagline title , just type in whatever you want over here .

It says get a code today .

So type in , get a code today and you don't have to put anything over here in the tagline description and also in the additional content .

OK ?

And put in zero margin , top and bottom .

Why ?

Because if you see this is a different thing , this tagline is a different thing and this is a different thing .

OK ?

Let , let me do one thing .

Let's not put this .

We'll put this later on .

OK ?

First , let's see .

Why do we have to put this thing ?

OK .

So once you do , so just click on save , now click on element and now select , select these nested columns from your OK ?

And now select single column .

Now why we select nested columns ?

We'll see that again .

Now click on this edit button .

OK ?

Now let's see what we have .

We have this thing , we have a simple text .

So just add a new element .

Search for text element , text block , just paste in this , click on save , then we have this contact form .

OK ?

So what do you have to do ?

Click on uh element and search for code block .

OK ?

Code block .

Now go to this page and copy this short code over here in in the blue line over here , you can see a very small short code , just copy that paste it over here .

Click on save .

OK .

Again , click on save , fine .

Do we have anything else ?

No , we don't have anything else .

Actually , there are a lot of things missing .

We do .

We didn't put any background color to this thing .

We don't , OK ?

So we'll see why we do that .

OK ?

First let's add this thing the background image over here .

OK ?

So click on this button , background , background image , select any background image you want .

OK .

OK .

This let's select this one .

Click on open .

Mhm Now click and insert into page save .

And as I said , I didn't put this thing uh background image over here just to show you guys .

And I also didn't put any zero margin because I want to show you what if you don't put that and why we do put that .

OK ?

So that is very important to understand .

Now let's first update this page come back .

Oh Yeah , let's delete this .

We don't need no , we'll need this thing later on .

So let's save this side .

Come back .

Will you refresh this page ?

OK .

So let's see how this looks .

This is how it looks .

OK ?

As you can see , we didn't put anything over here .

That's why no margin .

So that's why it is touching at the bottom , we didn't put any background color over here .

So this is how it looks .

Now , let's put a background color to this and again , see how it looks like .

OK , so we have to put a background color to this thing which includes this text box and the contact form .

So that's why we created a nested column .

OK .

So that we can apply a background color to both these things .

OK .

So click on this nested color , uh nested column setting , click on this setting button over here .

Now go to design background color type in F five F five F five for very light gray color .

OK ?

Click on save , save again , click on update .

Still , there are a lot of things left but I'm showing you one step by step .

Why we are doing all these things .

OK ?

OK , guys , so this is how it looks like at present .

As you can see , there is just no gap for this column for this thing .

So now by looking at this , you can make some conclusion that what all things we need , we need to add these things .

OK ?

From here , we'll need some gap for these things and we also need some gap at the top like we have over here , some gap at the top .

OK ?

So now let's do all those things .

One by one , come back with your first select the tagline box .

OK ?

And scroll down .

Now you are putting zero margin , top zero margin , bottom click and say what will this do ?

This will delete all this gap between this yellow section and this section and it will add both this thing up .

OK ?

So that is what it will do .

Now click on these nested columns again , click on this column setting .

Now go to design , go to padding and type in 6% of padding for all , OK ?

6% for all sign and type in margin zero .

We are here also , OK ?

Because we are here also , we don't want any gap at the top of this .

We want this thing to stick to this thing .

So here also margin , top and bottom zero .

Click on save , save again .

OK ?

Now what you have to do , you have to add some gap at the top and add some gap at the bottom .

OK ?

So padding , top 6% padding , bottom 6% .

OK ?

Or you can enter any number , for example , 30 pixels , 50 pixels , it's all up to you .

Click on save , click on update again .

Now we should see the changes and everything should be fine .

Let's refresh this page .

OK ?

Guys .

Now , as you can see , this looks amazing .

This looks beautiful .

OK ?

So now I hope you like the way I'm teaching because I think the student should know the person who is creating the website should know what he's doing .

OK ?

That's why I'm doing the mistake uh purposely and then I'm showing you how to correct that .

OK .

So we have successfully created this page .

So this is how you create a portfolio , fine guys .

So you can create many different portfolios like this .

Now , let's add this section , this portfolio section to our home page .

OK ?

So let's come to this home page .

Now let's delete this .

Now let's click on this uh open this thing in a new tab which says edit page .

So let's edit our home page again .

Now let's see what all we have done .

So we have done till here .

Counter Box .

OK .

Let's see what we have after Counter Box .

So after Counter Box , we again have this thing title , subtitle and so on .

Then portfolio and then this section , we'll add this section later .

OK ?

Come back to this home page section , let it reload .

OK ?

Scroll down .

OK ?

So you know now we don't have to create this section again , just copy the title section which we saved .

Click on container library , container , click on topic , sorry title .

So we have this thing over here .

Now let's add these portfolios .

We have created only one portfolio , but I have shown you how to create a portfolio .

You can create a number of portfolios with that .

Now create , create a click on these add columns , single column , add element portfolio .

Fine .

Now grid this is the grid type as you can see , OK , picture size , auto number of columns , three column spacing you can increase this or decrease this .

It's all up to you .

I'm putting 30 post per page .

We want only three over here .

So just type in three .

OK .

Show filters know what our filters .

We'll see that later when we create the work page that we will use all these filters .

OK ?

Then everything is fine .

OK ?

Everything looks fine .

Just click on save .

Now we have this section , the last section .

OK ?

So again , click on these columns .

Now select one by 31 by 31 by three .

Why ?

Let's see .

Select the first one .

Click on add element , select separator .

Let's see over here .

I don't know whether if you can see or not .

There is a very thin line over here and over here .

So very thin separate over here and here and there is a button in between .

OK ?

So let's add that separate a single border solid uh design a very , this is the color we want uh F five F five F five very uh light color this line .

OK ?

Then you can select an imagine top bottom , let's select 30 pixels , bottom border size .

Let's select two .

We don't want any icon with 100% .

OK ?

100% .

Sorry .

Fine .

Now select center align , click on sale clone this thing so that you don't have to create it again , make the take this thing over here at the left and now let's add this button over here .

So click on this middle , select this middle column , click on this add element , click on this button button , you can put any button RL button text , it says view all projects such as typing , view all projects fine .

Then what all we have we have go to design .

OK .

Select custom .

If you see the button color is white , actually the it does not have any color .

And then when we how this it becomes yellow .

So let's do that button color is white .

So let's select this white button over here again , select this white .

And when we have the how gradient color should here it is but in gradient , however , color it should become yellow fine .

So let's put yellow again , fine accent color .

When we don't have the normal time , it is black .

OK ?

So it is black both the time when we have or when we don't have it is black .

So let's select black from here .

OK ?

We don't have any borders that is fine , extra large button .

OK .

Rest everything is fine .

Just click on save update and let's see the changes , just refresh this page .

OK ?

Actually , there is some Mystic over here .

We forgot to put this thing .

Uh the uh featured image for this one .

It has a featured image .

We forgot to put the photo featured image for portfolio .

So let's do that .

Uh come back to your dashboard .

Click on this portfolio open this in a new tab again .

Click on this edit button .

OK .

Scroll down .

Let's see where we have here is the featured image .

Just select this upload image , select any featured image you like .

So let's search for good featured image .

OK ?

Let's select this one .

Click on open again , click on set , featured image update this thing .

Let's come back to the website home page , refresh this page .

Now as you can see we have the featured image .

So this is how you do it and this is the button as you can see .

So we also have the button .

We have everything over here fine .

And here is the uh slider .

If you , I don't know if you could see this , this is too light .

I think you should make sure guys you use a good color uh a , a little darker gray because I don't think you can see it over here .

OK ?

So for that , you can use a darker gray color , OK ?

Now , let's see the next section .

This is the R core core value section .

OK ?

But if you see below this section , there is some gap , the wide gap .

So let's add some gap below this , OK ?

Below this section .

So what we'll do , we'll add some gap at below this main section go to design and bottom .

It should be around 50 pixels .

And let's see whether we need any top .

So let's add some space over you also at the top , let's add 30 pixels .

So you click on save , click on update , refresh your home page and we should see the changes guys .

As you can see , we have some uh spacing over here and then we have this thing and then we have some spacing at the bottom also .

OK ?

So this looks fine .

Now let's add this section .

Our core value section again , come back to this home page .

Scroll down , click on add new container .

OK ?

First let's add this section .

So library container title , we already have this OK ?

We just have to change the title .

It says our core values .

OK ?

So select this edit this one and instead of this just type in our core values and make this thing as center line .

Click on save .

Now let's add these things .

OK ?

So click on add columns , single column and these things are called content boxes .

So just click on add element , search for con content boxes .

There it is now box layout , select classic icon on top .

OK ?

Number of columns , select four because here we have four different columns as you can see now title size , let it be 18 pixels that would be fine .

OK ?

Title font color is black .

You also we have black that is fine .

Then if we have body font color , then contain background color .

I can color .

OK ?

It is white which is fine .

OK ?

I can background set to yes fine rest everything looks fine .

I can background in a radius .

We don't want any radius so just we don't want any border .

So just put in zero .

OK ?

I can size make this as 60 .

OK ?

I can size should be 60 .

I can .

However , animation it should be pulsate .

So as you can see the animation over here is pulsate and select this pulsate animation color sign .

OK ?

Rest everything looks good .

Um Fine .

OK ?

Now let's start adding these things .

Click on this edit button first title .

So this is the title which says Great services .

Just enter that over here .

Content box , background color .

So this is the content box background color .

There's no background color , so that's fine .

Leave it .

I can we have this home icon .

So search for home over here , select this icon , scroll down flip , I can non rotate , I can non spinning .

I can none , I can color is white .

So just select this click on this white , I can background color is different if you , if you know sometimes if you see , for example , if you want the same background color , but if you don't know what this background color is , so what you can do is just right , click over here and click on inspect .

OK ?

Once you do so at here , you'll see this color .

OK ?

So this is the color and similarly you can do this for all these colors or wherever you need .

OK ?

In any website .

OK ?

So that is really helpful .

Fine .

Now let's come back with your I can background color .

Put this OK , I can bag on inner border radi radius .

We don't want anything .

So just put zero OK ?

Your content goes here .

So this is the thing that will come over there , just type in over here and just click on save .

Similarly , you can create different columns .

So we are just cloning this three times so that you don't have to create this again and again .

Click on save .

OK ?

Everything looks fine and we need this background color .

If you see the above background color is normal white , but this is not white .

This is gray .

So let's do that , select this container setting background background color and make this F five F five F five , I'm sorry , F five F five F five for light gray color .

Click on save , click on update and let's refresh the page and I hope everything will be fine .

OK ?

Let's scroll down here .

As you can see guys , everything is fine .

We have this background color over here .

We have these icons and when we cover them , we see this different beautiful animation .

OK ?

So we are done with this section .

Also .

Obviously , you don't have to clone , you have to use different icons every time but I just to save your and my time I create just clone this same icon four times .

OK ?

Now let's create this section , the testimonial section .

So come back to this page .

Scroll down , click on this add container , single column .

First , we'll have to add this design .

So for that click on this add element , search for section separator , sorry .

OK .

Big half circle bottom and background color .

This time should be this color as you can see over here , this color is same .

OK ?

So background color should be F five F five F five so that it matches with the above section background color .

OK ?

Rest everything is fine .

Just click on save .

OK ?

Now what we have , we have to add this title and this Separator .

So let's again , click on this container library container , select this title .

OK .

Now from this , let's select this one over here .

OK ?

Let's first add a column over here , single column and from this drag this title and drag this Separator because we don't and this time we don't need this uh subtitle over here .

So let's delete this whole container .

OK ?

So now we have this design , we have the title , we have the Separator .

So now let's see what is the next thing that we have to add ?

Now , we have to add this testimonial section .

So come back over your scroll down , click on add column , single column , OK ?

Click on add element and search for testimonials .

OK ?

Now the design is clean background color .

We don't have any background color .

So just select this and make this thing to the bottom .

OK ?

Text color is white .

So select this and select white from your .

Then we have random order , it's all up to you .

OK ?

Image visibility .

This is all fine .

Just click on this edit button to edit the testimonial .

Now let's see , this is the name of the person .

So in the name just type in this avatar , just select image because we have an image as the avatar .

OK ?

Now click on this upload image , select the image of that person .

OK ?

Here it is fine .

Click on insert into page .

Now here it asks for border .

It is just type in round over here because if you see this is a square image but we here we have a round image .

So just type in round and it will make these images round .

OK ?

Company you can put in the company link over there .

Testimonial content , just type in this content fine and make this thing uh center align obviously OK ?

Everything looks fine .

OK ?

Something is missing .

No , nothing is missing .

Just click on save .

Now we can add different testimonials .

So I'm just uh duplicating this testimonial .

Now click on save and now let's add this background color over here .

This background image if you see here .

OK .

So select this container setting background background image .

Let's search for that image .

OK .

This is the one click on open insert into page , save , save , scroll up update , come back or reload this page and we should see the changes over here .

Oh Yes .

As you can see , we have all these changes over here .

It looks awesome .

So this is how you do it .

OK .

Now let's see , what is the next section ?

OK .

This is the next section , latest news .

These are basically our post , our articles that we have written or we have typed .

So before creating , we need to create some post obviously .

OK ?

So again , come back over here .

Now here you'll see this post option at the left hand side , just how that and enter , click on this , add new in a new tab .

Now , let's see how a post looks like .

First of all , let's open this thing .

OK ?

Guys , as you can see , this is how a single post looks like .

Uh This is the title .

If you remember whenever we create a new page , uh we were hiding the page title .

If you don't do this , this is how it looks like , but in post , we don't have to hide the page title because we want people to know what is the title of the post .

OK ?

So this is the page title .

We have our post over here and this is the sidebar .

OK ?

So let's start creating the post .

It is really simple and not really important in terms of website .

OK ?

So let's , this is the title , as I said , let's copy and paste this title over here .

OK ?

Then you don't need a fusion builder over here .

OK ?

This is all simple thing .

Now a standard thing should be selected from your from format .

Now you can add any category .

For example , let's see whether which category it falls under .

So for example , let's add a commercial category .

OK ?

So let's type in commercial .

And this is this category , this commercial category is different from that we created .

OK .

That was for portfolio .

This is for post .

So this is different fine .

OK .

Now the post disable first featured image said yes , we want to disable that use 100% with page .

If you do so then you won't see these things .

Now this sidebar over here , you won't see that .

So I would say no which is set to no fine .

Now you can see all these things over here .

So social , I don't want that a related post .

No , not exactly because this is a single post .

We don't want all these things or we have let's see whether we have it or not .

So we have the related post over here .

So let's enable that .

OK ?

And we have this share icon over here .

So let's enable both of those .

OK .

Let's everything looks fine .

Let's see the featured image .

So this is the featured image .

Let's OK .

Make sure just put this no disabled featured image .

No , we don't , we do not disable featured image .

We want to show this featured image over here or if we find any problem , then we can do these changes later on .

OK .

Now let's set the featured image upload files .

OK .

Let's search for that one .

This is the one just select and click on open set featured image .

OK ?

Now page 00 again .

Now please title here .

We don't have to do anything .

Now , fine .

It should be default .

Now this is where you have to type in the post .

For example , here this is the post .

Now let me first copy everything and OK .

OK .

Let me OK ?

Fine .

Let me show you , for example , just type in some text over a year , you just typed in some text .

And for example , you want to make this text bigger like we have over here .

You know this is a big text and this is normal text .

So this is all normal text but I won't make this text because so what I do is just select this and from here I select heading two .

OK ?

So this would become something like this and you can add an image over here .

So to add an image , just press enter , click on add media and you can add any image .

For example , let's add this image over here .

So just click on insert into post .

This image is added OK ?

And after that , suppose what we have , if you want to make these things , you want to have different bullet points , then what you can do is let's copy something .

For example , let's copy this text , paste it over here , let's make it into different bullet points .

For example , 1.2 0.3 and let this be the fourth point fine .

Now we want to add bullet points over here .

So what we can do , just select everything .

And over here we have this bullet list , just select this and here everything will become something like this .

Now , this is a block code .

So let's first select something simple text .

OK ?

Face to do here .

Now suppose I want to make this text as block code .

I like this .

OK ?

So what I do , I just select everything .

And over here you see this block code , just click on that and this will become like this .

OK ?

Rest everything is just normal stuff .

OK ?

This is not rocket science or something .

This was really easy .

Now , once you're done , just click on publish now with this post in a new tab .

OK ?

So this is how it looks like OK ?

We have a featured image , then we have this thing where OK ?

This , we put this as S two .

If you H two , if you remember , then this image displayed this block code , OK ?

And this is this sidebar fine .

You can add uh you can make changes in this sidebar through your go to appearances how appearances and that you have widgets .

OK ?

So this is the block side but you have to do all these changes over here .

For example , if you see your , your search recent post .

So here it will be search then recent post and so on .

You can see and if you want to delete this recent post from your just select this , delete it .

And suppose if you want to add something like calendar over there , so what you do is just drag this calendar and from just put it over here .

OK .

Now let's refresh and see whether that change has taken place or not .

OK ?

So as you can see now we have the calendar , we don't have those recent post .

So this is how you make changes in the sidebar .

Fine guys .

So we have created a post .

We have seen how to make change in the sidebar .

Now let's add this post in the home page .

OK ?

Let's first come to the home page .

Let's see how it looks like .

OK ?

Here it is .

Let's add those post over here .

So again , just delete this , delete this again , this is our home page .

Fine , scroll down .

OK ?

First click on add container library and title , OK ?

Because we have this title and so on from here .

Now let's change the title text to latest news .

OK ?

Just copy this thing from your paste it to your center align save .

OK ?

Then we have this thing , the post , the block element .

So again , click on this column , add new column , click on add element , search for blog .

This is the one .

Now don't select large select grid from here .

OK ?

Number of grid layouts of columns , three grid layout , column spacing .

You can put 30 40 whatever you want .

Spacing .

Post per page , we want three .

It's fine .

Then then then everything should be fine .

Show thumbnail .

Yes , this is the thumbnail .

So we can see the thumbnail show title .

Yes , we are seeing the title over here .

OK .

Then we have linked to the Post .

Yes , we want to link to the post show exert .

So this is the exert as you can see , we have the exert 35 40 whatever you want .

OK ?

Show metadata , show author name , you can hide or something .

Comment , suppose you want to hide these things , show category , author name , then you can hide those things .

OK ?

Then show tags .

We don't want to see tags .

No .

OK .

OK .

So this is it , I guess this is how it should look like .

Yeah , just click on save .

OK ?

Fine .

So we have entered this thing over here also .

Now let's save and see the changes .

So just click on this update button .

Let's come back to the home page refresh and hopefully we should see the changes now .

OK ?

As you can see guys , we have , we can see the changes over here .

OK ?

We have only one post .

That's why it's , it's it's showing only one post .

If you have multiple posts , three post , it will show three posts .

OK ?

Now let's see the next section .

OK ?

So the see here again , we have this so you can just copy that from A B section from uh where is that section ?

One from this section and just paste it over a here fine .

So you can do that easily .

Now let's add this section , trusted partner section .

Come back to the home page again , scroll down .

OK ?

Click on this add container single .

OK ?

First we have to add the title .

So just delete this again .

Click on this add container library container title .

Just change the title to trusted partners .

OK ?

Now let's add this thing image carousel .

So click on this add column , single column , click on this add element and search for image carousel .

The first one , OK ?

Bulk image upload .

Let's upload all the images which you want .

So just click on this upload file , select files .

Here are all the images as you can see , just click on open , click on insert into post .

Let's add one more image actually because we have only five , we want six .

So just add one more image .

OK ?

So we have all the images so you select them , click on insert into post OK ?

Picture size fixed .

How type you can select any how type if you want auto play , you can set two yes or no maximum columns as you can see 12345 .

So you can set this to five columns , spacing 13 fine scroll items .

One , what does that mean ?

When we scroll through mouse , we can scroll one at a time as you can see one at a time .

Ok .

So that is what it means .

Show navigation .

No , as you can see , we don't have any navigation .

We don't want to spoil this design mouse scroll .

Yes , as I showed you , we can scroll through mouse here and there .

So yes , border .

We don't want any border fine .

Ok .

Rest everything's fine .

Just click on save , let's update and see the changes over here .

OK ?

Let's refresh this page .

Oh yes .

As you can see , we have this trusted partner section over here , beautiful section .

But uh yeah , this is fine .

Everything looks fine .

So with this , we have completed the home page and home page was the uh longest page and this actually does 90% of our work because now most of the page will require most of the files from the home page .

OK ?

So we don't have to do all these things again and again , we'll just copy everything from home page and just take them to different pages and let's see which page we have to create .

Now , now let's see the about us page .

OK ?

So come back to the dashboard , click on this button about this page .

OK ?

Just enter the title about or about us whatever you want .

OK .

Template 101st width .

Obviously , you know that slider , you can create a slider for this about page .

Also , it's all up to you .

I will obviously not create that again and again .

So what I'll do is I'll just use the same slider which I used on home page page go to and just type in zero padding for both top and bottom .

OK ?

And hide the page title fine .

Now , just enable this fusion builder .

And let's see .

First , we have this , so we have put this thing .

Now , the next section is this two , we already have this .

So let's click on add container top one again , add container library , container top two .

OK ?

So we have added this and this .

Now this also we have title .

So again , click on add container library , container title .

We just have to change the title to building Inspiring spaces .

Fine .

Just click on this button , paste it to your align center .

Fine .

Now let's add this image .

So just add this , add a new column , single column , add element , search for image frame , select this upload the image , upload file , select the file .

OK ?

This is the file , just select it , click on up open now click on insert into page , fine center alignment and rest .

Everything is fine .

Just click on save .

Now , let's see what we have .

We have this thing , meet our team section .

But before that we have this design is if you could see this .

So let's add that design .

First click on add container , single column , click on this add element and search for section separator .

OK ?

We have big half circle bottom background color .

We'll put this background color over here , OK ?

White .

So put in to a year .

Fine .

Click on save now .

Let's add this section again over here title subtitle .

Fine .

So add a new container .

We are adding a new container just to copy .

We don't need a new container just to copy title subtitle from that that container from here .

OK ?

Select title , OK ?

As I said , just add a new column in the about container and just copy this title subtitle .

OK ?

Your Con Separator and subtitle from your and now we don't need this container .

So just delete it .

So we have these themes .

Now let's add this person .

So again click on columns .

Now click on these three columns , fine , select the first column , add element , search for person .

OK ?

Select this name of the person .

So let's Jo Johnson title is commercial director , whatever it is , then we have this thing short description , just add that OK ?

Picture , just upload that guy's picture , that man's picture .

Actually this is the person .

Just click on open , click on insert into page , scroll down picture URL .

You can link this picture to some URL .

However type , you can just have a have animation over here background color .

If you see over here , the background color over here is white and the background color for this section is gray .

OK ?

So gray background first section and for this person white .

So select white from your OK .

And just put this thing to the top alignment center picture style color .

Leave it , leave it , leave everything else .

So shall I can position ?

It is set to top ?

OK .

It is stop fine .

That is fine box so I can select yes .

OK .

So shall I can radius ?

You can select any radius you want ?

Fine .

Then we have social iIn custom colors and social I box colors .

For example , over here , if you see social icon color is white , OK ?

So what you can do is just type in white fine .

But you know what there are if you are using different icons and if you want different color for different icons , then you can put this uh pi pin and this pie pin and add in different colors .

For example , for both the colors and for both the icons .

If I want white , then I'll put this white color over here .

So I so I can custom box color .

So box color is yellow as you can see .

So what I can do , I can just put in yellow , OK ?

For both .

So I'm putting yellow for both fine social ICA tool tip position is set to talk .

Now select any put any three icon or any four icon , five I can whatever you want or your Instagram , I can or Instagram link , RSS link , Skype link , whatever link you want .

OK .

Fine .

After you do so just click on save .

And similarly , you can create three or four unlimited persons you want .

Fine .

So we have created this person and after that , you just have to copy this recent work from home page and paste it over here .

And similarly , this testimonial from homepage past it over here and trusted partner from home page , paste it over here and copy this uh from portfolio , this whole section and paste it over here .

OK , guys .

So let's save , I published this thing .

OK ?

Let's open this page in a new tab .

Oh guys .

This is how it looks like we have everything which we need it .

OK ?

I think we missed something again like it happens all the time .

We miss this background color over here .

So let's put that OK ?

This is the section select this container setting , background , background color F five F five F five for light gray color .

Click on save again , click on update again , come back to this page refresh and hopefully this time all everything should be fine .

OK ?

So now everything is fine .

You can see this background color here .

It is white here it is gray .

So everything is fine .

Looks awesome .

And you know guys how I've shown you how to save containers .

So what you can do just go to home page save this recent work , container paste it over here .

Save this uh uh testimonial container paste it over here like we are doing for title uh and these two sections , top and top one and top two sections .

So you can do the same thing uh for here and you'll need to do the same thing for different pages .

For example , now let's create the next page , the services page .

OK ?

As I said , you mean once you create the home page , everything is easy for you because we are using most of the thing again and again .

OK .

So again , come back to your dashboard .

Click on this add new page .

Enter services at the top title as services .

Fine template , 100 person width , sidebar , you can create a sidebar for services and enter that .

We want zero padding , top and bottom for page .

OK ?

Page title just hide that .

OK ?

Now let's see what we have over here .

Again , we have these two things at the top .

So just enable fusion builder from your he had cantina .

OK ?

Not this one .

We just have to add a container from library top one again , click on add container , library container top two .

Now let's see what we have after this .

So we have directly this thing , the tab section .

So what you have to do just click on this container , single column , click on this add element and search for tabs .

This is the one select this design , clean layout , horizontal , vertical .

So it is vertical justify tabs .

Yes , because as you can see all the tabs are of equal size , so justify background color .

OK ?

Control the background tap color , leave empty four or default color .

See the background color if you see this is different .

So just put that background color , inactive background color is gray , light gray .

So just put that also fine border color .

We don't have any border color so just make this thing down .

OK ?

Rest everything is fine .

Let's first create the first one services overview .

So just type in services who we were here .

I'm sorry , typing in services who we were here .

We don't have any , I can just copy everything or whatever you want to type .

You can create a post just like we created a post .

You just have to create a post and paste everything over here .

OK ?

Click on save now .

Similarly , you can create different services .

I'm just copying and pasting it over here , click on save , click on publish and everything should be fine .

Let's see , open this services page in a new tab .

OK ?

So we have the slider .

We have this , we have OK .

As you can see , we have the same .

That's why it is uh showing the same thing .

If we had different things , it would show different things .

Let's add some gap at the top .

So what you can do come over here , click on this row container design , top padding .

Let's add 40 pixels for this .

It's all up to you .

You can add 30 40 50 anything I thought 40 would be nice .

That's why that's why I added 40 .

Now again , let's refresh this page .

OK ?

So we can have uh we have this uh setting over here .

So this is this was the services page .

And again , everything in the bottom is present , you just have to copy and paste it .

OK ?

Now let's see the work page again , come back where you click on add new page .

Let's get rid of these pages .

Now put in the title as work or work page whatever you want .

OK ?

Template 100% width slider , same slide of page .

We don't want any adding for top or bottom .

So zero , top zero or bottom page title is hide it .

OK ?

Come over here .

Use fusion builder .

Again , we have the same settings over here .

So click on this add container library container , top one , add container library , container , top two .

So we have this both one and two .

Now this is what we have to add .

So again , click on this add container , single column , add element and this is portfolio .

OK ?

We have actually created only one portfolio but this is portfolio .

Now this is grid fine sizes , auto number of columns .

We have only two columns .

So two column spacing 20 .

OK ?

Fine .

Let's make it 30 you can make it 2030 whatever you want per post per page .

If you want eight , if you want 10 , you can increase or decrease that show filters .

Yes .

Now let me show you this is what the filters are .

You can filter it according to different portfolio categories .

OK ?

Now show pagination , you can show pagination if you want .

Let's see , we don't have a here but let's uh I'll show you when if you enable this , what happens .

OK ?

Now everything looks fine .

Just click on save .

Come over here , click on publish .

Now let's view this page in a new tab .

OK ?

As you can see we because we have only one .

That's why we are seeing only one over here .

OK ?

And after that , you just have to add those same settings , trusted partners and this one .

OK .

Now let's see the articles page .

OK ?

So again , come back to the dashboard , click on add new page .

Let's get rid of this work page type in articles , post whatever you like .

I'm typing articles , articles fine .

Now let's see the first section is same and then we have the articles fine .

So 1st 100% width , let's add the slider , no page padding , top or bottom .

We don't want the uh these title bar .

So just hide that fusion builder on container from library container top one find then again container , library container talk to .

Now let's add this blog .

OK ?

So again , click on add container , single , click on add element and search for block .

This is the one large , yes , select large number of post two show per page six .

OK ?

You can select all this order by descending or sending show thumbnail .

Yeah , we can uh see the thumbnail over here .

Show title here .

We have the title over here .

As you can see , this is the excerpt .

This is the author .

These are different texts .

This is the read more text .

OK ?

So you can uh select accordingly whatever you want if you don't want anything .

Suppose this is the author name .

If you don't want this , just make this no , and that will be done .

OK ?

Fine .

Everything looks fine .

Just click on save .

OK ?

And if you see uh there is a good amount of gap or adding uh about this .

So let's add that you , you can add this kind of padding uh padding both from your or from your OK ?

Top padding .

So let's add it from your top padding .

Let's make it 50 pixels click on save and there is also some settings over here .

There is a lot of gap from both the sides .

So there is around 15% gap from both the sides .

If you see like we created for the title , the title has 15% gap from both the sides .

So this is same for that .

This also .

OK ?

So just click on this edit design fading , left and right should be 15% OK ?

Both left and right , 15% just click on save , click on publish now let's view this page .

So open this link in a new tab .

So as you can see this looks awesome .

If you don't put that 15% from both the side , this would be really big like covering the whole whole page .

OK .

So this is , this was the article page .

Do we have anything below this ?

OK .

This page is fine .

There's nothing below these articles .

OK .

Now let's create the last page , the get code page .

So let's click on that .

Come back to your website dashboard , click on this add new page .

You can also add a new page from here .

Obviously just click on anywhere you want .

Enter the title , get code or whatever title you like .

OK ?

Template 100% width , obviously , slider fusion slider , select your slider page zero , bottom padding , zero , bottom top , OK ?

Hide this title bar enable fusion builder .

OK ?

Now , obviously the first two will be OK .

Here we don't have that top on top two .

So we don't have to put this , we just have to put this thing .

So if you see this whole page is divided into two different sections , OK ?

And I think it is one by three and two by three .

OK ?

Yeah , it is one by three and two by three fine .

So click on this add container , select one by 32 by three wherever it is OK ?

Here it is one by 32 by three .

And here this is what you have to type first .

There is a simple text .

So just click on add element , search for text block , OK ?

Type in the text you can see then we have this separator , add element search for separator , fine , no style single border layout design , select the color fine .

Then you can add some margin , bottom top , whatever you want , border size two pixels .

Like we always have 30 pixels width for this one because this is quite small , very small .

OK ?

And alignment should be left as you can see it is left aligned , click on save .

So we have this now let's add these things .

These things are checklist .

So search for checklist over here .

Here it is , I can color is something like this gray color .

So select that checklist circle .

No , this is not circle .

I can .

So just select no item size for 13 , you can let's select 14 or 15 just to make it a little bigger .

OK ?

Let the rest .

Everything looks fine .

Just click on this add or edit element to uh do this .

First one is home I can and we have this text over here .

So let's search for a home I can over here .

OK ?

Home .

I can select it from your OK , deselected again .

Selected and enter your ex to year .

Click on save similarly .

You can do it as many times as you want .

Click on save fine .

Now what you have to do , you have to do these things again .

OK ?

If you see we have these things again , so just copy these three things again and paste it and you can change the same settings for a year .

OK ?

Again , if you , because we have the same thing , the title Separator and checklist , title Separator checklist .

OK .

Now let's add an element to this one .

Yeah , it is .

It is .

What do you call it ?

Title section ?

So we don't , what we do is we add a new container just to copy the title section .

OK ?

Select title , OK ?

Select copy this title from your past it over your copy , this separator , paste it over your copy , this paste it over here .

Now delete this container .

We don't need this .

So we have all these three things .

Now we need to add this thing , the contact code , OK ?

So click on add element , search for code block and again go to that contact page , copy that same code , paste it over your click on save and this is background color is fine and we have some gap over here as you can see .

So let's add some gap .

Click on this design , top padding .

Let's make it 60 pixels , click on save and everything looks fine .

So let's click on publish .

Now let's view this page in a new tab .

OK , guys .

So with this , we have created this thing also the last page also .

Now let's create the menu .

OK ?

So come back to the dashboard , how appearances and click on menus and let's come to homepage from your OK .

There is also one problem .

We haven't set the home page as the home page .

We have created the homepage , but that is not our home page technically .

So we have to do that .

So what you can do is just click on this customized button , click on this static front page , a static page , select front page and select this home page from your OK .

And select postage and select articles from your fine click on save and publish .

Now come back , go to site identity .

And if you remember , we didn't do any settings while uh uh purchasing the T MD hosting .

So here you can name your site name and you can also name your tagline from here and you can also upload your fav icon from here .

OK ?

So once you do , so just click on this button .

So now we have our home page .

So this is basically our home page now .

OK ?

Now go come over here in the menus , name any menu , for example , main menu or main whatever you can create it , primary menu , you can give it any name you want .

OK ?

Now make sure this main navigation is selected from you .

Now , let's see what all we have .

We have the home page about a space services page , all these pages .

So let's select all this page and select everything from your OK .

We have the home page at the top and the get code page at the bottom OK .

And the get code page is actually a button .

So let's do that .

So just expand this thing .

Click on these Awada options and from your style select button , large or button extra large and click on save , click on save menu .

Now come back to the website and just refresh the website .

Everything should be fine .

That's right .

OK .

I think we have added this home page two times .

OK .

Here it is .

So just delete this from your again .

Click on save menu again , refresh this website .

OK ?

Everything looks fine .

OK , guys .

Now let's uh do this the foot setting .

We don't have anything in the footer yet .

As you can see here , we have a lot of things in the foot .

So again , come back to the dashboard and how our appearances again .

Click on widgets .

OK ?

Now , here you'll see photo widget one fidget , photo widget two and three .

Now what you have to do , scroll down , select this , this text and select photo widget one and click on add widget .

OK .

Now go to the CS S file and there you will find the photo widget .

OK .

Here it is photo widget one .

Select everything , go to this text section .

OK ?

Make sure you are under text section , paste everything fine and click on save and obviously you can make all the changes .

This is basically this .

So if you want to make these changes over here , you can select that uh from here .

Here it is .

We are specialist in whatever it is just you can change all this text .

OK ?

From here .

So that is how you do it .

Click on save now , select foot wege two and we have to add the Twitter or Facebook or whatever plugging you want .

You , you can just you uh up uh update that .

For example , let's select this Awada Twitter photo widget two , click on add widget and you have to first set up an Avada Twitter widget .

So just click on this link .

Uh just follow all these steps and you will create a key over here .

OK ?

That is really easy .

So you can do that by yourself .

Now , the third one is this contact us today .

So this is the code over here .

So just copy this code again .

Come back over here , select the widget text from your now select photo wit three , click on add widget again , go to the text section , paste everything and obviously from your , if you want to change anything , you can change it .

For example , residential location , you can if you want to put your own location , just delete this and type in your own location .

Here is the email address , just delete this type in your own own email address .

OK ?

Now click on save and the last one is a map .

So what you can do just open a new tab type in map dot google dot com and select the map from here .

For example , I want this map .

So I go to menu , OK ?

And your share or embed map , just click on that , click on this embed map section , copy this code come back over here through the widgets again , go to text .

Now this time select photo widget four , click on add widget again , go to text section , paste everything and instead of with 400 type in 350 .

OK ?

And instead of height 4 50 type in 2 75 OK ?

So it would look something like this .

Now , click on save now , go to your website refresh and let's see what happens .

OK ?

As you can see you have this thing over here , OK ?

You have this thing over here and this is the map but we missed some things .

For example , we forgot to put this thing title .

So let's put this title in the widget .

OK ?

Here you have this title and in the second visit here is the title option .

So just you can put in contact us today , OK ?

Put the title over here .

Fine here .

Also you can put some title , OK ?

And now we are missing some designing thing over here .

For example , if you see this looks very simple , there is a twist but but here the latest tweets , this is yellow color .

This is bold , the uh the font is also different .

So let's see the photo changes now .

OK ?

Make sure you save everything .

Till now .

Now what you have to do come back to this website , your dashboard again , however , appearance , however , Avada and select theme options , OK ?

From your select photo here it is and how photo and select this photo styling fine .

Now , first make this thing on 100% photo width and now we have to change all these padding settings .

So first a top padding make this as 80 pixels then 4% OK ?

Then 70 pixels then again , 4% .

OK ?

So basically you know what this is by now , you should know .

OK .

Now let's change all these things , the uh title this font from your photo photo type .

Let's change this .

So select this and select Monett Monts er rat , OK ?

The aerial family fine gold 700 .

As you can see in this website over here , it is quite bold , OK ?

You can see all these changes over here also , OK ?

Now instead of 13 pixels make it 15 pixels , OK ?

Now let's change this font color to our favorite color .

OK ?

So now this would look something like this after doing this , just click on save changes again , come back to this blog , refresh the website .

And now as you can see we have this option over here .

So this is this looks nice .

Now let's change this bottom photo as you can see over here , it says copyright 2012 17 Avada .

You want your own company name over here , OK ?

So what you can do just uh come back to this same setting , go to photo content , scroll down and here it is .

So , so suppose I don't want this 2012 .

So I just delete it .

And instead of Avada , I want to put in my company name , for example , blog dot OK , sorry .

Instead of a just type in block two find , all right , result powered by , I don't want wordpress over here .

So I can just delete all these things over here powered by thing .

Fine .

Then you can delete this theme fusion thing also if you want .

Ok , then we have this much copyright 2017 block two .

All right , results just click on save changes again .

Refresh your website .

OK ?

Now you , you have it over here .

Everything looks fine .

OK , guys .

So this is how you create our website using Avada theme .

I hope you guys like this video .

If you guys like this video , make sure you subscribe to my channel .

Also give a thumbs up to this video and you can also comment in the video uh in below this video .

If you have any doubt , if you , if you , if you are stuck up anywhere you can comment and I would be more than happy to help you guys .

OK .

So this was it for this tutorial .

Make sure you subscribe and like this video .

Thanks a lot for watching .