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 at least everybody's coming together.

Yeah, exactly. I mean, this is the best way to do it, too, right? Oh, Sandra's 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?

Have I what?

Have you ever. Have you ever eaten poutine? It's like. It's like French fries, gravy, cheese.

It's so good.

It's. It's Montreal. It's really good.

How slim I am. It's because I've never had it before.

Atlanta, Hotlanta, she says. 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 say all panelists and attendees so everybody can see, because we. We're seeing all of these amazing places where everybody's checking in from, but everybody can't see it. So make sure you switch from all panelists to all panelists and attendees. There you go. Yeah, there we go.

There we go.

Okay, I think 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 wix.

Okay, so. Hi, everybody. I'm Ronnie. I'm a product manager on the Editor X team. Been here with this product since day one, and super, super thrilled and excited to be presenting this webinar to you guys today. Super thrilled.

Well, I want to say thanks for taking the time to come and show us some really cool stuff. For those who are attending, what can we expect to kind of see and learn from this presentation?

Okay, so I'll take you through a brief walkthrough through the Editor X workspace to get acquainted with it. We'll go over some of the basics of designing on Editor X and its quality core concepts that will really help you if you understand them well as you dive into designing on it. And we'll ourselves design dive into some of the key features that it utilizes. And we'll show this all on a beautiful page homepage that we created for a designer we made up called Sam Milo 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 Q and A with Ronnie. And also before we jump into this, I want to remind Everybody that on editorx.com we do have an amazing resource section you can find. All of you can find the forum, 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 kick this off. 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 load. This is the site that we'll be building. Let's scroll through it. Beautiful, beautiful design.

That looks really good. It's really slick.

And since Editor X allows you 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 different sizes of screens that can be viewed from the first section we'll be seeing. We'll be learning about docking and positioning and sizing of elements and text scaling and scaling of images. Over here we'll 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 mobile and desktop. We'll be seeing the repeater that can be used in different layouts and the layouter, which is an Editor X component that allows 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 by decision. 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 we're looking at here. Yeah, that's repeaters. Okay.

We'll be seeing more of that later.

Perfect, Perfect.

All right, so just jump into our workspace. This is the EditorX workspace. 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 freely 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 the break point. Breakpoints are places, are 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 per page. I can also jump between the breakpoints from here, from the top bar, 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 screens 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 and not just screen width. It's always important in EditorX 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 EditorX, 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 learn in 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 answers. And 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, request features, report a bug, etc. Super useful to go into help and feedback. Let's see what else we Got here. 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 them as you wish. As a starting point they are targeted at different areas of the product. Really, really, really useful. But you can also use blank layout tools like boxes and layouters. We have a lot of wireframe looking repeaters and light boxes etc. That you can start from blank. And there's elements of course, so texts and buttons and menus and media and decorative elements like SVGs 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 they 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 text, your site themes, text themes, so you can control them 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 is 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. The inspector opening up on the right inspector is where you can control all the properties of any selected element, how it's 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 have three sections, but you're 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 page's 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 folds, 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 per break point. 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 week. So these are the sections in your page. By the way, I can also.

In terms of. Let me ask you a question, Ronnie, if you don't mind. In terms of. Are breakpoints similar to. Are 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 you can flip a section to have it vertical in one breakpoint and horizontally another breakpoint and you can actually use a 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 Eileen.

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 my button. The button is fixed in size. It's 142p pixels high and 46 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 my 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 Editor X cascades down. So changes I made in desktop affect 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 that cascade are per break point, per 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 here in mobile. And I can also unify these designs. Let's see what my button looks like. Three different colors and three different positions. I can unify them by right clicking. Copy from Breakpoint will 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, that design. And I just want to borrow it and apply it here. So you have full flexibility of playing around trying different designs until you're happy with them. And then you can rearrange everything and unify your site's design. Enough about explaining. Let's really start getting our hands dirty and building something. So I'll start with the media element. You can, you can add three images and you can upload your own images. You can connect to external services and upload all your stuff. I already took the liberty of doing that and arrange everything in folders. So I'm going to add this mobile device over here and I'm going to 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 docks 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 I think that's a really, really good thing to say. So this is docking and how you dock an image. So it doesn't, it doesn't move when you change the size there. So again, I think that's really awesome.

It moves the way you want it to move. You have control over setting exactly how you want it to behave. I can decide. Most elements in EDRX arrive fluid by default. What does that mean? It means that they are changing their size together with the screen. Media elements arrive set to scale by default. So as you can see, the image is keeping its proportion, proportions and scaling. Now I'm gonna want this to be 25% precisely. You have the freedom to use other units, pixels, VHVW that refer to the viewport's height or width according to the current screen that views your page. And I wanna position 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 minus 7% from the bottom because I want it to be sticking out a bit. 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 me, Ronnie. Not me.

