Web Development Tutorials Web Design: Wix: Tutorial 1-3A

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.
Setting Up Your WiX

Steps Away from Launching Your WiX
Starting Out
Creating an Account
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
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.
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.
Step 3: Select a Category

- Select a category that reflects your business the best.

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.
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
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.
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
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.
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.
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.
14
Editing the Template: Add-Ons (Text & Image)

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

15
Editing the Template: Add-Ons (Gallery)
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
16
Editing the Template: Add-Ons (Gallery)

- Click on the image to view the option menu.

STEP 2
Grid Gallery
Use this menu to
organize your images.
17
Editing the Template: Add-Ons (Media)
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
18

- 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
19

- If you want to add music to your website, you need to create a
SoundCloud account.
STEP 2
Settings
Click the Settings
option to add music to
your site.
20
Editing the Template: Add-Ons (Shapes & Lines)
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.
21
Editing the Template: Add-Ons (Buttons & Menus)
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.
22
Editing the Template: Add-Ons (Blog Elements & Online Store)

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.
23
Editing the Template: Add-Ons (Social & Apps)

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.
24
Editing the Template: Add-Ons (Apps)

- 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.
25
Editing the Template: Add-Ons (WiX App Market)

- You can download paid and free apps like YouTube or Site Search.
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.
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.
28
Upgrading Account
Step 2: Upgrade Account (2/2)

- Here is a breakdown of each paid account:
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.
30
In Summary
Steps Away from Launching Your WiX
Starting Out
Creating an Account
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
31

Web Development Tutorials Web Design: Wix: Tutorial 1-3A

Uploaded by

Copyright:

Available Formats

Web Development Tutorials Web Design: Wix: Tutorial 1-3A

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Tutorials Web Design: Wix: Tutorial 1-3A

Uploaded by

Copyright:

Available Formats

Web Development Tutorials

Web Design: WiX

Editing the Template

Upgrading the Account

The Great Waterway: Tutorial 1-3a

Web development platform that allows users to create

Easy to use with no coding skills necessary.

No technical or design experience needed to create

The Great Waterway: Tutorial 1-3a

Setting Up Your WiX

Editing the Template

Step 1: View the Tours

Step 1: Create a Domain

Step 2: Add Pages

Step 2: Upgrade your

Step 3: Design the

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

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 2: Create an Account

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 3: Select a Category

The Great Waterway: Tutorial 1-3a

Starting Out: Creating an Account

Step 4: Select a Template

Paid Templates are

The Great Waterway: Tutorial 1-3a

Editing the Template

Step 1: View the Tours (1/2)

The Great Waterway: Tutorial 1-3a

Editing the Template

Step 1: View the Tours (2/2)

The Great Waterway: Tutorial 1-3a

Editing the Template: Page

Step 2: Add Pages

Use this function to navigate through the pages in your

Editing the Template: Design

Step 3: Design your Website (1/2)

The Great Waterway: Tutorial 1-3a

Editing the Template: Design

Step 3: Design your Website (2/2)

The Great Waterway: Tutorial 1-3a

Editing the Template: Add-Ons

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

Add elements are

Only use these features

Click this button if you

The Great Waterway: Tutorial 1-3a

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

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

The Great Waterway: Tutorial 1-3a

Editing the Template: Add-Ons (Gallery)

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