Optimize Page Layout for Mobile Devices Maintain Order of Elements WYSIWYG

After editing your Wix website, it is always useful to use the 'preview' option to see exactly what your users will see. Website designers generally use relatively large desktop screens for creating and editing their site. When switching to the 'preview' mode for desktop users, they are likely to experience the site precisely as it appeared within the 'editor' view. 

However, the 'preview' option for mobile devices can look alarmingly different. This is particularly true for cases in which you combine, alternate and overlap elements on single pages. For instance, if you create a 'Wix form' which allows for nothing other than response boxes, you may want to also create spaces among the response boxes to insert elements like text, images and media in a meaningful order. However, the default 'mobile' view is likely to change your desired order of all these different elements. For instance, it may group all of a single element type together. So, it may display the elements in clusters at a time of all of the response boxes, then all of the images, text boxes, media and so on. 

This post provides the steps to quickly format the page layout to display elements in the order you intent, for all users, ie regardless of their type of device, whether desktop or mobile.

These instructions assume that you are in the 'editor' and 'desktop' preview mode.

• Click 'Preview' (in top right corner of the page in the editing mode). This allows you to see what your site will appear to your site's visitors.
  
• Click 'Mobile' (to the left of the 'preview' option)
• Select 'Switch to Mobile'
• Click the 'Page Layout Optimizer' icon (that looks like a set screen split into frames from among the icon menu that appears next to the preview display. See image below)
  
• Scroll through the page. The elements should be distributed according to the way you have arranged them.
• Repeat this process for each page.

CONTENT RELATED TO OPTIMIZE A PAGE LAYOUT FOR A A WYSIWYG PAGE DISPLAY LAYOUT FOR MOBILE DEVICES IN WIX