So I'll throw this image here and I want this one at the top. Right. So I'll just use an alignment tool. 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 some.

That's 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 in neon kind of green that I already uploaded earlier. And I'm gonna want it to be 202 pixels wide. Large. 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 to 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 need it to. Let's set it to 24 to 202. Alright. 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 1. Nice. Let's duplicate this text element because I want exactly the same styling here and I just want to change the text. So UX ui. Sorry. UXUI designer. And I'm going to 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 keep my elements relating to each other.

Will you touch on real quick text scaling and how you did that again? 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 span. And I'm now giving my text a minimum size and a maximum size. And according to the screen size, it will move between that span. Okay, 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 a container that we created for you. A stack uses Flexbox technology and we tailor made the stack 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 need 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 6% from the left and this one also make sure it's stocked to both sides and give it 28% from the left. So now these two texts, as 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 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 with stacking specifically Ronnie, and you can actually separate the stack and put some space between them on that, right? Will you show that again? Because I know I've seen that question.

I can decide that I want to have 100 pixels between them. And they will now keep 100 pixels between them at all times.

That's incredible.

Control 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 Editor X, their height is set to auto, meaning they will always be large enough to fit the content within them. However, if they don't have content within them, they will then collapse because they're set to auto. 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 going to 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 fold some margins from the top and from the bottom. Let's give it 8% from the top and 13% from the bottom. And this is the spacing I was looking for. Now, just one, one little thing to add here. I'll go to my media again and let's add the logo. 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 percent. You can work with pixels, but I'm working a lot with percents because that keeps everything in proportions.

I'm glad you showed that, because that was actually a question 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. Your page grid rearranges and adjusts itself for your desire, which is awesome because everything here is fluid. All my design still works with this width as well. Vertical section is just like any other section. I can throw stuff in it, design it 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 EditorX. Any section you design, you can save it and then it's like the presets that 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 the sidebar 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 going to do is I'm going to select it. And from scroll options, scroll effects in the Inspector, I'm going to 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 a vertical section, so I'm just gonna hide it. I'm gonna right click it and select Don't Display. Remember, no effect on higher Breakpoint. 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. Someone just asked, is it possible to see this design in mobile? And there it is. How did you do that? You just click something. For those who are watching, show them how you switch between those views. It was very amazing.

I switched between the views from from the top bar or from the drag handles as I wish, and all I did was hide this from view. I click what I don't need in any breakpoint and select Don't Display and it would just not display in that specific breakpoint.

That's amazing. That's amazing.

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 text wrapping very nicely. Now let's build another section. This is going to be the the recent collaborators collaboration, sorry section. I'm going to color it with another type of neonish green and I need the title for the section inside it. Actually, this one is exactly what I need. So I'm just going to duplicate it, copy and paste it. Throw it over here. I want it to be exactly zero margins from all directions and exactly 100% wide. By the way, if you're wondering, zero pixels or zero percent does not matter. They're all the same. Zero is zero. Let's change the text here to recent collaborations. And as usual, I don't need the min height here, but I do need some spacing. So I'm going to use padding. Padding allows you to push the contents 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 the section, but the text was covering it. So I'm selecting the section and let's 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 100 pixels might look good on desktop, but they're too much in mobile. So I'm actually going to use percent. So what I'm going to do is go for 4% here and then disconnect and go for 3% from the top and 5% 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. Grow 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 two rows. Now, grids, CSS grids are used in nadirx and are very, very, very powerful. They're a very strong Way for you to have full control over your layout and have elements adjusted and relating to each other and really, really get creative. In this case, I just need two row grid. We have nice presets, default presets, but you can select custom and go for any kind of grid you like. But two rows is enough for me here, so I'll just select two rows. Now, Brett, if you don't mind, I also prepared some texts hidden over here 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 zero margins from all directions. You can see that it positioned 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 deep into this, but I can tell it to be between grid row one and grid row two and position it exactly where I wanted it. Same for this text element. Again, zero from all directions and it's already in the grid row that I want it to be in. The text is scaling, but again the container is not. So I'll remove the min 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 grid mode, you are free to customize the grid as you like. The preset at the beginning is just a starting point. You have a variety of different units to use. Frs, which are fractions, vw, vh, 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. You have handles as well where you can resize manually as you wish. But I'm just going to need max content for this row as well. Nice. So let's see what it looks like. Looking good.

Wow. It looks really good.

You agree?

