Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hello this is Maheshwari and in this video I'm gonna show you how to create a parallax website using Wix so a parallax website or something like this where the background and the foreground of your design element or maybe it could be an image which moves in two different phases which creates an illusion of 3d depth in your website a very interesting feature or design style that you can add to your website to create more traction and people who come into your website will find it very very attractive so for this exercise we're gonna use the CMS called Wix to create the parallax website so I'm just gonna come here to the XCOM and once you have logged in didn't create a new site so I'm gonna click on create in your site we can choose what sort of website that you want but just doesn't actually matter for the thing that we are gonna do so what we need to choose here is click on choose a template and we are going to click on blank templates and start from scratch this is what we actually need to do so once we are here in this workspace you can see that there is a header there are some margins and there is a footer and this is your workspace so for this particular parallax website that we are going to create we don't need a header and a footer so we need to actually remove that so to remove this we can go to menu and pages and we can see that we have a home page right here we can click on this menu button and go to settings once you're in settings you can click layouts and you can choose no header and footer so this will make sure that we don't have a header and footer to worry about in our design it's going to be a seamless web site and I can see that the page height is slightly less so you can just come here you can click and drag your page height a little down so that we have some scrolling space to test our effect might show your coming here we are driving this way down so we have some space here so we are back here now we have our workspace set we need the assets to be prepped to bring into here and then do that so to make our assets ready for parallax animation I'm going to use Photoshop so this is going to be very easy if you're not very familiar with Photoshop you can just follow along it's it's a really really easy workflow that I'm gonna show you here so the first thing that I have to do is to find the assets that I want to use so I have already downloaded the assets that I want and I put it in a folder so I have a background it means like this and I have a PNG a transparent image of a panda and I also have a transparent image of a mountain right so I'm going to combine all this together in Photoshop and stains the scene and then we will work on we'll take it to Vic's and we will continue the process there so let's go into Photoshop so once you're in Photoshop you can open the asset that you want to work with so I'm going to open the background image first so go to assets and this is our background image I'm going to open it so we right now have our background image here so we can see that in the layer palette that we have our background image so and you can see that this is locked so if you click on on the lock icon it will be unlocked right now and you can double click on the name to rename it to a name that you like so I'm going to call it background mountain so we have one layer right now it's called background layer I just need to crop this a bit too to my liking so I'm gonna select the crop tool right here I'm gonna just make a crop selection so I don't want a lot of this to be visible and my scene somebody's come down yeah and then this is fine so this is all I want in my display so I'm going to select that now the next thing I want to bring in here is the foreground mountain right so we already have a transparent image mountain so one way you can bring a file here is to go here to file and place embedded and you can select the file that you want to place and click place and it will be placed onto your document right so you can see that there are two layers right now the first thing that I'm going to do is I'm going to scale it up so I'll select this I will press ctrl T on my keyboard to bring up the scale controllers and then I will just scale it by pulling the bottom and the corner boxes the controls so I'm gonna scale it like that I can move it and I can keep it where I want it in my scene okay this actually seems pretty okay right so we have it right now we can double click and we can change the name to foreground mountain so we have two layers and we can see that if you you can see in the layers palette you can see that there is the eye icon which stands on the visibility of the layer so if you turn this off the layers are gonna be turned off you will not be able to see them here so you can turn it on back and now the colors are very different here I want to actually change the foreground mountains color to something which matches the background so what I'm going to do is I'm going to select the foreground mountain and go to image go to adjustments right and what there are a lot of image adjustments in here but what I really want to use in this scenario is the hue/saturation because I want to change the hue of this mountain so I can select the hue slider and move it until I get the effect that I want so I think it this actually works pretty well so I'm going to keep it there and click OK now I need one more element to be here in the scene another way to bring an element into your scene is by going to your Explorer window or your browser window then you can take the file that you want to bring and drag and drop it directly into your document so it comes in like this you can scale it up and you can position it where you want it to be so I want to position it somewhere here one key will leave it there and what I want is I can name the Panda layer too I wanted him to be sort of behind the foreground and also you know it should be above the background layer so what I need to do is go to the layer palette here and then drag and drop the Panda layer in between the foreground Mountain layer and the background mountain layer so we have this sorted so we can maybe move him a little to the side right so it looks very good so we have it right now so another thing that I can do is that I can add a text here in the title so I'm gonna bring a title so for that I can't remove maybe turn off the first two layers so now I can see the background layer right and I can add a text layer so I'm going to go to the text click here and then maybe type inside so this is text I want to use I can double click this to change the color you can come here and change the color I can also change the typeface by changing these options here so I have anti-freeze and then I can change the scale by typing the number or just clicking and dragging this option right here right once you agree with your text you can move it and place it where you want it so now turn back our layers we can just rearrange this and turn back overlays and we can see that this is what we have right now right we can see the panda bear textures right there you can maybe move into ality to the top perhaps okay so this is what we have now what I want to do is I want to actually create a so right now if you see you can see that there is foreground layer and a background layer so if you are really photograph' in the scene this will be in focus this will be in sharp focus the background will be slightly blurred so we want to recreate that effect I'm going to select the background Mountain layer and then go to filter go to blur and then apply a Gaussian blur in here so we can see that there is a blur which is there in the background right and this now looks pretty cool so I'm going to click OK blood is applied for the background and we have text and a bandolier we don't want this many layers right now we just want to combine the Panda layer with the foreground model layer so that the Panda and the foreground Mountain layer is actually one layer so to do that it's pretty easy you select both layers by holding shift on your keyboard and selecting the to layer this will come like this and then if we go to the layer and then click merge layers now that layer will be pause so the Panda and the mountain will be in one layers if you turn it off it's gonna go like that the same thing I want to do with the text and the background mountain so what I'm gonna do is I'm gonna select the background mountain layer click the panda bear inside text go to layer and merge layers so we have the panda bear inside and 2 layers right now just renamed us back to background mountain so we have the file ready right what we want is we need to actually save this with these two layers as separate files right so what is the easiest way to do that we can just rename the layers with the file extension what we want to export this in since we have transparency in this layers let's export that as PNG so folk around Mountain dot PNG rename that and here also background Mountain dot PNG just rename that like this and so we have done that now we can save this file so we can call it and PSD so it's a PSD file you're saving it there's one more step that we need to do to create these as separate images so we can go to file you can go to generate and click on image assets once this is done you can close Photoshop so I'm going to kit Photoshop and can go now if we go to where you actually save to your PSD file you can find a new folder which actually have the two layers separately so this is a background layer and this is a foreground layer this is what we want to take to our Vic's platform so we're gonna go back to Vic's right now and we are going to add our assets so click and go to images my image – click on that so here one thing that I would advise you to do is you can create a new folder here rather than uploading it to one site so it's always a good idea to create a folder to keep your asset separately so I'm going to create a folder I'm gonna call it the Panda site and inside that folder I can upload our assets so just go to upload media upload from computer you choose your assets so if you go to all assets we can see there are two assets in here select those two layers click open and that will be uploaded right into this folder two files are uploaded right now we can see a preview here also let's close this right now we just uploaded it we have to close this right now okay so now what are we going to do next to create a plan lakhs is what we have to create a basic strip and we are going to add the background layer into that strip so to do that let's go to add go to strip and if you go to classic here we can see very simple steps like basic covers and all that so we're going to select a black strip right here we can increase the strip size by holding on this and dragging it so we have a bigger slice right here so what we're going to do is we are going to change the strip background and change it to an image so we can go to image we're gonna go to our Panda site image so we have two images we have the background mountain image we are going to change the background to that so the background is actually updated into strip now we have to actually bring our images our foreground layer right so let's go here okay go to image this time and then click on image uploads put up on the side and click on the foreground Mountain click at Beech we have that right now so that scale is not right but we have actually cropped it in the right way so you can just drag and fit it manually to the side and move it so that it fits the bottom of the strip so we have the composition made so there is an image and the background right now so let's change the page background to something which matches with this color so maybe maybe we can go to add color and we can choose a color which sort of goes with the setting that's let's go with this that is our background the page background right now we can add more content in here so let's say we're gonna go here we're gonna add a strip and let's add in about a section so add this one so this comes right behind it and maybe another strip we can just go here and add another strip which is could be services I am just going to add so everything comes under that like this it so we have a couple of elements in here now let's take a preview and see how it looks it's so good to preview we can see the whole thing when you scroll down we can see all the content but there is no battle-ax effect here right that is what we were trying to do there is no parallax in here there's a small tweak that you need to do here to make it work as a parallax right so what we need to do is that we need to select the strip the first step where we added these strip backgrounds so click on change to background you can see that we have already applied it here click on settings right and down here you can see what is the behavior the strip should do then it scroll scroll effects and we need parallax so choose parallax now that is a parallax website right now right so that size is parallax right now and what we need to do is we can just close this and we are good to go so let's click preview add loads and if you scroll down you can see that it's parallax in the background is separate and when you scroll down the Panda is actually going in powered so moves separately right so this is how you can create a parallax website it's pretty interesting you can create a lot of amazing effects with it and it's gonna bring it's going to create a lot of interest for people who actually visit your website right so give it a try it's very simple to try out and if you like this video please subscribe for more tutorials and you can share the video as well and see you next week with a new tutorial until then bye .

Video Discription

In this tutorial, we will be talking about how to create a parallax scrolling website using WIX.

Follow my work on insta:

www.maheshravi.com