Discover the Editor X Workspace

we've got a lot to cover today and I don't want to kick it off just just yet because we want to wait till we went a little early so if you want to take this opportunity to get you some water or some coffee we'll kick this off probably in two to three more minutes Sri Lanka Wow Wow everybody from all over this is amazing it is we can't go anywhere so it's at least everybody's coming together yeah exactly I mean this is the best way to do it - right Oh Sandra is originally from Venezuela and now she's in Montreal awesome gosh I love some poutine gosh that is such good food that's some comfort food Ronnie have you ever had poutine okay well then have you ever have you ever eaten poutine it's like God it's like french fries gravy cheese so good it's it's Montreal it's really good I am because I've never been had it Atlanta Hotlanta she says and so I think we're gonna kick off and let's give it let's give it another minute and we'll kick this off so last call for water or coffee or whatever make sure oh by the way guys when everybody's responding make sure you you say all panelists and attendees so everybody can see cuz we're seeing all of these amazing space places where everybody's checking in front but everybody can't see it so make sure you switch from all panelists to all panelists and attendees there you go yeah okay I think this is this is really good we've got great man this is fantastic okay so first off welcome hey everybody I'm glad everyone's here this is going to be an incredible editor X live walkthrough Ronnie's here and we've got a lot to show you but Before we jump into that Ronnie tell us for those who don't know you tell us a little bit about you and what you do at wigs okay so everybody i'm rony i'm a product manager and the editor x team being here with this product since day one and super super thrilled and excited to be presenting this webinar to you guys today super well I want to say thanks for taking the time to come in and show us some really cool stuff what what can for those who are attending what can we expect to kind of see and learn from this from this presentation okay so will I'll take you through a brief walkthrough through the editor makes workspace to get acquainted with it we'll go over some of the basics of designing on editor X and its core concepts that really help you if you understand and well as you dive into designing on it and we'll our self design dive into some of the key features that it utilizes and we'll show this all on a beautiful page home page that we created for design and we made up called Sam and all showing up all her work and we'll see it in a second awesome awesome so that's exciting and that's a lot and I know there's going to be a lot of great questions from everybody attending from all over the world so if you do have questions at the end we will have a segment so we have a little QA with Ronnie and also before we jump into this owner remind everybody that on editor XCOM we do have an amazing resource section you can find all of it you can stop find the forum you it's Academy X with resources and videos and tutorials so a lot of the things we're talking about you can really sort of hone those skills there so Ronnie let's let's kick this off where do we where do we start okay so I think let's just see the end result that we are trying to achieve so I'll stop I'll move here and let's just refresh this site to see it loading this is the site that we'll be building it scrofa with beautiful beautiful design that looks really good it's really slick and since editor X allows you to buy to build fully responsive websites let's see how this looks like in different screen sizes so everything is super fluid and adjusts itself to all the different sizes of screens that can be viewed from the first section will be seeing learning about talking and positioning and sizing of elements and and text scaling and scaling of images over here we learn about overflow scroll horizontally and using a grid that changes you can see it's in one way in tablet and another way in in mobile and this talk will be seeing the repeater that can be used in different layouts and the layout there which is an X component that allow us to manage boxes in the space and let them wrap around and change as the screen changes or take full control and decide exactly how you want them either automatically or pipe so I think we can jump in right yeah I'd like to before we do that point point out if you will real quick a repeater show me something that's using a repeater element on that site so everybody who may or may not be using repeaters at this point can kind of see how you've woven that in so the review looking at here yeah yeah that's repeater yeah okay we'll be seeing more of that later perfect perfect all right so let's just jump in into our workspace this is the editor export space let's take a brief walk around so first of all you can see the canvas is very wide and open it was very important for us to allow you to design really and not have anything in the way you have drag handles on the side that allow you to see how your site is going to look in different screen sizes in a variety of screen sizes as I'm moving around you can see I passed a breakpoint breakpoints are places I points from which you can switch up your design and layout completely and by default you have three but you can add as many as you want and customize them for your page I cannot just so jump between the breakpoints from here from the top are just a shortcut to jump between them and I can also decide that I want to see exactly what my page looks like on 1600 pixels those are all different methods for me to move around and see different screen sizes from preview which I can go to from here I also have a bottom handle that will allow me to see different screen Heights not just screen widths it's always important in a knitter X to see what your end result looks like in all situations let's see what else we got here so at the top bar we have basic things like your settings and some actions like duplicating the site publishing etc we have help and feedback which is super super crucial for you guys there's a lot of content that can help you as you get along and get moving and get learning in editor x there is the Help Center with a lot of articles there's the Academy X which is super visual and very helpful and it goes through each of the products and really gets into details and also sends you to practice and learning in the hand there's the forum which is our community that is now building and constructing itself where you can consult with your peers and other people and get answer isn't also from us from the product team you can take the Welcome tour you can read about updates and releases etc and you can also submit feedback to us requests features we put about etc super useful to go into help and feedback let's see what else we got heaps so this is the ad panel the ad panel holds a lot of fully designed sections that you can just throw and use they are also very useful as starting points to learn because they are fully responsive and you can throw them on your page and see how they were built and learn from that or customize the Manns you wish it's a starting point they are targeted at different areas of the products really really really useful but you can also use blank layout tools like boxes and layout errs we have a lot of wireframe you looking repeater is that light boxes and cetera that you can start from blank and there's elements of course so texts and buttons and menus and media and decorative elements like SVG's and video boxes and transparent video boxes contact forms social bars over here at the bottom you see our biggest business solutions like the blog the store the bookings app events members content manager which allows you to have a CMS to control the content on your site and there are of course fully integrated and tailor-made for editor X and from here from the app market you will find hundreds more business solutions all integrated into editor X that you can throw in to enhance your site capabilities also from the top bar you'll find your texts your site's themes text themes so you can control them for here from here and update your text theme throughout the site your color palette that you can control from here and update your entire site there the pages management layers panel which something you should probably all be acquainted with where you can see the structure of your page very useful to find elements to move them around to select them and perform stuff on them so let's select this section and when you select things you will see the inspector inspector opening up on the right the inspector is where you can control all the properties of any selected element how its positioned what its size is and a lot more you'll be using this this is crucial you have to use and you'll be using it a lot so get acquainted with the inspector your site is constructed from sections by default you'll have three sections but you are free to add as many as you need remove them if you want you can move them around so I can move send this one down and up sections are in fact just containers that are stretched across your page we manage your pages grid so when you add a new section we update the pages grid if I resize this section my entire page moves with it sections are very very useful because you get to know that as you start to build responsive websites each of your sites Falls your pages folds requires some different attention and layout capabilities and trying to construct one layout that will work for your entire page will really get you in a bad complex place especially when it comes to then going customizing to breakpoints if you focus each section on each section and apply the correct layout just for that section things will get easier and a lot easier to work with there are more advantages to sections which I'll mention throughout the way so these are the sections in your page by the way I can also little think in terms of let me ask you a question Ron if you know man in terms of our breakpoints similar to our least these sections I'm sorry similar to how strips is it kind of similar it's it you can compare it to strips yes but they are contained yes you can say that a lot more flexible in fact because they say you can flip a section to have it vertical in one break point and horizontally another break point and you can actually use this section to be a master and use the same one across different pages in different positions a lot more freedom and flexibility absolutely there's a great comment by our question by Elaine sure let's throw something something on the stage so this is my button you can see the inspector populates with all the properties of money button the button is fixed in size it's 142 pixels high and 42 6 pixels sorry 46 pixels tall and 142 pixels wide and as I play around the screen my button is auto docked to the left and to the top so it moves together in relation to the left of my screen if I were to place it somewhere on the right it will be responding and moving together with the right side of the screen this is super important we'll touch that in a second I'm free to now in tablet you can see it's in the same position I moved it it's also in that position in tablet that's because whatever you do in any directs cascades down so changes I made a desktop effect the tablet and the mobile but now if I make a change and move the button here in tablet in desktop it will still remain on the right and in tablet on the left and my decision cascaded my style cascaded so it's still on the left over here and if I change its color though these changes the Cascade are a very breakpoint a property I'm sorry so if I change the color over here to green my button will change to green in all its positions because I haven't had any overrides over the color only over the position now I can decide to have it be black in tablet and maybe in another color over a year in mobile and I could also unify these designs but seeing what my father looks like three different colors and three different positions I can unify them by by clicking copy from break point we'll open up this panel it shows me what my button looks like in all its other instances and other breakpoints and I can say hey I like that design or that design and I just want to borrow it and apply it here so you have full flexibility playing around trying different designs until you're happy with them and then you can rearrange it being everything and use by your your site's design enough about explaining let's really start getting our hands they're dirty and building something so I'll start with the media element you can add three images and you can upload your own images you can connect to external services and stuff I already took the liberty of doing that and arranged everything in folders so I'm gonna and this mobile device over here and I'm gonna place it over here and let's resize the section a bit you can see that the device is moving together with the section this is because of its docking if it were to be docked editor X Auto darks elements but you can also decide to dock them wherever you want and if this mobile device was docked to the top now when I resize the section it won't move with it because it's relating to the top and not the bottom so you always have to be aware of these things so then I think that's a really really good thing to say so so this is docking and how you dock an image so it doesn't it doesn't move when window when the when you change the size there you know I think that's really awesome it means the way you wanted to move you thought control over setting exactly how you want it to behave I can decide elements most elements in other X arrived fluid by default what does that mean it means that they are changing their size together with the screen media elements arrives set to scale by default so as you can see the image is keeping its proportions and scaling now I'm gonna want this to be 25% precisely you have the freedom to use other units pixels the hvw that refer to the viewports height or width according to the currently current screen that views you Paige and I wanna position in this exactly where I want now it's a drag-and-drop environment I can position it and just eyeball it and put it over here but I can get very specific and say I want it to be 7% from the left and - 7% from the bottom because I wanted to be sticking out of it so I give it a negative margin so I just positioned my mobile device let's add another image again I have everything organized because I'm that sort of a person not mean Ronny nothing so I'll throw this image here and I want this one at the top right so I'll just use an alignment tools throw it to the right and to the top perfect I want it to be 35% wide and dock to the right and to the top that's perfect for me auto docking did the job here okay so they are both scaling nice let's throw Sam awesome everybody's loving this by the way they haven't seen anything yet we're just getting started let's throw some text over here of course you have the power to do anything you can imagine with text writing styling it I'm gonna need it and then a neon kind of screen that I already uploaded earlier and I'm gonna want it to be 202 pixels wide like and I need my own font you have a large variety of beautiful fonts that you can use but you can also use fonts that you upload yourself so I'll use this font that I uploaded beforehand let's see what it looks like okay I'm gonna need some more width here so it doesn't wrap nice let's color my section black so we can start feel the design I need this kind of black over here okay so let's see what we got we have the images scaling but the text the element itself is fluid so it's becoming narrower and wrapping but the text is not and this is not where I want it to be right so what I can do is use text scaling from the edit text toolbar I can select text scaling and set my text to scale to the sizes that I needed to let's set it to 24 to 202 all right now my text is scaling together with the images there's more to take care of but we'll get to that another thing that I want to be very precise about is the line height so I'll set the line height to one nice let's duplicate this text element because I want exactly the same styling here and I just want to change text so ux/ui sorry ux/ui designer and i'm gonna want it in white so there we have it and it's also set to scale so let's see what we got everything is scaling very nicely but this is probably not the design I'm going for because things are getting shorter and shorter and further and further apart I want to open is relating with each other well you touch on real quick text scaling and how you did that again I think I think there's a few people and I know Sam wants to how did you do that from edit text I select all the text in my text component I click this here that allows me to either set toggle between a set pixel size or a spam and I'm now giving my text a minimum size in the maximum size and according to the screen size it will move between that span okay once I very clear so now I want these two texts to relate to each other I'm gonna multi select them both and create a stack when I click stack on elements that I multi selected they are now together in the container that we created for you a stack uses Spock's technology and we tailor-made the staff just for this to have elements relating to each other and keeping a set margin between them so now as they get smaller they will pull each other together I can set an exact actually got the number I wanted I wanted exactly zero margins between them I couldn't have exactly the margins I mean like 50 or whatever I need zero margins between the two elements and now let's also take a second to arrange everything else so I need my stack to be docked to both sides and I'm gonna make sure that it's zero percent from each side so zero here and zero here and now I'm gonna make sure the text inside the stack are docked to both sides as well and I'm gonna give this one six percent from the left and this one also make sure it's talked to both sides and give it 28 percent from left so now these two texts and they scale they are moving together very very nicely there's still a bit more work to be done as you can see because again all my elements are getting further and further apart from each other but you've but you've stacked those so for those who are watching we've taken two different texts and we set their size and we stacked them and I've seen this question before in the community it would start with stacking specifically Ronnie and you can't actually separate the stack and put put some space between them on that right will you show that again because I know I've seen that question I can I can decide that I want to have a hundred pixels between them I will now keep a hundred pixels between them at all times that's a go over the margins between them I can add more elements into the stack switch them around there's a lot that this nice element can do for you so now a thing about containers containers in another X their height is set to auto mean meaning they will always be larger to fit the content within them however if they don't have that content within them they will then collapse because they're said to others this is why they have a minimum height meaning at least 937 pixels in this case but always big enough for the content but this is the reason that my container is getting too large it's staying the same size while everything else is becoming smaller I don't want it to so I'm just gonna select none from the minimum height value so now we'll get there now my section is together with the content but everything is squeezed together so I'm just gonna give my stack that is at the center of this fall some margins from the top and from the bottom let's give it a percent from the top and 13% from the bottom and this is the spacing I was looking for now just one little thing to add here I'll go to my media again and let's add the logo mmm very arranged this is my logo I'm gonna throw it over here I need it to be 7% wide and I want it to be 2% from the left and 2% from the top I'm working a lot with percents you can work with pixels but I'm working a lot with percents because that keeps everything in proportions I'm glad you show that because that was actually a question just just a moment ago can you use percentage instead of pixel and you just answered that so that's amazing so this is my design and I'm loving it now let's add a sidebar navigation bar that was used in the design so when I select the page I can see pluses from either side and from here I can add a vertical section editor X does this for you when you resize the section everything else gets pushed and rearranged to your page grid rearranges and adjusts itself for your desired which is awesome because everything here is fluid all my design still works with sweet as well very construction is just like any other section I can throw stuff in an internet design and as I want but I took the liberty of cutting some corners here so we can cover a lot of territory and space so I saved my design this is something very very strong and useful in Alaric's any section you design you can save it and then it's like the presets that we allow we offer you you can create your own presets to jumpstart your design or reuse it later you can save them and use them in different sites so you can create your own templates and then use them so I created this type by myself earlier I'll just throw it in here I don't need the one I added so I'll just delete this one now in the original design I needed it to be on the right so I'm just gonna right click and move it to the right now it is stretching the entire height of my page which is not something I was looking for so what I'm gonna do is I'm gonna select it and from scroll options pearl effects in the inspector I'm gonna select fixed this means it will stay fixed in my screen you can see it's now always the height of any screen that's viewing it and it stays in the viewport as I scroll through the rest of my page which is exactly what I was looking for in tablet it's here as well and fixed in mobile this is a bit too much there's not enough room in mobile devices for vertical sections so I'm just gonna hide it I'm gonna right-click it and select don't display remember no effect on higher breakpoints so it's still here and if for some reason I wanted it back I can find it in my layers panel and I see that it's hidden and I can apply it back so show that again this is this is someone just asked is it possible to see this design and mobile and and there it is how did you do that you just click something I want it for those who are watching show them how you switch between those views it was very amazing I switch between the views from the top bar or from the drag handles as I and all I did was hide this from view I click what I don't need in any break point and select don't display and it would just not display in that specific great point that's amazing but I won't go through this but in general I probably need to add a new hamburger menu instead in mobile and throw it in there because there's not enough room for my sidebar but I want to get moving so let's move to the next section so the next section I actually also pre-prepared so because I want the site to look really nice while I'm showing you only some of the stuff because we don't have enough time to cover everything this section has texts that are also scaling and in a stack you can see the texts wrapping very nicely now let's build another section this is going to be the recent collaborators collaboration sorry section I'm gonna color it with another type of Munich green and I need the title for the section inside it actually this one is exactly what I need so I'm just gonna duplicate it copy and paste it throw it over here I want it to be exactly zero margins from all directions and exactly a hundred percent white by the way if you're wondering zero pixels or a zero percent does not matter they're all the same zero is zero let's change the text here too recent collaborations and as usual I don't need them in height here but I do need some spacing so I'm gonna use padding padding allows you to push the content inside each container to give some space from within the container so I'm gonna select this here sorry I'm selecting the text when something is covering something else this is very useful the breadcrumbs control and it will happen often from the breadcrumbs control you can always select the parent of what you're looking for so I needed this section that text was covering it so I'm selecting the section and that to add 100 pixels padding and click here in the lock and it will apply to all directions now 100 pixels is nice but as we spoke before remember pixels are not as fluid and what 100 pixels might look good on this top but they're too much in mobile so I'm actually going to use percent so what I'm gonna do is go for 4th percent here and that's disconnect and go for 3 percent from the top and 5 percent from the bottom so now I have nice spacing that looks good in all screen sizes because it's responsive let's add the content the real content here that's below the title I actually need the same spacing the same padding so I'll just duplicate this section right here throw my text that I don't need resize my section a bit now what I need if you remember is a layout of grid layout of 2 rows now grids CSS grids are used in any direction are very very very powerful they're very strong way for you to have full control over your layout and have elements adjusted and relating to each other and really really we can get creative in this case I just need a two row grid we have nice presets default presets but you can select custom and go for any kind of read you like but 2 rows is enough for me here so I'll just select 2 rows now Brett if you don't mind I also prepared some texts hidden over here and for later use because I don't want you all to see me just designing more and more things that you already saw so this is the first text element I want it to be 0 margins from all directions you can see that the position itself in the middle of my grid which is not what I wanted I wanted it to be in the first row so we won't dive in deep into this but I can tell it to be between grid Pro 1 and really well to position it exactly where I wanted it same for this text element again 0 from all directions and it's already in the grid row that I want it to be in the text is scaling but again container is not so I'll remove the main height and now the grid itself is what is holding the height the grid and the padding are holding the height here so I'm going to go into edit grid mode from edit the grid mode you are free to customize the grid as you like the preset for the beginning is just a starting point you have a variety of different units to use fr-s which are fractions vwv H which I mentioned before calculations where you can apply various calculations in this case I'm going to need max content because I want the row to always be high enough to fit the content inside it and you can you have handles as well where you can resize manually as you wish but I'm just gonna need max content for this row as well oh nice so let's see what it looks like looking good Wow looks really good you agree yeah yeah this this makes this makes a whole lot of sense watching you work right there and connecting it and giving the padding I think I think just watching you work and explaining what you're doing has so much value and everybody's just absolutely loving this that was the whole intention yeah it's great so if you remember what I wanted this grid to be in tablet I wanted this to be two columns I wanted the row of text to be continuous I want to scroll through it so I can just readjust my layout my grid this is very powerful a tool that editor X gives you you can arrange rearrange your layout the grid and the content within it per breakpoint just in one click so I instead of two rows I want these two text to be in two columns nice and again I'm gonna adjust it a bit I need the height to be set to max content again and this time I want the columns to be set to max content because the text here is growing scaling and I want the column the width of the grid to respond so I select next content for the width here and Max content for this column here and almost there almost there I have some padding that doesn't look too good in this break point so I'm free to change the padding completely let's go for 20 Souls I mean 20 fixes not than 20 percent so 20 pixels in all directions so I have no one row of content but look at this it just goes out of my screen and I have to scroll in my screen and it's not what I need from every container you can control what happens from here from the overflow content section you can control what happens to content that's outside it's overflowing the container I can set it to height if I set it to hide no scroll but you can see the text element here going out but you don't see it not what I was looking for what I was looking for is scrolling it and I can select to scroll vertically horizontally or both directions and when it's scroll horizontally and I don't even need a scrollbar because it will be for tablet devices and touch devices so let's see what I got here I can scroll through my content and remember the layout looks different in this talk I just adjusted my druid migrated that was this section let's go back to edit mode I'm gonna throw in something just for fun let's throw this section that I Crede assigned earlier and we'll just do some touch-ups here it's very simple I won't get into it because you saw most stuff there's an image here that is stretched to the grid but look at this the my text is exactly on the nose of this nice man and it doesn't look too good for me this is because editor X has a very smart focal point feature which identifies faces and focuses on them but when I have a text in the middle I don't want the person's head to be exactly in the middle so I'm gonna just adjust it a bit below so the focus will be a bit different nice remember things change size so it's very important to tell the image where to focus and I'm gonna select parallax for this image to give it some life as I scroll through it let's do the preview and that's a really good point so a great way of using a focal point right is so it's so tell us again why we would use a focal point an image about the resize because I think that's a really amazing trick not a trick it's it's amazing but it's and it's makes all the difference and the images change size they might be cut off a bit and other places other parts of the image will fit in so you might want to tell the image exactly where to focus on using the focal point then you can do that for a great point okay let's build our I'll just show this also very briefly before I show you the last section in a bit more details so this is my repeater which shows the project the recent projects I'll just throw it over here I pre designed it before remember we are gonna have more webinars like this in which there's just so much to cover that we couldn't show you everything so I'm touching out some things but we're gonna have a lot more webinars to cover all the different features and then it rx let's see the repeater over here it's set to always show three items in a row so at some point things get a bit too crowded over here so what I'm gonna do is select the repeater we get it by the way is I didn't mention this repeater is a very very powerful way for you to have one design and for your item and then show multiple items a lot of content that shares the same design and layout so what I mean is if I move this text a bit over here it will move in all instances in all items so they all share the design but you can present different content with it and you can connect it that's the real strong part you can connect it to your collection and then inject data from outside and update it without even going into the editor very powerful so back to what I was going for I want to take control here and I want to make sure my repeater is showing only two items per roll in tablet and in mobile again this is too crowded I can just decide to show it them all in a list or even better to show them all in slider so now you can slide through the content in this breakpoint see the content in two items in a row and tablet and three items in a row in desktop so this one I already prepared before it's the footer of my section it's not in the right place remember I could just move it up move the section up so it's in the right place I think we just have time for one more section which is good because it's the final section that we need to work on and for any of those asking questions we do see them and we're gonna try to get to those we have a Q&A section right at the end so so so hang tight sorry Ronnie I just wanted everybody to know here last section guys and it uses the layout which is very very powerful and fun and let's see how it works so when I go to add a new section editor X offers me to either have a blank section or a grid or later you see that later I can apply a grid to any section but I can start off with these I want to lay out of here we have again presets I'm gonna go with this one so what is a layout area a lay-oh there again uses flexbox technology just like the repeater that we just saw and just like the stack that we saw that was built specifically to have elements relating to each other vertically but the layout is more powerful it manages boxes in the space you have the freedom to change their size as you wish you can add more of them so if I just duplicate this one I'll have another box here and you can see everything fitting and readjusting to make room for the changes that I make I can even go ahead and drag another container from the add panel throw it in any just is being added you can move them around so I can just grab this one and say I want it here and again change their sizes and everything the layout that manages these in the space they're all fluid and at some point when they run out of room they might start wrapping which is the power of the layout there let's see it so when things get a bit too narrow my elements start to move between the rows and adjusting themselves you see until eventually they will mostly time stack up nicely one on top of the other so these are just containers I can again throw stuff in them design them as I wish I can apply a grid to each of them and really get intricate if how things are laid out inside again I saved sometimes for some time for us all by designing a good starting point here because you don't need to see me coloring things although it's you can if you want that we can have another webinar for me colouring things but uh so I have a nice layer here pre-made with all my content let's get let's delete the one that I don't need anymore so let's see what it looks like when I preview it remember things get shorter so the layer of itself is also pulled up as the screen size changes and you can see that it's boxes start to wrap see the image here moving here and then the layout getting rearranged automatically in squares in boxes and then also wrapping again to stack up on top of the other so automatically the layer is very very powerful you can just design your boxes and they will find their space and arrange themselves but I might want more control as usual because I'm like that so I'll head over to tablet and eat a bit I want to make some fine adjustments what I'm gonna do is make sure this takes up a hundred percent of the width and all times most of the layout they're rearranged itself nicely the way I wanted it so that's fine this now takes a bit too much space so I'm just gonna rearrange my layout let's position these exactly where I need them using alignment tools and now there's just to clarify what we're seeing when you're dragging and dropping and arranging in this area this is jut you're just changing this particular eye section right here right this particular item in the layout they're exactly cuz they're all containers everything is writing directs and I can rearrange the layout in each of them that was a question so I just wanted to good yeah and now it is a bit too high too tall so let's set it to be 116 pixels in this break point so my layout is in one layout in this talk and another layout in MoMA and tablet sorry and mobile I want to play with it again this is not exactly what I need the asterisks it may be a bit too much in mobile like taking too much room so remember I can select don't display and just not show it in this breakpoint and now I actually want I have more room so I want these two to share half and half of the screen again and so when you when you hit that Ronnie I'm sorry to cut you off your question when you hid that how would i if I'm working in editor X how would I know that it only is hidden at a certain breakpoint can you show how people might know that or how we could remember we spoke about cascading everybody's Nana directs cascades down including hiding so if I were to hide an element in tablet it would be automatically hidden in mobile as well if I hide it well it's only hit in the moon while I can hide it in tablet it's automatically hidden in mobile as well and then I can go to mobile and open the layers panel and inside my item inside the layout there I can find what I was this is the item that was hidden and I can click here and it will be back on stage again so full freedom cascades works for you most of the time perfectly but if it's not what you were looking for you can go ahead and take control and change the cascading decision in specific element that just answered a lot of questions so awesome thank you and now again I want to rearrange just this section because this is what this editor is for for people who want a lot of control over their layout so I just need to readjust my grid I could do this I could go into edit grid mode and adjust it but I can just even delete the grid completely in this breakpoint arrange my text elements we have smart guides here that show me that they are nicely aligned to each other like so I'm gonna need them I have the freedom to change the scaling very breakpoint remember so I can set 16 to 36 in this breakpoint only let's do the same for all the texts here last one 16 to 36 and in fact I still need I need a grid because they will be pushing each other so I can apply a new grid select the item apply a grid this time I need a three row grid so I just select it and apply it and now I can Center them exactly each in the middle of its row so I know my layout looks very very nice I can also delete this section that I don't really need and that one and now I can see my end result this is my layout there this is what it looks like in desktop and in tablet and in mobile in fact I have a few sections that I don't really need deleted here and this one here so we can see the full thing completely let's see what we built here let's start from the top this is my top section play around with its design in the different break points remember we have a vertical section that is not in the mobile view and this is the About section recent collaborators that changes into overflow scroll over here the image with the parallax effect and the focal point repeaters there are three in a row and then eventually presented in a slider and my layout area over here which we just saw how I customized it there great point this is actually it Brett that's when you say that's it like it's nothing but that wasn't that was a lot right no yeah a bit but I but I I feel like after watching you work with with containers and even the padding with with text and and grouping elements like this was really really if I have never used editor X before now I would feel more comfortable and if I was using editor X I'm pretty sure there was a there was something that you did where it taught me something I didn't I wouldn't have known so I think all around this was really really in-depth and awesome Ronnie and you have a lot of fans and everybody is super thankful can I ask you some questions sure let's do it so here's I saw this one a lot and I and and you guys have asked questions and we wrote them down and I'm coming back to him so if you have questions please go ahead and drop them now and I'll try to get to as many as possible so here's one is it possible Kian wants to know is it possible to update an existing site to edit or X well can that's a great question and I'm sure you guys are waiting for such a capability you must understand that an existing Wix section and a site is built in a completely different technology layouting is totally different we want to get there we are working on in the long term on giving you this feature at the moment you cannot you need to rebuild your site and it will probably be very useful for you to learn how to build an editor X but eventually we want to get there sure I can a great question thanks Qian and Ronny thanks for the answer here's another one Elisha asks can-can can you add different break points across all pages instead of just one at a time is that possible at the moment it's one at a time it gives you a lot of control every page that you control you can add for your page that you need and duplicate it and start with those break points and the other pages that you build so you have a workaround but we might get there as well so don't worry another I see this a lot there's a lot of questions so I'll do a two-parter I say Utena is it is it free to use that at or X or first off is it free to use editor X and in second how do we get to editor X it is free to use editor of X to go premium you need to pay like you used to and we will launch another premie another pricing mechanism soon but for now it is free to use it's in beta and you're more than welcome to come and use it it is fully functional you can build fully functional websites on it just head over to editor XCOM and you will find your way into starting you can see all our expressions which are beautiful sites that you build that you can start with or you can just dive straight through into the editor from there editor XCOM that perfect you just answered a lot of questions there let me ask you another one Michael wants to know how do you add or embed custom custom code okay well there one very strong way that I do not know if you are acquainted with is corvid correlate that you might know from the classic editor is fully integrated into editor X once I turn on dev mode I can write custom code for all my elements using Java Script I can connect to external api's and this is the IDE here where I can select any other mint and write custom code for it we are also at work on adding the HTML embed component where you can create your own HTML and just embed it in the box inside editor mix it's coming soon perfect so great question Michael and Thank You Ronnie you know Jackie's got a great question here she's she she loved the webinar and she's super into this and she's really really new to edit or X and I talked about this a little earlier where else can she go to learn more about this so I mentioned the Academy when we started and I'll mention it again because it is so so useful first of all home editor XCOM you will also find your way to the Academy but also from within the editor you have a link that will take you there the Academy X let's just see it the Academy X teaches you about each and every feature of this editor so a lot of lessons and we keep adding more and more of them and there are also video tutorials that you can learn from and let's just look at the breakpoints lesson for instance so it explains to you what the feature is and their videos and gets to show you how it is utilized you can learn about cascading rule which I just explained everything that I explained and so so so much more and you can also open editor rigs and exercise we have steps to take you by bit with them by the hand and tell you what to do so you can accomplish and learn yourself so Academy exists to be useful and remember there is more education for you like video tutorials and the forum where you can go consult with other users but Academy X is so so recommended to start with it will take you some time but it knowing the basics is gonna get you very very far and editor mix take that time that's my little tip now for those watching we do have some secret attendees and I'll bring anybody in if if actually anyone else in Wix once it's all if you want to tell us a little bit more this exciting place yeah hi everybody thanks for joining us today I'm tile from the marketing team I would just want to go over again and on the pricing question because I wasn't sure it was that clear to everybody so edit o X is open to everybody and just as Holly said go to edit or XCOM sign up or log in and just start creating creating a site of mandatory X is free but you have the option to upgrade in order to remove the ads the edit or excess to enable payments and connect a domain so it's the same order you know from Wix I will use an editor X so you can just start and create today so just wanted to clarify that and please stay because there's lots of questions and let's have a very open Q&A panel here in Galia good to see you as well glad to have you um but before we do any more questions let's do quick intros tall tell us what you do at Wix and then galley I want you to you to tell us so I'm one of the product marketing managers at the editorial marketing team and Gaddy and hi everyone so I'm Gotti I'm the head of product predator X and I'm just so happy to see all the questions and really just super excited about all of this and thank you 1 it was amazing it's great it was great I don't think I don't think you saw that all the chat comments but I collected it for you it's pretty awesome should totally frame that and just put it behind me for forever so we've got some more questions I want to throw some and Ronnie I'm gonna throw this when it's you mark mark has a question about the repeaters he's curious to know where the repeater gets its data from how does can you can you tell me what a little more 11 the repeater can take its data from a collection but it can also take its data manually so actually I think I just got my - tired but I'll explain manually I explained by words so you can select every element and update so you can just write text and change the image per element and do it manually the repeater can be very useful to just show six items and six councillors in your summer camp but you can also connect it to a collection and remember here I showed you the content manager once I add this to the site you have the power of the CMS you can add fields customize them add a load of content yourself and then go into the repeater and connect it to that collection so it populates with the content that you have there and it's in the back office you can update it without going into the editor you can even have your clients update your content if that's what you're looking for without missing out with your site's design awesome awesome great question thanks thanks mark and Ronnie thanks for the answer Dave's got another great question and I know you showed this but it's just sort of a how-to can you build your own layout err well building yo is just starting from blank you don't need to build your own when you have these layout tools blank layout there's write it here waiting for you either fully blank or wireframes and just throw it on there and stay on the stage and add as many items as you wish and customize it and layout as you wish so yeah you can this is just a very initial starting point it's a great question I've got a good question and I'm throwing this one to you tall because we're so glad to have you does editor X how does editor and this is what digital digital Glo asks how does editor X work with SEO you're muted sir um so if you go to the your site dashboard you will see our marketing home where we you have all the marketing tools we have to offer one of it is an SEO wizard for advanced advanced users so we have like the four full solution for SEO that works completely amazing with the editorials so the answer is of course perfect thank you great question digital blow and tall thank you for answering magician asks a good question too and Ronny I'm gonna toss this one to you will Wix apps like forum and hotels be available yes the answer is yes of course and fully integrated into illiterates honey maybe you should show that you already show anything at market yes right here search for the forum and we'll find the Wix form right here to its pages and all its complexity and business logic sure also our communities our editorials form is built on editorial and also editor extar to come out all of our assets or printed editor except that's a great showcase for happy everybody to to look at okay also um okay what just a couple things mark I'm gonna drop a resource right now for you you asked specifically about database collections someone in the back in I want to say thanks to Rossum for getting that for us there's a link for you if you're still here that you can go check that out or anybody's interested in checking out database collection when we were talking about repeaters another another great question let's see so actually I have a follow-up question to you to you Ronnie when we were talking about building your layout or is it possible if you did do something like that can you build and save those sections Sarah actually asked a follow-up question to what was asked earlier by Dave sure let's just show you briefly if I add a new section a new layout a section over here and let's just recognize it so I'll change the color to blue and now we can select this section come here and save to my designs and say call it my lair and save it and it will now appear in my designs right here at the bottom so he clicked on something any close but it's right here at the bottom and I can throw it in any other page and any other site that I'm building and use it perfect a a really great question and and and and I'll probably I actually I have the inside scoop on this one we're talking a little bit about about cookie alerts with that interacts right and specifically some of the regulations that are that are coming down and this was a good question and it wasn't long ago I think it was even last week where we had a roundtable with the product manager and we talked about what's coming which is the Wix privacy center or the privacy center if you're in your dashboard at editor X so that is coming it's not released just yet and I think Aviva's gonna drop that link so you can go back and and check that out so I did want to touch on that Ronnie did you want to follow up on that or at all your mute it's always again I say it's coming soon and we'll have to queue once we have you know the full scope um I saw someone is asking if Sandy's competitive with editorial so yes absolutely you can find it in the dashboard also awesome Aviva just dropped two great roundtable links if you want to go watch those it's fantastic we'll take a few more so first off tall is there anything you want to touch on maybe maybe emphasize something that that I mean we're both watching the chat is there anything you wanna hone in on yeah I think I would like to encourage everybody as we already said to go to edit or x.com we also have to a few new resources for you there we have the showroom which are your your your sites that were submitted so you can get some inspiration of and you can submit your site for a chance to be featured also so that's a great source of inspiration for you guys and also we're actually launching today a new series of classes with the design masters first is the pencil so you can see like pro and great designers we love showing their work of art on any topic so that's happening today and now we encourage you to to go and check it out so there's a lot lots going on on editorials comm you can see what's coming soon the features are coming soon the features that are our after the updates and releases and so just go and browse and read it will give you a lot of power to do a great you know the best fashion you can do so I think there's a lot of still a lot of questions and this may be a great opportunity to take this conversation offline otherwise we'll keep keep you all here and we all know Ronnie's dog needs some attention so so I think this is really really awesome and I don't want to thank Ronnie and tall for coming and everybody for attending it was it's I think it really sort of for those who are entry level or just looking at it it's somewhere to start and for those who are I've been using it for a while it's a great way to hone your skill so I want to say thanks everybody coming and tall thank you for being here and Ronnie thanks for taking the time to go through this this was superb thank you very much Randy just think we should say that the recording will be uploaded right and well-supported the link for them of the live demo so no worries about that thank you everyone for joining thank you thank you

Channel: Wix.com

Views: 5,531

Keywords: wix, wix.com, website builder, web design, create a website, free website, how to make a website, make your own website, website maker, build a website from scratch, Wix Partners, Wix Workshop, Digital Agencies, Web Design, Freelance Business, Editor X, Clients, Workshop, Freelancers

Id: ASe9-yoCk9k

Length: 65min 13sec (3913 seconds)

Published: Wed Jul 15 2020