buku panduan yola tahap 1

7/30/2019 Buku Panduan YOLA Tahap 1

1/68

1

INSTITUT PENDIDIKAN GURU

KAMPUS KENINGAU

Bengkel Pembinaan Laman Web Respositori

Bahan Pengajaran & Pembelajaran

( Tahap: SATU )

DONATUS JUSTIN

JABATAN PENYELIDIKAN DAN INOVASI PROFESIONALISME KEGURUAN

JABATAN SAINS DAN MATEMATIK

2012


2/68

2

Table of ContentsCreating your first site ................................................................................................................................... 5

How can I edit the category for my site? .................................................................................................. 5

Getting Started .......................................................................................................................................... 6

Adding Content ......................................................................................................................................... 8

Tutorial: Personalize your Style .............................................................................................................. 11

Banner image ...................................................................................................................................... 11

Upload and edit the banner image: ........................................................................................... 12

Apply to all pages: ......................................................................................................................... 12

Changing to default: ...................................................................................................................... 13

Page Background............................................................................................................................... 14

Edit the page background color:................................................................................................ 14

Upload your own background image:............................................................................................ 14

Apply to all pages: ............................................................................................................................ 15

Changing to default: ......................................................................................................................... 15

Dos and Don'ts of website building ........................................................................................................ 16

Music ..................................................................................................................................................... 16

Moving Images.................................................................................................................................... 16

Text ........................................................................................................................................................ 16

Navigation ............................................................................................................................................ 17

Web Address ....................................................................................................................................... 18

Pictures................................................................................................................................................. 18

Design ................................................................................................................................................... 19

Advertising........................................................................................................................................... 20

Naming Tips ............................................................................................................................................. 21

Tutorial: Preparing to Create a Website ................................................................................................. 22

Yola's nine tips for preparing to create a website:........................................................................... 22

1. Visit our Get Satisfaction Community and start participating! ............................................... 22

3. "Websites I love" research.......................................................................................................... 23

4. Content .......................................................................................................................................... 23

5. Navigation planning ..................................................................................................................... 24


3/68

3

6. The Yola Style gallery - putting it to good use! ........................................................................ 26

7. Using the Yola File Manager...................................................................................................... 26

8. Using the "Save Page As" function ........................................................................................... 26

9. Create a test site in your account .............................................................................................. 27

How do I change the name of my site? ................................................................................................... 28

Adding pages and tabs to the navigation .................................................................................................... 29

Moving and editing the tabs in your navigation menu ........................................................................... 29

How do I add more tabs/links to my navigation? ................................................................................... 31

Tutorial: Creating Subpages .................................................................................................................... 33

Step 1: Decide on Your Categories ................................................................................................... 33

Step 2: Create Your Pages ................................................................................................................. 33

Step 3: Use the Page Manager to Organize Your Pages .............................................................. 34

Step 4: Create Your Links ................................................................................................................... 35

What is a widget? ........................................................................................................................................ 37

Using widgets to add content ................................................................................................................. 37

Tutorial: What's a Widget? ..................................................................................................................... 38

"What is a widget?" .......................................................................................................................... 38

"What does a widget do?" ............................................................................................................... 38

"Why do I need a widget, anyway?" .............................................................................................. 38

Using Widgetbox Gallery widgets: ..................................................................................................... 39

Using a Google Gadget widget: ......................................................................................................... 40

Using a Form widget: ........................................................................................................................... 41

Using the HTML widget: ...................................................................................................................... 43

Where did the widget sidebar go? It was there a minute ago! .............................................................. 45

How to delete a widget? ......................................................................................................................... 45

Changing styles ............................................................................................................................................ 46

The Yola Style Guide! .............................................................................................................................. 46

Can I add my own style/template or customize one on Yola? ............................................................... 47

I want a blank style ................................................................................................................................. 49

Changing Styles ....................................................................................................................................... 50

Adding Pictures ........................................................................................................................................... 51

How do I add pictures to my site? .......................................................................................................... 51


4/68

4

Using the Picture Gallery Widget ................................................................................................... 51

Use the Picture Widget ..................................................................................................................... 51

Use the Text Widget........................................................................................................................... 53

Managing Files ............................................................................................................................................ 54

Uploading and adding files ...................................................................................................................... 54

Creating folders to manage your files ..................................................................................................... 55

Tutorial: Using the File Manager ............................................................................................................. 56

1. How to Access the File Manager:.................................................................................................. 56

2. Uploading Files into the File Manager: ......................................................................................... 56

3. Uploading Multiple Files at Once:.................................................................................................. 57

Option 1.............................................................................................................................................. 57

Option 2.............................................................................................................................................. 58

4. Creating Folders in the File Manager: .......................................................................................... 58

5. Editing Images in the File Manager using Picnik: ....................................................................... 58

6. Moving Files Between Folders:...................................................................................................... 59

7. Deleting Files from the File Manager: ........................................................................................... 59

8. How can I search for files in the File Manager: ........................................................................... 59

9. How to add the contents of your File Manager to your page: ................................................... 60

Adding Images: ................................................................................................................................. 60

Adding Files:...................................................................................................................................... 61

10. Understanding file and storage limits: ........................................................................................ 61

Yola Free: .......................................................................................................................................... 62

Yola Silver: ........................................................................................................................................ 62

Publishing Your Site ..................................................................................................................................... 63

How do I publish my website to the internet for everyone to see? ....................................................... 63

What will my URL be? ............................................................................................................................. 64

Tutorial: Publishing Your Site .................................................................................................................. 65

Step 1: Select a Publishing Option .................................................................................................... 65

Step 2: View your Published Site ....................................................................................................... 66

Step 3: Editing your Published Site ................................................................................................... 66


5/68

5

Creating your first site

How can I edit the category for my site?

The website category you select at the beginning of the site creation process allows us to

present you with a template and content suggestions to get you started with your site. You're

not limited to the initial style and content though, and you can easily add pages or change

your style following the instructions below.

To add more pages to your site, on the main menu, click on Page > Add New Page. You will

then be able to select the type of page you want (blank or one of the preset pages), give

your page a name and the heading you would like to have on the page. You can also

choose to have your page on the main navigation, and/or or apply password protection.

Once you've made your selections, then click "OK".

To change the style:

a) Click on Style > Change Style in the main menu.

b) A dialog box will open with a variety of Premium Styles you can choose from.

c) If you'd prefer to select a free style, select the "Free Styles" link on the left and all of

those styles will appear.

d) Mouse over the various styles to preview them.

e) When you've decided on the one you would like to use, click "Continue" (or "Try style for

free" or "Upgrade to Silver" to have unlimited access to all Premium Styles).

f) The new style will load onto your site.

g) Please remember that if you have added your own banner to the previous style, it will

not be added to the new one - you will need to re-add it to your new style (if the style has

the option).

If you are interested in seeing what sort of site will be generated if you choose a different

category you can go through the site creation process from the beginning again by creating

a new site. You are allowed up to five sites with our Yola Free account.


6/68

6

Getting Started

When you sign up for a Yola account, you will be taken through the steps to create your first

site quickly and easily!

To get started, simply click on the red "Get started now" button on the Yola website, and a

sign up dialog box will pop up. Fill in your details, and, once done, click on "Get started

now". Once you've signed up for your Yola account, you'll be taken to My Yola. This is

where you can create and manage your websites, domains and subscription packages.

a) To start creating your first site, click on the red "Create new site" button in the "Need

help getting started?" box (Figure 1).

b) Enter your business's name or a name for your site. If you're not sure, don't worry, you

can always change it later!c) Choose a category that suits the type of website you are interested in building from the

drop-down menu provided.

d) Click on "Build it".

