Building a Website with Wix Studio

the layout you see here is exactly what we're going to be building today using the brand new Wix creation platform you're going to learn how to create all of this from scratch while learning a lot of the core features such as creating layouts from scratch customizing predefined layouts responsive AI generative Ai and much much more now you can follow along with me by signing up to Wick studio in the top link here in the YouTube description and you can also access just two of the only project files you'll need in the description as well so with that said let's get started all right so let's get started once you create your account we want to create a new website and we want to start from a blank canvas you could start from a template however to really speed things up or you can use a template you created previously so we're going to start from a blank canvas just to make this you know from scratch essentially and I'll be able to demonstrate several different ways in which you can create different sections both from templates that already exist within the Wix ecosystem and also where you can do it yourself from scratch so the first section that we're going to concern ourselves El with here is the hero section and the hero section is just typically underneath the time the the primary navigation at the top which is already up here for us um and it's the first thing people see with a headline a sub headline a call to action button of some sort maybe an illustration whatever you have a few different options or a couple different options to start with in terms of how to establish that first section you could just use um these options right here choose a layout to get started or you could add elements so will set up just a a basic um you know rows and columns based on what you envision that you need or you can come over here and just choose a sections for instance and you can see that there's a hero section like right here and you can just browse around and click on these we're not going to do that we're going to we're going to use this option right here and specifically this three sale collage option so when we click that you can see we now have three sections here three different cells in which we can add content and start to customize so this left colum I want to go ahead and change the background color so when you click on elements here this over here this panel is your property and Spectre essentially and it's where you go ahead and adjust all the different elements that you're able to adjust based on whatever it is you're selecting so if you select a piece of type this stuff over here is all going to reflect that in terms of settings so you can see right here we have a background and it's currently at 0% in terms of opacity but I want to click this and we can choose our theme colors and you can also add custom colors to your theme as well so your website theme uh colors you can edit right here by clicking edit and by the way you can access that by clicking site Styles and you can see colors we can also choose to adjust the sit's typography overall um in the colors you can you can adjust all these things uh action colors and and Page transitions there's a lot here that you can customize we're just going to leave them by default at their their basic settings so I want to go back over here to section or to the background color and for this I'm just going to choose this color right here this bluish actually I might go a little bit darker like that okay that's great now I want to have a headline inside of here and also a call to action button so if I click on plus over here we can see there's text now we we have a heading one two and three we have paragraph texts collapsible text a lot of different options from which we can choose so if I click on that we'll see that it it will put us into this current cell because we had I had that selected uh to view your layers you click on this icon right here and you could see the structure so here's the header here's a section that we're working within and we could see the three cells that we have in this one the Cell at the bottom has our H1 okay so what we want to do is change this color over here to White so it contrasts very well and I'm just going to double click into it to then be able to edit it and I'm going to specify a new mixing console just like that so now if I select it I want to get this positioned inside of here and you have some positioning tools at your disposal that you can utilize so for instance I if I want this centered horizontally and vertically right up here if I click this Center horizontal align it'll align It Center and then vertically we can align that to the center as well very cool but I really don't want it to be aligned to the center I'd rather just align it to the top and we can also notice that there's some white space here this is adjusted I if I come out and I oh there's no white space defined in terms of margin or padding I the white space here exists because we centered it horizontally um for now what I'm going to do is I'm not going to center it horizontally instead what I'm going to do is just left align it now this looks bad because there's not a good white space but we're going to Define that white space uh by adding a stack in a second so just hang with me and you'll see there's a rhyme to this reason right here so next up we want to have our call to action button and so to add the call to action button we we have this selected here and I'm going to choose the plus and there's a button section so we have just you know typical buttons that are styled for you uh and you can use whichever you wish I'm going to use this one right here and this says RSVP I'm going to change that text so we do that by clicking change text in this button element and I'm just going to say get mine now we could choose to also add an icon inside but I'm going to leave it very simple and there we go now what I want to do is I want to select both of these elements and quick tip if I select outside of here and I choose to try to colle click onto let's say for instance the headline well when you click on it it selects the next layer in the stack so what I mean is if we look at the layers if I click this firstus selecting the whole section even though I clicked on top of the the headline I if you want to get specific access to this you can keep on clicking and then finally now we have access to the actual text element what you could do is hold control left click and that will get you right to the element that you're specifying which is a common UI pattern in these types of website Builders and it's it's it's really help helpful in handy help speed up your workflow so I want to select that and I also want to hold shift and select the button underneath it so now we can see these are both highlighted when we do that we could choose this option stack all right so it's going to stack them automatically in a vertical context you can also stack horizontal and you can access that stack option when it's there by right clicking and choose stack stack shows up here as well as well now the reason I did this uh and added and added them into a stack is because then I want to go ahead and take that stack and center and vertical I vertical Center that as well and then what that's going to allow me to do because I thought it would be really cool looking is to add a video background that keeps on looping like an abstract video and I wanted to consume the entire I space from the very left to the very right to you top to bottom so with this cell selected I want to add that video by clicking plus we click on media and then we choose single video players let's come down here and choose this little uh abstract auctions there's there's more videos as well and let's go see where exactly it's at in in in this stack I so if I click on this we want to make sure that it is inside of this current cell right here and it is so if I click this little icon that says stretch it's going to consume the entire background now this this would look bad because it's bad white space I or not bad white space but it's bad contrast cuz the white text on top of a light background just looks bad so with the video box selected right here we can go to the property inspector and we can come all the way down right over here and it's right behind me unfortunately it says adjust and there this is where you would specify the opacity value so if I make this 10% instead of 100 guess what we could still see there's going to be a video that Loops in the background but it's it's very subtle and we have good white uh good contrast with the text that sits on top so for instance uh if we want to preview what this looks like we can come up here and click the preview icon at any point in time during design and development and take a look at this that is very cool okay so let's go back to edit site and that puts us right back into edit mode now I don't like the lack of white space between the headline and the get M button so we could take the H1 element select it and we can come down here and adjust the margin bottom um we can increase this let's say to like 10% let see what that does okay so that's better white space all around now if we drag this little drag to resize option we'll see what it looks like from desktop all the way and it'll stop at tablet if we come up here and we click tablet we'll see what it looks like when we scale it down and scale it up from that size and then finally MO all right that looks bad but don't worry we're going to use an awesome feature that utilizes AI to make this responsive automatically in a second but first let's go ahead back to desktop and get this this hero section completely defined so let's move on to this area I want to give this a background and if we choose the cell I the background color will use this option right here so that's a nice complimentary color CU we're working within the same color scheme and I want to import a picture of like a fictional console and it's going to be overlaid right here so if we go over here back to the plus sign and we choose media we can do single images or you can just click add media up here when that cell is selected at this point we can choose upload media and upload from computer so I'm going to go ahead and choose from the assets which will be linked there's just two pictures in this entire thing they're linked here in the YouTube description so that you can also use them if you wish so the two assets are right here there's a console and a headphone so if I choose the console it's going to go ahead and upload it right here and we're going to choose add to page now when we do this we'll see that it is automatically stretching this to fill I don't want it to stretch so we can click unstretch up here all right and we can also kind of move it out in over element which is actually pretty cool so if I select it by control left clicking maybe I want it a little bit bigger and maybe this whole section we want it to be a little bit taller as well that looks very cool finally let's go ahead and take this bottom right cell we're going to give this a complimentary color like this orange background notice it's now on top of this element so all we have to do is just Resort the position of this element uh of this cell rather um so that this orange one make sure we're selecting the right cell is at the bottom under now we can see that on top and I think that's just like a a cool way to present this fictional AI generated I you know model essentially so now we're going to put just a another stack except it's going to be a horizontal stack meaning it's going to have two columns where there's a quote like a testimonial from me okay so here's how we do that we're going to go ahead and click plus we're going to choose text and I think we'll use uh this middle option for the paragraph and we're going to put it right here and then I'm going to go ahead and change the font to White okay so now it's now it's a white font um if you want to create AI text in order to get rid of the filler text you can create AI text I was having some issues with the before because it wasn't working properly but if I try again now we'll see if it works you could just choose your what is your business type I'll say I'll just say musicians uh what's your business name I don't know Audio Pros and then par uh what what what's the topic of this text I I'm just going to say about and then we'll just say what's important to mention fictional audio console mixing features okay create text and they were having traffic issues so it wasn't working before we'll see if it works now there we go all right so we just click use text and there we go maybe we don't we don't need all of it maybe we only need need this amount right right right here because I don't want to fill it up with too much text maybe just one sentence is Good from now there we go so that's how you can use AI to generate filler text for you in your designs second off I'm going to have my name right here so if we go ahead and and select this I can contrl c contrl v to paste we can just put this right over here and for here this one I'm just going to say Gary Simon and we can change the theme from paragraph two to like heading six for instance all right so that works let's also make it white so we're going to make this white I'm going to select both so I have both of these pieces of type selected now we could choose stack now it's in a horizontal two column stack great so now if we scale this in we'll see kind of what this looks like if we click on the preview button we can really scale it all the way in and notice how it's just kind of staying it's not being responsive like on a mobile phone this would be bad it' be hard to read so it's up to us when we create these custom layouts to make them responsive and you have two options for doing that so the first option is to do it manually without the help of the responsive AI assistant and in that case you would have to Simply say okay we're happy with this so far like right here now let's switch to tablet is there anything else that needs to change here we can change it here if we wish and then on phone we can make further adjustments and it will stay for that specific responsive viewport uh however you can save yourself time by click on layers make sure we have this entire section selected and all we have to do is right here where this purple responsive AI option shows up we're going to click that and we're going to click generate now so what this will do is kind of analyze what's happening in term of of the actual physical structure of the layout like the stacks and stuff and it will just intelligently decide when and where to stack certain things for The Limited width that we have on the mobile viewport so what's really cool is they kind of show you what it looks like by growing up like that and scaling and you could choose to discard discard the changes if I get out of the way or apply them so for me I'm just going to apply these and now we can see if I go back and I scale this in it's going to change H right there now we have some issues on mobile phones like Large mobile phones here I like like a l a lack of white space so we can go in and fix that specifically so coming out here to desktop everything's looking solid coming out here to tablet things are looking good as well but phone things are not looking good so we want to have white space all around this element so if we click over here to layers and we have our cell and we bring back our property inspector I we should have the option to apply padding right here so if I click on left padding for instance I and also apply it to all sides hopefully you could see that um let's try to do something like maybe 10% okay so now we have white space uh that works a lot better as compared to um we have before but however an unintended side effect occurred because we're using padding it's also pushing this video in and I don't want that so let's actually contrl Z to back up which you can easily do to to revert your changes all right so this has too much uh not enough white space essentially so what we could do is we can take we get in here we take the stack right here that is composed of the the title and the call to action and we can uh reduce the width here and then simply Center it and that gives us white space all around so if we drag this out we'll have our white space um looking good there and there we go so now if we go back to the uh view option we'll see what it essentially looks like and that's pretty good I do not want these gaps here so in order to get rid of those gaps we can select the whole section itself and then come down and by the way let's go back to uh yeah let's keep on mobile here we can come down to the Gap section there's a vertical gap of 12 pixels that's automatically added from the responsive AI let's make that zero and now everything thing has no gaps between it awesome so now that's our top section which is fully responsive and working pretty well so what we want to do now is we're going to switch back to desktop and we're going to go ahead and add uh and by the way you could probably have some we space between these elements a little bit we can go ahead and add a new section and so the next section is going to be fun because we're going to create a really cool typographic Watermark scroll based animation as you scroll down so to do that let's click on add section and this time we're just going to choose columns this this option right here and we do that we have a section now with two cells inside of it I don't want two cells I only want one so I'm just going to delete one of them so now we only have one cell that spans the entire width now right here I'm going to go ahead and change the background color to our very lightest blue in the pette all right and then we're going to add a H1 element a heading element so I'm going to click that and I'm just going to type in all lowercase perform except we're going to make this much much much larger text I want it to be a large watermark in the background as it's called so font size is 71 we're going to change it right there to 300 and now it's really large but we're also going to change the width here to 100% And if I change responsive sizing then we can go ahead and specify 100% now I also want to position this off to the right and change the font size or the font color rather so the font it's going to to be something like this except I really don't like that color too much so I'm going going to go click add and again this is behind me that little add button right there and we canjust this exactly as we want so a watermark is supposed to be low contrast on the but on the background I think that right there is a good color it's the actual color code is B dc9 E1 I'm going to hit apply and there we go now my goal is so that I when a person Scrolls down perform will come in from the left and it'll be tied to the scroll position which would be very cool but we'll work with that in a second uh it looks like this this little period down there is let's go ahead and just delete that there we go so now if I come out here we'll choose to align this in the vertical Center there we go let's also add from our assets the only other picture that I added uh for the assets for this project and we can go ahead and and add media right there we're going to upload the media and we're going to choose the headphones so it's going to upload it's about 76 kilobytes we're going to hit add to page and we don't want it to stretch so we're going to click unstretch up here and there we go so now we want this to be on top of that water mark so we're going to go back to layers and just drag this up over it now I want to Center this horizontally and vertically so we make sure we click that and we could probably make it a little bit bigger again make sure you re res situate it right there and if I drag it in they're both going to scale fluidly so now let's do the fun part which is the scroll based animation if we take the type and the H1 is selected right here and we come over here to the property inspector we could click on the interactions tab you could see that we have a lot of different options to create like an entrance animation um a hover a click a scroll a loop let's choose scroll and add and we want to choose move now when we choose move we can come down here and it's hard to see it says adjust animation so what we can do then is adjust the angle we're going to do 90° the distance let's do like 800 or 750 pixels in the animation area this kind of DET this defines I kind of the area where how long will it it it animate based on your scroll position uh and so you can Tinker around with these values here and move them around as you wish to see how it actually affects the animation so if I want to see what this looks like I can scroll to preview it but unfortunately sometimes when you have that I one second let me go back here if I select the H1 element again there we go and let's just go click on this preview let's see if it works there we go so notice how the position of it is affected by the scre scroll now we're going to have more stuff underneath this so it will end up scrolling further than what it is now cuz we only see the peer and it looks kind of strange so don't worry about that we're going to add sections after that which will give us more room to scroll and thus more areas you know more time for that perform to come in now you could go back and adjust that animation if we click on that right there and you can adjust the animation area uh so that it'll come in quicker or sooner or later it's up to you okay so now we're to work on another section and the other SE this one's going to be an easy section because we haven't yet chosen any of their predefined layouts so down here I'm going to click add section um actually no I'm not we're going to back up there we're going to go up here and we're going to choose sections and I'm going to specifically choose a section for I like features so like if I choose Pro or services and I scroll down to the very bottom I'm going to choose and oh I think I was wrong Services there's one very specific I'm look there it is right here at the bottom what we offer let's click that you have to be sure when you import these sections that they're actually showing up where you want them to I don't want it to be right here underneath the hero section so just go back to layers we'll just add this underneath it and there we go now you may have to do that consequent ly in the other viewports as well for mobile and desktop so just drag this here just go back to mobile drag that down okay now let's go back to desktop and we can go ahead and quickly you know what's great about using the predefined sections is they be out of the box they come responsive so we don't have to utilize responsive AI or do it manually so for this one I'm going to say premium features for less and we can go ahead and modify these titles and descriptions at your own discretion if you wish you can use of course if you select the text you can create AI text and do all that but I want to show you something new which is very cool we can actually choose create AI image so if I click this here's a whole new panel that shows up and this is the AI image Creator so it's like mid Journey where you issue it a prompt and it'll give you four options right here so for me let's do a audio mixing console and then we could choose photo for the style and then create images this will run for a few seconds you know typically 10 to 20 seconds or so and while it's generating the images it's going to come up with an audio mixing console of some sort right here and I think I like this one up here we can just choose choose on that and then hit save when we do that it's going to update that graphic with the one that we just generated how cool is that it even gets cooler though so let me show you another thing that you can do so we're going to create AI image for this one let's choose headphones and make it photo just to keep things consistent and what you can do is after it creates uh your your your headphones images you can actually uh it a buil-in editor that is very powerful surprisingly so so let's choose uh let's choose this one and over here we have all these options to enhance it you can adjust the brightness and contrast maybe make it a little bit brighter reduce contrast make it a little bit washed out you canjust all these settings as you wish if we go over to Overlay this is actually pretty cool you can overlay interesting Graphics like this is like a gritty sort of thing you can put smoke on top you can also control the opacity of the overlay intensity I for me I like the bokeh effect so if you click on that look how cool that is let's hit save and it will import momentarily and it will look very solid yes it does and of course if you want want to do this one more time create the AI image maybe this time we're going to say DJ in a Dark Night Club photo create it this time we're not going to bother with making adjustments we're just going to select what one of these uh whichever one is the best that ends up coming up with and again the results here um based on the models that they're using for their AI image generation they're not quite as good as mid Journey but they're still pretty solid um I this guy this probably looks like the best one or maybe this one let's hit choose if it's a small thumbnail it's not too B big of a deal that it's not like a nice Perfect Image uh but if you really want a nice Perfect Image I really highly suggest using mid Journey um for their image generation if it's uh you know in important image so momentarily it's going to go ahead and import there we go awesome so now we can also I and just to show you that this also this this comes out responsive out of the box so watch this notice how it's stacked and everything is looking good open it up let's go back to edit site let's add an interaction on this like a hover interaction maybe we want these uh thumbnails to grow when you hover over this area so let's select the actual images so left control left click we have access to that image and what's really cool is because this is what's it's it's inside of what's called a repeater if you Mak an update in one it's going to make the update in the other ones as well in the other columns essentially so what we can do is Select that image and we can go over to our interactions tab I could choose hover we could choose add we can choose expand for instance or all these other ones we could adjust the animation as you wish just like we did previously um and you could click preview again it's behind me at the bottom and it kind of shows you what happens so that's pretty cool but I don't want them to extend outside of this container and we will fix that so what we'll do in order to fix that is well first let's go ahead and preview what this looks like we hover over it they kind of just extend outside of their column we can fix that by coming over here and we can take our actual item and we can go back over here to editing and we want to make sure overflow content is set to hide so now if I go back and I hover over it they stay within the context of their given container now let's also make it so that if you hover up here maybe it changed to this light blue color just for extra practice essentially so to do that we're going to go ahead and take our item we'll go ahead back to our prototyping We'll add a hover we'll go ahead and choose this time color so we'll adjust it the hover color can be our light color and let's preview it there we go very super simple to add interactivity as you can see so it's really coming along quite well at this point let's go ahead back to edit site and now let's go add another section this time we'll do a two column section that's custom we won't use something that's from um the library over here let's do two columns and I want really one column oh actually no I don't I want two columns let's take this first cell right here and we're going to change the background to like a dark blue that doesn't yet exist in our color Library so for our background we're going to choose the very darkest blue and let me make sure that I could see want to make sure that I'm not hiding things and we can choose add and then I'm going to make it much darker over here like kind of like a desaturated dark blue the color code for that is 1 c229 if you want to follow along click apply and then over here we're going to use like a orange background color maybe like that one now I also want to do kind of like a video based background there so again we can just choose ad media and instead of choosing ad media we can just come up here and choose media and then single video players and I click this we can choose more videos and now we could start searching for something like say for instance abstract so abstract we have a filter by videos and some of these are really really cool abstract waves for instance or I we already have used that one there's a lot of options from which you could choose this one's really cool right here let's try that let's click add to page all right let's get that stretched out and then let's just reduce it to about 10% opacity so now if we view this it's going to animate just like it's animating as a background right there awesome so let's click on edit site for this particular cell all we're going to go have all we're going to do really is just add a button and so we can click on the button up here if we want to utilize the same button so just copy that come down here in the cell and paste it so now we can just Center that horizontally and vertically and get my now you can also adjust a lot of other things like if we choose text over here we can see that we can increase the font size if we wish we can make it bold do all sorts of thing at a at a drop shadow adjust the corners um a lot of stuff over here I'm going to utilize something that we haven't yet and that's from the app Marketplace you can use and import uh interactive components or widgets so over here if I come right here and I choose app market we'll see if we click on the App Market we can now search for maybe we want a countdown so if I type in countdown we can do a countdown timer so what's really cool is you can actually contribute to this and actually sell if you wish different types of uh components and actually make money which is awesome so let's click add to site here you're going to have to approve this so agree and add and momentarily you're going to see it's kind of ugly by default I'm just going to click contrl C to copy and then just delete that because it's not in our preferred cell we want to go down here and I'm going to paste that in all right and now what I want to do is we're going to switch to Advanced sizing which allows us to have finer control over the sizing elements we're going to choose 100% for the width and we're going to Center this vertically and horizonally so when we scale it it's going to scale down Okay now what's really cool about these components and these widgets you really you you're limited in the amount of options that you have over here you can control the opacity and stuff like that but if you want to adjust the actual layout and colors we're going to click on settings and there's a specific settings that whoever developed this allow you to change so we could change or click on content here for instance and you could kind of choose the from and two date which is very cool and also the title it says website coming soon I don't want to use that title I'm going to use a title that says pre-order ends in pre-order ends in all right so now that text is changed and if you go to design you can change these to circles or no Borders or just squares that's fine right there um we can also change the animation the layout we can join these up I think that's better um let's see background and border so those I don't like these high contrast squares here so I think maybe we'll just use something let's see here yeah we could do that um the typography we can also change so for instance I the font let me make sure that I'm in the right section you could be a little bit conf there it is so now I can change like the title font to White all all right you can change the topography um you can also change this to White and finally change this one at the bottom to white as well okay let's hit back and yeah I think we're pretty good right there so let's go ahead and close that and let's see what it looks like responsively now of car this isn't uh it's not going to stack by default so let's go back to edit site and take this whole section that we're just working on right there and choose our responsive AI we'll let it do the work so it's going to generate mobile now it's going to generate mobile specifically because I was on mobile at that point in time um I don't want the Gap be between here so let's hit apply design I'm going to go ahead and get out our property inspector and I'm going to make this a little bit taller and I'm also going to get rid of the the vertical gap which is right here so I'm going to hit zero there okay now I'm also going to take our button and we're going to extend this out with Advanced sizing so we're going to make it like 70% withth awesome all right so let's see what this looks like as we expand out in terms of sizing let's go back uh here and click View and we'll see how it responds probably want to add a little bit of uh margin around it and I think what we want to do honestly is let's just select it all right so we do have uh it is 90 a width of 99% we could probably add margins to stuff to make sure that it gets rid of the white space on the left and right so if we wanted to do that you know we could do something like 30 here 30 here let's see what happens though when we click stretch and see what happens to it to see if it scales down automatically yeah I don't think I like that let's get this centered back up that's looking better there and if I go back here to view it I'm just kind of taking a look at what happens here and you could definitely tin around with it more to get the white space issues definitely corrected up so let's go back to edit site and what we can do in desktop let's add another option here or another section which would be a footer so if I go to sections and we go to Footers I can go ahead and I like this one at the bottom I don't like the white space around it and by the way we do need to reorder it to make sure it's at the bottom so let's position that to the bottom I'll get rid of the padding it's right behind me you can't see it but just make the adjustment to zero and now it's at zero we'll see what it looks like here on tablet again we want to make sure that this is at the bottom and also get rid of the padding and make sure it's applying to all there we go and then finally we'll choose mobile and again we want to make sure that it's in the correct section and also without any margin so zero and it's not updating for me one second eight or zero there we go all righty so now let's go ahead and view what this looks like start out here have our hovers we have our pre-order ends in we have our footer so at this point now what we can do is Click publish and you can give it a custom URL here and of course you can also connect your own Doom and I'm just going to hit save and continue and now we can write we can just click view site it's going to open up a new tab and we can see exactly what our design our layout looks like in the actual live browser and as everybody else would see it and then what you can do is take your address here you can also open it up on your phone and then see exactly what it looks like on your phone or your tablets or anything else now we've only really just scratched the surface uh on many of these elements I of the interface there's a lot more things you can do for instance you can actually integrate code you can create JavaScript i Custom Integrations no JS platform for a backend full version control with GitHub built-in external apis pre-u I mean there's a lot so if I choose start coding we're not going to actually get into this but you it sets up as you can see a developer mode and there's also a Wix IDE that's browser based that it's featured kind of very similar to visual studio code but it's in your browser which is awesome so if I click on that you'll see that the Wix IDE is loading up and then it just allows you to add Dynamic functionality with JavaScript in this editor and this is going to be something we would do in a different video but as you could see very similar to like a visual studio code as you see so we have our Styles uh we have our pages and we have all this very cool stuff so very very very awesome there's like I said even more than that you can adjust CSS code specifically for certain elements uh if you wish uh but again I think what I've done here so far is is more than enough to get you started I you obviously with what I've taught you can build full-fledged landing pages with this and information Pages really quite easily so if you enjoy that definitely check out the top Link in the YouTube description here where you can start using uh the Wix Studio editor right now make sure to subscribe if you haven't yet and I will see you all very soon goodbye

