Weebly

Instruction
Manual
Table of Contents
Getting Started........................................................................................................................................
Signup with Weebly.................................................................................................................................
Choosing a title for your website.............................................................................................................
Choose your website domain name........................................................................................................
Start Building...........................................................................................................................................
Adding elements....................................................................................................................................
Adding Basic Elements...........................................................................................................................
Adding Text....................................................................................................................................
Hyper linking Text..........................................................................................................................
Linking to your own pages..........................................................................................................
Linking to another website..........................................................................................................
Linking to a file............................................................................................................................
Linking to an Email Address........................................................................................................
Remove a Link.............................................................................................................................
Adding Multimedia Elements...............................................................................................................
Photo Gallery...............................................................................................................................
Photo Gallery Toolbar..................................................................................................................
Slideshow....................................................................................................................................
Managing Slideshow Photos........................................................................................................
File Element.................................................................................................................................
Flash Element..............................................................................................................................
YouTube Video..............................................................................................................................
Managing Pages....................................................................................................................................
Webpage Design....................................................................................................................................
Favorites......................................................................................................................................
Design Options............................................................................................................................
All Themes...................................................................................................................................
Settings.................................................................................................................................................
Publishing your Webpage......................................................................................................................

Getting Started
Please give some thought to the message you want your site to
convey for your intended viewers. What would your audience be
interested in knowing?
Set up a project folder and gather any text, graphics, audio, and
video files that you might like to use.
Plan your site. The last page will summarize the whole website
and have links to each separate section. Let's now start with your
first page and build the site as we go.
If you already have an account:
1. Navigate to http://education.weebly.com
Type your username and password in the top right hand of the
Weebly website. Once logged in, you will be presented with the
same screen as Figure 1. Click on the blue "Edit Site" button to
continue or start editing your webpage. Skip the next section
("Signup with Weebly") if you already have an account.

Click to start building

website

Figure 1: Existing User Logged In

Page | 2

Signup with Weebly

Before you can start using Weebly you must sign up for an
account.
2. Navigate to http://education.weebly.com

Figure 2: Weebly Main Page

3. You should be presented by a page similar to Figure 1.

Start off by entering in your:

Username
Password
Email

4. Once you've filled in your details click on the "Sign Up"

button that is colored orange on the page.

Page | 3

Choosing a title for your website

Once you've entered in your details and clicked on the "Sign Up"
button, you will be given the following page.
1. Choose a title for your website and type it into the
first text box. The title can be changed later.

Figure 3: Choosing a site name

2. Next choose the type of website you wish to create.

Figure 4: Website Type

Page | 4

Choose your website domain name

Next we must choose a name for your website. This is the name
which people will type into their browser to get to your website.
NOTE: Make sure that you've selected the first option and that it is
highlighted green like the one in the picture. The other two
options are for paid licenses or require some payment. The first
option is FREE.
Choose the name of your website carefully because you cannot
change it later.

Figure 5: Choose your domain

1. Choose a name for your website.

2. The website will notify you whether or not the name you've
chosen is available.
3. Once youre happy with the name, click the "Continue"
button.

Page | 5

Start Building
You have now created a new Weebly account and are ready to
start building your own personal website. You should be given the
following page after you have completed the previous steps.
You will be given a home page to start off. You will be able to add
more pages. To find out how to add more pages refer to section

"Managing Pages".
Figure 6: Weebly Content Manager

Adding elements
There are different elements and objects that you can drag and
drop into the empty space on the page.
NOTE: Since this is a free version of Weebly there are limitations
in what elements can be added to the page. To get an idea of
what you are allowed to add to the page simply avoid
elements/objects which have the word "PRO" on the bottom right.

Weebly has some alternatives such as the elements in the

multimedia section. Skip to the "Adding Multimedia Elements"
section to see descriptions on each of the free available
multimedia elements.

Page | 6

Adding Basic Elements

Other elements and objects that are available can be simply
dragged and dropped into the empty space of the webpage.
Below is an example of how it would look like.
Figure 7: Drag and Drop Elements

Delete element

