Websites with Weebly

Part 1
Documentation November 2013

Weebly takes less than one minute to register and allows users to quickly and easily create websites that are hosted on the Weebly servers for free. ore than 1! million websites have been created using Weebly. "f the free basic version is not sufficient# a $ro version is available that %rovides advanced features for a monthly or annual fee. &he Weebly website editor uses a Drag and Drop interface. &his interface allows users to quickly edit %ages on their site and easily add new content while immediately seeing the real'time results of their work. (ven com%uter users with little e)%erience can easily create %rofessional looking websites using Weebly. *sers need only an "nternet connection# a web browser +,hrome# -irefo)# "nternet ()%lorer.# and a valid email address to create a Weebly website. /ecause it o%erates e)clusively through web browsers# Weebly is fully com%atible with all o%erating systems including icrosoft Windows# ac 01 and 2inu)# so there3s no need install or u%grade software. Weebly websites work on all com%uters# tablets and smart%hones. "n this three'%art series %artici%ants will4 1. 2. 3. 5. 0%en an account on Weebly.com 2earn to use the building blocks and elements to create a website with unique web %ages $ublish a website with a single click *se a subdomain of Weebly.com to begin6 later a %ersonali7ed domain may be %urchased if needed

Signing Up for a Weebly Account Note4 "t3s necessary to have a valid email address to sign u%. 1. 0%en Google Chrome +Note4 0n the library com%uters the ,hrome icon can be found in the taskbar on the bottom of the screen or on the deskto%..

2. &y%e weebly.com into Chromes Address bo # then %ress the

!nter key 3. 0n the left side of the screen is a blue bo) that has an orange Sign Up. "ts #ree$ button 5. &y%e in the #ull name and !mail address in the a%%ro%riate bo)es. !. ,hoose an easy to remember %assword at least 8 characters long 9. &y%e the %assword into the %assword bo). ,lick the &range 'utton

Creating a Website
&he first ste% in creating a Weebly website is choosing a )heme for the site. Weebly has over 150 themes to choose from. &hemes are grou%ed by categories designed for %ersonal# academic or business users. "t can be difficult to choose a theme before any other work is done on the website# but selecting a theme is the starting %oint. &o select a theme4 1. 0n the Choose a )heme %age# scroll to find the desired theme 2. ,lick on the Choose button below the desired theme to select it :fter %icking a theme# give the site a title. &his title should reflect the e)%ected content of the website. &he title is different than the domain name# which is what %eo%le ty%e into the address bar of their web browser in order to get to the site. &he title of the web %age is the main title that shows at the to% of the %age once %eo%le get to the website. &his can always be changed if needed later on. "f a website title doesn3t come to mind# use a tem%orary title. uch like the theme# the title can be easily changed later on. 1. &y%e in the name of the website into the !nter Website )itle bo)# such as Toms Travel Photography or if it is a %ersonal website# ty%e in the name# such as Thomas Trainer 2. ,lick on Sa*e )itle ,hoose the site;s address +also called a domain.. &he easiest a%%roach is to select a free subdomain of Weebly.com using the first o%tion. 1. &he screen asks for the desired domain to be used by this website &he first o%tion# Use a Subdomain of Weebly.com# is the only free o%tion &he second o%tion# +egister a New Domain requires a yearly fee which will u%grade the website to the $ro version

&he third o%tion# Use a Domain -ou already &wn also has a yearly fee

2. ,lick the Use a Subdomain of Weebly.com bullet then ty%e in a desired domain sub'name such as thomastrainer 3. :s the sub'name is ty%ed into the bo)# Weebly will indicate whether or not the domain name is available. "f the desired sub'domain name is available# a green :vailable checkmark a%%ears. "f the green checkmark doesn3t a%%ear# another sub'domain name must be selected. 5. ,lick the orange Continue button in the bottom right corner of the window to com%lete the %rocess !. /uttons for %lan my site or 'uild my site are located on the Welcome to Weebly screen. Site %lanner hel%s users organi7e the site with ti%s# e)am%les and video tutorials. Site 'uilder enables users to quickly and easily start develo%ing the site using Drag and Drop !lements 9. ,lick the 'uild my site button <. &he Weebly !ditor o%ens to the home %age +or first main %age. of the website showing the selected theme. Weebly allows for drag and drop website creation. (ach of the four tabs across the to% of the %age has its own collection of tools or widgets to hel% modify the site

)abs/ 'uild0 Design0 %ages0 Settings

