Weebly Portfolio Website Project


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

In this tutorial you will learn how to use the Weebly website building tools to create a portfolio website. On this site you will create a home page welcoming people to your site, a portfolio page where you will showcase your work from the year, an about me page where you will tell the visitors a little about yourself including a resume, and a contact page so that they can contact you. WHen you are done you will post your new website on the internet.

Click on the links above and below to access the 15 steps to the design process. You can also click on the website video tutorial links on Vimeo to watch the tutorial movies as well.

Step 1 - Signup on the Weebly Website


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Go to the website https://www.weebly.com and signup.

    1a
  2. Type in your email address and create a password then click on Signup button.

    1b

Step 2 - Login to Weebly


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Login using the email and password that you just created.
    2a

Step 3 - Choose a Website Theme


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Click on the Theme link at the top of the page:

    3a

  2. Choose a theme for your website by clicking on it.

    3b

Step 4 - Modify the Banner Text


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Click on the text on the banner.

    4a

  2. Edit the text as needed and replace the text with your own.

    4b

  3. Use the text edit tools to modify the text to make it bold, italic, underlined, increase or decreased in size, font style, and alignment as shown below.

    4c

Step 5 - Change the Banner Image


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. To change the banner image you need to click on it.

    5a

  2. The edit options will appear at the bottom of the page. Swap out the image with one from your computer by clicking on the CHange Image button at the bottom of the page.

    5c

  3. You can select an image from the library or upload an image from your computer. Upload one of your images from the computer.

    5d


  4. 5e
  5. Navigate to your project folder and select the image that you want to have as your banner image.

    5g
  6. Once you have the image inserted you can edit the image using the image edit tools at the bottom of the page by changing the zoom, blur, darken, or add a filter.

    5h

Step 6 - Choose a Page Layout


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Click on the button Choose a Layout

    6a

  2. The layout page option will appear click on the one you want to use.

    6b

  3. The layout will appear on your page. Choose the Keep button to complete the task.

    6c

Step 7 - Modify the Images and Text on the Page


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. To modify the images just click on them, load the image from your folder, and replace the existing imageas shown below.
  2. Clicck on the image you want to replace:

    7a
  3. Select the upload from your computer option, locate your image and upload it.
    7b

    7c

  4. Choose the image to upload from your project folder and it will begin to upload as shown below:

    7d


    7e
    7f

  5. Select the text by highlighting it. Press the delete key and type the tect you want to use to welcome visitors to your page.

    7g

    7h

  6. Continue this process to replace all of the images and text on the page.

    7i

Step 8 - Edit the Image using the Image Options


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

The image options allow you to resize the image,

  1. Click on the image to access the image editing options and then click on Edit Image button.

    8a

  2. Use the crop, rotate, Opacity, Fade, and Effects options to edit the image.

    8b

  3. Click on the Save button to save your changes.

    8c

  4. Review your changes and keep them if satisfied or re-edit the image to your liking.

    8d

Step 9 - Add a new Page


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:


  1. 9a


  2. 9d

  3. Use the options under Header Type (Tall Header, Visibility, and Advanced) to modify and add information about your page.

    9c
    9g9h9e
  4. Save the page and now you have added a new page to your website called Portfolio:

    9i ---->>>> 9j



Step 10 - Modify/Create Buttons


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Select the button at the bottom of the page and modify them so that they access your other webpages. Click on the button to edit it.

  2. 10a
  3. The button options appear.

    10b
  4. Select the Button Text option and edit the Button Text first and call it Portfolio.

    10cc

  5. Select the the alignment under Position (keep centered)

    10e
  6. Choose the button style

    10d
  7. Link out to your About Me page

    10f --->>> 10g
    10h


  8. Your new button will appear on your page. Repeat this process for all of your other buttons on the page.

    10i

Step 11 - Modify the Contact Page


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Select the Contact Page from the Page options and modify the images, contact, information, and map to reflect your personal information for your website.
  2. Click on the text and edit as desired on the contact page:

    11a

    11b

  3. Click on the map to modify it.
    11c
  4. Edit the location:
    11d

  5. Your new map appears:

    11e
  6. Use the icons to the left to add images and other information as desired by clicking on them, holding down your mouse and dragging it onto your page. Edit as desired.

Step 12 - Modify the About Me Page


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Modify the About me Page as you did the Home Page by:

    12a

    1. Choosing a template

      12b


      12c
    2. Modifying the text on the page as shown before.
    3. Uploading Photos and replacing the place holder photos.
    4. Add your resume by clicking on the Add Document button on the left and draggin it onto your page. Upload your resume.

Step 13 - Modify the Portfolio Page


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here to watch a quick review of everything that you have learned so far.

Modify the Portfolio Page as you did the Home Page by:

  1. Choosing a Portfolio Photo template

    13a

  2. Uploading Photos and replacing the place holder photos in your photo viewer.

    13b
  3. Select all of the images to upload.

    13c
  4. The images will be replaced with your portfolio images.

    13d

  5. Modifying the text

Step 14 - Quick Review


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

Step 15 - Publish your Website


| 1- signup | 2 - login | 3 - theme | 4 - banner text | 5 - banner image |
| 6- Layout | 7 - edit images & text | 8 - image options | 9 - new page|
| 10 - buttons | 11- contact page | 12 - about me page | 13 - portfolio page |
| 14 - review | 15 - publish website |

Click here for the video link or follow the directions below:

  1. Click on the PUBLISH button to pubish your site.

    15a

  2. Once the site is published click on the http://yourname.weebly.com link to see your site.

    15b
  3. Your site is now publised on the web.
    15c

  4. You can close the window and return to the weebly editor and add more pages, photos, text or any other information youwant to include and simple re-publish your site to shwo the updates.


    CONGRATULATIONS, YOU HAVE A WESITE PORTFOLIO ONLINE NOW!