Tutorial: How to Build Your First Website Using Wix (Step-by-Step Guide)
Wix is a pretty intuitive website builder. But because it offers a ton of options, you could easily feel a little overwhelmed when you use Wix to build your own website for the first time.
If you are looking for a tutorial to create a Wix website, this guide is for you.
In this guide, Iâ€™ll introduce you to the Wix dashboard and show you how it works. Weâ€™ll also see the different settings and steps you need to do to publish a shiny new Wix website.
Ready?Â Letâ€™s begin.
Step 1 – Signing up for a Wix account
Wix offers five premium plans. Choose the one that best suits your needs.
|Form Builder App||Yes||Yes||Yes||No||No|
|Site Booster App||Yes||Yes||Yes||No||No|
|Online Store||Yes (Sample)||Yes (Sample)||No||No||No|
|Email Campaigns||Yes, 10/month||No||No||No||No|
For newbies, I'd recommend starting with the Wix Combo plan and then upgrading as your site grows. For businesses, go with the eCommerce plan as it allows you to set up an online store.
Wix Premium Plans (Combo – VIP) are always recommended because they offer many benefits including the ability to connect your own domain, remove Wix advertising, as well as offers extra bandwidth and storage space.
Here are some samples of websites built using Wix.
We regard Wix as one of the best website builders but keep in mind that there's always pros and cons with every tool. For example, there have been mentions of both a love for the ease of use as well as it is being too limited in some ways.
What Wix does well:
Users who gave Wix a positive rating were happy with how intuitive the Wix system is. The drag-and-drop interface is easy to use and allows businesses to create websites without coding knowledge.
What Wix does not do well:
Negative Wix reviewers complain about its slow servers. Websites created with Wix sometimes do load slowly and are thought to not be very SEO friendly, which means websites made with Wix may not show up highly on search engine results.
Step 2 – Create withÂ Wix ADI or Wix Editor
Wix offers two methods to create a website – Wix ADI and Wix Editor.
Wix ADI (or Wix Artificial Design Intelligence) is a unique tool that harnesses the power of A.I. – all you need is to provide some basic info (such as the type of your business and site name) and the system use that information to build a site automatically. Wix Editor on the other hand allows you to create a website from scratch using a drag-and-drop builder.
In this walk-through tutorial, we demonstrate how to build a business website using both options.
Option #1: Create a website using Wix ADI
To build with Wix ADI, clickÂ â€˜Start with Wix ADIâ€™.
Wix will then asks for the kind of business website you want to build and suggests some basic options. If you arenâ€™t sure about the kind of website you want to make, just input some keywords and Wix ADI will do the magic.
When you specify your business website's nature, Wix ADI asks for the desired set of features on your website. Here, you need to think about all the things you want to be able to do with your website.
After learning about the desired features of your website, Wix ADI prompts for the websiteâ€™s name.
For the sake of this example, Iâ€™m naming our website â€˜BuildThisDigitalMarketingâ€™.
Wix ADI will then prompt you for more business information like the business address and other details.
Give Wix ADI as much information as you can because it will use this information to fill out the relevant sections on your website (like your websiteâ€™s footer and contact page.)
Finally, after youâ€™ve given all your feature preferences and information, Wix ADI will be ready to build your website.
On the next screen, Wix ADI asks for your color scheme preference.
With the preferred color scheme, Wix ADI is now ready to work on the websiteâ€™s homepage.
In about a minute or so, Wix ADI should be ready with your website.
Example: Site I created using Wix ADI
For your reference, here's the homepage I created using Wix ADI:
To be honest I was not exactly a fan of the design WIX ADI created for me.
In fact, I wouldnâ€™t ever use it.
But you should know that this design is not final. You can add new sections to it. The colour scheme and elements can also be changed. It can even be redesigned from scratch.
Anyway, letâ€™s forget the design for a second and see what else the Wix ADI program has done for this website. For example, letâ€™s see if Wix ADI at least chose the right pages to add to our site.
To check this out, click on the â€˜Page: Homeâ€™ option on the left panel on the dashboard.
The following screenshot shows the different pages that Wix ADI chose to create for our digital marketing agency website:
The bottom line: Wix ADI is certainly not ready for prime time
As you just saw, although designing a website with Wix ADI was convenient, the results were far from great.
Maybe this was just a one-off example where Wix ADI didnâ€™t quite get it right. Nonetheless, you now get an idea of what to expect from this option.
Weâ€™ll now take a look at the second option of creating a website and that is by using the Wix Editor. This option gives you total control on the look, feel, navigation, features and everything else on your site.
Option #2: Create a site using Wix Editor
To see how the Wix Editor works, assume we're trying to create the same digital marketing agency website as an example.
As you click on it, Wix will again ask you for the type of site you want to build.
But this time, weâ€™ll create the site with the Wix editor because we want to try the editor now. This leads us to next step;
Step 3 – Choose a Wix Pre-built site template
As soon as you click on the â€˜Start with Wix Editorâ€™ button, youâ€™ll be directed to various templates.
As you can see in the following image, Wix is already highlighting a number of relevant templates in the â€˜Businessâ€™ category.
Not only that but thereâ€™s also a handy search option to help you filter for the right templates (see Wix's pre-built templates here).
Editing Wix pre-built templates
Once you choose a template, youâ€™ll see the full Wix Editor dashboard.
Youâ€™ve 3 key areas inside the Wix dashboard (see highlighted sections): 1) The central part is your website â€“ and as you make changes, you can preview them in real time; 2) on your right, youâ€™ve options that let you delete, duplicate, rotate and adjust the placement of the various elements on your site; and 3) on your left are the building blocks and design options you can use.
Step 4 – Add site elements and functions
Let's also take a detailed look into all elements in building blocks and design options.
1. Website background
If you want to change the background color, all you need to do is click on the â€˜Colorâ€™ option, and Wix will present a colour palette. As you hover over any colour from the palette, Wix will show you a real time preview.
If you prefer an image background, you can either upload your own image or choose from a collection of beautiful images that Wix offers for free.
Not only are the images beautiful but theyâ€™re also neatly arranged into categories.
Likewise, if you want to try a video background, again, you can either upload your own video or choose from one of Wixâ€™s collection.
By making such premium media stock available to you, Wix really helps you build beautiful websites with great images or media.
If youâ€™ve ever tried recreating demos of most website builder templates, you might know how your designs fall flat when compared to them. This almost always happens because of lack of quality imagery, but Wix takes good care of you in this area.
2. Content blocks and design elements
The â€˜Addâ€™ option lets you add design elements to your website. These elements include:
When you add any of these elements, youâ€™ll realize that Wix has paid attention to the â€˜littleâ€™ details.
For example, for our example website, I decided to add a CTA (Call to Action) button to the main menu. So when I clicked on the button design element, Wix showed me several button styles and also handpicked suggested styles that would go with my template. See the â€˜Themed Buttonsâ€™ in the following image:
Another thing to note is that these design elements are completely customizable. In our example, the CTA button I placed in the menu looked a little out of place because it was slightly bigger and the font didnâ€™t match with the default menu font.
But thereâ€™s an easy fix for this. Simply clicking on an element opens its design toolbox. Once you click on the paintbrush icon, youâ€™re presented with a host of customization options:
To match our CTA button with the rest of the menu, we could easily change its font as well as size. This is enough to make the newly added element look like a part of the design.
If you compare these design tools to those offered most other platforms like Squarespace, youâ€™ll notice that there are more elements with 100's of styles and customization options for each here. Wix has way more than what most other site builders offer.
3. Website functions via Wix App Market
The â€˜Wix App marketâ€™ is a repository with lots of third-party and Wix-native apps that let you extend your siteâ€™s functionality.
If you just want to build a basic website, youâ€™ll not need any additional apps because Wix covers almost all the features and functionality you might need.
However, there may be times when you need features that arenâ€™t present in Wix right out of the box. Or, you might want to extend your website or add some marketing power to it. For all such times, just head on over to the Wix App Market.
A lot of apps are free and there are some premium ones as well.
While the apps you add will depend on your needs, there is one which I recommend and that is the â€˜Wix Get Subscribersâ€™ app. You can use it to add signup forms and popups on your website and build an email list super-fast.
4. My Uploads
The â€˜My Uploadsâ€™ section in Wix is like your personal image gallery. This section contains all the visual files you've uploaded to Wix like images, video, audio, and others that you can add to your site.
5. Wix for Blogging
If you like, you can add even more elements to this page. Just use the â€˜Add Blog Elementsâ€™ option from the â€˜Blog Managerâ€™ menu:
The “Add Blog Elements” option lets you add different elements to your blog page like:
- Disqus comments
- Facebook comments
- Custom feed
- And a few more.
In addition to these elements, this section also recommends some Wix apps that can add more power to your blog.
Wix pre-populates the blog page with dummy posts, so updating it with your content becomes much easier.
The â€˜Bookingsâ€™ option can be helpful if you want to offer consultation or other things that require a booking system.
That covers all the options on the left panel as well the Wix editor in general.
Step 5 – Publish and go live
Your website is now ready for publishing. Before you click the button in the top right corner to publish your first Wix website, you can preview it. Make sure you are happy with every part of your website before you click “Publish”. Once you hit that button you will see your domain name appear in the popup. You can choose to connect your Wix site to your own domain (by pointing your domain name servers to Wix) or leave it on default.
Your Wix site is now officially live!
Manage and update your site using Wix Site Manager
When youâ€™re done with designing your website, you can access your site settings from the â€˜Siteâ€™ menu option:
Options under Wix Site Manager
The domain setting lets you connect a custom domain and add a customized favicon to your Wix website. However, you need a Wix premium plan to do this.
The SEO settings let you add custom tracking and other code to your website. You can add tracking code for Google Webmaster tools, Bing Webmaster Tools, Twitter Cards, Pinterest Verification and more*. Learn more about SEO basics here.
This setting just ensures that youâ€™re running a mobile-friendly website.
Language & Region
One great feature about Wix is that it helps you create localized websites right out of the box. Under the â€˜Language & Regionâ€™ setting, you can specify the language of your website.
Under the â€˜Business Infoâ€™ setting, you can add details like your business name, address, email and more.
The â€˜Socialâ€™ setting lets you add your Facebook profile with your site. (Iâ€™m really curious as to why only Facebook is included here!)
Unlike some website builders, Wix doesnâ€™t have its own visitor or site metrics tracking system. For tracking purposes, Wix integrates with Google Analytics so you can add your Google Analytics script here.
Roles & Permissions
Wix allows you to add multiple users to your website and supports different user roles like a blog contributor, editor, admin, and so on.
* Additional note on SEO settings:
A very interesting Wix SEO tool here is SEO Wiz. SEO Wiz helps sites with on-page SEO.
Wrapping it up
This is probably as much as you need to know to start your website with Wix. I have covered Wix ADI, the Wix editor, and the various site settings available.
Good luck with your first Wix site!