Drag 1 Drop !lements

Na*igating Site 'uilder 1. &he tabs across the to% of the Site 'uilder include the following4 'uild = includes the elements in the left sidebar such as 'asic# Structure# 2edia# Commerce and 2ore Design = includes Change )heme# Change #onts# Social "cons# %hone Number and o%tions to change the 3)24 or CSS. "ncluded in this tab is a Search 'o o%tion. &his is available only for those who %ay for a %ro Account %ages = includes the o%tions to Add a %age# Change the %age Name# !dit the %age 4ayout# 3ide the %age +from the menu.# %age %assword %rotection# and Ad*anced Settings. Settings = includes General Settings such as the Site Address +*>2. and Site )itle6 S!& +1earch (ngine 0%timi7ation.6 ecommerce + erchant :ccounts.6 2obile +to enable mobile' o%timi7ation.6 !ditors +to give %ermission to others to edit the website.6 Archi*e +create a 7i% archive of the website.. 3elp +the question mark. = links to Site %lanner# Support Center# +eport a 'ug

2. While in the %rocess of com%leting the website# or when it is done# it3s %ossible to toggle between the Computer Display and the 2obile Display to check how the website looks on each. 3. %ublish 'utton = "n the %rocess of building the site# from time'to'time click on the %ublish button. &his makes it %ossible to check how the work looks away from the !ditor by o%ening an additional browser tab and in%utting the web address +*>2. for the new site. 5. !ditor 2enu = includes #ull Screen# 2y Sites +if more than one website on Weebly.# Site Stats +statistics.# Domains +register and %urchase a %ersonali7ed domain. and ! it !ditor 'egin with the 3ome %age With Weebly it3s %ossible to have a different layout for individual %ages. :ll of the web %ages can share the same layout or varied layouts can be selected for different ty%es of %ages. any Weebly themes include a %hotogra%h in the header to %review how a %hoto looks in that area of the %age. /ased on the theme3s %hoto# and before inserting a different %hoto# choose the %age layout4 : tall header ' this layout is the default for each new %age. "t includes a section at the to% of the %age where a large header image can be u%loaded : short header ' this layout includes a smaller header area at the to% of the %age for a shorter header image No header = there is no header area that would dis%lay a %hoto 2anding %age ' this layout includes s%ace for a header image# a title# a subtitle message and an action button that can be linked to any other %age of the site. &he 2anding $age is often used for a home %age layout. Clic6 on gear

&o decide on a layout4 1. ,lick on the gear in the u%%er right corner of the header %hoto 2. 1elect an o%tion 3. Decide if the %review of that o%tion a%%ears as desired

5. "f the selected o%tion isn3t what is wanted# re%eat and select another o%tion "f %hotogra%hs are being used in other %laces on a web %age or if the selected theme includes a design element that serves as a header# select No header. No matter which o%tion is selected# it can always be changed later as the website develo%s. &he e)am%le %age theme shown below includes a background that serves as a header for the %age. "t includes the title Thomas Trainer because that it is the name of the website. 0ther site titles might be Susies Salon, Zee Dog Grooming, etc.

Site )itle

)e t !lement

Adding New %ages to the Site

1. ,lick on the %ages tab to make it the active tab 2. ,lick on the Add %age 7 button on the left side of the window 3. 1elect Standard %age 5. &y%e in a name# such as About, for the new %age in the %age Name bo) on right side Note4 When choosing a name it is best that the name indicates the content of the new %age

!. ,lick the Sa*e 1 !dit button at the bottom right of the screen 9. &he 3ome %age o%ens with the name of the new %age added to the navigation menu. <. ,lick on the name of the new %age. About is loaded into the Weebly editor allowing this %age to be edited.

8. :dd two additional %ages. &em%orarily label them $age 1 and $age 2 if uncertain how they3ll be used. &he name of a %age can be changed or deleted at any time. 1elect No 3eader for each of the additional %ages. &ption/ Add a 'log %age Websites don3t all have blogs# but it is easy to add a blog with Weebly. &o create a blog4 1. ,lick on the %ages tab 2. ,lick the Add %age ? button 3. 1elect the 'log %age o%tion 5. :t %age Name# ty%e the name that will a%%ear in the site3s navigation !. ,lick Sa*e 1 !dit to add content &he new blog starts with a sidebar with some default content that is easily changed# with an o%tion to add a New $ost. &ption/ Create a %age Na*igation 4in6 to an ! ternal Website

@enerally the links in a website3s navigation link to a %age within that site. Aowever# some situations may warrant a navigation link to another website# such as a user3s twitter %age# an outside blog or a %artner3s site. :ny %age that is directly linked to an e)ternal site has an e)ternal link icon +the forwarding arrow. added to the %age listing. &o create a navigation link that leads to another site4 9. ,lick on the %ages tab <. ,lick the Add %age ? button 8. 1elect the ! ternal 4in6 o%tion B. :t %age Name# ty%e the name that will a%%ear in the site3s navigation 10. :t ! ternal Site# ty%e the full *>2 +web address. for the site to be linked 11. 1elect &pen lin6 in a new tab to assure users return easily 12. ,lick the Sa*e 1 !dit button

Adding Social 2edia "cons to the Website (ach theme includes social media buttons that are designed s%ecifically for that theme. &hese buttons a%%ear in the u%%er right of the theme and can also be added anywhere else on the site by using the Social "cons element found under the 2ore category of elements. &hey can be used to link to a -acebook fan %age or %rofile# a &witter feed# @oogle?# $interest# and many other services. 1croll over the buttons to edit them. (ither ty%e or co%y C %aste a link to the a%%ro%riate %age on -acebook# &witter# etc. Delete any icons you don;t want to use by clicking the D)D button to the right of the field +deleting an icon removes the button in the editor# but note that leaving the link field blank will make any of the icons disa%%ear on the %ublished site. and drag links u% C down using the movement controls on the left to change the order in which the icons a%%ear. Adding !lements to a Web %age
!lements are the building blocks of a Weebly website. :dd te)t# %ictures# video and other content via the drag and dro% elements. Adding a )itle to a Web %age Using 'asic !lements 1. ,lick on the 'uild tab if necessary to make it the active tab 2. ove the cursor to the left of the web %age and the 'uild !lements come into view 3. $oint to the )itle icon6 click and hold down the left mouse button while dragging the icon over to the %age 5. When the icon is in the desired location# such as Eust below the blue line# release the mouse button to dro% the element into that location

!. With the )itle !lement in %lace# click in the Clic6 to !dit bo) to ty%e Welcome Wor6ing with an Acti*e !lement 1. &o activate an !lement# hover the cursor over an element until the blue borders and the editing tools for that element a%%ear 2. When an element is active# an Arrow a%%ears in the left corner of the active element. ,lick on this arrow to move or co%y the element to another %age. 3. "n the middle of the element is a 3andle that enables moving the entire element to another %art of the %age. 5. "n the right corner of the element is an ; which will delete the element Adding )e t to the Web %age 1. ,lick on the 'uild tab if necessary to make it the active tab 2. ove the cursor to the left of the web %age and the 'uild !lements come into view 3. $oint to the )e t icon# then click and hold down the left mouse button while dragging the icon over to the %age 5. When the icon is in the desired location# such as Eust below the blue line# release the mouse button to dro% the element into that location !. With the title in %lace# click in the Clic6 to !dit bo)6 ty%e This is my text sample &he black toolbar at the to% of the element is the )e t )oolbar allowing basic changes to the formatting of the te)t. &o use the toolbar4 select the te)t to edit by highlighting it then click the a%%ro%riate button to make a change.

)e t !ditor actions from left to right4 'old te t# Italici e text# *nderline te)t# make te)t bigger# make te)t smaller# change te)t color# create a link# adEust the alignment of all te)t within the element# create bulleted lists# create numbered lists# remove formatting# undo and redo.