e) Your site is ready! You can choose to add your address information to your site, preview

your site or you can simply click on the "X" in the top-right corner to begin building.

f) You'll see that your new site has a basic layout with some Text and Picture Widgets.

Depending on the category you've selected, a variety of pages will be pre-selected for

your site based on your Website Category selection.g) Now you can start adding your own content and pictures, as well as changing the default

style. The style you select will be used on every page of your site and determine the

"look and feel" of your pages. Some styles are available in different colors and have

additional customization options, like the ability to change the background or banner

image. For more information on the styles available in Yola, see: Yola Style Gallery.

Don't worry - changing your style only changes the appearance of your site - it won't

affect your content!

h) We have an extensive collection of tutorials to help you get started with adding contentto your site. You can find them here: Basics - Getting Started.

i) When you are happy with your site click the green "Publish to the web" button.

j) From the publishing dialog box, you can now select to publish to a custom domain, a

free Yola sub domain or a domain you already own (this is only available to Yola Silver

account holders, and certain partner programs). To learn about the best choice for you


7/68

7

please see Publishing Options. Once you make your selection, your site will be live on

the internet!

Please note: You can create up to five sites with your Yola Free account and you will be

able to repeat the steps above whenever you create a new site. So don't worry too much

about making mistakes - you can always make changes or start fresh when you need to.

Figure 1


8/68

8

Adding Content

Once you complete the site creation process, you can begin customizing your site. We have

given you a head start with a style, a basic layout with Text and Picture Widgets, some

content to help you get started and your business address (if you opted to add that) - all ofwhich you can begin editing right away.

First off, you can change the layout of your page by clicking on the "Layout" button on the

main menu (Figure 2). Selecting a layout will make it much easier to control the exact

position of your content and will make your page look more attractive:

Figure 2

In Yola, you drag widgets (components) from the Sidebar (Figure 3) on the right to start

filling your page with text, pictures, video, slideshows and much more. Each type of content

has its own widget.

To add a widget to your page, (What is a Widget?) click on the icon on the right of your

screen and hold the mouse button down. Move your mouse pointer over onto your page.

When you see the blue box outline appear, release your mouse button and the widget willbe inserted into your page. If you are having difficulty with this, you can also double click on

any of the icons and the widget will automatically be added at the bottom of your page.

Here are two basic ones to get you started:


9/68

9

a) Text

Before you can start typing on your page you need to drag and drop a Text Widget onto

the page. This will create a text box for you to start typing in. Drag and drop the icon

marked "Text" onto your page, or double click on it. Once you have dropped this widget

onto your page, simply click inside the box and start typing.

Please note: Whenever you have a Text Widget selected on your page, you will see a

Text Editing Toolbar along the top of your screen that allows you to format your text.

This toolbar is only present when you need it, so don't worry if it suddenly "disappears" -

this just means that you have a different item selected. Click on a Text Widget and the

toolbar will come right back!

b) Pictures

You will probably want to add pictures from your own computer to your website at some

stage. One quick and easy way to do this is with the Picture Widget. Simply drop one of

these on your page (the icon marked "Picture", located in your "Basic" folder) and you

will be taken through the steps of adding a picture.

You can also add a gallery of pictures, using the Picture Gallery Widget. For more

information about this, take a look at this tutorial: Using the Picture Gallery Widget.


10/68

10

Figure 3

Widget


11/68

11

Tutorial: Personalize your Style

Yola offers you the ability to personalize the look of your website by giving you the tools tochange the banner image, page background and remove the Yola Link. Customizing your siteusing these features can help you create a more polished and unique site which will help you

stand out from the crowd!

Banner image

If the style you select supports a custom banner image, simply mouse over the banner area untilthe blue box appears. Clicking directly on the banner image brings up a dialog box with all thebanner editing options (Figure 4).

Figure 4

Banner size:

Each banner has recommended dimensions which can be used to achieve the best result.Although you can edit the banner image once it has been uploaded, it's best to upload an imagethat matches the recommended banner dimensions.

To find the banner dimensions, look to the bottom of the dialog box that appears when you clickwithin the banner area. On this particular style, you can see that the recommended banner sizeis 978px by 263px.


12/68

12

Figure 5

Upload and edit the banner image:

1. Click anywhere on the banner image to open the dialog box.2. Click on "Change Banner Image" and a dialog box will open (Figure 5).3. You can select to "Upload New Banner", "Browse Uploaded Banners" or "Find Stock

Banners".4. Select the banner image and the Banner Editor will open where you can scale your image to

fit into the banner area perfectly.5. Make the changes and click on the "OK" button. The banner image will display in the banner

area of your page.

Apply to all pages:

Yola gives you the option to upload a different banner image on each page of your site, or applythe same banner image to all pages. To apply the banner image to all the pages on your site:

1. Click inside the banner, and then click on "Apply to All Pages" (Figure 6).2. A dialog box will open asking you to confirm whether you would like to apply the change to all

the pages on your site. Click on "Apply and Save" if you would like to go ahead.


13/68

13

Figure 6

Changing to default:

Don't like the result? No problem! You can easily revert to the default banner image. Click insideyour banner and then click on "Use Default" on the dialog box that opens up (Figure 7). This willbring back the original banner image that came with the style. You can use this image, or startover by uploading a new one. To change the banner image on all your pages back to the defaultbanner, follow the above steps and then follow the "Apply to All Pages" outlined above.

Figure 7


14/68

14

Page Background

If the style you select supports a custom background, Yola gives you the option to either changethe background color of your style or upload your own background image, or both!

Edit the page background color:

1. On the main menu, click on Style > Edit Background > Change Background (Figure 8).2. A dialog box will open, click on the down-arrow next to "Background Fill" and the color picker

will open.3. Select the color you would like to use and click "OK". If you know the Hex value of the color

you would like to use, enter it into the space provided.

Figure 8

Upload your own background image:

1. On the main menu, click on Style > Edit Background > Change Background.

2. A dialog box will open, check the box next to "Use a background image".3. You can now either upload a file from your computer or browse for an image file from the File

Manager.4. Once uploaded, customize your settings - whether you would like the image to tile (repeat),

where you would like the background to be located on the page and if you would like thebackground to scroll with the page or not.


15/68

15

Figure 9

To go back and edit the background you've added, on the main menu, click on Style > EditBackground > Change Background (Figure 9).

Apply to all pages:

You can choose to apply the same background to all of the pages on your site instead ofchanging the background on each page individually:

1. On the main menu, click on Style > Edit Background > Apply to All Pages.

2. A dialog box will open asking you to confirm whether you would like to apply the change to allthe pages on your site, click on "Apply and Save" if you would like to go ahead.

Changing to default:

If you would prefer to change the banner image on your site back to the default background ofthe style, on the main menu, click on Style > Edit Background > Use Default. To change thebackground on all your pages back to the default background, follow the above steps and thenfollow the "Apply to All Pages" outlined above.


16/68

16

Dos and Don'ts of website building

Music

Don't add music to your site that playsautomatically. This is the fastest way to getsomeone to leave your site. Remember thatpeople might be browsing the internet froma place where sound is unwelcome (anoffice, library etc) or they might have theirown music playing and yours will only

interfere. If they can't find an obvious way toturn the music off, they will simply closeyour site immediately!

If you have a music site, give your visitors amedia playerand allow them to turn it on andoff as they wish.

Moving Images

Try not to add objects that flicker and flash.These are harsh on the eyes and cannegatively affect people who suffer fromcertain types of headaches and seizures. Itcan also make your site look childish andunprofessional.

Use attractive, high quality images fromsources such as Fotolia. We have a greatintegration with Fotolia where you can buyFotolia stock photography.

