Weebly Instruction Manual

Getting started with Weebly

Table of ContentsGetting Started..................................................................................................................................................................3

Signup with Weebly...........................................................................................................................................................4

Choosing a title for your website.......................................................................................................................................5

Choose your website domain name..................................................................................................................................6

Start Building.....................................................................................................................................................................7

Adding elements..............................................................................................................................................................7

Adding Basic Elements.....................................................................................................................................................8

Adding Text...........................................................................................................................................................1

Hyper linking Text.................................................................................................................................................9

Linking to your own pages..................................................................................................................................11

Linking to another website.................................................................................................................................11

Linking to a file....................................................................................................................................................12

Linking to an Email Address................................................................................................................................12

Remove a Link.....................................................................................................................................................13

Adding Multimedia Elements........................................................................................................................................14

Photo Gallery.......................................................................................................................................................14

Photo Gallery Toolbar.........................................................................................................................................15

Slideshow............................................................................................................................................................16

Managing Slideshow Photos...............................................................................................................................17

File Element.........................................................................................................................................................18

Flash Element......................................................................................................................................................19

YouTube Video....................................................................................................................................................19

Managing Pages...............................................................................................................................................................20

Webpage Design..............................................................................................................................................................21

Favourites............................................................................................................................................................21

Design Options....................................................................................................................................................22

All Themes...........................................................................................................................................................22

Settings............................................................................................................................................................................23

Publishing your Webpage................................................................................................................................................24

Getting StartedPlease 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 link 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://www.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.

Figure 1: Existing User Logged In

Page | 2

Click to start building website

Signup with WeeblyBefore you can start using Weebly you must sign up for an account.

2. Navigate to http://www.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 which is coloured orange on the page.

Page | 3

Choosing a title for your websiteOnce you've entered the 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 nameNext 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 got the first option selected and that is highlighted green like the one in the picture. The other two options are for paid licences 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. For example you can put your name or even a company name if you like.

2. The website will notify you whether or not the name you've chosen is available.

3. Once your happy with the name. Click the "Continue" button.

Page | 5

Start BuildingYou have now created a new Weebly account and is ready to start building your own personal website. You should be given the following page after you have completed 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".

Adding elementsThere are different elements and objects which 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 have 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

Figure 6: Weebly Content Manager

Adding Basic ElementsOther elements and objects which 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.

Adding TextIn 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 title to the page.

The rest of the elements are straight forward and is similar to the two above explained. If you make a mistake and add the wrong element simply click on the red cross on the top right of the element. This is illustrated in Figure 6 with a red arrow.

Page | 7

Figure 7: Drag and Drop Elements

Delete element

Hyper linking TextHyper linking allows you to link text or pictures you have on your webpage to another page on a different site or pages which 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.

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

Link button

Figure 13: Linking to another site

Linking to your own pages5. If wish to take the viewer to another page on your own website. Choose

which 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 website6. 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.

Page | 10

Linking to a file7. 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 Address8. 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 CAN NOT 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 LinkTo remove a link from a text. Click on the underlined text and click "Remove".

Figure 17: Remove Link

Page | 12

Adding Multimedia ElementsThis 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 drop 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.

Images should be resized before uploading or adding to your website to allow faster loading and viewing for other users who visit your webpage. To learn or find out how to resize and edit your images refer to "Resizing and Editing Images" in the appendix.

Page | 13

Photo Gallery Toolbar

Figure 19: Photo Gallery with Toolbar

This is an example of a picture already being added to the "Photo Gallery". If you wish to add more pictures to the gallery simply click in the empty space of the element to 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

This is an example of a Photo gallery will the maximum of 6 images allowed. To delete a photo from the gallery. Place your cursor over the image and click on the red cross which appears.

Page | 14

Upload new image Number of images in one element

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 PhotosThe 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 which 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 which 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 would 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. If you wish to know about downloading videos from YouTube. Please refer to the Appendix.

YouTube Video

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.

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 | 18

Paste YouTube link here

Managing PagesThis 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 page you wish to password protect and tick 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 | 19

Webpage Design

Favourites

Figure 29: Design Layouts

The design section in Weebly provides a large range of design layouts which can be easily be applied just 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 | 20

All Themes

Figure 31: All Themes

The "All Themes" button on the left side of the Design tab categorises all the themes into different genres to allow easy and quick navigation through all the themes.

The themes can be applied at anytime and it does not change any of the elements which 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 | 21

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 it is left default if you are unsure of what they do.

Page | 22

Publishing your WebpageThis is the final step in creating your own webpage. Once you are happy with the design and contents of your website. You can now place your website onto 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 | 23

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 your 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

FOR MORE INFORMATION GO TO http://badanami.weebly.com

Page | 24

Cost

Cost

Free

Page | 25