8 Crucial Steps When Starting on Editor X | Wix Editor X Training

what's going on which nation MPs here from which training academy and today I am thrilled to deliver you eight things you must know when getting started in editor X as part of our brand new editor X training series listen this series is going to be chock-full of incredible content and you're not going to want to miss it as this is which is brand new responsive editor however you are going to want to be part of this incredible wix Nation community and it all starts by hitting that subscribe button and turning those Bell notifications on so you don't miss any content in the series and you'll plug in to the largest global witch training community on the internet a great place to be when learning a brand new editor without further ado let's jump in okay so I think it's important to let you know right off the bat eight plus years ago when I started this channel I started on the traditional editor and just kind of went with the wind as far as tutorials went whenever I thought of a topic that might help you I did it however I have completely reimagined the way I'm gonna train with editor X I'm breaking it into modules and the first module we're gonna cover is workspace getting to know your workspace with editor X is laying the foundation because if you do this wrong you could potentially create a world of issues with your entire website because you didn't properly set a foundation every strong house is built on an even stronger foundation right so that's why it's so crucial to go through the workspace which is what these eight things are going to cover first on the list is get to know what your canvas is so your canvas is this it's literally what's on the screen it's where you designed so over here on the left and right hand side you can see drag to resize and this resizes your entire canvas you can see the dimensions actually change next to that little gray bar as we bring it in closer and closer this is how you manage your dimensions and you can see it becomes responsive as we drag it in this is where you'll be able to switch in between different screen styles different screen sizes and manage the size of the canvas you're working on to make sure you're designing properly for that in particular size screen second on our list is it's important that you get familiar with adding elements traditionally we used to have a whole left-hand panel over here now it's up top you'll actually go up here to this Add button and add elements in here you'll see all of your traditional elements that you were previously able to add via the HTML traditional editor on Wix you've got your text your buttons your menus media images videos decorative so vector arts videos shapes contact and forms and social and then you've got all of your traditional Wix apps your which blog your Wix store Wix bookings which event which members sections so being able to add different sections such as strips to your site and then Content Manager corvid by Wix and this is where you actually add elements so for instance if we were able to go up here and go add a title we would click it our title is in here which leads us to the third thing which is your action bar and it's important that you get familiar with your action bar your action bar is when you click on an element what pops up above it similar to the editor however it's different so you can see when you click on it it's got a different look and feel you first can choose whether it's animated if you're copying from a certain break point and then you've got different elements in here like you can copy this design from a certain break point or all break points or you can come in here and edit text in which case you see we've got a different looking text editor but this is your action bar whenever you click it's giving you different actions to be able to take on that in particular element fourth on the list we've got actually a nifty new tool and if we click on an element on the page it's called our inspector panel it can be accessed right up here via inspector you click that and it actually gives you different styling and different functionality on each element of your page including the page itself so you can come in here you can choose how it's aligned the sizing whether it's fixed to the screen or fluid will flow with the page your with your height the position on the page you can choose the margin you can truly choose the scroll effects adjust it grid area anchor it you can do all these different things via the inspector panel and if we click off of that and just click on our overall video box or we just click on the page we can see we've got an inspector panel on the particular page so this is literally for each element on your website so up next you're going to want to get familiar with layers so layers is similar to ooh kind of a page structure right so it lists out everything on a page and how its layered over one another so you can see we've got our container with the shapes we've got different sections of the site with shapes we've got the titles each layer contains different elements within it and it contains usually a container which holds different shapes text videos elements media and you're gonna want to get familiar with the layers per each page now you can see we've got just our home page here and if we go to our mobile menu we can see the layer shear are much less because this is our mobile menu and we can open it up and see what the layers are within the mobile menu so each page has its own set of layers and you can manage each element via the layers on that particular page following layers you're gonna want to get familiar with this really cool new tool called masters and masters can be accessed right here if you click masters you can see there's a little description masters are selections of content that can show on multiple changes changes you make to one apply everywhere in its use on the site so traditionally headers and footers are going to be masters this was actually the case with the traditional Wix editor too but it was never called masters and there was no functionality even support masters but now there is and you have control to do this with multiple elements on your site including different strips different media and actually you do have the ability to change a master on one page as compared to another so if on one page you want the header or footer to look a little different it can and I'm gonna show you as this is an overview of 8 crucial steps you need to know when getting started in editor X now following masters one more piece of brand new technology within editor X is break points and what break points are is essentially it gives you the ability to choose different screen sizes and you're able to edit a design based off of each screen size so you've got three pre-loaded pre-made default screen sizes in editor X you've got desktop which says edit for 1001 pixels and up you've got tablet edit for 751 to a thousand pixels and you've got mobile which is edit for 320 to 750 pixels but here's the cool part maybe you've got another screen dimension and your target market accesses your website from a different screen dimension than listed right here or maybe you want to design for a much bigger desktop you can come in here and you can customize breakpoints you can actually add different break points with different pixel ranges so you can do a thousand and eight pixels and you've got a thousand eight and nine so that way you can create and customize different breakpoints so now if you came in here you can actually see it's added to your breakpoint list and you can now design and the canvas will shift based off of that custom breakpoint which is pretty cool and that way you can create something responsive based off of where that breakpoint lies so now you're not confined if you've got a certain style device and your website's not showing up as properly as you'd like you can create a custom breakpoint and make sure that it's designed properly for that style device really cool technology and the eighth and final thing you should be aware of when getting started and editor X is the app market of course you are all familiar with the app market but it now sits up here and you would click app market and you can see it's got a newer design to it in the sense that it pulls off from the left of the page you can manage your apps and you can see all of the different apps you currently have installed on your site I don't have any on mine right now but you would come in here and then you can obviously come in add apps as you need and then as mentioned the traditional which apps can be added either from here or in your ad like to which blog store bookings members all that good stuff can be added right there and then I think a last side is corvid development tools can be activated in editor X you would go up to dev mode and turn on dev mode and this is just a little bonus 9 thing you should know and just like it would in the traditional editor corvid is activated except now we've got a handy new icon right here and also right here to access our content manager and then just the page code at the bottom so it makes it easier to access these different tools within corvid so these are eight or really nine things you need to be aware of when getting familiar with your workspace in editor X if you enjoyed this video I would kindly ask that you drop a like down below comment let me know which of these you would like to learn more about as I'm gonna do a deep dive on each of the things I just discussed so don't worry about that and let me know if you enjoyed the video and lastly if you haven't already make sure to hit that subscribe button and turn those Bell notifications on because I'm not kidding when I say there's gonna be another 300 400 videos editor X is going to enable me to make for this channel and you're not gonna want to miss any of them because this is wix's brand new responsive editor and your website needs to be responsive in 2020 if it's not you're falling behind the times and also you'll plug into the largest Wix training community on the internet perfect place to be when you're learning a brand new editor with a community that has been there and can rally behind you guys thank you so much for watching this video I look forward to seeing you here active in the community and watching all these editor X videos and let me know how you're enjoying this series because I'm enjoying making it I'll catch you on our next editor x video

Channel: Wix Training Academy

Views: 21,232

Keywords: editor x, editer x, wix editor x, wix editorx, editor ex wix, wix training, wix training academy, editor x training, responsive wix website, editor x beta, new wix editor, build a responsive website in wix, wix.com, learning editer x, editer x training, wix editer, responsive editor wix, new wix products

Id: wY3jJUqk4KA

Length: 11min 37sec (697 seconds)

Published: Wed May 13 2020