Site Studio Demo
Getting Started | 1. View Designs | 2. Easy123 Demo | 3. Quick Start Guide | 4. Documentation | 5. Meta Tags | 6. Video Tutorials | 7. Naming Pages
Budget conscious small business may like to use our Site Studio Web Builder - it is so easy, and it's free with your hosting. When you're ready to have a powerful website with many more features, talk to us about our Content Management System which many of our clients use.
To get started, simply scroll through these instructions to see how easy it is to create a website on your own.
Rather not do it yourself?
If you need help to put your text and images on your new website, we can help you with that. Contact us for a price on helping you set up your website .
OK - let's get started!
EASY-as-1-2-3!
Quick Instructions on Getting Started with the Web Builder
OK - you're ready to try out the Demo website, and you want some quick info on Getting Started ... look no further! This is just a quick run-through to make sure you are comfortable with using the Web Builder before you buy [we know you will be!]. [PS - you can go back and use the Demo at any time to try out different features!]
I'll step you through some basics, right here!
- Looking at all the designs available , choosing one
- Logging in to the 24 hr Demo Web Builder
- Creating your first page
- Create Topic/Theme of the page
- Using the SETTINGS Tab to name the webpages
- Using the EDIT Tab to add paragraphs and type words
- Using the EDIT Tab to change fonts
- Using the VIEW Tab to see your work
- Using the SETTINGS Tab to change Button Link font size
- How to PUBLISH the demo site and LOGOUT
Have fun! Let us know if we can help you in any way.
Let's look at all the designs available, and choose one
P.S. you can always change your mind later, and pick a new design! Don't worry, your text and images will still be there.
HOT TIP! If you don't want to pick a design just yet, simply read through the rest of this page to get an overview of the simplicity of the web builder #1.
Click here to view the Web Designs online [new window will open]
Logging in to the 24 hr Demo Web Builder
Don't forget, you can always change the website design at any time!
What's going to happen now is that you will have my webpages in front of your with the step-by-step instructions, and when you click on the link below a new window will open - so you'll have two browser windows open. You can go from one to the other, quite easily.
- OK, let's go to the Demo Web Builder - Click here [a new window opens]
- you should see a window like this:
- click on the button to LOGIN to the Demo
- you *may* see a window like this, saying Welcome Back:
- if this is your first time and you see the screen above, click the link which says, 'Click here to start over', which will delete the previous demo.
The Menu
- let's talk about the Menu buttons across the top of the page, which look like this:
- when you want to create a NEW PAGE, you click on ADD A PAGE button
- when you want to view the SITE MAP to see all the pages you've already created, you click on that button
- when you want to move the pages around, choose ORDER PAGES - you click on that button
- if you want to change the SETTINGS like company name, email name, address, logo etc, you click on that button
- if you need HELP at any time, click on the HELP link in the top right corner of your screen, which will open up the Tutorial and take you straight to the section related to where you are at the moment in the Web Builder; the HELP link looks like this:
- sometimes there are many people trying to access the Demo Web Builder at the same time, so the Demo websites are deleted from the server every 24 hours
- if for any reason you can see someone else's demo website, you need to start from scratch
- to do this, if you see this window:
and click on the third option, Click here to start over, and proceed as above
Creating your first page
Don't forget, you can always change the website design at any time! BUT ... once you buy your website, if you choose a Personal website, you cannot CHANGE it to Business after you've built it. You will need to DELETE it and start again, in order to choose the other Category.
- OK, are you ready to create your first page? Great, let's get to it!
- the first thing to do is select a Category - Personal or Business
- don't worry about which one you choose, they have the same features available for both
- today we will choose PERSONAL, so click on that word in the list on your screen
- click NEXT button on your screen
- now you should be able to see a window which is asking you to choose a Website Design [there'll be a list down the left of the page]
- I'd like you to scroll through this list until you find the COLOR SKY design
- the website layout will appear on the right of your screen [colored gray]
- once you choose a design, a list of colors available appears in another list below the first list - click on PURPLE option
- as soon as you choose the color, a mini-view of the webpage and its color appears to the right of the lists, so you can make sure you've chosen the right design
[PS - you can also click Old or New style to see the differences] - when you've done this, click on the NEXT button
- you are now in the GLOBAL SETTINGS page, where you can add details about your website - as this is a DEMO site, you might not want to put any personal info here, the choice is yours
- if you don't know what to put in some of the fields, don't worry about that for now - you'll learn what goes where later on, and you can *always* come back and fill in this when you work on your *live* website
- at the bottom of the screen you can click on the NEXT button
Don't forget, you can always change the website design at any time!
Choosing the TOPIC for your page
- we now see a list of topics for the pages you can have on the website
- you can add all kinds of pages, but for this quick demo we will scroll down and choose GENERIC page
- go ahead and do this on the Web Builder page on your screen
- click the NEXT button
- you will now see this on the screen - this is where you set up paragraphs, columns for the paragraphs, and other settings like Sub-pages [we won't get into that today, save that for another time!]:
- Let's start at the top of page [see image above] - what we need to do is type the TITLE to appear on the page - let's type My Website - Home Page [you can change this at any time]
- we now can type the NAME which will appear as a Menu link - this is LINK TEXT, so type Home in that field - this means that in the Menu on the website you are creating, there will be a link called *Home* for people to click on; when you add more pages, they will see more *Links* to those pages
- your screen should now look like this:
- click the NEXT button
- you will now be taken to VIEW the webpage you just created - bravo!
- ok - there's not much to look at yet, but we will soon fix that
Naming the webpage
- At the top of the page you'll see the Menu bar - it looks like this:
- to the RIGHT of the page you will see the SETTINGS tab - it looks like this:
- click now on the orange SETTINGS tab so we can look at the different settings for this page, to change the WEBPAGE NAME
- at the top left of this new screen, you will see the info we just typed in the EDIT tab [in the first two text fields] - we will now change the third text field:
- at the top left of the page where the File Name field says gpage.html, we're going to type the new webpage name - type index.html - this is the name of the first page of every website on the internet, so use this name on the page you want to be your *first* or *home* page; it will look like this:
- scroll down and click on NEXT button on the screen
- click the NEXT link below to go to the next lesson
Let's Add Some Text!
- click on the orange EDIT tab at the top right of your screen:
- on your screen, go to the section called EDIT PARAGRAPHS:
- on your Web Builder screen, click on the button or link called ADD, on the right of this section
- the screen you will see will look something like this:
- we will type a NAME for the Paragraph and add some text
- if you see the link to Launch Full Screen Rich Editor, click on it [if you use a Macintosh, you might not be able to use this - contact me and we will discuss how to get around this easily]
- in the Text Field, type:
This is my first webpage. I would love to be able to build my very own website! - above this text field is the Paragraph Header field - type Welcome! in this text box
- scroll down and click the NEXT button at the bottom of the page
- you will see this on the screen - the paragraph you just created now appears, you can only see the Heading, if you want to see the TEXT you typed, you just have to click on the word EDIT beside the name of the Paragraph:
- you can add as many paragraphs as you like, by clicking on the ADD link
- if you give each paragraph a Paragraph Header, you will be able to see it on this screen, listed
- you will also be able to change the order of your paragraphs, move them up or down, when you have more than one paragraph
- let's click on the orange VIEW tab to see what this now looks like your screen will now look something like this:
- looking good - well done!
Let's Change the Fonts!
- click on the orange SETTINGS tab towards the top right of your screen:
- there is A LOT to look at on this page! For now, we'll concentrate on the right hand side of the page, which looks like this:
- for the HEADING, let's select the font from the popup, choose COMIC SANS, click on B for BOLD, and the large A to get the largest size font
- click on the orange VIEW tab to see what the word WELCOME! looks like now
- let's go back to the SETTINGS tab and change the font for the rest of the text - click on SETTINGS tab again
- I chose TAHOMA font from the popup, and I clicked on the large A for the largest size font - click on VIEW tab to see what the change looks like
- you can play around with this as much as you like
Let's change the Menu button link size!
- right now the Menu has only one link - the first page we have created called HOME - it looks like this:
- let's make it a smaller size - click on the orange SETTINGS tab
- on the left of the screen, you will see BUTTON FONT and BUTTON SIZE
- change the FONT to Cetus, and the size to SMALLEST, like this:
- click on NEXT button at bottom of your screen
- let's click on orange VIEW tab to see what it looks like:
- hmmm - let's make it all in CAPITAL LETTERS, uppercase - click on orange SETTINGS tab
- at the top left of screen, you will see the words Button Text - instead of it looking like *Home*, type over it so it looks like *HOME*, then click the NEXT button at the bottom of the screen, and click VIEW
- the menu button now looks like this:
- well done! see how easy it is when you know *how*?
Time to PUBLISH your website!
- let's click on the PUBLISH link at the top left of the page - the DEMO site will be published for the purpose of the Demo so you can see if properly in a browser window; when it's your *LIVE* site, clicking on the PUBLISH link puts your latest changes and images on your website - with just one click:
-
after you've seen the published Demo, close the browser window.
How to Logout
-
now it's time to call it a day and LOGOUT ..in the top left corner of the browser window in Site Studio, next to the Publish link is the Logout link, please click on it.
- That's it! You now know how easy Web Builder #1 is!
Don't forget you can check out the Demo web builder at any time to try out any of the features!
Congratulations!
You have successfully created a new website
with one page, you've changed fonts,
you renamed the page,
and you've set the menu link size
- you should be very pleased with yourself!
Next >> Online Demo of Site Studio (new window opens)