How to make your website look better on Wix


The Wix website platform has a loyal following among small business owners due to it's extremely flexible and very intuitive design platform.

Wix is great at letting you do virtually anything you want to do with your web page without needing any knowledge of coding. But there are a few hacks that will make the design process even easier.


Here are some of my top tips to make your DIY Wix website stand out from the crowd.



1. Follow the (literal) guidelines


Wix show a series of dotted lines on every web page that act as a guide as to where you should place your content (turn them on in the "Tools" menu as per the pic below). They adjust per segment depending on the number of columns you're working with.


While you are technically able to place content anywhere on the page, best practice is to keep everything within the lines - not only does it look tidier and more balanced, but it means your content will translate easily onto different sized screens, and you won't have to do as much adjusting when you're fixing up the mobile version of your site.



2. Optimise for mobile


Wix (in my opinion) has one of the best mobile editors of all the platforms. Content is easily moved around to suit a mobile sized screen better, you can hide elements, and text can be sized up or down. The best thing is that unlike some other platforms, all of these adjustments can be made without affecting your main (big screen) design at all.


While the automatic adjustments Wix make for mobile are generally pretty good, you still need to make sure you check the mobile view each time you publish a change. Small tweaks on the big screen can have huge impacts on the mobile one! And mobile responsiveness only works if you actually use it.


Make sure you click through to the mobile view before you hit "publish" to optimise your site.


3. Set your brand elements


The absolute first thing you should do when you're setting up your site is to plug your brand elements in. Regardless of which template you're using, Wix gives you the option to set your own colour palette and fonts which then generate automatically across the site. Doing this before you start designing will save you an immense amount of time, and will ensure that your branding is consistent across the site - while still giving you the flexibility to adjust where you need to.


Wix Theme manager lets you set your brand colours and fonts across your site in one easy step.


4. Make use of the tools at hand


While the toolbar can look quite daunting at first, it's actually really handy. I mostly use it to automatically line up content (both horizontally and vertically), and set sizing of design elements like strips and boxes so that they are consistent across the page/site.


You can also use the rulers to set your own guidelines - say if you're having trouble lining up two elements of content. Once the guidelines are in place Wix will snap the content into line with it when you drag it close.


The Wix Toolbar lets you speed up the design process with easy-to-use sizing and positioning tools for your content.


5. Lay out your content in strips


The "strip" element is what should form the basis of every page you use. Think of strips like the framing for your building. Keeping content contained within strips not only makes it easier for Wix to translate the information onto different sized screens (much like the guidelines mentioned above), but also means you can easily move groups of content around to see what fits best where. Pro tip: Hit the arrows symbol on the top right of the page to quickly zoom out and see the page as a whole. You can easily shift strips around from here by hovering over the strip and arrowing up or down. I often use this feature to get a better idea of how my content is laid out and get rid of big blank areas. Just watch out - if you've overlapped strips it will often move them both as one.


Wix zoom-out mode lets you see your whole page at a glance, and easily shift around large sections of content.


6. Group things in container boxes


In your design elements toolbox on the left, you have both "boxes" and "container boxes" available under "decorative". Using a container box means that whatever you put within that box (text, image, graphics, etc) will then move as a group in that box. It's very handy if you want to shift things around so you're not having to adjust the position of each and every element. If you don't want to use a box you can get a similar effect by dragging the mouse over a set of elements and selecting to "group" them. Just make sure that it's the group that is selected when you want to move/edit them, not an individual element.




7. Don't forget to animate


Much like video is the king of content right now, animation can elevate a website into something special. Wix makes this super easy, with an animation tab on every design element. Use it to make text, images and graphics, fade, pop or scroll across the screen. Don't go too crazy though - stick to one or two types of animation and try and keep it consistent across the site or it will just look messy and confusing.



 

That's it! My top insider-tips for getting the most out of your DIY Wix website experience. If you have any questions about your DIY site project, head on over to my Facebook page and drop me a message - I'd be happy to help!