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. |
![]()
|
Task - Change the Page Image header
- Move your mouse or pointer to the page header image
- Click on the [Edit Image] button on the top right corner
- To remove the image, click on the 'little red cross' in the top right corner
- Click on [Add Image] in the top left corner
- Select your image
- Resize to match the header size (Weebly will automatically crop anything that is outside the header size)
- 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
- From the [ Elements | Basic ] menu drag the [ Multiple Columns ] element and drop it in between the divider lines below:
- Change from 2 columns to 3 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.
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 buttonButtons 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:
|
Task: Add a slide show
|
Add a file
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
- From the [Elements | Multimedia] menu drag the [You Tube] element into the column below
- You will need to open YouTube
- Identify the clip that you would like to add
- Click on the [Share] button underneath the clip
- Copy the link
- Click on the YouTube Icon that you have positioned below (don't worry if the sample clip starts!)
- The element menu will appear near the top of this screen
- Copy the URL into the first box (Youtube Video URL)
- Select the size
- Select the position (left, centre, right)
Your Go!
|
Mel's Go
|
Add a Google Map
|
Your Go!
|
Mel's Go:
|