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