Play Video

Create A Revealing Website With Wix.com

Create A Revealing Website With Wix.com

hello everyone welcome back so continuing our designing ventures we are going to have a new style of design instead of having separate HTML pages we are going to have our availing one page using with the revealing method on a page so I’m going to create a new website and I’m still on the fashion website I’m doing the same website but I’m going to do it on a different format so I’m just reaching the MT templates and I’m going to use the plain
one I’m going to edit this one and waiting for the editor to load the Wix editor to load and here I’m going to instead of setting the background image for this page by clicking here I will start creating different strips so I’m going to have go here in AD and go for this trip option yeah this one and I’m going to go for the classic strips and I’m going to have maybe white or black it doesn’t matter okay so I’m just drag it over here stripped is a
is this box that is going to strip and occupy the entire width I’m going to here is the properties palette I’m going to have the height of this trip just to have an entire screen 110 80 that’s the height and I’m going to change the background of this strip I will go for the images and again I’m searching for fashion I’m going to go with the same website but different so here I’m going to key in fashion and let’s search press ENTER to search and
again that’s my picture I’m going to change the background then that’s the first strip I’m going to right-click on this strip sorry right click and I’m going to duplicate this trip so it’s a duplicate now I’m going to have this right after have this new strip right after the first one if you are going to get confused you can change the strip background and temporarily change it to any color so you understand what’s happening so you’re going to
push it down push it down until it goes to the end of the first strip and that’s going to be the second section of my website just with a tear and you can by the way let me push this aside a little bit this is the Wai Wai table or the y-axis I’m sorry just make sure it is like that so that’s a second strip now I’m going to change the image and again I’m typing fashion and press Enter let’s assume I’m gonna have this one for the time being and one
last time one last time before I continue there is something which is the revealing option that I told you about so let’s click on the first one and we’re going to click on as we are going to change the background and go to the settings and in the settings I’m going to use the reveal option similarly in the second one I will also use the reveal option toward the next so here viewers are not going to see the length of the website as it is they
were not going to imagine it it will be revealed to them as it’s one screen being displayed so after I set this reveal option let’s close this one and again right click here and look look at this last strip okay I think it is duplicate just to make sure change for the background temporally to any color sorry color its background for any color for the time being just to make sure that I’m not confused between the different strips and I’m gonna
push this down okay until it goes you can have maybe five six seven strips it really depends on the contents that you are going to put on each one because each one of them is going to be a section and that’s what we’re trying to do here so this is section number three and me and now I’m going to change the image for this section and again I’m choosing fashion and I if you remember my diagram or the site map that I tried before is about home than
products then contact us it’s a very simple website very straightforward nothing fancy so here I will go maybe for more results from the Wix media you can go for the unsplash and shutterstock but Shutterstock sometimes they they are you have to purchase these ones are for free so let’s go let’s go let’s go we need something to about contact us maybe I’m going to have this nice photo to contact us okay and change and yeah here we go okay so that’s
what they contact us and I’m going to reserve another place here which is which going to be another strip that’s going to be for my footer so I can add here a strip and it’s going to be again I’m sorry let’s go to the strip and let’s go to the classic and I’m going to just drag and drop this strip down there you can reveal your hand with the mouse and that would be the last strip we have I guess let’s go down and let’s control the height of this
strip not that small is going to be that big and that’s going to be my footer so so far that’s what I have and they are all help the revealing option and up there I’m going to have my main menu the site so which I can just simply add text to this I’m going to have a huge gigantic text or not gigantic but here which a big one that’s small and I’m going to put it maybe over here and I will see to pin this text so I go here and make this as I said
it was fashion city and I had a color that is little bit Turkish and for the size I’m going to make it 45 okay enter and it’s going to be one word like this okay and this handle is going to control the height of your header so I might have the header maybe very at the top and click on this header section and control the height the height of your header and here this is where i want my logo or where the website should be the logo of the website
should be and it’s going to be here and it’s going to be pinned we will see how to do that but let’s just save this for now and I didn’t even have this site for so I’m going to have it fashion underscore revealing okay and by the way I cannot use underscore or any other thing is just harsh and revealing has to be just pure English and X and let’s preview this for the time being and I’m going to scroll down and this is what I mean that by the
revealing I’m sorry this is what I mean by the repeating is going to be like this don’t mind this white space we are going to get over it but this is the main structure of the website so to the next tutorial we will see how to fill these in this end and how to create the main menu or the menu for this very simple website three sections only using the anchors