1. How to Create a Website Using
www.weebly.com
By Nicole Hunt
2. 1) Cover
2) Table of Contents
3) Table of Contents
4) Let’s Get Started
5) Initial Steps: Focus
6) Theme
7) Domain Name
8) Welcome to Weebly
9) The Toolbars:
10) Navigation
11) Build (Insert Keys)
12) Build
13) Build
14) Build
15) Build: Social Media
3. 16) Toolbars: Design
17) Toolbars: Pages
18) Pages
19) Pages
20) Get On With It!
21) Building Your Site
22) What Page Am I On?
23) Layouts
24) Adding Content: The Blue Line
25) Moving Content
26) Adding Content: Social Media
27) Adding Content: Social Media
28) Adding Content: Social Media: Widgets
29) Deleting Content
30) How Do I Save?
31) Now It’s Your Turn
4. Let’s Get Started…
First off, you have to create an account at www.weebly.com – if you haven’t done that,
please do so now.
For this E-Portfolio you should also have accounts with the following social media outlets
www.twitter.com
www.linkedin.com
www.pinterest.com
Any other account that may show off your professional online persona – remember that this is
SHARED with everyone who will view your page
5. Initial Steps: Focus
What’s the focus of your site?
Site – Blog – Store
I would suggest “Site” because it looks nicer as a
homepage, and you’re not selling anything
6. Initial Steps: Theme
Choose a theme that best represents what you want your page to
look like
Keep in mind that this can be changed at any time
Click “Choose”
7. Initial Steps: Domain Name
Suggestions
• Use your name for your domain
name
• If not available try putting “Mr”
or “Ms” in front or “yourname1”
etc.
8. Welcome to Weebly!
You should now be on a page
that looks similar to this
Remember that we chose a
STANDARD site, so your
homepage will be a standard
page
Don’t want that? No worries.
You can change this, and I’ll
show you how soon!
HINT! Everything you do in the builder will save automatically! Yay!
10. Toolbars: Navigation
Along the top of the builder you will see this
To save time, we will focus on the following options:
• Build – The physical construction/layout
• Design – The background and fonts
• Pages – What pages do you have?
• Publish – When you’re ready to share
11. Toolbars: Build
Again, to save time, I am not going to give a description of every single button – but feel
free to explore!
Insert titles
Insert
textbox
Insert
image
Insert
gallery of
images
Insert a
slideshow/PPT
Insert a saved
document
Insert a
different file
type
Insert a
YouTube
Video
Insert divider
line
Insert a
spacer box
Insert a
link button
Insert a
contact
form
Insert social
media icons *
Insert code *
HINT! To use the build functions, pick an icon and drag it to the page
12. Toolbars: Build
These are the basic
elements that you need for
the bulk of your E-Portfolio.
Keep in mind that this is
supposed to be a VISUAL
assignment – so lots of
pictures!
A GALLERY is a great way to
display many pictures at
one time
13. Toolbars: Build
Another great way to add
visuals is to show your work! You
can insert slideshows,
documents, PDF files, YouTube
videos (such as your Personal
Brand video from Field 1) and
more!
HINT! Want to upload a PPT quickly? Try http://www.slideshare.net/
14. Toolbars: Build
These are your formatting tools. Divider
and Spacer create nice lines and blocks
of space. Link buttons connect you to
other pages of your own website or to
external websites.
Contact forms are used in the Contact Me
section (if you choose to use one). They
look like this:
15. Toolbars: Build – Social Media
Ok this part is IMPORTANT – you are required to have links to your social media accounts
(Linked In, Pinterest and Twitter)
16. Toolbars: Design
This part is not as important, so I will go over it quickly.
Remember that you can change the formatting any time you want, and your information
will always remain on your page.
You have Coloured Circles, Change Theme, Change Fonts and Change Background
The coloured circles will change the appearance of your site. Try it.
Remember the Theme you picked originally? If you don’t like it you can change it here.
Changing fonts is a little more difficult – you have to look at each section and see what is
highlighted
You can also change the background picture
NOTE: When prompted to choose a header, remember that the header is
the whole top chunk of your page (usually a large picture) – you can
choose a tall header, short header, no header – it’s up to you.
17. Toolbars: Pages
I believe that the best way to start this demonstration is to add the pages that you will
need to your website. These are:
Chart taken from D. Moati’s “Assignments” page – AT Class 2015
18. Toolbars: Pages
We also need to have this criteria for Elizabeth’s section of the E-Portfolio:
Image taken from E. Giancola’s “ePortfolio” page in Slate 2015
19. Toolbars: Pages
ADD PAGES
Homepage + Standard
Standard
Blog
You should
have
something
similar to
this:
HINT! Instead of displaying your AT knowledge on a page, why not try Pinterest?
20. GET ON WITH IT!
http://orig08.deviantart.net/42ba/f/2014/178/1/1/get_on_with_it_by_brheat15-d7o5evc.jpg
From Monty Python and the Holy Grail
22. What Page Am I On?
Before you start
working on your
page, it’s important
to know which page
you’re on
Click pages to view
this panel
23. Layouts
If you scroll past your header on a new page you will see the options to “Choose Layout”
or “Drag Elements Here.” It is entirely up to you how you want to lay out your pages
Except with Blog pages, but you can add the same elements into blog posts
If you pick “Choose Layout”
it will open a variety of
templates for you to use.
These are easy as you just
click and type (or change the
picture). You can always add
more elements later on if you
wish
24. Adding Content – The Blue Line
You can choose to add content across
the whole page
OR you can choose to only use half of
the page
HINT! Watch the blue line! It will show you where you are dropping the content
25. Moving Content
To move content, simply mouse over and click the box that appears at the top of the
context box
26. Adding Content: Social Media
As discussed there are two ways to add social media. With Social Icons or by
embedding a code (Widget)
Click anywhere in the S.I. section to open this Manage Icons allows you to click each
outlet and fill in your information.
27. Adding Content: Social Media
You can reorder the
icons so they
appear in a different
order
You can also turn off
the icons by clicking
here:
28. Adding Content: Social Media: Widgets
To embed a widget, you must embed a code. Move the “embed code” box to the page.
For Twitter locate your profile picture, click it, and select “Settings”
Next select “Widgets” the left hand column, when prompted click “Create New” then “Create Widget” – a
code box will appear. Click the code box and hit CTRL A to select all of the code, then CTRL C to copy
Go back to Weebly and paste the code into the HTML area – you may have to select the option to edit the
code
29. Deleting Content
To delete content, simply mouse over and
click the X
It will even ask you a second time just in
case you hit it by mistake
30. How Do I Save?
Oops, power failure! No worries, everything
you do on Weebly is automatically saved. So
no need to click publish until you’re ready to
show the world!
31. Now It’s Your Turn!
You are now well on your way to building an awesome website!
Feel free to ask me any questions, I will do my best to help you find
the answer!
