How to Make Your Own Wix Website

Online E-Course

Welcome!

Thank you for joining in this E-Course! I've created it for people who are completely new to website design on Wix or anywhere else.  

My goal is to not purposefully overwhelm or confuse you! Each section is organized with written and video content, plus some homework to help you make progress with your own website account.  The How To Make Your Own Wix Website E-Book has some helpful worksheets if you like to get off-line and write out your notes. Analog is good for us creatives! 

 

Move at your own pace. Interact with me or with your classmates when you need help. Use the forum if you have any questions or want to review your own account with the team. We are all learning together! Don't be shy.

About WIX Websites

If you have been wanting a website, but think it’s going to be too difficult because you don’t know any code, or too expensive because you’d have to pay someone to design it for you, THINK AGAIN!

 

I don’t know a speck of web coding, and to be honest, I hope to never learn it! I have created websites on a variety of platforms such as Wordpress, Blogger and WIX. And— I actually enjoyed the process! After researching and trying out several of the online website programs, my favorite is WIX. It offers the most flexibility in deisgn options (I can choose fonts, colors etc) and it’s a very simple and intuitive process.

Wix Awesomeness >

  • You can only edit your Wix website with a desktop computer.
     

  • Wix websites are saved on their cloud server so you can access it from any computer and don't have to worry about back-up versions.
     

  • Wix is always updating their platform so your features are always in sync and don't cause others to malfunction.

Watch the video >  An Inside Tour of a Wix Website

Do This  >

Go to the WIX website and make an account.
Take a look around at the templates section and see if any appeal to you or make sense for your website and creative style.
 

Part 1:

Prepare Yourself For Greatness

ORGANIZING

I won’t speak for every creative, but being organized is not the banner we typically fly. I’m not a big believer in micro-organizing because we aren’t going to continue to do that, and frankly, what we thought was a great, super organized place to put something is often cause for alarm when 6 months later we have no idea what we were thinking. Here is what I suggest is the BARE MINIMUM preparation for you.

Checklist >

___ Website Folder
___ Reference Document
___ Business Statement*

*Put this in your reference document

You Want >  A Website Folder

Start with a digital folder on your computer called “Website”. Many files and images will be specific to your website, so it’s a good idea to pay attention and make copies of files so they aren’t ruined for other formats like print materials.

 

Inside this folder, you will add more folders as you need them; “Branding”, “Web Photos”, etc.

You Want >  A Digital Reference Document

Make a digital document in Word, Pages, Google Notes, or a Mac Note on your computer. This will eventually include your basic branding statements and guidelines, your frequently used links (like your FB link, newsletter sign-up), your Hex color codes, etc.

 

This will make your life SO much easier and your branding messages more consistent throughout all your online and printed marketing platforms.

Business Statement Template >

{Your Business name} makes {descriptive product name} that {feeling verb} {your most typical customer’s} and {solve their big problem}.

You Want >  A Business Statement

You only have 2.5 seconds to get someone to understand what you are going to do for YOUR CUSTOMER.

 

You must, must MUST have a simple and clear statement that includes what your business does or makes PLUS what that product does for your customer. This will be one sentence that sounds like a real person talking (not your final term paper for college).

What does your business do? (the actual thing or service) 

What does it do for your customer? (include feelings) 

What problem does it solve for your customer? 

Some Business Statement Examples

< Stay on Track >

Start your website folder
Start your reference document.
Make your business statement.
 

Your Logo

Your website should reflect your business branding. Branding is the visual communication of your business message through visual marks and colors. It's also the mood or emotion you want your customer to feel when they think of your business. This is also conveyed through the font choices, photography and tone of voice you use. A professional finance company will look and feel very different from a kids game blog. That's branding.

Logo Trends >

Wondering what is trending in logos? This is a good article with some examples of logo designs.
DRIBBLE is another great resource for logo design inspiration.

You Need >  A Logo and/or Business Name

