Web Design in Editor X | Wix Fix

hey guys welcome back to wixfix i hope you’re having a fantastic day in today’s video we’re going to be doing our first web design video in editor x and i figured for today’s video we will knock out two birds with one stone and we’re going to be designing the home page for the brand new wix fix website now editor x is a lot more complex than the classic editor so i’m going to try to be as thorough as possible the way that i learned editor x
the quickest was to re-watch tutorials over and over again until it clicked so don’t be afraid to watch this video multiple times or just like the sections where you’re confused on and i’m going to be breaking this video into two parts for this video we’re going to be doing desktop in my next upload we will be doing tablet and mobile now my process with editor x is a lot different than the classic editor in the classic editor i was able to build
and design at the same time however with editor x you have to build stuff in a certain way to make sure it functions properly and so that kind of makes it very hard to design at the same time with that being said i typically use a prototyping software like adobe xd to design my websites first and then i will develop it inside of editor x so that’s what we will be doing today i’ve already uploaded all my assets from the adobe xd project i’ve also
already created all my pages and i’ve also already changed all my fonts and colors in the site themes so we are basically ready to get started the first thing i want to do is create the header if we look at the design that i created we have a logo over here on the left a menu in the middle and then a little button and cart icon over here on the right we also have a very thin line on the bottom so in order to do that in editor x what we want to do
is click the header and we’re going to press apply grid we’re going to choose the 3×1 option so now you’re going to see it split it into three different sections however i kind of want this middle section to be a little bit larger since this will be the largest section in the header so we’re going to go to adjust grid edit grid and for we’re going to click on this one fr and make this 3fr and you’re going to see it kind of adjusted all the other
sections in the grid as well for us automatically so we’re going to go ahead and press done now let’s go ahead and add our logo over here so i’m going to come over to add go down the media and drag out our logo so as you can see this is quite large we don’t want it to be that big so what we want to do is kind of just shrink it down shrink it down until the width is 100 pixels just like that now if we were to leave it like this when we bring in
the website it’s going to get super tiny or if we go really big then the logo is going to get really huge we don’t want this so what we actually have to do is come over here and there is a minimum width and a maximum width value so since this was 100 pixels wide maybe the minimum could be 80 pixels wide and the max can be 110 pixels wide now if we shrink the browser it’s going to stop shrinking once it hits 80 pixels and if we’re viewing the
website in a very large browser it’s not going to grow any bigger than 110 pixels this is basically the technique that i use for just about every single floating image inside of editor x if you do a stretched image like something like this then it’s completely different but we’re not going to be doing that and you really don’t want to do that for your branding images like your logos and obviously you want to make sure that scaling proportionately
is is on otherwise when you shrink down the browser and stuff like that you’re going to get some weird cropping effects like that which we obviously don’t want so we’re going to come back over here make sure that the scale proportionally is checked on and we’re going to move this into the header and obviously we want to make sure it’s on the left side of this grid line and then as you can see right now it is docked to the top and it’s docked to
the left i don’t want it docked to the top so if you come over here into the inspector panel and press align to middle it’s going to remove the docking from the top then if we look at the margins it is 24 away from the edge of the website for this i actually just want to use pixels and we’re just going to set it to 80 or 80 pixels next let’s go ahead and do the menu right here so we’re going to come over to add go to menu and we’re just going to
drag this one out right here now i’ve already created a menu based on what pages i want in my header but if you did not already set up your menu you can come over to manage menu and you can add pages to the menu or you can add links or sub menu titles and then if you want to add a second menu to your website then you can come over to this drop down go to manage site menus and you can add a doom menu but for now that looks pretty fine however we
do want to change the font so it’s poppins light we’re going to make this 14 pixels and we’re going to make sure that the colors for the regular hover and clicked are all the same colors that we want to use and then if we shrink in the browser we’re going to notice it goes to more which we don’t want that we want to uncheck the option that says all items are the same size so it’s going to do that it’s going to give us more space and then what we
want to do is come over to the inspector panel and set this to maybe something like 80 something maybe like 70 something like that and then of course we don’t want it to dock to the top so we want to align it to the middle if it docked to the top then when we shrink down the browser then some elements would get closer to the top and we don’t want that it would look uneven so of course we just went to a length to the middle so it’s stuck to the
middle now the right side had a button and a cart icon so what we’re going to come over here and do is come over to store and add a little cart just like that and we’re also going to come over to quick add and just do a button now let’s go ahead and stylize the button first what we want it to do is have a fill of this color we want to remove the border let’s add like 10 pixel radius text needs to be poppin’s light 14 pixels remove the bold and
we’re going to make it white then for hover the fill just needs to be this this peachy orange like that now let’s go ahead and edit this cart button so we’re going to press settings let’s go ahead and choose this option right here for the bubble color we don’t want to be that we want to be this one right here for the font we want to make sure it’s popping slight and we’ll make sure it’s just set to this off-white color like that next if we just
put these over here inside this header when we shrink down the browser they’re going to kind of overlap each other and not look very nice so what we actually have to do is use a container box with a grid so if we pull out this container box and we we can shrink it down quite a bit because we don’t need it that large then what we can do is apply a grid to it and we can go ahead and put this cart icon in here okay and as of right now it is docked
to the right which is fine but we’re gonna remove how far it is docked to the right but then we’re gonna add 20 pixels of margin to the left okay next let’s go ahead and move the button into this left part of the grid if we look right down here we can see it’s docked to the top we can either press this little handle and it’ll undock it or we can just press align to middle and it’ll undock it for us there as well now you may be saying that this
looks like way too much space and you’re right so what we need to do is come over to adjust grid edit grid and we’re going to come over to this one fr and change this to max content okay and that’s basically what it does so it so it took the space of this plus the 20 pixels that we had for spacing and it shrunk down the rest of it which is exactly what we want and then we can bring this in just a little bit like that and while we have the
container selected we can come over to the design and completely remove the border completely so now let’s go ahead and drag this box over here into to the right hand side of the header and then what we want to do is we can see it is docked to the left and the top so what we want to do is actually dock it to the right and remove the docking from the other sides just like that we want to align it to the middle and we want this to be 80 pixels from
the right hand side now if we preview our website this is what our website is going to look like but of course we still need to add the line so what we’re going to do is come over to add we’ll just do quick add and do outline so what we want to do is kind of stretch this to across all three grid parts then we’re going to set it to 100 and we are going to align it to the center and then put it at the bottom and then if we come over to the design
tab we’re going to make it only one pixel width we’re going to set the color opacity to 20 also it may be beneficial to add min and max values to the buttons similarly to what we did with the logo over here so maybe since this one is 142 pixels wide maybe it can go down to 130 pixels and then max 150 pixels now we are done with the header and we can go ahead and start beginning work on the hero section so for this one let’s go ahead and set it to
like a thousand pixels high for now we’re gonna go ahead and come over to the add panel we’re gonna go to media and we’re going to use one of the images paste in this image right here and we’re going to stretch it to the full width of this section the next thing i want to add is our little my little icons and i’m going to go ahead and copy and paste it and bring the second one like over here all right next let’s go ahead and add an image so i’m
just going to drag this out right here i’m going to shrink this down quite a bit and i kind of want to overlapping these icons a little bit i’m going to copy and paste it in bring it down here maybe this one can be a little bit wider okay i’m going to copy and paste it one more time bring it over here and we’re just going to do something like this so now let’s go ahead and change the images next let’s go ahead and click the settings icon and
under scroll behavior let’s go ahead and set it to parallax and we’ll do that for each one of these and then what we want to do is come over to the design tab and for under corners we’re going to add 10 pixel radius on all of them if we scroll over to the right hand side we’re going to notice that there is some added space to the right hand side of our website and that’s because of these icons right here so to prevent that what we want to do is
select the image we’re going to go to the breadcrumbs and select the section then in the inspector panel under overflow content we’re going to choose the option for hide basically what that’s doing is hiding any content that exceeds the width of the website next if we look over here at my design we have the partner badge we have some light text heavy text and then a button so let’s go ahead and do that inside of editor x so the first thing we
have is that little icon so let’s go ahead and add that and obviously it’s going to be pretty big so what i kind of wanted to do is just like the logo we’re gonna shrink it down until it’s about let’s say a hundred and width then we’re gonna set it’s 90 pixels minimum and 110 pixels maximum next let’s go ahead and add some text and we’ll add some more text and i’m just going to copy and paste the button from the header so for this text right here
what we want to do is be we want to be heading 3 and it’s going to say learn wix fast okay and then we want it centered up and then maybe we can add a little bit of character spacing for this next text we want to be heading one and we want this one to be quite large so what i want to do first is go ahead and set this one to be about like eighty percent something crazy large for right now we’re gonna have it centered up and i’m just gonna go ahead
and paste in the text now i don’t want to have auto spacing so i’m just gonna go ahead and shrink it down and we’re gonna center it up on the page i’m gonna center this one up on the page center this on the page so the next thing i want to do is set up scaling text so in order to do that you can open up the text options and you’ll see this option for scale text this lower number is the pixel size of the font on a mobile device biggest number is
going to be for desktop which we’re going to do 40. we’re going to go ahead and do that for this one as well mobile we kind of want this one to be kind of large so 30 but then on desktop we want this one to be pretty large so maybe like 70. now let’s make sure everything is centered then we’re going to grab everything and press stack now i’m going to grab the stack and center it up inside of this section right here now this is a lot larger than i
wanted it to be so what i actually want to do is click the background click the section and instead of it being a thousand pixels i want to be 90 vh and basically what that means is that this section is going to take 90 percent of the user screen no matter what screen size that they are on and that’s the use for scrolls we’re gonna see that now you can see that this is causing a little bit of an issue right here so we can just kind of scoot it up
a little bit and honestly i’m just going to bring it down a little bit because it doesn’t need to be that big and then i’m also going to go ahead and add 30 pixels of margin to the bottom that way just in case on some screen sizes this can’t go closer than 30 pixels to the edge so now if we resize the browser this is what we’re going to see now obviously you’re going to see those images get really really tiny and we don’t want that so we need to
do what we did with this and the logo and just set at minimum and maximum but you might be saying like how can we tell what the pixel width is so if we switch it over to pixel then we’re going to see this one is set to 200 pixels then we can switch it back to percentages so now that we know that it’s 206 pixels we can set a minimum of maybe like 160 pixels and a maximum of 220 pixels and we kind of just do this same effect for each one of these
images so now if we preview the site again we’re going to see that they shrink down but they stop shrinking once they hit a certain level all right now we are done with the hero section let’s go ahead and add our next section on our website if we hover on the bottom line of a section with a section selected we’re gonna see a little icon that says add section it’s gonna allow us to add a blank one a section with a grid or a section with a layouter
for this option we’re gonna go ahead and press blank now what i want to do is go ahead and add a container to this section in this container i do want to add a grid so we’re going to press apply grid and add a grid next i want to edit the grid and i want this one to be 280 pixels and then i’m gonna go ahead and add an image into this section right here and we’ll stretch it to the full width i went ahead and changed the image but of course we want
to come over here and add the 10 pixel radius like we did with these images up here and then over here on the right hand side i do want to add some text so we’re going to go ahead and add a title we’re going to add a paragraph and just like before we’re going to copy and paste a button we’ll leave this one on the left hand side for now we’re going to set both of these the title and the paragraph to 80 width of this grid section for this title we
want it to be heading 6. for this paragraph we want to set it to paragraph three and just for fun we’re going to go ahead and make sure that the font color is something like a dark gray just to kind of switch things up a little bit okay and then over here you want to add the button it’s going to say learn more and i don’t want it to be this size so we’re going to do something like 35 pixels and maybe the minimum can be 100 okay so i went ahead
and pasted in all my text i’m going to go ahead and select everything and press stack now i’m going to go ahead and come over to the inspector panel and just make sure it’s centered now i’m going to grab this box and i’m going to go ahead and make sure it is centered inside of this section i’m going to add 100 pixels a margin to the top and 100 pixels of margin to the bottom then i’m going to come over to the design tab and completely remove the
border and now i’m going to select the background section and completely remove the height and basically what that is saying is that the height of this section is completely dependent on this section plus the 100 pixel of margin up here and the 100 pixel of and the 100 pixel margin below so now if we preview the site and we bring in the website this is what we’re gonna see we’re going to see that everything is kind of getting a lot more squished
so what we need to do is grab this section we’re going to actually come over 2 pixels and we’re going to see it’s set to 800 pixels wide so what we want to do is come over to minimum and set a minimum of 600 pixels and a maximum of 1000 pixels so now when we shrink down the website everything should go with it which i don’t like that this text wraps so what we want to do is come back here we’ll grab the section and maybe we do 700 pixels right
here so now when this section shrinks to 700 pixels it’s going to stop shrinking just like that perfect okay now we’re done with this section so we’re gonna go ahead and add the next section to our website and we’re going to make it blank now i kind of don’t want these to kind of flow into each other right here so i kind of want to make sure that this section up here we’re going to set the background color to straight white that way this section
is completely separate to this one and then what i want to do is go ahead and set this one to a crazy height like 2500 pixels and then what i want to do is go ahead and apply a grid to it and we’re gonna do one by two then we’re gonna go ahead and edit the grid and we’re actually gonna set this one to 300 pixels just like that all right now i’m gonna go ahead and add a container box to this top one and we’re gonna go ahead and stretch it to the
full width of the screen of course we want to remove the border and we’re going to go ahead and apply a grid to it and we’re just going to do two by one and since we’re already in the inspector panel let’s go ahead and add 80 pixels of margin to the left and the right we’re going to go ahead and add a title and a paragraph over here and then over here to the right we’re going to add some buttons but we’ll get to that in just a minute for this
title let’s go ahead and do it 90 pixels or 90 percent width i’m gonna go ahead and stick it to the left and let’s go ahead and do like 60 for the paragraph and we’re gonna stick to the left as well for this one we want to make sure that we are on heading three for this one we want to make sure we’re on paragraph two and we’ll make sure it’s 16 pixels okay let me just go ahead and copy in our content okay and then for this one we’re going to make
sure it’s dark gray we’ll go ahead and set this to 50 instead of 60. then we’re going to come over here grab both of them and press stack and then just like before we want to center it horizontally that way it also undocks it from the top and keeps it docked to the left and then over here we want to add some buttons so what i want to do is of course just copy and paste this over and for this button we’re going to do something a little bit
different so for this one we want to be light gray and text we want it to be a little bit darker of a gray like that and for the roundness let’s just go ahead and set it to 50 because we want this one to be fully rounded and then on hover we want it to be this color right here let’s go ahead and set these up okay now that i have changed the text for the buttons i kind of just want i don’t want there to be space on either side of the text so i’m
just going to kind of shrink them down a little bit and then just like before when we shrink in the browser this is they’re going to start overlapping each other so we don’t want that to happen so what we kind of need to do is the same thing that we did up here for these is create a container box split it into a grid set each button with a 20 pixel margin and and set each part of the grid to be max content so let’s go ahead and set that up so i
want to come over to add container we’ll just drag this in we’ll make this fairly short let’s just go ahead and make this as long as we need it to be and then we’re going to go ahead and apply a grid to it so this first one we’re going to drag in here we’re going to drag this one here and this one in here just like that okay we’re going to come over to the inspector panel of course we want to make sure it’s not docked to the top we want to set
this to zero percent to the left and we’re going to do that for each one of these buttons real quick now for each of the buttons let’s go ahead and add 20 pixels of margin to the left which this last one doesn’t really matter but we’ll go ahead and do it for that one as well next select the container box press adjust grid and then we’re going to set each one of these to max content and we’re actually going to leave the last one as is because if
we set this one to max content it’s going to shift everything to the left and we won’t be able to edit it and it makes it very difficult so we don’t want to actually do that so we’re going to undo that one press done and then we can just bring in this one manually just like that while we have the box selected let’s open up the design panel and completely remove the border and then we’re going to go ahead and bring this up to where it is in line
with these this header text we’re going to come over to the inspector panel and we’re going to dock it to the right and remove the docking from the top now let’s go ahead and set this to 0 and it’s going to bring it all the way to the right for us and before i forget let’s go ahead and select the section we’re going to come down to scroll effect and press sticky for the next part of the section that we’re going to be building is we’re going to be
building this section now i’ve already made a tutorial on that before in the past and i don’t really want to cover it again so i will have a link in the description for you but if you’ve already seen that then enjoy this little time lapse so basically what we just created is a section where this title text stays there while the user scrolls down and then these tiles float in and then as the user continues to scroll then everything will start
floating up they’re not floating up very far because we don’t have the next section built yet but they will also if you’re wondering where i am getting these icons from it’s from my website called lord icon they have over 1500 animated really cool icons um so if you’re interested in using them for your website i will have a link in the description below now let’s go ahead and add our next section so for this one we’re going to do blank and the
first thing i want to do is just go ahead and add a line and we’re going to set this line to be 92 pixels in width we’re going to have it centered but we’re going to have it at the top of the section of course we’re going to have it only be one pixel width and we’re only going to set it to 20 opacity so we’re going to have this line here but as i am scrolling you’re gonna see that these tiles are gonna go underneath this text which we don’t want
these to show up so something i forgot to do earlier is if we select the section and come over to the design tab we want to make sure that this one has a background color set to 100 just like that so now when we preview and everything starts going up then these things are going to go behind that section and it’s going to look like that and then this line is going to stop right here and bring everything else up with it so that looks pretty clean
again if you want to see how i made this section i do have a tutorial on that already so for this next section it’s basically going to be like a little text about our shop with buttons that link to our asset shop in our template shop then the next sections are going to be you know a call to action for our latest asset and then our latest template but right now we’re just going to be focusing on this one right here so let’s go ahead and build that
so similarly to what we did up here we’re basically going to basically replicate this section completely so what i actually want to do is just copy this text right here i’m going to come down to this section and i’m just going to add a container this container we want to be 100 with we want to be centered we want to apply a grid to it so we have a left and right hand side we also want there to be 80 pixels of padding on the left and the right
hand side and then we’re just going to paste in that text that we took from the other section just like that so now what we want to do is center this inside of this section this grid section and we want to make sure that the margin is set to zero then over here we want to add two buttons which of course we’re going to follow the same technique we used for this one but i’m going to copy this button right here okay and then we’re just going to
paste it in and we’re gonna go ahead and paste two and just like we did before we’re gonna pull out a container we’re going to apply a grid to it two by one since we only have two buttons i’m gonna pull the first button in here the second button into the left hand side of this grid and then for this one of course we want to align it to the center and make sure the right margin is set to zero and the left margin we want 20 pixels and we’re going
to do the same exact thing for this left button okay now we can select the container box press adjust grid and for the one on the right we’re going to go ahead and set it to max content now we can go ahead and drag this up so it’s in line with our header text over here inside the inspector panel of course we want to remove the docking from the top and remove the margin from the right hand side then in the design tab we want to remove the border
from the box and we want to do the same exact thing for the main box as well okay and for this box we kind of want there to be we want there to be 80 pixels of margin on the bottom and top and then for this section we’re going to remove the height completely so again just like this section right here this section is purely based on the height of this content and then plus 80 pixels on the top and bottom all right now let’s go ahead and add the
next section for this one let’s go ahead and set it to 800 pixels we’re going to go ahead and apply a grid to it just two by one just like that and over here on the left we wanna add an image and we’re gonna go ahead and stretch it to the full width of the screen and let’s go ahead and change the image to something else okay next let’s go ahead and add another image and for this one i’m actually going to choose one of my image overlays i’m going
to go ahead and stretch it to the full width of the screen now if i preview there is like a one pixel mistake right here where we can see the image behind it so what we want to do is actually come over to our layers panel come into the section we’re going to choose the background image and we’re going to add like 20 pixels of margin to the right and that should push the image over just enough so we do not get that mistake anymore however i do
want to come over to that image come over into the settings and make sure that we have parallax put on the image that way we get this effect right here of course we can’t really see what’s going on so i can either choose a different image or i can try to mess with the focal point just a little bit which i think i’m just going to do something like right here and that should be fine enough then over here on the right hand side we want to add some
text about our image overlay pack so i’m just going to go ahead and just grab this stack right here come all the way over here and just paste it in and temporarily i’m just going to go ahead and unstack everything then i’m going to copy and paste this paragraph text put it on top and we’re going to have it say latest wix fix assets and for this title i do want it to be larger and we’re actually going to do the scaling text for this one so i want
to be like so i want to be 40 pixels on desktop and maybe like 24 pixels on mobile and of course we can stretch it out a lot more so that we’re not dealing with the wrapping text and then let’s just select everything and restack it then we’re going to grab the stack and then we’re just going to center it up inside this section that way it’s not docked to anything but when we press preview this is what we’re going to see looks really clean the
next thing i’m going to do is just go ahead and copy and paste this section completely so it’s going to completely duplicate it for this left side we’re just going to delete both images then we’re going to bring this text from the right over to the left and we’re going to center it up here and then we’re going to go ahead and add an image of our template we’re just going to bring it in here and center it now i forgot to change the text here so
let me go ahead and do that so this should say image overlays and the button should say get now for this text it should say latest wix fix template this is going to be the template name okay and we are basically done with this section now i want to add another section and this next section is actually going to be the call to action for my users to subscribe to my newsletter now if you’re already a subscriber you know i never send these out
however you do get a couple freebies with it you get the seo checklist and the branding worksheet now i actually redid the seo checklist so that it has a whole other page of useful content and information that you may need to know for your seo so be sure to subscribe and make sure that you download the brand new seo checklist over here to the left we want to have some text and an input field for people to subscribe and then over here to the right
we’re going to have image with both of the freebies so what we want to do is go ahead and apply a grid two by one and then the first thing i actually want to do is go ahead and add a line just like that we’re going to set this one to 92 percent we’re going to align it to the center and send it to the top we only want to be one pixel and 20 opacity next let’s go ahead and add a subscribe form so we’re going to come over to add contact form
subscribe and we’re just going to use this one right here okay and while that’s generating let’s go ahead and add the image over here to the to the right obviously this is quite large doesn’t need to be that big but we’re just going to bring it over here and of course center it up okay and then for this let’s go ahead and set it to 70 percent and we’re going to go ahead and dock everything to the left and remove the margins so we’re going to do
that for each one of these right here so for this text we want to say want some freebies and we want this one to have scaling text so we’re going to do something like 30 and 50 something like that next let’s go ahead and add a paragraph in here to like 10 pixel margin there and then let’s do like 20 pixel a margin below we’re gonna set this to 100 percent and i’m just going to paste in some text just like that and let’s go ahead and actually set
it to 90 so that way competition isn’t all by itself down below and of course we’re going to dock it to the left and remove the mark and it doesn’t look like this is the right font so we’re just going to make sure let’s go ahead and make this okay and then let’s go ahead and center up this field just like that and let’s go ahead and add 80 pixels a margin above 80 pixels a margin below and then for the input field let’s go ahead and design it so
the fill is going to be white it’s going to be pure white i’m going to remove the border completely the text needs to be poppin’s light 14 pixels and we’re going to remove the italics next let’s go ahead and check cover focus and air and just like the other components on the website let’s go ahead and add a 10 pixel radius to this input field so now we’ve got kind of like this nice rounded look and now we need to make this submit button look like
our other buttons on the website which is not hard to do so what we want to do is make sure that the alignment of the button is set to middle then in the panel over here we want the background to be this color right here text to be poppin’s light 14 pixels remove the italics and make sure it’s white and then for this button let’s go ahead and set it to pixels we’re going to go ahead and set it to 100 i’m going to set the height to 35 and margin
let’s go ahead and add 15 pixels to the bottom just so there is some separation between the thank you message and submit and then for this thank you message i’m going to remove the padding from the bottom since it says thank you for submitting i’m going to make sure that this says is poppin’s light of course and then here we want to say download your freebies here and here is going to link to the freewrist claim page and we’re also going to
change the color to this orange and something i forgot to do with this button of course is make sure that we add the 10 pixel radius and of course we need to check hover and make sure it looks good here as well now the only thing left to do is the footer so for this one what we’re going to go ahead and do is do 380 pixels in height we’re going to make the background color this dark blue we’re going to apply a grid and although i have plans to do
more stuff with the footer later let’s just go ahead and add three by one for now then i want to add 80 pixels to the right and left and maybe 40 pixels on the top and bottom the first thing i want to add to this is the light version of our logo we want to shrink this down to where it says 100 pixels in width and then of course here we want to set this to 80 pixel minimum and then 110 pixel max and what we’re going to do is go ahead and stick it
right here next i’m just going to copy some text from other parts of our website i’m going to paste it in i’m going to stick it right here make sure that there’s no margin on the on the left and remove the docking from the top and i’m going to change the text to our slogan to learn wix fast then i’m going to copy and paste it again make sure it’s not not docked to the top and then i’m going to paste in some text just like that and then i’m going
to go ahead and add a social bar as well so i just need to come to add embed in social social bar and we’re just going to drag out this one right here now i’m not going to set up the links or anything right now to save some time but i am going to design it so i want the icon size to be 20 and the spacing to be 4 pixels which that looks nice right there next let’s go ahead and add a menu so i want the menu to be a vertical menu here and we’re just
going to drag out this one right here which looks really nice which we’re going to edit don’t worry and for this menu we want to be the footer menu as of right now these are the exact same but in the future these will be changed and maybe even on the live site they’ll be changed and we’re going to come over to the design tab we’re going to remove the background text we’re going to make sure it is set to our font make sure it’s set to 14 pixels
and even though i don’t have a sub menu i typically like setting this up just in case in the future me or clients want to add any sort of sub menu so even though i don’t have one as of right now i do typically like just setting it up just to make sure and then if we come over to the selected tab we’ll make sure that this is set to the correct color and as of right now that’s all i want to put in the footer on the live site things may be a little
different but for now i really like this design this is and this is basically our home page now if we shrink stuff down you know some stuff may need to be tweaked but for the most part things actually look pretty nice now each one of these sections just like we used up here for this container box for the stacks we can also set a minimum and maximum width you know let’s change this one to pixels so it’s 500 pixels as of right now but let’s say we
don’t want it going below 450 pixels and we don’t want it any larger than 600 pixels and we can kind of do that with all of them but now when we look at it this is what it’s going to show basically besides that that is how you make websites in editor x now like i mentioned before the next video will be for tablet and mobile but that basically wraps it up for the video today guys if you guys did enjoy please consider subscribing for more wix
content and editor x content coming out really soon thank you guys again and i’ll see y’all in the next you