Revision as of 14:08, 29 March 2012

Overview

EasySiteWizard Pro will allow you to create a completely customized website in a few simple steps. There are several creative and modern designs available for you choose from. Each design can be personalized by uploading your own images or by selecting from the vast free image library. EasySiteWizard Pro allows you to drag and drop your way to a professional online presence, without any knowledge of HTML.

EasySiteWizard Pro is compatible with the following web browsers:

• Internet Explorer 7
• Firefox
• Internet Explorer 6

The EasySiteWizard Pro website management and design process is broken down into the following steps:

• Sites
• Designs
• Editor
• Preview
• Publish
• Tutorial
• Help

Sites

The Sites interface is the first step which appears when you start your EasySiteWizard Pro session. This interface displays thumbnails of all websites you have created so far.

• To create a new website, click “create new site” and supply information in the “details” dialog box that appears.

1. At a minimum, you must specify a URL to publish your site to. The default is the main directory of your domain, e.g. http://www.mydomain.com/.
2. If you like, you can specify a subdirectory that the web page will be published to, e.g. http://www.mydomain.com/anotherdirectory/.
3. If you do not like the default template which is used when you create a new site, you will have an opportunity to change this in the Designs step.
4. When you are finished entering details for your new website, click apply changes. To continue to the next step in the design process, click next.

• To edit an existing website, click on its thumbnail. The details you entered previously for the site will be displayed. You can modify this information or proceed to any other step in the design process by clicking on the icons at the top-right of the screen.

Designs

In this step, you can select a layout template for your site. To select a template:

• Scroll through the list of thumbnails to the left.
• When you find a template that is to your liking, click on it. Your selected template will open in a new window together with the color scheme which you can use to modify the color of your template.
• When ready click on Apply and a checkmark will be overlaid on top, indicating that the template has been selected.

Note: In order to change the background color of a template you must select the Blank template category from the list of categories and proceed to the editor section.

• Click Next to proceed to the Editor, where you can begin to customize the design and content of the template, or:

1. Click Back to return to the Sites step.
2. Click on any of the other steps listed at the top of the screen to skip directly to that step.

Editor

The editor allows you to edit every element in your template. By default, filler text, also known as Greeking, has been supplied in order for you to get a feel for what the template might look like with content added. You can modify or delete any of the existing graphics or text as you wish.

The following options are available in the editor:

• Save: saves any changes you have made to the current page.

You will be prompted with a drop down menu with four options: save page, restore from autosave, restore from backup and save a master.

When switching from one page to the next, EasySiteWizard Pro 7 will automatically save work done. The user is being able to go back and forth in time for saved sites.

• Add page: opens the page manager interface, allowing you to add, remove or rename pages on your website.

• Add textblock: creates a new box on the screen, which you can use to enter text. This box can be moved or resized.

• Add table: creates a table on the screen. Table can be moved and you can add or remove columns and rows as well as you can resize your table
• Add image: opens the image library interface, allowing you to upload a picture from your computer, or select one from our free image library.

• Undo: undoes your last action.
• Redo: redoes your last action (re-applies your last undo)
• Bold, Italics, Underline, font properties: these controls allow you to format text in your textblocks.
• Hyperlink: make highlighted text link to a URL.
• Bulleted list: create a bulleted list in a textblock.
• Create heading: designates text selected in a textblock as a heading; Adds stylistic markers (determined by the template you selected) indicating that the text is a heading.
• Spellcheck: checks the spelling in any textblock currently open for editing.
• Create web form: opens the web form creation interface.
• Add a widget: You can add widgets to your page (Google map, BT Tradespace)
• Edit the source code: Let's you edit either the HTML code, CSS code or edit the Metadata. The chosen code will open in a new window where you can make all the changes you want. This section is recommended for more advanced users who prefer to make changes to their sites by editing the source code.

Menu Editor

The menu editor allows you to modify your website's navigation bar (usually found at the left-hand side of your template). You can use the menu editor to add, remove or rename menu and submenu buttons. It is also possible to move the navigation bar to a different location on the template.

To move your navigation bar, click and drag the menu editor bar at the top of the navigation menu.

Vertical/Horizontal menu orientation

1. In order to change the menu orientation (vertical/horizontal), in the editor section select Edit site menu.
2. A new window will open where the user can choose to display the menu vertical or horizontal by selecting the appropriate radio button.
3. To maually adjust the width of the Menu enter a value in pixels or use auto option to apply automatic value.
4. You may choose to manually adjust the width of a single Menu item by entering a value in pixels. Choosing auto option will apply automatic value to each button, depending on the length of the button name.
5. When done click Apply for the changes to take effect.