You can absolutely just type your name on your website and use a font that looks good to you. But if you would like something more stylized, or you already have a logo, you’ll be needing a variety of file types and shape formats.

Watch the video >  How To Make A Logo on Canva

What if my logo is my name and is unreadable as a tiny square?

You could use your initials, a photo or a cropped portion of your artwork.

 

How do I save my logo in the different formats?

If you need .png, .pdf, or .jpg files, a website such as Canva or PicMonkey can help you do this. Upload your current digital logo file as new art, and place it in the various templates that match your size needs. Then save or export it in the file format you require.

You Need >  Basic Logo File Types

Web-Ready .png 

Suggested pixel size: up to 1000 px wide with a transparent background.

 

Favicon-Ready .png

SQUARE format. Suggested size is 150 x 150 px. A Favicon is the tiny little logo you see on the tab of a website.

 

Social Account-Ready .png

SQUARE format. Suggested size is 165 x 165 px.

 

Header-Ready .png 

Horizontal shape format, with a transparent background. Suggested size is 1000 px wide.

 

Print-Ready .jpg, .eps and vector file

Suggested size is up to 1000 px wide and 300 dpi.

< Stay on Track >

Create a digital folder and name it "Branding"
Collect your logo files and put them in your Branding folder in a folder called "Logos".
 

Your Color Scheme

Of all the bazillion awesome colors in the universe, I am asking you to choose 2 or 3 that are going to be your business branding colors. You might already have these, but if you don’t yet, then it’s time to commit.

Tip  >  HEX website

One good way to choose a color scheme is to grab an image that you think exemplifies the feeling and tone of your products. This is a website that allows you to upload an image and get the HEX color for it.

Tip  >  Color Inspiration

Design Seeds is a website that shows color schemes with beautiful photos. They are sorted by color, season, subject matter.

Once more, with feeling...

Colors have a pretty significant impact for your branding messaging and the user experience. Soft colors feel soothing, feminine and relaxing. Bold colors are lively & cheerful. Black is sophisticated. This article has some interesting information on colors and what emotions they evoke.

 

Primary Color

Your primary color is usually bold and used to highlight or draw attention to itself (like in a banner or bold text headline). 

 

Secondary Color

The secondary color is more subtle and compliments the primary color. 

 

Text Color

The text color is best when it’s dark and neutral in color, such as black or dark gray.

WEB Safe Color and HEX Color Number
A Hex number is used in HTML, CSS, SVG, and other computing applications to represent colors. If you want to keep your color scheme consistent (and you DO want this) then save the Hex number for your brand colors.

 

Here is an example of a HEX code for Black, White and Red.

The location for changing the Hex color will vary in each application, but usually you can find it in the “more colors” area of your work. 

Watch The Video  >  How to change colors on Wix

< Stay on Track >

Choose your color scheme.
Get the HEX codes for your colors and record them in your
reference document
 

Your Fonts

If there is one area where most people shut down in the decision making, it’s choosing fonts. I’m going to make it a little simpler for you. Choose just 2 fonts.

Tips >

A good font combination is a serif and a san serif font.
Here are some font combinations.

Helvetica Bold

Times New Roman

Cinzel

EB Garamond

LULO CLEAN

Raleway

Headline Font

One that is bold and easy to read quickly.  This can be a display font but choose cautiously.

 

Body Text Font

This should be very readable in paragraph text. No fancy scripts or all capital letters.

 

Web Font Choices

The way the internet and websites work with regard to fonts, is that there is a small selection that are readable on any computer. 

 

Standard Web Fonts

Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, Verdana.

 

Wix has a larger variety of fonts that will work on all platforms. Enjoy!

Watch the video >  How to Change Font Themes in Wix

< Stay on Track >

Choose your branding fonts.
Record these fonts in your reference document.
 

Photographs & Images

