Wix Editor Event: Create better, faster.

Hi everyone, and welcome to the launch of our latest version of the WIX Editor. Today we'll reveal the newest capabilities, joining our already amazing set of tools and solutions designed to give you a more intuitive and efficient web creation experience. I'm Yahara, Head of Product for WIX Editor, and I'm so excited to be here. It's been a long journey full of hard work by some truly incredible people, and I can't wait to show you what we've been up to. With more than 200 million websites created on Wix, we've developed a deep understanding of what our users want. This, along with extensive research into market trends, allows us to build tools to help you accomplish more. Whether you own a small business or a large web design agency, we know that you, as web creators, have high expectations and we're committed to meeting them. We want to provide you with the best experience out there. To do that, we've combined our powerful AI with complex design capabilities to allow you to create beautiful and engaging websites. We've also implemented new tools to help you build and grow faster to keep up with the ever changing business climate. And with this new version of the editor, the the possibilities are truly endless. Today, we'll take you through a demo of the newest features in the editor. After that, we'll be joined by David Schwartz, VP of Product, Hagit Kaufman, VP of Design, and Oded Nachshon, Head of WIX Editor, for an open discussion about these new capabilities and the future of web creation at wix. Before we wrap up, we'll have some time to answer your questions live, so be sure to ask them in the chat on the right side of your screen. And now let's get started.

Get ready to create better, faster. Introducing an enhanced editor experience with complex design capabilities right at your fingertips. Use sections to arrange your site and explore alternative layouts. Instantly align all design down to the very last pixel. And let visitors experience your brand just the way you dreamed it. Wix. The possibilities are endless.

I'm so glad that you're finally getting to see this. And now I'm happy to introduce Neria Navia, a few of the brilliant minds behind the editor who will give you a demonstration of all the new capabilities you'll get with this latest version.

Thank you, Yara. Hi everyone. I'm Avija and this is Neri.

Hi.

We're so excited to be here and show you everything we've been working on.

But first it's important to note that this version of the editor, it doesn't matter how you decide to start your site, whether by choosing a template, starting from scratch, or by using the ADI wizard to create a site for you, you will all land in this version of the Editor.

Now, to be able to show you all the new capabilities, we've created a website for an online store. This is a great example to work with because as you know, online stores need to be super dynamic. Their content is constantly being updated and changed and they have to be engaging and focused on driving sales. So, without any further ado, Neri, why don't you get us started?

Thanks, Xavier. Let's start with a quick tour of the Editor workspace. You recognize this top bar where you can manage all your site settings, turn on dev mode, save and publish your site. Here you can see your site's domain and right next to it you can access your mobile editor where you can edit and customize your mobile site. Later on, we'll show you some new features we added there. Here in the left bar is where you have all the building blocks you can add to your site. Either elements, sections or pages. Sections are new and we are really excited to tell you all about them. So bear with us, we'll get to it in a bit. From this bar, you can also manage your business solutions and access your content manager and other tools. And of course, this is the canvas, your space to be creative and build your pixel perfect design by using drag and drop.

So Neri just went over the different building blocks you can add to your site. You already know Pages and Elements, but with this new version of the editor, we're introducing an exciting new one, Sections. Sections are horizontal, full width building blocks that divide your page into meaningful content pieces. We have designed them to help you focus and work on one part of your site at a time. With sections, you'll be able to organize and structure your site's content exactly the way you want to create an engaging and cohesive experience for your visitors. And this concept of sections will enable a whole new set of features and capabilities that we're going to break down for you in this demo. Now let's see how it works. Look at this welcome section. For example. We can see its name here and its quick action bar to the right where you can rearrange, quick edit or get alternative layout suggestions. To better see how sections divide your page, we can use this zoom out mode. It'll give us a better overview of the new page structure where we have our header, different sections and footer.

Now let's take a look at site design. When creating a site for your business, you can. You'll want your site theme to always look aligned and coherent with your brand. Site design allows you to set up and control the theme of your whole site from one place. So when we started this site, we created a unique theme that included the brand's typography and colors. And because I applied this theme, you can see it reflected throughout the whole site. And every component is wired to that theme. So if I change a color here, all the related components will change as well.

And we can also do it for fonts.

Exactly. It works exactly the same way. For those still building their brand. You can always get inspiration from these new featured themes. They were created by our in house design experts and are compliant with accessibility standards. You can take a look through them and find the style that fits your brand the best. So if you want to have a more natural look, you can choose maybe this one. Or if you want to try a more edgy feel, you can try maybe this. But see how they work perfectly with your site and completely change the way it look and feel.

They all look great. But maybe we should switch back to the original theme.

All right. Once you set up a site theme, it's time to tell the brand story and values.

Right.

Because these can really engage visitors and create long lasting relationship. So you want them to be clear, relatable and eye catching. An about section is the perfect place to start. Let's add one from here. I can either add a blank section or a ready made design from any of the categories. Since we're creating an about section, I'll take one from the about. Now keep in mind, these designs are just your starting point. You can leave them as is or edit and change whichever parts you want to make it specific to your needs.

Well, that's exactly what we'll do. Let's start with the title here. Change it to our story. And let's also change the color to something a little bit brighter. Okay. Now I want this section to be more visual. So I'll make some more room by adjusting the section height and remove these two elements. And instead I'm going to add a new strip to this section. Let's adjust the size a little bit. I'll divide it into columns and adjust the margins. Now this will help me create a more complex layout within the section that is adaptable to all screen sizes.