Yeah. This makes a whole lot of sense watching you work right there and connecting it and giving the padding. 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 wanted to scroll through it so I can just readjust my layout my grid. This is very powerful tool that Editor X gives you. You can Rearrange your layout, the grid and the content within it per break point, just in one click. So instead of two rows, I want these two texts 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 and scaling and I want the column, the width of the grid to respond. So I select max content for the width here and max content for this column over here. And almost there. Almost there. I have some padding that doesn't look too good in this breakpoint, so I'm free to change the padding completely. Let's go for 20 pixels. I need 20 pixels, not 20%. So 20 pixels in all directions. So I have now one row of content. But look at this. It just goes out of my screen and I have 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 that's overflowing the container. I can set it to hide. 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. I want it to scroll horizontally and I don't even need a scroll bar 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 desktop. I just adjusted my grid. 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 pre designed earlier and we'll just do some touch ups here. It's very simple. I won't get into it because you saw most of the. There's an image here that is stretched to the grid. But look at this. 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 going to 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 go to preview and see.

That's a really good point. So a great way of using a focal point right is. So tell us again why we would use a focal point on 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 make all the difference.

As 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. And you can do that per break 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 projects, the recent projects. I'll just throw it over here. I pre designed it before. Remember we are going to 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 up some things. But we're going to have a lot more webinars to cover all the different features in NidRx. 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 here. So what I'm going to do is select the repeater. Repeater, by the way, is I didn't mention this. Repeater is a very, very powerful way for you to have one design 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 row in tablet and in mobile. Again, this is too crowded. I can just decide to show them all in 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 those asking questions, we do see them and we're going to try to get to those. We have a Q and A section right at the end, so hang tight. Sorry, Ronnie. I just wanted everybody to know.

Sure. 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 a layouter. You see that later. I can apply a grid to any section, but I can start off with these. I want a layout in here. We have, again, presets. I'm gonna go with this one. So what is a layouter? A layouter, 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 through it in, and it 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 layouter manages these in the space. They are all fluid and at some point, when they run out of room, they might start wrapping, which is the power of the layouter. 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 most of the 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 how things are laid out inside. Again, I saved some time for us all by designing a good starting point here, because you don't need to see me coloring things, although you can if you want. We can have another webinar for me coloring things. But so I have a nice layout here remade with all my content. 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 layout of itself is also pulled up as the screen size changes. And you can see that its 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 one on top of the other. So automatically the layouter 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 in Tablet I want to make some fine adjustments. What I'm going to do is make sure this takes up 100% of the width at all times. Most of the layout 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.

Just to clarify what we're seeing, when you're dragging and dropping and arranging in this area, you're just changing this particular section right here. Right.

This particular item in the layouter. Exactly. Because they're all containers, everything is contained in the directs and I can rearrange the layout in each of them.

That was a question. So I just wanted to.

And now it is a bit too high, too tall. So let's set it to be 160 pixels in this breakpoint. So my layout is in one layout in desktop and another layout in mobile and tablet. Sorry. And in mobile, I want to play with it again. This is not exactly what I need. The asterisk is maybe a bit too much in mobile. It's taking too much room. So remember, I can select don't display and just not show it in this breakpoint. And now actually I have more room. So I want these two to share half and half of the screen again.

So when you. When you hid 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? Everything in NDRX 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 in mobile, it's only hidden in mobile. 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 the 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 their scaling per 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 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 layouter. 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. Delete it here and delete 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 breakpoints. 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 over here. Which we just saw how I customize it. Third breakpoint, this is actually it.

Brett, you say that's it. Like it's nothing, but that was a lot, right?

That was a lot.

Yeah. But I feel like after watching you work with containers and even the padding with text and grouping elements, 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 something that you did where it taught me something 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 you guys have asked questions and we wrote them down and I'm coming back to them. 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 Editor X?

Well, Kian, that's a great question and I'm sure you guys are waiting for such a capability. You must understand that an existing WIX site is built on a completely different technology. Layouting is totally different. We want to get there. We are working 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.

Kim, great question. Thanks Kian and Ronnie, thanks for the answer. Here's another one. Alicia asks, can you add different breakpoints 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 per every page that you control. You can add for your page that you need and duplicate it and start with those breakpoints 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 see you, Tina. Is it free to use Editor X or first off, is it free to use Editor X? And then second, how do we get to Editor X?

It is free to use Editor X. To go premium, you need to pay like you're used to. And we will launch another premium, 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 editorx.com 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. EditorX.com that perfect.

You just answered a lot of questions there. Let me ask another one. Michael wants to know how do you add or embed custom code?

Okay, well one very strong way that I do not know if you are acquainted with is Corvid. Corvid 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 JavaScript. I can connect to external APIs and this is the IDE here where I can select any element and write custom code for it. We are also at work on adding the HTML embed component where you can create create your own HTML and just embed it in the box inside Editor X. It's coming soon.

Perfect. So great question, Michael, and thank you, Ronnie. You know, Jackie's got a great question here. She loved the webinar and she's super into this and she's really, really new to Editor 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, from editorx.com 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 the breakpoints lesson for instance, so it explains to you what the feature is and there are videos and gifs to show you how it's 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 X and exercise. We have steps to take you by the with them by the hand and tell you what to do so you can accomplish and learn yourself. So AcademyX is super useful. And remember there is more education stuff 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 knowing the basics is going to get you very, very far in Editor X. 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 actually anyone else in WIX wants to Tal, if you want to tell us a little bit more about this exciting place.

