WIX Tutorial For Beginners 🔥Parallax Scroll 🔥

hello ladies and gentlemen my name is one skill and in today’s video I’ll show you how you can create this awesome parallax scrolling website for absolutely free if you would like to jump in a specific part of this tutorial feel free to use the time links in the video description so let’s get started and let’s jump to wix.com this is the tool we’ll be using to create our wonderful website by the way I’m not sponsored by Wix to create this
tutorial however I do have an affiliate link so if you’d like to check out Wix please use the link in the video description it will help to support the channel so let’s continue so here we can login with Facebook or Google account I’ll be using my Google account and let’s just click on this button create new side and Wix will ask us what kind of website will be creating but it really does not matter because we’ll be using a blank template so
let’s just find this blank template and let’s start from scratch let’s just click on this button edit and give it a couple of seconds to load so this is how Wix looks like at the top we have the header and at the bottom we have the footer in the center we have our page we can close out this tab and let’s just jump to the website we’ll be creating and let’s just understand how this website is constructed as you can see we have different sections
and this website so let me show you how we can add those sections let’s just go to add and let’s find a strip let’s go to classic strips and let’s just click on this black strip so here is a section or a strip it is called strips in wax and let’s drag the strip to the top of the page so that the Y value is 0 and Y a secretion or how high the strip is so it should be 0 and for the height let’s insert 800 pixels that’s looking beautiful and now let
me show you how we can change the background of this strip so let’s just click once on it and choose change strip background and we’ll be adding videos so let’s just click on the video button and here we will need add a video so let me actually add all of the videos and all of the images that we’ll be using in this website so I have placed all of the media in one folder so let me just select all of the things that we will need in this website and
let’s just import everything this way we will save some time alright so all of the files have been uploaded and now we can choose the video that would like to use for our first section so let’s click on it and let’s choose change background wonderful and if you’d like to see how this video looks in action so let’s just go to preview tab and this is how the video looks like that’s beautiful so let’s get back to editor and let’s jump our final
website so that we can better see what do we have to do next so let’s insert this PowerPoint logo so let’s go to the plus ad and let’s choose images let’s go to our files that we have just recently uploaded and let’s choose this PowerPoint logo as you can see it’s quite huge so let’s just grab one of those round bubbles at the side to reduce the size and let’s position it at the center as you can see we have some smart guides to help us align the
logo to the center that’s beautiful I think it’s looking pretty similar to the final website all right now let’s go to add and let’s insert some text and let’s choose this big title wonderful so let’s just click on edit text and let’s make sure that we set the text color to white so that you can better see you know what’s going on and for the font size let’s set it to 100 points awesome now once again let’s just drag one of those round bubbles to
increase the size of the text box and let’s just insert PowerPoint let’s make sure that all of the text fits into you know one row and let’s make sure that the text is Center aligned inside of the text box that’s beautiful and as you can see we need to change the font itself so in the final website I was using lanta blank and let’s see if Wix has let a black font and as I can see Wix only has Latta light so let me show you how we can actually
upload there’s font leather black or actually any font that you want to Wick’s so let’s just go once again to the fonts tab let’s scroll to the bottom and let’s click on upload font so I have downloaded montserrat from font squirrel comm already I should have it somewhere on my computer so let’s just find this monster and folder and let’s choose monster and black ODF file analyst just uploaded to Wix and once it’s uploaded we’ll be able to use it
as our font once again let’s open the font tab and it should be somewhere at the top and my fonts section here it is beautiful and once again let’s just resize the text box so that the font I mean the text fits perfectly let’s align it to the center beautiful and we can actually duplicate this text box by right-clicking and choosing duplicate and now we can insert any text that we want for example tutorial tutorials alright let’s move it to the
center beautiful alright now let me show you how we can add a little bit of shadow to these text boxes so let’s select the first text box let’s go to edit text and let’s find effects and let’s click on the letter C it will add a little bit of shadow that’s beautiful and let’s do the same for the second text box and we can hit on preview and see how the effect looks like so the text box are standing out a little bit better in front of the video
and that’s awesome so now let’s create this smaller text box one scale so let’s duplicate tutorials let’s change the font size to 50 let’s change the text and now let’s drag it down a little bit so that we have some space now let me show you how we can add the small arrow below the 1 skill text box so let’s just go to shape and let’s find this arrow so don’t worry about the color we will change the color to white so let’s position it in the
center so let’s go to design tab and let’s change color to white grab any of those bubbles to reduce the size of the arrow and now with the help of the rotation handle we can rotate this arrow but sometimes might be tricky so we can just use this flip button in the toolbar and this way we have pretty much finish the first section now let’s hold down the shift key and select all of the objects in the first section and let’s just move everything
everything upwards slightly so that everything is positioned better that’s beautiful and you know besides the Anchor menu and besides the social media icons we still need to add this photo into the first section so let’s just go to add let’s go to images let’s go to our files and let’s find this photo with transparent background so let’s just move it to the bottom of the first strip we can adjust the size and we can actually you know arrange the
objects in the first section so we can make this text box to be on top or we can send this photo to back so it’s pretty much the same you know the same control as you have in PowerPoint so that’s awesome alright and we can actually give a name to our website for example once Gil and we can publish it so this is going to be the website address of our free website alright so here it is and this is the website address and if you’d like to add a
custom domain for example one power point calm as I have you would have to choose one of the plans you know from Wix website but if you’re ok with that you know Wix address so then the website will be absolutely free alright so now let’s add a second strip so once again let’s go to classic strips and let’s choose this black strip let’s just make sure that this photo is aligned nicely to the first strip alright and let’s set the height of the
strip to 800 pixels by the way if you’re wondering why I’m using 800 pixels this is just my personal choice you can choose any height that you want and now let’s change the background of this strip to an image and let’s find this beautiful photo of some leaves so let’s select change background beautiful and now let’s do these two text boxes so let’s just duplicate one skill text box let’s drag down to the second strip let us align it to the left
side all right let’s duplicate once again let’s change text to watch now let’s change the font size to 22 and we can actually add a little bit of spacing between the characters so let’s add 1.4 looks beautiful so let’s just yes let’s just type in popular tutorials into this first text box like this beautiful alright and now we’ll have to add this these four images this is basically a grid gallery so let me show how it’s done let’s go to add let’s
go to gallery choose more galleries and here we’ll have this Wix pro calorie let’s use it skadoosh as you can see you would get this awesome looking layout but we’ll have to adjust it a little bit so that it fits our needs so let’s just choose a grid layout and let’s click on customize layout so let’s make sure that aspect ratio of our photos is 16 to 9 that will have no spacing that’s beautiful and let’s make sure that a link opens when we click
on any of those photos beautiful and let’s make sure that this gallery is not stretching you know throughout the whole you know window now let’s just drag the sides of this gallery so that you know the width of this gallery is basically the width of our website and the width is if you’re wondering 980 pixels right now let’s just delete all of these photos that came you know automatically with this gallery and let’s just insert four of my photos
that I have in my media library all right so let’s just go to settings and let’s just adjust how big these photos are so in the thumbnail size let’s just set it to 50 and now it’s looking beautiful all right let’s hit preview as you can see when I hover over the mouse on my final website we get you know some titles of the videos so let me show you how we can do that here as well so let me actually copy the name of this video command C to copy and
now let’s just select this photo and for the title let’s just paste this title and let’s just copy the link of this YouTube video and let’s paste it here web address all right and now let’s hit preview and now as you can see when we hover over with a mouse we get the name of the video and what we click we are taken to this video that’s looking beautiful all right so now I think we can close out close out this YouTube tab and let me show you how
we can actually add this parallax scrolling effect the first strip of our website so let’s get back to the editor let’s click once on the first strip so that we get this button change strip background let’s go to settings and here we will find scroll facts so let’s just choose parallax so let’s save our website so that we don’t lose all our work and let’s just hit preview and now as you can see when we are scrolling down the website the first
strip is getting parallax that’s looking wonderful so here’s how our live website looks like that’s beautiful okay so now let’s continue with a third section of our website so let’s just click on add strip and let’s add a classical strip by the way you can choose black strip white strip doesn’t really matter by the way you can click on this zoom icon to zoom out and basically see the whole structure of your website so that’s pretty useful you can
move the sections up and down using these you know arrow keys buttons alright that’s awesome so let’s just activate the toolbar so that we can insert the height for the strip 800 pixels beautiful and let’s just change the background of our strip and let’s find this image of the slide zoom course that’s beautiful and let’s make sure that we add the parallax scrolling effect to this strip as well and we can basically copy the PowerPoint logo and
these two big text boxes as well so we can save some time let’s make sure that we select a logo hold down the shift key select the two text boxes command C to copy command V to paste or see in control we if you’re on Windows that’s beautiful let’s just change up the text PowerPoint zoom course let’s just drag out this text box so everything fits perfectly and let’s slide the text box to the center of the page and let’s make sure that the power
pond logo is aligned to the center as well that’s beautiful okay and all that’s left to do for strip number three is to add a rounded button here at the bottom so let’s just go to buttons and let’s choose this rounded button beautiful let’s drag it down a little bit let’s click on it and let’s go to design and let’s customize the design so for the text let’s choose the font – monster of black this is the font that we have uploaded and for the
font size let’s use 22 that’s beautiful let’s double click the button and let’s change the text to preview awesome and let’s just drag those round bubbles around to increase the size of this button let’s just activate the toolbar it will help us to align this button to the center of the page looking beautiful let’s actually insert preview now alright so it looks like in the original alright now let’s change the fill of this button let’s go to
customize design and as you can see we have a couple of fills already apply to this button so we can delete one of those fills and now let me show you how we can change this blue color into this exact orange color from the picture so I’m using this free Chrome extension called colorzilla to copy the exact hex value of this orange color and now I can paste this hex value here into the color window like this and now I can use this exact orange
color as he fell to the button that’s beautiful and this is how it looks like on the preview that’s beautiful and by the way you can as well modify the hover color color hover color and no hover options but I think in this case this hot pink color is looking beautiful and we will stick with that alright one more thing for this button I think we should increase the size of the font to something like 22 pixels all right now think it looks pretty
awesome okay ladies and gentlemen so now we are finished with a section or I should say strip number three and now we will continue with a strip number four so let’s check out the final website once again so strip number four is about power point parallax course and it is a pretty similar to the strip number three so I think we can duplicate strip number three so let’s just zoom out let’s select strip number three and let’s click duplicate
awesome and now for the strip number four all we will have to do is just basically change the background picture and change the text boxes so I’ll speed up here a little bit because it’s pretty much the same things that we have already done for strip number three all right so have just finished creating strip number four and let’s give it a preview so everything is looking beautiful and now ladies and gentlemen let me show you how we can add
links to those preview now buttons because now nothing would really happen if we would click because no link is attached to the button so let’s just copy this destination URL for this zoom course and let’s just select the button let’s click on this link button let’s choose web address and let’s paste the destination click on done and now this button should be clickable so let’s preview let’s click on the button and we are taken to the course site
that’s awesome alright so we are finished with the four strips and let’s just go to the original website and the fifth strip is about more awesome tutorials and as you can see this section is pretty much similar as the second section of our website so I think we can zoom out and we can duplicate this second section and we can just use those now arrows to drag or better say to move it to the bottom of the web site alright so I think we can close
out the zoom and we can get back to the editor so this is how our strip number five looks like and as I can see that the grid gallery is missing so let’s just copy it from the second strip command C or control C and let’s paste it here into the strip number five and of course you can change up the text boxes you can change the pictures but let’s keep it the way it is and let’s just type in more tutorials and let’s just continue with a strip
number six so this is how it looks like as you can see we have some video background going on so let’s just go to add let’s find strips let’s go to classic and let’s choose a black strip so in the toolbar let’s give it a height of 800 pixels all right let’s click on the strip and let’s click change background and let’s find a video that we would like to use is a background for example this video at the top change background that’s beautiful
alright and as you can see this video is pretty bright and let me show you how we can add this kind of overlay to make this video a little bit darker so that you know our text stands out better so let’s go to the settings and here we can enable an overlay so let’s just choose a black color and let’s just adjust the transparency all right it’s looking good now let’s just copy a couple of text boxes let’s paste them here and let’s change up the
text all right ladies and gentlemen and now let’s add a little bit of paragraph text so let’s just click on paragraph let’s move it to the left side and let’s just give it a white text color so that we can see what’s going on and for the font itself let’s set it to monserrate not monster red black but just one Seurat think it’s a little bit thinner font and it will be looking beautiful and actually let’s just change the font size to something
like 20 and let’s add a little bit of character spacing for example 0.15 and let’s customize the line spacing and let’s make it something like 1.7 for example looking beautiful and we can actually copy this paragraph text from the original web to save some time let’s just select everything and hit paste command V or control V drag the bubble on the side to adjust the width of your text box alright and now all that’s left to do is insert a photo
so let’s just go to just good to add images and let’s go to our files that we have uploaded so let’s just choose this photo click Add page and drag the bubbles to resize the photo alright ladies and gentlemen so we are finished with a strip number six and now all that’s left to do is to insert a footer so once again let’s go to add strip classical let’s click on black strip let’s set this time the background to absolutely black color now let’s
just move this strip to the footer let’s just drag one of those handles to reduce the height of the footer okay let’s make sure that we leave no white gaps at the bottom so just use one of those handles to you know remove any white color so it should be looking like this black footer at the bottom and now we can just copy this text box hit copy or better duplicate and let’s just drag it to the footer once again let’s just select move to footer
like this beautiful and let’s just copy this text from the final website just like this beautiful alright so let’s just move this footer text a little bit to the left side so that everything is nicely aligned to the left side it’s looking beautiful and now ladies and gentlemen we’re pretty much finished only a couple of things are left and one of those things is an anchor menu with this anchor menu you might ask well basically these bubbles on
the right side that you can click and jump to different parts of the website this is the anchor menu so let me show you how it’s done so let’s just go to add let’s go to more let’s find anchors and let’s just click on the anchors alright here you will get this blue tag which you can basically drag to any you know section of your website we can give it so let’s just call it popular and we will create you know a tag for each of the website sections
so we can duplicate this guy and let’s just duplicate it and let’s drag it downwards so we can rename this one and let’s just call it zoom so duplicate once again and for this one let’s call it parallax course duplicate once again more tutorials for this one alright and let’s just drag the sliced anchor to the bottom and let’s call it about me okay and now let’s just scroll back to the top and I think we will need to add one more anchor here at
top so let’s just duplicate this anchor let’s drag it up let’s call it top and this anchor will help us to scroll our website to the top all right now let’s go to add more and let’s choose anchor menu so let’s choose for example this design as you can see the bubbles are absolutely black so we don’t see them so let’s just go to design and let’s choose white for clicked buttons I mean regular buttons and white color for click buttons as well as
you can see the color is still black don’t worry let’s go to settings and let’s deselect match to background and now your buttons are white that’s awesome you can drag your you know menu like this to increase the spacing and you can click on this icon pinned to screen to basically pin your menu to the different parts of the screen and with a horizontal offset you can adjust how far away your menu is from the right edge of the window so let’s
leave it at something like this and yeah let’s give it a preview so when we click on the second button we scroll to the second section and so on so as you can see all of the buttons are working I think that only this last button somehow does not get a ring on top of it so let me just do one thing I think we can get back to the editor and for this last strip let’s just increase the height of this strip a little bit hopefully it will help so let’s
get back to the preview so let’s just scroll to the top and when we scroll to the bottom hooray we get this ranked animation so now everything is working perfectly that’s awesome let’s get back to the editor we can publish our websites so that all of the changes are saved and now we can take care of this you know social media icons so let’s just good add let’s good social and let’s choose for example these social icons which are absolutely black
and we don’t see them so don’t worry let’s just go to settings first of all and let’s make sure that the icons are in a vertical position and I have created my own icons so I just delete these icons let’s go to add icons all right let’s go to our pictures that we have uploaded and let’s select all of these blank looking images but they are not blank these are white icons alright and you can drag around the icons so that you get your desired order
of the icons and let’s click on done skadoosh and here we have our beautiful looking icons all right we can drag these icons around so that we get the perfect positioning that we want and we can right-click on these icons and we can choose to pin them to screen so they will be pinned as our anchor menu so let’s click pin to screen let’s choose the positioning let’s choose the horizontal offset alright and now we can just click preview and we can
see that both our anchor menu and our social icons are pinned to the screen so that’s looking awesome and now let show you how we can actually assign the links to these icons so first of all let me just copy a link from the original website now let’s just click set social links and for example for the YouTube icon let’s just paste in the web address let’s click on done done and let’s see if it works we click on YouTube icon and we are taken to
the one skill YouTube channel that’s awesome it works alright ladies and gentlemen we’re pretty much finished all that’s left is to add a little bit of animations as you can see here and the first section elements are appearing here as well a little bit of float in action going on and here as well a little bit of fade in animations so let me show you how easy it is to animate elements of your website using Wix so let’s just choose the logo and
let’s choose the animate icon and here we get a bunch of animations let’s choose float in and let’s customize it so that it comes from top all right we can preview it looks beautiful now for this text box again let’s choose float in but let’s just make sure it comes from the left side for this text box let’s make sure it comes from the right side alright so this is how it looks like and let’s add float in animations for the social media icons and
for the anchor menu as well all right let’s give it a preview and it’s looking awesome and in the same way you can animate the rest of your website elements and make your website super awesome so ladies and gentlemen now you know how you can create an awesome looking website with Wix you can create a website for yourself for your friends or for your company so thank you for watching this tutorial and if you would like to check out Wix please use
the link in the video description it will really help to support the channel so thank you for watching and I’ll see you on my next video you