Images are essential to communicating quickly and efficiently in a world where reading is unlikely. Gather a series of photographs that represent your products. Start with the basic product image. If you can, also have an image of your product in situ. For instance, a fine art print, framed and hanging on a wall in a very contemporary living room will make a huge impact and sell it lickety split!

Tip  >  Stock Photography

Wix has some AMAZING looking photography available for FREE use on your website. Search by subject to see if there are some choices for your site.

Note  >  Image Names

Naming your website images is an important step in your SEO (search engine optimization). We will review this later in the SEO section of this course. You can also read about that here.

Collect your images

One prominent image will work for your home page. The best image is to choose one with great lighting, color and is your ideal and best selling product. If you sell a service, use stock art of your ideal customer looking satisfied with your service.

 

Image Gallery
This is a fabulous feature to use for your portfolio page. Refrain from inundating your web visitors with every photo of every project you’ve ever done. You will have a chance to show a gallery of your work on a separate page, and you want to show your best work, and the work that you want to continue making. Don’t show something you hate to do, or that you don’t want to do anymore. That’s just frustrating for everyone.

Create a digital folder and name it "Website Images".
Copy the images you're using for your website and put them in
this folder.

< Stay on Track >

 

Part 2:

Get started on your website!

How The Wix System Works

Wix is a basic drag and drop system. It’s best to start with a template and change that to suit your specific needs and tastes. You can change the fonts, colors and basically everything on the template.

Wix Web Building Features

 

Strips

These are organizational segments or sections that can contain columns of text and/or images. They are especially useful in containing a goup of elements that may be moved as a block of information. For instance, you may highlight 3 services you offer in one strip, or have your introductory business statement in a strip with a photograph for the background.

 

Design Elements

Text, Images, Galleries, Shapes, Buttons, Contact Forms, Pop-up Boxes (called Lightboxes), Shops, Blogs and more.

 

Pages

You can add as many pages to your website as you need. These can be accessible by your website menu or hidden and just available to you.

 

Change Everything

Any element can be customized with colors, borders, shapes etc.

Watch the video >  How to Start Your Website in Wix

 

Anatomy of a Web Page

While you will undoubtedly change your website design as you go along and learn what WIX has to offer, just getting the home page started will get your creative juices flowing. Start with a theme that most matches what your needs are and begin to make it your own.

Page through to see the elements of a website.

Each page is going to have these basic funtions:

 

Menu

Links to various pages or content within your website. Your menu can have website links, various pages on your site, and even link to different sections on one site.

 

Header

The top part of the website. The header usually stays the same on every page, and often includes the menu and a logo.

 

Body Content

Images, text and anything that is unique to each page.

 

Footer

The part at the bottom of the website that usually stays the same on every page. The footer often includes a contact button, share buttons, copyright information.

< Stay on Track >

Research some websites and see how they function.
Make a sketch of how you want your website to look.
 

Your Website Home Page

This is the front page of your website. Some call it a landing page. Whatever you call it, it’s the page someone lands on when they use your website URL. 

 

Your home page, or landing page, is the first and fleeting chance to win over a new customer. You can do this by including a dynamic or stunning image, being extremely clear about what you will do for your customer (remember your business statement?) and then leading your client into action.

Home Page Image

Make this stunning. It can be your artwork, or what a customer looks like when they are using your product, or your product at it’s best.

 

Your Business Statement

The objective of the landing page is to convey your business brand and purpose in 2 seconds. Yep. 2 seconds. 

 

Call to Action

The second objective is to get the visitor to take an action. For example: shop, sign up for an email or class, listen to a song, view your portfolio etc. REMEMBER: Encourage the action step by including the benefits of the action. In other words, it’s better to say, “Get first dibs on products by signing up for the newsletter” rather than just, “Sign up for my newsletter”. 

< Stay on Track >

It's time to get started! Begin working on your home page.
You can do it!
 

Part 3:

Adding Pages & Apps

Other Website Pages

Watch the video >  How Pages Work In Wix

Note  >  Find it

