Lab: Website development using WIX

Lab 6

Wix Website Creator

Outline

• Introducing HTML

• Intuitive features of Wix

• Process of creating a company website

• Developing features unique to your company

• Summary

Learning Objectives

• Wix grants you the ability to successfully communicate your business to your audience of choice

• Wix uses HTML 5 and CSS to transform ideas into creative websites

• You will learn how to harness the power of HTML and CSS to develop a coherent website for your pet service company

Features

HTML 5

5th HTML standard

Defines the properties and behaviors of a webpage by implementing a markup based pattern to the page

4

Setup Go to https://www.wix.com/

Create a free account

The website will ask for more information about yourself, however, skip this process

5

Pet Service Company • Let’s imagine a scenario where

you, as a business owner and

veterinarian, wish to create a

website for your newly founded

pet care company. To fully

maximize your outreach to

potential customers, you have

decided to utilize Wix because it is

free, and you have little to no

coding experience.

6

Process

7

Selecting the appropriate theme for this situation

Further cultivating the template to match your personal business model

Handling and maintaining the site for ongoing usage

Beginning the Project

• Wix will ask you

“Which website do

you want to

create?”

• Select “Business

Website”

• Select “Create

website of your

own”

8

Selecting a Pet Care Template

• Search for ‘pet’

• Select the “Pet Care” page

• Click “edit”

9

The Basic Template • Now, you can already see a

pristine web page present, and

you didn’t even have to code

anything! However, I am sure that

your name isn’t Dr. Mark, so let’s

go ahead and change that.

• Simply click on this textbox, and

click “Edit text.” Notice how a large

box appears with several different

text settings. Once you have

changed the text to say, “Dr. [Your

last name],” try changing the

Heading 6 to Heading 1. Also,

change the font size to 44 px.

10

Business Phone • Next, there is a button in the

top right corner that says “Call

xxx-xxx-xxxx”. Click on this

button and it will give you the

option to update the text to

your phone number. Make

sure to update both the text

and the actual link to your

phone number.

• Click anywhere outside the

box.

• The site will now look like this:

11

Changing the background (strip)

• Next, click inside the box that says “Strip.”

• This will give you the option to change the background so click on “change strip background.”

• There will be several backgrounds to select from, select any of the options listed.

• The site will now look like this (with your selected background):

12

Next page (The about page)

• We should feel pretty

happy about how our

landing page looks now.

Next up, we want to

customize our about page

and give people the ability

to put a face to our name.

• Scroll down to the next

page, which looks like this:

13

About You • Click on the image of the man with

the dog. This will bring up a button called “change image.” Select this and a box will popup. In the top left corner of this box, select “upload media.” From there you can upload a file from your computer. Select a picture of yourself. Once you have selected the file, and clicked forward on the bottom right, you will show up on the page.

• Go ahead and edit the text in the about me section to describe what your major is, if you own any pets and if so, what their names are. Also include what your favorite food is.

• Your site should now look like this:

• Additionally, change the background to the background you selected for your home page.

14

Using Additional Features of Wix

• Wix has several different

ways to maximize the usage

of your website. For

instance, there will be a

navigation bar to the left of

your screen. Click the top

option, called “Menus and

Pages.”

• Delete the “Blog” page by

clicking on the “…” icon to

the right.

• After this, please click on

the “Services” page. 15

Handling Staggering Success • Business has been going very well for your company and

now too many people have been scheduling checkups for

your pet care service to handle. To match demand, you must

raise the price of your checkups to $200.

• To do so, click on the image of the cat and then click

“Manage services.”

• Find the checkup tab and click on it.

• Scroll down to the price section and edit the price to be $200

USD.

• Click save in the bottom right and ignore the option to

upgrade to premium.

• This price page is on the next slide. 16

Pricing for Checkup Image

17

Booking Calendar • A red exclamation point will now appear next to the booking

calendar tab. Please click on this page.

• Change the view from weekly view to daily view.

• Add a new 1-on-1 session for a checkup with staff member #1 for

Monday, November 20 at 3:00 PM that will go until 3:30 PM.

• For the client name, choose your favorite actor, musician, or

athete. Then, fill in the rest of your client’s info with your personal

info.

• Additional images are given on the next two slides.

• Notice how an email has been sent to your inbox confirming the

booking! Take a screenshot of this email.

• Exit out of this popup. 18

Booking Calendar Page

19

Booking Appointment Screenshots

20

Services Page Revisited

• When you go

back to the

services page,

the checkup will

be updated to

$200 and will look

like this:

21

Demonstration of Additional Features

• We have additional

features that can

demonstrate the true

power of Wix.

• Create a new site

page named

“Additional Features”

22

Help Customers Find You

• Once you are on the

page we just created.

Open the “apps” section

and search for Google

Maps

• Place the map anywhere

on the page and change

the address to the

SFEBB address

23

Form Handling via Job Applications • Along with the success of

your company, more

workers are required to

handle the extra work.

We need a form that can

allow people to send in a

quick application.

• Click the “Add” button

and navigate to “Contact.”

Drag and drop a job

application form into the

page. 24

Lightboxes • Lightboxes are a great

way to grab website

visitors’ attention by

creating a popup after

they have entered the

page.

• Add one to your page

by clicking the “Add”

button and navigating

to “Lightboxes.” Choose

any of the options and

add it to the “Additional

Features” page. 25

Lab Motivational Page

• Once this is

complete, click on

the “menus and

pages” button on the

left side navigation

bar once again. This

time, on the bottom,

click “add page.”

Name the page “lab

motivation.”

26

Creating a Page from scratch

• Below the menus

and pages button

is a page

background.

Select any

background of

your choosing.

27

“Add” Feature

• Scroll down to video,

and drag and drop a

Youtube link on your

page. Wix will

automatically have one

of their videos by default,

but click the “change

video” button. Now, for

fun, find a funny animal

video on youtube, and

copy/paste the link into

the URL. Click out of the

popup. 28

Publishing your website • Finally, in the top right

corner, press publish.

You will be given the

URL to your webpage.

Make sure to save this

link. Now, you can view

your website!

• Notice you have a tab

called “lab motivation.”

Click on this and ensure

that your youtube video

is present:

29

Mobile Capabilities of Wix Website

• Also, I encourage you to look at the website

on your mobile device. Notice how beautiful

the site also appears on your mobile browser!

The call feature even works!

30

Lab Submission

• To receive full points, ensure that you have all of the following:

• A screenshot of your appointment confirmation that was sent to your email

• A working link to your website

• A working YouTube link on your lab motivation page

• A summary paragraph explaining what you learned with Wix website creator

• Add the screenshot, website link, and summary paragraph to a document and submit to Canvas

31

END