Contents. SiteBuilder User Manual

Transcription

1

2 Contents Chapter Getting Started with SiteBuilder... 3 What is SiteBuilder?... 3 How should I use this manual?... 3 How can I get help if I m stuck?... 3 Chapter Creating Your Website... 5 What is the Site Creator Wizard?... 5 What are the steps within the Site Creator Wizard?... 5 How do I change the options I ve chosen within the SiteCreator Wizard? Chapter Designing Your Website What is the SiteBuilder SiteDesigner? Where can I find the SiteDesigner? About this design - Optional Design Features Header Bar Functions How Should I use the Panel Option? Chapter Adding Content to Your Pages The Theory Behind the Page Editor How do I start adding content to my page? How do I add zones to my page? What are the other functions on the Page Editor? Page Properties Chapter Organising Your Website SiteBuilder SiteOrganiser Where to find the SiteOrganiser Moving Pages and Creating Sub-Sections The Options Functions in the Site Organiser Chapter Selling on your Website When should I use the e-shop? How do I add products to my pages? Adding an e-shop zone to your site E-shop Styles The E-shop Zones Tab How Do I Keep Track of My Stock? How Do I Charge for Delivery of my Products? Setting up Delivery Policies Having Multiple Delivery Policies How Do I Take Payments? Order Messages How do I keep track of sales? Chapter Making your site meet the legal requirements Why Do I Need These Documents? How Do I Find These Documents in SiteBuilder? What is the Terms of Use policy? What is the Privacy policy? What is the Terms and Conditions policy? How to I change/update this information Chapter Making your site live Have I covered everything I need to? Website Check List How do I know how my live site looks? How do I set up my payment account? SiteBuilder User Manual

3 Chapter Managing your new website Where is the SiteManager? What can I do with the SiteManager? What are the other options within the menu in SiteManager? Website Statistics Managing Domain Names Creating another website with SiteBuilder Appendix A The Colour Picker The Colour Suggestor Appendix B Image Editor Picture Details Crop Effects Rotate Link Appendix C Title Editor Style Rotate Link Appendix D Panel Editor Panel Editor Extras: Borders Rotate Link Appendix E - Presentation Style The Panel Style Options The Content Style Options The Colour Scheme Options Custom Colour Scheme Buttons and Graphics Contact Us at SiteBuilder SiteBuilder User Manual 2

4 Chapter 1 Getting Started with SiteBuilder Introduction Doing anything for the first time is always a daunting experience, therefore if this is the first time you ve tried to build your own website you might be a little apprehensive about the skills required to do so. In this Chapter we ll answer the following questions: What is SiteBuilder? How should I use this manual? How can I get help if I m stuck? This chapter aims to put your mind at rest and explain a little about our site building software, how it works and how you can get help whenever you need it along the way. What is SiteBuilder? SiteBuilder has been designed and created to help small businesses gain access to the benefits of the internet. A website building tool, SiteBuilder provides you with all you need to create and manage your own professional business website. If you want to sell products via your website, the e-shop module lets you do just that. It s easy to set up and even easier to manage, complete with a sales ledger, stock manager and some great designs and shop layouts to complement the look and feel of the rest of your site. Everything you need to create your site with SiteBuilder can be found within our online system. So, as long as you have access to an internet connection, you can create, publish, manage and maintain your website anywhere in the world. How should I use this manual? This book has been created as a visual guide to using our system and creating your very own website. We ve structured the manual to allow you to use it whenever you need the answers to a question. So, you don t have to read the whole book before you start building your site, just use it as a reference for ideas, how to guides and visual aids when you get a bit stuck. To find the help you re looking for you can either use our index at the start of the book or our troubleshooting guide which will list the page you are looking for next to the question you have. Every aspect of creating your site has been broken down into chapters, which cover individual tasks. Every task is presented with step-by-step instructions and annotated screen illustrations. How can I get help if I m stuck? Help Icons SiteBuilder User Manual 3

5 To help you out as much as possible we ve created help points throughout the system. Wherever you see an icon you can click on it to find out about the area you are in and how to use it. Hints and Tips As you begin to create your site you ll notice our SiteBuilder tips popping up along the way. Although there is an option to switch this function off we suggest that you leave it switched on whilst you get used to the system. If you switch the hints and tips function off and you d like to turn it back on you ll find an option to switch it back on within the Help tab when editing your site. Our SiteBuilder tips boxes are designed to give you direction and guidance as you create your site. This function can be switched on/off within the help tab whilst in site editing mode. Manual Help Throughout this manual you ll see icons like the ones shown below. These are designed to draw your attention to areas of particular importance along the way. Speak to One of Us! As well as all of the written help you can also or telephone our offices for additional assistance. Contact details can be found at the end of this manual. SiteBuilder User Manual 4

6 Chapter 2 Creating Your Website Introduction Because we know that the first steps are the hardest, we ve developed a very handy Site Creator Wizard to help you get the basics of your site together by simply answering a few questions and clicking a few buttons. If this is the first time you ve used SiteBuilder we recommend you read this chapter as you go through the Site Creator steps to help you understand the process. In this Chapter we ll answer the following questions: What is the Site Creator Wizard? What are the steps within the Site Creator Wizard? How do I change the options I ve chosen within the Site Creator Wizard? What is the Site Creator Wizard? The Site Creator wizard aims to make the initial stages of setting up your website as easy as possible. Presented as a set of questions and steps to complete, the Site Creator ensures that the basics are covered before you gain access to the editing tools for your new website. When you initially register for our free trial you will go through the Site Creator steps. If you already have a site with us and you are creating a second site you will have to go through the same process to allow SiteBuilder to pull together the basic structure of your new website before you can start adding detail to it. What are the steps within the Site Creator Wizard? The following section will take you through the individual steps of the Site Creator Wizard. SiteBuilder User Manual 5

7 Welcome The first step of our creator is there to introduce you to SiteBuilder and explain a little about how the creator works and its purpose. Step One. Your details If you are brand new to SiteBuilder you ll have to enter some details, we ll store the information you provide in If you have already registered your details case we need to contact you. Don t with SiteBuilder you can login to the Site worry we won t be bombarding you with Creator as an existing user and enter your sales we ll only use this information if username and password. we need to talk to you about an issue on your site or a problem with your account. SiteBuilder User Manual 6

8 Step Two. Site Name After entering your details you ll have to choose a name for your website. We suggest that you use a name that reflects the content or purpose of your website. SiteBuilder will also give you a free website address. If you want to use this address as your primary address, feel free to do so. However, as explained later in this manual, we do have a domain manager where you can buy more commercial domains, such as.co.uk or.com domains. Step three. Choose Design Now it s on to the fun part! This step will provide you with a range of site styles to choose from. Clicking on the features and examples button will open a window with more detailed information on the flexibility of the designs as well as examples of how different the templates can look when the flexibility is used to its full potential. SiteBuilder User Manual 7

9 Step four. Colour Scheme Once you ve chosen your style, the next step will show you a range of colour schemes that work particularly well with the style you ve chosen. Once you ve created your site you will be able to completely customise your colour scheme if you so wish. In the meantime though, you simply need to choose the colour combination that appeals to you the most. Step five. Optional Features All of our designs have a range of optional features, these include things like; optional feature images, address bars, footers and additional design space below your menu bar. This step explains some of the more noticeable features and gives you an option to switch them on/off. You can learn more about all of the features once you ve got the basics of your site together. As with everything in the Site Creator, you can change the options you choose here once you get in to your site. SiteBuilder User Manual 8

10 Step six. Setup e-shop A very quick step, you simple need to answer; yes, no or maybe. The e-shop functionality will always be available for you to use in SiteBuilder so it s not essential that you give us the definitive answer here. AN E-SHOP is an area of a site where customers can exchange money with you to buy your products. Step seven. Choosing the main pages for your site SiteBuilder will suggest six pages that you might want to include on your website. The suggested pages are the ones you d most commonly find on any website. You don t have to use the pages suggested, once you get in to the editing area of your site you can create as many pages as you like and name them whatever you fancy. SiteBuilder User Manual 9

11 Step eight. Completed You ve completed the initial stages of developing your website. SiteBuilder will now calculate all of your choices and create your site for you. Now all you have to do is fill it with your images and information. Click the create my site button to be taken to your website. How do I change the options I ve chosen within the SiteCreator Wizard? Changing your personal information This information can be changed via the my details link on the Site Manager. This is explained in more detail in chapter 9 All of the choices you ve made in the SiteCreator can be changed once you get to your website. Changing your password This information can be changed via the my details link on the Site Manager. This is explained in more detail in chapter 9 Changing the style of your site To change the style of your site you need to be in the Site Designer menu, which you can access when you click edit from the Site Manager area. See Chapter 3 page 14 Choose Base Design. Changing your colour scheme Similar to changing the style of your site, you must be in the Site Designer menu to change your overall colour scheme. Access the Site Designer, via the edit option in the Site Manager Summary page. Once in the Site Designer menu click the edit colours options at the bottom of the menu. This will open a new dialogue which will display a list of all of the colours you currently have in use on your site. Hovering over the coloured squares will highlight the area that the colours are being used in on your site. To change a colour click on its corresponding coloured square and the SiteBuilder Colour Picker will open. Choose your new colour from here and click OK. To learn more about how the Colour Picker works click here. SiteBuilder User Manual 10

12 Alternatively, if you want to change your entire colour scheme to another of our recommended selection you can choose the recommended colours tab from the edit colours dialogue instead. Changing the optional features on your site You must use the Site Designer menu to change this information. You can find out more about the functions of the Site Designer menu in chapter 3. Changing the pages on your site The Site Organiser is used to update general page information such as changing the name of your page, moving the position of a page in the menu, deleting pages. To find out more about the Site Organiser go to chapter 5. Chapter 3 Designing Your Website Introduction Now that you have the basis of your site, you can start making it look like your own. You ll probably want to add a company logo, maybe an image to your header bar and change the colour options on your site. You can do all of these things via the Site Designer function in SiteBuilder. This chapter explains more about the Site Designer and how you use it. In this Chapter we ll answer the following questions: What is the SiteBuilder Site Designer? Where can I find the Site Designer? Functions of the Site Designer menu Optional Design Features How do I add images to my header bar? How do I add titles to my header bar? How should I use the panels option? What is the SiteBuilder SiteDesigner? Our Site Designer tools can be applied to certain areas of your site as shown in the diagram below: Main Header Bar Within the header bar of your site the Site Designer can be used to add images, titles and more. Optional Features The site design you choose will have various optional features such as the feature image shown here. You can use the Site Designer to make changes to these options. SiteBuilder User Manual 11

