Wix Website Creation Presentation

Part 1 - General

Friday 31 May 2019

By

Anne Menzies

Some questions:

What do you want to do?

Show pictures

Sell something

Something else?

Do you want a free site? Do you need a Domain? Read

https://internet.com/domains/why-you-should-use-a-

custom-domain-for-your-website/ for an explanation.

Do you want associated email addresses?

I’m concentrating on a Gallery website to show off some

photographs, but as you’ll see there are any number of

styles to chose from.

INTRODUCTION

I’m demonstrating Wix: https://www.wix.com/. Free

(forever) or paid options

SquareSpace: https://www.squarespace.com

GoDaddy: https://uk.godaddy.com

WordPress: https://wordpress.com

Many appear to be free to get started, but only for

limited period.

For comparisons and pros and

cons:https://websitesetup.org/website-builders/

Various Website Creation Options

I will be covering only a very small percentage of the

options available in Wix, as we have only an hour or so!

I’ll also be demonstrating use of the program.

Note, you need no programming skills.

You don’t have to use an online builder, of course. There

are several ways to create a website, e.g. writing it from

scratch, yourself, or using an off-line builder, e.g.

SeaMonkey, written by Mozilla (of Firefox) or Blue

Griffon.

You then, though, still have to publish it and for that you

need a domain.

Presentation Coverage

• Make a plan before you start.

• E.g., If making a photo gallery, sort out the photos that

you want to.

• As many of your photos may be large, 3-4Mb and 1.5

metres wide or high, reduce their sizes. Using very

large photos will:

• Slow down the load times on the website

• Take longer for you to load them in the first place.

• I use Photoshop Elements to reduce my images, but

e.g. GIMP, a free program, is a good alternative.

• Sort them into various folders for ease of finding them

BEFORE YOU START

Introduction

The first few slides are about getting started, including

• Creating an account

• Selecting a template for editing

• Letting Wix create a site for you

• Starting from scratch

Then how to perform various actions, e.g.

• Change the background colour

• Create and format a text box

• Insert an image

• Create a gallery

• Etc.

Most of the presentation will be a practical demonstration.

The WiX Home Page

Further down the home page

Creating an Account. Each of these three

steps can be skipped

Click on Getting Started on the home page

Wix has used the answers to show you possible

templates for you to make a further selection.

Hover over to select “view” to see how they look.

Having looked at a few, I selected this one (Landscape

Photography) as my template and clicked on “Edit” (see the

previous screen).

Save your site by clicking on “Save” at the top

of the window.

In the resulting

window, replace

the default name

of “Mysite” with

your chosen

website name.

Close the Tab to

return to your Wix

home page

When you first log in, you’ll be presented with

your “My Sites” page. From here you can edit

any of your sites or create a new one.

You can also access your account from under

your username and find the help system.

When you click on “Create New Site” (previous slide) you

have the a choice to make. The next slides demonstrate how

they work

Ways of Creating a New site: Wix ADI Step 1

Answer some questions

Ways of Creating a New site: Wix ADI Step 2

Answer more questions

Ways of Creating a New site: Wix ADI Step 3

Complete your site. Change as much or as little as you like.

Once you’re done, click on Preview, then back to ADI Editor

After clicking “Create New Site” (on the home page), I’m

selecting “Other”

You don’t have to use a template or ADI. Clicking on “Other”,

presents you with the following.

The “Chose a Template” option. I often use a “Blank

Template” as I don’t like to be constrained although all

templates can be fully customised.

Even selecting a “Blank Template”, you have another choice

to make.

Once you’re used to the

app, starting from

scratch is easy to use

and allows you free

reign

Changing the background

Hover over the background to show the

design options. Pick an image or colour, As

you hover over the colours, the page

background changes. Once you’re happy,

just click on the colour. You can also

change the centre (next slide).

Changing the Page Colour

Hover over the background to show the

design options. Click on the “Design” tool

(the Pen) or select Design. Pick a colour, As

you hover over the colours, the page colour

changes. Once you’re happy, just click on

the colour.

Adding Elements to the page

To the left of the screen is an ‘Action” bar, for adding

elements to the site or extending it, e.g. Adding a

Booking system.

Selecting the “More” at the foot of

the Add list, brings up more

options, including embedding an

HTML iframe, Anchors, Buttons,

etc.

The options on the Action Bar include, from the top:

Menus and Pages; Background; Add (shown to the

left); Add Apps; My Uploads; Start Blogging;

Bookings

Adding a Text Box

Click on the “Add” (+) tool and select

“Text”. Chose an option and click to

insert it. Move it to where you want it

to be and resize if you wish, using the

“drag” handles.

Click on Edit Text to change the

style, font, colour, layout, etc.

