Wix.com is a free online tool you can use to create a website, with hundreds of fully customizable templates to suit your every design need. Presentation is everything and these eye-catching templates require little aesthetic adjustment; however, endless options make the site uniquely yours. There is no coding involved — Wix provides a user-friendly interface compatible with any level of design experience and is fun to use.
Designing Your Website Using the Wix Editor
No matter what type of website you wish to design, Wix offers templates that work to compliment businesses, personal portfolios, blogs, non-profit organizations, and more. A select few templates are priced under "eCommerce" and are directed toward business owners. This simply means that the premium eCommerce plan must be purchased in order to access Wix's online store; however, all templates are free to edit. Additionally, blank templates are available for complete transformation.
For the sake of this tutorial, I have created a basic sample website in order to demonstrate my experience with the Wix editor. The site features five pages (and one subpage) about hummingbirds including facts and tips for creating a hummingbird sanctuary. For the most part, editing was pretty straightforward. However, despite many of Wix's convenient properties, I did encounter a few difficulties along the way and will note any issues in each step.
Step One — Choosing a Template
You may view the Wix templates as a guest, but in order to edit you must first sign in or create your free account (an easy, one-step process). Upon the first time logging in, the subsequent page will suggest a few website categories (e.g. business, online store, photography) to narrow down template choices to match your needs, or you can click the "view all" option underneath the right-hand box. Wix offers a wide variety of templates, each including particular gadgets, or "adds," for specific website types. For example, online store templates come equipped with the "shopping cart," "add to cart," and "view cart" buttons, although they can be removed if desired. All original templates can be completely transformed into unique designs. Note that I made my site using the "Landscape Photographer" template. For inspiration, the "Explore" option at the top of the Wix website shows off other users' designs. However, only the original templates can be edited. Viewing your chosen template, click "edit this site" to begin.
Step Two — Familiarizing Yourself with the Editor
Once the editor loads, a tutorial video will appear for first time users which can be accessed again at any point by clicking on the top-right question mark. The Help Center offers tutorials for each module.
Here is the Wix Help Center menu: click the “Get Started” link on the bottom to watch the general tutorial video.
Here is a snapshot of the Wix editor:
Below, I describe the editing instruments as the header tool bar (black bar at top), left-side modules (five tabs), and main interface (place where the action happens).
Header tool bar
The header tool bar consists of some basic options that are convenient to the editing process. One can alternate between a desktop or mobile editing view, quickly navigate between pages, search the Wix editor, undo or redo an action, and copy and paste. Furthermore, gridlines can be added or removed and the "Snap to Object" button makes paralleling objects easy. Marginal rulers can be placed for precision and, of course, "Preview," "Save," "Publish," "Upgrade" and "Help Center" are also key functions that constitute the right side of the header.
Left side Modules
Pages This tab allows the user to add, remove, rearrange, or even duplicate pages. Click on the gear icon on each page for advanced options. Under these options one can set a new homepage as well as restrict or hide certain pages. Page transitions are optional and add fluidity to the template.
Design Here you can adjust the background, color theme, and font of your website. There are several preset background images and textures to choose from. Additional color themes and fonts are available. The template remains fully customizable as the user can upload images for individual page backgrounds or lock one image as the entire site background.
Add There are numerous objects available to build your site including text, images, galleries, media, buttons, shapes, and more. These objects can be added with a single click and adjusted within the main interface (discussed in the next section). Images added are especially easy to keep track of; all uploads can be found in one place (the image tray). Users will have access to all of their photos when changing a background or selecting photos for the several galleries to choose from. You can also edit your images directly in the interface, an extremely convenient option for quick touchups.
App Market The Wix App Market offers several free and premium apps that are categorized on the left-hand side of this box. Add a comment system, social networking connections, live chat, additional image galleries, or a shopping cart.
Settings All users can adjust certain settings by clicking on this module including search engine optimization (SEO) and Facebook connectivity. Note that your site address cannot be changed within the editor itself. To do this, click "My Sites" on the Wix website, then "Manage Site." Upgrading to a premium account enables more setting options within the editor. View site statistics, upload a signature icon, or connect a domain to your Wix with a premium package.
Main Interface options
Wix's HTML5 interface is the "play area," or place where more interactive options are available. It is easy to use because one can directly click on any object to adjust its size, add an animation, edit settings, layer over or under other items, and decide which pages will show this selected item. The header and footer can be dragged for adjustment and remain the same for all pages.
Step Three — Using the Editor
The options within the editor are mostly self-explanatory. There are, however, a few elements to keep in mind when editing. The item layering system is a favorite amongst Wix’s many tools, yet you might encounter an issue while using this option that I like to refer to as “layer lock.”
Here I can see that four items overlap my page menu. The adjacent layering icons at the bottom (second and third from the right) can be used to send an item above or behind other objects.
Layering Items
The layering option is a wonderful property of Wix's editor because it makes organization convenient and customizable. The user can click on any object such as the page menu, an image, bit of text, etc. and select "(Number of) Overlapping Items" to examine specific items more closely. Items can be sent forward or backward. However, sometimes pulling forward buried items can be a bit tricky (or glitchy). I often experienced the strange phenomenon of a stubborn object that was clearly hiding; however, the Wix editor told me otherwise. The following image illustrates an example of this layering issue.
When brought forward all the way, as the left layering icon shows (faded), the word “lookalikes” still hides behind “hummingbirds” despite the editor’s indication that it remains on top. This “layer lock” issue sometimes occurs when the “show on all pages” option is checked and can usually be fixed by unchecking the box and trying to bring the item forward once more. However, in this particular instance, that quick fix did not work. Recreating the text completely was the only solution to this issue.
Gridlines
Staying within the gridlines is important for those who seek a mobile-friendly view of their website while maintaining a strong desktop-view presentation. The header tool bar offers the ability to change between desktop and mobile view of your site for a look at the varying displays.
Publishing and Reverting to Old Templates
Saving your website will not automatically present your changes online. Clicking "Publish" is the only way to publicly update your site. You can also restore saved versions of your templates by visiting the main Wix site and clicking "My Sites"> "Manage Site" next to the appropriate template. Next, under "Website Actions," proceed to "Site History" to revert to previous templates.
Additional Help
The Wix Help Center is handy because it includes video tutorials for each tool. In addition, the “Get Feedback” chat icon located on the right side of the editor allows the user to share his or her website with the Wix Team prior to publishing. Wix administrators can post comments (shown as red chat bubbles) throughout the user's website to give feedback and tips.
Learn More
Wix
Sample Text Files
Files you can use to build a test website.
website-sample-text.txt file
Hummingbird Photos
This Flickr search URL displays an Advanced Search for images with Creative Commons licenses which means they’re free to use, certainly to create a test site to try out a service like Wix.com
http://www.flickr.com/search?safe_search=1&license=4%2C5&sort=relevance&text=hummingbird
Test Site on Wix.com
This is the site with photos and text.
http://emelineswanson.wix.com/hummingbird
