Weebly Editors -  testing and practice page

This is the opportunity for new editors to have a bit of a practice editing a page.  Below you'll find some tasks and tips to help you get the hang of editing Weebly

There is also a copy of the workshop notes to help.
Weebly Overview
File Size: 21862 kb
File Type: pptx
Download File

Task - Change the Page Image header

  1. Move your mouse or pointer to the page header image
  2. Click on the [Edit Image] button on the top right corner
  3. To remove the image, click on the 'little red cross' in the top right corner
  4. Click on [Add Image] in the top left corner
  5. Select your image
  6. Resize to match the header size (Weebly will automatically crop anything that is outside the header size)
  7. When you are happy with the image click on [Save] in the top right corner but please remember to save on to this page

Task:  add columns

  1. From the [ Elements | Basic ] menu drag the [ Multiple Columns ] element and drop it in between the divider lines below:
  2. Change from 2 columns to 3 columns
Tip: It can be a bit tricky to place the columns between the lines (use the orange guide line to help you position the columns)

Task: Add Pictures
In this task you will see that I have already put in place two columns.   Columns are helpful as they allow you to place elements side by side (such as text and graphics).   To help make this story more readable I want to add two images to the left.

Steps:
1. From the [ Elements | Basic ] menu drag the [ Picture ] element and drop it in the column to the left.

2. Click on the 'sample image' to add / edit an image.

3. Resize the picture by clicking on the red square on the bottom right corner and drag inwards.

4. Add a second image by repeating 'step 1' and dragging the image below the first image. 

The challenge here is to keep the image inside the column...  If you do drop it below the column never fear!  You can pick up the element (click on the top of the image element border) and drag it into the column under the picture). 

Task: Add a dividing line

In this task we'll be adding a [Divider]  above the title for this task and the bottom the previous task.   This helps the reader to navigate the page and know where one section ends and the next starts.

Steps
1.  From the [ Elements | More ] menu drag the [Divider] element to just above the title for this task.  The line should stretch across the page.

Tip: The [Divider] element is located under [More] on the top left menu.

Task: Add a button

Buttons are a new addition to Weebly.  Very handy! 

In this task you'll add a button and link it to a page of your choice on the website.  You can also link to a page outside on our webpage

Steps:
  1. From the [Elements | Basic] ce [button element]  into the space on the right 
  2. Move your mouse / pointer so that it is positioned over the button to bring up the extra setting for your button menu items; [ Style ], [ Link ]  and [ Position ] 
  3. Select your button style
  4. Establish a Link (for this task - select a page on our site)
  5. Decide where you want your button to be positioned in that space (left, Centre or right)
  6. Click on the button to change the text


  

Task: Add a slide show

  1. From the [Elements | Multimedia] menu drag the [Slide Show] element into the column on the right
  2. Choose the style of Slide Show that you would like
  3. Upload photos from your file
  4. Add Titles
  5. Add photos!

Add a file

  1. From the [Elements | Multimedia] menu drag the [File] element into the column on the right.
  2. Click on the icon to upload a file
  3. A small menu will appear near the top of this screen (under the available elements)
  4. Click on [Upload New File ]
  5. Change the file name
  6. Decide where you want it positioned on the column (left, centre or right)


Tips: if the file name is not what you want, click on the file and the menu will reappear at the top of the page.  Click in the box under [File Name] and type in the name you want.  When you have finished simply click anywhere outside the menu.

Add a YouTube Clip

  1. From the [Elements | Multimedia] menu drag the [You Tube] element into the column below
  2. You will need to open YouTube
  3. Identify the clip that you would like to add
  4. Click on the [Share] button underneath the clip
  5. Copy the link
  6. Click on the YouTube Icon that you have positioned below (don't worry if the sample clip starts!)
  7. The element menu will appear near the top of this screen
  8. Copy the URL into the first box (Youtube Video URL)
  9. Select the size
  10. Select the position (left, centre, right)
Your Go!
Mel's Go

Add a Google Map

  1. From the [Elements | Multimedia] menu drag the [Google Maps] element into the column on the right
  2. Click on the map to bring up the element menu (near the top of this page, below the available elements)
  3. Type in the address
  4. Select the size
  5. Select if you want a marker to appear at the address
  6. Select the Zoom Factor
  7. Click outside of the element menu to continue.
Your Go!
Mel's Go: