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.

Features VIP eCommerce Unlimited Combo Connect
Bandwidth Unlimited 10GB Unlimited 2GB 1GB
Storage 20GB 20GB 10GB 3GB 500MB
Free Domain Yes Yes Yes Yes No
Wix Ads Removed Removed Removed Removed Yes
Customized Favicon Yes Yes Yes Yes No
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
Price $24.50/mo $16.50/mo $12.50/mo $8.50/mo $4.50/mo

Get Wix Now

 

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.

adi-or-editor
Two options for creating your site with Wix: Wix ADI or Wix Editor.

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.

wix-adi-step-1
I picked “digital marketing” for this tutorial.

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.

wix-adi-step-2
For our example, we’ll choose all the features Wix suggests except the ‘Take bookings & appointments’ feature.

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.)

wix-adi-step-3

Finally, after you’ve given all your feature preferences and information, Wix ADI will be ready to build your website.

Click on ‘Start’.
Click on ‘Start’.

On the next screen, Wix ADI asks for your color scheme preference.

For our example, I’m choosing the ‘Spark’ color scheme.
For our example, I’m choosing the ‘Spark’ color scheme.

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:

wix website

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:

wix-adi-step-7
As you can see, Wix ADI added a bunch of ‘Shop’ pages to our website even though we were building a business website. I guess these pages got added because we chose the feature to ‘Sell online’. Other than the shop pages, Wix ADI has also added a blog page, which is fine.

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.
Caption: To create a new site, click on ‘Create New Site’ option from the ‘Site’ menu item.

As you click on it, Wix will again ask you for the type of site you want to build.

For this walkthrough too, we’ll choose the ‘Business’ website category.
For this walkthrough too, we’ll choose the ‘Business’ website category.

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).

wix-edit-step-3
Let’s go with the ‘Advertising & Marketing’ sub-category because it looks like the most relevant one for us.
For the template, let's select ‘Advertising and Marketing Firm’.
For the template, let’s select ‘Advertising and Marketing Firm’.

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.

wix-edit-adi-step-5
Wix Editor dashboard.

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

wix-edit-step-6
For a site’s background, Wix supports solid colors, images, and videos.

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.

A free image library from Wix.
Free image library from Wix.

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:

  • Text
  • Image
  • Gallery
  • Slideshow
  • Button
  • Box

  • Strip
  • Shape
  • Video
  • Music
  • Social
  • Contact

  • Menu
  • List
  • Lightbox
  • Blog
  • Sore
  • More

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:

wix-edit-step-8

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.

wix-edit-step-9

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 has apps for possibly all the functions you might ever need on your website. Whether you need to add a FAQ section or a simple live chat widget, the Wix App Market has you covered.
The Wix App Market has apps for possibly all the functions you might ever need on your website. Whether you need to add a FAQ section or a live chat widget, the Wix App Market has you covered.

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 Uploadssection 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:

wix-edit-step-10
The “Start Blogging” option – as the name suggests – lets you add a blog to your website.
As you click on the ‘Add Now’ button, a blog page gets added to your website. If you look at the blog page layout, you’ll notice that it has a (completely customizable) sidebar with useful options like search by tags, a featured post widget, and a recent posts widget.
As you click on the ‘Add Now’ button, a blog page gets added to your website. If you look at the blog page layout, you’ll notice that it has a (completely customizable) sidebar with useful options like search by tags, a featured post widget, and a recent posts widget.
You can add even more elements to this page. Just use the ‘Add Blog Elements’ option from the ‘Blog Manager’ menu.
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
  • RSS
  • Categories
  • 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.

6. Bookings

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:

Under the ‘Site Manager’ settings, you have a host of options for your site’s SEO, social, analytics and more. We will go over each of these options.
Under the ‘Site Manager’ settings, you have a host of options for your site’s SEO, social, analytics and more.
We will go over each of these options.
We will go over each of these options.

Options under Wix Site Manager

Domain

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.

SEO

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.

Mobile

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.

Business Info

Under the ‘Business Info’ setting, you can add details like your business name, address, email and more.

Social

The ‘Social’ setting lets you add your Facebook profile with your site. (I’m really curious as to why only Facebook is included here!)

Analytics

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.

To start using this tool, click on the ‘Let’s Go’ button from the SEO panel option. When you start optimizing with the SEO Wiz tool, it will first ask for some business information. Once you provide it, you’re asked to input about 5 keywords that you’d like to optimize your website for. Just input your keywords and click on the ‘Create SEO Plan’ option. As soon as you do so, you’ll be presented with a checklist with steps to make your site search engine friendly.
To start using this tool, click on the ‘Let’s Go’ button from the SEO panel option. When you start optimizing with the SEO Wiz tool, it will first ask for some business-related information. Once you provide it, you’re asked to input about 5 keywords that you’d like to optimize your website for. Just input your keywords and click on the ‘Create SEO Plan’ option. As soon as you do so, you’ll be presented with a checklist with steps to help make your site search engine friendly.

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!

 

* Translation: EN ID