13 Site Colour Scheme Choose the colours of all aspects of your site in the Site Designer mode, from page background to the colour of your menu bar. Side Bar In some designs you can attach additional graphics to your menu bar. Upper Promo Panel Promotional area under the menu which works down the page. Design Template Change the design you chose for your site using the change base design option Backdrop Colour Set the colour of your site backdrop via the edit colours function in Site Designer. Lower Promo Panel Promotional area underneath the menu bar from the bottom of the site up. Where can I find the SiteDesigner? External Footer Allows you to add images, titles and panels to the backdrop of your site at the bottom of each page on your site. Internal Footer Allows you to add images, titles and panels to the bottom of your page. To get to your Site Designer you need to be in editing mode on your site. From the Site Manager Summary page, click, this will take you to editing mode for your site. In editing mode, the main functions of SiteBuilder can be accessed via the horizontal menu bar at the top of the page. You can access your Site Designer from this menu. Choose the Site Designer option from this menu. Functions of the SiteDesigner menu Once you ve chosen the Site Designer option from the main editing menu, a floating menu will appear as shown below. A FLOATING MENU can be picked up and moved around a page to prevent it from blocking your view of areas you might be working on. External Header Add images, titles and panels to the background colour area above your SiteBuilder User Manual main header bar. 12

14 Feature Image Edit the contents of this area. Add, edit and remove logos, titles and panels. Switch this feature on/off. Promo Panels Edit the contents of these areas. Add, edit and remove logos, titles and panels. Site Footers This is an optional feature in most design templates. Footers can be added within the bottom of the page or on the background colour below the bottom of your page Header Bar Edit your header bar. Add/edit and remove logos, titles and panels within this design area. Lower Header Most designs have a separate area under the main header bar where you can add images, titles etc. In some cases a contact details display area is included. Basket Switch your shopping basket on/off and edit the display options. In some designs your shopping basket may be within another area such as the lower header. Legal Pack Switch this optional feature on/off from here. About this design Learn more about the optional features for your chosen design. Choose to switch them on/off in this option. Choose Base Design This option will open details of all template designs available. Choose another template design for your site from here. About this design - Optional Design Features For a list of all of the optional features for your chosen design template click the About this design option on the Site Designer menu. A dialogue, like the one pictured below will appear. The Overview Function The overview area will point out all of the features of your chosen design. Rolling over any of the bubbles will provide you with more information on each design area, allowing you to turn them on/off where possible. Change Colours This option will open a list of all colours on your site. Change to another recommended colour scheme or create your own colour scheme. Zones can be switched on/off within the zone by zone tab of the about this design feature. SiteBuilder User Manual 13

15 Zone by Zone Clicking this tab will let you view the same information as is in the overview but it s presented in a different way. Change Design Clicking here will open the base design dialogue box to allow you to change the design you are using for your site. More Information Box When you roll over a bubble some corresponding text for the bubble will appear in this box to explain more about that particular feature. How do I know which features I m using? You can easily tell which features you have switched on/off via the Site Designer menu: Switched Off Optional features which are scored out are inactive. Switched On These optional features are currently active. How do I turn these features on/off? If a feature is switched off, single click on it in the Site Designer menu and a dialogue box will appear which will give you the option to switch it on. If a feature is currently switched on, hovering your cursor over the feature or, clicking on it, will provide the option to switch it off, as shown in the adjacent image. SiteBuilder User Manual 14

16 Choose Base Design This function allows you to alter the base design of your site. The base design is the overall style of your site, you ll have chosen your base design from the Site Creator options originally. Should you wish to change your base design click this option in the Site Designer menu. The dialogue box shown below will appear. Changing your base design will revert the colour scheme back to the default, any colour scheme changes you ve made will be lost when moving to a new design. If you choose to go back to a design which you ve originally set up, the system will have saved any colour scheme changes you ve made within that design. Features and Examples Click Features and Examples for more information on a specific base design. Scrolling Scroll through the list to view all possible options. Select Once you know the base design you d like click Select to choose it. Edit Colours Use the edit colours function to change any of the default colours in use on your site. To find out more about our colour picker refer to appendix A SiteBuilder User Manual 15

17 Recommended Colour Schemes The recommended colour schemes tab will provide you with a range of suggested colour schemes suitable for the base design you ve chosen. Changing Individual Colours Clicking on the colour you d like to change will take you to our Colour Picker where you can customise your colour scheme Header Bar Functions How do I add images to the header bar? To find out more about using the SiteBuilder Image Editor go to appendix B Firstly, click the header bar option in the SiteDesigner menu. The menu will expand to provide you with a list of things you can do within the header bar area of your site. Any images, titles or panels currently in your header bar will be listed first. Clicking on an item that is currently in your header bar will further expand the menu with editing options. To add a new picture/logo you need to click the add picture/logo option from the menu. Some new dialogue boxes will open and SiteBuilder will prompt you to browse your computer files and find the picture/logo you want to display in your header. Once you ve uploaded your picture/logo it will appear in the SiteBuilder image editor tool. How do I add titles to the header bar? Add titles to your header bar via the Add Title option in the Site Designer menu. To find out more about using the SiteBuilder Title Editor go to appendix C SiteBuilder User Manual 16

18 The SiteBuilder title editor tool will open. How Should I use the Panel Option? Our panel option allows you to add blocks of colour to your header bar. For example, you could add a coloured panel behind your title to make it stand out, or you could create a design in your header bar using multiple panels. The functions of the panel editor are explained in Appendix C. Chapter 4 Adding Content to Your Pages Introduction So, you ve designed your site and now you In this Chapter we ll answer the following questions: The theory behind the page editor SiteBuilder User Manual 17

19 need to add content to your pages. Our Page Editor function can help you with that. Probably the trickiest part of our whole system, this chapter will explain the theory behind our page editor to help you gain a better understanding of how to structure your pages, you ll also learn about all of the different content zones and how to use them. How do I start adding content to my page? The Page Editor Menu Content Zones The Page Properties Function The Theory Behind the Page Editor Before you start to populate your pages it might help you to understand the way in which the content areas of our pages work. So, we ll start from the beginning. What is the Content Area? We call the content area the central part of the page, this is the area that you can populate with your content, such as text, images, discussion forums etc. What are Zones? Zones are the separate pieces of information that you will add to create a full page. For example, the page in the example below contains a text zone and an image zone. Rules for Creating Your Page Without wanting to confuse the situation we need to set out some rules to help you understand how to layout pages the way you want to. 1. The content area on a SiteBuilder page has a fixed width but can be any length. SiteBuilder User Manual 18

20 2. All content Zones in SiteBuilder have a minimum height and width. There is also a maximum width (no larger than the standard SiteBuilder content area width), height will depend on the contents within the zone. 3. Within a content area you can create as many rows of zones as you like. SiteBuilder User Manual 19

21 4. The number of columns you can create within a row is dependent on the width of each zone within your column. How do I start adding content to my page? SiteBuilder User Manual 20

22 When you choose a page from your menu that currently doesn t have any content on it, there will be a This page is ready to be set up message in a box within the content area (as shown below). The Page Editor Menu will also appear with the setup option as shown in the adjacent image. To start adding content to your page either click the box in the content area or click set-up in the Page Editor Menu. Page Set-Up Options Once you ve chosen to set up your page, a new dialogue window will pop-up, from here you can choose how you would like to set your page up. Blank Page Start with a blank page and add zones from the Page Editor Template Options Choose from a pre designed template. Copy Another Page Copy the layout of another page on your site. Copy the content by ticking the box. SiteBuilder User Manual 21

23 How do I add zones to my page? Once you ve been through the set-up options you might want to add more zones to your page (or if you ve chosen to start with a blank template you ll want to start adding zones). You can only add zones when you re in the PageEditor function The PageEditor menu To add zones you need to choose the add content zones option from the page editor menu. This will open a dialogue at the top your site with a whole host of possible content zones to choose from. Click on the coloured square with the crossed arrows for your chosen zone type and drag it to the central content area. Drop the zone by releasing the click button on your mouse. You can hover over any of the zone buttons with your cursor for a short text description of the zone type and what it does. Depending on the zone you ve chosen the relevant dialogue box will open and prompt you to start adding content to your zone What are the other functions on the Page Editor? SiteBuilder User Manual 22

24 As well as the add content zone option you ll notice other standard features within the Page Editor Menu. Each of the remaining features are explained below: Show Zone Markers Zone markers will show you where the various zones on your page start and end. There are different modes of the zone marker function. What are the Different Content Zones and how do I use them? Zone Type Description A text zone should be used to add large amounts of body text to your content area. For example, you might use a text zone to add some company history or explain more about your business. As the name suggests image zones are used to display pictures on your site. If you want to add a title such as welcome or about us to the top of your page you d use our title zone function. This zone style creates a nice area for you to store documents that customers might like to download such as brochures, registration forms etc. Our links zones will allow you to display links to addresses, other websites or other pages on your site. It works in a similar way to our downloads zones. The new contact zone provides a nice way to display multiple pieces of information about a person or a business in general. New contact information might include a name, company name, position, and web address. Our SiteBuilder discussion forum lets you interact with your customers via your website. The enquiry form can be a way of obtaining direct feedback from site visitors. The form lets you create the fields you d like your customers to be able to complete. If a form is submitted the information will be sent to an address of your choosing. News articles are presented as main headline information with a link to the full SiteBuilder User Manual 23