You can include different fonts

for part of the text, just highlight

the bit you want to change. You

can also add a link to individual

words or phrases.

Adding an Image

Click on the “Add” (+) tool and select

“Image”. Chose one of the Wix

Images or upload your own.

Click on “My Image Uploads”

If you are intending to add many

images, it might be wise to create new

folders for different categories.

Click on “Upload Media”. You then have the option of

dragging images onto the site or uploading them from the

computer. Click on “Add to Page”. The image is placed in

the centre of the page.

Using Images 1

Hover over the image to display the

design options.

Using e.g. “A link opens” allows you to

add a link to another website, to a

page in your site, to an email address,

etc.

Using Images 2

Resize the image using

the drag handles at the

corners.

Animate the image by

selecting the “Animate”

option.

Click on the

“Customize”

button at the foot

of the animation

options, to see

how it works.

Other

modifications are

available via the

Design pen.

Adding a page

Select the Menu option from the left

hand side of the editor.

Click on Add Page.

Change the title and click on Done.

By default, the new page has the

same design as the previous one,

but you can change this, as before.

You can also rename a page.

Click on the … to the right of the

page name

Adding a Menu

Click on the the Add (+) option from

the left hand side of the editor and

select Menu. Clicking on your

selection will add a menu

somewhere on the page, move it to

the header.

It displays all the pages that are

currently in the site, unless they are

“hidden”.

Hovering over the menu displays

the usual design options, e.g. Menu

layout

Using Images - Adding a gallery 1

On the new page (get to it via the

Menu option on the left), add the

Gallery of your choice

By default, it is filled with images

already, so click on “Change

Images”. In the resulting screen,

select each image in turn and

delete it.

There are any number of gallery

styles to choose from, all working

slightly differently.

Using Images - Adding a gallery 2

Follow the arrows here to get the media from

your computer

Using Images - Adding a gallery 3

Select all the images that you want and click

on “Add to Gallery”.

Select each image in turn and add a Title and

Description. The description can be as long

as you want.

On completion, click on Done

Rearrange the images, if you wish, by

dragging them into the order that you want.

Using Images - Adding a gallery 4

Click on “Preview” to see how it looks.

We have changed none of the settings for the

gallery, so the default view shows shows the

images, not titles, etc. Clicking on one of the

images opens it in an enlarged view, with its

details and arrows to move back and forth

through the images.

Exit by clicking on the “x” and return to the

Editor

Using Images - Adding a gallery 5

Click in the gallery to

see the editing

options and click on

Settings (the gear

wheel)

These are mostly

about how the

gallery “plays”.

Change the

layout, e.g.

how many

columns and

rows

Animate the

initial display.

As you hover

over each

option, the

animation is

demonstrated.

At any time during the editing, you can “Preview” what

you’ve done so far. Click on “return to Editor” to go back to

the page you’re previewing.

Once you’re happy with the site, you can “Publish” it. The

next slide shows how to “Unpublish” it

To “Unpublish” your site, go to your site Dashboard and

select the site. Click on “Settings”. In the “Publish Status”,

select “Unpublish”

• If you want to include your Social Media on the site, insert a

Social Bar. Click the Add option and select “Social”.

• Select the style that you want. The social bar will be put in the

middle of the screen. Move it to wherever you want.

• Hover over it to “Set Social Links”. Delete any that you don’t

want and add the URLs to the others, on the right of the

screen.

OTHER ITEMS TO CONSIDER

• Altering the header and footer: Just click into them and edit.

• Adding a “Favicon”: A symbol that will show along with your page title in the browser. Only on paid versions

• Search Engine Optimisation (SEO): Improves the “findability” of a website by search engines. Or disable it being found by them, at all.

• Make the website “Mobile Friendly”: Can easily be done via the editor

• Finding your way around the Help • Restricting access to your site • Etc., Etc.

A useful option is being able to “Get Feedback” on your site,

before you publish it. Click on “Site” and select “Get

Feedback.

Select Email and

add the addresses

The link in the email will display

the Welcome. Users can then click

on Add Comment

If a user sends a feedback comment, you’ll receive an

email. In the site, this is indicated by the count of

comments. Clicking on “See new comments” opens a new

tab. You can make changes, if required, by returning to the

previous page.

Manage your account by

clicking on your login at the

top right of your home

screen.

Help Centre opens in a

new tab.

Press escape to return to

“your” home screen.

Keep your site private, if you wish

https://support.wix.com/en/article/password-protecting-your-site-or-a-specific-

page

When you’ve finished, make sure you close all the tabs

apart from your Wix Dashboard. There will be at least one

tab open apart from the Dashboard, and may be more, e.g.

if you have used the Help Centre.

Logout under your account name