Using Website Inventor

Website inventor creates websites without relying on a scripting language making any hosting package compatible. Using the built in FTP functionality makes updating a website easy. You won’t require any HTML experience and will find it easy and quick to produce professional websites in no time at all.

Resources

CryoSoft Hosting: Professional hosting with discount for purchasing Website Inventor.
Dreamstime.com: Quality stock photo website which offers better quality photos than iStockphotos.com for the same cost.
iStockPhotos.com: Quality stock photo website but prices are high for hi-res photos.
Adobe Kuler: Stuck for colour combinations, try this.

Getting Started

Go to the ‘Project’ menu and select ‘New Project’. This will select the new project as the current project being edited. Projects are stored by the application, so saving a project is not necessary. To switch between projects use the ‘Select Project’ menu to select projects.

Starting From a Template

Go to the ‘Project’ menu and select a template from the ‘New Project From Template’ menu. Templates are provided to give you a starting point, images and text will need to be replaced. New websites may be added with updates.

Choosing Colours

Colours are entered using hex. By clicking the colour block next to the input box a colour selector can be used to choose colours. You can click on the colour chart to change the colour, then do fine adjustments with the colour values produced.

Modules

Modules are the building blocks for the website. They can add functionality as well as design. To add a module to the website just drag & drop it on to the layout, page or product. Click on the module that you have added to the website to bring its properties up in the right tool bar. Properties of modules are categorised, expand the sections by clicking on the titles.

Modules can be copied and pasted by right clicking on a module and then right clicking on the module or area you wish the module to be pasted. If you paste by right clicking on a module, the new module appears below this module.

Website Settings

Here you will enter details about the website you are creating.

General

Project Title: This is the title of the project.
Website Author: This is placed in the html header.
Website Copyright: This is placed in the html header.
Website URL: This is the location of the website i.e. http://www.yourdomain.com. This is used by PayPal and a number of modules to return users back to the website.
Google Analytics ID: You can sign up for Google Analytics and paste your ID in here to track the use of the website.
Google Maps ID: You can sign up for Google Maps and paste your map ID in here to allow you to use the Google Maps module.
Language: This is placed in the html header. This is used by search engines to localise your website.
Preview in Browser: Tick this if you want to see previews in your default web browser. We recommend previewing in a browser because the built in browser can differ from web browsers. Clickable images won’t enlarge when previewed.
Local Export Path: This is the export location for local exports. You can use this to locally preview the entire website fully functional.

FTP Server Settings

Host: This is the domain or IP address of your website i.e. yourdomain.com.
Port: This is the port used to connect to the ftp server. This is usually 21.
Username: This is the username used to connect to the FTP server.
Password: This is the password used to connect to the FTP server.
Remote Path: This is the location on the ftp server to place the website files i.e. /httpdocs/

Website Settings

Width: This is the width of the pages on the website, shadowing will add extra overall width to the website.
Alignment: This is the left, right or center positioning of the website.
Has Left Column: Tick this if you need a left column on the website.
Has Right Column: Tick this if you need a right column on the website.
Attach Page To Top: This makes the page sit against the top of the web page when rounded corners or page shadow is turned on.

Page Design

Page Top Padding: Select the padding in pixels at the top of the browser window.
Page Has Rounded Corners: Tick this if you want the page to have rounded corners.
Page Corner Radius: This is the radius of the corners of the page if rounded corners is turned on.
Page Has Shadow: This gives the page a shadow.
Page Shadow Blur: This is the number of pixels to blur the page shadow if it is turned on.
Page Colour: This is the colour of the page.
Background Colour: The colour of the background. If gradient background is turned on this is the top colour.
Has Background Gradient: This creates a gradient in the background.
Background Colour 2: This is the bottom colour when gradient background is turned on.
Background Gradient Height: This is the height of the colour fade in pixels from background colour to background colour 2.

Buttons

Button Colour: This is the colour of all buttons within the website.
Button Text Colour: This is the colour of text on all buttons within the website.
Button Text Size: This is the font size in either a percentage or pixels for all buttons within the website.

Content

Text Font: This the font for content text.
Text Colour: This is the font colour for content text.
Text Size: This is the font size for content text.

Content Titles

Title Font: This is the font for titles.
Title Colour: This is the font colour for titles.
Title Size: This is the font size for titles.

Content Subtitles

Subtitle Font: This is the font for subtitles.
Subtitle Colour: This is the font colour for subtitles.
Subtitle Size: This is the font size for subtitles.

Content Links

Link Font: This is the font for links.
Link Colour: This is the font colour for links.
Link Size: This is the font size for links.
Link Underlined: Tick this to underline links.
Link Hover Colour: This is the font colour for links when the mouse is over them.
Link Hover Underlined: Tick this to underline links when the mouse is over them.
Link Active Colour: This is the font colour for links when the page is displayed.
Link Active Underlined: Tick this to underline links when the page is displayed.
Link Visited Colour: This is the font colour of links that have been visited.
Link Visited Underlined: Tick this to underline links that have been visited.