25 document. Events articles are displayed as a list of events with some brief information, you then have the choice of providing more information on an event via a more information page. The content feed is a way of displaying the headlines of your news or events articles across other pages on your site. If you have a news page for example, you could have a content feed on the home page which would create a link (via your news headline) to the latest articles on your news page. If you are selling goods on your website you d use our e-shop zones to display your products. Using Text Zones Our text zone is one of the easiest zones to use. Similar to Microsoft Word, simply write your text (or copy and paste from another document) in to the editor, you can customise your text with standard Word style tools as well. The presentation Style Tab is available on many of our zone editors, to find out more about its function go to appendix E Format your text Use the Microsoft Word style tools to format your text. Add your text Type as you would in a normal Word document in to the content area. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Using Title Zones Save your text Once you re happy with your text click OK and the text zone on your page will be populated with your content. Cancel If you don t want to save the changes you ve made either close the window or click cancel SiteBuilder User Manual 24

26 If you want to add a title such as Welcome or About Us to the top of your page you d use our Title Zone function. As the Title Editor is available across various areas of the system the functions within the editor are explained in Appendix C. Change the font. Change your font by left clicking in the font text box, a list of available fonts will appear for you to choose from. Add your title. Click the text box and type the word(s) you d like to make in to a title. Add a Word style effect. Bold, Italic or Underline by clicking on the corresponding button. Change the text colour. Click on the box with the current text colour in it. The SiteBuilder colour picker menu will open, choose your colour and click OK. Change the size. Either enter the point size next to the name of the font you re using or click and drag the title in the chequered area from the bottom right corner. Preview. View your title as it will appear on your page. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Undo. Click this to delete your last change. Save changes. Once you re happy with your title click this to add it to your page. Cancel. If you don t want to save your changes, click cancel or close the window. What are the extras in the title editor? The extra functions, shown on the horizontal tabs within the title editor (style, rotate and link) can be used as additional design tools for your title. Style. This option will provide you with a list of styles that can be applied to your title. You ll find options such as borders, shadow and blurred effects to choose from. Rotate. This option will allow you to change the composition of your title, you can rotate it as much as you like by either entering the degree of rotation you d like or using the sliding scale provided. Link. From this tab you can add a link to your title, this means that when your site is live your title will be clickable. On clicking, the site user can be taken to another page on your site, an external site or an address Using Image Zones SiteBuilder User Manual 25

27 The SiteBuilder image editor allows you to upload your images easily and manipulate the image in many ways. Before you get to the editing tools you need to upload your image. SiteBuilder will prompt you to do this using the dialogue box below: Upload your image. Simply click the browse button and find your image on your computer. Once you ve uploaded your image it will appear in the content area of the Image Editor (where the SiteBuilder image is in the graphic below). The functions of the image editor are explained alongside the image below. Picture Details. Allows you to view your image as it was when you uploaded it i.e. without any effects or alterations you may have made via the editor. Label. Give your image a name, this will appear in the menu as a way of distinguishing between multiple images. Alt Text. Set the text that will appear when a cursor lands on your image. Crop. Allows you to remove parts of your image. Effects. Choose from effects such as black and white or oil painting. Border. Choose from a wide range of borders to frame your image. Rotate. Change the composition of your image. Link. Make your image clickable to direct visitors to external sources or other pages on your site. Preview. Shows you how your image looks after you ve applied any editing tools. Display size. To change the size of your image you can type your desired dimensions in to the text boxes. Alternatively, click and drag the bottom right corner of your image for the same function. Change Image. Opens the image upload function to allow you to change the image you are editing. Undo. This function will remove previous alterations one by one each time it is clicked.. Using Download Zones Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Save changes. Saves the changes you ve made to your image and adds the final version to your site. Cancel. Clicking cancel will close the image editor window, you will lose any work you have done since opening the window. SiteBuilder User Manual 26

28 When the downloadable document editor first opens for your zone it will be empty and you ll need to decide if you want to add a brand new file to this zone or use a file already in use in another document download zone. Adding an existing file Click the add an existing file button. A further dialogue will appear with a list of all downloadable document files currently available throughout your site. Find and select your document. Scroll through the list to find your document. Click on the document you want to add to the zone. Cancel. Will take you out of this dialogue box, back to the previous one without making any changes. Once selected your document will appear in the downloadable documents editor. If you have more than one document in the zone they will appear in a vertical list. Moving files around a list Click and drag the crossed arrows to re-order a list of documents in a zone. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Edit function. Clicking edit will open a dialogue box to allow you to add a description to be displayed alongside your downloadable document. Delete function. This will delete the file from the zone you are currently in. Cancel. Cancel any changes made in this dialogue box. OK. Adding a new file Save any changes made and exist the downloadable document zone. SiteBuilder User Manual 27

29 To add a new downloadable document to the zone, which doesn t exist elsewhere on your site, click the add a new file button. A dialogue, like this one (adjacent) will appear and prompt you to find the file on your computer. When you upload a new document you ll be prompted with this dialogue box (adjacent) to add a description of your file to assist people using your site. Once uploaded, your document will be displayed in the main editing window as shown at the top of this page. SiteBuilder User Manual 28

30 Using link zones The layout of the link editor is very similar to that of the downloadable documents editor. When you first enter you will have to choose to add a brand new link to your site or find a link from a list of those that exist elsewhere on your site. The style option tab in this editor lets you change the overall look of your zone, including colour combinations. Find out more about presentation styles in appendix E Add an existing link Click this option to choose a link that already exists within another link zone elsewhere on your site. (Greyed out if there are no existing link documents) Add a new link Click this option to add new links to this zone. Moving files around a list Click and drag the crossed arrows to reorder a list of links in a zone. Edit function. Clicking edit will open a dialogue box to allow you to add a description to be displayed alongside your link. Delete function. This will delete the link from the zone you are currently in. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. OK. Save any changes made and exist the downloadable document zone. Cancel. Cancel any changes made in this dialogue box. Adding an existing link Click the add an existing link button. A further dialogue will appear with a list of all links currently available throughout your site. Find the link you want to use in the list and select it. The link will then appear in the main editor dialogue as shown above. SiteBuilder User Manual 29

31 Adding a new link Click the add a new link button and a dialogue box will appear, prompting you to complete the relevant fields. Title. Give your link a title. The title will be displayed alongside the link on your site. Link. Add your link. (The choose option is explained below). If you don t want people to be directed away from your website when they click the link tick the open in a new window box. Description. If you want to provide your users with an explanation for the link write a description. This will be displayed alongside the link on your site e.g. This website will provide you with more hints and tips about building a website. The choose option. Simply choose the description which is most relevant to your link. Another dialogue box will open to allow you to enter the link information once you ve chosen the type of link you d like to add. The nothing, remove the current link option will remove any links previously created. This box will appear if you choose to link to a page on your site. Use the drop down options to find the page and/or zone you d like to link to. A box like this will appear if you choose to link to another website or address. Enter the web address or address and click OK to add this link. SiteBuilder User Manual 30

32 Using Contact Zones The contact zone function is useful if you want to display multiple levels of contact information for a person or company on your website. The editor works in a similar way to the links and downloadable documents editors. As with similar zone styles, the editor works in the following way: Add a new contact Click this option to create a brand new contact to add to your zone. Add an existing contact Click this option to choose a contact that already existing within another contact zone elsewhere on your site. (This area will be greyed if other contacts do not exist) Moving files around a list Click and drag the crossed arrows to re-order a list of contacts in a zone. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Edit function. Clicking edit will open a dialogue box to allow you to amend the details for your contact. Delete function. This will delete the contact from the zone you are currently in. Cancel. Cancel any changes made in this dialogue box. OK. Save any changes made and exist the downloadable document zone. Adding an existing contact To add an existing contact simply click the add existing contact button. A new dialogue will open with a list of available contacts within your site. Click the contact you d like to add to your zone. SiteBuilder User Manual 31

33 Adding a new contact If you d like to add a contact that doesn t currently exist on your website choose the add new contact option. A dialogue, similar to the adjacent image will open. Enter your contact information in to the relevant fields. You don t have to complete all fields just the relevant ones. The choose option on this form works in the same way as the link choose option explained on page 29. SiteBuilder User Manual 32

34 Using Discussion Forum Zones A discussion forum can be a great way to get people to interact with your website. Once you ve dragged a discussion forum on to your page a dialogue box like the one below will open. The Presentation Style option tab in this editor lets you change the overall look of your zone, including colour combinations. Find out more about presentation styles in appendix E Options. Set up options for your forum, explained further on page 35. Created. This will show you the date on which the thread or topic was created. Replies. This will display the number of replies to the thread or topic. Display. Choose how many topics you d like to display per page from the drop down menu. Create new topic. Clicking this button will open a new dialogue to allow you to create a brand new topic; Topic. The title the topic has been given when created. Clicking on a topic in the list will open a further dialogue with all replies to that topic. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. OK. Save any changes made and exist the downloadable document zone. Last post. This displays the time and date on which the last person to respond to the thread or topic posted their response. List of topics. All topics within your discussion forum will be shown in a list on this page. The list will run from newest down to oldest. Cancel. Cancel any changes made in this dialogue box. If you have the moderate function switched on (see options) any topic that has a response which has yet to be moderated will be shown in red on the list. SiteBuilder User Manual 33

35 Creating a new topic As the administrator of the site you can create a topic to be posted on your forum whilst you are in the editing mode of your site. Single click on the discussion forum zone you d like to create a new topic for, once the new dialogue opens click the create new topic button. Post by. When creating a topic from the editing area of your site the post by field will be automatically filled with your chosen name. (you can set up your name from the options tab in the discussion forum zone). Subject. The subject field is that which is shown under the topic heading when all discussions are in a list. Message. The message area should be where you provide a description about your topic for your site users to read and respond to. Cancel. Cancel any changes made in this dialogue box. OK. Save any changes made and exist the downloadable document zone. SiteBuilder User Manual 34