the layout you see here is exactly what we&#39;re going to be building today using the brand new Wix creation platform you&#39;re going to learn how to create all of this from scratch while learning a lot of the core features such as creating layouts from scratch customizing predefined layouts responsive AI generative Ai and much much more now you can follow along with me by signing up to Wick studio in the top link here in the YouTube description and you can also access just two of the only project files you&#39;ll need in the description as well so with that said let&#39;s get started all right so let&#39;s get started once you create your account we want to create a new website and we want to start from a blank canvas you could start from a template however to really speed things up or you can use a template you created previously so we&#39;re going to start from a blank canvas just to make this you know from scratch essentially and I&#39;ll be able to demonstrate several different ways in which you can create different sections both from templates that already exist within the Wix ecosystem and also where you can do it yourself from scratch so the first section that we&#39;re going to concern ourselves El with here is the hero section and the hero section is just typically underneath the time the the primary navigation at the top which is already up here for us um and it&#39;s the first thing people see with a headline a sub headline a call to action button of some sort maybe an illustration whatever you have a few different options or a couple different options to start with in terms of how to establish that first section you could just use um these options right here choose a layout to get started or you could add elements so will set up just a a basic um you know rows and columns based on what you envision that you need or you can come over here and just choose a sections for instance and you can see that there&#39;s a hero section like right here and you can just browse around and click on these we&#39;re not going to do that we&#39;re going to we&#39;re going to use this option right here and specifically this three sale collage option so when we click that you can see we now have three sections here three different cells in which we can add content and start to customize so this left colum I want to go ahead and change the background color so when you click on elements here this over here this panel is your property and Spectre essentially and it&#39;s where you go ahead and adjust all the different elements that you&#39;re able to adjust based on whatever it is you&#39;re selecting so if you select a piece of type this stuff over here is all going to reflect that in terms of settings so you can see right here we have a background and it&#39;s currently at 0% in terms of opacity but I want to click this and we can choose our theme colors and you can also add custom colors to your theme as well so your website theme uh colors you can edit right here by clicking edit and by the way you can access that by clicking site Styles and you can see colors we can also choose to adjust the sit&#39;s typography overall um in the colors you can you can adjust all these things uh action colors and and Page transitions there&#39;s a lot here that you can customize we&#39;re just going to leave them by default at their their basic settings so I want to go back over here to section or to the background color and for this I&#39;m just going to choose this color right here this bluish actually I might go a little bit darker like that okay that&#39;s great now I want to have a headline inside of here and also a call to action button so if I click on plus over here we can see there&#39;s text now we we have a heading one two and three we have paragraph texts collapsible text a lot of different options from which we can choose so if I click on that we&#39;ll see that it it will put us into this current cell because we had I had that selected uh to view your layers you click on this icon right here and you could see the structure so here&#39;s the header here&#39;s a section that we&#39;re working within and we could see the three cells that we have in this one the Cell at the bottom has our H1 okay so what we want to do is change this color over here to White so it contrasts very well and I&#39;m just going to double click into it to then be able to edit it and I&#39;m going to specify a new mixing console just like that so now if I select it I want to get this positioned inside of here and you have some positioning tools at your disposal that you can utilize so for instance I if I want this centered horizontally and vertically right up here if I click this Center horizontal align it&#39;ll align It Center and then vertically we can align that to the center as well very cool but I really don&#39;t want it to be aligned to the center I&#39;d rather just align it to the top and we can also notice that there&#39;s some white space here this is adjusted I if I come out and I oh there&#39;s no white space defined in terms of margin or padding I the white space here exists because we centered it horizontally um for now what I&#39;m going to do is I&#39;m not going to center it horizontally instead what I&#39;m going to do is just left align it now this looks bad because there&#39;s not a good white space but we&#39;re going to Define that white space uh by adding a stack in a second so just hang with me and you&#39;ll see there&#39;s a rhyme to this reason right here so next up we want to have our call to action button and so to add the call to action button we we have this selected here and I&#39;m going to choose the plus and there&#39;s a button section so we have just you know typical buttons that are styled for you uh and you can use whichever you wish I&#39;m going to use this one right here and this says RSVP I&#39;m going to change that text so we do that by clicking change text in this button element and I&#39;m just going to say get mine now we could choose to also add an icon inside but I&#39;m going to leave it very simple and there we go now what I want to do is I want to select both of these elements and quick tip if I select outside of here and I choose to try to colle click onto let&#39;s say for instance the headline well when you click on it it selects the next layer in the stack so what I mean is if we look at the layers if I click this firstus selecting the whole section even though I clicked on top of the the headline I if you want to get specific access to this you can keep on clicking and then finally now we have access to the actual text element what you could do is hold control left click and that will get you right to the element that you&#39;re specifying which is a common UI pattern in these types of website Builders and it&#39;s it&#39;s it&#39;s really help helpful in handy help speed up your workflow so I want to select that and I also want to hold shift and select the button underneath it so now we can see these are both highlighted when we do that we could choose this option stack all right so it&#39;s going to stack them automatically in a vertical context you can also stack horizontal and you can access that stack option when it&#39;s there by right clicking and choose stack stack shows up here as well as well now the reason I did this uh and added and added them into a stack is because then I want to go ahead and take that stack and center and vertical I vertical Center that as well and then what that&#39;s going to allow me to do because I thought it would be really cool looking is to add a video background that keeps on looping like an abstract video and I wanted to consume the entire I space from the very left to the very right to you top to bottom so with this cell selected I want to add that video by clicking plus we click on media and then we choose single video players let&#39;s come down here and choose this little uh abstract auctions there&#39;s there&#39;s more videos as well and let&#39;s go see where exactly it&#39;s at in in in this stack I so if I click on this we want to make sure that it is inside of this current cell right here and it is so if I click this little icon that says stretch it&#39;s going to consume the entire background now this this would look bad because it&#39;s bad white space I or not bad white space but it&#39;s bad contrast cuz the white text on top of a light background just looks bad so with the video box selected right here we can go to the property inspector and we can come all the way down right over here and it&#39;s right behind me unfortunately it says adjust and there this is where you would specify the opacity value so if I make this 10% instead of 100 guess what we could still see there&#39;s going to be a video that Loops in the background but it&#39;s it&#39;s very subtle and we have good white uh good contrast with the text that sits on top so for instance uh if we want to preview what this looks like we can come up here and click the preview icon at any point in time during design and development and take a look at this that is very cool okay so let&#39;s go back to edit site and that puts us right back into edit mode now I don&#39;t like the lack of white space between the headline and the get M button so we could take the H1 element select it and we can come down here and adjust the margin bottom um we can increase this let&#39;s say to like 10% let see what that does okay so that&#39;s better white space all around now if we drag this little drag to resize option we&#39;ll see what it looks like from desktop all the way and it&#39;ll stop at tablet if we come up here and we click tablet we&#39;ll see what it looks like when we scale it down and scale it up from that size and then finally MO all right that looks bad but don&#39;t worry we&#39;re going to use an awesome feature that utilizes AI to make this responsive automatically in a second but first let&#39;s go ahead back to desktop and get this this hero section completely defined so let&#39;s move on to this area I want to give this a background and if we choose the cell I the background color will use this option right here so that&#39;s a nice complimentary color CU we&#39;re working within the same color scheme and I want to import a picture of like a fictional console and it&#39;s going to be overlaid right here so if we go over here back to the plus sign and we choose media we can do single images or you can just click add media up here when that cell is selected at this point we can choose upload media and upload from computer so I&#39;m going to go ahead and choose from the assets which will be linked there&#39;s just two pictures in this entire thing they&#39;re linked here in the YouTube description so that you can also use them if you wish so the two assets are right here there&#39;s a console and a headphone so if I choose the console it&#39;s going to go ahead and upload it right here and we&#39;re going to choose add to page now when we do this we&#39;ll see that it is automatically stretching this to fill I don&#39;t want it to stretch so we can click unstretch up here all right and we can also kind of move it out in over element which is actually pretty cool so if I select it by control left clicking maybe I want it a little bit bigger and maybe this whole section we want it to be a little bit taller as well that looks very cool finally let&#39;s go ahead and take this bottom right cell we&#39;re going to give this a complimentary color like this orange background notice it&#39;s now on top of this element so all we have to do is just Resort the position of this element uh of this cell rather um so that this orange one make sure we&#39;re selecting the right cell is at the bottom under now we can see that on top and I think that&#39;s just like a a cool way to present this fictional AI generated I you know model essentially so now we&#39;re going to put just a another stack except it&#39;s going to be a horizontal stack meaning it&#39;s going to have two columns where there&#39;s a quote like a testimonial from me okay so here&#39;s how we do that we&#39;re going to go ahead and click plus we&#39;re going to choose text and I think we&#39;ll use uh this middle option for the paragraph and we&#39;re going to put it right here and then I&#39;m going to go ahead and change the font to White okay so now it&#39;s now it&#39;s a white font um if you want to create AI text in order to get rid of the filler text you can create AI text I was having some issues with the before because it wasn&#39;t working properly but if I try again now we&#39;ll see if it works you could just choose your what is your business type I&#39;ll say I&#39;ll just say musicians uh what&#39;s your business name I don&#39;t know Audio Pros and then par uh what what what&#39;s the topic of this text I I&#39;m just going to say about and then we&#39;ll just say what&#39;s important to mention fictional audio console mixing features okay create text and they were having traffic issues so it wasn&#39;t working before we&#39;ll see if it works now there we go all right so we just click use text and there we go maybe we don&#39;t we don&#39;t need all of it maybe we only need need this amount right right right here because I don&#39;t want to fill it up with too much text maybe just one sentence is Good from now there we go so that&#39;s how you can use AI to generate filler text for you in your designs second off I&#39;m going to have my name right here so if we go ahead and and select this I can contrl c contrl v to paste we can just put this right over here and for here this one I&#39;m just going to say Gary Simon and we can change the theme from paragraph two to like heading six for instance all right so that works let&#39;s also make it white so we&#39;re going to make this white I&#39;m going to select both so I have both of these pieces of type selected now we could choose stack now it&#39;s in a horizontal two column stack great so now if we scale this in we&#39;ll see kind of what this looks like if we click on the preview button we can really scale it all the way in and notice how it&#39;s just kind of staying it&#39;s not being responsive like on a mobile phone this would be bad it&#39; be hard to read so it&#39;s up to us when we create these custom layouts to make them responsive and you have two options for doing that so the first option is to do it manually without the help of the responsive AI assistant and in that case you would have to Simply say okay we&#39;re happy with this so far like right here now let&#39;s switch to tablet is there anything else that needs to change here we can change it here if we wish and then on phone we can make further adjustments and it will stay for that specific responsive viewport uh however you can save yourself time by click on layers make sure we have this entire section selected and all we have to do is right here where this purple responsive AI option shows up we&#39;re going to click that and we&#39;re going to click generate now so what this will do is kind of analyze what&#39;s happening in term of of the actual physical structure of the layout like the stacks and stuff and it will just intelligently decide when and where to stack certain things for The Limited width that we have on the mobile viewport so what&#39;s really cool is they kind of show you what it looks like by growing up like that and scaling and you could choose to discard discard the changes if I get out of the way or apply them so for me I&#39;m just going to apply these and now we can see if I go back and I scale this in it&#39;s going to change H right there now we have some issues on mobile phones like Large mobile phones here I like like a l a lack of white space so we can go in and fix that specifically so coming out here to desktop everything&#39;s looking solid coming out here to tablet things are looking good as well but phone things are not looking good so we want to have white space all around this element so if we click over here to layers and we have our cell and we bring back our property inspector I we should have the option to apply padding right here so if I click on left padding for instance I and also apply it to all sides hopefully you could see that um let&#39;s try to do something like maybe 10% okay so now we have white space uh that works a lot better as compared to um we have before but however an unintended side effect occurred because we&#39;re using padding it&#39;s also pushing this video in and I don&#39;t want that so let&#39;s actually contrl Z to back up which you can easily do to to revert your changes all right so this has too much uh not enough white space essentially so what we could do is we can take we get in here we take the stack right here that is composed of the the title and the call to action and we can uh reduce the width here and then simply Center it and that gives us white space all around so if we drag this out we&#39;ll have our white space um looking good there and there we go so now if we go back to the uh view option we&#39;ll see what it essentially looks like and that&#39;s pretty good I do not want these gaps here so in order to get rid of those gaps we can select the whole section itself and then come down and by the way let&#39;s go back to uh yeah let&#39;s keep on mobile here we can come down to the Gap section there&#39;s a vertical gap of 12 pixels that&#39;s automatically added from the responsive AI let&#39;s make that zero and now everything thing has no gaps between it awesome so now that&#39;s our top section which is fully responsive and working pretty well so what we want to do now is we&#39;re going to switch back to desktop and we&#39;re going to go ahead and add uh and by the way you could probably have some we space between these elements a little bit we can go ahead and add a new section and so the next section is going to be fun because we&#39;re going to create a really cool typographic Watermark scroll based animation as you scroll down so to do that let&#39;s click on add section and this time we&#39;re just going to choose columns this this option right here and we do that we have a section now with two cells inside of it I don&#39;t want two cells I only want one so I&#39;m just going to delete one of them so now we only have one cell that spans the entire width now right here I&#39;m going to go ahead and change the background color to our very lightest blue in the pette all right and then we&#39;re going to add a H1 element a heading element so I&#39;m going to click that and I&#39;m just going to type in all lowercase perform except we&#39;re going to make this much much much larger text I want it to be a large watermark in the background as it&#39;s called so font size is 71 we&#39;re going to change it right there to 300 and now it&#39;s really large but we&#39;re also going to change the width here to 100% And if I change responsive sizing then we can go ahead and specify 100% now I also want to position this off to the right and change the font size or the font color rather so the font it&#39;s going to to be something like this except I really don&#39;t like that color too much so I&#39;m going going to go click add and again this is behind me that little add button right there and we canjust this exactly as we want so a watermark is supposed to be low contrast on the but on the background I think that right there is a good color it&#39;s the actual color code is B dc9 E1 I&#39;m going to hit apply and there we go now my goal is so that I when a person Scrolls down perform will come in from the left and it&#39;ll be tied to the scroll position which would be very cool but we&#39;ll work with that in a second uh it looks like this this little period down there is let&#39;s go ahead and just delete that there we go so now if I come out here we&#39;ll choose to align this in the vertical Center there we go let&#39;s also add from our assets the only other picture that I added uh for the assets for this project and we can go ahead and and add media right there we&#39;re going to upload the media and we&#39;re going to choose the headphones so it&#39;s going to upload it&#39;s about 76 kilobytes we&#39;re going to hit add to page and we don&#39;t want it to stretch so we&#39;re going to click unstretch up here and there we go so now we want this to be on top of that water mark so we&#39;re going to go back to layers and just drag this up over it now I want to Center this horizontally and vertically so we make sure we click that and we could probably make it a little bit bigger again make sure you re res situate it right there and if I drag it in they&#39;re both going to scale fluidly so now let&#39;s do the fun part which is the scroll based animation if we take the type and the H1 is selected right here and we come over here to the property inspector we could click on the interactions tab you could see that we have a lot of different options to create like an entrance animation um a hover a click a scroll a loop let&#39;s choose scroll and add and we want to choose move now when we choose move we can come down here and it&#39;s hard to see it says adjust animation so what we can do then is adjust the angle we&#39;re going to do 90° the distance let&#39;s do like 800 or 750 pixels in the animation area this kind of DET this defines I kind of the area where how long will it it it animate based on your scroll position uh and so you can Tinker around with these values here and move them around as you wish to see how it actually affects the animation so if I want to see what this looks like I can scroll to preview it but unfortunately sometimes when you have that I one second let me go back here if I select the H1 element again there we go and let&#39;s just go click on this preview let&#39;s see if it works there we go so notice how the position of it is affected by the scre scroll now we&#39;re going to have more stuff underneath this so it will end up scrolling further than what it is now cuz we only see the peer and it looks kind of strange so don&#39;t worry about that we&#39;re going to add sections after that which will give us more room to scroll and thus more areas you know more time for that perform to come in now you could go back and adjust that animation if we click on that right there and you can adjust the animation area uh so that it&#39;ll come in quicker or sooner or later it&#39;s up to you okay so now we&#39;re to work on another section and the other SE this one&#39;s going to be an easy section because we haven&#39;t yet chosen any of their predefined layouts so down here I&#39;m going to click add section um actually no I&#39;m not we&#39;re going to back up there we&#39;re going to go up here and we&#39;re going to choose sections and I&#39;m going to specifically choose a section for I like features so like if I choose Pro or services and I scroll down to the very bottom I&#39;m going to choose and oh I think I was wrong Services there&#39;s one very specific I&#39;m look there it is right here at the bottom what we offer let&#39;s click that you have to be sure when you import these sections that they&#39;re actually showing up where you want them to I don&#39;t want it to be right here underneath the hero section so just go back to layers we&#39;ll just add this underneath it and there we go now you may have to do that consequent ly in the other viewports as well for mobile and desktop so just drag this here just go back to mobile drag that down okay now let&#39;s go back to desktop and we can go ahead and quickly you know what&#39;s great about using the predefined sections is they be out of the box they come responsive so we don&#39;t have to utilize responsive AI or do it manually so for this one I&#39;m going to say premium features for less and we can go ahead and modify these titles and descriptions at your own discretion if you wish you can use of course if you select the text you can create AI text and do all that but I want to show you something new which is very cool we can actually choose create AI image so if I click this here&#39;s a whole new panel that shows up and this is the AI image Creator so it&#39;s like mid Journey where you issue it a prompt and it&#39;ll give you four options right here so for me let&#39;s do a audio mixing console and then we could choose photo for the style and then create images this will run for a few seconds you know typically 10 to 20 seconds or so and while it&#39;s generating the images it&#39;s going to come up with an audio mixing console of some sort right here and I think I like this one up here we can just choose choose on that and then hit save when we do that it&#39;s going to update that graphic with the one that we just generated how cool is that it even gets cooler though so let me show you another thing that you can do so we&#39;re going to create AI image for this one let&#39;s choose headphones and make it photo just to keep things consistent and what you can do is after it creates uh your your your headphones images you can actually uh it a buil-in editor that is very powerful surprisingly so so let&#39;s choose uh let&#39;s choose this one and over here we have all these options to enhance it you can adjust the brightness and contrast maybe make it a little bit brighter reduce contrast make it a little bit washed out you canjust all these settings as you wish if we go over to Overlay this is actually pretty cool you can overlay interesting Graphics like this is like a gritty sort of thing you can put smoke on top you can also control the opacity of the overlay intensity I for me I like the bokeh effect so if you click on that look how cool that is let&#39;s hit save and it will import momentarily and it will look very solid yes it does and of course if you want want to do this one more time create the AI image maybe this time we&#39;re going to say DJ in a Dark Night Club photo create it this time we&#39;re not going to bother with making adjustments we&#39;re just going to select what one of these uh whichever one is the best that ends up coming up with and again the results here um based on the models that they&#39;re using for their AI image generation they&#39;re not quite as good as mid Journey but they&#39;re still pretty solid um I this guy this probably looks like the best one or maybe this one let&#39;s hit choose if it&#39;s a small thumbnail it&#39;s not too B big of a deal that it&#39;s not like a nice Perfect Image uh but if you really want a nice Perfect Image I really highly suggest using mid Journey um for their image generation if it&#39;s uh you know in important image so momentarily it&#39;s going to go ahead and import there we go awesome so now we can also I and just to show you that this also this this comes out responsive out of the box so watch this notice how it&#39;s stacked and everything is looking good open it up let&#39;s go back to edit site let&#39;s add an interaction on this like a hover interaction maybe we want these uh thumbnails to grow when you hover over this area so let&#39;s select the actual images so left control left click we have access to that image and what&#39;s really cool is because this is what&#39;s it&#39;s it&#39;s inside of what&#39;s called a repeater if you Mak an update in one it&#39;s going to make the update in the other ones as well in the other columns essentially so what we can do is Select that image and we can go over to our interactions tab I could choose hover we could choose add we can choose expand for instance or all these other ones we could adjust the animation as you wish just like we did previously um and you could click preview again it&#39;s behind me at the bottom and it kind of shows you what happens so that&#39;s pretty cool but I don&#39;t want them to extend outside of this container and we will fix that so what we&#39;ll do in order to fix that is well first let&#39;s go ahead and preview what this looks like we hover over it they kind of just extend outside of their column we can fix that by coming over here and we can take our actual item and we can go back over here to editing and we want to make sure overflow content is set to hide so now if I go back and I hover over it they stay within the context of their given container now let&#39;s also make it so that if you hover up here maybe it changed to this light blue color just for extra practice essentially so to do that we&#39;re going to go ahead and take our item we&#39;ll go ahead back to our prototyping We&#39;ll add a hover we&#39;ll go ahead and choose this time color so we&#39;ll adjust it the hover color can be our light color and let&#39;s preview it there we go very super simple to add interactivity as you can see so it&#39;s really coming along quite well at this point let&#39;s go ahead back to edit site and now let&#39;s go add another section this time we&#39;ll do a two column section that&#39;s custom we won&#39;t use something that&#39;s from um the library over here let&#39;s do two columns and I want really one column oh actually no I don&#39;t I want two columns let&#39;s take this first cell right here and we&#39;re going to change the background to like a dark blue that doesn&#39;t yet exist in our color Library so for our background we&#39;re going to choose the very darkest blue and let me make sure that I could see want to make sure that I&#39;m not hiding things and we can choose add and then I&#39;m going to make it much darker over here like kind of like a desaturated dark blue the color code for that is 1 c229 if you want to follow along click apply and then over here we&#39;re going to use like a orange background color maybe like that one now I also want to do kind of like a video based background there so again we can just choose ad media and instead of choosing ad media we can just come up here and choose media and then single video players and I click this we can choose more videos and now we could start searching for something like say for instance abstract so abstract we have a filter by videos and some of these are really really cool abstract waves for instance or I we already have used that one there&#39;s a lot of options from which you could choose this one&#39;s really cool right here let&#39;s try that let&#39;s click add to page all right let&#39;s get that stretched out and then let&#39;s just reduce it to about 10% opacity so now if we view this it&#39;s going to animate just like it&#39;s animating as a background right there awesome so let&#39;s click on edit site for this particular cell all we&#39;re going to go have all we&#39;re going to do really is just add a button and so we can click on the button up here if we want to utilize the same button so just copy that come down here in the cell and paste it so now we can just Center that horizontally and vertically and get my now you can also adjust a lot of other things like if we choose text over here we can see that we can increase the font size if we wish we can make it bold do all sorts of thing at a at a drop shadow adjust the corners um a lot of stuff over here I&#39;m going to utilize something that we haven&#39;t yet and that&#39;s from the app Marketplace you can use and import uh interactive components or widgets so over here if I come right here and I choose app market we&#39;ll see if we click on the App Market we can now search for maybe we want a countdown so if I type in countdown we can do a countdown timer so what&#39;s really cool is you can actually contribute to this and actually sell if you wish different types of uh components and actually make money which is awesome so let&#39;s click add to site here you&#39;re going to have to approve this so agree and add and momentarily you&#39;re going to see it&#39;s kind of ugly by default I&#39;m just going to click contrl C to copy and then just delete that because it&#39;s not in our preferred cell we want to go down here and I&#39;m going to paste that in all right and now what I want to do is we&#39;re going to switch to Advanced sizing which allows us to have finer control over the sizing elements we&#39;re going to choose 100% for the width and we&#39;re going to Center this vertically and horizonally so when we scale it it&#39;s going to scale down Okay now what&#39;s really cool about these components and these widgets you really you you&#39;re limited in the amount of options that you have over here you can control the opacity and stuff like that but if you want to adjust the actual layout and colors we&#39;re going to click on settings and there&#39;s a specific settings that whoever developed this allow you to change so we could change or click on content here for instance and you could kind of choose the from and two date which is very cool and also the title it says website coming soon I don&#39;t want to use that title I&#39;m going to use a title that says pre-order ends in pre-order ends in all right so now that text is changed and if you go to design you can change these to circles or no Borders or just squares that&#39;s fine right there um we can also change the animation the layout we can join these up I think that&#39;s better um let&#39;s see background and border so those I don&#39;t like these high contrast squares here so I think maybe we&#39;ll just use something let&#39;s see here yeah we could do that um the typography we can also change so for instance I the font let me make sure that I&#39;m in the right section you could be a little bit conf there it is so now I can change like the title font to White all all right you can change the topography um you can also change this to White and finally change this one at the bottom to white as well okay let&#39;s hit back and yeah I think we&#39;re pretty good right there so let&#39;s go ahead and close that and let&#39;s see what it looks like responsively now of car this isn&#39;t uh it&#39;s not going to stack by default so let&#39;s go back to edit site and take this whole section that we&#39;re just working on right there and choose our responsive AI we&#39;ll let it do the work so it&#39;s going to generate mobile now it&#39;s going to generate mobile specifically because I was on mobile at that point in time um I don&#39;t want the Gap be between here so let&#39;s hit apply design I&#39;m going to go ahead and get out our property inspector and I&#39;m going to make this a little bit taller and I&#39;m also going to get rid of the the vertical gap which is right here so I&#39;m going to hit zero there okay now I&#39;m also going to take our button and we&#39;re going to extend this out with Advanced sizing so we&#39;re going to make it like 70% withth awesome all right so let&#39;s see what this looks like as we expand out in terms of sizing let&#39;s go back uh here and click View and we&#39;ll see how it responds probably want to add a little bit of uh margin around it and I think what we want to do honestly is let&#39;s just select it all right so we do have uh it is 90 a width of 99% we could probably add margins to stuff to make sure that it gets rid of the white space on the left and right so if we wanted to do that you know we could do something like 30 here 30 here let&#39;s see what happens though when we click stretch and see what happens to it to see if it scales down automatically yeah I don&#39;t think I like that let&#39;s get this centered back up that&#39;s looking better there and if I go back here to view it I&#39;m just kind of taking a look at what happens here and you could definitely tin around with it more to get the white space issues definitely corrected up so let&#39;s go back to edit site and what we can do in desktop let&#39;s add another option here or another section which would be a footer so if I go to sections and we go to Footers I can go ahead and I like this one at the bottom I don&#39;t like the white space around it and by the way we do need to reorder it to make sure it&#39;s at the bottom so let&#39;s position that to the bottom I&#39;ll get rid of the padding it&#39;s right behind me you can&#39;t see it but just make the adjustment to zero and now it&#39;s at zero we&#39;ll see what it looks like here on tablet again we want to make sure that this is at the bottom and also get rid of the padding and make sure it&#39;s applying to all there we go and then finally we&#39;ll choose mobile and again we want to make sure that it&#39;s in the correct section and also without any margin so zero and it&#39;s not updating for me one second eight or zero there we go all righty so now let&#39;s go ahead and view what this looks like start out here have our hovers we have our pre-order ends in we have our footer so at this point now what we can do is Click publish and you can give it a custom URL here and of course you can also connect your own Doom and I&#39;m just going to hit save and continue and now we can write we can just click view site it&#39;s going to open up a new tab and we can see exactly what our design our layout looks like in the actual live browser and as everybody else would see it and then what you can do is take your address here you can also open it up on your phone and then see exactly what it looks like on your phone or your tablets or anything else now we&#39;ve only really just scratched the surface uh on many of these elements I of the interface there&#39;s a lot more things you can do for instance you can actually integrate code you can create JavaScript i Custom Integrations no JS platform for a backend full version control with GitHub built-in external apis pre-u I mean there&#39;s a lot so if I choose start coding we&#39;re not going to actually get into this but you it sets up as you can see a developer mode and there&#39;s also a Wix IDE that&#39;s browser based that it&#39;s featured kind of very similar to visual studio code but it&#39;s in your browser which is awesome so if I click on that you&#39;ll see that the Wix IDE is loading up and then it just allows you to add Dynamic functionality with JavaScript in this editor and this is going to be something we would do in a different video but as you could see very similar to like a visual studio code as you see so we have our Styles uh we have our pages and we have all this very cool stuff so very very very awesome there&#39;s like I said even more than that you can adjust CSS code specifically for certain elements uh if you wish uh but again I think what I&#39;ve done here so far is is more than enough to get you started I you obviously with what I&#39;ve taught you can build full-fledged landing pages with this and information Pages really quite easily so if you enjoy that definitely check out the top Link in the YouTube description here where you can start using uh the Wix Studio editor right now make sure to subscribe if you haven&#39;t yet and I will see you all very soon goodbye

Transcript for:Building a Website with Wix Studio

Transcript for:
Building a Website with Wix Studio