SiteBuilder Tutorial - Basic Layout

This SiteBuilder is an easy-to-use piece of software that allows every SiteGround customer to build a website without any previous knowledge in web design or programming.

The following text is an overview of the necessary steps for launching your first website.

In order to access your SiteBuilder, you will need:

• Internet connection;
• One of the following web browsers: MS Internet Explorer, Mozilla Firefox or Apple Safari;
• Domain Name that resolves to your account on a Siteground server.

To access your SiteBuilder, you could either type the following address in the browser http://yourdomainname.com/zen or click the Go! SiteBuilder button in your Customer Area on SiteGround.com.

Whichever way you choose to access your SiteBuilder, you will see a login page that looks like this:

Please type your Siteground username and password (those were sent to you in the Welcome email) and click the Logon button. Your are now in the control panel. The first time you enter, it looks like this:

To create a website, please select the Start Building Now! button. You will be forwarded to a page with a choice of website templates:

You can see all the templates by scrolling to the right. Click on the image of the template you like, and a larger preview will appear below. On both sides of it, the color themes will be seen, as well as the choice of themes available for the template. The themes are the headings, seen at the top of each page.

When you have selected the design that you like, please click the Next button, so that you can continue customizing.

The next page shows a full-sized view of the template. You have a couple of options here. One is changing the website's main theme.

Next, you can decide what type of navigation will best suit your needs. The choices are Service (convenient for a company page), Retail (a business website with a template for an online shop) and Personal.

Last, but not least, comes the color selection. Each template comes with a choice of colors, and you can pick the one that appeals to you the most by selecting it from the respective drop-down box.

If you change your mind, you can always choose another option. Also, if the template is not the one you want, you can make a step back by clicking the Back button that will take you to the template library. If you have made up your mind, press Next to move a step further.

The new page shows an overview of the customizing environment and offers links to help resources, including a selection of useful Macromedia ® Flash movies.

Once you click a link, a new window will open. Please allow some time for the movie to load. The movie gives you audio and visual instructions how to do all the available customizations step by step.

Now you are ready to edit your site! Click Next to proceed.

You may use this tutorial for your own use. You may not distribute it in any form without the express permission of the publisher. You may provide a link to the publisher's web site, where this tutorial can be used from. This tutorial is provided free of charge and without any warranty of any kind.

Edit Text and Logo

Now you find yourself in the Site Editor - the place where you will work on customizing your website through entering the information and images you want to share on the web!

Note: please wait while all the elements of the editor (buttons, page elements, etc.) appear properly on your screen. This may take some time depending on your Internet connection. Please, note that if you takeany action while the page is still loading, this may lead to errors and loss of information.

The first thing to know is how to change the text that is available on the template. Most of the text that appears as a default content is in Latin and is used as a sample for the template layout. You can remove all of the sample text and change it with your own.

The text is edited and formatted the same way as in every word processor available. Just place the cursor in the desired position and type new text, or select portions of the text to edit, delete and format. Below you can see that a paragraph title is selected.

You can easily remove that text by selecting it and pressing the Delete key on your keyboard. Once you are done with that you can put your own text, and apply the formatting that you think is appropriate. The example below shows how the paragraph title we marked above has been replaced by another sample title. The rest of the text is edited in a similar way.

Let's now change "Company name" in the heading to the name you desire. First, we select the text, ...

...type a new name, and there we go! Now your new name is at the top!

Want to put your very own logo above the name? Easy as 1-2-3! Doubleclick on the logo spot, and a new window will open, that would allow you to upload the new image. Click the Browse button, and you will be able to select a file from your local computer. The SiteBuilder will scale down bigger images, but please, keep in mind that the bigger the picture, the longer it will take for it to be converted and displayed.

Once you are done, select Open next to the file name, and a preview of the image will appear.

Next step is to click OK at the top right, and voilla - there's your new logo at the top of the page!

Images and Links

The images within the rest of the page can be changed too. The next two steps show how a picture is removed from the main paragraph. First, you need to select the image: its border will change, as well as the shape of the mouse pointer:

