Everything Editor X [2021] | Wix Fix

[Music] hey guys welcome back to wixfix i hope you're having a fantastic day in today's video i'm going to be showing you guys around editor x let's go ahead and get started let's come up to create a new site then it's going to ask us which platform we want to use so we're going to choose editor x and then it's going to ask you what kind of website you want to create but i'm just going to skip this and it's going to give me an option to choose a blank template and then it's going to open up a blank website in editor x so when we first pull up editor x this is what we're going to see if we hover over the artboard we're going to see a few things highlight if we hover over the top we're going to see this green area called the header and if we hover over the bottom we're going to see the footer and then the middle is obviously a section of the page so if we look at the artboard it's going to look pretty similar to the classic editor however you're not going to notice those two lines that we have to keep content inside in fact if we look at the header there's content all the way to the left and then there's a menu element all the way to the right so this is one of the coolest things about editor x is that we no longer have to confine all of our content in between two lines we can put stuff wherever we want and we just have to manually make sure that it fits on all the breakpoints speaking of breakpoints if we come up here to the top we're going to see the three breakpoints it comes with by default now if you remember the classic editor the only one that we have on classic editor is the desktop and mobile but here we also have a tablet version on top of that if that wasn't enough we can also press this 3. icon that says customize breakpoints you can customize them the screen widths to be whatever you want or you can actually add up to three more break points now in the classic editor we had all of these bubbles over here on the left hand side for pages adding and stuff like that now all of that is up here in the toolbar so if we come up to this plus icon this is where you add elements it has a quick add section where you know it has all the basic stuff that you would need and then down here there's compositions which is basically pre-made or pre-designed sections there's also layout tools which i'll get into in another video but this has you know boxes it has grids has layouters repeaters and light boxes and then here's all the other basic stuff like more text variations more button variations and just more variations of each of these things and then down below that is basically wix's internal stuff or services so like blog store bookings events members and content manager next to the ad icon is the layers so this one is actually really cool and i'll kind of give you guys an example of this later on but in the classic editor the layer panel is very different in the sense that order doesn't really matter but if we see here when i drag this section above the header it's going to move this section above the header just like we want so it's a lot more customizable and it actually like makes sense in this editor next to the layers is the masters so here we have a header and we have a footer think of this as sections that's going to appear on every single page so headers and footers are typically consistent across your entire website but maybe you want to add you know a different header so we could duplicate this one and then we could come to the layers panel double click this and change this to home header now if we come back to the masters this one's going to be the home header and maybe we want a different header for you know the rest of the pages so we can go press this three dot icon and press show on and we can choose the pages that this is going to go on this header and if we don't want it on the home page we can just select off of it just like that next to the masters icon is the pages so here is basically exactly like the other classic editor we can just add a page we can name it whatever we want if we press this three dot icon we have the settings seo social share and basically very similar options as the classic editor but one really cool feature is we can set it as a dynamic page there have been plenty of times in the past where i create a page and realize that i kind of want it to be a dynamic page and so i can either create you know a dynamic page and try to copy and paste everything over or you know i just try to make it work on the classic editor however here in editor x i can just switch it over to a dynamic page really quickly and then if you have cms on your website which is the content manager there will also be an option down here to add a dynamic page next to the pages icon is the theme manager this is basically exactly like the theme manager from the classic editor you can you know change the fonts the colors and sizes for each of your headings and paragraphs and then if we click over to the colors tab you know we can set the colors for the website as well next to that is the app marketplace basically exactly the same as the classic editor so i'm not going to cover it too much and then next to that is the content manager where you can create collections and dynamic pages and everything like that in the middle next to the breakpoints that we've already covered is going to be the page selection and then if we select manage pages it's going to open up the pages panel for us to the right of the breakpoints is the width of your website now i don't typically use this that much typically what i do is i just drag in these bars right here and the cool thing about these bars is once you hit a different break point you'll kind of see these like guidelines showing you that you you've hit another breakpoint it basically lets you visualize how you're editing it based on the breakpoint you're on over here to the right you have the undo and redo button same as the old editor next to that is the comments so maybe you're a freelancer making a website for a client maybe they don't like this logo so they can click the logo press this little comment icon and then just type in a comment in the bottom right and then to the right of the comments icon is the inspector which is basically just the toolbar from the classic editor you have the align section and then you have like width height and stuff like that you have position with margin and certain elements have padding on there as well and then there's also different tabs so if we switch over to this tab right here there's design so maybe we don't want this to be full opacity we can change that we can add drop shadow and of course different elements have different settings that you can change and then to the right of that is the hover interactions but we will get into this in a different video the next thing i want to show you guys is some of the features that are different from the classic editor to editor x for example we can go up here press add we can go to quick add and just add an image or we can just right click do quick add and do an image just like that now in the classic editor when we select a section or a strip some options will pop up to say change strip background in editor x it works a little bit differently so we add an image and then we can just press this stretched icon and it will stretch it to the full width of that section now maybe this section isn't large enough for you so what you can do is select the section come over here into the inspector tab and we can set the minimum height to maybe like 800 pixels and then when we stretch the picture it's gonna fill the whole screen the next thing i want to show you guys is stacks so stacks are kind of similar to groups from the classic editor however stacks are meant to keep your website responsive so when i select all of the text you're going to notice two options one is group and one is stack group is exactly the same as the classic editor but it doesn't really give us any advantage if we press stack you're going to notice it's going to create a new element called a stack and you're going to notice that these kind of have lines that symbolize spacing in between the stack and the reason that stacks are so important is because when i resize the screen you're gonna see that the text pushes the button down so it doesn't overlap and look really messy for example if i didn't use a stack and i brought in the website you're gonna see that the button is no longer visible because the text has shrunken down so much that it's gone over the button which is exactly what we don't want i'll be making a video pretty soon all about stacks and everything you'll need to know for them so be sure to subscribe if you're interested in learning more about stacks and editor x the next thing i want to show you is how to add strips or as they call them in editor x sections if we click on a section you're going to notice that there's a plus icon at the top and then there's a plus icon at the bottom if we click one of those it's going to give us an option to choose a layout we can choose a blank one which is similar to this one right here or we can choose a grid or layouter for this first option we'll do grid now a little pop-up is going to show and ask us what kind of grid that we want on our website for this example let's do the two by one we'll press ok now you're going to notice this little line right here we can manually drag this line out however we want or we can press adjust grid edit grid and here we can drag these out and then here you can also edit the grid a little bit more by adding rows or adding columns however you want to do it so for this example let's go ahead and just add maybe two more rows and you're going to see these are really small so what i want to do is click on the icon and we'll make it 250 pixels high and we'll do the same thing for this one right here and we'll do the same thing for the last one just like that and then we'll go ahead and press done now we're going to see we have six sections if we right click do quick add and add an image and we drag this image wherever we want and press stretched you're gonna notice it takes up whatever section that we had had the image over so for example if we only bring it over these two rows and we press stretch it's only going to take up these two rows for this example let's just go ahead and make it cover these two right here and then what we can do is come up to add go out to layout we'll do layouter and we'll just drag out a layouter right over these two sections right here and we'll press stretch now you can see that it created a layouter where we can put content inside and then we can also increase the width to be whatever we want and we can kind of customize this layout however we see fit and then we can select one if we don't want it just press delete and it'll automatically resize itself to fit the section then we can add images or text or buttons whatever we want in these sections and that brings us to our next point if we add a section and we just add a layouter here it's going to allow us to choose what kind of layout we want we'll choose this one right here and this is our next section now i'm going to come over here and change the color of some of these and then if i go over to the tablet view here i can just rearrange this however i want so maybe i want the brown one to be more prominent on the tablet view if we go back up to the desktop view you're going to notice the blue is more prominent and the brown was back where i left it initially but then if we go over to the phone break point we're gonna see that the brown one is above and more prominent than the blue and that's because everything moves downward so for example if we add a button to desktop it'll show up on tablet however if we're on tablet and we choose to add a paragraph into the brown one if we go down to the mobile view we're going to see that paragraph but if we go back up to the desktop view there is no paragraph and that's because editor x allows us to add stuff to different and smaller breakpoints without it showing up on the larger one so it is important that you first make your website on the desktop view and then edit the site however you want on the smaller breakpoints and maybe that's including adding specific buttons on tablet view or maybe that's adding some a button to mobile view that you don't want on desktop or maybe tablet view one really cool feature that we can see is when we added this paragraph to the tablet view it automatically added it to mobile view but maybe we don't want this on our mobile view so we can right click and say do not display so now this paragraph does not show up on mobile it does not show up on desktop but it does show up on tablet view where we added it let's say we made a mistake and we actually do want to add it to mobile we can come up to our layers panel and choose the item and we're going to see this little display icon and we can click it and now the paragraph is going to show up again but let's say we added something on accident to the tablet view and we want to add it to our desktop view so what we can do is come over to tablet view right click and say use on all breakpoints and you're going to see those kind of highlight a little bit and if we go back to the desktop view we're going to see the paragraph that we added so in the classic editor when we scale down our website you can notice that the text size or the font size is remaining the same however if we come over to editor x we're going to actually notice the same exact thing however if we click the text press edit text right here we're going to notice that it has a font size of 88 and then next to it there is an icon that says scale text if we toggle this feature on you're going to notice it added another input for another font size basically what this means is the left and smaller number is the size that's going to appear on a mobile device and over here to the right and the larger number this is going to be the size on a desktop computer so for example i typically like my headings to be maybe at least 30 pixels on mobile and then maybe for desktop we want to leave it as 88 so now when we preview the site and we drag in you're going to notice that the text is actually getting smaller and that is basically what scaling text is in wix however before we wrap up the video i do want to show you guys some good options that you can potentially use on your website so for headings which are basically titles on your website so as we can see here the starting text on desktop is 88 pixels for option one 60 pixels for option two and 55 pixels for option three and then as we shrink them down this the font sizes are going to get smaller and then once we hit mobile the option 1 is going to be 40 pixels option 2 is also going to be 40 pixels then option 3 is going to be 30 pixels so for headings i think these are pretty generic sizes that will probably work for a majority of your sites and i also created some for paragraph sizes as well and i also created some for paragraphs as well so option one we start out at 24 pixels option two we start out at 20 and option three is typically my favorite in my go to which is 16 and then as we shrink it down of course the font is going to get smaller but then now that we're on mobile the text for option 1 is going to be 18 pixels option 2 is going to be 16 pixels and 13 for option three i would say option three is probably more in line with today's standard for paragraphs for desktop and mobile so if you are going to choose one of these and you don't really know which one to go for i would say option three for the paragraphs is probably the safest bet the closest thing in the classic editor that i can compare editor x's grids to is when we actually split strips inside of the classic editor so basically when we split a strip inside the classic editor we're basically creating columns that we can put more content into and that is pretty similar to how the grid works inside of editor x however they're a lot more complex so let me show you so here we have a normal section inside of editor x if we click it you're going to see an option to apply a grid this little box will pop up and then it will ask you what kind of grid that you want to apply to this section or you can create a custom one with a certain amount of columns and certain amount of rows for this example we'll use the 2x1 layout and we'll press apply the first thing you're going to notice is that there is a line right down the middle this is a guideline to show us that we can put content over here on the left and content over here on the right but unlike the classic editor we can put content here as well if we wanted to so i'm going to go ahead and press right click go to quick add and i'm going to add an image now if i leave this image over here and i stretch this image you're going to see it's going to take up this column and if i pull it over to the left side and press stretch it's going to take up the left column however if i drag this image over this line so it's basically covering both sections then i press stretch it's going to cover both columns then if we come down here to add a section we're going to see that there is an option to add a grid right away so let's go ahead and do that and it's going to ask us what kind of grid that we want let's do three by one for this one and now you're going to see there's three columns and when i hover over one of the guidelines you can see that it kind of highlights and your mouse kind of changes signaling that we can actually move the grid however we want if you want more control over the size of your grid you can actually come over to adjust grid edit grid and then you'll be able to see all of these different options so if we click right here on this little two line thing and we drag it'll do the similar thing where we can resize it also right next to that is a little add column button and that's going to be on the right side of each column so you can just press the plus icon to add another column and same thing for the rows so if we go down to the row we can add a second row as you can see the rows are completely different sizes compared to the columns which are all evenly dispersed across the whole width of your website and that's because rows are actually pixel based and columns are fraction based so basically each column is divided into fractions and rows are by default set to pixels of course you can always change that by coming over here and pressing fraction and then we can set this to a fraction as well and then we can change the number to one just like that and now you can see that the rows are even and the columns are even the reason that rows are by default set to pixels is because when making stuff responsive it can be a little bit harder to control the height of your rows however if you just have like a set pixel then it's a little bit easier to control the responsiveness of your website and before i close out of this i just want to note that down here we can actually set our gaps as well so let's say we want like 20 pixels of gaps for our columns and our rows and you can see that it creates a gap between our rows and columns and the cool thing about this is you can actually create custom stuff unlike the classic editor where the gaps are all uniform here we can create our own custom gaps the next thing i want to show you if we add let's just say a normal grid let's just do two by one for this one and then let's go up to add we'll go up to quick add and let's just drag out a container i'll be making a video about containers in the near future but for this example let's just go ahead and press stretch and you're going to see it's going to take up the left column the cool thing about containers is we can actually apply a grid to the container let's just do a two by one for this one so we can actually add grids inside of grids and just for fun let's go ahead and do it again and for this one we'll do one by three so now you can see that this section is split into two this left column is split into two and then this right column on the left column is split into three rows and you can actually add as many grids within other grids as you want so i did create a little bit of an example website to show you what all you can do with the grid so as you can see up here here is two columns one row and over here is the image this right here is actually one section the top half is split into two the bottom half is split into two as well and then over here on the left side i added three columns and then i added a container on the right two columns for this grid right here so this kind of gives you a general idea of the stuff that you can do with the grid inside of editor x in the future i'm going to be making a web design video with editor x using grids layouters stacks containers and everything else inside of editor act so if you're interested in seeing that be sure to press that like button and subscribe to the channel for more editor x content coming real soon if you watched my last tutorial we talked about grids and basically what grids are is they help separate our website into different sections and layouters are pretty similar however they're also responsive so let me show you an example so if we go to add go to layout tools layouter and we'll just plot this basic one right here now let's go ahead and stretch this layouter to the whole section then if we go to different breakpoints you're gonna see that these items inside the layouter are automatically getting smaller and once we hit mobile they'll automatically wrap as well so basically what these are is a responsive grid and there's a lot of cool things that you can do with them firstly we can customize the size by either coming over to these plus and minus icons and we can increase the width by 20 or we can come over to our inspector panel and we can set a width manually also you can set a minimum width and a minimum height for example we just added this text here if we want to make sure that this text doesn't get cut off we can set a minimum width to this to be about 550 pixels now if we shrink this down if the device size ever is smaller than 550 pixels then this item will automatically become a full row that way nothing gets cut off so what we're going to go ahead and do is click this right one we're going to set the height to be about 200 pixels let's make it 500 pixels and we'll go ahead and decrease the size so it comes back up here and we'll center this back up now we can right click quick add and add an image i'll just pull this up and we'll stretch it and then as you can see here the layouter automatically has some gap so if we want to change that we can come over here to the breadcrumbs click the layouter change layout and we can set the margins to zero if we don't want them also we can change auto wrap we can turn off auto wrap which basically means if we turn that off then these two elements won't become different rows it'll just be two columns like it is on the desktop one so it's always good to leave auto wrap on as you can see here we also have options for the for display type so we can choose columns rows mosaic or even a slider we'll just leave it as mosaic for now you also have the option to change the item direction so as you can see it basically flipped these but the cool thing is if we come over to tablet and do change layout and then we flip it back now we have two separate layouts for for two different screen sizes another cool feature is we can actually apply a grid inside the layout so now we have three different sections inside this layouter and let's say we don't need this item inside a layouter we can just right click and say delete and if we want to add an item we can come over to the breadcrumbs select layouter and we can add an item so if that was a mistake or we just have more items we want to add we can always do that now if we come down here to add another section we can actually add a layouter as a section just like that and then let's go ahead and make this one black and we'll leave this one white let's say we want the black to be on the right side so we can either right click switch order with the next item and it'll switch it or we can click an item in the top left we'll have a little drag icon and we can just manually drag it over just like that so if we look at this template that wix has created we can see how the layouter is being used to create a really cool website if we go up to the add panel and we go to the quick ad we'll see an option for container if we pull that out to our canvas this is what we're going to see it's basically just going to be a box that we can put content inside of the cool thing about containers is we can actually apply a grid to it and then we have two areas that we can put content inside of also if you're feeling a little crazy you can actually put a container inside a container and then you can apply a grid to that as well but let's say we have a grid what would be the point of adding a container box well let's go ahead and add an image we'll stretch this to the full width of the website then we'll go ahead and add a container box and maybe we'll stretch this to the full width of the right column if we come over to the inspector panel and go to the design tab then we can change the color to maybe something a little darker and we can lower the opacity then we can add content inside of that container and we can still see the background and it looks really cool also one really cool thing that we can do with containers is add hover interactions so we can choose from a long list of transitions or we can even customize interactions but i'll be getting more into hover interactions in a later video so the first thing i want to do is maybe just add a title we'll make this a larger title by pressing edit text and selecting heading one next let's go ahead and add a paragraph and we'll also add a button now if we shrink now if we resize our window we're going to notice that everything is starting to overlap and it looks really ugly so what we're going to do is click on one of our elements use our shift key on our keyboard and click the other ones and we're going to press stack now you're going to notice that it kind of created a new element called a stack and you're also going to notice that there is a little faint line right here and this basically signifies that there is space so now if we resize our browser you're just going to see the button gets pushed down but the space in between the paragraph and the button is the same now let's say i want there to be space in between this title and this paragraph text so let's go ahead and select this paragraph text we'll open up the inspector come over to margins and we'll do the top margin we'll do like 10 pixels now we're going to see a line right here as well and that line will remain consistent no matter how many times we resize this website also it is a good practice to make sure that everything is set to 100 in the parent element so 100 of this parent element which is the stack means it's going to stretch 100 of the width of this stack now let's say we don't want all this extra space over here out to the right of the stack if we click this and drag it in we're going to notice everything is kind of squished up together so what we want to do is make sure everything is set to 100 of this stack so as you can see here in the inspector panel this is set to 74.5 percent so we need to make sure it's set to 100 same thing with the paragraph now if we click the stack and we drag in we're going to see everything looks more uniform if you want to move a stack just make sure you click the stack and there will be this little drag icon and we can just drag it around and pull it to wherever we want you're going to see that it automatically docks itself to its closest borders of the section or grid whatever the stack is embedded in if we select this button and we press align to center we're going to see it aligns to the center of the stack not the page and the cool thing about this is if we press edit text we can pair this with our scaling size technique that we learned in the other video so as you can see here now the heading is getting smaller and it'll fit almost any desktop size the last thing i want to show you is let's say you have two buttons if we select everything and then we press stack you're gonna see it created this weird thing where it put the second button on its own line if we try to drag this up it will work but then let's try to resize the browser you're going to see the buttons kind of go into each other and we don't want that so to fix this what we want to do is come over to add we'll add a container we'll make this container pretty small because we don't need a huge we're going to apply a grid to it we're just going to choose 2x1 and press apply the next thing i want to do is go ahead and put in our buttons next let's select the container we'll come over to the inspector go to the design tab and we're going to go ahead and remove the border because we don't need that now we're just going to drag this container all the way over here to align with our text now if we use the shift key on our keyboard and we select the other text and then press stack now we can see that the buttons are on the same line together exactly how we wanted and if we drag in our browser we're going to see that those buttons never cross which is exactly what we want so the first thing i want to do is just make sure that this section that we have here is large enough so i'm going to set it to 100 vh then i'm going to come over to add i'm going to come down to layout tools come over to repeater and we're going to drag out one of these options i think i'm going to choose this one right here and then what i'm going to do is go ahead and stretch it to the screen but then in the inspector i'm going to come over to padding and give it five percent padding and then i'm gonna press this little lock icon and it's gonna apply that five percent to all sides okay the next thing i want to do is go ahead and set the size to be a little bit bigger for each item in the repeater so i'm gonna select the item come over to the inspector panel and let's make it about 400 pixels high something like that i'm going to come over to the breadcrumbs and select the repeater i'm going to do i'm going to select change layout and i'm going to set the number of items per row to three and one really cool thing about the repeaters in editor x is you can have the stuff aligned to the center so let's say you have one more option or two more options instead of three to fill up a whole row now you can choose whether it's you know to the left to the right you can even justify it and then if we go ahead and add another item you're going to notice that it looks like this now in the classic editor it would just look like this and then you wouldn't have any way to change it unfortunately so that's one reason i really like editor x's repeaters okay the next thing i want to do is go ahead and add an image so i'm going to come over to add i'm just going to select quick add and just drag out this image and you're going to notice since it's a repeater it's going to add this image to each one of our items in the repeater i'm going to go ahead and stretch it it's not like hover boxes in the classic editor where you would edit it how you want pre-hover and then on hover you can add stuff to it in editor x it's a little bit different so what we actually need to do is create the pre-hover and the hover interactions before we actually apply the hover interaction feature to it so what i want to actually do is have the image of like let's say the team member or the employee here and then when the user hovers over it there's going to be a box that comes up from the very bottom that says the name their job title and maybe a button to their page so in order to do that we actually need to add a box to the repeater in the inspector panel we're going to set the width to be 100 of this item and we're going to set the height to maybe like 120 pixels and we're going to use the align tool to align it to the center and put it at the very bottom then we're going to come over to the design tab and we're just going to raise up the opacity of the background to 100 and then we're going to remove the border now we can go ahead and apply a grid to this because over here on the left i want to add the name and job title of this employee and over here on the right i want to add a button so let's go ahead and do that so i'm going to come up to the add button pull out this title in the inspector panel we're going to go ahead and set it to 90 percent we are going to remove the docking from the right and the top and we're actually going to dock it to the left with a 5 margin just like that and then what we're going to do is pull out another title we're going to do the same exact thing we're going to remove the docking from the top and just add 5 margins to the left and since this one's going to be the job title we're going to go ahead and edit the text and maybe make it 16 pixels just like that and then i want to bring these two together select both and stack them so now with the stack selected i just want to center it in the box just like that and then of course we just want to make sure it is docked to the left with five percent margins just like that and then of course over here to the right we want to add and we're just going to pull out this button and then we're going to remove the docking from the top and just for consistency on the right hand side we're going to set it to five picks or five percent margins just like that the next thing we need to do is actually link the content from the database to this repeater i've already created a team members database and to be honest i just used wix's default team members database so nothing in here is filled out or anything like that but what i want to do is come over to job title and i just want to set this person up with the job title as ceo all right and now i'm going to go ahead and close it and we'll go ahead and close this content manager tab as well so now what we need to do is select the image press this little link icon and it's going to say hey we don't have a data set on the page yet so we're going to create one we're going to choose the team page and we'll just select ok now that there is a data set on the page we can now connect the image to the photo in the database we're going to select this title right here and this one's obviously going to be the name so we'll select that little connect icon and select name in the job title we'll select the little connection icon and then go down to job title and lastly we need to connect this button to the dynamic page for the team name that way when the user clicks on this button it'll take them to the page about that specific team member so now if we go ahead and preview the site this is what we're going to see we're going to see the six team members that were in the database and now it is time to add this hover interactions we don't want this box to show up unless the user is hovering over that specific person okay so the first thing we need to do to start this hover interactions is let's just select the image we're going to come over to the breadcrumbs and select item now we can come over to the inspector panel go to interactions and add hover interactions and if you look at this transition thing you're going to see a bunch of different options but for this one we're just going to do a custom interaction so now that the item has a hover interactions we're actually going to select this container and we're going to translate it to be 130 pixels so that basically moved it down 130 pixels and then if we look at this little box that popped up we can actually set the timing of the animation and we can select whether it's ease in ease out linear whatever you want for this example i'm just going to do ease in now if we preview the site we're going to see i made a mistake now instead of having the box come up when we wanted to it's going down which we don't want also with this bottom with these bottom items you can see that it's not disappearing it's actually just moving down the reason these are disappearing is because these items are on top so we have some things we need to change so first let's go ahead and select the item again and we're just going to start from scratch we're going to delete the interaction completely so now with the item selected we're going to come over to add hover interactions custom interactions and the thing that i forgot to show you was we are currently on the hover state what we need to do is switch over to the initial state just like that now we can select the container and translate the y position 130 pixels so now when we preview the site it's not going to be there and when we hover it's going to show up this is exactly what we want however as you can see we still have the content showing down here which we don't want so let's go back into the editor we're going to select the item we're going to come over to the inspector panel and go to layout and the overflow content we're going to select hide and basically that means if any of the content is outside this item it's not going to show so as you can see now it's gone but when the user hovers over it we're all set also for the data set if you're creating a team page just like this maybe you have a specific order that you want you know your team members to show up for example this person right here their job title is ceo typically with website you want the ceo to be in like the first space and then you know the rest of the hierarchy follows right so what we want to do is come over to the data set we'll press manage content we're going to notice in this data set that there is something called order and basically maybe we want the ceo to be first you know the cfo to be second or something like that and then if we come back to the page select the data set go to settings and we scroll down to sort we can add a new sort we can choose the field for order and we can do low to high we'll add the sort now when we preview the page the ceo is first and as you can see as we go across the names are in order how we want them to be the next thing i want to show you is tablet view so as you can see this looks pretty horrendous so what we want to do is let's just select this image we'll select the repeater we'll change the layout and we'll select the number of columns to be two and for the most part that looks pretty good now on mobile it looks even crazier so what we want to do is again follow the same steps we'll go to the breadcrumb select repeater change layout and we're just going to do this list option right here and if you want you can make this button smaller for this breakpoint and we can select fluid and then when we click the container and move the grid a little bit you're going to notice the button gets a little bit smaller and we can just shorten up the button a little bit just like that make sure it's docked to the right and then we're going to have to do the same thing for the stack we're going to make sure it's centered and dock to the left just like that so now when we preview the site this is what it's going to look like if you've been playing around inside of editor x you may have noticed these things called margins right down here or you might have seen something like this like padding to best explain what margin and padding is i'm actually going to use the classic edit so i'm going to pull out a box and then let's go ahead and put some text inside of that box so what padding is is the space between this text element and the edge of this container box on all sides so if we look over here on the toolbar and we click this text element we're going to see that the size of this is 310 pixels but if we click the container box we're going to see it's 568 so basically after doing some quick maths that means that there is 129 pixels on the left and the right of this text element and the height is 31 pixels for this text element and the height for this container box is 240. so that basically means that there is about 105 pixels of space above this text element and below so that's basically what padding is margin is how much space is on the outside let's say we are aligning this to the top and left of the section so that would mean there is zero margin at the top and zero margin on the left however if we you know use our shift arrow key and we bump this down two times and and right two times and that means there is 20 pixels of margin on the left and 20 pixels of margin on the right so now if we come on over to editor x we are going to see that there is margin already set on this image element inside of this section so if we look at this image i went ahead and set 40 pixels of margin to the left and it already has 24 pixels of margin on the top so now when we shrink down the website no matter how much we resize the website it's always going to have 40 pixels of margin on the left and 24 pixels of margin on the top now if we look at this example we have a container box with some text inside of it and if we come all the way down to padding let's set like 200 pixels of padding to the left now you're going to see it's it pushed over the text element inside of it but now let's go ahead and actually press this little lock button right here and that's going to add 200 pixels of margin on all sides of this container or i guess of this text element you can add whatever padding you want you don't actually have to keep these locked so maybe you want you know the left to only be 100 pixels and maybe the right only 100 pixels so you can actually customize padding and margin to be whatever you want and these will actually help your website be more responsive or just you know have a consistent design across your entire website so if we take a look at the classic editor and we resize the screen we're going to see that nothing is shrinking down and the main reason for that is everything in the classic editor is set to pixels so if we click this element right here and we look at the size we're going to see it says px next to it which stands for pixels and of course if we you know change the size of this you're going to see the width and the height change also the x and y position of this element when we change it that's also set to a pixel grid so if we move this you know button all the way to the top and left of this guideline we're gonna see the position is set to zero zero if we move it all the way to the right you're going to see that the y value is 0 but the x value is 840. if we bring it all the way down to where it was just like that this is the new x and y value i know pixels are kind of hard to see so i just took a screenshot of this page and if we were to zoom in really far you'll see all of these blocks which basically represents a single pixel and as you can see this is kind of like a millimeter or an inch or something it's a base unit of measurement and there's no way to resize this base unit of measurement which brings us to editor x if we select this container and we open up the inspector panel we can see that the width of this container is set to 34 if we click this little percent icon we can actually see the other choices that we have we have percentage we have pixels and we have viewport height and viewport width and before i show you examples of these i kind of want to tell you what they are and how they work so i know we basically covered pixels already but pixels are basically a digital base unit of measurement they use pixels to you know measure screen sizes for tvs monitors laptops phones everything and designers use pixels to design stuff for those screens but unfortunately pixels are not responsive and for a lot of web design we do need something that is responsive and that's where percentages come in percentages are you know define a size of something that is relative to its parent object for example if we look over here to the right let's say this container is the parent object and then this container inside of it is the child if we set this to 60 percent it's only going to be sixty percent of its parent so as you can see this one is only sixty percent width of this parent object the next unit of measurement is viewport width now this is where things kind of get a little tricky and complicated to explain it's kind of similar to percentages except it is not the percentage of the website but it's actually the percentage of the screen size that your user is viewing it on so for example let's say we have a we have a child element that we want to be like 90 of the width of the website if your user has a larger screen than you designed it on and you have vertical width set up then it's going to be set to 90 of that vertical width if they are on a larger screen in other words if your user has a larger or a smaller screen than what you designed the website on then if you set a vertical width it's always going to be that vertical width and also i have this example right here which also shows that maybe this black container is the website or a parent element and this container inside is the child element but obviously it is set to 120 of your viewers device so it obviously can go past its parent element unlike percentages and that kind of brings us to our last element which is viewport height viewport height is basically the same thing as width but just in height so if you know you have a hero section that is pretty long but you want to make sure that no matter what screen size your users are on that it takes up the entire screen you can use viewport height for example let's say this black box right here is the website and then right here is your element that you want to be 100 of the viewport height but let's say your user has a you know a larger desktop and the height for that desktop is something like that well if you set the viewport height for that website to be 100 it's going to take up the full height of the screen without you having to manually do it for them i hope my explanations made a little bit of sense but if they didn't here are some examples for you so here we have a stack with a heading a paragraph and a button and if we click this paragraph and look at the width it is set to 60 width however if we set this to 100 you're going to see it's going to completely take up the width of this stack element however let's just do something crazy like 100 vw now you're going to see it completely bypass the parent element or the stack and is going way beyond even the website and you might be wondering where is this you know size coming from if we look at the width of our website or our view of the website you're going to see it's 1936. so if we click this paragraph if we switch the viewport with two pixels you're going to see the width is 1936 just like the width of the website so if we switch it back to the viewport width and we shrink it down now our website width is 12.06 and so if we switch this paragraph back to pixels we're going to see the width is 1206 for this example we if we click this section we're going to see that the minimum height for this section is set to 100 vw so if we look at the width of our website it is set to 1936. so if we come over to the minimum height and we switch this to pixels we're going to see the height of this website is actually the same as the width of the website so it's 1936. so we're going to see that this section is actually just a giant square we'll switch it back to viewport width and now let's look at this container this container is set to 20 percent width and 20 percent height so this means that is taking up 20 percent width of the section and 20 percent height of this section as well let's go ahead and switch this to 20 vertical width you're going to see nothing has changed and that's because the width of this section and the viewport width is exactly the same however if we switch this minimum height to 20 vh we're going to see that is basically half the size and the reason for this is because right here we have a viewport our viewport is this screen it doesn't include what's down here it only includes our window of visibility it's taking up 20 percent in height of our visibility of the screen not the entire website and that's basically the difference between you know the viewports and percentage the next thing i want to show you is let's say we want to have you know this container line up with our logo if we look at our logo it has 60 pixels of margin on the left if we look at our container it has 3.1 percent of margin on the left so if we resize our website we're going to see that the logo and this container box are no longer in line with one another so to fix this you can either you know click the container and add 60 pixels the margin and they will be together or you could also add 3.1 percent margins to the left of the logo and now they will also always be in line with one another the last thing i want to show you before i wrap up this tutorial is how you can use these responsive units of measurements with pixels to create really cool websites for example if we look at this container it has a width of 34 and if we resize the website all the way down to mobile we're gonna see that this 34 is really tiny or maybe even just on desktop maybe you didn't want it to go this small on desktop so to fix that let's go over to the inspector panel we'll switch this over to pixels just temporarily we'll see that the width is 658 pixels switch it back to percentages and then now we're going to come over to minimum width and let's say if it goes below 500 pixels it's going to stop shrinking so now when we resize if you're going to see it's getting smaller then once it hits 500 pixels in width it's going to stop shrinking this is a really good example when you have something like this when you don't want you know your text to look ugly once it shrinks down too much so we just set a minimum width to this container and now when we shrink down the website you're going to see it shrinks down but then once it hits a certain point it's going to stop shrinking that way your text still looks really nice inside of that box [Music] in the classic editor you would go to add menu anchors and drag out an anchor element just like this and then you can name it to whatever you want and then in the menu you could add an anchor or you could add a button and link this to the anchor just like that however an editor x is a little bit different with editor x you can click on this section or a container or a picture or just about anything then you can come over to the inspector go down to anchor and turn on the anchor then you can name this section or picture or whatever element you have to whatever you want and then let's go ahead and pull out three buttons and then we can just link these buttons to anchors so now when we preview the site and press white it's going to take us to the white section gray is going to take us to gray and black is going to take us to black but i really love an editor x that you can add an anchor to images you can also add it to container boxes you can even add them to galleries like this one you can basically add them to any element that you want which is really cool now the first thing i want to do is come over to the inspector panel select this section and we're going to make this one like really large so we're going to make about 2000 pixels just like that we're going to scroll back up to the top and let's just go ahead and add an image into here and we'll go ahead and stretch it next i want to go ahead and add a container inside of this top one i'll go ahead and make the background of it white now if we come back over to layout and we scroll down until we see scroll here we're going to see scroll effect the first one we're going to see is sticky if we select that and press preview what we're going to notice is the container is going to stay with us until we reach the end of the section now if we select it again come down to scroll the top offset is going to allow us to add space above it so it's not pressed up right up against the top of the section as we're scrolling so let's go ahead and add like 200 pixels of top offset so now when we preview the site and we scroll down you're going to notice that there is 200 pixels of spacing as we're scrolling down now if you remember when we select sticky there was one called fixed if we select fixed and press preview when we scroll down we're going to notice that wherever we left this container is where it's going to stay so if we move it up right here and then press preview we're going to notice it's going to stick right there also when we reach the end of the section we're going to notice that it just continues to go down with us so basically fix kind of takes it out of the section and just puts it on your page for you here is a template that wix created that has a lot of examples of those scroll effects so if we scroll down here we're going to notice that these sections are kind of flowing into each other then once we reach the end of the section it's going to disappear just like that as we continue to scroll down we're going to notice this element follow us down for a little bit then it's going to go up and now here are these testimonials that pop up using the sticky position and then here are some brand experts so as you can see this is a pretty cool effect that you can use on your website and it's not really that hard to do but that basically wraps it up for the video today if you guys did enjoy 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 you

Channel: Wix Fix

Views: 5,293

Keywords: everthing editor x, editor x, editor x tutorial, wix editor x, editor x wix, editor x basics, editor x stacks, editor x hover interactions, editor x layouters, editor x grid, editor x containers, stacks editor x, how to use editor x, editor x layouter, hover boxes wix, hover boxes editor x, how to use editor x in wix, editor x review, editor x breakpoints, editor x training, wix tutorial, new wix editor, wix editorx, wix tutorial 2021, wix editor x tutorial

Id: VcGNuL-0LCQ

Length: 58min 45sec (3525 seconds)

Published: Tue Jun 01 2021