Web Development Tutorials

Web Design: WiX

Tutorial 1-3a

Agenda
Schedule
1

Introduction

Creating an Account

Editing the Template

Upgrading the Account

Conclusion

The Great Waterway: Tutorial 1-3a

Introduction
What is WiX?

Web development platform that allows users to create

professional HTML5 websites and mobile sites.

Easy to use with no coding skills necessary.

WiX provides hundreds of website templates and drag
and drop options.

No technical or design experience needed to create

a beautiful online website.

The Great Waterway: Tutorial 1-3a

Setting Up Your WiX

Steps Away from Launching Your WiX
Starting Out
Creating an Account

Editing the Template

Upgrading Account

Step 1: View the Tours

Step 1: Create a Domain

Name

Step 2: Add Pages

Step 2: Upgrade your

Account (Optional)

Step 3: Design the

Website

Step 3: Set Up Payments

Step 4: Include Add-Ons

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 1: Access the WiX Website

Start Now
Click this button to get
started

STEP 2
Click Start Now on the home screen in order to start
designing your website.

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 2: Create an Account

STEP 3
- Fill out
anaccount
account.
Youthe
willrequired
be asked information
to sign in withtoancreate
existing
or create a new
account in order to begin designing your business's website.

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 3: Select a Category

- Select a category that reflects your business the best.

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 4: Select a Template

- Choose a template you love and click edit.

Paid Templates are

available
Its recommended that
you buy a paid
template since it will
help differentiate your
business from your
competitors.

The Great Waterway: Tutorial 1-3a

Editing the Template

Step 1: View the Tours (1/2)

- Click the Quick Start button to view tours.

Quick Start
These interactive tours
will help you navigate
through the editing
process

The Great Waterway: Tutorial 1-3a

Editing the Template

Step 1: View the Tours (2/2)

- Use the toolbar and the website builder to edit your website.

Toolbar
Click on each icon to
understand what they
do.

Website Builder
Use these functions to
customize your
website.

The Great Waterway: Tutorial 1-3a

10

Editing the Template: Page

Step 2: Add Pages

Add Page
Click this button to add
pages to your website.

-
-

Use this function to navigate through the pages in your

website.
You can add, delete, and reorder pages
The Great Waterway: Tutorial 1-3a

11

Editing the Template: Design

Step 3: Design your Website (1/2)

Background Function
If you do not like the
default options, click
this button to upload
your own background.

Design
This function focuses
on the aesthetics of
your website. Click
each heading to
explore their options.

The Great Waterway: Tutorial 1-3a

12

Editing the Template: Design

Step 3: Design your Website (2/2)

Colours
Pick a colour palette
for your website.

Fonts
Choose a font scheme
for your entire website
or for separate text
boxes.

The Great Waterway: Tutorial 1-3a

13

Editing the Template: Add-Ons

Step 4: Include Add-Ons (1/13)

- The Add function has 11 Add-Ons: text, image, gallery, media, shape
and lines, buttons and media, blog, online store, social, apps, and list
builder.
- The Add-Ons provide you with the opportunity to easily attach
additional features and enhance your website.

Add elements are

optional

Learn More

Only use these features

if they benefit your
website.

Click this button if you

want to learn more
about the different
elements.

The Great Waterway: Tutorial 1-3a

14

Editing the Template: Add-Ons (Text & Image)

Step 4: Include Add-Ons (2/13)

- Text function lets you add text to your website.
- Image function allows you add images and clipart.

The Great Waterway: Tutorial 1-3a

15

Editing the Template: Add-Ons (Gallery)

Step 4: Include Add-Ons (3/13)

Grid
Click here to display
your images in Grid
Style.

-
-

Gallery function lets you choose how you want your

pictures to be organized
Above is an example of a Grid Style gallery
The Great Waterway: Tutorial 1-3a

16

Editing the Template: Add-Ons (Gallery)

Step 4: Include Add-Ons (4/13)

- Click on the image to view the option menu.

STEP 2
Click Start Now on the home screen in order to start
designing your website.
Grid Gallery
Use this menu to
organize your images.

The Great Waterway: Tutorial 1-3a

17

Editing the Template: Add-Ons (Media)

Step 4: Include Add-Ons (5/13)

Embed link

Video

Include the code for

your SoundCloud
playlist here. The same
applies for a YouTube
video.

Click on this button to

