How to create a website?

NOTE: This is quite a long page so I would suggest that you bookmark it. You can also use it a reference as you build your site.

In this tutorial, I will show you how to create your first website with the free Yola website builder. There are hundreds of these free website builder sites available. I use Yola cause they have a really easy to use interface and their web hosting services has not let me down.

They are stable and provide a lot of tools that can help you build a successful web business. Their monthly charges are reasonable and you can choose to use their free services, bronze or silver memberships.

This page is about how to create a website, so let's get started.

Yola website builder is really easy to use. It's based on dragging widgets onto the main edit window and manipulating the widgets from there. There are lot's of widgets that will assist you in creating a great and functional website. They also provide widgets that will help you with the monetizing  part of you website.
 
At first you might feel a little lost, but after working with the interface a couple of times you will easily get the hang of it. Just take things step by step. I will also just concentrate on the basics of creating your website. I don't want to go into too much detail as Yola constantly updates and adds new features to their website builder.
 
So, stuff that I talk about on this page might be outdated in 6 months or weeks. Showing you the basics will get you started and if functions or features change with the website builder, then at least you will know what to look out for.

If you have not created your keyword list or found your niche yet, then please retrun to the previous page and read the pages about website structure, keyword placement and density,  keyword research and finding your niche.

You will need this list to create your website with. Well, you could try to thumb suck the keywords you want to use, but it's better to have a list so you can easily start building your web pages.

Below is an extract of the list  I created previously.

How to create a website - keyword list
Keyword research list
Click image to enlarge

I will use this list to build the website. I will show you how to build the site with a couple of pages. Once you get the hang of it, you can easily continue on your own. I don't need to show you how to build every page, but a couple of examples will do the trick.

How to create a website - First steps

First of all you have to register with Yola. Just about every service out there needs registration, therefore it would be a good idea to keep a file or spreadsheet about your logins and passwords on these sites.

Once registered, login to Yola and go to "My Yola". It will show you what your site count is and how many you have left to create. By default you can create up to 5 sites. This can be increased if you pay for a type of membership. We can look at this later. For now, let's concentrate on building the site.

Click on "Create a new Site" or select "Create a new Site" from the "Select Site" drop down box.

The site builder will now open. Below is a picture of the initial screen where you will be asked for some information related to your site. You can also choose a template from the builder, or you can start with a blank site.

How to create a Website - Create a new site
Yola create new site
Click image to enlarge

This page is just to get you started. Enter your name in in the first box. You can use this name when you register your website. You can also change this later if you don't like what you have chosen. This is typically you niche that you chose. In my example I will use "Computer Basics" as my site name.

Then you can pick a website category if you want to. This will basically setup your website so you can get started right away. You can change this afterwards if you don't like the theme.

I usually just select "Start with only a blank page" at the bottom of the screen. I like to choose my own themes and build it from there. For this tutorial we will select "Start with only a blank page". Click on "Build it" to continue.

Below is a screen shot of what the initial build screen would look like. Let me start by giving you a quick run down on what the options are on this screen. I would advise you to click on the image which will open a larger view of the screen shot.
 
At the top, circled in red, you have the "Site", "Page" and "Page Index" drop down lists.
 
How to create a website - Page and Site Control
Create webpage menu options
Click image to enlarge 
 
These controls allow you to manage your website and individual pages of the site. Let's look at them in a bit more detail.
 
  • Site
If you select the site drop down list, you will see there are three options where you can create a new site, open the file manager and site settings. The file manager is the interface that you will use to add pictures that you want to add to your site or page. You can also add multimedia or other files using the file manager. It's like the file manager from windows.
 
The Site setting option is where you can change the whole look and feel of your website. Below is a screen shot of what the site settings dialog looks like. Here you can change just about anything you want on your site.
 
Hot to create a website - Site Settings

Yola create webpage site settings

Click image to enlarge
 
You can change the site properties, publishing, content and tracking settings from this menu. I really like this page cause it's like a one stop page for changing settings on my site. Yola also has comprehensive help pages on all of these options. It's byond the scope of this tutorial to go through all of these settings, but I would advise you to get to know them as you go about building your website. 
 
  • Page
This is where you can customize the page you are working on. Things such as adding a new page, saving pages, page properties, page manager and deleting pages. The two important ones here are the "Page properties" and "Page manager" options. The "Page properties" option will open a dialog where you enter information describing your page. This is very useful to help search engine spiders to see what your site is all about and to index the info correctly. I will go through an example later to show you what you should enter here.
 
The "Page manager" option will help you to organize your menu settings. This is basically where your level 2 pages comes in. So it will basically help you to organize your level 2 menu pages.
 
  • Page index
The page  index option is where you can select a page that you have previously created and edit it.
 
 Let's have a look at the left of the main site builder page. Here you have options to save, preview or publish your page or site. The "Save" option is very important. I cannot emphasize enough how important it is to save regularly. Remember that you are working with a web based site builder here. Anything can happen. You can loose your connection to the internet or you PC can crash or whatever.
 
There is nothing more frustrating than spending hours on a page and then loosing everything cause you did not save. So, save, save and save regularly.
 
Below is a screen shot.
 
How to Create a website - Save, Preview and Publish.
Yola, Publish and save settings
Click image to enlarge
 
The place where you will probably spend the most time with is the, "Widgets". This is where you will select and drag widgets to the main window and edit or enter text. Below is a screen shot.
 
How to create a website - Widgets
Yola basic widgets
Click image to enlarge
 
You will see that there's widgets for basic editing, multimedia, social, collections, communications, forms, maps and e-commerce. I will show you how to use these widgets as we go through the tutorial.
 
At the bottom of the site builder there are options to change the layout and style of your page or site. We will have a look at these options as we build the site.
 
Building your Home Page.
 
Okay, so now you have a better understanding of the site builder. It's time to start building.
 
For now, let's use the default layout as it was given to us when we selected to create a new site. The first page is your home page. This is also known as the index page. You can confirm this by looking at the page option at the top, it should show "Index". This is the starting point of your website. This is also your level 1 page.
 
Here you have to tell your visitors what your site is all about. You have to captivate and encourage them to explore all there is to offer on your site. When they see the home page, they must be encouraged to click and read all what you have to offer. Remember one thing here, people will not always enter your site via the home page. It all depends how the search engines indexes your site.
 
People might come through another page and then decide to visit your home page. It all depends on how you are indexed by the spiders. But your home page stayes the main page. Everything must point back to this page. This is level 1.
 
To get things going, I will drag the text widget onto my main working area. Click on the "Text" widget and drag it onto your main window. You will see a big blue outline on the main working area as you drag the widget. Drop the widget when you are satisfied with it's position.
 
How to create a website - Text widget
Yola, text widgets
 
This is what the text widget would look like after you dragged it to your main working area. All you have to do now is to enter some text. I will add some text and explain some things that you can do to make it look better and help the search engine spiders.
 
Below is a screen shot of my entered text.
 
Yola text widget, entering text
Click image to enlarge
 
The name "Computer basics" at the top is your heading. You can edit and change the heading to whatever you like but keep your niche or "Site theme" in mind here. Use the keyword list here. Also remember that you will probably register a domain name that is based on your niche or theme.
 
Let's talk about the text or content. Any of your pages should always have the heading at the top. Your page should start with the heading. This is the first thing the spiders will use to establish what your page is about. Then it will look in your content for the keyword that's part of your heading.
 
In my home page about computer basics, I will frequently use the word computer basics in my content. Don't overdo it, sprinkle your keyword so it appears naturally in your text. Don't use it too often otherwise the search engines might think you are deliberately trying to trick it to give you a higher page rank.
 
Google's coders check for all of these things using an algorithm.  It's basically just code that check for certain things on a page.
 
Let's say you want your first line of text to stand out more. If you look at my first line, it's looks pretty flat. I want to make it stand out a bit more. To change the way text look, use the text tool at the top of your main window. This tool stays hidden until you click or select some text to edit in the main window.
 
I want to make the first line stand out, so I'll make the text a bit bigger. Below is a screen shot of the text tools options in the main window.
 
How to create a website - Text Tool
Yola text tool manipulation
Click image to enlarge
 
You will now notice that my first line of text is now much larger than the normal text. I changed the font size by using the text tool. I circled the text tool in the picture above in red. Whenever you work in a text widget, this tool is displayed. I used the font size option in the text tool, circled in blue. It opens a drop down menu and you can select the size you want.
 
You will see that you can make text bold, italic, color, center, bullets and lot's of other stuff. You would also use this tool to create a link to some other page or site. I will use it shortly to link to another page.  
 
After you created your page, remember to save it regularly. Spend some time on your home page. Make sure that you got the message across to what your site is about.
 
Let me show you a very important thing that you can use in Yola to get your page ranking higher. Remember we talked about the "Page properties" option earlier. Well, now we are going to use it to help the spiders even more, and hopefully get a better ranking with the search engines. You must do this for all your pages so get in the habit of doing this.
 
Click on the "Page" drop down tab at the top and select "Page Properties". Fill in your information in the dialog. Below is an example of my "computer basics" homepage.
 
How to create a website - Page Properties
Create webpage index properties
 
Let me explain a couple of things. We already know what the page heading is all about so I won't discuss that again. The page title is used in the browser tab when someone searches for a keyword. It's the first thing people will see when search results are returned. Make sure your level keyword is part of your title. This is very important. Always include your keyword for the page in all of these fields. The Heading, Title, Description and Keywords.
 
The description basically describes your site. Again this information is displayed when someone searches for keywords and results are returned. Your description is also very important. After people searched for a keyword, results are returned. They will scan through the results and eventually click on the results to get more information. Your description should make them want to click on your link or site.
 
Make it interesting and unique. Your description must stand out. Spend a bit of time here as well.
 
The keywords we have also talked about. Use your keyword list and add some keywords here. My primary keyword always comes first followed by secondary keywords that I think will help people finding my site easier. I used the Google keyword tool and found that there are quite a lot of volume for the phrase "What is a computer?". I thought it would be a good idea to include it as part of my keyword list.
 
Below is a screen shot showing the different fields using Google.Google keyword fields
 
Now is a great time to save your page and preview it. Select "Save" and then after that select "Preview" from the top menu on the right. Customise the page if you have to. 
 
Create a Level 2 page 
 
Now let me show you how to create additional pages. First of all, let's create a level 2 page. In my example I will use the "Computer Hardware" as one of my level 2 pages. Again, use your keyword list that you created earlier.
 
Click on the "Page" drop down option at the top of the site builder. Select "Add New Page" from the menu.
 
You will be presented with the "Add New Page" dialog. Below is a screen shot.
 
How to create a website - New Page dialog
Yola create new level 2 page
 
Leave the type as "Blank Page". You also have an option to create a blog. The "Name" field is the name of your page. I have used Computer Hardware as the name and heading for my level 2 page.
 
Keep the "Display in navigation" tick box selected. This will show the "Computer Hardware" page as part of my sites menu navigation. This will also link my level 2 page with my level 1 page. I always display my level 2 pages in the navigation.  
 
When you click "OK" a web page will be created with a heading called "Computer Hardware".
 
You will notice that the new page looks almost exactly the same as our Home page before we edited it. This is where the strength of Yola lies. You always start with a page and build it from there. Below is a screen shot of the result. I have added some text just to show you what it would look like with some text.  
 
How to create a website - Adding images
Create webpage for level 2
Click Image to enlarge
 
I've added some text that describes what computer hardware is all about. I want to add an image to show my visitors what a CPU looks like. There are two ways to do this. The first is to click where you want the image to be displayed and then select the "Insert image" from the text tool at the top. This allows you to insert an image if you have already created some text and you don't want to move the text to another text widget.
 
The second, and easiest way, is to use the "Picture" widget. simply drag and drop the picture widget where you want to place your picture and upload or select your image. It's also much easier to edit the picture properties using this widget. Use the widget to add pictures if your are not comfortable with the text tools.
 
So, to add a picture, select the picture widget on the right, drag the widget where you want the picture, and drop the widget. You will then get a dialog that asks you whether you want to upload a new picture or browse existing pictures. After you selected or uploaded your image, it will be displayed in your page. That's it.
 
You can also edit the pictures properties by clicking on the edit tab of the picture widget on your web page. Really simple. Almost all widgets work like this. Select, drag, drop and edit. Remember to save!
 
Below is the result after adding my CPU picture to the page.
Yola add image to page
Click image to enlarge
 