Text

Copying and pasting fancy fonts will onlyshow in some browsers, and they couldbreak your page.

Use simple, consistent and carefullyselected, browser-safe fonts. The Yola texteditor contains the complete set of browser-safe fonts, which means that they will show upcorrectly in any browser. If you want to use afancy font, the only safe way is to first save itas an image (transparent png) and thenupload it to your site.

Don't center large portions of text. Thislooks unprofessional and untidy. Left align your text. This looks neater and iseasier on the eye.

Don't justify your text. This might give you aneat looking block, but it is very hard toread justified text on a screen. Justified textis appropriate for newspapers andmagazines, but not for websites! Reading

Left or right-align instead.
http://www.yola.com/customer-support/p/adding-editing-content/music/music-players/7/45/101http://www.yola.com/customer-support/p/adding-editing-content/music/music-players/7/45/101https://www.fotolia.com/http://www.ahfx.net/weblog/22http://www.ahfx.net/weblog/22https://www.fotolia.com/http://www.yola.com/customer-support/p/adding-editing-content/music/music-players/7/45/101http://www.yola.com/customer-support/p/adding-editing-content/music/music-players/7/45/101


17/68

17

text on a screen is different to reading on apage, and the human eye needs the rough

edges to help keep its place on the screen.

Another concern is that justified text doesnot display in the same way in differentbrowsers.

Have a look at this article: Be Careful WhenYou Justify.

Adding large amounts of text that runacross the whole screen is hard to read andpeople will lose interest.

Use the "Layouts" option in Yola to break yourcontent up into neat, readable blocks (shortparagraphs). A good rule of thumb is: New

idea = New paragraph.

Don't use a lot of color highlighting for yourtext. It makes your site look untidy andunprofessional.

Keep your formatting simple, clean andreadable.

Try not to use color combinations of textand background that make the text hard toread. If a website isn't easy to read, mostpeople will simply leave.

Check to see that your text displays clearlyagainst your background image. If not, changethe color of one or the other.

Using ALL-CAPS and Italics is seen as

shouting and rude (ditto for too manyexclamation points). Italics should be usedsparingly to highlight a single word orphrase only. Italics are hard to read on theweb so definitely not suitable for largeblocks of copy.

Steer clear of all-caps completely and use

italics sparingly to highlight one or two keywords at a time.

Don't add text that is too small to read. If avisitor has to squint or get close to readyour text, they most likely won't.

As a rule of thumb, text smaller than 11pt istricky to read, so go for a font larger than11pts.