Using the Menu Editor

To edit the buttons on your navigation bar, click once on menu editor.
To create a new button, click on Create New Button, then type in the name and tooltip (optional). Using the link to options provided, navigation buttons can be linked to:

• Other pages on your website

• An external URL
• To delete a button, first click on it to see its detail panel . When the detail panel opens click on Delete this button.
• To modify a button, click it to see its detail panel. From there you can easily rename the button, add a tooltip, or change where the button links to.
• To rearrange buttons, simply drag them to their desired location.

Page Manager

When you click on the add page tool, or click on the manage pages tab in the menu editor interface, the Page Manager interface is displayed. The page manager allows you to add, delete, copy, rename or edit pages in your website.

1. Fill in the name of the page. If you wish to use this page as a master page click the check box next to Use master page.
2. Enter a page title.
3. Enter a summary of your new page.
4. Enter several keywords that you would like your page to found by.
5. Click Finish to create the new page.

Renaming a Page

1. Select from Existing Pages the name of the page you wish to rename.
2. ClickEdit Page Properties.
3. Click Rename page.
4. Click Done to close the Page Manager.

Copying a Page

1. Select from Existing Pages the name of the page you wish to duplicate.
2. Click Edit Page Properties.
3. Click Duplicate page.
4. Click done to close the Page Manager.

Editing a Page

1. Select from Existing Pages the name of the page you wish to edit
2. Click Edit Page Properties.

Deleting a page

1. Select from Existing Pages the name of the page you wish to delete.
2. Click Delete Page. The page will be deleted. Note: this action is undoable.

Edit textblocks

The following section deals more closely with the various functions and editor tools in the editor toolbar that allow you to create a text block and modify its content.

Adding a textblock

Click the “add textblock” tool to create a new, empty textblock. The textblock will appear automatically in the middle of the page, with the default text “double-click to add text, or drag to move”.

Moving a Textblock

To move a textblock to a new location, move the mouse pointer over the text block. Press and hold down on the mouse button, and drag the box to the desired location.

Resizing a Textblock

To change the size of a textblock:

• Double-click on the textblock, to put it in edit mode.
• Click and drag on one of the eight “handles” (white squares) along the edge of the textblock.

Copying a Textblock

To create an exact duplicate of a textblock:

• Double-click on the textblock, to put it in edit mode.
• Click on the “duplicate” icon which appears at the bottom of the textblock.

Editing text in a Textblock

To edit text in a textblock:

• Double-click on the textblock to put it in edit mode.
• Click once on the textblock to get an insertion bar. You can begin typing text.
• You can highlight, cut, copy and paste text into textblocks the same way you would in a word processor, such as Microsoft Word.
• You can copy text between textblocks, or between a textblock and another application, such as Notepad or Microsoft Word.
• You cannot paste images into a textblock.
• You can change the font, font size, font color, and other formatting properties using the following buttons in the Editor toolbar:

Font properties

Bold

Underline

Italics

Bulleted list

Spellchecking a Textblock

• To create text which links to a URL:
• Double-click on the textblock to put it in edit mode.
• Click on the “spellcheck” tool in the Editor toolbar.
•  Words which appear to be spelled incorrectly are outlined in red.
• Clicking on one of these words will open a menu listing possible corrections for the word. If you click on one of the options in the list, the word will be corrected automatically.

Deleting a textblock

To delete a textblock:

• Double-click on the textblock to put it in edit mode.
• Click on the “delete” icon which appears at the bottom of the textblock.

Layer control

Use of layers are a common method for determining which objects would cover (obscure) another object if they overlap (or one is directly on top of the other). Objects such as text fields and images which are on a "higher" layer will cover objects which are on a "lower" layer. Although this is supported in some drawing applications, in EasySiteWizard, no two objects can be at the same layer level.

Layer control will be managed in EasySiteWizard by right-clicking on an object that the user would like to move to another layer.

Right-clicking an editable object (text area or image) should bring up the following menu options:

Bring to front: This will put the selected object "on top of" all other objects. All other images and text fields, if moved so they overlap the object which has been "sent to front" will not obscure this field.

If a second object is selected and "bring to front" is used, then this second object would be considered "on top of" the first one.

Send to back: This will put the selected object "behind" all other objects. Essentially, the opposite of "bring to front"; all overlapping text areas or images will obscure the object that was sent to the back.

If a second object is selected and "send to back" is used, then this second object would be considered "behind" the first one.

Move forwards: This will move the object one layer closer to the front.

Send backwards: This will move the object one layer closer to the back.

To create a new heading in a textblock

• Double-click on the textblock to put it in edit mode.
• Highlight the text that you want to be made into a heading, or type new text and highlight it.
• Click on the “create heading” tool in the editor toolbar.

