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

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



What's going on Wix nation, MPS here from Wix 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, Wix’s 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 this series and you'll plug into the largest global Wix training community on the internet a great place to be when learning a brand new editor.


Without further ado, let's jump in!


The 8 Crucial Steps When Starting on Editor X


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 re-imagined the way I'm going to train with Editor X.


I'm breaking it into modules and the first module we're going to 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.


Get to Know Your Canvas

First on the list is, get to know what your canvas is. So your canvas is this, it's literally what's on screen. It's where you design. 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.


Adding Elements


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 texts, your buttons, your menus, media, images, videos, decorative and so vector arts, videos, shapes, contact and forms and social. And then you've got all of your traditional Wix Apps, your Wix Blog, your Wix Store, Wix Bookings, Wix Event, Wix Members, Wix 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.


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 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.


Inspector Panel


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 width, 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 of 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.


The Layers


So up next you're going to want to get familiar with Layers. So Layers is similar to a kind of a page structure, right?


So it lists out everything on a page and how it's 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 shades, texts, videos, elements, media, and you're going to want to get familiar with the layers per each page.


Now you can see we've got just our homepage here and if we go to our mobile menu, we can see the layers here 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.


The Masters


Following Layers, you're going to 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 going to show you as this is an overview of eight crucial steps you need to know when getting started in Editor X.


Breakpoints


Now following Masters, one more piece of brand new technology within Editor X is Breakpoints. And what Breakpoints 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 a 1,001 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 is listed right here. Or maybe you want to design for a much bigger desktop.


You can come in here and you can customize break points. You can actually add different break points with different pixel ranges. So you can do 1,008 pixels and you've got 1,008 and nine so that way you can create and customize different break points. So now if you came in here, you can actually see it's added to your break point list and you can now design in the canvas will shift based off of that custom break point, which is pretty cool!


And that way you can create something responsive based off of where that break point lies. So now you're not confined. If you've got a certain style, a device and your website's not showing up as properly as you'd like, you can create a custom break point and make sure that it's designed properly for that style device. Really cool technology.


App Market


And the eighth and final thing you should be aware of when getting started in 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 Wix Apps can be added either from here or in your ad, like the Wix blogs, store, bookings, members, all that good stuff can be added right there.


The Bonus


And then I think a last side note is Corvid development tools can be activated and Editor X. You would go up to dev mode and turn on dev mode and this is just a little bonus. Nine 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.


Conclusion


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 and let me know which of these you would like to learn more about as I'm going to 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 going to be another 300, 400 videos Editor X is going to enable me to make for this channel and you're not going to 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 the series because I'm enjoying making it.


I'll catch you on our next Editor X video.

0 views