As a Wix partner, we were invited to the beta phase of a new, promising editor from Wix in March 2020. In addition to the classic Wix editor, with which we have been creating great websites for our customers for many years, Wix has launched an additional WYSIWYG tool ("what you see is what you get") called Editor X to create a professional website.
In this blog article we would like to introduce you to a few interesting features of Editor X and our personal experiences with them. On our page www.wixpert.design you can see Editor X and its power in action!
And of course: Editor X also comes with a convenient drag and drop function. So there is still a handy bridge between website coding and website design.
100% responsiveness (finally!)
Many Wix website designers have been waiting for more responsiveness in Wix. Yes, all Wix websites are fully visible and functional on desktops, tablets and smartphones. The content is displayed correctly on mobile phone websites and can be freely arranged. The text size on mobile phone websites can also be adjusted to the smaller phone screen size in the classic Wix Editor. In order not to overload a website, any elements on the mobile phone version can simply be hidden.
However, the new Editor X has much more to offer here: The entire content (images, videos, copy, etc.) can be manually adapted to any screen size (even pixel-perfectly!). The text size can optionally be formatted into a text size range. In other words: on the desktop the text has a size of 30 px, on the iPad Pro 28 px, on the iPad 25 px, on the iPad mini 22 px, on the iPhone 18 px - for instance. This bandwidth is set once and the text size automatically adapts to the corresponding screen size.
Design by breakpoint
Editor X allows you to design each breakpoint differently. A breakpoint defines the size of a screen. The classic breakpoint sizes are desktop, tablet and smartphone. But other screen sizes can also be styled with pixel accuracy. This enables maximum flexibility and responsiveness.
In practice this means, for example: An important button is red on the desktop version, green on the tablet version and yellow on the smartphone version. In the classic Wix Editor, elements in the mobile version can be changed in size or simply be hidden. In other words: If I only want to display something on the mobile phone, I have a problem with the classic Wix Editor. With Editor X, I can design, color, show or hide elements as desired, regardless of the breakpoint or screen size.
Docking
What sounds like a breakdance move at first glance, is another extremely practical function in Editor X - docking. In the classic Wix Editor, elements can be pinned to the corners of the screen.
Docking in Editor X is similar and allows for elements to be aligned towards other elements (or towards the edge of the screen) based on percentage distance or pixel distance. Of course, every breakpoint, i.e. every screen size, is included here. This enables an all-round harmonious website experience on every imaginable screen size. Very convenient!
Focal points on images
Editor X allows you to define certain parts of an image or video that must always be visible. Think of a promotional photo with a model wearing a watch. The website advertises this watch. Of course, that watch is rarely exactly centered in the picture. If the photo is zoomed or only a certain section is visible on smaller screens, you can tell Editor X to define which part of the image must always be visible. The watch is always in the focus of the viewer and does not move out of the picture. A very clever feature!
Fixed, fluent or sticky?
In Editor X, all elements can be set as fixed, fluent or sticky. This describes the behavior of an element when scrolling on the page. You want a certain photo to be fixed at a certain point or you want it flow as visitors scroll down the page? When flowing, how shall it flow? Until the end or only up to a certain point? This opens up great new opportunities for us as Wix website designers to optimize the website experience for the user to a maximum.
On our page wixpert.design you can see the astronaut with a sticky scroll effect:
CSS grids
CSS is of course not a new web design term. However, it is new in Wix. Editor X makes it possible to work with CSS grids, i.e. to divide a design area into a table with columns and rows in order to ensure even more flexibility and modularity in the design. This also benefits the different screen sizes or breakpoints. Another aspect for 100% responsiveness.
The teething troubles
Like so many "new" inventions in the IT world, Editor X comes with a number of teething problems. A few features do not yet work 100% smoothly in live mode.
Another minus: some functions that are known from the classic Wix environment are not yet integrated in Editor X. This is a major shortcoming, especially when it comes to multilingual websites. It is currently only possible (as of April 24, 2021) to create a website in several languages with spending many extra hours (thus, extra money for the client).
The Wix Developer Team "is working hard" to get rid of these teething problems in Editor X accordingly. And even if the performance is not yet 100% mature and some things still need technical improvement, the Editor X is a very powerful tool for creating great websites.
Editor X has of course many more amazing features to offer. This blog article gives you just a brief overview and introduces you to the features that we like very much in particular.
Do you fancy a website with Editor X? Book your free call now to start your website project: