How to Make a Website with WIX
A Simple, Step by Step Guide for 2019

 

Dale McManus

Co-Founder & Web Developer

Apr. 20, 2019

 

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites. In this written guide, we’ll cover everything you need to know about using Wix to make an awesome website. Let’s dive in!

  • Level of Expertise:
    Beginner
  • Time To Complete:
    15 Minutes
  • What You Get:
    A Working Website

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, here’s the Wix tutorial video:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

Alright guys so in this post we’ve got a tutorial on how to use wix to make a website.

We’ll show you how to change fonts and colors, make sections and buttons, add videos, setup your header menu and footer, make a contact form so visitors can email you…

Basically everything you need to know about how to make a wix website!

We’ve got a ton of ground to cover so in the words of everyone’s favorite news Youtuber, let’s just jump into it!

How to use wix tutorial

Sign Up to Create a Free Wix Account

Alright so the first step is to simply sign up for Wix.

If you use that link above we actually make a bit of commission (no extra cost to you) as a kind of thank you for the tutorial; no one pays us to make these posts and videos so commissions like that are what fuel our ramen addiction

But if you don’t like us and don’t want to use it just head to their site and we’ve still got your back with this tutorial because that’s the kind of people we are.

Either way, get over to Wix and click the start now button. It’ll ask you to sign up, fill out your details and then hit that big Sign Up Button (because signing up is what we’re doing here!).

Choose a Wix Template (Or NOT)

So now Wix will ask you a bunch of questions you don’t really need to answer since you’re following our how to use Wix tutorial here so you can just skip it and save some time.

From here you’ll be taken to a page that offers to create a site using “Wix ADI” – basically building a site automatically based on your responses to the questions we didn’t answer.

SO we want to choose the “Create Your Website with the Wix Editor” option by clicking that “choose a template” button.

Boom, here you’ll see a lot of cool templates, they’ve got tons of great options to choose from but for this Wix tutorial, we’re going to start from scratch so you can learn how to use Wix without a bunch of distractions from shiny awesome pre-built website stuff.

So scroll up the left side menu to find “blank templates” and click the one that says “start from scratch” then “edit.”

Skip the tutorial because we’re doing one here (ours is more in-depth if we may be so bold).

Now we’re inside the Wix web builder.

Using the Wix Website Maker

So really quick let’s go over the interface so you know what everything is.

At the top, you’ve got your current page (“Home”) and when you add more pages you’ll be able to switch to those here.

If you need to add a page, click on the menus and pages button then add a page.

Going back to the top menu, here you’ve got a few more options/tools:

  • Desktop/Mobile views (more on this later, with over half of global internet traffic coming from mobile devices we definitely want to make sure your site looks good on phones).
  • Save, Preview, and Publish Your Wix website.
  • A bunch of other settings (we usually don’t touch these – to start at least).
  • Tools for toggling rules, grid lines, stuff you use when Wix to create a website.
  • Code – don’t worry about it
  • Help – don’t worry about it, we’ve got you
  • Upgrade – more on that later.

Creating Your Wix Website Design

Alright now to the meat and potatoes (kale and potatoes for our vegan friends out there).

Customizing your Wix website design!

For this Wix tutorial, we’re going to make a generic “lifestyle” brand because everyone loves “lifestyle.”

Sections of Your Wix Editor Pages

So you’ve got a few sections to play with here.

The header is at the top, that’s where your navigation menu will go (see below). The main “page” section is where you’ll put all the images, content, “main sections” of your site, then the footer is down at the bottom “where feet go.”

To start we’re going to add some awesome sauce to the main “page” section.

Adding Backgrounds

So we’re going to start by adding a background by clicking the add button, going down to “Strip,” then picking the style we want for our Wix website.

For this tutorial, we’re going to go with this one that has a little camera symbol, which means the background actually moves.

Click it to add then it’ll automatically appear in the page section.

Then we dragged it up into the header because we’re going to make a semi-transparent header that’s going to go over the top of the page section.

Changing Text

Now to change text just double click it.

From here you can:

  • Write new words.
  • Move the text around
  • Change the font size
  • Change the font color
  • Change font (eg Times New Roman, Ariel, or something way cooler than those because this isn’t a high school English paper)

If you’ve ever used a word editor like Microsoft Word or Google Docs, it’s basically the same thing.

You can also add effects like drop shadows which is pretty cool too.

Changing Buttons

With our text all spiffy let’s spruce up this button, so as with the text just double click and we can make some sweet upgrades using the “button settings” like:

  • Changing Text
  • Adding links (to other sites, other pages on your site, emails, phone numbers, anchors on this page of your site – more on the last one later).
  • Making button links open in new window

Once we’re done with that, we can use the little paintbrush to change up the design.

Here you can switch up things like:

  • Kind of button (tons of options here)
  • Button color
  • Button hover color (what color the button changes to when you move your mouse over it)
  • Transparency
  • Borders
  • Round your button borders

We kept ours pretty simple and clean but looking fly:

Adding Sections

Alright, off to a good start but we need some more sections, we’re going to do an About Us because “lifestyle” is all about people and their stories.

So back to the left sidebar, click add again, all sorts of options here but we’re going to stick to the strip because it’s got pretty awesome pre-built stuff for us to play with.

Again, just click the thing you want and it’ll automatically get added below your existing section (our “lifestyle brand” section).

You can also click and drag, which works great for things like shapes (we’ll do one of those later on).

Changing Background Colors

The strip we chose is cool but that green isn’t on-brand for us, so to change it we just click on it then click on “change column background” then select color

You can also add video or image backgrounds, either using free stuff Wix provides or by uploading your own images and videos.

Image Settings

Just like everything else in the Wix website creator, just select an image and you get some settings to do things like add effects and animations or add background colors to darken or lighten the image or just give it a nice hue.

Adding Images and Videos from Wix’ Free Gallery

Continuing to build our page, we added a services section but it came with this blue background that just wasn’t on point with our vision so again, double click and we can change it up.

This time we’re adding a video, so from the background settings we selected video then over to “free from Wix” to grab something awesome and free and no videography work required.

All sorts of awesomeness here, pick what you love.

We found a pretty cool guy running in a field vid but it kind of washed out our text, that’s where overlays come in.

Adding Image and Background Overlays

To add an overlay to make text stand out a bit better, go to settings when you’ve selected a video/image/background color.

You can do a pattern if you want but we want to keep things simple so we just left that as none then choose a gray color we liked and set the “opacity” (how transparent it is – 100% would be all color and no image/video) at 75.

Boom!

Adding Shapes

While we’re at it, let’s add a shape – back over to the add button on the left side, select shape and for us, this triangle is kind of cool.

But it needs to be a bit bigger and maybe upside down because we could all be more upside down, click on the image and you’ll get familiar little white dots to drag and change the size and a rotate button you can use to flip tha script (shape).

Moving Things Forward and Back in Layers

If for some reason this shape or another part of your site was behind, you can right click on it and go to the “arrange” option to move things forward and backward in “layers” on your site.

Adding/Modifying Social Links

For our meet the team section, we picked one with a social bar, which we can actually change to whatever we want (it started out with just LinkedIn).

So we just click on that social button then click “set social links.”

You can then click “add icons” to select free ones from Wix.

Once you pick the right icon for the social media site you’re linking to, with the right look for your site, you can just add a link to your profile (we went with Insta).

Adding Contact Forms

Our pages is just about ready, need a way for people to contact us though.

We went with a strip that had a form in it, but you can add forms by themselves to any part of your page.

In our case, background, text and social icons all needed changing – done just the way we did it all for sections above!

For the form itself, important to click on it then click “set your email” so that any form submissions get emailed to you.

Side note: if you want a professional email (so instead of [yourname]@gmail.com something like contact@[yourwebsitename].com) we made a separate post on how to get a professional email address for free you can check out!

From here you can set all sorts of options for what form fields (name, email, message, etc) you want to have, and you can click the little * to make that field required.

You can also change what the “submit” button says and what messages appear when they successfully submit or miss a required field.

And as with everything else, use the little paintbrush to change up the design of any/all the contact form elements (field text font/size/etc, field color, any and all of it – that’s the power of the Wix website creator!).

Awesome, now we’ve got the main page of our Wix website created, time to crank out the header, footer, and menus.

Making a Header

So if you click the top/header area it’ll highlight as orange then just click on change header design to make changes.

Here you’ve got all the same options as you did with the sections of the main page, adjust and tweak until you love it as usual.

For ours we also wanted the header to move with us as we scroll down the page, so with our header clicked we then hit the little gear “settings” icon then hit “freezes” to keep the header pinned to the top no matter how far we journey down the page.

From here we want to add things like contact and about us so people can click to go to those parts of our page.

If we had separate pages for each of those sections we could just add a link to those pages, but since we’ve got a one-page design here we need to use anchors to make the page scroll down to the right section when people click on our header menu.