The pages list is accessed from the top Wix menu, on the left.

Here are some pages you may find useful.

Contact Page

This is a simple communication on how to reach you and where you are located.

 

Portfolio Page

You can show off your work with a gallery or slide show. More information on Portfolio pages is in your e-book.

 

"About" Page

A short informational narrative on who you are, or what your company is. Examples and suggestions are in your e-book

 

Social Media Links

Any links to your social media accounts

 

Blog

This is not a separate website, but a page. A blog is an on-going communication or narrative, similar to a journal, that you update regularly. Tips for starting a blog are in your e-book

 

Event Registration Pages

Write up all the details of a particular event or class you are offering.

 

Calendar or Events Page

If you show your products in a variety of shows, or are a musician with a concert listing, use a calendar page to list them all in one place.

 

Resources or FAQ Page

Perhaps you have a product that includes directions, or extra information. Use a separate page to include the additional resources.

 

< Stay on Track >

Research some websites in your field and elsewhere.
Make notes on what pages would make your website useful to a visitor or potential client.

You did it!

Congratulations on finishing this course!

Wix Apps

There is more to a website than a few images and text boxes. Wix websites can have a multitude of additional features that add functionality to your site. In addition to the building blocks, like buttons and anchors, Wix calls these special features “Apps”. Some are designed by Wix and some are designed by third parties for Wix users. Most offer a free and premium option.

Note  >  Find it

The Apps Marketplace is accessed in the Wix menu at the left of your screen. It's the icon that looks like a little shop.

Forms

You may want to include a sign-up form for an email list you’re collecting, or a contact form that a client can fill out and send via email.

 

Forum

Wix offers a beautifully designed forum for chatting with customers or fans.

 

Calendar

You can add a calendar of your upcoming events or workshops

 

Social Media

Include your Instagram feed, Facebook posts, or Twitter feed to your website.

 

Book Appointments

You can have clients sign up for appointments directly from your website.

 

Add A Map

For your location or for directions.

 

Sell Tickets

You can sell tickets to an event you're holding.

 

Wix Lightboxes

Pop-up boxes that help promote a product or action.

< Play Around >

Take a look at the Apps Marketplace.
Add an app to your site and play around with the settings & design.
 

Part 4:

Going Mobile

Making Your Website Mobile Friendly

Over 65% of web visits are from a mobile phone or tablet device. Therefore, your website needs to be accessible on a smart phone or tablet. In WIX, this is easy to do. This is also called, "Responsive Mobile Design".

 

By clicking on the “mobile” icon at the top of the toolbar, you will enter the mobile version of your website. Here, you can adjust images, remove or reduce text or rearrange features so that it’s easy for a web visitor to find what they really need. Any changes you make on the mobile version will NOT affect your desktop version.

Note  >  Find it

The mobile version of your website can be edited by clicking the icon on the upper right of your Wix screen.

Note  >  Preview Mobile

You can preview your site (desktop or mobile) by clicking "preview" in the upper right part of your Wix screen.

Watch the video >  How Pages Work In Wix

Tips  >  Strip Down

• Reduce and edit down your site for the mobile version by “hiding” elements. Your visitors might not have the patience to scroll through to find what they need.

 

• You will need to make mobile version adjustments to every page on your site.

< You've Got This >

Stay strong! You're almost ready to launch your site!
Click here.
 

Part 5:

Search Engine Optimization

Search Engine Optimization

All major search engines such as Google, Bing and Yahoo have primary search results, where web pages and other content such as videos or local listings are shown and ranked based on what the search engine considers most relevant to users. The way to the top, without a big budget to take you there, is to make your website appear relevant to those internet search-bots.

 

You do this by providing context, in the form of keywords, on your website pages, your images, and your online content such as social media and blogging. Adding these keywords will helpl the search-bots find your site before someone else’s, and thus giving you the advantage.

Note  >  

