Modern Web Design in Wix | Wix Fix

hey guys welcome back to wix fix i hope you're having a fantastic day in today's video i'm going to be showing you how i designed a website for a new company called the snorkel guide now i designed this website for one of my wix fix subscribers he watched several of my videos and managed to design this website right here and for someone who is new to wix is actually really good but he did end up reaching out because he wanted to take it to the next level so here is what we're going to be creating today now in this tutorial we'll be using a bunch of techniques that i've done so many times in the past so in this video i don't really plan to cover how i'm doing it i'm just going to be covering why i'm doing it so you guys can start developing that web design headspace and apply it to your website now if you are new around here i will be putting links in the description to videos that exclusively talk about what i'm going to be covering in this video now if you've been on this channel for a while you know that we use blank websites we don't typically use templates and that's for two reasons one i feel like templates really hinder my creativity and i feel really confined to keep the template as is if i decide to add things or remove things it really just clashes with what i really want to do and i feel like i end up messing up the template secondly there are so many different wix websites out there and although some of these templates are really good think about how many other wix users are using that same exact template and i prefer to have a website that looks more original so for this tutorial we're going to be using a blank template the first thing i like to do is go ahead and set up my pages so we'll come up to menu and pages and we'll start adding the pages that we plan to use on our website boom there we go and the next thing i like to do is come over to our theme manager right here and go ahead and set up our colors and before we close out this tab we'll come over to text and we'll go ahead and set up our text themes okay now that we have all of our text themes set up we can go ahead and get started so the first thing we're going to do is edit our header now if you've been here for a while you probably know i do not like keeping things in between these two lines because that will make the website seem really squished on a larger desktop such as this one so what we're going to do is add a strip so i'll come up to here strip and bring it out next we'll go into the settings and remove the opacity so that the color isn't there and then we are going to set the height to this to about 110. we're going to go into layouts and press add column we'll click the left column press layouts again and align it to the left we'll click the right column layouts align to the right then we'll just bring this up into the header you'll see a highlight and say attach the header and we'll just release also i'm going to go ahead and press the stretch button right here and we're going to go ahead and add a 60 pixel margins to both the left and the right so as you can see on the right we have 60 pixels right here and on the left we'll have 60 pixels right there as well so now let's go ahead and add a logo and it's just going to be some text there we go i'll go ahead and bring it into the header and we'll align it to the left next i want to go ahead and add menu hamburger icon so we'll go to add we'll go to decorative and we'll do more basic shapes here we'll search lines and then you can kind of choose which one you want to use for your website for this example i think i'm going to use this one right here and of course we are going to shrink this down quite a bit and then we'll go ahead and move it up into the header but on the right side and then we'll press this little align button and align to the right now let's go ahead and do the footer so we'll do the same thing as we did before we'll add a strip this one will make it dark we'll choose layouts add column we'll click the left column press layouts align to left right column layouts align to right next we'll drag it down until we see move to footer pop up and we'll press that button now we can go ahead and add in our footer content and let's go ahead and not forget to add our 60 pixel margins to keep the site consistent let's go ahead and select the footer we'll change the design we'll choose this color one right here customize design fill we'll remove the center background and we will add and we'll go ahead and add a color and we'll use this color that way we can align all of our content up together and just stick to the left and now let's add a menu over here to the right and there we go that is our footer design we have the logo again we have a little description about what the company is we have the address of the company the email and then over here on the right we have different links to the other pages now we can go ahead and begin the the page design so we'll go ahead and add a strip right up to the top like this we'll go ahead and add our 60 pixel margins and this is going to be the main image on the website in web design this is called the hero section so this is going to be the first thing your users see so we want to make it nice and big so we'll make this 700 pixels hi and then we'll change the strip background to an image now you can either upload your own images or you can come over to unsplash or media from wix these are both really high quality stock photo libraries that you can use for free so after we find an image that we want to use we'll go ahead and say change background next we'll come over to background scroll effect i'll select the parallax this will make it so when the user is scrolling down the background image doesn't move as fast and looks really cool next let's go ahead and add some text so go come up to add text and we'll add a heading one now if you're new around here you want to remember to only have one heading one per page um because that tells google what the page is about so what we're going to do is now change the color to white and we're going to change the alignment to the center and then we're going to put in our text okay and then what we're going to do is come up to it we're going to select our text element we're going to come up to a line and we're going to center it to the strip okay now the hero section is finished so we'll go ahead and add another strip below it okay and then for this i want to add a design element so we'll come over to box and we'll just pull out this box right here now i don't want this to be that tall so we'll go ahead and shorten it up but i do want it to be long so we'll probably make it about 940 pixels and we'll go ahead and center it up next let's go ahead and change the design i do not want a fill but i do want a border and we'll make this border this dark blue right here and we'll add a one pixel width and maybe this border is too dark so we'll go back into here and we'll choose a light color like that okay now let's add a text element we'll go ahead and center it up and we'll say about and then i kind of want to change the color to a dark blue so we'll use this one and we're going to stick this right here as you can see the line of the box kind of goes through it so what we're going to do is come over to app we'll do decorative and we'll pull out this blue square now we're going to shorten this up quite a bit and we're going to change the fill to the background color and we're going to stick it right over the about now something i forgot to do was change the strip background or remove it so we're going to select the strip change her background settings and lower the opacity now this little square that we added matches the page background now let's go ahead and add our little text paragraph just like that now let's go ahead and shorten the height of the strip to about 300 pixels and then we'll go ahead and grab everything in the strip we'll make sure it's centered so we'll drag it up and you're going to see it connect to the center and we're all set great so now we're going to go ahead and add a section that's going to link to our other pages so let's go ahead and press add strip we're going gonna go ahead and make this one 500 pixels we're gonna go ahead and change the background opacity to zero we're gonna come over to layouts and press add column then we're gonna do manage column and add a third column next we're gonna click layouts again we're gonna add 30 pixels of column spacing so it kind of separates them then we're going to come over to stretched and add our 60 pixel margins now let's click on the left column and add an image then we'll come into settings change the background color to this dark blue we will lower the opacity to about seven and we'll do that for each of these okay now that we have our images in now we're going to add something called hover boxes okay the next thing we're going to do is go ahead and add another box to this column now we're going to align this to the left and the bottom i'm going to shrink this down quite a bit to be about this size now we're going to change the design opacity to 0 now we're going to go ahead and add a text element we'll bring it into the box and we'll change the name and we will make this our light color next we're also going to align this to the left and bottom then we're going to use our shift and arrow keys to bump this up two times and then right two times now select the container box and select hover interactions and we'll press get started okay now select our text element and bump it up a little bit like that and now let's go over to add to hover and we'll do a button now let's change the text to learn more and now we'll edit the design so phil we're going to remove the fill completely and we're going to add a one pixel border now select hover and we'll change the fill to our light color and we'll change the text to our dark color okay now if we preview the website and we hover over you're going to see the text goes up and the learn more button pops up now if you want to learn more about hover boxes and what they are and what you can do with them i do have a video in the description below so pause the video go check it out and then come back now i want to link this button to the proper page so we'll click the button press link choose page and this is for top lists now we'll click out of the hover box and we will click the hover box and press copy and paste now we'll bring this one over to this column right over here and we will align it to the left and center and something i forgot to do is click the column change layouts and align it to the left i need to do that for this one as well then we will copy and paste this again we'll drag it over to the third option and just connect it to the bottom left now let's change the names so this one will be reviews and this one's going to be education now let's go under hovers and make sure that these are linked to the proper pages so the next section is going to be a repeater which is something you can't put into a strip so what i'm going to go ahead and do is add a strip just below it i'm only going to make this one 80 pixels i'm going to remove the background and this is just going to be a separator for us so let's go ahead and press add we'll come over to listing grid and we'll pull out this one and we'll go ahead and move it down and we'll move it right underneath that strip that we just created right here next let's go ahead and press stretched and we'll stretch it to the full width and we'll add 60 pixel margins so the next thing i want to do is select the repeater not one of the container items but the actual repeater and we're going to press layouts and add 30 pixel spacing in between our items now we'll select one of the items and we'll make the height 500 and we are going to stretch the width right until it hits our line just like that so i stretched the width until it hit our margin just like that so now it's stretched to the full width and matches the alignment with the rest of our content okay what we're going to go ahead and do is just erase everything in here i'm gonna go ahead and press manage items and we're gonna remove all but two so i'm gonna go ahead and change the background this part really isn't all that necessary but this is still something i prefer to do just for good practice so you can actually get a feel for your site in the editor and what this section is going to be for is your recent blog posts so in order to do that we actually need to add a blog so going to come over to the left and press start blogging and we're going to add a blog now a little box is going to pop up and ask if you just want a normal blog or if you want a blog where users can create an account and comment and do all that kind of stuff so if you want them to interact with you then you can select blog plus members area or you can just do a normal blog for this example we'll just do a normal blog then it's going to take us to the blog page it just created however if we come over to pages go to site menu you're going to see it's going to create a blog page for us what we're going to do is just press this three dot icon and press hide so we'll go back to our home page and we'll scroll down to our blog section right here and then we can go ahead and set up our content for our blog so what we're going to do is come over to add we're going to add a box and we'll align it to the bottom left now we're going to shrink this up quite a bit and we want this to be about 430 by 240 perfect next let's go ahead and add a heading we'll do heading 2 and as you can see whenever i'm adding something to a repeater it's adding it to the second container as well that's why these things are so cool you can add as many elements you can design one and it'll affect all the other elements so what this one is going to be is blog title and now we're going to go ahead and add a button and we'll make the text learn more and we'll go ahead and edit the design to be similar to our other button but instead of it being white we're going to make it in dark blue we'll come over to hover and we'll add the fill to be this dark blue and we'll make the text light now if we press preview you're gonna see that it's just gonna show what we designed our blog posts are not populating in here quite yet so let's go ahead and set that up what we're going to do is come over to add we're going to come up down to content manager and we're going to press add to site this little box is going to pop up and we're just going to press blank and i'm just going to name this delete and press create now and it's just going to populate a content management and it's just going to create like this thing for us but we really don't need this one so after you created that one you're gonna see it right here but you can just delete it by coming over to this three dot icon i'm pressing remove collection um because all you really need is this post one right here that comes with the blog so we'll do add content elements database all right and it's going to pop out this little thing right here now this is invisible when the site is live this is only visible in the editor so you don't have to worry about trying to hide this or deleting it or anything like that because this is not actually going to be visible on the actual site so we'll come over to settings we're going to choose the both collection and then we're going to say read only and we're going to set the number of items to display to only two so it's only going to show that the most two recent blog posts so it's only going to fill up two if you left this at 12 and you have 12 blog posts it's gonna make your page super long because it's literally going to show all of your blog posts now what we can do is select the background image and we'll press this connect to data it's going to ask you which data you want to connect with so we want to do post data set which is this right here and then the item background is going to connect to the cover image next let's go into the heading we'll do connect to data and we'll connect this to the title and then the button we're going to connect to the post page url so now when the user comes in and clicks the button it's going to take them to the blog post so now when we preview you're going to see that it's going to showcase wix's default blog post these are the blog posts that automatically generate when you first add the blog to your website to teach you how to use the blog um so as you can see here this is going to be the title this is going to be the image that automatically populated with that blog post and then if we press learn more it's going to take us to that blog post page next i want to grab this strip right here and i'm going to press copy and paste i'm going to bring this down and i'll put it right under the repeater okay the next section is going to be our newsletter so what we're going to do is add a strip and just like before we're gonna remove the background we are going to give it 60 pixel margins and then for this one we're actually going to add a column so this left side we're going to add an image now on the left side we're going to add a box just like we had before with the outline and we're going to drag it over to this column i will make sure it fits in between those two lines and i'm going to go ahead and grab this box and this text i'm going to copy them and down here i'm going to press paste i'm going to line this up just like that and then here and then this one we're going to call snorkel guide newsletter and then we will go ahead and stretch the width for this and center it up now we just need to add the email box form so we'll come down to contact and forms subscribe and we'll drag out this one right here okay next let's go ahead and shorten these up to be about 45 pixels tall and then let's go ahead and edit the design we'll just click the main subscriber form box and press design form background we're going to change the opacity to zero for the input field which is where they would actually type in their email we're going to go to fill we're going to make it this gray right here for the border we're going to remove the border for the text we're going to make it black and then we're going to make it our our font okay for the submit button we are going to make the fill this dark blue right here and then don't forget to check the hover interactions as well because those are oftentimes overlooked so what we're going to do is change the color for the border to this dark blue and this little text i guess this icon to this dark blue then let's go ahead and go back into the input and check the hover for this as well i'll make this the dark blue focus will make it the same thing then for air we'll make it maybe something like that so what error is is maybe they don't type in a valid email and they click off that they click off this input field and it'll give them an error saying hey you need to fix this before you can submit so next let's go ahead and change this text element to railway light perfect and then we'll make this this color as well now let's go ahead and add a text element right here to kind of give the users an idea of what they're actually signing up for the last thing i want to do for this page is we're going to go ahead and copy and paste this one more time and we'll bring it down to right here and we'll drag it up so this is going to be our website for desktop okay now the users need a way to navigate the pages so we added this little hamburger icon so now we need to make it work so what we're going to do is come over to add we'll do interactive we'll choose subscribe and we'll do the subscribe bar i'm going to go ahead and delete everything that's currently in here i'm going to select the background choose the design now i'm going to go ahead and press design we'll choose an image okay and then we're going to go ahead and change the background color to a really dark blue and we're going to lower the opacity to where you can barely see the image now let's go ahead and add a menu so we'll come down to add menu we'll do a vertical menu and we'll just drag out this first one we'll press design text and we'll change the color to this light color right here and then the font we're going to change to our we'll do like a bolder font for this now let's raise the font size to about 22 hover we're going to make it this color right here and then click so we're going to make it that color as well next let's just go ahead and click the menu and align it to the center now if we look at this little x up here it has a little bit of a green border to match the default color of this little slide out menu so we're going to come into design and we're going to customize design and remove the border next let's click the light box and set trigger we're going to name this to menu we're going to say automatically display lightbox to no and then we're going to exit out now let's go ahead and click this little hamburger icon and we're going to link it to a light box and just make sure it's set to menu now if you preview the site and press this little hamburger icon the menu is going to show up all right and that's basically the design for the desktop now let's go ahead and do the mobile so we'll switch over to mobile and this is what we're going to see not too pretty so i think i'm going to use wix's menu for mobile so we'll go ahead and hide this element right here we'll drag up wix's menu up into the main header and we'll hide this column and then we will drag up this header to the recommended height now the hero section for mobile i'm going to set it to about 200 pixels high i'm going to get the about section out the way and then i'm going to center this up i'm also going to lower the size to about 16 pixels now you can barely read it on here and that's because i forgot to set a background color to this so we'll do change background settings we'll add the background color and we'll lower this to about 70. now i'll switch back over to mobile and we'll be able to read it a little bit better now let's do the about section we're going to set it up the same exact way as we did on desktop for this section i'm going to have it be about 180 pixels tall and i'm going to bring this down so what i'm going to do is actually have this container box be about 120 pixels tall i'm going to center the text up in it then i need to find our little box that i just had where did it go there it is we'll drag it above we'll make it a little bit bigger and then we'll bring the about text right there so now i'm going to go ahead and lower the height just like that and i'm going to delete the space i'll do the same here okay now this section is where we're going to be linking to other pages and as you can see here we actually don't have the button so as fun as hover boxes are for desktop hover interactions do not work on mobile so you're not going to see the button here since the button only showed on desktop when you hovered so what we need to do is come over to hidden elements and we need to do these buttons just like that now if we go back up to the top we're going to see our buttons here so now we need to design this section so we'll so what i'm going to go ahead and do first is make sure that everything is set up so i'm going to make sure the buttons are about 13 pixels font size and i'm going to change the width to about 100 135 i'm going to move this to the right next i want this text to be about 30 pixels so i'm going to go into settings and do font size 30 and i'm going to shorten this text element to be about there so it won't overlap with the button and i'm going to move it down to be an alignment with the button okay next i'm going to select the actual column about 200 pixels in height and then i'm going to move this box down to the bottom i'm let me use the arrow keys to measure up two times and i'm gonna go ahead and do that for the rest of these okay now that i have made the design consistent i i kind of want to add spacing in between here just like i did for the desktop so what we're going to do is select it press layouts then want to add column spacing to about 30. um that's too much for a desktop so or that's too much for mobile so we'll just do 10 pixels okay now we have our spacing strip here and we'll make this let's say like 40 pixels and then we'll delete the space just like that and this is our blog section so i'm gonna have this section be about 325 pixels high next i'm going to grab this box and align it to the bottom left next i want this heading size to be about 22 pixels we're going to shrink it to be about this size i'm going to pull it up to the top left and then use my shift arrow keys to nudge it over to where i want it to be and then this same design that we used for these buttons up here we're going to apply to this one and we will align it to the rest of the site just like that okay now i want this section to be about let's say a 290 in width and about 125 in height just like that and then we will lower the button to be about right there and since this is the repeater it should automatically do it for this one as well then we're going to click in between the repeater items and press layouts and we're going to set spacing between items to 10 and then here is another spacing strip so what we're going to do is make this one 40 pixels now here is our subscriber form and i kind of want the image to be on top so we'll click the side of the strip manage columns and we will lower this one to the bottom now for this column i want to be about 200 pixels so we'll put in 200 and then here we just kind of need to edit this to look nice just like the about section up here okay now this section is done we'll go ahead and delete the space and honestly we don't really need this strip here so we'll do we'll go ahead and press hide element and then this is going to be our footer right here i don't even have to edit this one normally you will see other stuff here um but i think i kind of like this design all we really have to do is delete this column so we'll press hide element and then we'll raise this one up just a little bit and that basically wraps it up for the video if you found this video useful please press that like button and consider subscribing for more content like this in the future thank you guys again and i'll see you on the next [Music] you

Channel: Wix Fix

Views: 14,390

Keywords: modern web design in wix, wix web design, wix modern web design, wix website design, wix tutorial, web design in wix, how to design a web page in wix

Id: 3no4A7JHaI0

Length: 28min 1sec (1681 seconds)

Published: Thu Mar 04 2021