WIX Editor X is an enhanced version of WIX with responsive design capabilities that enable adaptive website design. In other words, the layout of the website will change based on the size of the browser window. At BraunWeiss, we use cutting edge technologies similar to Editor X to build a bug-free and adaptive digital presence for our clients. During or digital projects, the BraunWeiss team noticed that there are three crucial elements of Editor X development:
Grid Area Setting
Layout Tools & Stack – Relative positions between elements
Grid Area Setting
To achieve the adaptive design, our team uses the Grid Area Setting as one of the primary tools. This setting is only available in Editor X version of WIX and the major benefits of this setting are:
Sets relative Position of elements
Applicable for all sizes of window
Elements grid settings stay throughout all screen sizes
Can easily be adjusted in different views
As shown in the example video, you can simply apply the grid to the sections with one click. Then by entering the number of columns and rows and setting up the friction size, you can change the relative positions while avoiding drag-and-drops. One important thing to notice is to check your grid setting in different screen sizes to avoid elements going beyond borders. As in the example, the 2X1 grid on desktop view can be changed to 1X2 in tablet and phone view so the elements can be displayed more clearly here.
Layout Tools & Stack
At BraunWeiss, we streamlined this design process to be efficient and bug-free, and using Layout tools and stacking functionalities, our team was able to measure and document our designs properly. Several important points about layout tools are:
Design Settings can be measured and documented easily
Avoid weird elements sizes from drag-and-drop
Easily duplicate design settings
Docking and stacking functionalities are more straightforward in position and margin settings
As the example shows, with the docking and margin settings, we can change the position and size of the elements without affecting other settings. But you will still need to pay attention to the margin setting here and adjust it based on the design. As the system with first set the margins to weird numbers based on the current position of the elements.
More importantly, based on our experience at BraunWeiss, for phones and tablets, big pictures, or large text boxes usually go beyond the webpage borders. As shown in the example, the large image in the phone view is affecting the setting of the button and creates confusion in the settings. So, for adaptive settings, instead of having fixed size (in pixels) and positions, the percentage size, view height, or view width avoids the problem of element overlap.
Different from the animation functionality in WIX editor, due to the adaptive design, some of the animations are not applicable in Editor X anymore. We cannot simply apply the animation to the elements, but it will need more time and research in terms of design.
One walkaround we have at BraunWeiss is to use different elements for the animation. As the example shows, to do the flipping animation for the descriptions, we stacked the content as a picture on the original photo, and apply the Flip-in animation that is available in Editor X. On the other hand, we can also create our animation using this approach.
For more talks like this, follow and subscribe us on Youtube @BraunWeiss MCG.