Google will not even show your website in the search results if it's not optimized for mobile.

 

Keywords

Keywords are words or phrases that are used to search for specific content. Keywords are not hashtags. They’re phrases that you would type into the Google (or any other search site) to find information on a specific topic. ind keywords in your niche by typing into the Pinterest search bar. Similar search ideas will come up in the auto-fill section.

Tip  >  

Think about how you would search for your product or service. What words would you use?

Where Do You Find Keywords?

There are several apps and website services (such as Google Adwords) that help you find keywords, but I think it’s easiest to just use the Google search bar. Start with the actual description of your photo, product or topic and start typing into a Google search. Google will offer additional search choices or, “keywords” based on what people most often type in when searching for that subject. 

Find the most popular words and phrases that makes sense for your content and use it. Here is an example of the keyword search I used for Frank’s painting.

< Do Yourself A Favor >

Research your keywords.
Make a page of keywords and put it in your resource folder.

Image SEO

How do you add SEO to web images? It’s not too tricky and well worth the effort because your photos are the most likely to be seen by the Google-bots and lead people on a bread-crumb trail to you. I’ll show you some easy tips on how to add SEO to your images. Don’t worry! You don’t need to put this much work on all your images. Just focus the photos that are key to the content on your website (such as on your home page).

Note  >  

Google will not even show your website in the search results if it's not optimized for mobile.

Note  >  Don't Freak Out

Don’t worry! You don’t need to put this much work on ALL of your images. Just focus the photos that are key to the content on your website (such as on your home page).

Image Naming

It is very important to name your photographs something other than your camera’s default setting, such as “DCS22957”, or your random title of the day. An image that is surrounded by related text, ranks better for the keyword it is optimized for.

 

How to choose the right image name

Use keywords that describe the basic visual content of the image so that the Google-bots know what it is without seeing it. Frank named this image “phoca_thumb_l_floral abundance low”. The Google-bots just gave up after reading “phoca” because, well, what even is that?

 

First, Describe the Photo

Use keywords to describe the content of your image. The main keyword is ideally the main subject of the photo, that is why it’s at the beginning of the file name. Be brief!!

 

Next, Use Descriptive Search Words

Use additional keywords to draw someone searching to your work or image.

 

Last, But Not Least

The name of the company or your name should be last in the string of words. It’s a good idea to include a copyright too, because that helps the honest people stay honest, right?

 

So, with all that SEO knowledge, Frank could name his image something like this: 

Abstract-floral-art-painting-Floral-Abundance-by-Frank-Satogata-©2017.jpg.

Watch the video >  How To Name Images In Wix

< Stay With It >

Go into your folder of images and change their names to something more SEOed.
Check your website home page and change the names of those images too.
 
 

Adding SEO to Your Web Pages

In Wix, it’s easy to add SEO to each page. There is a template that will walk you through the sections for naming the page, describing the content and adding keywords.

Watch the video >  How to Add SEO to Your Pages In Wix

< Stay Focused >

Add SEO to each page on your website.
 

Part 6:

5...4...3...2...1...

All Systems Go!

Launch Your Website!

You're ready! Or at least your first version is ready. The reality is that your website will change and grow as you do. But here's what's awesome: You'll be tweaking, adding, editing and changing your website because you know how to do it. You worked hard to learn this Wix program and the world of websites and now you have the power to control your own creative entrepreneur destiny.

Tip  >  Hosting

Wix hosts your website. 

 

You own your domain name.

Publish Your Website

The "publish" button is in the upper right section of your Wix website. This will make it available to the internet world at large.

Publish for Free with Wix ads

Pay to Publish

You can remove any trace of Wix-ness from your site and have your own unique URL (web address) by paying the first level of premium hosting. You can choose to host your site through Wix or...

If You Already Have a Web URL/Domain Name

You can redirect that URL to your Wix website. This is done in the "manage site" selection from the "Site" menu at the top of the Wix page. They will walk you through the steps.