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

Web Development Tutorials
Web Design: WiX

Tutorial 1-3a
Agenda
Schedule
1 Introduction
2 Creating an Account
3 Editing the Template
4 Upgrading the Account
5 Conclusion
The Great Waterway: Tutorial 1-3a 2

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 No technical or design experience needed to create
and drop options. a beautiful online website.

Setting Up Your WiX
Steps Away from Launching Your WiX
Starting Out Editing the Template Upgrading Account
Creating an 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 Step 3: Set Up Payments

Website
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
Youthe
willrequired
be asked information
to sign in withtoancreate anaccount
existing account.
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
It’s recommended that
you buy a paid
template since it will
help differentiate your
business from your
competitors.

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

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.

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

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.

Editing the Template: Design
Step 3: Design your Website (2/2)

Colours
Pick a colour palette Fonts

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

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
Only use these features
if they benefit your
Learn More website.
Click this button if you

want to learn more
about the different
elements.

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

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


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

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.

Editing the Template: Add-Ons (Media)
Embed link
Include the code for

your SoundCloud
playlist here. The same
applies for a YouTube
Video
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


-  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
STEP 2 want video to appear
in your website.


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

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.

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.

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 E-
commerce 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.

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.

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.

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

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

Upgrading Account
Step 1: Settings
Domain Names
See Tutorial 1-1 for

information regarding
creating an effective
domain name.
Site Address
Done
Click here create a
domain name for your After you create the
site. domain name, your
account is ready to be
published; click done to
publish.

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.

Upgrading Account
Step 2: Upgrade Account (2/2)

-  Here is a breakdown of each paid account:

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.

In Summary
Steps Away from Launching Your WiX
Starting Out Editing the Template Upgrading Account
Creating an 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 Step 3: Set Up Payments

Website
Step 4: Include Add-Ons

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

Uploaded by

Document Information

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

3 Editing the Template

4 Upgrading the Account

The Great Waterway: Tutorial 1-3a 2

Web development platform that allows users to create

Easy to use with no coding skills necessary.

The Great Waterway: Tutorial 1-3a 3

Starting Out Editing the Template Upgrading Account

Creating an Account 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 4

Step 1: Access the WiX Website

Click this button to get

The Great Waterway: Tutorial 1-3a 5

Step 2: Create an Account

The Great Waterway: Tutorial 1-3a 6

Step 3: Select a Category

The Great Waterway: Tutorial 1-3a 7

Step 4: Select a Template

The Great Waterway: Tutorial 1-3a 8

Step 1: View the Tours (1/2)

These interactive tours

The Great Waterway: Tutorial 1-3a 9

Step 1: View the Tours (2/2)

Click on each icon to

Use these functions to

The Great Waterway: Tutorial 1-3a 10

Step 2: Add Pages

Click this button to add

- Use this function to navigate through the pages in your

The Great Waterway: Tutorial 1-3a 11

Step 3: Design your Website (1/2)

If you do not like the

This function focuses

The Great Waterway: Tutorial 1-3a 12

Step 3: Design your Website (2/2)

Pick a colour palette Fonts

The Great Waterway: Tutorial 1-3a 13

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

Add elements are

Click this button if you

The Great Waterway: Tutorial 1-3a 14

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

The Great Waterway: Tutorial 1-3a 15

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

Click here to display

- Gallery function lets you choose how you want your

The Great Waterway: Tutorial 1-3a 16

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

Use this menu to

The Great Waterway: Tutorial 1-3a 17

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

Include the code for

- You can share YouTube videos or embed a SoundCloud

The Great Waterway: Tutorial 1-3a 18

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

Click on Change Style

The Great Waterway: Tutorial 1-3a 19

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

Click the Settings

-  Use this function to navigate through the pages in your

-  Gallery function lets you choose how you want your

-  You can share YouTube videos or embed a SoundCloud

-  Shape and lines function allows you to add shapes and

-  Buttons and menus function lets you add buttons and