Adding Text
In this example a "Paragraph with Title" has been dragged and
dropped into the empty space. Once dropped into the empty
space you can edit the text or object by clicking the item you wish
to edit.
There are different combinations for each element available. For
example:
1. Paragraph with Title - This element will allow you to add
a paragraph of text with a title attached to it. The
paragraph can be any length.
2. Paragraph with Picture - This element will allow you to
add a picture along with a paragraph to the page.
The rest of the elements are straightforward and are similar to the
two explained above. If you make a mistake and add the wrong
element simply click on the red X on the top right of the element.
This is illustrated in Figure 6 with a red arrow.

Page | 7

Hyper linking Text

Hyper linking allows you to link text or pictures you have on your
webpage to another page on a different site or pages that you
have set up on your own webpage.
1. Start by dragging a paragraph element to your webpage.

Figure 8: Dragging of Paragraph

2. Type in some text and highlight the text you want to link. If
you already have some text you wish to link then highlight
the piece of text you want to link.

Figure 9: Inserting and Highlighting Text

Page | 8

3. Once you have highlighted your text click on the link button
in the toolbar. This button is labelled red in Figure 10.

Link button

Figure 10: Link Button

4. A new window will pop up which looks like Figure 11. From
this window you will be able to create a link to either your
own pages, a website, a file, or an email address.

Figure 11: Linking Window

Page | 9

Linking to your own pages

5. If you wish to take the viewer to another page on your own
website, choose the page you wish to link the text to from
the drop down box and click "Save".
NOTE: If you click on the drop down box and you only see
one selection
available this means that you have not yet
created extra pages for your
website. Refer to section
"Managing Pages" to find out how.

Figure 12: Linking to your own Page

Linking to another website

6. To link to a website, click on the website button on the left
and paste the website address into the space provided.
Make sure the website only starts with a "www" when you
paste in the link, otherwise the link will not work.

Figure 13: Linking to another site

Page | 10

Linking to a file
7. If you want to link your highlighted text to a file, click on
the file button on the left and click on the "Upload a file"
button. Choose a file from your computer.

Figure 14: Linking text to a file

Linking to an Email Address

8. Linking to an email address is similar to linking to a
website. Click on the "Email Address" button to start.
Simply type or paste in the email address in the space
provided to link the highlighted text to an email address.

Figure 15: Linking to Email address

Page | 11

9. Once you have chosen the link you wish to have for the text
your highlighted text should now be underlined. This
indicates that the text is linked.
Make sure you click "Save" if you have either chosen to link
to a "Page, "Website," or "Email Address. Linking to a file
automatically brings
you back to your linked text.
Keep in mind that you can only link a text to one of the
methods mentioned above. You CANNOT link your text to
multiple Pages or WebPages at the same time.
NOTE: The link will not work until you've published your
webpage. Refer to section "Publishing your Webpage". You
can test to see if your link works once you've published.

Figure 16: Linked Text

Remove a Link
To remove a link from a text click on the underlined text and

click "Remove".
Page | 12

Figure 17: Remove Link

Adding Multimedia Elements

This section describes each of the multimedia elements available
in Weebly. Remember to avoid the "PRO" features if you are using
the free version of Weebly.
Photo Gallery

Figure 18: Photo Gallery

This is the "Photo Gallery" element from Weebly. It allows you to

add multiple photos into one element.
Once you have dragged and dropped the "Photo Gallery" element
onto your webpage, simply click on the blue picture to start
adding photos. You can hold down the "CTRL" key and select
multiple images IF the images are within the same folder. Images
will be easier to find if you have set up a project folder as
instructed in the beginning of this manual.
There is no real limit to image sizes in Weebly but Weebly
recommends that the maximum image per gallery element should
be 300.

Page | 13

Photo Gallery Toolbar

Upload new
image

Number of images in one

element

Figure 19: Photo Gallery with Toolbar

This is an example of a picture already added to the "Photo

Gallery". If you wish to add more pictures to the gallery simply
click in the empty space of the element then bring up the "Photo
Gallery" toolbar.
The toolbar will only show up AFTER you've clicked in the empty
space of the "Photo Gallery" element.
The toolbar will allow you to customize the element. For example
you can customize the number of images you want in the photo
gallery. The maximum is 6 images in one element. You can also
customize the spacing between the images and also customize
the border thickness.

Figure 20: Full Photo Gallery

Page | 14

This is an example of a Photo gallery with the maximum of 6

images allowed. To delete a photo from the gallery, place your
cursor over the image and click on the red X that appears.
Slideshow