Yeah. Hi everybody. Thanks for joining us today. I'm Tal from the marketing team. I would just want to go over again on the pricing question because I wasn't sure it was clear to everybody. So EditorX is open to everybody. You can just as Ronnie said, go to editorx.com sign up or log in and just start creating. Creating A site on EditorX is free, but you have the option to upgrade in order to remove the ads. The EditorX adds to enable payments and connect a domain. So it's the same model, you know, from wix, we use an EditorX 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 and A panel here in Gallia. Good to see you as well. Glad to have you. Before we do any more questions, let's do quick intros. Tal, tell us what you do at wix and then Gali, I want you to tell us.

So I'm one of the product marketing managers at the EditorX marketing team in Gali.

Hi, everyone.

So I'm Gali. I'm the head of product for Editor

X and I'm just so happy to see all the questions and really just super excited about all of this and thank you, Juan. It was amazing.

It was great.

It was great.

I don't think he saw all the chat comments, but I collected it for you and it was pretty awesome.

Take the evening off, Dorito.

Yes, yes.

Oh, I see from red fork 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 going to throw this one at you. Mark has a question about the repeaters. He's curious to know where the repeater gets its data from. Can you tell Mark a little more about that?

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 browser too 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 counselors 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 client update your content if that's what you're looking for, without messing up with your site's design.

Awesome, awesome. Great question. 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 layouter?

Well, building your own is just starting from blank. You don't need to build your own when you have these layout tools. Blank layout there is right here waiting for you, either fully blank or wireframes and just throw it on there on the stage and add as many items as you wish and customize the 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 Utah because we're so glad to have you. Does Editor X How does Editor this is what digital Digital Glo. How does Editor X work with SEO? You're muted.

Sorry. So if you go to your site dashboard, you will see our marketing home where 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 full solution for SEO that works completely amazing with the EditorX. So the answer is of course.

Perfect. Thank you. Great question. DigitalGlow and Tal, thank you for answering. Natisha asks a good question too. And Ronnie, I'm going to 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 Editor X. Bonnie,

maybe you should show that. You already show, I think, but maybe you should show the app market.

This is the app market and all of the business solutions are right here. Let's search for the forum and we'll find the WIX forum right here to be added into your site with all its pages and all its complexity and business log. Sure.

Also our community X, our EditorX forum is built on EditorX and also EditorX dot com. All of our assets are built on EditorX. So that's a great showcase for everybody to look at also.

Okay, just a couple things, Mark, I'm going to drop a resource right now for you. You asked specifically about database collections. Someone in the back end. I want to say thanks to Rosoman 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 who's interested in checking out database collection. 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 section over here and let's just recognize it. So I'll change the color to blue and now I can select this section from here and save to my designs and say call it my layouter and save it. And it will now appear in my designs right here at the bottom. Sorry, I clicked on something and closed. 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 really great question and I'll probably. I actually I have the inside scoop on this one. We're talking a little bit about cookie alerts with Editor X. Right. And specifically some of the regulations 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 is going to drop that link so you can go back and check that out. So I did want to touch on that. Ronnie, did you want to follow up on that or tall. You're muted again.

I say it's coming soon and we'll update you once we have, you know, the full scope. I saw someone is asking if send is competitive with EditorX. 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, Tal, is there anything you want to touch on? Maybe emphasize something that, I mean, we're both watching the chat. Is there anything you want to hone in on?

I think I would like to encourage everybody, as we already said, to go to editorx.com we also have a few new resources for you there. We have the Showroom, which are 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 design masters. First is the Peng Zhu. So you can see like pro and great designers. We love showing their work of art on Editorique. So that's happening today and I encourage you to to go and check it out. So there's a lot going on on editorx.com you can see what's coming soon, the features that are coming soon, the features that are up, the updates and releases. So just go and browse and read. It will give you a lot of power to do the best creation you can do.

So I think there's still a lot of questions and this may be a great opportunity to take this conversation offline. Otherwise I'll keep keep you all here and we all know Ronnie's dog needs some attention. So I think this is really, really awesome and I want to thank Ronnie and Tal 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 have been using it for a while, it's a great way to hone your skill. So I want to say thanks everybody coming and Tal, thank you for being here and Ronnie, thanks for taking the time to go through this. This was superb. Thank you very much.

Thank you, Brett. I just think we should say that the recording will be uploaded, right? And we'll also share the link for the of the live demo. So no worries about that.

Thank you everyone for joining.

Thanks everyone. Thanks again.

Thank you.

Bye bye. Bye bye.