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