Notice that I had to move the text about the processor in another text widget below the picture. You cannot add a picture widget inside a text widget. This is true for most of the widgets. You cannot add widgets inside of other widgets.
 
If you want to do something similar, then you need to use the layout widgets at the bottom of the site builder. If you select the layout widgets then you can add columns to your page. Let's do that. I want to add a right column to my computer hardware page.
 
Click on the layout widget at the bottom of the page and select a layout that has a right column. Below is a screen shot of the result. Notice the right column on my page. You can now drag widgets into this column.
 
You can add things such as AdSense ads, pictures with links, affiliate links or links to other pages on your web site. Play around with this to see if it's useful for you.
 
How to create a website - Layout widget
Yola specify different layout
Click image to enlarge
 
You will notice that the widgets box disappeared  and the layout widgets, appeared. The layout widget allows you to customise the columns on your page. You can choose between one, two, three, two column right and so on. This is a really nice tool to use to customise your pages.
 
Our site is coming on nicely. Make sure you saved the changes and select "Preview" to see what your site looks like.
 
Creating Level 3 pages.
Let me show you how to create the level 3 pages and how to link to these from level 2 and basically link from anywhere to level 2, 3 or 1.
 
You create the level 3 page the same way as you create level 2. You select "Page" and "Add New Page" from the top left menu.
 
Fill in the fields like level 2. Make sure you unchecked the "Display in navigation" check box. We don't want people to see the level 3 pages as menus at the top or right of our website. The reason is that you will create lots and lots of level 3 pages and it might just end up cluttering the menu field on our website. This will look untidy and not very professional.
 
Don't worry, I will show you how to link to these pages later.  Remember to use your keyword list and remember to include your keyword in all the fields.
 
In my example I will use the "Computer Memory" keyword as my first Level 3 page and add some content. I will also use a right column layout from the layout widgets and add some text in there. Below is the result of this operation. I used the preview button in the picture below just to show you what the end result would look like.
 
How to create a website - Level 3 page with right column, Preview
Yola create level 3 page
Click image to enlarge
 
Good stuff, our site is looking really nice. Notice the menu at the top. We only see the "Home" and "Computer Hardware" menu options. In a moment I will show you how to link to these.
 
Let's say I want to add a link to my picture of a memory DIMM to some other site or page on my site. If you used the picture widget, then it's really simple. If you look at the picture widget you will see an "edit" option that you can select. Click on edit and the image properties will open.
 
Look for the "Choose A Link" button and click on it. Below is a screen shot of the link properties dialog.
 
Yola add links
 
Now it will ask where you want to link to. Below is a screen shot of the types of links. You choose to link to a page on your site, an external link, email address, or files stored on this site. You can also choose to open the link in a new page. Very nice and easy to use interface for adding links.
 
Yola link options and properties
 
Click "OK" when you're finished.
 
You can also add alternative text to your images. This is useful if the user has, for some reason, disabled graphics on his browser. Even more useful is the fact that Google uses this to index your images in their search database. always put something in the alternative text box to help your users and Google.
 
Now, if a visitor clicks on the image, he will be taken to whatever link you specified. Nice!.
 
Linking levels
 
Let's have a look at text links. We need to use this to link our level 2 pages to level 3 pages. We will use, text links. It's very similar to picture links, the difference is that we will link from text instead of pictures.
 
You usually put your links between levels at the bottom of the page. This is just what I do. You could add links anywhere in your page to levels 2 or 3. If you think that this will give your visitors a better reading experience by blending in your links, then go for it. I like to use it at the bottom of the page so my visitors get used to how my site works.
 
They always know that they can go back at the bottom of the page. But any method is perfectly fine.
 
What I also usually do is to add a text widget at the bottom. The I just place my links in the widget.
 
Let's get started.
 
I will start bu adding a text widget to the bottom of my Computer Memory page. This widget will link back to my "Computer Hardware" page and back to my "Homepage". Always have a link back to your homepage. This is necessary for your visitors and for the search engines. Remember that spiders will crawl your site they that a human will navigate it.
 
If the spiders find it easy to navigate, then your users will find it easy to navigate and you will get good rankings.
 
Add some text that describes the link. Use your keywords at all times. I will use the following text to go back to my Computer Hardware:
 
Return from Computer Memory to Computer Hardware
 