Adding Page Anchors

So to add anchors, once again we head over to everyone’s favorite add button then all the way down to “more” then “Anchors.”

Instead of clicking we’re going to scroll down our website to where we want to add these bad boys then drag and drop them right to where we want them, where the bottom of one section meets the top of another.

Then double click the little anchor tag on your page to give it a relevant name, in our case “About Us.”

After setting up all the anchors for our sections, we need to add those links to our site menu so we can drop links to them in our header.

So we’re going to go to Menus & Pages in the left menu and instead of adding a new page, we’re going to click add a link, select “anchor” and select the right anchor we want this button to go to (About Us in our case).

Hit Done then we can name this “About” (or whatever your section name is).

Rinse and repeat for all our sections then we’re ready to add our header menu.

Creating Menus

So once we’ve got our anchors in place, we’re ready to add our menu to our header.

So head over to our perennial favorite Add button, scroll on down to “menu” and there are a ton of presets we can select from.

For this Wix tutorial, we just went with the standard one at the top, drag and drop over to the header then position to your heart’s content (we did the classic menu-right setup, dragging it over until it snapped and we got that purple line letting us know it’s aligned in the vertical center)

Create and Add Your Logo

[Blog post note]: In the Wix video tutorial we walk through how you can make your own logo for free in 5 minutes, but we’ve already made a separate post for that so check it out here to learn more!

Changing Up Dat Footer

Alright final piece of our basic setup is the footer.

And basically, it’s the same process as the header, just working with the bottom section instead of the one at the very top.

You can do all sorts of things in the footer but some common things to include are:

  • Terms of Service
  • Privacy Policy
  • Social Icons and/or other contact info
  • Copyright notice

Using the Wix Builder to Make Your Website Mobile Responsive

Sweet. Once you’ve set up your basic desktop page, definitely want to make sure that bad boy looks just as slick on mobile devices (it’s where about half of website traffic comes from these days and that’s only growing).

To make sure your website looks great on phones too, just switch to the mobile view by clicking the button up top to see how it’ll look.

Our tutorial Wix website was not so great…

So we went through and fixed it up to get it looking super spiffy.

All the same rules/tools apply here, and any changes you make in the mobile view will only be applied to visitors who come to your site on a phone (everything will stay just as jazzy as it was for your desktop view).

Some things you should check for/fix in mobile:

  • Font size
  • Font alignment and alignment
  • Button size
  • Anchor placement
  • Adding/Deleting Space between page elements
  • Hiding elements to keep things clutter free
  • Mobile Header Menu Size

Upgrade to Wix Premium and Get a Domain Name

That’s basically it!

You’ve got a website, if you’re good with the free version just hit publish and you’re live.

BUT…

We highly recommend upgrading and getting a custom domain name.

With a Wix premium plan you’ve got a lot more options, including things like:

  • Higher/Unlimited Bandwidth to handle all the traffic that comes to your site.
  • High storage to let you have more photos and videos on your site.
  • Removing those clunky Wix ads.
  • $$$ in ad vouchers.
  • Some sweet add on apps that normally cost a decent chunk of change.

And if you choose a 12-month plan you’ll get a free domain name and a discount which is awesome, so if you’re ready to do this website thing definitely go for the 12-month option!

Quick note: if you do grab a Wix premium plan and domain name, we highly recommend getting privacy protection for your domain name.

I made the mistake once of not getting this and got bombarded with five or six spam calls a day – you won’t miss the $10/year.

If you go for the premium plan and domain name, here’s how to set up your domain for your site (so instead of [yourusername].wixsite.com/[yourwebsitename], you can just have [yourwebsitename].com which is way more pro).

Connecting Your Domain Name to Wix

So once you’ve gotten your domain name and upgraded to a premium plan, head back to the Wix website builder, go up to settings and just click “connect domain.”

It’ll ask you if you want to buy a new one but since you’ve got that covered, just click “connect a domain” – just enter your domain and Wix will set up the rest!

How to Use Wix Tutorial: Complete!

So that is how to create a Wix website that looks awesome and can be a great start for your business.

If you found this Wix tutorial helpful be sure to check out our other written guides filled with all sorts of helpful website tips and tricks to help you launch your website!

Sharing is caring!

2 Replies to “How to Make a Website with WIX
A Simple, Step by Step Guide for 2019

  1. This is an awesome post. I am impressed with your work and skill. Thank you so much.

Leave a Reply

Your email address will not be published. Required fields are marked *