Avoid underlined text (unless it's a link). It

may cause confusion as traditionallyunderlined text is linkable.

Use underlined text for links only.

Navigation

Don't add too many pages to your mainnavigation.

Organize your site into categories andcreate or submenus.
http://www.netmechanic.com/news/vol5/html_no10.htmhttp://www.netmechanic.com/news/vol5/html_no10.htmhttp://www.yola.com/customer-support/p/site-structure-design/page-layout/selecting-the-page-layout/18/31/458http://www.yola.com/customer-support/p/site-structure-design/page-layout/selecting-the-page-layout/18/31/458http://www.netmechanic.com/news/vol5/html_no10.htmhttp://www.netmechanic.com/news/vol5/html_no10.htm


18/68

18

Avoid unclear navigation or over-complexnavigation. Make sure that it is easy to

understand what each page in yournavigation is for.

Think carefully about your navigationlabels/section headings. Keep them short and

to-the-point. Do you have a lot of content thatyou want available at a top level? Then selecta style that works with a vertical navigation.

Think carefully about using horizontalnavigation. This really limits the number ofpages that you can add to your navigation.

If you select a style that uses a horizontalnavigation bar, be sure to keep yoursection/page labels concise. A maximum ofseven labels has been found to be effective.Otherwise choose a style with a verticalnavigation system.

Web Address

Don't use dashes in your domain name -people forget where to put the dash.

Use one word domains wherever possible.

Don't use long, complicated domain names. Select short, easy to remember and spelldomain names, you'll be more likely to getrepeat visitors.

Pictures

Try not to upload a background image thatinterferes with the content on your page.

Busy, distracting backgrounds make thetext hard to read.

Use simple background colors, textures orpatterns that enhance the appearance of your

page without dominating it.

Don't upload images with large file sizes.This makes your site slow to load. Peoplehave very short attention spans and willoften leave a site if it takes too long to load.

Keep your images to 20-100KB each,depending on how many you have on thepage. Use a resolution of 72dpi for webimages.

Avoid using meaningless, useless,nonsensical visuals or visuals just for thesake of it. Only put images on your site thatrelate to the site's content.

Visuals should help enhance your content anddirect visitors through important areas ofcontent.

Avoid silly animations or clipart. They makeyour site look unprofessional.

Use attractive, high quality images from ourintegrated Fotolia library or sources suchasiStockphoto.

Don't use thumbnail images that are nearlyas large as the full-sized images they linkto.

Keep the thumbnails small, in neatly alignedrows. Thumbnails should be about the size ofa postage stamp. This will be enough to
http://www.yola.com/yola-style-guidehttp://www.yola.com/customer-support/p/adding-editing-content/pictures/tutorial-exploring-images/7/46/490http://www.istockphoto.com/yola-offerhttp://www.istockphoto.com/yola-offerhttp://www.istockphoto.com/yola-offerhttp://www.istockphoto.com/yola-offerhttp://www.yola.com/customer-support/p/adding-editing-content/pictures/tutorial-exploring-images/7/46/490http://www.yola.com/yola-style-guide


19/68

19

interest your visitors and make them clickthrough to your nice, glossy, full sized image.

Avoid using link borders around graphics. Leave off the link border and allow people todiscover the image link when they mouse-overthe image.

Design

Try not to use too many colors (specificallyin text) as this confuses and clutters yourweb pages.

Try to restrict color to a max of 3-4 colors.Think of your website in terms of yourwardrobe - people don't tend to wear 6 colorsin a single outfit. Choose a color palette andstick to it, it will make your site look far more

professional.

Don't use graphics that don't fit on thescreen.

Take note of your website's screen size, aswell as individual column widths if you're usingLayouts. Ensure that your images don't breakthese boundaries, or your site will look 'broken'and sloppy.

Don't use lots of typefaces in a single page.It is visually confusing and your page lookscluttered.

Use one or two typefaces throughout yourwebsite. E.g., Use Helvetica Bold for headingsand Arial Regular for body text.

Counters on pages can make your site lookunprofessional.

Rather use a hidden analytics tool such as ourSite Traffic analytics tools orGoogle Analytics.

Avoid anything that blinks, especially text.Animations that never stop. This isdistracting and annoying for the reader.

Use high-quality images and simple text.

No "Under construction" signs! Rather don't publish your site or section until itis complete. You can remove a page you areworking on from your navigation until you areready to show it to the world.

Avoid using styles that are too wide and willforce your visitors to scroll sideways.

Select a style with a standard screenresolution. Pages can scroll down, but neversideways!

Don't use frame scroll bars in the middle ofa page. In fact, avoid frames! They'reclumsy and tacky, very old-school, andrarely used well.

Structure your content to fit the page, usethe Page Layout or Divider to do so.
http://www.yola.com/customer-support/p/promotion-seo-analyzing-traffic-advertising/adding-google-analytics/81-tutorial-adding-analytics/9/71/503http://www.yola.com/customer-support/p/site-structure-design/menu-tabs-pages/moving-and-editing-menu-tabs/18/44/99http://www.yola.com/customer-support/p/site-structure-design/page-layout/selecting-the-page-layout/18/31/458http://www.yola.com/customer-support/p/site-structure-design/page-layout/selecting-the-page-layout/18/31/458http://www.yola.com/customer-support/p/site-structure-design/menu-tabs-pages/moving-and-editing-menu-tabs/18/44/99http://www.yola.com/customer-support/p/promotion-seo-analyzing-traffic-advertising/adding-google-analytics/81-tutorial-adding-analytics/9/71/503


20/68

20

Try not to have too many focal points on thepage or non at all.

Each of your pages should have a clearfunction of focus. On the flip side, too many

focal points on a single page can beconfusing.

Make sure there are no dead links (linksthat don't work anymore). Can annoyvisitors to your site and creates a sense ofdistrust in your reader.

Make sure all your links are up to date and linkto an active website.

Advertising

Junky advertising - makes your site lookcheap and your product less professional.

Make sure that any ads you use are relevantto the content on your site and will add value

to your visitors. Google Adsenseis a goodsystem to use as it is designed to displayrelevant ads in a neat, professional manner.
https://www.google.com/adsense/login/en_US/?gsessionid=FcGvz0oJrLpZ3NMsoL9N1Qhttps://www.google.com/adsense/login/en_US/?gsessionid=FcGvz0oJrLpZ3NMsoL9N1Qhttps://www.google.com/adsense/login/en_US/?gsessionid=FcGvz0oJrLpZ3NMsoL9N1Qhttps://www.google.com/adsense/login/en_US/?gsessionid=FcGvz0oJrLpZ3NMsoL9N1Q


21/68

21

Naming Tips

When you create a website with Yola, the first thing you are asked to do is give your site aname. When you publish your site, you may want to make your website's name (title) part ofyour domain name.

Here are some ideas for selecting a site name:

1. Keep it short. Long titles are hard to remember. They take up space in the header of yourpage and can make your menu look messy and cluttered.

2. Don't use a domain name as your site name. For example if you are going to publish your siteto www.mysite.com, you might simply want to use My Site as the name of your site.

3. Make it relevant. Choose a name that reflects what your site is about. A short, relevant namegives people a clear indication as to why they should visit your site.

Using a Yola Subdomain Name:

When you publish your site you might decide to use a free Yola subdomain name, which is aquick and easy way to get your site online. Use the second field in the publishing dialog box tomake use of this option. Your site would then be called something like: mysite.yolasite.com.

Hints:

1. You may later decide to register your own domain, or you might have a domain name alreadythat you intend to use. Go ahead and publish your site to a free subdomain while you are stillconstructing it, and then use your custom domain when you are ready to "go big" and shareyour site with the world!

2. You can publish your site to a free subdomain as well as a custom domain if you wish.

Register Your Own Domain Name:

Using a custom domain name is always a good idea if you are prepared to make a smallinvestment. In Yola you can purchase a domain name, publish your site to your domain and stillhost your site with us for free. If you have not registered a domain name yet here are somepoints you might want to consider:

1. Short names are best. The longer the name, the more likely people are to forget or misspell it.2. Make it easy to remember and to spell. Avoid hyphens or quirky spelling. Your name might be

very clever, but if people can't spell it, they won't be able to find your site.3. Be descriptive. People are more likely to click on a link to your site if they can see

immediately that it has the information they are looking for. For example if you are looking fordog toys which would you click on first?: dogtoys.com or funwithrover.com4. A valid domain can contain letters, numbers, and hyphens. You cannot use spaces or other

special characters. Domains are not case sensitive, so there is nothing to be gained by tryingto register DogToys.com, for example.


22/68

22

Tutorial: Preparing to Create a Website

When you decide to create a website the preparation phase is an important one. Not only willgood site planning make the building process much more intuitive, it will also increase thelikelihood that your site will include all the essential pieces. This tutorial will step you through

some important information about the Yola Sitebuilder and how to get the most out of it, as wellas give you some ideas for content gathering and choosing the best style to fit your website'sneeds.

Yola's nine tips for preparing to create a website:

1. Visit our Get Satisfaction Community and start participating!

Get Satisfaction is our community forum where users of Yola come to ask questions and workwith each other while they build their sites (Figure 10). You will find a large number of Yolacustomers all at different stages of the site building process including a group of Yola Champswho are experienced Yola customers and very dedicated to helping others. The Yola staffs also

participate by actively answering questions, giving tips and providing company updates. If yourun into any questions or issues, this is a great place to reach out for speedy assistance. GetSatisfaction is an extremely useful tool for Yola customers. We hope to see you there!

Figure 10

2. Competitor research

Researching your competitors' websites will give you a lot of insight into what other web mastersin your industry or topic area find to be important. This isn't about stealing content or copyingsomeone else's ideas (which you should never do!), but will give you some starting points foryour website. When you are looking at your competitor's websites ask yourself these questions:

1. What do I find to be useful on this site?2. What type of information is being provided?


23/68

23

3. What information is not being provided that I think should be?4. What do I do better than my competitor?5. What can I do differently to my competitor, what will make my website unique?

You must consider your unique selling proposition. What is it that makes what you do stand outfrom the rest? How can you play to that on your website thus differentiating yourself from your

competition?

3. "Websites I love" research

Are there certain websites that you like and visit often? It can be extremely helpful to lookclosely at sites that you really like (even if they are not in your website's topic area) to get someideas for your website. Do you enjoy certain colors or navigation schemes? Has a certainwebsite set up its homepage in a manner that is very appealing to you and easy to navigate?

Again, it isn't about taking or stealing someone else's ideas, but about appreciating somethingabout another website and possibly incorporating your own spin on the concept into yourwebsite.

4. Content

Content before design

Sometimes when creating a website it can be tempting to do your design first, as this is a funpart of the process. But, if you plan your content before choosing and tweaking your design, youwill ensure your design evolves from your content, and that your design intensifies theinformation you are providing. Site planning will also help you make the the right decisionconcerning your site's navigation scheme.

Content is king

People come to the internet looking for information on everything from where they will eat next,to home buying tips, to what hairstyle best suits a face shape. You have an area of expertiseand your website is where you can show this. You might not realize it yet, but your unique lifeexperiences, interests and passions have given you something unique to offer the world. Tapinto this and make it the basis of your website and you will be successful!

Defining your niche

One of the first things you need to do is narrow in on your niche. The more focused a website is,

the more likely you are to provide the information your prospective site visitor is looking for.What is your area of expertise and what type of information can you provide to your site visitorsthat will give them the answers they are looking for, and keep them coming back?

When considering your niche, you need to drill down into your topic of interest. There arespecific things that you are an expert in, and you will gravitate towards things you know andlove. If you are a chef, what is your area of specialty? It's too broad to have a website aboutfood, but if you are a chef who specializes in cooking with only fresh food that is in season, thatis a niche. Another example would be a website about parenting; which is an extremely broad


24/68

24

topic. But, a website that focuses on the details of parenting toddlers or how to care for anewborn is an effective niche website.

Finding your specific niche may take some time, but it will not be wasted time. There are manypeople out there searching for answers to specific questions and trying to solve specificproblems, and you can provide them with the solutions!

Content planning tips

Brainstorming: Write down your main topic and all of the sub topics that fall into it. Ask yourselfwhat type of information you would like to find on a website in your topic area.

Here is an example:

Main concept: Coffee

Sub topics: Coffee Facts, History of Coffee, Gourmet Coffee, Organic Coffee, Flavored Coffee,

Fair Trade Coffee,

Other pages:About, Contact, Blog

Planning your site pages in this manner helps you in a variety of ways:

You can see in front of you the content you will need to write. You will better notice content areas you may be missing. You can plan for a proper navigation scheme depending on the amount of pages you have.

5. Navigation planning

Navigation is an extremely important piece of a website. Your site visitors need to be able toeasily and intuitively navigate through the pages of your site. There are two common ways toarrange your main navigation, either vertically (Figure 11) or horizontally (Figure 12).

Here are some things you should keep in mind when choosing a navigation scheme:

Do all of the pages you would like to have on the main navigation fit nicely? Do you foresee more pages needing to be added later?

Some of the styles in the Yola Style Library only fit a certain number of pages. If you have alarge number of pages that you want to have on the main navigation, you may want to look for astyle with a vertical navigation scheme as these styles will support the largest number of pages.Keep in mind that if you have a large number of pages, they do not all need to go on the mainnavigation.


25/68

25

Horizontal navigation scheme:

Figure 11

Vertical navigation scheme:

Figure 12


26/68

26

6. The Yola Style gallery - putting it to good use!

The Yola Style Gallery is a great tool to use when planning your site and choosing a style thatwill best suite. You will be able to find out what navigation scheme each style has as well aswhat styles have an interchangeable banner and background image.

7. Using the Yola File Manager

The File Manager will be important to you as you create your website (Figure 13). This is whereyou will store all of your images and other various files that you will be using on your website. Itis a good idea to get familiar with the File Manager before you get started building. Anothergood idea is to upload your images and files before you start building, that way they will beorganized and ready to go when you are ready to put them on your pages.

Figure 13

8. Using the "Save Page As" function

Yola has an excellent feature that allows you to make a copy of a page if you want more thanone page on your site to have similar elements. Click on Page > Save Page As on the mainmenu and give the new page a name (Figure 14). Then you will have a duplicate of the otherpage and you can make the necessary changes. If you have content that repeats on every pageof your site, create a template page that has this content and use "Save Page As" to carry thecontent across to new pages. This can save you a lot of time!


27/68

27

Figure 14

9. Create a test site in your account

Creating a test site is an excellent thing to do before you start building. Having a test site willallow you to try out different things such as various widgets, codes, styles, banners and imageswithout possibly harming the content of elements of your main site.

When you take preparation time to create a website, you will find the process to be a greatlearning experience, intuitive, and fun!


28/68

28

How do I change the name of my site?

If you would like to rename your site, here are the steps:

1. In your Sitebuilder, navigate to Site > Site Settings.

2. Next to "Site Settings" is your site's name. Click on the pencil to the right of it to edit orchange it.

3. Make your changes in the dialog box.4. Click on "Rename Site".

All newly created pages will reflect the new name. Your old pages will still have the old sitename in the page heading, but you can easily change this. There are two ways you can edit thepage heading:

1. Click on "Edit Heading" on your banner and edit or change the site name in dialog box.2. On the main menu, click on Page > Page Properties. Edit or change your site's name in the

"Page Heading" section. Click "OK" to save the changes.


29/68

29

Adding pages and tabs to the navigation

Moving and editing the tabs in your navigation menu

If you want to change the name of a page in your navigation

1. Click Page > Page Manager on the main menu (Figure 15).

Figure 15

2. The Page Manager will open up with a list of all your pages. Select the page you'd like to editand click on the blue link that says "Edit".

3. You will see two boxes called "Label" and "Hover Text".

The Label is the name that appears in the navigation menu of your site. Hover Text is the text that pops up when someone moves their mouse over one of the tabs in

your navigation menu.

4. Type in your desired text in those two boxes.

5. Click "OK" and your navigation will be updated with the changes you made.

These are the steps to changing the order of your navigation:

1. Click Page > Page Manager on the main menu.


30/68

30

2. Click on the page you'd like to move, drag it up or down in the list and drop where you'd like itto be.

3. Click "OK" and save your changes.

Don't forget to click on the "Publish to the web" button. The traffic indicator lights will changefrom orange to green and the message will change from "Your changes aren't published" to"Your site is live". This indicates the changes have been made on your published site.


31/68

31

How do I add more tabs/links to my navigation?

Your navigation is essentially a list of the pages you have on your site. If you want to add morepages to the navigation, you need to add more pages to your site.

When you select a template, a navigation menu and an index page is automatically generated.To add additional pages to the navigation menu, follow these steps:

1. On the main menu, click on Page > Add New Page (Figure 16).

Figure 16

2. A dialog box will open prompting you to select the type of page you want (blank, blog, aboutus, contact, etc.)

3. Next add a name and a heading for your site. You can also choose whether you would likethe new page displayed in the navigation menu, and/or to be password protected.


32/68

32

Figure 17

4. When you click "OK", a new page will be created and a link will automatically be added toyour navigation (Figure 17).

Another way to add a page to your site is to mouse over your current navigation and select "AddPage". You will then be able to follow the instructions above for the remaining steps.


33/68

33

Tutorial: Creating Subpages

If your website has many pages, not all of them need to appear in the main navigation. You maywish to have your visitors navigate through other pages of your site to find related content. Thistutorial is going to show you how to use the Page Manager function to improve the navigation of

your website.

Step 1: Decide on Your Categories

The first step is to decide what your pages are going to be and how they are going to begrouped together. For the purpose of this exercise I am going to make a website about the "DogBreeds of the World." My main page will be called "Dog Breeds." This page will link to pageswith the different groupings of dog breeds. Finally I am going to have pages with individualbreeds of dog within the group. This gives me three levels of navigation as follows:

1. Dog Breeds of the World2. Groups of Dogs

3. The Breeds

Step 2: Create Your Pages

Create new pages by clicking on Page > Add New Page (Figure 18), in the main menu. Selectthe type of page you want and the name of your page and page heading.

Figure 18

I am now going to create all the pages for my site. This website is going to have a total of 15pages. Look how the navigation bar might look with all 15 pages - if I were really making awebsite about all the breeds of dog in the world it would have hundreds!


34/68

34

I think you will agree with me that this is not a pretty picture (Figure 19). It is also very confusingto your visitors, as they have no way of know what page to go to first! Something must bedone...

Figure 19

Step 3: Use the Page Manager to Organize Your Pages

To organize your pages in the navigation, do the following:

1. Click on Page > Page Manager (Figure 20), in the main menu.2. Click on the green checkmark next to the page you'd like to remove from your navigation (itwill become a red "X"). This hides the page from your navigation menu.

3. Drag and drop your pages vertically to get them in the right order.4. Press the "OK" button.


35/68

35

Figure 20

Now only my main page, "Dog Breeds of the World", is going to appear in my navigation.

Step 4: Create Your Links

The only step that remains is to create links between your pages. These are the steps:

1. Drag and drop a Text Widget onto your page.2. Type and highlight your link text.

3. Click "Link" button (looks like a chain link with the word "Link" beside it) on the Text EditingToolbar (Figure 21).4. In the Link Editor dialog box, browse for the page you want to link to and click "OK".


36/68

36

Figure 21

Do this for all the pages in your site. You will then have a well organized site with a clearhierarchy that will help your visitors find the information they are looking for.


37/68

37

What is a widget?

Using widgets to add content

Widget: You might not have encountered this term before. It certainly puzzles many peoplewhen they see it for the first time. But once you become familiar with what widgets are and howthey work, we are sure that you will find them useful in helping you to build a dynamic websiteeasily.

A widget is sometimes also called a component or a gadget. It allows you to add content to yourpage without having to write any code yourself.

In Yola, you drag and drop widgets from the Sidebar on the right, and edit them in order to addcontent such as: text, images, videos, maps, forms and much more.

All the Yola widgets are located in the Sidebar, to the right of your screen (Figure 22):

Figure 22


38/68

38

Tutorial: What's a Widget?

You might never have heard the term "widget" in your life before. If so, it can be a bit of a shockwhen you sign up to create your first website, and suddenly realize that widgets are everywherein the Yola Sitebuilder. If you find yourself asking any of these questions, you are in good

company:

"What is a widget?"

"What does a widget do?"

"Why do I need a widget, anyway?"

Many people have both asked and attempted to answer this question - although the term mightbe difficult to define, widgets are very useful! They are sometimes also called components,gadgets or elements. It might help to think of widgets as discrete chunks of code thatallow you to add content to your site without having to write any code yourself. In Yola,you drag and drop widgets onto your page. Some widgets you edit directly, like the TextWidget. We have also integrated with several widget galleries which allow you to easily adda wide selection of exciting content to your site.

In this lesson, we will look at some of the widget options in Yola. Hopefully, this will give you abetter idea of what is available so that you can create websites which are even more compellingand dynamic!

We have other tutorials that can introduce you to the most important widgets which allow you toadd text, images, Flickr photos, videos and slideshows. But why stop there? Let's dig a littledeeper and find some other widgets you might want or need for your site.

In this tutorial, we will show you how to add other content using other widgets available on Yola:

1. Widgetbox Gallery2. Google Gadgets3. Form Widget4. HTML Widget


39/68

39

Using Widgetbox Gallery widgets:

Widgetbox Gallery is a great place to find:

Games

Chatrooms Media players Guestbooks Social networking

buttons

RSS feeds

Calendars Clocks Hit counters and more for your

site...

What's more is that it is really easy, here's how:

1. Open the "Widget Collections" folder and drag the Widgetbox Gallery icon onto your pageand search for the widget you want to use (Figure 23).

Figure 23

2. The widget will then be embedded in your site.

3. Search and select the widget you want, re-size it if you want or customize it (adding songs

etc) and click on the green "Get Widget" button.


40/68

40

Using a Google Gadget widget:

Here is a short list of just a few of the widgets you can get from Google Gadgets:

Google search

box Google calendar MP3/audio

players News feeds

Games

Weather reportwidgets

Clocks

Open the "Widget Collections" folder and drag the Google Gadgets icon onto your page (Figure24). A dialog box will appear with a space to paste code, and a link that takes you directly to thewidget service's website. The dialog box looks something like this:

Figure 24

Click on the link to Google Gadgets, and find the widget you wish to add. I shall add a GoogleSearch box to my site:

1. Find the widget you want and click "Add to your webpage"

2. Configure your widget preferences.

3. When you are satisfied with your widget, click "Get the Code".

4. Copy the code and go back to Yola.

5. Paste the code into the Yola dialog box and click "OK".


41/68

41

Figure 25

The widget will now be embedded in your page (Figure 25).

Using a Form widget:

Yola now offers its own Yola Form!

We have also integrated with Wufoo, another type of form building service. They have both freeand paid services available.

We will now show you how to add a Yola Form widget:

1. Click on the "Forms & Appointment" folder in the Widgets Sidebar (Figure 26).

2. Drag and drop the Form Widget onto your page and select the type of form you would like touse.


42/68

42

Figure 26

3. This will open the form, each form has a "Settings" and "Edit" tab (Figure 27).

4. Within these tabs you can use the fields to change the details of your form. You can add,delete, rename and move the location of these fields.

Figure 27

5. When you are finished customizing your form, click "Save".


43/68

43

6. Save your page, click on "Publish to the Web" and you will be able to view your form on yourwebsite.

Using the HTML widget:

Did you know that you can add any widget you can find on the internet to your site?

1. Here we will add a video fromVimeo.com. You can visit their site and copy the embed codeprovided.

2. Copy the HTML code provided. Back on your site, drag and drop the HTML Widget onto yourpage. When you do this the HTML Editor will open up, and you can paste the embed code asshown below (Figure 28):

Figure 28

3. When you are finished, click "Save".

4. Republish your site by clicking on the green "Publish to the Web" button. The traffic lightindicator will change from orange to green, and the message will indicate that your site is now

live - signifying that the changes have been applied to your live site. Visitors to your site willeasily be able to watch the video you've added to your site. This particular video comes fromour video tutorial site,Yola.tv(Figure 29).
http://vimeo.com/http://vimeo.com/http://vimeo.com/http://yola.tv/http://yola.tv/http://yola.tv/http://yola.tv/http://vimeo.com/


44/68

44

Figure 29

Here is a list of some of the widgets you can get from the other widget services that we haveintegrated with:

Slide shows Guest books FunPix Picture puzzles Email and messaging

widgets Entertainment Games

Newsfeeds Chatrooms Message Boards Hit Counters Music Countdown Radio and

podcasts

We hope this tutorial has helped you understand a little bit more about widgets and how theycan be used to add fun, exciting or useful content to your website.


45/68

45

Where did the widget sidebar go? It was there a minute ago!

It sounds like the Sidebar on the right hand side of your screen has been hidden by clicking thisicon ">>". Simply click the "


46/68

46

Changing styles

The Yola Style Guide!

We've built a style guide that will help you to choose the right style for your site: Yola StyleGallery (Figure 30).

Under "Features" - select the requirements you'd like to have for your desired style and you willbe able to see a list of styles that fit those needs:

Figure 30


47/68

47

Can I add my own style/template or customize one on Yola?

Right now you need to select your style from our Style Library. We are working on adding moreand better styles/templates with more customization options.

Yola gives you the option to either change the background color of your style or upload yourown background image, or both! You can also apply it to all the pages. Please note that somestyles do not have this option. If you have upgraded to Yola Silver, you will have access tothe Site CSS feature allowing you to customize your site.

If you want to know if the option to edit the background image is available for a particular style,see the Yola Style Gallery. It has a handy filter function for you to see which style you might like.You can also visit this site: Forsite, where one of our Yola users has added a page to his sitecomparing styles.

To edit the page background color:

1. Click on the "Style" button on the main menu. Select "Edit Background" and then "ChangeBackground" (Figure 31).

2. A dialog box will open, click on the down-arrow next to "Background Fill" and the color pickerwill open.

3. Select the color you would like to use and click on "OK". If you know the Hex value of thecolor you would like to use, enter it into the space provide.

Figure 31

Upload your own background image:

1. Click on the "Style" button on the main menu. Select "Edit Background" and then "ChangeBackground".


48/68

48

2. A dialog box will open, check the box next to "Use a background image".3. You can now either upload a file from your computer or browse for a previously-uploaded

image.4. Once uploaded, customize your settings - whether you would like the image to tile (repeat),

where you would like the background to be located on the page and if you would like thebackground to scroll with the page or not.

Apply to all pages:

You can choose to apply the same background to all of the pages on your site instead ofchanging the background on each page individually:

1. Click on the "Style" button on the main menu. Select "Edit Background" and then "Apply to AllPages".

2. A dialog box will open asking you to confirm whether you would like to apply the change to allthe pages on your site, click on "Apply and Save" if you would like to go ahead.

Using the Site CSS:

The Site CSS is a fantastic way to really customize your site. CSS (Cascading Style Sheet) is a

set of rules or coding language which dictates how your webpage will appear. By having access

to the Site CSS feature, this allows you to tweak the site's CSS codes so that you have the

perfect look for your site. Here are some general steps how on this works:

1. On the Style drop-down menu, select "Edit Custom CSS".2. The Site CSS dialog box will open up with the Site CSS Override on the left-hand side and on

the right hand side, you'll see a Preview tab (for viewing the changes), Site CSS (to see thedefault CSS codes used) and the Site HTML (to see the default HTML codes used).3. Navigate to the Site CSS and locate the code you wish to alter. Copy that section of code and

paste into the Site CSS Override on the left-hand side.4. Make your adjustments as needed.5. At the bottom of your dialog box, uncheck the "Disable Site CSS Overrides".6. Click on the "Preview" tab to see the changes.7. Once you've finished making all the tweaks, then click on "OK". You will now see your

changes applied to all pages in your Sitebuilder.

Please note:

The Site CSS feature is only available with the Yola Silver package. This feature is best used byadvanced users who are comfortable with using HTML codes. Yola can only provide basicassistance with this.


49/68

49

I want a blank style

There are a few options if you would like a "blank" style. The following styles are plain white withbackground color options:

1. CleanSlate2. BareNecessities3. NoFrills4. SqueakyClean5. RedPlanet (To make the style blank, create a plain white banner and upload it. You will then

have what looks like a plain white page).

These styles can be found in the Free Styles section of the Style Library (click on the "Style"and select "Change Style" to see the style selection) (Figure 32).

Figure 32


50/68

50

Changing Styles

Here's how to change your style/template:

1. Click on the "Style" button on the main menu. On the drop-down menu, select "Change Style"

(Figure 33).

Figure 33

2. A dialog box will open with the variety of styles you can choose from. The menu on the left of

the dialog box allows you to navigate between Free Styles, Premium Styles, and My Styles(Premium Styles which you have already used in your Yola Silver account). You can also lookfor styles according to the various categories.

3. Browse through the available styles by mousing over them. When mousing over a style alarger preview of the style will be displayed.

4. When you've decided on the style you would like to use, click on it. A preview of your websitewill open up with the new style applied to it.

5. If you like what you see: click on "Continue" on the bottom right of the dialog box. (Note: If it

is a premium style the button will say "Upgrade to Silver" and clicking this button will activate apayment screen. Alternatively you can try out the style on your site for free before making yourpurchase and you will be prompted to upgrade to Silver the next time you publish your site.)

6. Once you have made your selection, the new style will load onto your site.

7. Please remember that if you have added your own banner or background to the previousstyle, it will not be added to the new one - you will need to re-add it to your new style (if the stylehas the option).


51/68

51

Adding Pictures

How do I add pictures to my site?

Using the Picture Gallery Widget

With the Yola Picture Gallery Widget, you no longer have to drag and drop individual photos andresize them on your site, or use a third party application to create a photo gallery. The PictureGallery Widget automatically creates an attractive clickable thumbnail picture gallery.

Visitors to your site don't have to navigate between pages to view your gallery, because eachimage can be clicked and maximized without leaving the page. To scroll through your gallery,visitors can simply click on the picture or click "Next" tab in the top right corner. To scroll back tothe previous picture, visitors can click "Prev" in the top left corner.

Here's how to start creating your Picture Gallery:

1. Drag the Picture Gallery Widget onto your page (you will find it in the "Basics" section).2. Upload a new image, or browse through the uploaded files in your File Manager.

To upload a picture from your computer: click on "Upload New Images". You will be ableto browse your computer's folders to select a file to upload. Select the file, click "Open" and itwill automatically be uploaded to your gallery.

To add pictures that has already been uploaded: click on "Browse Uploaded Images" andselect the image from the File Manager. Click on the uploaded picture file you want to add,click "OK" and the picture will be added to your gallery.

To upload multiple pictures at the same time: hold down "ctrl" (for PC users) or the "cmd"

key (for Mac users), while clicking on the pictures you would like to upload. Click on "Select"in the bottom right corner to upload the images.

3. You can edit your gallery layout, margins and hover text by clicking "Edit" in the top left cornerof the widget.

Use the Picture Widget

1. Drag and drop a Picture Widget onto your page. The Picture Widget is located in the "Basic"folder on the Sidebar, to the right of your screen (Figure 34).


52/68

52

Figure 34

2. A dialog box will pop up. You will have the option to upload images from your computer orchoose from images which have already been uploaded to your File Manager. You can also optto search through our Fotolia library by clicking on "Find Stock Images" and purchase images tohelp add a professional look.

For this example, we will upload a picture from the computer. Click on the first option: "UploadNew Image" (Figure 35).

Figure 35


53/68

53

3. Another dialog box will pop up and you will be able to browse your computer's folders toselect a file to upload. Please Note: The example shown here has been done on a Mac, the fileselection dialog boxes will vary depending on which operating system is being used.4. After you have clicked on "Select", the picture will be added to your page and it will also bestored in your File Manager.

Use the Text Widget

Using the Text Widget allows you to insert a number of pictures in the same text box. You canadd as many pictures in a row as your chosen style will support. Separate each picture by oneor two spaces for the best results:

1. Drag and drop a Text Widget onto your page (Figure 36). This is located in the "Basic" folderon your Sidebar, to the right of your screen.

Figure 36

2. Click on the "Insert Image" button on the Text Editing Toolbar (the icon that looks like a greentree in a picture frame, roughly in the middle of the toolbar) (Figure 37).3. The File Manager will open up and allow you to browse for and select an image as describedabove.4. You will be able to wrap the text and pictures within the Text Widget by clicking on the pictureyou just added, and then clicking various Text Wrapping buttons on the Text Editing Toolbar.


54/68

54

Figure 37

Managing Files

Uploading and adding files

One of the key tasks you will need to become familiar with when building a website is managingyour files. Yola has a slick File Manager to make this easy for you!

Here are the steps to upload a file to your site:

1. On the main menu, click on Site > File Manager (Figure 38).2. Click on the "Upload Files" button on the bottom left of the File Manager dialog box.3. Browse your computer's folders for the file you would like to upload and click on "OK" to

upload it.4. Once uploaded, you can click on the red "x" on the top right of the file upload dialog box to

close it.5. To add the file to your page, for example a picture, drag-and-drop the Picture Widget onto

your page.6. Click on "Browse Uploaded Pictures" in the dialog box that opens.

7. Choose the picture you would like to see displayed on the page.8. Click on "Select" to add it to the page.

You can select multiple files to upload by following one of these options:

1. Zip up your files and upload it to the File Manager. Right-click on the file and choose to unzipit.

2. When browsing your computer for files to upload, hold down the Shift or Ctrl keys to selectmore than one file to upload.


55/68

55

Figure 38

Creating folders to manage your files

Using folders is an effective way to manage all the resources for your site. By organizing yourfiles into folders you can avoid having the File Manager become cluttered and confusing. It willalso load quicker as you will only be viewing a portion of your files at a time, instead of loadingall of them every time you open the File Manager.

To create folders:

1. On the main menu, click on Site > File Manager.2. The File Manager will open up. In the display area you will see an icon called "New Folder" -

click on this.3. In the dialog box, type the name of your folder and click "Add New Folder" (Figure 39).4. To upload files to that folder, double click on the icon and then upload your files as normal.

Figure 39


56/68

56

Tutorial: Using the File Manager

The File Manager is used to manage all your files for your site. You can use the File Manager tostore your files (such as documents, images, audio, videos, etc.).

1. How to Access the File Manager:

On the main menu, click on Site > File Manager (Figure 40).

Figure 40

The File Manager dialog box will appear. You can now upload images or files, create newfolders, delete unused files or images, edit an image using Picnik (an online photo editor) andmuch more.

2. Uploading Files into the File Manager:

On the main menu, click on Site > File Manager. Click on "Upload Files", on the bottom left corner of the File Manager (Figure 41).


57/68

57

Figure 41

Browse your computer's folders for the file you would like to upload and click on "OK" toupload it.

Once uploaded, you can click on the red "x" on the top right of the file upload dialog box toclose it.

Now your image is stored in the File Manager.

3. Uploading Multiple Files at Once:

Option 1

Zip up your files on your computer. Upload the file to the File Manager. Once the files are uploaded to the File Manager, right-click on the file and choose "Unzip"

(Figure 42).


58/68

58

Figure 42

Option 2

When browsing your computer for files to upload, hold down the shift or ctrl keys to selectmore than one file to upload.

4. Creating Folders in the File Manager:

On the main menu, click on Site > File Manager.

Click on the "New Folder" icon in the display area of the File Manager. A prompt will appear, enter the name of your folder and click on the "Add New folder" button

(Figure 43).

Figure 43

Your new folder has now been created. To add files to the folder, simply double-click on the folder. The folder will open and you can

upload your files as per usual. You can create folders within a folder, by following the same steps.

5. Editing Images in the File Manager using Picnik:

On the main menu, click on Site > File Manager. Next, select the image you would like to editand click on the pencil on the bottom left corner ("Edit with Picnik).


59/68

59

You will be taken to the Picnik website, it may take a while to load (it's worth the wait!). Once Picnik is open, use their picture editing tools to adjust your image to your liking. When you've finished editing your picture in Picnik, click on "OK" so that the change is

applied and then click on the yellow "Save to Yola" button on the top right. Your newly edited picture will replace the picture you originally uploaded.

6. Moving Files Between Folders:

On the main menu, click on Site > File Manager. Right-click on the file and select "Copy" (Figure 44). Go to the new folder, right-click in the empty space and select paste. Your file will now be pasted in the new folder. You can now go back and delete the older file

by right-clicking on it and selecting "Delete".

Figure 44

Please note: If you move your files from one folder to the next or basically change its location,and your file has already been added to a page on your site, you need to follow these steps:

Click on "Edit" on the top-left of the File Widget. Navigate to the file in your File Manager. Click on "Select". This will ensure that the correct path is being used for your file.

7. Deleting Files from the File Manager:

On the main menu, click on Site > File Manager. Locate the file you wish to delete. Right-click on the file. Select "Delete".

8. How can I search for files in the File Manager:


60/68

60

Enter the name of the file you wish to search for in the "Search My Files" field. You can search all files or choose a particular folder to search in (Figure 45).

Figure 45

9. How to add the contents of your File Manager to your page:

Adding Images:

Drag and drop a Picture Widget onto your page. The Picture Widget is located in the WidgetsSidebar on the right of your screen.

The File Manager dialog box will pop up. You will have the option to "Upload New Image","Browse Uploaded Images" or "Find Stock Images".

To add a picture from your File Manager, click on the first option: "Browse Uploaded Images".The File Manager will open up.

Select "My Files" or "Stock Images" to search. Select the uploaded file you want to add and click "Select". The image will be added to your page.

Or:

Drag and drop a Text Widget onto your page. Click "Insert Image" on the Text Editing Toolbar (the icon that looks like a green tree in a

picture frame, roughly in the middle of the toolbar) The File Manager will open up and allow you to browse for, select or search for an image, as

described above.


61/68

61

Using the Text Widget allows you to insert a number of pictures in the same text box. Youcan add as many pictures in a row as your chosen style will support. Separate each pictureby one or two spaces for the best result.

Adding Files:

Figure 46

Here is how to upload a file so that people can view or download it from your site:

Drag and drop a File Widget onto your page from the Sidebar on the right (the icon for thislooks like a computer disk) (Figure 46). A dialog box will open and you can "Upload New Image", "Browse Uploaded Images" or "Find

Stock Images". When you click "OK", a link to your file will automatically be created. To test that it is working,

save and preview your page. You can test that your link is working by pressing "Preview" orby saving and republishing your site.

People will then be able to click on your link and download your MS Word file, PDF,PowerPoint presentation, spreadsheet or whatever file you have uploaded.

10. Understanding file and storage limits:

The File Manager has an indicator which shows you how much of your allotted storage spaceyou are using.


62/68

62

Figure 47

Yola Free:

If you have a Yola Free account, the following apply:

You are allowed a total of 1GIG of storage per site. If you reach or exceed this limit you willbe prompted to upgrade to Yola Silver in order to gain access to additional storage.

You are allowed to upload individual files of up to 5MB each. If you try to upload a file that islarger than 15MB you will be prompted to upgrade to Yola Silver. If you choose not to do so,you will need to reduce the size of the file you wish to upload.

For security reasons certain file types cannot be uploaded to free accounts (eg. .html and .jsfiles)

Yola Silver:

If you have a Yola Silver account (Figure 47), the following apply:

You have up to 5GIG of storage available per site. If you require additional storage, pleasecontact [email protected].

You can upload individual files of up to 100MB each. You will be able to upload .js and .html files.


63/68

63

Publishing Your Site

How do I publish my website to the internet for everyone to

see?

To put your site online so that it can be viewed by the public, you need to publish it!

Yola has tried to make every possible publishing option available to you. Please note that sitebuilding with Yola is free, regardless of which publishing option you select.

You can:

1. Purchase a custom, top level domain. The domain extensions currently available are: .com,.net, .biz, .org, .co.uk, .eu, .ca, .es, .co, .in, .nl, .us, .fr, .it, .de, .at, .dk , .com.br and .com.mx.

2. Publish to a domain you already own elsewhere and still host your site with us. This feature isfor Yola Bronze and Yola Silver subscribers and certain partner programs only.

3. Transfer your domain from another registrar to Yola (available to Yola Bronze and Yola Silvermembers).

4. Publish to a free subdomain and host your site with us for free (Figure 48).

Important information:

1. You can easily make changes to your published site at any time, so there is no need to waituntil your site is "finished" before you publish it. Good websites are always "underconstruction" and you should continue to update your site as often as possible after youpublish it.

2. When you publish your site, anyone will be able to view your site by clicking on a link to your

site that you provide, or by typing your URL (web address) into the address bar of theirbrowser. However, you will not find your site in search engines immediately as it takes timefor newly published sites to be indexed by search engines.


64/68

64

Figure 48

What will my URL be?

You select your URL (website address) when you publish your site. If you publish to a free Yola

subdomain, your URL will appear like this: http://sitename.yolasite.com (Figure 49). You canreplace "sitename" with text of your choice.

If you ever need to check what your website address is, you can see this in the Sitebuilder.Once your site is published it will be displayed along the top of your screen, to the right of theYola logo.

Figure 49


65/68

65

Tutorial: Publishing Your Site

There are plenty of things you can do with your site and you can easily make amendments afteryour site has been published. However, this tutorial is going to teach you how to publish yoursite, so when you are ready, let's proceed to the final step in creating a website.

Please note: If you selected your domain name when you first created your website, your sitewill already be published. After you have edited, or made changes to your site, the messagenext to the green "Publish to the Web" button will read: "Your changes aren't published." Thismeans that your site is already live on the internet but the changes you've made are not visibleon the published site. Any time you want to apply your latest changes to your published site,simply click the "Publish to the web" button.

If you have not yet published your site, please review the instructions below:

Step 1: Select a Publishing Option

Click on the green "Publish to the web" button. A dialog box will open up and you will be giventhree options for publishing your site:

1. Search for a custom domain.2. Get a free Yola subdomain.3. Point your domain to Yola (only available to Yola Bronze, Yola Silver, and partner program

account-holders).

For now we are going to use option two (Get a free Yola sudomain) but the others are availablefor you to use should you prefer. If you have not purchased your own domain name, or youdon't want to do so right now, then option two is the one for you! It is fast, easy and free! Click

on "Publish my Site" and then select "Get a free Yola subdomain":

Figure 50


66/68

66

The text box will be automatically populated based on the name you have given your site. Youcan opt to keep this as your domain name or decide on a different name (Figure 50). Onceyou've typed in the domain name, you will get a message stating whether the name you havechosen is available.

If you are told that th

buku panduan yola tahap 1

Documents