Figure 21: Slideshow Element

The slide show element allows users to add photos in a different

format to the Photo Gallery.

Figure 22: Slideshow Styles

Once you have dragged the slideshow element onto the webpage
a window with a list of styles for the slideshow will appear. Choose
your desired format of the slideshow to continue.

Page | 15

Managing Slideshow Photos

The screen below is what would pop up on your screen when you
start uploading photos into the slideshow.

Figure 23: Slideshow Manager

After the selected layout for the slideshow has been chosen the
slideshow manager will pop up which will allow you to add your
photos to the slide show. The top orange "Add Photos" button will
let you choose the photos you want to add from your computer.
The amount of photos allowed will depend on the slideshow layout
that you have chosen.
Once you have uploaded or added all the required photos for the
slideshow, click the blue "Save" button to add the photos on the
slide show.

Page | 16

File Element

Figure 24: File element

The Weebly file element will allow you to upload a file from your
computer that will enable other users to download.
1. Drag and drop the File element onto the webpage.
2. To add or upload a file click on the icon which appears after
the drag and drop.
3. Choose the file you wish to upload

Figure 25: Uploaded File

This is an example of what the file element should look like after a
file has been uploaded. You will not be able to test whether the
file is downloadable until you've published your website. Refer to
section "Publishing your Webpage" to find out how.

Page | 17

Flash Element

Figure 26: Flash Element

The flash element allows you to add a flash file with the file
extension of ".swf". This can usually be a file which has been
downloaded from YouTube or another video streaming website.
YouTube Video
Paste YouTube link
here

Figure 27: YouTube Video

An alternative for video on Weebly is the YouTube video element

in the multimedia section. Simply drag and drop the element onto
the page.

Page | 18

Once you have the element on the page, navigate to your chosen
video on YouTube and paste the link into the YouTube element
toolbar.

Page | 19

Managing Pages
This section allows you to add, remove, and name pages of your
webpage.

Figure 28: Manage Pages

1. To add a new page, simply click on the "New Page" button

on the top underneath the heading.
2. To name the page, simply select the page you want to
name and type in the new name in the textbox on the right.
3. Password protection is also available for selected pages.
Select the pages you wish to password protect and check
the box where it says "Password Protect?"
4. Once you are happy with the number of pages and the
naming, click the "Save" button to save changes.

Page | 20

Webpage Design
Favorites

Figure 29: Design Layouts

The design section in Weebly provides a large range of design

layouts that can be easily applied by clicking on them.
Figure 18 shows a row of different designs available to the user.
Design Options

Figure 30: Design Options

Figure 19 shows the design options. The design options allow you
to customize the text within the title. The design options only
allow you to change the font and the size of the text.

Page | 21

All Themes

Figure 31: All Themes

The "All Themes" button on the left side of the Design tab
categorizes all the themes into different genres to allow easy and
quick navigation through all the themes.
The themes can be applied at any time and it does not change
any of the elements that you have placed on the webpage. Some
elements might move depending on the style of the themes, but
the information and content will still be present.

Page | 22

Settings

Figure 32: Weebly Settings

The settings tab on the top of Weebly window brings up a new

window.
It gives you options to change the site address and site title.
There are other options available but it is recommended at this
point that they be left default if you are unsure of what they do.

Page | 23

Publishing your Webpage

This is the final step in creating your own webpage. Once you are
happy with the design and contents of your website, you can now
publish your website on the Internet for everyone view.
To begin publishing, click on the orange "Publish" button on the
top right of the Weebly screen.

Figure 33: Publish Button

Once you click the "Publish" button. You will be given a new
window with options about the domain. This is your chance to
change your domain name if you wish. Otherwise choose the first
option and click "Continue".

Page | 24

Free
Cost
Cost
Figure 34: Domain Options

Clicking continue will bring you to one final window which will
notify you that your website have been published. You can click on
the link provided to preview your website and test any features
you have just added.
If you want other users to view your website simply give them the
address provided. In this example
"http://uwsportfolio.weebly.com" will be the address where people
can view my website.
Once youre done viewing your website, you can continue editing
your webpage in Weebly by clicking the "X" button on the top
right of the pop up window to bring you back to Weebly.

Figure 35: Website Published

Page | 25