Creating Your Own Website with
WeeblyMedicine Hat College – Continuing Studies
InstructorJenna WilliamsOffice AssistantDivision of Business, Medicine Hat College
Are you wanting a simple way to create a website? Whether its business related or personal, Weebly is a fun and easy way to create your own website. It is a great tool for “non-techies” to build and maintain their own website. By the end of this class, you will
have created your own website with multiple pages, inserted a theme, fonts, and pictures that will catch anyone’s attention. You will also learn to create a
contact form, insert videos, and even create a blog within your new website!
What is Weebly?
Weebly is a simple way to build a website.
Using drag and drop building techniques it allows for anyone to have the ability to build a unique website.
Weebly Uses
0 Business website
0 Business website with commerce capabilities
0 Personal website
0 Blog
Weebly Special Features
0 Unique themes
0 eCommerce capabilities
0 iPhone and Android apps
0 Ability to link to social media
0 Built-in site analytics
0 Free hosting for up to 10 websites
What we will learn today…
0 PLANNING YOUR SITE
0Organizing your information and getting inspiration
0 CREATING YOUR SITE
0Choose a theme, layout, and custom design your website
0 PUBLISHING YOUR SITE
0Publish your site for free or learn what options are
available for paid services
Weebly Sample Sites
http://www.chairigami.com/
http://rachelbrenke.com/start/
http://www.aprilborrelli.com/
http://353photography.weebly.com/
http://pilgrimdaycamp.weebly.com/
http://clangunn.weebly.com/
Weebly Plans
Planning Your Website
Site Goals
0 When you are starting your site it is very important to
identify what you are hoping to accomplish.
0 You must create a vision and clear goals for what you
want to create
Stating Your Site Goals
0 What are you starting a site for?
0 Example: dog walking, photography, etc.
0 What are your site goals?
0 Example: a dog walking website could have goals such as winning a new dog
walking business, provide info about yourself, provide info about prices,
providing dog care tips, provide contact information for clients who have
more questions.
0List three site goals
Site Information0 What information do you want to include on your site
to support your goals?
0 Example: a dog walking website would want to include a list of services and
prices, info about yourself, photos of dogs, testimonials, dog care tips, contact
page, and links to social media.
0 List at least 3 pieces of information you want to
include on your site.
Site Information0 When creating a site you want to start with 3-5 core
pages that will include your most important information.
0 To add additional information and organize information,
you may include sub-pages
0 Try to have less than 6 core pages on your navigation
menu.
Site Information0 Make a list of what pages/sub-pages you would like to
include on your website.
0 Common pages include:
0Home Page
0About Page
0Contact Page
0Showcase Page
0Blog
Site Information0 Home Page
0 First page visitors see and get a first impression
0 This page explains what your site is about and what you do.
This paragraph should be 50 words or less.
Site Information0 About Page
0 Tell your story in 300 words or less. People want to know
about you and your business.
0 You may include information such as who are you, where
are you, what do you do, and why do you do what you do.
0 Do you want to include a photo of yourself?
Site Information0 Contact Page
0 Would you like a contact form for visitors to fill out?
0 Do you only want to include an email address, mailing
address, or phone number?
0 Do you want to include a map of where you are located?
Site Information0 Showcase Page
0 What is your best work and what are you proud of
displaying to your clients?
0 This page can include sample photos if you are a
photographer, or services and pricing if you are a dog-
walker.
Site Information0 Blog
0 This is where you share your knowledge and provide
information frequently.
0 A blog can help get more traffic to your site by writing
keywords that will lead searches to your site.
0 What do you want your blog to be about?
0 Example: a dog walking blog could indicate tips for taking care of your dog.
Creating Your Website
Basic FeaturesIntermediate FeaturesAdvanced Features
Basic FeaturesSelecting a themeWebsite domainText elements
Picture elementsLayout elements
Site pagesEditing Fonts
Editing headerSwitching themes
Publishing Website
Focus of Site
0 What type of website do you want to create?
0Site
0Blog
0Store
Selecting a Theme
0 You can change your website theme at any time,
therefore, you are not “stuck” with the theme you
select.
0 Note that when you hover over a theme, you may have
the option to change the color scheme.
Theme Background Image
0 You may also choose to change the background image of
the theme you select.
0 Not every theme has the ability to change the
background, therefore, you have to ensure “Supports
Background” is checked off in the design options tab.
https://www.youtube.com/watch?v=8lJ3fhJu8cc
Website Domain
0 After choosing a theme, you will be prompted to
choose your website domain (also know as the site
address).
0 When using a subdomain of Weebly, you have the
option to change your site address. When using your
own domain, you want to be sure that is the name you
want to use.
Adding Elements
0 Elements are building blocks of site such as:
0 To add an element, all you have to do is click the
element, drag it to where you want on the page, and
drop it. You can use as many elements as you want on a
page.
Text Pictures
Videos Headers
Maps And other content
Text Elements
0 A text element is an element that is used to write text
0 As you write, there will be a grey toolbar on top of the
element.
0 This grey toolbar is where you can format your text
with things such as bold, italicize, underline, bigger,
smaller, color, hyperlink, alignment, bullets, numbers,
and remove formatting.
Text Elements
There are three different text elements:
Title Text Text with Picture
Used for adding titles/headers to
a page
Using for adding text to the page
Text element with a place for
an image already built in.
Picture Elements
0 Picture elements include:
0Image
0Gallery
0Slideshow
Uploading an Image0 Once you have placed your picture element, click
within the element on the “upload picture box”.
0 You will be prompted with a dialog box to add a photo
0 Option 1: You may drag and drop an image from your computer
0 Option 2: You may upload an image from your computer
0 Option 3: You may use an image from the Weebly stock photo
database
Sizing an Image0 Once your image has been added to your page, you
can adjust the size of the image by clicking the image
and then clicking in the bottom right corner to drag it
to the size you want.
Formatting an ImageOnce you have clicked within the image, a dialog box will appear
that will allow you to format the image with the following
options:Edit Image Alignment Lightbox Link Spacing Caption Advanced
Opens up a new simple
image editor
dialog box
Adjusts where the picture is located
horizontally on the page
When a website visitor
clicks on the image, it
will be shown larger
Turns the image into a
link
Adjusts the amount of
white space around the
picture
Adds basic text under the picture
Adjusts the border
around the picture.
Editing an Image
If you have clicked “Edit Image”, the image editor dialog box
allows for basic picture editing such as:
Once you have applied the changes, make sure to press “save” in
the top right corner to save the changes you made.
Crop Rotate
Opacity Fade
Effects Add Image
Inserting a Gallery0 A gallery element allows you to view multiple
thumbnails of pictures on your webpage.
0 Once you have inserted a gallery to your page, click
the image to upload multiple images.
Formatting a Gallery0 You can format a gallery by clicking on the element.
This will bring up options such as:
0Add pictures
0Number of columns
0Spacing
0Captions
0Advanced – Spacing, borders, and cropping
Editing a Gallery0 Notice you can also edit each individual picture within
the gallery. These options include:
0Add link
0Add caption
0Delete image
0 You can also drag and drop the images to re-arrange
them.
Inserting a Slideshow
0Simple slideshow
0Thumbnails on bottom
0Numbers on bottom
0Thumbnails on top
0Thumbnails on right
0Double thumbnails
0 You will be prompted with a dialog box to choose your
slideshow style:
0 You will then be prompted to upload your photos.
Editing a Slideshow0 Within the same dialog box you can re-arrange your
photos, add links, add captions, and delete images.
0 You can also edit your slideshow options by changing
the transition, speed, etc.
Layout Elements
0 When you add elements to a page, you will notice they
continue to “stack” on top of each other.
0 By using a Columns Element, you can organize your
site for easy reading.
0 You can add up to five columns to a page to help
organize your site.
Inserting a Column Element
0 If you want to alter the layout of your page, you can
insert a column element just as you inserted a text
and picture element.
0 You can do this by dragging and dropping it to the
location on the page you want the column(s) to
appear.
Layout Tips
0 Columns are used to organize a large amount of
information.
0 Organizing your layout may include:
0Bullets and numbered lists
0Divider or spacing
0Font size
0Photos
Number of Columns0 When you insert a column element, it defaults by
adding only two columns. You can change this by
scrolling over the element and clicking the
appropriate number of columns you want.
0 You can add up to 5 columns in one element.
Column Content0 Once you have the amount of columns you want, you
can drag and drop other elements from the page into
the columns, such as text or pictures.
0 You can also type new text in the columns.
0 You can add as many elements above, within, and
below a column element.
Sizing Columns0 You can adjust the width of the columns by dragging
the blue bar in the middle.
0 Note that the blue bar does not show up once you
have published your website.
Site Pages
0 Whether you use Weebly’s free services or subscribe
to their Pro service, you can add as many pages and
sub-pages as you want.
Adding a Page0 To add a page, go to the “pages”
tab at the top of the screen.
0 Choose “Add Page” to add a page.
0 As you add pages, they will
become part of your navigation
bar.
Editing a Page0 After you have added a page you will see it added on
the left toolbar.
0 The options on the screen allow you to name the page,
choose the header layout, and other advanced
settings.
0 Note you can copy the settings of the current page to a
new page.
Hiding Page in Navigation Menu
0 Sometimes you may want a page on your website, but
you do not want it to show up in your navigation
menu.
0 Example: You want to showcase an “About” page for
your company. Your navigation menu will lead you to
the about paragraph but a link will lead you to a staff
directory page.
Hiding Page in Navigation Menu
0 To hide a page in the navigation menu, you must
choose “Hide page in navigation menu” when you are
creating or editing your page
Arranging Pages0 You can re-arrange your pages by clicking and
dragging them up or down the list.
0 The page that is located on the top of the list is
classified as your “home” page.
Creating Subpages0 You can create a subpage by dragging the page
underneath and to the right of the page you want it to
become a subpage of.
0 Subpages will show up as a drop down menu when
you scroll over the navigation menu
Editing Page Content0 You can edit page content or page order byselecting
the page from the navigation menu.
0 You may also edit page content by clicking within the
Pages tab and then selecting the page from the list.
Then click the “Edit Page” button.
Editing Fonts
0 Every Weebly theme has default fonts for the
following items:
0Site Title
0Paragraph Titles
0Paragraph Text
0Links
Editing Fonts0 To change fonts, click the “Design” tab, and then
“Change Fonts”.
0 You will see that as you hover over each section of
fonts on the left side, the text highlights in blue on
your page.
Editing Fonts
0 You can change font with the following formatting
options:
0Font Face
0Font Size
0Font Weight (skinnier, heavier, lighter, etc.)
0Font Color (you can also enter an html color code)
Uploading a Logo Instead of a Site Title
0 The Site Title appears at the top of every page of your
site (unless you delete it). You can keep the title as
text or insert a logo to replace the text.
0 To replace the text with a logo, hover over the Site
Title on your page.
Editing Link Text0 Links connect people to other pages on your site, on an
external site, email addresses, or files a person may want
to download.
0 You can format links with the following options:
0Visited color (when you link has already been clicked on)
0Hover color (when you scroll over the link, it changes color)
Resetting Fonts0 You can reset all font to its default by clicking the “reset”
button found within each section.
Editing the Header
0 All themes include a default header image at the top
of each page.
Editing the Header0 You can change this image by scrolling over the header and
then clicking “Edit Image” in the right hand corner.
0 A dialog box will appear that will allow you to add an
image or use an original image.
Adding an Image in the Header
0 If you choose to add an image in the header, a dialog box
will open that will allow you to upload an image from your
computer.
0 You may also use an image from the Weebly stock picture
database.
Editing the Header Image0 You can edit the header image with the following options:
0Crop
0Resize (using the little bubbles at each corner of the image)
0Opacity
0Fade
0Effects
0Text (you can add as multiple elements of text to your header)
0Add image (you can add multiple images to your header)
Saving Your Header Image
0 You can save your header image by clicking “Save”.
0 You have three save options:
0Option 1: Save to all pages. This will copy your header to all
pages on your website
0Option 2: Save to this page only. This will save your header to
only the page you are currently working on.
0Option 3: Save to selected page. This will save your header to
only the pages you have selected.
Switching Themes
0 You can switch the theme of your website by going to
the “Design” tab, and then select “Change Theme”.
0 Note that when you scroll over a theme, there are
various color options available for that theme.
0 When you choose a theme, you also have the option to
preview it or choose it.
Refining Themes0 You can search for themes by the following searches
0Styles
0Colors
0Popular
0Newest
0Recently Used
Publishing Website
0 Once you publish your website, it is available for the
public to view.
0 To publish your website, click Publish in the top right
corner of the page.
0 You will be prompted again to name the domain you
wish to use.
Intermediate Features
Block Quote ElementDivider ElementButton ElementMap ElementRSVP/Contact/Survey FormVideo/Audio ElementDocument/File ElementYouTube Element
Flash ElementPoll Element
Social Icons ElementFeed Reader ElementBooking ElementForum Element
Block Quote Element
0 A block quote element is text that is formatted
different than any other text on the page which makes
it stand out.
0 When you click within the block quote, you have
formatting options such as color, alignment, spacing,
etc.
Divider Element
0 A divider element is a line that is inserted on the page
to help separate and organize information.
Button Element
0 A button element is used as a visual link.
0 You can use a button element to link to an external
website or link to a location/page within your
website.
0 You may change the size of the button, the color, the
alignment, the spacing, and the link address.
Map Element
0 To edit the location on the map, click within the map.
A dialog box will then appear that allows you to select
the location you want your map to focus on.
0 You can change map options such as zoom,
width/height of map, position, spacing, advanced
location, and advanced display.
RSVP/Contact/Survey Element
0 All three elements allows visitors to fill out a
form/questionnaire from questions that the owner
created.
RSVP/Contact/Survey Options
0 When clicking within any one of the elements, you can
edit the question by selecting it.
0 You can add other form options from the left side of the
screen by dragging and dropping them to the desired
location.
0 When clicking on the “submit” button, you can change
what e-mail the form is sent to as well as other options.
Video/Audio Element
0 Both video and audio elements are pro features (paid
features). You can try out the element for free before
you purchase the Pro account.
Video/Audio Options0 To upload video or audio, click within the element.
0 You will then be presented with multiple options such as:
0Upload
0Alignment
0Size
0Margins
0Downloadable (guest can right click on video/audio and
download to their computer)
Document Element
0 To upload a document, click within the element to
choose a file to upload.
0 Once you have chosen a file, it will be converted to the
proper format to view on your site.
File Element
0 A file element is an object that website guests can use
to download a document to their personal computer.
0 The element is an icon, not a preview of the actual
document.
YouTube Element
0 To upload a YouTube video, click within the element
and copy and paste the YouTube link of the video you
want part of your website.
Flash Element
0 To upload a Flash (.swf format) file, click within the
element.
0 A flash file is used for multimedia, vector graphics,
and ActionScript.
Poll Element
0 The Poll element uses external software from
PollDaddy.
0 To view poll results you must create a PollDaddy
account by clicking within the element and locating
the Poll ID.
Social Icons Element
0 Social Icons are a fast-track to social media that is
associated with your business.
Social Icon Options0 Click within the element to edit
what icons you want to display on
your website.
0 Copy and paste the link to each
section to link to your personal
social media pages.
Feed Reader Element
0 A Feed Reader displays Internet Newsfeeds via RSS
Feeds.
0 Samples of FSS Feeds are NewzCrawler, FeedDemon,
and Google Reader.
Booking Element
0 The Booking element uses external software from
BrookFresh.
0 BookFresh allows customers to book appointments
directly from your website.
Forum Element
0 A Forum element is an online message board where
discussions take place.
0 You can start new discussions, organize discussions,
and comment on other discussions in a forum.
Advanced FeaturesImage downloads
CommerceCustom HTML
Embeddable ObjectsWidgets
Stats
Search
Blog Page
0 To add a Blog, you have to go to the Pages tab, and add
a new page, then select Blog.
0 A blog is a place where you can record your opinions
and expertise on a regular basis.
Creating a Blog Post0 To start creating your blog, select New Post
0 When creating a new post, notice that you can drag
and drop any element into your post such as text,
picture, link, etc.
0 On the right hand side bar you can share your post on
Facebook and Twitter.
Creating a Blog Post0 On the right side bar, you can also add categories to
each blog post you create. These categories help your
visitors find information easier, and improve search
results.
0 Within the sidebar you can also monitor who
comments on the post: open, approve first, closed.
Blog Settings0 You can edit your blog settings by clicking within the
element, and then click Blog Settings.
0 Here you can edit settings such as:
0Comments
0Posts per page
0Time/date format
0Etc.
Search Element
0 A search element is a Pro Feature (Paid), however, you
can try out the element for free before your purchase
a Pro account.
0 To change search options, click within the element.
0 Options include title, alignment, and spacing.
Embed Code Element
0 Embedded code allows you to enter HTML code.
0Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
0 You can use Embed Code to insert the following:
0 YouTube video
0 Vimeo video
0 Google calendar
Embed Code Options
eCommerce Capabilities
0 Weebly allows you to create a simple storefront on
your website with the same easy drag and drop
techniques.
0 https://www.youtube.com/watch?v=mgdjyHxGg0g
0 A store page allows you to add all of your products into
categories.
0 You can add a store page under the “Pages” tab.
0 Note that a 3% transaction fee is charged if you use a
Free, Starter, or Pro plan. A transaction fee is NOT
charged if you purchase a Business Plan account.
eCommerce Options
Plan # of Products Allowed
Free Up to 5
Standard Up to 10
Pro Up to 25
Business Unlimited
eCommerce Options
0 You can add products by clicking the Products tab on the
left toolbar.
0 Here you can add:
0 Product Name
0 Product Description
0 Product Picture
0 And many other features
eCommerce - Add Products
0 You can move your products around in a different order
in your Storefront.
eCommerce - Edit Storefront
0 You can create categories in within your store and add
products to each category.
0 Categories help a shopper refine what they are looking
for.
eCommerce - Edit Categories
0 Checkout options
0 how will your customers pay?
0 Display options
0 how do you want your customers to view your products?
0 Shipping options
0 what shipping options do you want to provide?
eCommerce - Settings
0 Tax options
0 what taxes will be applied to products and shipping?
0 Email options
0 what type of email do you want to send your customer after
they have purchased a product?
0 Advanced options
0 Add a Google Analytics tracking code
eCommerce - Settings
Website Stats
0 There are two ways to view statistics of your website:
0 If you are within your website, click the squares in the top
right corner and choose Stats.
0 If you are on your Weebly homepage, click More, and then
Website Stats
Website Stats0 Pageviews (everyone)
0 how many pages on your site have been viewed?
0 Unique visitors (everyone)0 how many people have viewed your site?
0 Top pages (pro only)0 what are your top pages?
0 Search Terms (pro only)0 what do people search for to get to your site?
0 Referring sites (pro only)0 what sites are your visitors coming from?
Website Stats
Viewing Mobile Version
0 To view what your website will look on a mobile
phone, click the iPhone image beside Publish in the
top right corner.
0 Here you will be able to edit the mobile version of
your website by dragging and dropping objects.
Adding/Deleting/Copying a Website
0 On your weebly home page you can choose to add,
delete, and copy a site.
0 Beside “My Sites” there is a Add Site button where you
can start a new site.
0 Beside an already created site, you can click more, and
choose to copy or delete a site.
Search Engine Optimization
0 SEO helps to people to find and access your site easier.
0 To get to the SEO options, click settings, and then SEO.
0 To help search engines locate your site better, enter
your site description and keywords in the SEO
options.
SEO-Description & Keywords
0 These fields help search engines categorize your site.
0 The site description is the information that will show
in a search engine.
SEO - Keywords
0 Keywords are only useful if they are used throughout
your site.
0 Keywords are most useful when used in titles because
search engines grab titles before regular text.
0 You may also have keywords under each page in your
site under the advanced settings in each page tab.
SEO - Links
0 When linking to other pages in your website, make sure
that you clarify what you are linking to. Such as:
SEO – Location & Alt-text
0 Stating where you are located (street, city, province,
country) throughout your website will increase
searches within your demographics.
0 Adding alternate text to your photos will help search
engines grab more information and data
SEO - Linking Back to Site
0 Having other sites link back to your site also increases
search capabilities, because the more places you have
linking back to your site, the more Google trusts your
site.
SEO - Blog
0 When you maintain your blog by entering information
often and stating keywords within your blog, search
engines gather data easier.
0 Search engines also like to grab up to date information,
in which an up-to-date blog can help increase traffic this
way.
SEO - Blog
0 When you maintain your blog by entering information
often and stating keywords within your blog, search
engines gather data easier.
0 Search engines also like to grab up to date information,
in which an up-to-date blog can help increase traffic this
way.
SEO – Google Analytics
0 Google Analytics is a free service from Google that
allows you to see how guests are using and interacting
on your site.
0 It tells you total visits, time of visits, bounce rate,
audience, and demographic.
0 http://kb.weebly.com/google-analytics.html
SEO – Google Webmaster
0 Google Webmaster allows you to view how search
engines are interacting with you site and the visibility
you receive from a search engine.
0 It tells you total how many people visited your site
from search engines and other search engine results.
0 http://kb.weebly.com/webmaster-tools.html
Archive/Un-Publish Website
0 To archive a website, click Settings within the edit
view of your website.
0 On the left hand side of the dialog box, you will be
Archive/Un-publish.
0 Once you archive your website you will have created a
.zip version of it.
Extra Features
Restricting Image Downloads
0 Most web browsers allow you to right click on a picture,
and save the image. If you are a professional and would
not like this option available to the public, you can choose
to restrict image downloads.
0 The code that is entered works on most browsers but not
all, therefore, take caution.
Restricting Image Downloads
0Copy the following code into the footer code box under
“Settings” and “SEO” (search engine optimization).
<body oncontextmenu="return false;">
HTML/CSS
0 You can custom edit a Weebly theme by entering your own
HTML/CSS codes.
0 For help on HTML and CSS codes visit:
0 http://themedocs.weebly.com/index.html
0 http://www.w3schools.com/
Google Calendar
0 IF you have a Google account you can embed your
calendar into your website.
0 In your Google account calendar settings, click the drop
down box on the specific calendar you wish to share and
select Calendar Settings.
Google Calendar
0Within your calendar settings you will see a section that
says “Embed This Calendar”.
0Copy and paste the embed code on the right into an
“Embed Code” element in Weebly.
Inserting a Twitter Feed
0 Within your Twitter account settings, click Widgets on the
left hand side.
0 Then click “Create New”
0 You must ensure the username and your twitter account
are matching or you will receive an error message.
0 Click “Create Widget”
Inserting a Twitter Feed
0 Once your widget has been created, an embed code will be
created.
0 Copy and paste the embed code into an “Embed Code”
element within Weebly.
0 Your website will now have a feed of your Twitter account.
Inserting a Facebook Like/Share
0 Within your Facebook account settings, scroll to
the bottom of the page, and click “Developers”.
0 Click “Docs” in the top toolbar.
0 Click “Sharing” in the left toolbar
0 Click “Social Plugins” in the left toolbar.
0 Click “Like Button” in the left toolbar.
Inserting a Facebook Like/Share
0 Enter your site address under the “URL to Share”.
0NOTE: THIS ONLY WORKS IF YOU OWN YOUR DOMAIN.
0 If you would like people to like your Facebook webpage
instead of your website, then enter the Facebook webpage
address.
0 Ensure the “Send” button is unchecked as Weebly does not
support that feature.
Inserting a Facebook Like/Share
0 You can also choose whether you want the profile pictures
of the people who like your page to show by clicking
“Show Friends’ Faces”.
0 The width of the standard side bar is 450, however, you
can change this if your columns differ greatly in size.
Inserting a Facebook Like/Share
0 Then click “Get Code”. Note that you may be asked to
verify your site by either logging in again or Facebook may
send a verification code to your mobile phone.
0 The next step is to select the “IFRAME” tab at the top of
the plug in code dialog box.
Inserting a Facebook Like/Share
0 Copy the code that appears, and paste the code into an
“Embed Code” within Weebly.
0 The code will not appear properly until you publish your
website.
0 Your website will then have the capability to show who
has liked your website from Facebook.
Other Widgets for Your Website
This website describes 50 of the best widgets to include on
your website. Note that most widgets are inserted into your
website by using the Embed Code element.
http://mashable.com/2007/09/06/widgets-2/
Weebly Footer Styles
Weebly has tips on how to create different Footer styles for
your website. Each footer contains different elements that
make your website look even more professional.
http://footer.gallery.weebly.com/index.html
Top Related