Download Building a Wix website

Building a Wix website
Getting started
Set up a new account on the Wix website, using your school
username. Create a new website; use Blank templates, then Start
from scratch.
All your text and images should stay inside the lines at the
sides.
Header
Anything you put in the Header or Footer will show on
every page
Footer
Adding the webpage title
Click on the + sign on the left, and then select Text.
Drag and drop your chosen font to the middle of the web page.
Right click on your text to edit it. You can change the text, font, size and colour.
Once you are happy, drag it up into the header. A horizontal line appears when your text in centred.
Adding an image
To add a background image to your header or images to the
side of your heading, click the + sign again and then Image,
My image uploads, Chose Images, Upload media. Select your
image, then Add to page.
You can drag the image into the header, crop it and put it behind or to
the side of your heading.
Right click on the image, Arrange,
Send to back.
If you need to increase or decrease the
size of your header, click on the
header border and Stretch.
Make sure your text is visible – here you can
see the text colour and spaces and image all
had to be adjusted (using the tools mentioned
above).
Adding pages
We need to create seven pages for
the following:
 Home page (already made)
 History
 Attractions
 Places to visit
 Restaurants
 Accommodation
 Events
Select Site menu, Add page and then rename each page in turn.
Adding menu bars
We want to add the menu so that it shows up on every page.
Click on the Add button on the sidebar on the left, select Menus. You have two
options. Either:
a) Place a Horizontal menu in the header (automatically shown on every page) or
b) Place a Vertical menu to the side (making sure it can be seen by all users, inside the
dotted lines) and select Show on all pages from the contextual menu
Right click on your menu, Design, Customise design, Text. You can select Size, Colour, Colour changes
(Hover and Current pages highlighted differently). Make sure your menu conforms to your design and
is all visible. You may have to change the font size to make it fit.
The pages you created automatically populate the menu.
Select the Preview button (top right of page) to see how your pages would look in a
browser. If you put some text on a couple of pages, you can check it really goes
from page to page.
Back to top
If you have a tall webpage, it is a good idea to have a “Back to top” button
at the bottom of the page. Click on the + symbol, Button. Choose a button
with no colour or border line and drag it to the bottom of the page. Right
click; change the text to “Top of page”.
Choose the Link symbol (the two chain links) then Top/Bottom of page,
then Top. Go to Preview and test your button.
Alignment
To look professional, the elements (text,
buttons, images and so
forth) should be placed and
spaced neatly. Select the
elements you want aligned
by dragging the cursor
around them.
You can Align left or Align right, and then Distribute evenly
Menus and Pages
The links to other pages only work in Preview
mode; you use the Menus and pages link to
access other pages. You can also add Page
transitions from one page to another here.
Accommodation page and external hyperlinks
Your accommodation page should list properties with the same image size and format for every property.
Look at other websites for appropriate formats. (see
https://www.visitsoutheastengland.com/accommodation/searchresults?sr=1&cat=tsebighf
https://www.whitecliffscountry.org.uk/Stay/Self-Catering/Self-Catering.aspx
https://www.canterbury.co.uk/site/scripts/places_to_stay.php))
All have:



An image of the property
Prices
Hyperlink to book
Visit sites, save the images in a dedicated folder with sensible names
1. Images
Click on the + sign, select
Image, then Upload Media,
navigate to your chosen
image. Add to page.
The image will probably
be too big. Resize it, using
the handles.
Once you have decided
on a size, all your other
images will need to be
resized or cropped to the
same dimensions.
2. Text
Use text boxes to add the name of the property and the price. Drag your
mouse to select all 3 elements and Align them left.
3. Hyperlink
Add a button and then edit the text to
an appropriate one. Right click on the
button and select Link. Paste the
hyperlink to the accommodation page
Make sure you crop, resize,
align and order so that every
listing is similar.
Events, places to visit, Restaurants, Attractions
Use exactly the same techniques for these pages. “Cheat” by looking at the town’s real websites (Internet search the
town name + visit + tourism and you should find two or three sites for inspiration). Hone your alignment, cropping,
resizing skills to make sure all the elements look neat.
Home page
Many sites have image links to their other pages here or links to
nearby towns’ sites
Use the same techniques to replicate these
Footers: Social Media, Company details, Contact us
Check out the footers of other local tourism websites
and add Social media, About, Contact us
Background images
You may insert Background images using the Background tool. Be careful, there is a lot of work
making sure your text is visible against photographs with many colours and shades. It is easier with
greyscale images with limited tones and shades.
Hyperlink selected text
Select Edit text for the text box. Highlight the text you wish to attach a hyperlink to and select the
hyperlink symbol. Past the URL you wish to link to.
Embedding media
Click on the + sign, then Video and music. Select Single player, YouTube. On the
contextual menu, click on Change video and past the URL of your selected video. Choose
your playback options
Desktop and Mobile mode
Make sure your site looks as it should for computers and for mobile phones