Creating a Hyperlink

To create text which links to a URL:

• Double-click on the textblock to put it in edit mode.
• Highlight the text you would like to make into a link.
• Click on the hyperlink tool in the editor toolbar.
• In the interface that opens, enter a URL, or specify a page on your website from the drop-down menu.
• If you want the page to open in a new window, place a checkmark beside open in a new window.
• Click Apply.

Note: You may also upload any type of file by selecting “File..” from the drop-done menu. The pop up will prompt you to localize the file on your computer by clicking on “Browse”.Once you have localized the file you wish to upload click on Apply.

Click Cancel to dismiss any changes.

Edit a table

To edit a table:

• Double-click on the table added to your page to put it in edit mode.
• Click on Table Properties to add or remove columns and rows. When done click on Apply to save the changes.
• Click on Duplicate Element to duplicate the table.

Insert Images

There are two ways you can insert a new image onto a page: using uploaded images, or using the free image library. Each method is explained below.

Inserting uploaded images

To insert an uploaded image:

• Click on the “add image” button in the Editor toolbar.
• Click on the tab labeled “your library” if it is not already selected.

You can preview an image by clicking on the magnifying glass icon below the image.

• A list of uploaded images are displayed. To upload a new image, click on the “browse” button to select the image you want to upload. Check off “Optimize” check box if you wish to scale down the size of your image and keep the aspect ration. Then click “upload”.
• To add an uploaded image to your page, click on any of the displayed images, and drag it over to your page.

To insert an image from the image library:

• Click on the Add Image button in the Editor toolbar. 
• Click on the tab labeled Free Library if it is not already selected.
•  You can search for an image by keyword, using the search field provided.
• You can preview an image by clicking on the magnifying glass icon below the image.
• To add an image to your page, click on any of the displayed images, and drag it over to your page.

How to use images
By default, there are a number of images which are used in you EasySiteWizard Pro template. You can manipulate, or remove, any of these images, or any other image which you add to the page, as follows:

Moving an image

To move an image to a new location:

• Move the mouse pointer over the image.
• Press and hold down on the mouse button, and drag the image to the desired location.

Resizing an image
To change the size of an image:

• Double-click on the image, to put it in edit mode.
• Click and drag on one of the eight “handles” (white squares) along the edge of the image.

Note: You cannot resize any of the default images provided by the template

Copying an image

To create an exact duplicate of an image:

• Double-click on the image to put it in edit mode.
• Click on the “duplicate” icon which appears at the bottom of the image.

Edit an image

To edit an image:

• Double-click on the image to put it in edit mode.
• Click on the “edit” icon which appears at the bottom of the image.
• The Image Editor screen will pop up.

Deleting an image
To delete an image:

• Double-click on the image to put it in edit mode.
• Click on the “delete” icon which appears at the bottom of the image.

Image Editor Tools

Crop

1. Click Crop, select the portion of the image you wish to keep.
2. Highlight the section you wish to crop by dragging your mouse over the desired portion of the image.
3. Click Crop to modify image.

If you do not wish to crop an image that has been highlighted, click on the image again.

Resize

1. Click Resize, to modify size of the image.
2. A screen will pop up allowing you to specify height and width of the image in pixels.
3. Check Preserve aspect ratio, to maintain the ratio of height and width of the image.
4. Click Apply, to accept changes.
5. 4Click Close to exit screen without accepting changes.

Rotate
Click Rotate, to turn image counter clockwise.

Contrast

1. Click Contrast, to either increase/decrease gradient of color within the image.
2.  You can change the contrast by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100). Or you can specify the intensity of the gradient by entering a number into the text box (-100, 0 100)
3. Click X to if you do not wish to make any modifications.

Brightness

1. Click Brightness, to either increase/decrease the amount of light in color of the image
2. You can change the brightness by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).Or you can specify the intensity of the light by entering a number into the text box (-100, 0 100)
3.  Click X to if you do not wish to make any modifications.

Sharpness

1. Click Sharpness, to either increase/decrease the density of the image.

2. You can change the density by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).

Or you can specify the density number into the text box (-100, 0 100)

3. Click X to if you do not wish to make any modifications.

Exposure

1. Click Exposure, to either increase/decrease the amount of light allowed in the image
2.  You can change the degree of light in the image by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).Or you can specify the intensity of the exposure by entering a number into the text box (-100, 0 100)
3. Click X to if you do not wish to make any modifications.

Red-eye Removal

1. Click Red-eye Removal, to enable crop feature.
2.  Highlight the section you wish to have red eye reduced; by dragging your mouse over the desired portion of the image.
3.  Click Red-eye Removal to modify image.

