1. Update Colors and Fonts in Theme Manager
This is the first step and it will make your life so much easier throughout the whole process! It allows you set global colors and fonts, and if you update them, elements get updated across all site.
Make sure to select the font style and color from the Theme Manager for all elements when building the website.
2. Separate Sections Into Strips
This is very important to keep your website easy to adjust for mobile. Make sure you add Strips and add elements inside the Strips.
I usually start with a basic white or transparent strip, and I add columns depending on the design, just make sure all elements gets attached to the strip.
3. Use Boxes and Attach Elements to it
Another trick to reduce your time when adjusting the mobile view. It’s even better if you attach elements to boxes and then attach the box to the Strip. This way you can move the box around while keeping the elements organized.
4. Or Group Elements
If for some reason, it doesn’t make sense attaching elements to a box, at least make sure to aground them and attach the group to a strip. This way, you won’t lose elements when the view gets adjusted for mobile.
5. Pay Attention to Elements Spacing
This is more like a design tip. White space is very important on the overall design of a website. Pay attention to the spacing of elements, strips, header, footer and etc. On some other platforms you can adjust things like padding and margin, however with WIX you have to drag the elements.
Notice that when you drag elements and change the height or width, the numbers are displayed. It’s helpful when making sure that elements have the same overall spacing.
6. Adjust the Mobile View BEFORE Duplicating Blocks or Pages
I usually create blocks that are used across different pages, such as subscribe blocks, testimonials blocks and etc. I also duplicate pages often, especially when creating categories or portfolio pages.
If you adjust the mobile view before duplicating, the new page will carry the mobile styling, so you can just edit the content, background images, colors and etc.
7. Always Check the Mobile View After Updating Anything
Every time. If you move anything on the desktop view, add or remove elements, make sure to check the mobile view.