Right now you can move or resize the picture, or delete it from the page by simply pressing the Delete button on you keyboard. The image is gone, and we can now do some more editing (for example shifting the paragraph title to the left - just like in any word processor).

If you want to have links to other pages, that can also be easily done with our SiteBuilder. First, you need to select text, or another object, as shown below, and click on the Edit/Create link button in the Toolbar:

When you select the button, a new window will open. From there, you can select different options for your link: it could point to one of your own web pages or to another website, or become an email link, etc. If you select the option of linking to an external website, please type in the address of this website in the space provided. Click Display Site to the right, and the site will appear in the preview box.

To complete the link creation, please click OK at the top right.

Edit Website Menu

If you are not satisfied with the page names, you can edit them as well! The navigation links in the website will automatically be changed accordingly, so you do not need to update anything by hand! Simply select the page name that you want changed...

... and type in the new one in the space, provided above the site structure. You can click the Submit button, or use the Enter key on your keyboard. The changes usually take a moment to be applied!

If you look at the navigation band, you will be able to see that the link to the renamed page has changed as well.

In case you decide to change the name of the page again, this will again be automatically reflected in the menu.

Now we can make some menu changes. For example, the photo folder can be moved in front of the contact information page. To do that, first we select the My Photos folder from the Tree List on the left:

Once the content of the folder is displayed, click on the name again and hold down the left mouse button, while dragging the folder to its new location. You can drag the folder below the name of the page that will precede it - let's say this is the My Journal one. The changes are obvious:

If you would like the site to open a page other than the home one at first, you need to change the default page in the top folder. First, select the name of the page that you would like to have as a default.

Then, click on the Default button, that is above the Tree List. When the default page is changed, the green "tick" sign will appear next to the new default page, like on the picture below:

With the current setup, My Journal will be the first page to open when your site is being sought.

Preview and Publish

It is now time to preview your design! Click the Preview button at the top right of the Site Editor's window, and a new one will pop up. It will be showing your website the way it will look on the web.

Want to go live now? When you select the Publish button, the SiteBuilder will start the procedure for linking your pages to the web. A page similar to the one below will show you the address that needs to be typed in the address bar of your browser for your pages to be shown.

Please select Next to proceed. You will be redirected to a new page, that will resemble the one below.

If you see this page then the publishing process has been successful - this means that the next time anyone types in your domain name, he will see the website you have just designed!

If you click Next you will see the Control Panel of your new website. You will be able to re-edit, delete or unpublish your site. Click on your website and you will be able to edit your site:

If you click on the "Unpublish" option your site will be unlinked from the web. If you click "Delete" all the design files for your site will be deleted.

SiteBuilder Video Tutorial

SiteBuilder Video Tutorial

Welcome to the SiteGround SiteBuilder Video Tutorial. Below you will find some of the most popular topics for dealing with the SiteBuilder.

• Creating a Site - Create a site by choosing a template and selecting a color scheme.
• Editing Text - How to edit text in your site.
• Working with Images - Uploading and managing images.
• Creating Pages - Create pages from the library of 'pre-fab' pages in a variety of layouts.
• Pages and Menus - See how pages are automatically included in the menus.
• Creating Hyperlinks - Create hyperlinks by pointing at the page you wish to link to. See how hyperlinks are also used for maps, shopping carts and more.
• Changing Layout - Change the layout of a page by moving, resizing and stylizing the various text and picture boxes that make up a web page.
• Creating Boxes - Create new boxes and see how to place them in the headers.
• Creating Tables - Create tables of various sizes.
• Editing Tables - Edit a table once it is created.
• Photo Albums - Create a photo album with an unlimited number of pictures and a built in slide show.

SiteBuilder PRO Video Tutorial

The topics below are aplicable for SiteBuilder Pro edition only.

• Page Masters - Make global changes to your site with page masters.
• Style Sheets - Make global changes to the text styles, colors, backgrounds and spacing metrics of your site.
• Color Palettes - Make global color changes to your site. See how everything (including graphics) changes as you adjust the colors using color controls inspired by Adobe Photoshop.
• Menu Styles - Stylize menus by pointing and clicking.