36 Posting a reply As people start to use your forum you may want to reply to some messages, as with creating a topic you can do this from the editing area of your website. Firstly, open the discussion forum that contains the message you d like to reply to. Find the topic the message relates to in the list and click it. A new dialogue will open: Topic Posts. Shows the responses to topics, messages with a topic and so forth. This is explained in more detail below. Posts in detail. Shows the content of a post and allows you to carry out various admin functions for a post. Edit Post. Change the content of a post The topic posts area at the top of the dialogue uses a tree diagram format. It will outline the way in which topics and threads within them are being responded to. The topic is shown at the top of the tree Any direct responses to the topic are indented with an arrow below the topic A further indented response underneath a reply signifies a response to a message rather than the topic A further indent signifies a response to a response and so on Post Reply. Create a response to a post. Decline. This will remove a post from being displayed on your site. Once clicked the decline button will be to accept to allow you to revert the changes. Delete. Remove a post from a topic OK. Save any changes made and exist the downloadable document zone. To view a post in detail you can click on the post from the list at the top and the post in detail area will jump to the post specified. Moderating your forum If you d rather check all messages posted on your forum before they appear on your live site you ll want to use our moderating function. When you open your discussion forum in your site editing area topics which have new messages requiring moderation will be shown in red. Clicking on the topic will take you to the list of posts, posts to be moderated will be shown in red. Clicking on a red post in the topic list will cause the post in details area to jump to that particular post. At which point you can click the accept button to post the message live on your site. Clicking decline on any messages already accepted will remove the message from your forum causing the message to go red and changing the decline button to accept. Switch the moderate function on from the options tab in the main discussion forum dialogue box. SiteBuilder User Manual 35

37 Forum Options To help you manage your discussion forum SiteBuilder provides you with some additional options. The presentation style option tab in this editor lets you change the overall look of your zone, including colour combinations. Find out more about presentation styles in appendix E Message expiry. Use this option to hide messages from public view once they have been live for a pre determined number of days. Forum moderation. Tick the moderate box if you d like to be able to approve messages before they appear on your live forum. Anonymous posting. If you want to give forum users the option to create messages anonymously, tick this box. OK. Save any changes made SiteBuilder User Manual and exist the 36 downloadable document zone. New messages. To make new posts stand out you can add a New! label next to them in the forum. The label can be displayed for a pre determined amount of time. Administrator name. This is the name that will automatically be assigned to posts created within the editing area of your site. Cancel. Cancel any changes made in this dialogue box.

38 Using Enquiry Form Zones An enquiry form can be a great way of getting customers to provide you with very specific information via your website. For example if you want to give customers the opportunity to sign up for a newsletter you can prompt them to provide all of the relevant information via an enquiry form. Setting up your response options Send messages to. The address you d like customers to submit the enquiry form to. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. OK. Save any changes made and exist the downloadable document zone. Subject. The subject refers to the subject heading of the you will receive when a form is submitted Response. The response is the message that will be displayed to the customers once they have submitted the form. Cancel. Cancel any changes made in this dialogue box. SiteBuilder User Manual 37

39 Creating the required fields for your form Once you ve decided where you would like your form to be submitted to you need to decide what information you need to collect from your customers via the form in order for it to be useful for its purpose. Use the setup contact form options tab in the enquiry form zone to set up your enquiry form fields. New field. Click the crossed arrows in the box and drag to the area below to create a new field in your form. Moving fields. To change the order the fields appear in on your form click the crossed arrows to pick up a field and move it to another position. Single/Multi line. You can choose to show the fields on your form as single or multiple lines depending on the content. OK. Save any changes made and exist the downloadable document zone. Cancel. Cancel any changes made in this dialogue box. Naming fields. When you add a new field you ll be given the option to rename it. Otherwise, double clicking on the name of the field will open a text box to allow you to rename it. Delete. Clicking delete will remove the chosen field from the form. Required field. Ticking this option will ensure that customers have to complete that field before they are able to submit their form. SiteBuilder User Manual 38

40 Using News and Events Zones Our news and events zone are separate zones within the SiteBuilder interface but they both work in a very similar way to one another so we ve decided to tackle how to use them in the same section. When you first add a news or events zone to your page the initial dialogue box will be the same for either zone type. The button at the top of the zone will give you the option to add a new news article/event and all news articles/events within your zone will be listed below. Adding a new event/article To add a new news article/event, simply click the button at the top of the main zone page (as shown above). The dialogue boxes above will open when you choose to add a new news article/event. The text areas to be completed are relatively self explanatory. You can choose to add an image which will be displayed as a thumbnail next to the short description of the article or event. The information completed in this dialogue will be shown with the zone on your page. Particularly in the case of the news zone, you ll want to provide more information on the article or event. To create more information click the create button underneath Full Article. This will allow you to create a full page within your site about the article. SiteBuilder User Manual 39

41 Creating the full article Because your news/events article will be shown as a page within your site you need to build up the contents of your article in the same way that you would build a page on your site. The dialogue box shown below allows you to do this. When you choose the create option you ll be asked if you d like to prepopulate the full article with the information already provided. If you answer yes to this question SiteBuilder will automatically add and update information such as the title and summary of the article for you. Pre-populated information is circled in red. This information will automatically be auto updated from the info on your summary page. See instructions below to switch auto-updates off. Add the other zone styles by clicking and dragging, the zones function in the same was as they do on a normal page. Auto-updates Within the news and events areas, for zones within the full article that have been populated they will automatically be auto updated within information from the summary. To switch auto-updating off, on a pre-populated zone within the full article simply click to edit the zone and un tick the auto update box which is at the bottom of the editing dialogue. Other options within News/Events zones When you start to build up a list of articles within your zones you might want to archive them, you can choose to do this, as well as other things from the options tab in the main zone dialogue. SiteBuilder User Manual 40

42 Using the Content Feed Zone If your site has a lot of news or event information on it, or you update your news and events frequently a content feed zone could be an ideal way to allow you to display your latest news and events on multiple pages. You shouldn t add a content feed zone unless you ve already got news and/or events zone set up on your site Display Options Choose how many headlines you d like to display or how old headlines on your content feed should be. Change Alter which news or events zone the information in the content feed is being taken from Links You can choose to display a link to the full article alongside each headline in the content feed. You can also decide what you d like that link to say. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. OK. Save any changes made and exist the downloadable document zone. Cancel. Cancel any changes made in this dialogue box. Use the presentation style option to alter the look and feel of your content feed zone. Find out more in appendix E Using E-shop Zones A full explanation of e-shop zones can be found in chapter 6. SiteBuilder User Manual 41

43 Page Properties Once you ve set up your page you ll want to help the search engines to find it. You can use the tools we ve provided with the page properties area of each page to help you with this. Meta Data This is the information that you will complete about each page of your site. Meta data is background page information that cannot be seen by your site users on the page but can be read by search engines to help them understand what your website is about and rank you appropriately. Once you ve clicked on page properties, a new dialogue will open to allow you to enter your Meta data information for that page. As shown in the image there are three different areas of Meta data to complete. The Page Title should briefly describe the information on your page. The information you write for your page title will be displayed along the very top of the browser window when viewing your site. Meta Keywords are generally perceived as being less important than the other two areas of Meta data. Try to enter around 6-10 keywords which you believe are very relevant to the information on the page of your site. The Meta Description is generally the text that is displayed by a search engine when they rank you organically, usually shown underneath the main link to your site. Explain, in a couple of sentences, what the page is about and what the customer can expect to find. SiteBuilder User Manual 42