Product Settings

Here you will enter details relating to products, categories and the cart.

Layout Settings

Category Listing Layout: The layout style of product and category listings.
Category Listing Columns: The number of columns when displaying products and categories.

Category Listing Appearance

Category Listing Back Colour: This is the back colour of category listing items.
Category Listing Border Width: This is the border width of category listing items.
Category Listing Padding: This is the padding in pixels within category listing items.
Category Listing Text Font: This is the font for text within category listing items.
Category Listing Text Colour: This is the font colour for text within category listing items.
Category Listing Title Colour: This is the font colour for the title within category listing items.

Category Listing Images

Show Category Listing Images: Tick this to show thumb images within category listing items.
Category Listing Image Border Width: This is the thickness of the border around the image within category listing items.
Category Listing Image Border Colour: This is the colour of the border around the image within category listing items.

Product Listing Appearance

Product Listing Back Colour: This is the back colour of product listing items.
Product Listing Border Width: This is the border width of product listing items.
Product Listing Padding: This is the padding in pixels within product listing items.
Product Listing Text Font: This is the font for text within product listing items.
Product Listing Text Colour: This is the font colour for text within product listing items.
Product Listing Title Colour: This is the font colour for the title within product listing items.

Product Listing Images

Show Product Listing Images: Tick this to show thumb images within product listing items.
Product Listing Image Border Width: This is the thickness of the border around the image within product listing items.
Product Listing Image Border Colour: This is the colour of the border around the image within product listing items.

Pricing Settings

Price Text: This is the text that appears before prices.
Price Colour: This is the font colour of prices.
TBA Text: This is the text displayed when a
Currency Symbol: This is the symbol preceding prices.

Cart Settings

Cart Enabled: Tick this to enable the cart.
Currency: This is the currency that PayPal is taking the payments in.
PayPal Account ID: This is the PayPal account ID (Normally an email address).
Success Page: This is the page that PayPal returns the user to after a successful payment.
Failed Page: This is the page that PayPal returns the user to after a failed payment.

Delivery Settings

The user has the option to select a delivery option from a drop down box on the checkout before proceeding to PayPal. The top delivery item is selected by default.
Click ‘Add New Delivery Price’ button to add a new delivery price. Select a delivery price by clicking on it and then click ‘Delete Delivery Price’ button to delete a delivery price.

Layout Design

The layout Design is where you place modules into the header, footer and columns of the website.  To place a module, click on a module and drag it into the required area. To modify the settings of the module, click on the module within the area. The properties toolbar will expand to display categorised settings for the module. If you have added a content page then you will be able to click the preview button. Modules can be reordered or deleted by clicking on the relevant button within the module.

Content

Here you add menus and pages to the website, and place modules on to pages.
The top half of the left tool bar displays the menus and pages. By selecting items in the list you can modify the menus and pages within the website. If the items that are selected have properties, they are displayed in the right tool bar.

To add a menu: Right click ‘menus’, and then select ‘Add New Menu’ from the popup menu.
To add a page: Right click on the menu and then select ‘Add New Page’ from the popup menu.
To add a subpage: Right click on the page and then select ‘Add New Subpage’ from the popup menu.
To set a page as the index page: Right click on the page and then select ‘Set As Index’ from the popup menu.
To delete a page: Right click on the page and then select ‘Delete Page’ from the popup menu.
To delete a menu: Right click on the menu and then select ‘Delete Menu’ from the popup menu.
To move a page up: Right click on the page and then select ‘Move Up’ from the popup menu.
To move a page down: Right click on the page and then select ‘Move Down’ from the popup menu.

Products

Here you add categories and products to the website, and place modules on to product pages.
The top half of the left tool bar displays the products and categories. By selecting items in the list you can modify products and categories within the website. If the items that are selected have properties, they are displayed in the right tool bar.

To add a category: Select ‘categories’, and then right click. Click ‘Add New Category’ from the popup menu.
To add category: Click on categories and select ‘Add New Category’ from the popup menu.
To add a subcategory: Click on a category and select ‘Add New Subcategory’ from the popup menu.
To add a product: Click on a category and then select ‘Add New Product’ from the popup menu.
To move a category up: Click on a category and then select ‘Move Category Up’ from the popup menu.
To move a category down: Click on a category and then select ‘Move Category Down’ from the popup menu.
To delete a category: Click on a category and then select ‘Delete Category’ from the popup menu.
To delete a product: Click on a product and then select ‘Delete Product’ from the popup menu.
To move a product up: Click on a product and then select ‘Move Product Up’ from the popup menu.
To move a product down: Click on a product and then select ‘Move Product Down’ from the popup menu.