<

&o add more te)t to the %age continue writing in the same element# drag another %aragra%h element onto the %age# or use one of the other te)t elements4 )itle/ *sed for adding titles C headers to a %age )e t/ : %aragra%h element that can be used for a single line of te)t or multi%le %aragra%hs "mage 7 )e t/ : %aragra%h element with a %lace for both a title and an image built in

:ll of the above elements use the same te)t editing toolbar. 1tack as many elements as needed on the %age. 0ne thing that cannot be done is change the font family to a different style. &he Design )ab controls this %articular setting. "ncluding &ther )e t !lements Weebly offers additional ways to use or share te)t4 the 'loc6 =uote and 4in6ing to or !mbedding other documents. 'loc6 =uote : bloc6 >uotation +also known as a long >uotation or e tract. is a quotation in a written document that is set off from the main te)t as a %aragra%h# or bloc6 of te)t# and ty%ically distinguished visually using indentation and a different ty%eface or smaller si7e quotation. *se a block quote to have the te)t stand out from the rest of the te)t both above and beneath it# usually when quoting another %erson or source. &he block quote element is found under the 2ore category on a regular %age and under the 'asic category of elements when editing a blog %ost. *sing this element is a matter of dragging it between two other elements. &he block quote element can3t be dragged into the middle of a single %aragra%h element. "nstead# the block quote element must be used between two other elements.

(diting a block quote is like editing any other te)t element using the same black toolbar with basic editing functions.

Example of Block Quotation

&he look of a block quote is based %artially on the style of the website theme. 1ome themes have more subdued block quotes and others are bolder. 0utside of the basic changes available via the element te)t editor there;s no o%tion to alter this look from theme to theme. 4in6 to a Document or &ther #ile

(@

/oth free and %ro users can u%load and link to many ty%es of documents. 0ne way to link to a file# document or image is to link it to te)t on the web %age. &o create a )e t 4in64 1. While in the 'uild tab# drag and dro% the )e t element onto the %age 2. ,lick inside the te)t bo) at !lic" here to e#it 3. &y%e the desired te)t 5. Aighlight the te)t !. ,lick the 4in6 icon in the te)t editor menu

4in6 icon

9. "n the dialog menu that o%ens# select #ile on )he Website <. ,lick on Upload a new file 8. *se the &pen #ile dialog to locate the file to o%en B. ,lick the &pen button 10. &he link is live and clickable on the %ublished site.

!mbed a Document to a %age :dd a $D-# Word file# or other document directly to a %age using the !mbedded Document element +%rovided by Scrib#.. &his element allows viewers to read and scroll through a document# but they will not be able to %rint the document. &o %rovide %rint ca%ability# use a &e)t 2ink to the document or file. &o embed a file4 1. While in the 'uild tab# scroll to the 2edia grou% 2. ,lick on# drag and dro% the Document element onto the %age

3. ,lick in the blank document

((

5. ,lick on Upload a new file !. *se the &pen #ile dialog to locate the file to o%en 9. ,lick the &pen button <. &he document takes a few minutes to load into the Scrib# widget 8. &he document a%%ears on the %ublished site

%ublishing the Website

&he final ste% in creating a website with Weebly is publishing it. $ublishing a website doesn3t necessarily mean it3s com%letely finished# but it has enough content to at least get started. /y %ublishing the website# it will be u%loaded to the web. "nformation can continue to be added and changed even after the site has been %ublished. 1. ,lick on the orange $ublish button on the right side at the to% of the screen. 2. When %ublication is com%lete# the Website $ublished screen o%ens 3. "f a domain is available for the name of the site# Weebly offers an o%%ortunity for %urchase 5. ,lick on the buttons for 1hare on -acebook or 1hare on &witter to share the site in social media !. "f a domain is not needed andCor social media sharing isn3t desired# click the ; in the right corner to e)it the menu

Note4 ,ontent can be added to the new website through the editor whenever wanted. ,licking the %ublish button %ushes the new content to the live website. While working on the website it is %ossible to un%ublish the site by selecting Settings A Unpublish.

(,