44 The Google Tab Alongside the standard Meta Tools you can also use the page properties area of your site to set up additional tracking information to help you monitor and improve your sites performance. Within the Google tab you ll find space to paste code, provided by Google, for various Google Tools. Google Analytics, this is statistical tracking software which can tell you all sorts of information about visitors to your site; where they re coming from, how they re finding you and which pages they re leaving from for example. When you sign up for Google Analytics (you can do this via their website: ) you ll go through a few set-up steps and then be given some code to paste in to your website. Copy this code and paste it in to the text box underneath the Google Analytics heading within Page Properties. SiteBuidler will copy this code across all pages on your site so that the customer journey can be tracked throughout the site usage. Googe Adwords, if you use Pay Per Click marketing to attract customers to your site, you most likely do this through Google Adwords (find out more at: if you d like to get a more accurate result of customers going to your site via ad-words you can paste code in to the relevant page on your website and track performance. Google Webmaster, provides you with information about what the Google Search Engine Spider can see when they visit your site. This can be useful for helping you optimise your website (Find out more at: If you choose to use Google Webmaster tools you ll be asked to verify your website, choose the meta data way of verification and paste the code provided in to the text box provided within the page properties area of any page on your site. The Yahoo Tab Similarly to Google Adwords Yahoo have their own Pay Per Click system. As with Google when you set up your account with Yahoo for this service you can get tracking code which will monitor customers coming to your site via PPC and tell you how many customers convert to a sale. Paste the code provided by Yahoo in to the text box, as shown adjacent, on the relevant page(s) on your site. SiteBuilder User Manual 43

45 Chapter 5 Organising Your Website Introduction Once, you ve familiarised yourself with SiteBuilder the way in which people navigate your site and the structure of the pages within your site will become important as you head towards publishing your site. In SiteBuilder the Site Organiser tool is where you can make changes to the structure of your navigation and site pages in general. This chapter will provide you with a full overview of the Site Organiser whilst explaining how to use all of the functions within it. In this Chapter we ll answer the following questions: SiteBuilder Site Organiser Where to find the Site Organiser Adding/Deleting/Renaming pages Moving Pages and creating sub-sections Using Floating Pages The options function SiteBuilder SiteOrganiser The Site Organiser tool allows you to do the following on your site. Within the Site Organiser you ll also find a range of helpful tips. Add new pages to your site Re-order pages in your menu bar Change the names of current pages Access floating pages/create floating pages Delete pages from your site Where to find the SiteOrganiser To get to your Site Organiser you need to be in editing mode on your site. From the Site Manager Summary page, click, this will take you to editing mode for your site. In editing mode, the main functions of SiteBuilder can be accessed via the horizontal menu bar at the top of the page. You can access your Site Organiser from this menu. Adding, deleting, editing and renaming pages in the SiteOrganiser Once you ve clicked on the Site Organiser link from the main SiteBuilder menu the Site Organiser will open up in a new dialogue box. SiteBuilder User Manual 44

46 Adding Pages Click and drag the crossed arrows down into the menu area then drop your page. Main Menu The main menu area in the Site Organiser relates to the pages that will be featured in the menu on the live version of your site. The order of pages within your Site Organiser matches the order of the pages on your website menu bar. Floating Pages Floating pages can t been seen within your navigation menu, to access floating pages for editing you need to use the Site Organiser. All floating pages are listed below the main menu area. You can move main menu pages in to the floating pages area and vice versa by clicking and dragging on the crossed arrows. Deleting Pages Click the delete button next to the page you want to delete. Renaming Pages Click the rename button next to the name of the page you want to rename. Type the new name over the current page name. Editing Pages Clicking the edit function for a page will close the Site Organiser and take you to the page you d like to edit. Setup Clicking the Setup option will open a new dialogue box where you can decide how you d like to set up your page. See chapter 4 page 20. SiteBuilder will automatically prompt you to name your new page. When you add a new page within the Site Organiser, a prompt box will ask you if you want to set up the page now. Choosing this option will take you to the page layout dialogue and on to the page editor functions for that page. Alternatively, if there is more you d like to do within the Site Organiser you can choose to set your page up later. SiteBuilder User Manual 45

47 Moving Pages and Creating Sub-Sections Subsections Using the crossed arrows next to page you d like to make in to a sub-section click and drag right. Moving Pages To move a page to another position, either within the main menu or within the floating pages section click the crossed arrows next the page, drag and drop in the desired position. The Options Functions in the Site Organiser You might have noticed in the screen shots of the Site Organiser tool that there is an additional options tab. Clicking on the tab will provide you with options on how to display your menu bar. Expand is the first option, choosing to display your site menu bar in expand mode, will show all of the main section and subsections of your site at once. An example of an expanded menu is shown in the adjacent image. As you will see all main sections and sub sections are showing. Normal is the other option for your menu bar. This option will display only the main pages in your menu at first sight, when a main page which has additional subsections within it has been clicked the menu will expand to show these sections. An example of a normal menu is show in the adjacent image. As the image shows, because the main page of examples of our work is being viewed its subsequent sub-sections are being shown. If the user moves to another page on the menu bar the subsections will be hidden again. SiteBuilder User Manual 46

48 Chapter 6 Selling on your Website Introduction If you are looking to sell goods or services via your website then SiteBuilders e-shop can provide you with all of the tools you need. This chapter will take you through the process of setting up your shop with SiteBuilder. In this Chapter we ll answer the following questions: When should I use the eshop? How do I add products to my pages? How do I keep track of my stock? Charging for the delivery of your products? How do I take payments? How can I keep track of sales? When should I use the e-shop? Selling goods and services via the internet is becoming more and more common place in today s business environment. In some cases companies simply advertise their services or goods via their website, to physically buy them you may have to visit the company premises or call them to provide you with a quote. An e-shop actually allows a customer transaction, from start to finish, via your website. From the customer browsing your products to you taking the payment and sending the customer their goods, our e-shop can be used if you are looking to do any of the following: Sell physical goods that can be posted to the customer Allow customers to pay for services (which are a set price) online. For example allowing them to pay for classes, conferences or seminars Getting started with our e-shop Before you can start adding products to your e-shop you need to know a little more about how it works. The tools you require to build and manage your e-shop can be found within the e-shop tab on the horizontal menu when you enter the editing area of your site (via the on your Site Manager Summary page) button Once you ve chosen the e-shop tab a new dialogue will open, this is where all e-shop tools can be found for future use. When this dialogue is opened for the first time a description of our e-shop will appear in the dialogue with an option to create online shop. If you are sure you want to continue click this option, otherwise close the window. SiteBuilder User Manual 47

49 E-shop tools The tabs at the top of the e-shop admin window provide access to all of the tools you ll need to manage your e- shop. Tips and Advice Some general e-shop help topics are covered. Click on the i to find out more about each topic. E-shop Zones You might have noticed e-shop zones whilst adding other zones to your pages. E-shop zones work in the same way as all of our other zones, when you add an e-shop zone to a page you will be prompted to choose which products you d like to display within that zone, we ll discuss this in the next section of this chapter. How do I add products to my pages? To add products to the e-shop zones on your page you first need to add them in the products tab of the e-shop dialogue. Once you ve clicked on the products tab, click the add product button. This will open the product details dialogue where you can enter all of the details required to display a product on your website. If you don t want to display pictures of your products you don t have to. Some of the styles (which you can choose when in an e-shop zone) are set up to display your product information without images. SiteBuilder User Manual 48

50 Product name The name you give your product will be displayed in bold above the description in your e-shop zones. Brief description Write a short description of the product to be displayed on your site alongside the price and name of the product. Product image If you d like to display between 1 and 3 images of your product add them here. You don t have to display any image if you don t want to it. More information page You can create a full page of additional product information for more complex products. Prices and variants Add the price of your product and stock levels if you are using stock control. If you have multiple variants the label field will become available. E-shop zones that the product should be displayed in When you have e-shop zones on your site they will be displayed as a list in here, tick the box next to the zone to add the product to that zone. A product can be added to multiple zones. SiteBuilder User Manual 49

51 Once you ve entered your information in the product details dialogue box, click OK and the product will be added to the products tab (as shown in the image below). Your products tab will basically become an inventory of all of the products you have stored within the e-shop on your site. Show products that are in. The drop down list will display all e- shop zones currently on your site, you can choose to view products within a specific zone, the list will reorder to list those products first. Display. Choose how many products you would like to view per page in your list. Ordering. Use the up and down arrows to order the products by that field. e.g. order products by your title field in A to Z or Z to A format. In Zone. Once you ve chosen the show products that are in option the in zone option will show the products within your chosen zone with a green tick. Add a product. Clicking this button will open the product upload dialogue box as shown on the previous page. Delete/Copy/Edit. Delete will remove the product from your list and therefore your site. Copy will create a replica entry of the product in the product list. Edit will take you to the product details window where you can edit any of the information stored about your product. Once you have a few products in your products tab you can start setting up e-shop zones on your site to display your products. Adding an e-shop zone to your site Adding an e-shop zone works in the same way as adding any other type of zone: Go to the page you d like your e-shop zone to be displayed on Choose the page editor function Choose to add new zones Click and drag an e-shop zone on to your page. For more information on adding zones to pages see chapter 4 page 17. SiteBuilder User Manual 50

52 Once you ve added an e-shop zone the dialogue shown below will open. Style. Click this tab will display various style options from zone colour choices to how you d like your products to be displayed in the zone. Edit product list. Clicking this button will take you to the list of products created in your e- shop admin area. Products already in this zone. Once you ve chosen products from your product list to be displayed in this zone they will appear as a list in this dialogue. Once you ve clicked edit product list you will be taken back to the products tab within the e- shop function. In Zone Scroll through your inventory of products and tick the in zone box next to any products that you d like to display in this zone. Once you ve added the products you d like to display in your zone click OK, you ll be taken back to the e-shop zone which will now have your chosen products within it. SiteBuilder User Manual 51

53 Products already in this zone. Your chosen products from your inventory are now displaying in your zone. Clicking and dragging on the crossed arrows will allow you to change the order of the products. Edit. Clicking edit will take you to the product details dialogue (as shown on page 48) to allow you to edit details stored about that product. Delete. This will remove the product from the zone but not from your products list in the e-shop administrator. E-shop Styles Similarly to other zones you can choose the style of your e-shop zone, styles will also give you a range of shop layout options. Content Style. Clicking on the buttons A-D will change the way in which your products are displayed in a zone. Colour Scheme. Buttons A E will display some standard colour schemes for you to choose from. Panel Style. Provides you with a choice of border styles for the zone. Options. Clicking the + next to options will open up some additional choices for you. Custom. Create a completely customised colour scheme for your zone. Change the colour and style of icons and buttons in your zone from this option as well. Once you ve added an e-shop zone it can be displayed on your page alongside other zone types. You can add as many e-shop zones to a page as you require. SiteBuilder User Manual 52

54 The E-shop Zones Tab As you start to build up the e-shop zones on your site you might find using the e-shop zones tab useful. This area will give you a list of all e-shop zones currently within your site. It will display the name of the page the zone can be found in and the name of the zone. Zone details. Clicking on the page/zone name will take you directly to that zone on your site. Add/Edit Products. Clicking this button will take you to the products tab where all products within your chosen zone will be shown with a tick next to them. From here you ll be able to edit individual products. Name your e-shop zone within the presentation style option under the panel heading. How Do I Keep Track of My Stock? If you are planning on purely selling online you can use the SiteBuilder Stock Level Manager. How it works The stock level manager requires you to enter the current level of stock you have for a product followed by your minimum stock level. The minimum stock level refers to the quantity of stock at which you d like to be reminded to order more stock. If you choose to use the stock level manager you ll be able to view your stock levels, and alter them as you replenish stock, via the Stock Level tab in the e-shop administrator. The stock level manager will display three states for a product depending on the levels of stock you have: The product is in stock and you have more stock than the minimum level You have stock but it has reached or is under the minimum level limit you set The product is out of stock Once a product is out of stock people viewing the product on your site and trying to buy will be informed that it is out of stock. SiteBuilder User Manual 53

55 To start using stock control click the Stock Level tab, this will display all products currently on your site. Enter your current and minimum stock level for each product in to the appropriate text box. If you don t enter a minimum stock level SiteBuilder will assume it is 0. When you replenish stock simply go to the Stock Level tab and type the new stock level in to the text box next to each product. Use Stock Control. You MUST tick the box next to the product if you d like stock control to be used for it. Out of Stock. Out of stock items will be displayed at the top of the stock list by default and shown in red. Below the minimum. Stock below the minimum level as set by you will be displayed after all out of stock items as a default and shown in orange. Title ordering. When adding new stock you might find it easier to use the up and down arrows in the title area to display products alphabetically. Stock. Enter the level of stock you currently have for the product. Min Stock Level. The number entered in here should represent the level of stock at which you d like to be reminded to order more. Normal Stock Level. All products falling outside of the minimum or out of stock range will be shown below the others as a default. Alternatively, if you are new to SiteBuilder and you haven t yet started adding products to your shop you can enter your stock levels in the product details dialogue as you start to add products to your shop. Remember to click OK once you ve done this or any changes you ve made to your stock level will be lost. SiteBuilder User Manual 54

56 Stock control in the product details dialogue To use stock control for a product tick the box and add your quantity and minimum level. How Do I Charge for Delivery of my Products? If you are selling a physical product on your site you might want to charge customers a delivery fee to cover the cost of postage. SiteBuilder allows you to set up delivery polices in the following ways: Free delivery on all orders Free delivery on order over a stated price (a charge will be issued to orders under this price) A set delivery charge for all order When you first go to the delivery tab in the e-shop administrator you ll see the default delivery policy is available for you to edit. The charges you set up in the default policy will automatically be added to the total cost of products purchased via your website when the customer gets to the checkout. Add Delivery You can have multiple delivery schemes, to add a new scheme simply click the add delivery scheme button. Default Delivery The default delivery scheme can be edit by clicking the edit button. SiteBuilder User Manual 55

57 Setting up Delivery Policies Once you click edit for the default policy or add delivery scheme a box, like the one below, will open complete the information in this box to set up your delivery charges as you wish. Free Delivery Choosing this option will prevent any delivery charge being automatically added to an order. Delivery charge This option will ensure that a set fee is automatically added to every order. Free on orders over This option will automatically discount your delivery charge if an order is over a certain value. Reset The reset button will set the information in the policy back to the default. VAT If you want to add VAT to your delivery charge you can do so here, if you don t want to charge VAT on delivery choose the 0 option from the drop down list. Label Enter information to describe your policy in here, this will be displayed alongside your policy at the checkout page. Having Multiple Delivery Policies The default delivery policy will always be automatically applied to customer orders, however, you can give your customers the opportunity to change to other delivery options such as fees for standard post, next day delivery and special delivery. The standard post fee might be your default policy, however, when your customer gets to the checkout they can choose to change this policy to a special or next day delivery, SiteBuilder will recalculate the total cost based on such changes. The image below shows how a checkout page might look with multiple delivery options to choose from. The default delivery policy (Free delivery in this case) will automatically be chosen for the customer, however, they can change their policy by clicking either of the small circles next to the other delivery options. SiteBuilder will recalculate the total based on the new delivery policy price. SiteBuilder User Manual 56

58 How Do I Take Payments? SiteBuilder allows you to take payment in three ways; by telephone, by post and via credit/debit card online. You set up any or all of these options on your site. Taking Payment by Telephone You can take payment via telephone if you are set up at your Remember to tick the enable box when setting up your payment options. premises to do so. Generally this means that you need to have a payment terminal and a merchant account number for your business. If you haven t already got these things speak to your bank about your business banking requirements and they should point you in the right direction for acquiring these things. If you are set up to accept payments over the phone and you d like your customers to be able to choose products to buy via your website and contact you about ordering them simply choose the telephone payment option within the payment tab in e-shop tools. Once you ve clicked on setup for the telephone payment option a further dialogue box will open. This will allow you to enter the information you d like to provide your customers with to allow them to pay online. The information you enter will be displayed on the checkout page. Provide customers with a number to call to make their order Mail Order Payment If you want to allow your customers to pay you via cheque you can set up Mail Order Payment for your site, this will allow them to pay by post. To accept mail order payment you need to provide customers with the address you d like payment to be sent to, you may also like to provide instructions for them to follow. For example, they ll need to print the checkout page as an order form to be sent alongside the cheque so that you know which items their paying for. The mail order option also has a reserve function. This would allow customers to reserve items prior to them sending you their cheque. You would be ed with details of the items they d like to reserve. This is an option function which you don t have to use. SiteBuilder User Manual 57

59 Taking Payment Online by Credit/Debit Card The easiest and most popular option for people using the eshop in SiteBuilder is online payment. This allows your customers to browse the shop, choose their products then pay for them immediately online. To take online payments you need to use a secure payment provider. Essentially this is a company that will handle the transaction for your products who are licensed and capable of taking secure payments over the internet. SiteBuilder currently lets you choose from three payment providers; WorldPay, PayPal and Protx. The set-up process for each of these providers differs. PayPal This is the cheapest provider so if you are a brand new business it might be the best option for you whilst you find your feet. PayPal will process payments for you and store the money you make in your own personal PayPal account. It s up to you to move this money out of the PayPal account and in to your own bank account. PayPal will take a small fee for every transaction, you can find out more about PayPal and these fees by going to their website If you would like to use PayPal on your site and you have already set up your PayPal account all you need to activate PayPal on your site is the address registered against your account. Set-up PayPal Enter the address attached to your current PayPal account then click activate to allow customers to pay via PayPal on your website. WorldPay A slightly more expensive option, WorldPay will take payment for you, store your money in your personal WorldPay account for up to 7 days before transferring it directly to your bank account. With WorldPay there are two different set-up options. If you have a merchant account you can choose to use them as the service provider only. Alternatively, if you want to use WorldPay but you don t have a merchant account they can provide you with one to allow you to use them. With either of these options there is a setup fee, a monthly usage fee and a percentage of all transactions will be taken. For more information on WorldPay please visit their website If you have set-up an account with WorldPay and you d like to activate this payment system on your site you will need your WorldPay Installation ID. SiteBuilder User Manual 58

60 Set-up Worldpay Once you have an account with Worlpday they will provide you with an Installation ID, enter the ID here and click Activate. Protx. Similar to WorldPay in that you require a merchant account number. However, Protx doesn t have a service to provide you with one (contact your bank about getting a merchant number for your business website). Once you have a merchant account number you can use Protx to accept payments, as a small business Protx will charge you 30 a month to use their services, there are no additional transaction fees. Funds taken via your site will be held in your Protx account for 2-4 days before being automatically transferred to your bank account. If you are interested in Protx, please visit their website for more details If you would like to use Protx on your website you will need to contact us directly as there is a charge for setting up Protx accounts, due to the manual testing we need to do. Order Messages If you choose to set up online payment on your site you should also setup personal order messages which will be displayed or sent to your customer at various stages in the buying process. Contact Details. If you want to display your contact details on the order messages SiteBuilder will do this automatically if you choose the option below circled in red and complete the text boxes which will open up when this option has been chosen. The restore option will change the message displayed back to the default SiteBuilder text. Secure Order Messages Once you ve set up an online payment option you can set up secure order messages to be displayed/sent at various times in the buying process. SiteBuilder User Manual 59

61 Order Acknowledgement. This is the message displayed to your customer once the payment for the order has been successful. There are two separate order acknowledgement messages. This message will be ed as a receipt of purchase to your customers. You can customise this message with your own text. SiteBuilder will automatically add the specifics of the order i.e. the items the ordered and the total cost. On Screen: Once the payment has been successful a message will appear on screen to inform them of this. This text can be customised, again SiteBuilder will populate it with the necessary order information. Despatch Note You can choose to send a despatch note to customers to inform them that you have sent their order. (do this from each individual sale in the sales ledger) Invoice If customers request an invoice, or you like to send one as a receipt of purchase to your customers you can do so for each individual sale via the sales ledger. You can customise the message around the central order specific information. Shopping Basket Options With the shopping basket tab in the e-shop tools you can make some more decisions on how you would like the shopping process to work on your site. Choose how you d like the shopping basket on your website to display the items within it. The Options Tab The options tab in the e-shop tools allows you to make some basic decisions about your shop. SiteBuilder User Manual 60

62 How do I keep track of sales? Once your site is live and people are able to buy your products you ll want to be able to keep track of sales. SiteBuilder has provided a Sales Ledger to allow you to do this. Note: The sales ledger is only for use if you have set up online payment When your site is live you can access your sales ledger in two ways; 1. Via the Site Manager Menu 2. From the e-shop tools in editing mode on your site Completed Sales If you choose to use it, once you ve processed a sale they can be manually moved over to the completed sales tab to help you keep track of sales. Pending Sales Any sales that come through your site will automatically be placed in the pending sales area, newest sales will be at the top of the list. Download Sales Ledger This allows you to download a range of dates in your sales ledger for accounting purposes. Show Details This will expand the sale to allow you to view the order in more detail (as shown in the image below) SiteBuilder User Manual 61

63 Expanding a sale with provide information on the items ordered, the personal details of the buyer and any other shipping addresses they might have chosen. The options of print invoice, receipt and despatch note can be customised to varying degrees via the secure messages area (within the delivery tab of e-shop administration). Download Sales Ledger To download sales simply complete the information in this window: Sales Ledger Choose if you d like to download information from your pending or completed sales. Date Range Enter the date range that you d like to download. CSV Downloading in this file format will let you convert the file to an excel spreadsheet. HTML This file format essentially lets you view your information as a web page. SiteBuilder User Manual 62

64 Chapter 7 Making your site meet the legal requirements Introduction All websites have a legal requirement to display some standard information to protect the site owner and any visitors to their website. SiteBuilder allows you access to the standard documents that should be displayed on your site. In this Chapter we ll answer the following questions: Why do I need these documents? How to find these documents in SiteBuilder? Terms and Conditions of Use Privacy Policy Terms and Conditions for an eshop Why Do I Need These Documents? Legally all websites have a requirements to provide the site user with some standard information about who they are and what they do. This policy is for the protection of you as a business and your site visitors as consumers. In displaying these legal documents you also reassure anyone viewing or buying from your website of your security and integrity. How Do I Find These Documents in SiteBuilder? From the Site Manager page click Pack option in the main menu., once in editing mode you ll see the Legal The dialogue that opens will look like the image below. Policy tabs Click through the tabs to view and edit the different policies. SiteBuilder User Manual 63

65 What is the Terms of Use policy? The terms of use are there to set out the key issues of who may use your website and how they should use it. When you click on the terms of use tab within your website you will find some more detailed information on the contents and use of this policy. The guidance tab in the legal pack will provide you with more detailed information on each policy as well as some hints and tips for enforcing legal requirements throughout your site. What is the Privacy policy? If you are intended on collecting any private information about visitors to your site you must display a Privacy Policy. A name, address, telephone number or any other such information would constitute personal information. If you are going to sell via your website you will be collecting information about site users therefore it is particularly important that you complete and display this policy. What is the Terms and Conditions policy? Terms and Conditions must be displayed if you are selling goods via your website. The terms and conditions set out are specific to e-commerce sites and they aim to provide the consumer with all of the information they may require when entering in to a contract of sale with you. The terms and conditions in SiteBuilder are for sales from business to consumer not business to business How to I change/update this information You ll notice, when you browse the legal documents that throughout them there are gaps where you are required to enter your personal information to make the policies specific to your business. For example, if the bracketed text within the gap says (company/business name) then delete the text and insert your company or business name as instructed. If your circumstances change in the future, for instance your physical address might change or you might become a limited company you need to remember to alter this information with the legal documents. To alter information simply choose the legal tab in the editing tools, choose the document you want to edit, make the change and click ok. Add link to site Tick this option to show the policy on your live site and allow public access to your information. Print Print a paper copy of your policy View policy Tick this option to show the policy on your live site and allow public access to your information. Restore default text This will remove any personal changes you have made to the policy. SiteBuilder User Manual 64

66 Chapter 8 Making your site live Introduction So, you think you re ready to publish your site and make it available to view on a global scale? To help you double check we ve provided you with checklist. Once you re definitely we ve also provided some information on setting up your account with us. In this Chapter we ll answer the following questions: Have I covered everything I need to? How do I know how my live site looks? How do I set up my payment account? Have I covered everything I need to? To help you make sure you ve covered all of the basics in creating your website we ve provided you with a handy checklist which you can print and tick off each area as you check it. SiteBuilder User Manual 65

67 Website Check List Site Design: Have you added a company logo and name to your site? Is the colour scheme consistent with your company brand? Have you displayed copyright information if necessary? Do you have prominent contact details on your site? Are the pages on your navigation bar laid out as methodically as possible? Page Editor: Do you have all of the information you want to display on your site? Do areas like enquiry forms and links zones have the correct information in them? Have you tested areas like link zones and enquiry forms to make sure the customer is directed to the correct place? Do all pages that are accessible by customers have content within them? Do all images have the appropriate alt text? Have you set up meta information for each page? Site Organiser: Are all pages which are accessible by the customer names correctly? E-shop: Are all products being displayed as you d like them to be throughout the site? Do all products have the appropriate pricing? Are appropriate delivery policies set up? Have you edited your basket page with any additional information you d like to provide the customer with? Have you set up all payment options you wish to offer? Have you tested your transaction process in preview mode? Legals: Are you displaying the correct legal documents? Have you added the correct information where requested to do so? SiteBuilder User Manual 66

68 How do I know how my live site looks? If you want to check exactly how your site will look to customers when its live you can use the preview function. Preview, will open a new window where you can view your site and all of the pages within it as if it were a live site. How do I set up my payment account? Now that you are ready to go live you need to set up an account with SiteBuilder. You have complete control over your SiteBuilder account, therefore updating information, cancelling your account and upgrading if necessary is your responsibility. You can set up your SiteBuilder account via the Signup and Pay option within Prices and Accounts on the Site Manager menu. With this function you can monitor the levels of usage on your account and upgrade if needs be. You can also choose your payment method: The system will alert you if you need to upgrade your account should you exceed the standard space and transfer limits. SiteBuilder User Manual 67

69 Once you ve completed this information in Your Account you will be taken through to WorldPay to make a secure payment for the cost of your site. If you have chosen to make a payment for 3, 6 or 12 months WorldPay will simply take payment and provide you with a receipt. If you ve chosen to pay regular monthly you are essentially creating a standard order for the monthly payment of your site. With the WorldPay Payment system this is called a FuturPay agreement. You can cancel your FuturePay agreement at any time and if you choose to shut down your SiteBuilder site it will automatically be cancelled. SiteBuilder will register the change and you will be able to publish your site, via the Site Manager which is explained further in the next chapter. SiteBuilder User Manual 68

70 Chapter 9 Managing your new website Introduction Now that your site is set up, you ll want to keep updating it, making sure your information is up to date and check on any sales you might have had. You ll use the Site Manager for this. This chapter outlines the functions you ll find in the Site Manager and how to use them. In this Chapter we ll answer the following questions: Where is the Site Manager? What can I do with the Site Manager? What are the options within the Site Manager menu? What happens if I need assistance further down the line? What if I need advice on other aspects of my online business? Where is the SiteManager? When you log in to your site, you will arrive at the Site Manager on the default Summary page as shown in the image below. Access the various states of your site from here. Important system information will be shown here when you login to your site What can I do with the SiteManager? The Site Manager can be seen as the gateway to the other areas within your site. The central content area with the Site Manager Summary Page (as shown above) is where you ll be given any important information by SiteBuilder, you can also access the various states of your website from this central content area. There are numerous options relating to publishing and viewing the different versions of your site: Suspend The suspend option will review your site from public viewing over the internet. You won t lose content or anything put the general public won t be able to view it. SiteBuilder User Manual 69

71 View This option will open the current live version of your site in a new window for you to view it. Edit As with the current version of SiteBuilder, this option will take you to the site editing tools. Preview Similarly to the view option, preview will open your site in a new window. However, preview will show you the latest version of your site with any changes you might have made via the editing tools. The preview function is basically there to let you check your changes before you publish the site and make those changes live to others viewing your site. Revert This is a way of deleting any changes you ve made to your site since last publishing it. Choosing revert will make the unpublished version of your site match the current live version. Publish Clicking this option will update the live version to include any changes you may have made within the editing option. What are the other options within the menu in SiteManager? Summary As shown on the previous page this is the default page you will be taken to on logging in to your site. Prices and Accounts Mange your payment options from here as described in chapter 8. Administering your Site From these options there is a shortcut access to the sales ledger should you have an e- shop. Statistics are available once your site has been published and the domain manager (explained in the next section of this chapter Help and Inspiration An area of the Site Manager dedicated to helpful advice. Contact Us The various ways of contacting the support team are listed in here. My Details Allows you to update your personal information as provided by you when you signed up for SiteBuilder. My websites Should you have more than one site you can access your other sites from this area or set up a new site. Logout Logs you out of the system. Website Statistics Once you ve published your website you will have access to SiteBuilders standard website statistics. Your statistics will open in a new window and you may need to disable your pop-up blocker before the window will open. Statistics are displayed on a monthly basis and can historical information can be viewed. Statistics that can be As well as our own statistics package you can also set up Google Analytics for your website. See chapter 4 page 42 viewed include; unique site visitors, total number of site visitors, pages viewed and average visit duration on the site. In addition you will be able to see what search terms people are using to view your site and whether or not they are coming to you directly or from a search engine like Google. SiteBuilder User Manual 70

72 Managing Domain Names If you have an existing website and you d like to transfer it to your SiteBuilder site or you d like to buy a commercial domain name for your site you can do this via the domain manager. Your domains. All domain names currently linked to your SiteBuilder site are shown here. New domains. If you d like to register a new domain name you can purchase one directly from SiteBuilder. Creating another website with SiteBuilder If, you d like to create another website with SiteBuilder you can. Choose the my websites option at the bottom of the Site Manager menu, you ll be taken to a new page and at the top of the page you ll find a create new site button. Click this button to open up the Site Creator Wizard and start building a new site. When you have multiple sites they will all be listed in the my websites area and you can switch between sites from here to manage them. Transfer a domain. If you already own a domain name and you d like to transfer it to be hosted alongside your SiteBuilder site simply click transfer and follow the steps. SiteBuilder User Manual 71

73 Appendix A The Colour Picker The colour picker is a useful tool which can be used throughout your website, the annotated diagram below shows all of the functions within the colour picker. Standard Colours The colour hexagon in this area allows you to choose from a set of standard colours. Click one of the small coloured hexagons to select that colour. Advanced Colour Picker Provides you with a more in depth range of colours to choose from. Hex Code/RGB Code If you have a specific colour that you d like to use and you know the HEX or RGB code you can type it in to the box and the colour picker will find it for you, where you can then add it to your favourites palette for future use on your site. Greyscale Colours Clicking any of the hexagons in the greyscale will choose that colour for you. Greyscale Colours Moving up and down this scale will provide you with lighter or darker shades of the colour you ve picked out. It will also lighter or darker the colour wheel Existing Site Colours This shows the colours that are currently in use on your site. Hovering over the colours will provide a list of places that the colour is in use on your site. Colour Suggestor The colour suggestor can be used to help you design a colour scheme. (explained in more detail below) My Favourites You can create your own palette of favourite colours within this area. Simply drag colours from the selected colour box in to this area and they ll be saved for use later. Selected Colour The colour that you ve currently selected is shown in the middle of this area. The colour that you are hovering over with your cursor is shown above and below the selected colour, left clicking your mouse will select this colour. The Colour Suggestor Our colour suggestor has been designed to help you make choices about colours that go well together. We ve taken the five main methods of colour scheme creation for websites and our clever colour picker has been programmed to work out the rest for you based on one colour you select. The 5 key colour scheme styles: SiteBuilder User Manual 72

74 Monochromatic Colours: This colour scheme consists of various tints and shades of the same base colour. These colour schemes are particularly effective in corporate sites as they can come across as very authoritative and soothing for the website user. The image below shows how the Colour Picker displays a monochromatic colour scheme for this blue/grey selected colour. The colours for a monochromatic colour scheme (A) are displayed as 4 possible colours for the current selected colour. You can choose any/all of these 4 colours and drag them in to the favourites palette for later use. Complementary Colours (colour scheme B) These are colours which are opposite one another on a colour wheel. When mixed together these colours should create a well balanced colour scheme. The Colour Suggestor will show you shades of your chosen colour alongside shades of the adjacent colour on the colour wheel as shown below. Adjacent Colours (colour scheme C): Uses colours which are adjacent to one another on the colour wheel, generally one colour should be used as the primary colour in the colour scheme and the other secondary. Split Complimentary Colours (colour scheme D): This uses your chosen colour and finds the colours on either side of the complimentary colour. This provides a highly contrasting colour scheme. Triadic Colours (colour scheme E): These are colours which are equally spaced around the colour wheel, the resulting colour scheme is very bold. SiteBuilder User Manual 73

75 Appendix B Image Editor The SiteBuilder image editor allows you to upload your images easily and manipulate the image in many ways. Before you get to the editing tools you need to upload your image. SiteBuilder will prompt you to do this using the dialogue box below: Upload your image. Simply click the browse button and find your image on your computer. Once you ve uploaded your image it will appear in the content area of the Image Editor (where the image of the man and woman is in the graphic below). The functions of the image editor are explained alongside the image below. The functions of each of the tabs across the top of the editor are explained in more detail on the next page. Preview. Shows you how your image looks after you ve applied any editing tools. Label. Give your image a name, this will appear in the menu as a way of distinguishing between multiple images. Alt Text. Set the text that will appear when a cursor lands on your image. Display size. To change the size of your image you can type your desired dimensions in to the text boxes. Alternatively, click and drag the bottom right corner of your image for the same function. Change Image. Opens the image upload function to allow you to change the image you are editing.. Undo. This function will remove previous alterations one by one each time it is clicked. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Save changes. Saves the changes you ve made to your image and adds the final version to your site. Cancel. Clicking cancel will close the image editor window, you will lose any work you have done since opening the window. SiteBuilder User Manual 74

76 Picture Details The picture details view is very similar to the one above (preview mode) the main difference is the source image information it provides you with and the quick rotate options. Source Image size. If SiteBuilder alters the size of your image and you d like to get it back to its original size you can make the resize option the same as the source image size. Rotate options. If when you upload your image it appears at the wrong angle i.e. upside down for instance you can turn it around by 90 or 180 degrees with these buttons. Crop If you upload an image but you d like to show a small area of it, or you d like to crop the space around it you can use the crop tool to do this. Crop Lines. You can crop your image by clicking and dragging the black crop lines around the image inwards. Once you ve cropped it you can drag the cropped space around the entire size of the image. SiteBuilder User Manual 75

77 Effects SiteBuilder provides you with a range of fun effects that you can add to your image. To view the range of effects on offer click the effects tab within the image editor first. The choose the Add Effect button the most prominent screen shown below will then appear providing you with visual examples of how each effect might alter your image. To choose the effect you want to use simply click the visual, the dialogue box will then close and your image within the image editor will be using your chosen effect. Rotate You can use this option to alter the angle that you image appears at. Choose the rotate tab first. They you can click and drag the sliding scale to alter the angle or if you know the amount of rotation you d like to add to your image you can simply enter the number in to the text box. SiteBuilder User Manual 76

78 Link The final option within the image editor is the link option. This allows you to add a range of link options to your image, therefore, if a customer clicks on it they can be taken to another site, another page within your site, an address etc. To use the link option click the link tab at the top of the editor first. Then click the add link button to create a link for your image. This will open up the first choose a link dialogue box, click the choose button next to the description of the type of link you d like to create. This will open the final choose a link dialogue (the box at the forefront of the image below) enter the details of your link in this box and click OK to create your link. SiteBuilder User Manual 77

79 Appendix C Title Editor Titles in SiteBuilder are essentially words that you can type in to the Title Editor, add effects and alter them then save them as a graphic for use on your site. The main area (Preview) of the title editor looks like the image below. Type your chosen title in to the text box at the top of the dialogue. Change your font by clicking in the white area (where it says Arial in the image below) this will open a list of all of the fonts you can choose from. Change the size of your title by entering the size in to the text box next to your font choice or alternatively you can click and drag the bottom right corner of the image. You can add standard word style options (Bold, Italic and Underline) to your title by clicking your desired option. Change the colour of the title by clicking once on the Text Colour box (blue box circled in red below) this will open the Colour Picker where you can choose your desired colour. SiteBuilder User Manual 78

80 Style The Style option within the title editor lets you add a special effect to your title. To use the style option firstly choose it from the tab options. Then, to add or change a style click the Change Style button. This will open up the dialogue box at the forefront of the image below. Choose any of the Styles by clicking your cursor over your chosen style once. Rotate You can use this option to alter the angle that your title appears at. Choose the rotate tab first. They you can click and drag the sliding scale to alter the angle or if you know the amount of rotation you d like to add to your title you can simply enter the number in to the text box. SiteBuilder User Manual 79

81 Link The final option within the title editor is the link option. This allows you to add a range of link options to your title, therefore, if a customer clicks on it they can be taken to another site, another page within your site, an address etc. To use the link option click the link tab at the top of the editor first. Then click the add link button to create a link for your title. This will open up the first choose a link dialogue box, click the choose button next to the description of the type of link you d like to create. This will open the final choose a link dialogue (the box at the forefront of the image below) enter the details of your link in this box and click OK to create your link. SiteBuilder User Manual 80

82 Appendix D Panel Editor Panels allow you to add blocks of colour within the Site Designer areas of your site. You can use panels to frame images and add colour to your design. The functions within the preview area of the panel editor are explained below. The additional extras within the editor are explained further on the next page. Label. Give your panel a label, this will appear in the menu as a way of recognising the different components in your header bar. Alt Text. Set the text that will appear when a cursor lands on your panel. If your panel is the background to an image or title you should set the Alt text to be the same. Preview. Shows you how your panel looks after you ve applied any of the extras. Display Size. To change the size of your panel you can type your desired dimensions in to the text boxes. Alternatively, click and drag on the bottom right corner of the panel. Your panel can be square or rectangular. Panel Colour. Clicking on this option will open the colour picker where you can customise the colour of your panel. Undo. This function will remove previous alterations one by one each time it is clicked. Save and Preview This option automatically saves any changes you ve made within the editor and takes you to a preview of how your live site will look. Add to Site. Saves the changes you ve made to your panel and adds the final version to your site. Cancel. Clicking cancel will close the panel editor window, you will lose any work you have done since opening the window. SiteBuilder User Manual 81

83 Panel Editor Extras: The extras options allow you to manipulate the look and feel of your panel. Each extra is explained in more detail. Borders SiteBuilder provides you with a range borders that you can add to your panel. To view the range on offer click the borders tab within the panel editor first. Then choose the Add Border button the most prominent screen shown below will then appear providing you with visual examples of how each border might alter your panel. To choose the border you want to use simply click the visual, the dialogue box will then close and your panel within the panel editor will be using your chosen border. Rotate You can use this option to alter the angle that your panel appears at. Choose the rotate tab first. They you can click and drag the sliding scale to alter the angle or if you know the amount of rotation you d like to add to your panel you can simply enter the number in to the text box. SiteBuilder User Manual 82

84 Enter the degree of rotation. You can enter the degree of rotation in the text box. Sliding scale. Click and drag the arrow on the sliding scale to rotate the panel. Link The final option within the panel editor is the link option. This allows you to add a range of link options to your panel, therefore, if a customer clicks on it they can be taken to another site, another page within your site, an address etc. To use the link option click the link tab at the top of the editor first. Then click the add link button to create a link for your panel. This will open up the first choose a link dialogue box, click the choose button next to the description of the type of link you d like to create. This will open the final choose a link dialogue (the box at the forefront of the image below) enter the details of your link in this box and click OK to create your link. SiteBuilder User Manual 83

85 Appendix E - Presentation Style The presentation style function is a way of customising some of your zone types even further. Within a zone editor, if you see a presentation style tab you ll be able to customise the look and feel of your zone. To get started click the presentation styles tab at the top of the editor you re in, remember not all of the zone types have this function. Within all zone presentation style options there are three key areas; panel styles, content styles and colour schemes. Each area is explained in more detail on the pages that follow. SiteBuilder User Manual 84

86 The Panel Style Options The panel style refers to the overall style of the content zone. For example whether you want rounded corners for your zone, a different coloured header bar and so on. Possible Styles Clicking on the alphabetical buttons, will display the different panel styles you can use for a specific zone type. Zone Title Giving your zone a name can assist you in recognising it within your page editor menu. If you choose to display your zone title it will be displayed at the top of your zone. Options Clicking this button will expand or hide the options for your panel style. Icon Position Choose where you would like the zone logo to be displayed (or if you want to display it at all). Border Style If you ve chosen a panel style with a border you can set the thickness from this drop down menu. Display Zone Title Ticking this option will allow your title to be displayed at the top of your zone on your live site. Base Text Size Sets the size of text within the zone. Preview Area As you make changes to the zone style you ll be able to preview how they look as this area automatically updates. SiteBuilder User Manual 85

87 The Content Style Options This refers to the look and feel of the content within the zone, different content styles might show different clickable buttons, font styles, dividers of content etc. Some content styles will have additional options to allow further customisation. In this example you can define how you would like to display the dividing line between links. Possible Styles Clicking on the alphabetical buttons, will display the different panel styles you can use for a specific zone types. Options Clicking this button will expand or hide the options for your panel style. Divider Style Use the drop down options to decide how you d like the dividing line between your links to look. The Colour Scheme Options Pretty self explanatory, this option allows you to choose between different colour schemes for your zone. Generally, options A to C within the colour schemes will be dynamic colour schemes derived from the colours you are currently using on your site. The other options (D to G) are fixed colour schemes, created by our designers, which should work well with a wide range of colours. Custom Colour Scheme Should you wish to, you can completely customise the colours within your zone. Clicking the custom option will open a further window, like the one shown below. Clicking any one of the coloured squares will open up our colour picker to allow you to choose the exact colour you d like to use. SiteBuilder User Manual 86

88 Button Options Where a zone has additional buttons and logo s you can change the style of them by single clicking on this area, this will open the graphic picker which is explained below. Setting Colours A single click on any of the coloured squares will open up the colour picker and allow you to choose your desired colour for that element of the zone. Preview This area will show you how your zone will look based on the changes you make. Buttons and Graphics When you are stylising a zone that requires buttons and graphics you can choose from a wide range of buttons by clicking on the current button graphic (as shown above). This will open an additional window, such as the one below: Selecting Buttons Single clicking on the button you d like to use will select and change it for you. SiteBuilder User Manual 87

89 Contact Us at SiteBuilder If there is something you can t find in the manual or you have feedback on our product you can get in touch via the following methods: [email protected] Telephone: SiteBuilder User Manual 88