Effects

1. Click Effects, to select different color effects to be done to the image.
2. Select one of the following two options:

• Grayscale
• Sepia (Shades of brown, similar to grayscale)

    3. ClickX to exit if you do not wish to make any modifications to effects.

Flip

This button lets you flip the image horizontal or vertical.

Undo

This button allows you to retract the last step that was done. By clicking Undo twice, you will revert two steps back. The number of times Undo is selected will be equivalent to the number of steps reverted back. This is based on how many steps you have done.

Web form Editor

The web form editor is used to construct custom web forms. You can access this editor by clicking the “create web form” button on the Editor toolbar.

To create a web form

•  First, select an element from the Inputs menu on the left, and drag it to the Form window on the right.
• Continue dragging the elements over, in the order in which you want them to appear. You can delete an element placed in the Form window by clicking one of the red “close” icons to the right of the element.

Don’t forget to add a button; this will be used to submit form data.

• Next, assign labels to each form element. You can do this by clicking on the tags which say click text to edit. These are the labels which will appear beside each form element in your web page.
• When all elements have been named to your satisfaction, click on each element in the form; you will notice that at the bottom of the screen, additional information concerning each form element is displayed (see explanation of form properties below for further details). Modify any of these properties to suit your needs.
• Click on the FORM label at the top the form you have created.

Specify the email address, or the URL of custom web code, which should be used when a form is filled in and submitted.

• When you are finished, click apply to insert your form into you page.
• To change the location of the form, click and drag on any of the element labels (the entire form will move)

Note: If you want to manually adjust the width of your form you may do so by entering a value in pixels or percentage.

• Click the check box next to Form width.
• Enter a value
• Choose pixels or percentage from the drop-down menu located next to the value field.
• Click Apply to save the changes made.

You can create your own Thank You page and modify its content, using Menu Editor (Manage Pages >"Create Page" and "Edit Page Content" buttons). Select the page from the drop-down menu in the Form Editor to link to it after Form is submitted.

To modify a web form

To modify an existing web form, double-click on one of the form element labels to the left of the form. Your form will be opened in the web form editor.

Explanation of form properties

The following form element properties can be modified:

Name: This is the name used to refer to the element when form data is emailed.

Value: This is the default value of the element, before the user has made any selections. For no default value, leave this property blank. Note: for buttons, this property is used for the button label.

Checked: This property can be set to YES or NO. It is used to determine if the radio button or checkbox is selected by default.

Add a widget

Widgets are special plug-ins which you can insert into your website, which provide advanced features to your site that are easily configured.

a) Google maps

Click the "insert widget" icon and select "Google Map"; this will place a Google map onto your site.

Configure your Google Map

1. Click on Configure.
2. Enter an API Key.

a. To get an API Key click on “Get A Key” link.

b. Register for a Free API Key.

c. An API Key must be created in order for Google to allow linking to their maps.

3. Enter the Address you wish to use for the map.

4. Select map size (i.e. Small, Medium, Large)

5. Once your are satisfied with the location of your map, scroll down and click “OK,”

Remove Google Map from your site

1. Double click the grey bar on top of your Google Map. A red X should appear on the bottom right hand corner.
2. Click theX.

b) BT Tradespaces

Click the Insert Widget icon and select BT Tradespace.

Configure your BT Tradespace Link

1. Click "configure".
2.   Enter the tradespace link in the field provided.
3. Click "ok"

Remove a BT Tradespace Link from your site

1. Double click the grey bar on top of your BT Tradespace Link. A red “X” should appear on the bottom right hand corner.

2. Click the “X.”

c) Superpages.com

Click the Insert Widget icon and select Superpages.com.

Configure your Superpages.com Link

1. Click on Configure.
2. Enter the Address you wish to use for the map.
3. Select map size (i.e. Small, Medium, Large)
4. Once your are satisfied with the location of your map, scroll down and click OK,

Remove Superpages.com Link from your site

1. Double click the grey bar on top of your Superpages.com Link. A red X should appear on the bottom right hand corner.
2. Click theX.

If you would like to preview your site before it is published, you can do so at any time by clicking on the Preview button. A new browser window will open, allowing you to view and interact with your website as if it has already been published. Please note that unsaved changes will not be displayed in the preview window.

Publish your Website

To publish your site, click Publish. Please note that unsaved changes will not be published.

Tutorial

By clicking this icon you can watch a flash demo of how to use EasySiteWizard Pro application.

Help

Clicking this button will open EasySiteWizard's online help file system. Online help provides a good overview and basic explanations of the various functions in EasySiteWizard Pro.