And this is actually why we kept strips in addition to sections.

Exactly. So let's add an image here. Okay. And let's add some color to this one.

I like that it's on Brand.

Now we'll add paragraph here. This is perfect. And let's add also a button. Which later on we can maybe link to the about page. Okay, change the text here. I'll adjust the size. Okay, final touch. Let's add something to make this design consistent, like the vector art that we have in other sections. I'll add vector art. Let's pick something generic and we'll update it to the one that we use in this site. And see that I still have a total freedom to drag and drop any element and put it wherever I want. So I'll put it right here. I think we're looking good.

I love it. I do want this section to really stand out. So I'm going to use our new gradient background capability. I can do that by clicking here and choosing the color option. Notice I have two new tabs, the Gradient tab, where I can build linear or radial gradients and adjust all their settings. Then I have the second tab, which is Fluid Gradients. This is a feature you will not find on any other platform, and it really gives you the ability to go wild with your creativity. You can add unlimited colors, change the way they scatter around the page, and adjust all their settings so you get a unique one of a kind visual. Once you have something you like, you can also save it here in your gradients so you can reuse them later as the background in other components like lightboxes or slideshows. Now I'm going to use something that we previously saved. So now this section is ready for desktop. But as we know, most site traffic comes from mobile, so it's important that the site is compatible for small screens.

Let's click here to go to the mobile editor. First of all, we see that the site is automatically adjusted to fit the mobile screen, including the new section we just created. Now, even though this section looks great, we may want it to look different on mobile, since we know that people interact differently when they're browsing on the go, Right? So for example, here I'd like the text to be a little bit shorter, to be able to see the entire section on any screen. So now, in the same way that you add elements to your desktop, you can also add elements that will appear only on your mobile site. So I can simply hide this text here. It will be added to my hidden mobile elements. Then I'll take this button, move it a little bit lower to make some room, and instead the long text that we had there, I can go to add to mobile and add a new paragraph. Let's Move it down a little bit. Paste in the text that we want. Adjust the size. There you go.

Now, this section looks great on both desktop and mobile, but I have one more thought here. Let's go back to desktop. Now, looking at this site, I want visitors to get to know the brand earlier in their journey. So I'm going to move the about section we just created higher in the page. To do that, I'll just click here on the Quick Action bar. That's it. Now, if you've ever tried to do this before, you probably remember having to drag things around the whole site. But now this allows me to move the entire section up or down with just the click of a button.

Now that we've seen how to create a whole new section, let's talk about updating content. Because once you have created a site, you will want to keep it up to date. Take this promotional section, for example. Special offers are always changing. For that, we've created a new way for you to quickly edit your content.

Right. So with this Quick Edit tool, I can skim through all the elements in the section and change them here on the side without even touching the canvas at all. It will allow anyone on your team to update content without worrying that it will accidentally move something that hurts your design. So here we have our Special Offer section. We want to update the offer to what the store is currently promoting, which is the summer sale. So I'll go here and quickly update the content of the section. I'm going to change the image to our Summer Essentials image right here. Then I'm going to update the title. And text, and the button is fine. So I think I'm going to leave it as is. And that's it. I'm done updating the content.

Looks good. Sometimes, though, when you edit your section content, the layout you originally chose doesn't quite fit anymore. Like here, we chose this image, but with this layout, it's a little bit hidden.

I agree. And this is where our AI comes into play. With one click, I can explore alternative layouts for my section using the exact content in images or elements that are already there. This feature uses WIX AI capabilities to identify the elements within the section and their semantics. Then it suggests beautiful layouts that serve the section's business goal. Let's take a look at these suggestions. So I'm getting all my content with the image and text that I just put in, and I think I'm going to take this design because it really makes the image stand out. That's it. Easy.

Okay, let's talk a little bit about this section. This section here gives visitors a glimpse into the store's collections. This part needs to be dynamic and we need to make sure that with any content added, the style will be aligned. That's why we use repeaters and keep in mind they will seamlessly resize across all screens without any effort on your side. We can also connect repeaters to the integrated cms, but I don't think it's necessary here since we have not that many items.

I agree.

So I want to add another item to the repeater. So first of all, I'm gonna adjust the size, stretch a little bit and fix the margins. Great. Then I'm gonna add another item to the repeater by duplicating the last one, Change its image to our Accessories collection image, And updated text as well.

So accessories.

Accessories. Yeah, that's it.

Great. Now this gives me the opportunity to show another exciting capability, Interactions. These are a new way to easily generate beautiful effects and animations to enhance the visitor experience without writing any line of code. Here in Interactions, we have some pre designed effects which I can customize or I can simply create my own from scratch. And this is what I'm going to do here. So I'm going to drag this item up and take this arrow to the left. And now this design here is what my visitors will see when they hover over this item.

Can we see how it looks?

Yep, we'll do it by going to preview. And this is how it looks for visitors. Notice I designed it once, but it automatically applies to all the repeater items, which is actually why we use repeaters to begin with.

This is pretty amazing. It took you 10 seconds, right?

Something like that.

Okay, so let's recap. We changed the page layout and introduced a new building block, sections which enables you to quickly create, customize and navigate site content both for desktop and mobile.

And on top of that, we added more ways for you to engage visitors with eye catching and interactive design. So with this new editor version,