add a video to your
website.

-
-

You can share YouTube videos or embed a SoundCloud

player on your website
Above shows you how to add music and videos
The Great Waterway: Tutorial 1-3a

18

Editing the Template: Add-Ons (Media)

Step 4: Include Add-Ons (6/13)

- Once you include the YouTube link, customize the appearance of the
video.

Video Menu
Click on Change Style
button to personalize
the design of the video
i.e. choose how you
want video to appear
in your website.

STEP 2
Click Start Now on the home screen in order to start
designing your website.

The Great Waterway: Tutorial 1-3a

19

Editing the Template: Add-Ons (Media)

Step 4: Include Add-Ons (7/13)

- If you want to add music to your website, you need to create a
SoundCloud account.

STEP 2
Click Start Now on the home screen in order to start
designing your website.
Settings
Click the Settings
option to add music to
your site.

The Great Waterway: Tutorial 1-3a

20

Editing the Template: Add-Ons (Shapes & Lines)

Step 4: Include Add-Ons (8/13)

Strip
Click on this button to
change the style. You
can also change the
skin in advanced
settings.

-
-

Shape and lines function allows you to add shapes and

lines to design your website or company logo.
Above shows you how to edit your shapes and lines.
The Great Waterway: Tutorial 1-3a

21

Editing the Template: Add-Ons (Buttons & Menus)

Step 4: Include Add-Ons (9/13)

Link To
Click on this option to
link the button to either
a third-party website or
an email address.

-
-

Buttons and menus function lets you add buttons and

menus to your website.
Above shows you how to add a button.
The Great Waterway: Tutorial 1-3a

22

Editing the Template: Add-Ons (Blog Elements & Online Store)

Step 4: Include Add-Ons (10/13)

Click here
This link teaches you
how to create an online
store on WiX. Visit
Tutorial 2-2 for more
information regarding
building an Ecommerce Website.

Blog
If you add a blog to
your website, it will
help you communicate
with your consumers
through a different
medium.

You can create a blog or build your own online store.

The Great Waterway: Tutorial 1-3a

23

Editing the Template: Add-Ons (Social & Apps)

Step 4: Include Add-Ons (11/13)

Apps
Free and premium
apps are available.
Only use these apps if
they add value to your
website.
Social Media Accounts
Share your social
media accounts on
your website so your
consumers can follow
and Like you.

The Great Waterway: Tutorial 1-3a

24

Editing the Template: Add-Ons (Apps)

Step 4: Include Add-Ons (12/13)

- Use the list builder to create detailed lists for your websites.
.

List Builder
Do not use text boxes
to create lists because
it is not efficient nor will
it look good.

Apps
You can find the List
Builder in the Apps
function.

The Great Waterway: Tutorial 1-3a

25

Editing the Template: Add-Ons (WiX App Market)

Step 4: Include Add-Ons (13/13)

- You can download paid and free apps like YouTube or Site Search.

The Great Waterway: Tutorial 1-3a

26

Upgrading Account

Step 1: Settings
Domain Names
See Tutorial 1-1 for
information regarding
creating an effective
domain name.

Site Address
Click here create a
domain name for your
site.

Done
After you create the
domain name, your
account is ready to be
published; click done to
publish.

The Great Waterway: Tutorial 1-3a

27

Upgrading Account

Step 2: Upgrade Account (1/2)

- After customizing your website, click the Upgrade button to receive
additional benefits.

Upgrade
Upgrade your free
account to a paid
account. This step is
optional.

The Great Waterway: Tutorial 1-3a

28

Upgrading Account

Step 2: Upgrade Account (2/2)

- Here is a breakdown of each paid account:

The Great Waterway: Tutorial 1-3a

29

Upgrading Account

Step 3: Set up Payments

- Fill in the necessary billing information.

Payment
Provide your payment
information to process
your account. Review
your information
before you click Submit
Purchase.

The Great Waterway: Tutorial 1-3a

30

In Summary
Steps Away from Launching Your WiX
Starting Out
Creating an Account

Editing the Template

Upgrading Account

Step 1: View the Tours

Step 1: Create a Domain

Name

Step 2: Add Pages

Step 2: Upgrade your

Account (Optional)

Step 3: Design the

Website

Step 3: Set Up Payments

Step 4: Include Add-Ons

The Great Waterway: Tutorial 1-3a

31