Highlight the text and select the link icon in the text tool at the top of the builder. The link properties dialog will open. Select "Page on this site" and choose your page from the drop down list.
 
Click "OK" and your cooking. You will see the text turn blue, which means it's linked. Save the page and preview it to see if it links back.
 
There you go. Easy as pie.
 
To create a link back to your home page, add the following text below your previous link:
 
Return to Computer Basics
 
Then add a link in the same way as you did before, but this time link to your home page or index page.
 
Below is screen shot of what these links would look like.
 
How to create a website - Text Links
 Createing text links Yola
 
I usually center my text and add a horizontal line between my content and links. It's just to make it look nicer. The search spiders don't see this but my visitors do. I want to make the experience as easy as possible.
 
Save and preview. Always check your links. Search engines will give you poor rankings if your links are broken.
 
Very important!
Remember to link your level 2 pages to your level 3 pages in the same manner as you did here. The text that you will use will be slightly different. When you link from level 2, you must interest the visitor to actually want to go to your Level 3 pages. I use a index style layout to link to my level 2 pages.
 
Below is an example of what I mean. At the bottom of my, "Computer Hardware" page, I will have links that point to all my level 3 pages related to hardware. I used the preview option in the snapshot below to make it more readable.
 
How to create a website - Linking Pages from level 1 and 2
Yola linking pages with text
Click image to enlarge
 
Notice that I've added a link back to my home page at the bottom. I used the text "Further Reading", but you can use any text you like that describes the other pages. I sometimes use "Index" from my home page to go to my level 2 pages. You don't have to, the menu's you created for level 2 will automatically link to your level 2 pages. 
 
Changing the style
 
Last thing I want to have a look at, is the style. The default style looks okay, but I want to change the style of my computer basics website. I want my site to look more techie like and minimalistic. You can change your whole websites style with a couple of clicks with Yola.
 
We will use the "Style" menus at the bottom of the site builder to do this.
 
Click on the "Style" menu item at the bottom. You will see a box similar to the below snapshot.
 
Yola style selector
Click image to enlarge
 
At the left you can select between All, Premium and Free styles. Premium is styles that you have to pay for based the type of subscription you have. If you are serious about building your internet presence, then it might be a good idea to look at these paid for styles. Free styles are, well, free.
 
Select the style you want. I will select the "Atomohost" style. I like styles where you can change and edit the banner. Some styles does not allow you to do this. Always check your sites layout after you changed a style. Some styles use different types and sizes of fonts. This could result in your site looking weird and out of proportion.
 
Always preview and see what the site looks like after the change.
 
How to create a website - Changing styles
Yola add new style
Click image to enlarge
 
Yep, I like it. Simple and easy to navigate and it did not change the website too much regarding fonts and layout. My menus at the top looks nice and easy to see and navigate. I'm pretty happy.
 
Publishing your site
All that's left to do is to publish your site. At the moment only you can see your website. It's not yet available on the World Wide Web. All you have to do is click on the "Publish to the Web" button in the top left corner of the site builder. You will get the following publish site properties.
 
 
Yola website publish properties
 
You have a couple of options here. You can use a domain that you previously purchased. At this stage you would not have any sites so ignore the first option.
 
You then have the option to buy your very own domain name. I would strongly suggest that you opt for this option. Having your own custom domain name says a lot about your web presence. People will take you more seriously. Google also does not allow you to place AdSense ads on free hosted domain names.
 
It does not cost that much. At the time of writing, it was about $12 a year. Yola also has specials from time to time.
 
This does not mean you have to buy a domain immediately. Publish your site with a Yola sub domain. This is free until you are ready to buy your own domain name. Yola also gives you ideas on what you can call your domain. Sometimes you won't get the name you want so it's always a good thing to look at alternatives.
 
This is just a tutorial so I have selected the free sub domain. Click "Next" and your site will  be published for all to see on the web. You will be given a link that you can click on to see what your site will look like.
 
Congratulations!
 
Well, there you have it. I have shown you most of the basics to get you started. I continually add new tutorials to customizing your website using Yola so please check back regularly for updates and new tutorials.
 
There are lots of other stuff that you can do with Yola. There are widgets for HTML, custom panels, mp3 players, forms etc. Play with the widgets and have fun.