Difference between revisions of "EasySiteWizardPro"

From Help
Jump to: navigation, search
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Overview =
+
 
 +
= 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 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.  
Line 11: Line 12:
 
The EasySiteWizard Pro website management and design process is broken down into the following steps:  
 
The EasySiteWizard Pro website management and design process is broken down into the following steps:  
  
*Sites
+
*Sites  
 
*Designs  
 
*Designs  
 
*Editor  
 
*Editor  
 
*Preview  
 
*Preview  
*Publish
+
*Publish  
 
*Tutorial  
 
*Tutorial  
 
*Help
 
*Help
  
=Sites=
+
[[File:CP_Overview.PNG]]
 +
 
 +
=Main Menu=
 +
The main menu is located on the top right corner of EasySiteWizard.
 +
 
 +
Main Menu: Links you to the Main Page of EasySiteWizard Pro 8.3
 +
*'''Create New Site:''' Allows you to create new site.
 +
*'''Manage Sites:''' Allows you to publish/edit/delete the site.
 +
*'''Support:''' Opens online help files for EasySiteWizard Pro 8.3 in a new window.
 +
*'''Feedback:''' This option allows you to send a feedback concerning EasySiteWizard Pro 8.3
 +
*'''Tutorial:''' A flash demo will be presented to the user upon how to use the application.
  
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.  
+
[[File:ESW_Main_Menu.PNG]]
  
*To create a new website, click “create new site” and supply information in the “details” dialog box that appears.
+
=Create New Site=
 +
#Click the “Create New Site” button.
 +
#You will find the two options: Landing Page which allows you creating a basic site with a single page and Multi-page site which allows you to create site with multiple pages and options.  
  
<br>
+
[[File:Website_type.PNG]]
  
#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/.
+
=Landing Page=
#If you like, you can specify a subdirectory that the web page will be published to, e.g. http://www.mydomain.com/anotherdirectory/.
+
A landing page is a single web page also known as a lead capture page.  
#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.
 
#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:
  
= <br>Designs  =
+
1.Scroll through the list of thumbnails to the left.
  
In this step, you can select a layout template for your site. To select a template:
+
[[File:Design.PNG]]
  
*Scroll through the list of thumbnails to the left.  
+
2.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 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.  
+
3.When ready click on Apply and a checkmark will be overlaid on top, indicating that the template has been selected.
*When ready click on '''Apply '''and a checkmark will be overlaid on top, indicating that the template has been selected.
 
  
<br> '''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.  
+
[[File:Design_Options.PNG]]
  
*Click '''Next''' to proceed to the Editor, where you can begin to customize the design and content of the template, or:
+
'''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 Back to return to the Sites step.  
+
4. Click Next to proceed to the Editor, where you can begin to customize the design and content of the template, or:
#Click on any of the other steps listed at the top of the screen to skip directly to that step.
+
*Click Back to return to the Sites step.
 +
*Click on any of the other steps listed at the top of the screen to skip directly to that step.
  
= <br> Editor  =
+
===Site Details===
  
 +
Fill out the following site details :
 +
 +
*'''Company Name:''' the name of your company as it will be shown on your website's main page
 +
*'''Company description:''' insert your company’s description
 +
*'''Site URL:''' this is the URL where people will be able to view your site when it is published
 +
*'''Publish To (directory):''' if you do not want to publish your webpage to the main directory (e.g. http://www.mydomain.com/), you can specify a subdirectory, such as http://www.mydomain.com/anotherdirectory/
 +
*'''Enable syndication (RSS 2.0, Atom 1.0)''': enabling this option will allow people to know when you have updated your website via RSS
 +
*'''Phone number:''' you should indicate your contact phone number.
 +
*'''Toll free number''': you should indicate your toll free number
 +
*'''Address:''' the address at which your company locates
 +
*'''City:''' the city where your company locates
 +
*'''State/Province:''' state or province where your company locates
 +
*'''ZIP / Postal Code:''' you should indicate the ZIP / Postal Code of the region your company locates at.
 +
*'''Email address:''' you should indicate the email address of the site’s owner.
 +
*'''Contact Us Form:''' select whether your site will contain “Contact Us Form” or not.
 +
*'''Google Map:''' select whether your site will contain the link to Google Map indicating your company’s location or not.
 +
 +
[[File:Site_Details.png]]
 +
 +
==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 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.  
  
Line 61: Line 93:
 
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.  
 
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 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 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 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.
 
 
  
 +
*'''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.
  
*'''Undo:''' undoes your last action.
+
*'''Redo:''' redoes your last action (re-applies your last undo)  
*'''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.  
*'''Bold, Italics, Underline, font properties:''' these controls allow you to format text in your textblocks.
+
*'''Hyperlink:''' make highlighted text link to a URL.  
*'''Hyperlink:''' make highlighted text link to a URL.
+
*'''Bulleted list:''' create a bulleted list in a textblock.  
*'''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.  
*'''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.  
*'''Spellcheck:''' checks the spelling in any textblock currently open for editing.
 
 
*'''Create web form:''' opens the web form creation interface.  
 
*'''Create web form:''' opens the web form creation interface.  
 
*'''Add a widget:''' You can add widgets to your page (Google map, BT Tradespace)  
 
*'''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.
 
*'''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.
  
= <br> Menu Editor  =
+
===Moving Objects within your Site===
 +
 
 +
#Left click and hold the object (i.e. Image, Text Block) you wish to move.
 +
#A grid overlay will appear, in order to assist you in aligning the object you are moving.
 +
#Move your mouse to the desired location.
 +
#Unclick.
  
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.  
+
[File:Moveobjects.png]]
  
 +
==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.
 
To move your navigation bar, click and drag the menu editor bar at the top of the navigation menu.
  
<br> ''Vertical/Horizontal menu orientation''
+
===Vertical/Horizontal menu orientation===
 
+
#In order to change the menu orientation (vertical/horizontal), in the editor section select Edit site menu.
<br>
 
 
 
#In order to change the menu orientation (vertical/horizontal), in the editor section select '''Edit site menu'''.
 
 
#A new window will open where the user can choose to display the menu vertical or horizontal by selecting the appropriate radio button.
 
#A new window will open where the user can choose to display the menu vertical or horizontal by selecting the appropriate radio button.
#To maually adjust the width of the Menu enter a value in pixels or use '''auto''' option to apply automatic value.
+
#To manually adjust the width of the Menu enter a value in pixels or use auto option to apply automatic value.
#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.
+
#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.
#When done click '''Apply''' for the changes to take effect.
+
#When done click Apply for the changes to take effect.
  
== <br> Using the Menu Editor  ==
+
==Wizard Completed==
 +
When you are done adding your changes to your website press the '''Next''' button to save changes. This screen offers you the following options:
 +
*Preview your website;
 +
*Publish your website (if you would like to make your website publicly available);
 +
*Go to Manage Sites;
 +
*Go back to Editor.
 +
To return to Main Menu press the '''Cancel''' button
  
<br> To edit the buttons on your navigation bar, click once on '''menu editor'''.<br> 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:
+
=Multi Page Site=
  
*Other pages on your website
+
To create the new site in Multi-page site take the following steps.
  
*An external URL
+
==Design==
*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=
+
Select the design you would like to use as the starting point for your website.
  
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.  
+
[[File:Design.PNG]]
  
#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'''.  
+
Then click on the one you want to use. The design will enlarge, and you will then be able to select the design or select another design.
#Enter a page title.
 
#Enter a summary of your new page.
 
#Enter several keywords that you would like your page to found by.
 
#Click '''Finish '''to create the new page.
 
  
== <br> Renaming a Page<br>  ==
+
[[File:Previewtemplate.png]]
  
#Select from '''Existing Pages''' the name of the page you wish to rename.
+
===Favourites===
#Click'''Edit Page Properties'''.  
+
Using the '''Add to Favorites''' button you can add a template to your "Favorites"; this is an easy way to organize and choose between a smaller selection of templates that you like. You will be able to view Favorites section by clicking the sign.
#Click '''Rename''' page.
+
Some templates are available in more than one color scheme. Click the color buttons to select a general color scheme.
#Click '''Done''' to close the Page Manager.
 
  
== <br> Copying a Page  ==
+
===Search Function===
 +
You can also search for a template within the selected design category by entering a keyword or the corresponding template ID. You may also search for a template within all the design categories by selecting the '''all designs''' option from the drop down menu.
  
 +
==Site Details==
 +
Fill out the following details for your website:
  
 +
*'''Site Title:''' This is the name of your website, as it will appear on your website's main page.
 +
*'''Tagline:''' This is a secondary text line which appears immediately underneath the website title. This section can be left blank.
 +
*'''Site URL:''' This is the URL where people will be able to view your site when it is published.
 +
*'''Publish To (directory):''' If you do not want to publish your webpage to the main directory (e.g. http://www.mydomain.com/), you can specify a subdirectory, e.g. http://www.mydomain.com/anotherdirectory/
 +
*Enable syndication (RSS 2.0, Atom 1.0): Enabling this option will allow people to know when you have updated your website via RSS.
  
#Select from '''Existing Pages''' the name of the page you wish to duplicate.
 
#Click '''Edit Page Properties'''.
 
#Click '''Duplicate''' page.
 
#Click '''done '''to close the Page Manager.
 
  
== <br> Editing a Page  ==
+
[File:Multidetails.png]]
  
<br>
+
==Site Menu==
 +
Having selected the design you want to work with press “Apply” to create your site menu. The following screen will appear:
  
#Select from '''Existing Pages''' the name of the page you wish to edit
+
[[File:Site_map.PNG]]
#Click '''Edit Page Properties'''.
 
  
== <br> Deleting a page ==
+
===Menu Buttons===  
 +
Main buttons are utilized for the initial topic or subject of the site. Generally used as a focal point of what items are most important in the navigation (i.e. Home, Contact Us, Furniture etc.)
  
<br>  
+
===Subcategory Buttons===
 +
As the navigation branches off subcategories become available. This allows you to go into detail about the particular topic or subject. (i.e. Main Category: Furniture => Subcategory: Chairs, Couches, Tables, etc.)
  
#Select from '''Existing Pages''' the name of the page you wish to delete.
+
===Creating a Main Category/Subcategory Button===
#Click '''Delete Page'''. The page will be deleted. Note: this action is undoable.
+
#Click “Menu editor”
 +
#Select the button
 +
#In Button Properties, label the button.
  
<br>
+
[[File:Button_Properties.png]]
  
== Edit textblocks  ==
+
4.Label Hover Tooltip
 +
5.Select “Link to” and click Page (drop down menu will appear to select pages within your site)
  
<br> 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.  
+
[[File:Linkto.png]]
  
== <br> Adding a textblock  ==
+
URL, Blog, Store, Chat, Email, and Schedule
 +
6. Check “Open in a new Window” if you wish the button to open a new browser.
 +
7. Click “Apply”/“Cancel” to accept/dismiss changes.
  
<br> 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”.  
+
===Deleting a Button===
 +
#Click on the Button you wish to delete
 +
#Click “Delete this button.
  
== <br> Moving a Textblock  ==
+
===Edit Your Site===
 +
Please see the edit your site section for the landing page.
  
<br> 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.  
+
=Manage Sites=
 +
This section contains the sites you will be able to work with. If you would like to create a new site, click the Create New Site button.
  
== <br> Resizing a Textblock  ==
+
[[File:Mange_Sites.png]]
  
<br> To change the size of a textblock:
+
Under this section you will be able to edit site details, choose new designs for your site, close/delete site.
  
*Double-click on the textblock, to put it in edit mode.
+
[[File:Mange_sites_details.png]]
*Click and drag on one of the eight “handles” (white squares) along the edge of the textblock.
 
  
== <br> Copying a Textblock  ==
+
Mentioned features will be described below, under the Editor Section.
  
<br> To create an exact duplicate of a textblock:
+
If you would like to create a new site, click the button. To edit your site, click the button.
  
*Double-click on the textblock, to put it in edit mode.
 
*Click on the “duplicate” icon which appears at the bottom of the textblock.
 
  
== <br> Editing text in a Textblock  ==
+
==Editor Section==
 +
The Editor Section allows you to edit, manage and modify the design you have selected. Editor allows you to “Save page”, “Add a text block”, “Add a table”, “Add an image”, “Redo/Undo” actions, “Create a hyperlink to another page or site”, “Create a bulleted list”, “Create a heading”, “Check spelling,” “Create a web form” and add a Google Map to your page.
  
<br> To edit text in a textblock:<br>
+
==Site Menu Editor==
 +
This allows you to set properties for individual buttons of the site (font, background, button border, padding of text inside the button, button margin). A Preview feature was also added to the Site Menu Editor, so you can see the changes of properties on the fly without having to exit the Menu Editor.
  
*Double-click on the textblock to put it in edit mode.
+
[[File:Edit_site_menu.png]]
*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  
+
===Preview panel===
 +
Site buttons preview is added to easily review changes made without exiting Site Menu Editor every time properties are changed.
  
Bold
+
The '''Apply settings to all''' buttons feature will be checked by default. It allows you to apply same parameters for all buttons at once. If unchecked – buttons can be configured separately.
 +
#Select the '''Apply settings to all buttons''' checkbox in order to apply all the changes to all buttons.
 +
#Click '''Apply''' in order to save the changes.
  
Underline
+
===Buttons dimensions option===
 +
Option to set button dimensions. You can modify button height and width. Both are set in pixels.
 +
1. Enter the number of pixels desired in the provided boxes for both the height and the width of a button.
 +
2. Click “Apply” in order to save the changes.
  
Italics
+
===Button Border option===
 +
Option to set border dimensions to a particular site button. Pressing the respective button calls a pop-up menu. User can configure three parameters of button border – style, thickness and color.
 +
#In order to set the border of a button click the button located next to the “Button Border” section.
 +
#A border button menu pop up will open where you can set the border style, thickness and color of the button. While setting these parameters you will be able to see a border preview on the right side of the pop-up menu. Use the drop down menus to select a border style and thickness. For choosing a color click on color picker and a color palette will open from where you will be able to choose a color for the button border.
 +
3. Click '''Apply/Cancel''' to save/dismiss all the changes.
  
Bulleted list
+
===Interior Padding option===
 +
Option to set interior padding of the button. Pressing the respective button calls a pop-up menu. You can adjust top, bottom, left and right parameters.
 +
#In order to set the interior padding of a button click the button located next to the '''Interior Padding''' section.
 +
#The Interior padding menu pop up will open where you can set/adjust the top, left, bottom and right parameters of a button.
 +
#Click '''Apply/Cancel''' to save/dismiss all the changes.
  
<br>
+
===Button Margin option===
 +
Option to set margin of the button. Pressing the respective button calls a pop-up menu. You can adjust top, bottom, left and right parameters.
 +
#In order to set the margins of a button click the button located next to the “Button Margin” section.
 +
#The Button Margin menu pop up will open where you can set/adjust the top, left, bottom and right margins of a button.
 +
#Click '''Apply/Cancel''' to save/dismiss all the changes.
  
== Spellchecking a Textblock  ==
+
===How to save your website===  
 +
Saving your work is recommended throughout your session of EasySiteWizard Pro Please take the following steps to save your website changes.
 +
#Click the save button.
 +
#You will be prompted with a drop down menu with four saving options: “save page”, “restore from auto save”, “restore from backup” and “save as template”.
 +
#It is recommended that you save every page that is modified.
  
*To create text which links to a URL:
+
Please note:
*Double-click on the textblock to put it in edit mode.
+
*When switching from one page to the next, EasySiteWizard Pro will automatically save work done. You have the ability to switch between saved sites.
*Click on the “spellcheck” tool in the Editor toolbar.
+
*You can review roll back/ roll forward changes per web page (every version is saved with date/time so that can be selected) - There is a history kept of each save. When you save your website site (this is the current save the one that would be published). The previous save would then be put in a directory, as a backup, which could then be restored.
*&nbsp;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.
 
  
<br> '''Deleting a textblock'''
 
  
<br> To delete a textblock:
+
==Master Page Enhancements==
 +
This feature implies the inability to edit master page elements when on ordinary pages (Home, News, etc.), hence site title, tag line, menu editor are only editable on Master Page.
 +
The Master Page elements are dimmed when viewing ordinary pages.
 +
Choose create a New Site within the “Sites” section.
  
*Double-click on the textblock to put it in edit mode.
+
#Select a design to be used for your website form within the “Designs” section.
*Click on the “delete” icon which appears at the bottom of the textblock.
+
#When you proceed to the “Editor” section you will be prompted with a message asking whether you would like to configure Master Page.
  
==Layer control==
+
[[File:Master_Page.png]]
  
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.  
+
You should note that all changes applied to your master page will be visible when previewing or publishing your final site.
 +
3.After clicking “Yes” you will be able to start editing your Master Page.  
  
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:  
+
Within the Master page the following elements can be edited:  
 +
a)'''Text blocks and images'''
  
<br> ''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.  
+
You may insert images and text blocks within the Master Page. Please note that the images and text blocks inserted on the Master Page can only be edited within the Master Page.  
  
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.
+
b)'''Site Menu Editor'''
  
<br> ''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.  
+
The position of the Site Menu Editor can be changed on the Master Page only. When in ordinary pages, Site Menu Editor can be accessed (new pages can be added, existing ones – deleted), but its position is locked.  
  
If a second object is selected and "send to back" is used, then this second object would be considered "behind" the first one.
+
'''c)Site title and tag line'''
  
<br> ''Move forwards:'' This will move the object one layer closer to the front.  
+
If the site is build off the Master Page, site title and tag line are considered as Master Page elements and are not editable when in ordinary pages.
  
''Send backwards:'' This will move the object one layer closer to the back.  
+
4.Please note that after finalizing the editing of the Master Page and when clicking on any other page within the site (example: the user may click on '''Products''' or '''Contact''' page to start editing) the master page elements will appear dimmed to enable the user to distinguish the master page elements. This allows the user to view the location of the Master Page elements, and position other elements accordingly.
 +
5. In order to review the site page without dimmed elements click on '''Preview''' or '''Publish'''.  
  
=To create a new heading in a textblock=
+
You will be able to see the final site including both Master Page elements as well as ordinary page elements.
 +
If you would like to return to edit the Master page elements:
  
*Double-click on the textblock to put it in edit mode.
+
#Click on the '''Save''' button.
*Highlight the text that you want to be made into a heading, or type new text and highlight it.
+
#From the extended menu select '''Edit Master Page'''.
*Click on the “create heading” tool in the editor toolbar.
+
You will be returned to the Master Page where you may continue to edit the elements within the Master Page.
  
== <br> Creating a Hyperlink  ==
 
  
<br> To create text which links to a URL:
+
==Manage Pages==
 +
Manage Pages allows you to create, rename and duplicate pages. This section allows you to structure and organize the naming conventions you wish to utilize on your site.
  
*Double-click on the textblock to put it in edit mode.
+
[[File:Manage_Pages.png]]
*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'''.
 
  
<br> '''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'''.
+
===Create New Page===
  
<br> Click '''Cancel''' to dismiss any changes.  
+
#Fill in the name of the page
 +
#Enter a page title. The page title should be related and relevant to your page content. The page title appears on top of your browser and is a significant element in the search engine with regards to rankings.
 +
#Enter a summary of your new page and try to include relevant keywords as some search engines will use this summary as part of the website results. This summary will not be visible on your page, its purpose being to provide a clear definition of what your page contains with a significant relation to the search engine.
 +
#Enter several keywords that you would like your page to be found by. These keywords can also be phrases containing words found on your main site as well as on this newly created page. Please make sure that the keywords chosen are to be found in your page content as these keywords will be used by search engines to find your page.
 +
#Click '''Apply''' to create the new page.  
  
<br> '''Edit a table'''
+
[[File:Create_new_page.png]]
  
<br> To edit a table:
+
===How to Delete a Page===
 +
#Select from Existing Pages the name of the page you wish to delete.
 +
#Click '''Delete Page''' button.
  
*Double-click on the table added to your page to put it in edit mode.  
+
===How to Duplicate a Page===
*Click on '''Table Properties '''to add or remove columns and rows. When done click on '''Apply''' to save the changes.
+
#Select from Existing Pages the name of the page you wish to duplicate.  
*Click on '''Duplicate Element''' to duplicate the table.
+
#Click '''Duplicate page'''.  
  
== <br> Insert Images  ==
+
===How to Edit a Page===
 +
#Select from Existing Pages the name of the page you wish to edit
 +
#Click '''Edit Page Properties''' or '''Edit Page Content'''
  
<br> 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.  
+
===Complete Your Edit===
 +
When you are finished managing your pages click '''Close'''.
  
<br>
+
==Adding or Editing a Text Block==
 +
Adding texts allows additional customization to your site. Many of the text blocks that exist in each of the designs are placeholders that require editing.
  
'''Inserting uploaded images'''
+
===Adding a Text Block===
 +
#Click the text icon and a text block will appear.
 +
#In order to help you find the initial location of the new textbox, the border around the new textbox will flash for a moment after it appears.
 +
#Type/Paste text into the text block.
 +
#Once you are finished adding text, click outside of the text block within the Page.
  
<br> To insert an uploaded image:
+
===Editing a Text Block===
 +
#Double left click on the text; a grayed boxed area will appear on the text block.
 +
#You will be able to edit text once the outline is visible
 +
#Type/Paste text into the text block.
 +
#Once you are finished adding text, click somewhere on the page outside of the Text Block.
  
*Click on the “add image” button in the Editor toolbar.
+
[[File:Edit_Text_box.png]]
*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.  
+
===How to Resize a Text Block===
 +
#Double left click on the text block.
 +
#Mouse over the smaller boxes for the direction you wish to increase the size of the text block.
 +
#Click and hold your mouse on the small box.
 +
#Move the mouse in the direction you wish to resize the text block.  
  
*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”.  
+
===How to Delete a Text Block===
*To add an uploaded image to your page, click on any of the displayed images, and drag it over to your page.
+
#Double left click on the text block.  
 +
#Click '''X''' on the bottom right corner.  
 +
#The text block should now be removed
  
<br>
+
===How to Duplicate a Text Block===
 +
#Double left click on the text block you wish to duplicate.
 +
#Click on located on the bottom right corner.
 +
#The text block should now be duplicated.
 +
#Click and hold the duplicate text block to the desired location
 +
#Unclick.
  
'''To insert an image from the image library:'''
+
===How to Move a Text Block===
 +
#Put your mouse over the text you wish to move
 +
#Click and hold the mouse.
 +
#Move your mouse to the location where you wish to place your text.
 +
#Unclick
  
 +
==Layer Control==
 +
Layers are a common method for determining which objects should cover (or obscure) another object. Layers determine if objects should overlap (or one is directly on top of the other). Objects such as text fields and images which are on a "higher" layer can 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 can 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:
  
*Click on the '''Add Image '''button in the Editor toolbar.&nbsp;
+
*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.  
*Click on the tab labeled '''Free Library '''if it is not already selected.  
+
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.  
*&nbsp;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.
 
  
<br>
+
*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.
  
'''How to use images'''<br> 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:<br>
+
*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.
  
'''Moving an image'''
+
==Add a table==
 +
You can add a table by simply clicking on the “add table” button within the Editor Toolbar.
 +
When you click on “Add table” icon the following table editor pop up will be displayed:
  
To move an image to a new location:<br>
+
[[File:Add_a_table.png]]
  
*Move the mouse pointer over the image.
+
Here you can set the number of columns and rows of your table as well as the height, width and border type by entering the values in the provided boxes. You may set up the border of your table by clicking on the button next to the “Border” section. The following table border editor will be displayed:
*Press and hold down on the mouse button, and drag the image to the desired location.
 
  
<br>
+
[[File:Table_border.png]]
  
'''Resizing an image'''<br> To change the size of an image:<br>
+
#Choose the style of your border from the drop down menu.
 +
#Choose your thickness from the drop down menu.
 +
#Choose a color by clicking on the button next to the color section.
 +
#Click '''Apply/Cancel''' to save/dismiss the changes made.
  
*Double-click on the image, to put it in edit mode.
+
'''Please note:''' You will be able to see a preview of your border on the same page under the '''Border Preview''' section.  
*Click and drag on one of the eight “handles” (white squares) along the edge of the image.
+
'''Please note:''' Once you have created your table by double clicking on it you will be able to change the table settings.
  
<br> '''Note:''' You cannot resize any of the default images provided by the template
+
==Adding an Image==
 +
You can build your own library of images by uploading the image files; and or utilize the free image library to place additional images into your site. When you click on the icon a menu pops up on the left side of the screen, this allows you to add additional images to your site.
  
<br> '''Copying an image'''
+
[[File:Add_an_image.png]]
  
<br> To create an exact duplicate of an image:<br>
+
There are 3 Types of Libraries:  
 +
#Your library.
 +
#Free library
 +
#Template images
 +
  
*Double-click on the image to put it in edit mode.
+
===How to Upload an Image to “Your library”===
*Click on the “duplicate” icon which appears at the bottom of the image.
+
#Click on the top menu picture icon to add an image.
 +
#Click '''Upload''' button. New window will appear allowing you to browse your local computer for the images you would like to put on your site.
 +
#Click “Browse”.
 +
#Search for image on your computer.
 +
#Check off “Optimize” if you wish to scale down your image size and keep the aspect ratio.
 +
#Click “Upload.” Once your image is uploaded it will be located in a panel underneath “Upload” to view a larger version of your image, click on the magnifying glass .  
 +
#With your mouse, click and hold the image you wish to insert into your webpage.
 +
#Move your mouse to the desired location of the image.
 +
#Unclick.
 +
#Click the on the bottom right corner to close Images.  
  
<br>
+
===How to Use the Free library===
 +
Free library houses approximately 10,000 stock images available for you to use on your site.
 +
1. Click on the Free library tab.
 +
2. Select the category best suited for you site (i.e. Nature). \
  
'''Edit an image'''
+
a. You can search through the entire image library by keyword by selecting "All Categories" and conducting a keyword search.
 +
b. You can refine your search by selecting a specific category and then searching by keyword.
  
<br> To edit an image:
+
3.Click and Hold the image you wish to place onto your site.
  
*Double-click on the image to put it in edit mode.
+
4.Move your mouse to the desired location. Unclick.  
*Click on the “edit” icon which appears at the bottom of the image.
 
*The Image Editor screen will pop up.
 
  
<br> '''Deleting an image'''<br> To delete an image:
 
  
*Double-click on the image to put it in edit mode.  
+
===How to Delete an Image from your Site===
*Click on the “delete” icon which appears at the bottom of the image.
+
#Double left click the Image.  
 +
#Click on the Red X
  
<br> '''Image Editor Tools'''
+
===How to Resize an Image from “Your library” or “Free library”===
 +
#Double left click the image.
 +
#Mouse over the smaller boxes for the direction you wish to increase the size of the Image.
 +
#Click and hold your mouse on the small box
 +
#Move the mouse in the direction you wish to resize the Image.
  
<br> ''Crop''<br>
+
Please note, that you cannot resize any of the default images provided by the design.
  
#Click '''Crop,''' select the portion of the image you wish to keep.
+
===Image Properties===
#Highlight the section you wish to crop by dragging your mouse over the desired portion of the image.
+
Image Editor allows you to modify images from “Your library” or “Free library.
#Click '''Crop '''to modify image.
 
  
If you do not wish to crop an image that has been highlighted, click on the image again.  
+
Adding Image Properties
 +
#Double click on the image you wish to modify.
 +
#Click '''Image Properties'''.
 +
#The image properties screen will pop up.  
  
<br> ''Resize''  
+
In the image properties interface, you can add a clickable link (URL) to the image, as well as alt text which will be displayed if the user's browser is not set to automatically load images. If you add a link, you can also specify that the link should open in a new window by placing a checkmark beside "open in a new window".
  
#Click '''Resize''', to modify size of the image.
+
===Editing Images===
#A screen will pop up allowing you to specify height and width of the image in pixels.
+
Modifying an image with Image Editor
#Check Preserve aspect ratio, to maintain the ratio of height and width of the image.  
+
#Double click on the image you wish to modify.  
#Click '''Apply''', to accept changes.  
+
#Click '''Edit'''.
#4Click '''Close '''to exit screen without accepting changes.
+
#The image editor screen will pop up.  
  
<br> ''Rotate''<br> Click '''Rotate''', to turn image counter clockwise.  
+
[[File:Imageeditor.png]]
  
<br> ''Contrast''<br>
+
The Image Editor allows you to modify images you have uploaded or selected from the library.
  
#Click '''Contrast''', to either increase/decrease gradient of color within the image.
+
===Undo/Redo===
#&nbsp;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)
+
You can undo/redo as many steps as you wish based on the current section and actions done per session.  
#Click '''X''' to if you do not wish to make any modifications.
+
#Undo
 +
Click on the undo icon to undo your last action you have done.  
 +
#Redo
 +
Click on to redo icon to redo your last action you have done.  
  
<br> ''Brightness''<br>
+
===Modifying Text===
 +
#Double left click on the text block; a boxed grayed area will appear on the Text Block.
 +
#You will be able to edit text once the button is visible. Click this button in order to edit the text.
 +
#Highlight the text you wish to Bold, Italicize, and or Underline.
 +
#Once you are finished modifying text, click somewhere on the page outside of the text block.
  
#Click '''Brightness, '''to either increase/decrease the amount of light in color of the image
+
===Modifying Font Style, Colors, and Text Size===
#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)
+
#Double left click on the text block you wish to modify.  
#&nbsp;Click '''X''' to if you do not wish to make any modifications.
+
#Highlight the text you wish to modify.
 +
#Click the icon.
 +
#A screen will pop up allowing you to Select Colors.
 +
#Use the bar in order to select the Font Style and Font Size.
  
<br>
 
  
''Sharpness''
+
===Create a Hyperlink to another Page or Site===
 +
Hyperlinks allow you to refer to pages that exist within your website and sites outside of your own domain.
 +
#Highlight the text you wish to link from.
 +
#Click on to insert a link onto your page.
  
<br> 1. Click '''Sharpness''', to either increase/decrease the density of the image.  
+
===External Website===
 +
1. Type in the desired URL.  
  
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).  
+
[[File:Hyperlink.png]]
  
Or you can specify the density number into the text box (-100, 0 100)
+
Click '''Apply''' to insert the link on your page.
  
3. Click '''X '''to if you do not wish to make any modifications.
+
===Internal page on my website===
  
<br> ''Exposure''<br>
+
#Choose an existing page on your website from the drop down menu. 
 +
#Click '''Apply''' to insert the chosen link.
  
#Click '''Exposure,''' to either increase/decrease the amount of light allowed in the image
+
===Document or other file===
#&nbsp;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)
 
#Click '''X''' to if you do not wish to make any modifications.
 
  
<br> ''Red-eye Removal''<br>
+
#You may also upload a file by clicking on “Browse”. The pop up will prompt you to localize the file on your computer.
 +
#Once you have localized the file you wish to upload click on '''Apply'''.
  
#Click '''Red-eye Removal,''' to enable crop feature.
+
===Send Email===
#&nbsp;Highlight the section you wish to have red eye reduced; by dragging your mouse over the desired portion of the image.
 
#&nbsp;Click '''Red-eye Removal''' to modify image.
 
  
<br> ''Effects''<br>
+
#Enter an email address.
 +
#Click on '''Apply''' to insert the link.
  
#Click '''Effects''', to select different color effects to be done to the image.
+
==Create a Bulleted Lists== 
#Select one of the following two options:
+
Bulleted lists help organize text when sentences or paragraphs are not required. There are two ways to create bulleted lists. You can either use existing text to create you lists, or you can create a fresh list by creating a new text block.  
  
*Grayscale
+
===Creating a Bulleted List with Existing Text===
*Sepia (Shades of brown, similar to grayscale)
+
#Double left click an existing text block
 +
#Highlight the text you wish to put in your bulleted list
 +
#Click the bullet icon.
  
&nbsp;&nbsp;&nbsp; 3. Click'''X''' to exit if you do not wish to make any modifications to effects.
+
===Using a New Text Block to Create a Bulleted List===
 +
#Create a new text block
 +
#Click bullet icon.
 +
#A bullet will appear; type in your text
 +
#Hit the “Enter” key on your keyboard to set your next bullet
 +
#Repeat steps 3-4 till bulleted list is complete
  
<br> ''Flip''
+
==Create a Heading== 
 +
Headings are primarily used as titles to indicate the meaning of a section of text. There are two ways to create headings. You can use an existing line of text, or create a fresh new heading.
  
This button lets you flip the image horizontal or vertical.  
+
===Using an Existing Line of Text to Create a Heading===
 +
#Double left click an existing Text Block.
 +
#Highlight the Text you wish to make into a Heading.  
 +
#Click
  
<br> ''Undo''  
+
===Creating a New Heading===
 +
#Create a new text block.
 +
#Click
 +
#Type in the text you wish to use for your heading.
 +
#Once you satisfied with your Heading, Click '''Enter''' to begin a new line.
  
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.  
+
==Check Spelling== 
 +
Spell check is available to verify the spelling within each text block.
  
<br> '''Web form Editor'''
+
===How to Check Spelling within a Text Block===
 +
#Double left click on the text block you wish to check spelling for.
 +
#Click on the “Check spelling” tool in the Editor Toolbar.
 +
#Words which appear to be spelled incorrectly are outlined in red. Click on the red outline and select from the option list for the correct word. It will automatically be corrected.
  
<br> 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.  
+
The incorrect word is outlined in red. Drop down menu allows you to select from a list of possible words.
  
<br> ''To create a web form''
+
==Adding Widget to your Page== 
 +
Widgets are special plug-ins which you can insert into your website, which provide advanced features to your site that are easily configured.
  
 +
===Google Maps===
 +
Click the “Widgets" icon and select "Google Map"; this will place a Google map onto your site.
 +
#Enter an API Key. a. To get an API Key click on “Get A Key” link.
 +
a.Register for a Free API Key.
 +
b.An API Key must be created in order for Google to allow linking to their maps.
 +
#Enter the Address you wish to use for the map.
 +
#Select map size (i.e. Small, Medium, Large)
  
 +
Once you are satisfied with the location of your map, click '''Apply'''
  
*&nbsp;First, select an element from the Inputs menu on the left, and drag it to the Form window on the right.
+
'''Remove Google Map from your site'''
*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.
+
#Double click the grey bar on top of your Google Map. A red “X” should appear on the bottom right hand corner.  
 +
#Click the “X.
  
<br> Don’t forget to add a button; this will be used to submit form data.
 
  
 +
'''Superpages.com Maps'''
  
 +
#Enter the Address you wish to use for the map.
 +
#Select map size (i.e. Small, Medium, Large)
 +
#Once you are satisfied with the location of your map, click “Apply”.
  
*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.
+
===ACCA RSS Feed===
*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.
+
Choose the width and height and click on “Apply”.
*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.
 
 
 
<br> You can create your own '''Thank You''' page and modify its content, using Menu Editor (Manage Pages &gt;"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.
 
 
 
<br> ''To modify a web form''
 
 
 
<br> 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.
 
 
 
<br> ''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.<br>
 
 
 
'''Add a widget'''
 
 
 
<br> Widgets are special plug-ins which you can insert into your website, which provide advanced features to your site that are easily configured.
 
 
 
<br> ''a) Google maps''
 
 
 
<br> Click the "insert widget" icon and select "Google Map"; this will place a Google map onto your site.
 
 
 
<br> ''Configure your Google Map''
 
 
 
<br>
 
 
 
#Click on Configure.
 
#Enter an API Key.
 
  
a. To get an API Key click on “Get A Key” link.
+
===Analog Clock===
  
<br> b. Register for a Free API Key.  
+
[[File:Analog_clock.png]]
  
<br> c. An API Key must be created in order for Google to allow linking to their maps.  
+
Choose the width and height and click on '''Apply'''.
  
<br> 3. Enter the Address you wish to use for the map.
+
===Digital Clock===
  
<br> 4. Select map size (i.e. Small, Medium, Large)
+
[[File:Digital.png]]
  
<br> 5. Once your are satisfied with the location of your map, scroll down and click “OK,”
+
Choose the width and height and click on '''Apply'''.
  
<br> ''Remove Google Map from your site''
+
===Twitter===
  
<br>
+
[[File:Twitter.png]]
  
#Double click the grey bar on top of your Google Map. A red '''X '''should appear on the bottom right hand corner.
+
Configure the look and feel of twitter on your page by choosing the desired design such as background and text color.
#Click the'''X.'''
 
  
<br>
+
===Countdown===
 +
With this widget you can set up a countdown to a specific date.
  
''b) BT Tradespaces''
+
#Choose the background and text color and size from the available options.
 +
#Enter the specific date on which you should be notified.
 +
#Enter the text which should be displayed when notified on the specified date.
  
<br> Click the '''Insert Widget''' icon and select '''BT Tradespace'''.  
+
===Visitor Counter===
 +
You can customize the counter's font, size and color to suit the design of your site. The hit counter provides you with a very basic measure of your site's traffic.
  
<br> ''Configure your BT Tradespace Link''<br>
+
===YouTube===
 +
Insert a YouTube video on your page by providing the relevant URL.
  
#Click "configure".
+
[[File:Youtube.png]]
#&nbsp; Enter the tradespace link in the field provided.
 
#Click "ok"
 
  
<br> ''Remove a BT Tradespace Link from your site''
+
===Poll===
 
 
<br> 1. Double click the grey bar on top of your BT Tradespace Link. A red “X” should appear on the bottom right hand corner.
 
 
 
<br> 2. Click the “X.”
 
 
 
<br>
 
 
 
''c) Superpages.com''
 
 
 
<br> Click the '''Insert Widget '''icon and select '''Superpages.com.'''
 
 
 
<br> ''Configure your Superpages.com Link''
 
 
 
 
 
 
 
#Click on '''Configure.'''
 
#Enter the Address you wish to use for the map.
 
#Select map size (i.e. Small, Medium, Large)
 
#Once your are satisfied with the location of your map, scroll down and click '''OK,'''
 
  
<br> ''Remove Superpages.com Link from your site''
+
#Enter a question to be displayed on your page.
 +
#Click the “add” button to enter a new option.
 +
#Choose the font color and width.  
 +
#Click “Apply” to display it on your page.
  
 +
===RSS Feed===
  
 +
#Enter a URL.
 +
#Choose the width, height and style.
 +
#Click “Apply” to save the changes.
  
#Double click the grey bar on top of your Superpages.com Link. A red '''X '''should appear on the bottom right hand corner.
+
===Facebook===
#Click the'''X.'''
 
  
'''<br>'''
+
[[File:Facebook_widget.png]]
  
=  =
+
#Press “Like button” to set the widget’s configuration;
 +
#The screen appears that offers options to input detailed settings that will be used to create the widget
 +
#Fill in the offered fields to create a widget:
 +
'''URL to Like:''' Insert the URL to like;
 +
'''Layout Style:''' Determines size and amount of social context next to the button.
 +
'''Show Faces:''' Check the box if you want the profile pictures to be shown below the button.
 +
'''Width:''' Set the width of the plugin, in pixels.
 +
'''Verb to display:''' Select the verb you want to be displayed near the button
 +
'''Font:''' Select the font of the plugin
 +
'''Color Scheme:''' Select the color scheme of the plugin.
 +
#When all the fields are filled in press “Apply” to save the changes; Press “Cancel” to return to the Editor.
 +
#At the site page you will see the widget created.
  
<br> 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.  
+
==Preview==
 +
Preview launches a new browser which allows you to view the site prior to publishing. To preview the site, click on “Preview.
  
= <br>Publish your Website =
+
==Publish==  
 +
Once you are satisfied with the content you have created with EasySiteWizard Pro, you may wish to publish the site.
  
<br> To publish your site, click '''Publish'''. Please note that unsaved changes will not be published.  
+
'''Publishing Your Site'''  
 +
#Click to publish your site.  
 +
#A prompt will appear, indicating that any existing content will be overwritten.
 +
#Check the URL location (i.e. http://screenshots.company.com).
 +
#Click “Yes”/“No” to accept/dismiss publishing the site
 +
#A prompt will appear notifying you that your site has been published to specified URL.  
  
= <br> Tutorial =
+
[[File:Publish.png]]
  
<br> By clicking this icon you can watch a flash demo of how to use EasySiteWizard Pro application.  
+
=Tutorial=
 +
Clicking on this button you will be presented with a flash demo on how to use EasySiteWizard application.
  
= <br> Help  =
+
Click tutorial to see a flash demo of the particular heading, icons and buttons within the document.
  
<br> 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.
 
  
 
[[Category:Design]]
 
[[Category:Design]]

Latest revision as of 15:00, 20 February 2014

Contents

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

CP Overview.PNG

Main Menu

The main menu is located on the top right corner of EasySiteWizard.

Main Menu: Links you to the Main Page of EasySiteWizard Pro 8.3

  • Create New Site: Allows you to create new site.
  • Manage Sites: Allows you to publish/edit/delete the site.
  • Support: Opens online help files for EasySiteWizard Pro 8.3 in a new window.
  • Feedback: This option allows you to send a feedback concerning EasySiteWizard Pro 8.3
  • Tutorial: A flash demo will be presented to the user upon how to use the application.

ESW Main Menu.PNG

Create New Site

  1. Click the “Create New Site” button.
  2. You will find the two options: Landing Page which allows you creating a basic site with a single page and Multi-page site which allows you to create site with multiple pages and options.

Website type.PNG

Landing Page

A landing page is a single web page also known as a lead capture page.

Designs

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

1.Scroll through the list of thumbnails to the left.

Design.PNG

2.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. 3.When ready click on Apply and a checkmark will be overlaid on top, indicating that the template has been selected.

Design Options.PNG

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.

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

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

Site Details

Fill out the following site details :

  • Company Name: the name of your company as it will be shown on your website's main page
  • Company description: insert your company’s description
  • Site URL: this is the URL where people will be able to view your site when it is published
  • Publish To (directory): if you do not want to publish your webpage to the main directory (e.g. http://www.mydomain.com/), you can specify a subdirectory, such as http://www.mydomain.com/anotherdirectory/
  • Enable syndication (RSS 2.0, Atom 1.0): enabling this option will allow people to know when you have updated your website via RSS
  • Phone number: you should indicate your contact phone number.
  • Toll free number: you should indicate your toll free number
  • Address: the address at which your company locates
  • City: the city where your company locates
  • State/Province: state or province where your company locates
  • ZIP / Postal Code: you should indicate the ZIP / Postal Code of the region your company locates at.
  • Email address: you should indicate the email address of the site’s owner.
  • Contact Us Form: select whether your site will contain “Contact Us Form” or not.
  • Google Map: select whether your site will contain the link to Google Map indicating your company’s location or not.

Site Details.png

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.

Moving Objects within your Site

  1. Left click and hold the object (i.e. Image, Text Block) you wish to move.
  2. A grid overlay will appear, in order to assist you in aligning the object you are moving.
  3. Move your mouse to the desired location.
  4. Unclick.

[File:Moveobjects.png]]

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 manually 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.

Wizard Completed

When you are done adding your changes to your website press the Next button to save changes. This screen offers you the following options:

  • Preview your website;
  • Publish your website (if you would like to make your website publicly available);
  • Go to Manage Sites;
  • Go back to Editor.

To return to Main Menu press the Cancel button

Multi Page Site

To create the new site in Multi-page site take the following steps.

Design

Select the design you would like to use as the starting point for your website.

Design.PNG

Then click on the one you want to use. The design will enlarge, and you will then be able to select the design or select another design.

Previewtemplate.png

Favourites

Using the Add to Favorites button you can add a template to your "Favorites"; this is an easy way to organize and choose between a smaller selection of templates that you like. You will be able to view Favorites section by clicking the sign. Some templates are available in more than one color scheme. Click the color buttons to select a general color scheme.

Search Function

You can also search for a template within the selected design category by entering a keyword or the corresponding template ID. You may also search for a template within all the design categories by selecting the all designs option from the drop down menu.

Site Details

Fill out the following details for your website:

  • Site Title: This is the name of your website, as it will appear on your website's main page.
  • Tagline: This is a secondary text line which appears immediately underneath the website title. This section can be left blank.
  • Site URL: This is the URL where people will be able to view your site when it is published.
  • Publish To (directory): If you do not want to publish your webpage to the main directory (e.g. http://www.mydomain.com/), you can specify a subdirectory, e.g. http://www.mydomain.com/anotherdirectory/
  • Enable syndication (RSS 2.0, Atom 1.0): Enabling this option will allow people to know when you have updated your website via RSS.


[File:Multidetails.png]]

Site Menu

Having selected the design you want to work with press “Apply” to create your site menu. The following screen will appear:

Site map.PNG

Menu Buttons

Main buttons are utilized for the initial topic or subject of the site. Generally used as a focal point of what items are most important in the navigation (i.e. Home, Contact Us, Furniture etc.)

Subcategory Buttons

As the navigation branches off subcategories become available. This allows you to go into detail about the particular topic or subject. (i.e. Main Category: Furniture => Subcategory: Chairs, Couches, Tables, etc.)

Creating a Main Category/Subcategory Button

  1. Click “Menu editor”
  2. Select the button
  3. In Button Properties, label the button.

Button Properties.png

4.Label Hover Tooltip 5.Select “Link to” and click Page (drop down menu will appear to select pages within your site)

Linkto.png

URL, Blog, Store, Chat, Email, and Schedule 6. Check “Open in a new Window” if you wish the button to open a new browser. 7. Click “Apply”/“Cancel” to accept/dismiss changes.

Deleting a Button

  1. Click on the Button you wish to delete
  2. Click “Delete this button.”

Edit Your Site

Please see the edit your site section for the landing page.

Manage Sites

This section contains the sites you will be able to work with. If you would like to create a new site, click the Create New Site button.

Mange Sites.png

Under this section you will be able to edit site details, choose new designs for your site, close/delete site.

Mange sites details.png

Mentioned features will be described below, under the Editor Section.

If you would like to create a new site, click the button. To edit your site, click the button.


Editor Section

The Editor Section allows you to edit, manage and modify the design you have selected. Editor allows you to “Save page”, “Add a text block”, “Add a table”, “Add an image”, “Redo/Undo” actions, “Create a hyperlink to another page or site”, “Create a bulleted list”, “Create a heading”, “Check spelling,” “Create a web form” and add a Google Map to your page.

Site Menu Editor

This allows you to set properties for individual buttons of the site (font, background, button border, padding of text inside the button, button margin). A Preview feature was also added to the Site Menu Editor, so you can see the changes of properties on the fly without having to exit the Menu Editor.

Edit site menu.png

Preview panel

Site buttons preview is added to easily review changes made without exiting Site Menu Editor every time properties are changed.

The Apply settings to all buttons feature will be checked by default. It allows you to apply same parameters for all buttons at once. If unchecked – buttons can be configured separately.

  1. Select the Apply settings to all buttons checkbox in order to apply all the changes to all buttons.
  2. Click Apply in order to save the changes.

Buttons dimensions option

Option to set button dimensions. You can modify button height and width. Both are set in pixels. 1. Enter the number of pixels desired in the provided boxes for both the height and the width of a button. 2. Click “Apply” in order to save the changes.

Button Border option

Option to set border dimensions to a particular site button. Pressing the respective button calls a pop-up menu. User can configure three parameters of button border – style, thickness and color.

  1. In order to set the border of a button click the button located next to the “Button Border” section.
  2. A border button menu pop up will open where you can set the border style, thickness and color of the button. While setting these parameters you will be able to see a border preview on the right side of the pop-up menu. Use the drop down menus to select a border style and thickness. For choosing a color click on color picker and a color palette will open from where you will be able to choose a color for the button border.

3. Click Apply/Cancel to save/dismiss all the changes.

Interior Padding option

Option to set interior padding of the button. Pressing the respective button calls a pop-up menu. You can adjust top, bottom, left and right parameters.

  1. In order to set the interior padding of a button click the button located next to the Interior Padding section.
  2. The Interior padding menu pop up will open where you can set/adjust the top, left, bottom and right parameters of a button.
  3. Click Apply/Cancel to save/dismiss all the changes.

Button Margin option

Option to set margin of the button. Pressing the respective button calls a pop-up menu. You can adjust top, bottom, left and right parameters.

  1. In order to set the margins of a button click the button located next to the “Button Margin” section.
  2. The Button Margin menu pop up will open where you can set/adjust the top, left, bottom and right margins of a button.
  3. Click Apply/Cancel to save/dismiss all the changes.

How to save your website

Saving your work is recommended throughout your session of EasySiteWizard Pro Please take the following steps to save your website changes.

  1. Click the save button.
  2. You will be prompted with a drop down menu with four saving options: “save page”, “restore from auto save”, “restore from backup” and “save as template”.
  3. It is recommended that you save every page that is modified.

Please note:

  • When switching from one page to the next, EasySiteWizard Pro will automatically save work done. You have the ability to switch between saved sites.
  • You can review roll back/ roll forward changes per web page (every version is saved with date/time so that can be selected) - There is a history kept of each save. When you save your website site (this is the current save the one that would be published). The previous save would then be put in a directory, as a backup, which could then be restored.


Master Page Enhancements

This feature implies the inability to edit master page elements when on ordinary pages (Home, News, etc.), hence site title, tag line, menu editor are only editable on Master Page. The Master Page elements are dimmed when viewing ordinary pages. Choose create a New Site within the “Sites” section.

  1. Select a design to be used for your website form within the “Designs” section.
  2. When you proceed to the “Editor” section you will be prompted with a message asking whether you would like to configure Master Page.

Master Page.png

You should note that all changes applied to your master page will be visible when previewing or publishing your final site. 3.After clicking “Yes” you will be able to start editing your Master Page.


Within the Master page the following elements can be edited: a)Text blocks and images

You may insert images and text blocks within the Master Page. Please note that the images and text blocks inserted on the Master Page can only be edited within the Master Page.

b)Site Menu Editor

The position of the Site Menu Editor can be changed on the Master Page only. When in ordinary pages, Site Menu Editor can be accessed (new pages can be added, existing ones – deleted), but its position is locked.

c)Site title and tag line

If the site is build off the Master Page, site title and tag line are considered as Master Page elements and are not editable when in ordinary pages.

4.Please note that after finalizing the editing of the Master Page and when clicking on any other page within the site (example: the user may click on Products or Contact page to start editing) the master page elements will appear dimmed to enable the user to distinguish the master page elements. This allows the user to view the location of the Master Page elements, and position other elements accordingly. 5. In order to review the site page without dimmed elements click on Preview or Publish.

You will be able to see the final site including both Master Page elements as well as ordinary page elements. If you would like to return to edit the Master page elements:

  1. Click on the Save button.
  2. From the extended menu select Edit Master Page.

You will be returned to the Master Page where you may continue to edit the elements within the Master Page.


Manage Pages

Manage Pages allows you to create, rename and duplicate pages. This section allows you to structure and organize the naming conventions you wish to utilize on your site.

Manage Pages.png

Create New Page

  1. Fill in the name of the page
  2. Enter a page title. The page title should be related and relevant to your page content. The page title appears on top of your browser and is a significant element in the search engine with regards to rankings.
  3. Enter a summary of your new page and try to include relevant keywords as some search engines will use this summary as part of the website results. This summary will not be visible on your page, its purpose being to provide a clear definition of what your page contains with a significant relation to the search engine.
  4. Enter several keywords that you would like your page to be found by. These keywords can also be phrases containing words found on your main site as well as on this newly created page. Please make sure that the keywords chosen are to be found in your page content as these keywords will be used by search engines to find your page.
  5. Click Apply to create the new page.

Create new page.png

How to Delete a Page

  1. Select from Existing Pages the name of the page you wish to delete.
  2. Click Delete Page button.

How to Duplicate a Page

  1. Select from Existing Pages the name of the page you wish to duplicate.
  2. Click Duplicate page.

How to Edit a Page

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

Complete Your Edit

When you are finished managing your pages click Close.

Adding or Editing a Text Block

Adding texts allows additional customization to your site. Many of the text blocks that exist in each of the designs are placeholders that require editing.

Adding a Text Block

  1. Click the text icon and a text block will appear.
  2. In order to help you find the initial location of the new textbox, the border around the new textbox will flash for a moment after it appears.
  3. Type/Paste text into the text block.
  4. Once you are finished adding text, click outside of the text block within the Page.

Editing a Text Block

  1. Double left click on the text; a grayed boxed area will appear on the text block.
  2. You will be able to edit text once the outline is visible
  3. Type/Paste text into the text block.
  4. Once you are finished adding text, click somewhere on the page outside of the Text Block.

Edit Text box.png

How to Resize a Text Block

  1. Double left click on the text block.
  2. Mouse over the smaller boxes for the direction you wish to increase the size of the text block.
  3. Click and hold your mouse on the small box.
  4. Move the mouse in the direction you wish to resize the text block.

How to Delete a Text Block

  1. Double left click on the text block.
  2. Click X on the bottom right corner.
  3. The text block should now be removed

How to Duplicate a Text Block

  1. Double left click on the text block you wish to duplicate.
  2. Click on located on the bottom right corner.
  3. The text block should now be duplicated.
  4. Click and hold the duplicate text block to the desired location
  5. Unclick.

How to Move a Text Block

  1. Put your mouse over the text you wish to move
  2. Click and hold the mouse.
  3. Move your mouse to the location where you wish to place your text.
  4. Unclick

Layer Control

Layers are a common method for determining which objects should cover (or obscure) another object. Layers determine if objects should overlap (or one is directly on top of the other). Objects such as text fields and images which are on a "higher" layer can 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 can 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.

Add a table

You can add a table by simply clicking on the “add table” button within the Editor Toolbar. When you click on “Add table” icon the following table editor pop up will be displayed:

Add a table.png

Here you can set the number of columns and rows of your table as well as the height, width and border type by entering the values in the provided boxes. You may set up the border of your table by clicking on the button next to the “Border” section. The following table border editor will be displayed:

Table border.png

  1. Choose the style of your border from the drop down menu.
  2. Choose your thickness from the drop down menu.
  3. Choose a color by clicking on the button next to the color section.
  4. Click Apply/Cancel to save/dismiss the changes made.

Please note: You will be able to see a preview of your border on the same page under the Border Preview section. Please note: Once you have created your table by double clicking on it you will be able to change the table settings.

Adding an Image

You can build your own library of images by uploading the image files; and or utilize the free image library to place additional images into your site. When you click on the icon a menu pops up on the left side of the screen, this allows you to add additional images to your site.

Add an image.png

There are 3 Types of Libraries:

  1. Your library.
  2. Free library
  3. Template images


How to Upload an Image to “Your library”

  1. Click on the top menu picture icon to add an image.
  2. Click Upload button. New window will appear allowing you to browse your local computer for the images you would like to put on your site.
  3. Click “Browse”.
  4. Search for image on your computer.
  5. Check off “Optimize” if you wish to scale down your image size and keep the aspect ratio.
  6. Click “Upload.” Once your image is uploaded it will be located in a panel underneath “Upload” to view a larger version of your image, click on the magnifying glass .
  7. With your mouse, click and hold the image you wish to insert into your webpage.
  8. Move your mouse to the desired location of the image.
  9. Unclick.
  10. Click the on the bottom right corner to close Images.

How to Use the Free library

Free library houses approximately 10,000 stock images available for you to use on your site. 1. Click on the Free library tab. 2. Select the category best suited for you site (i.e. Nature). \

a. You can search through the entire image library by keyword by selecting "All Categories" and conducting a keyword search. b. You can refine your search by selecting a specific category and then searching by keyword.

3.Click and Hold the image you wish to place onto your site.

4.Move your mouse to the desired location. Unclick.


How to Delete an Image from your Site

  1. Double left click the Image.
  2. Click on the Red X

How to Resize an Image from “Your library” or “Free library”

  1. Double left click the image.
  2. Mouse over the smaller boxes for the direction you wish to increase the size of the Image.
  3. Click and hold your mouse on the small box
  4. Move the mouse in the direction you wish to resize the Image.

Please note, that you cannot resize any of the default images provided by the design.

Image Properties

Image Editor allows you to modify images from “Your library” or “Free library.”

Adding Image Properties

  1. Double click on the image you wish to modify.
  2. Click Image Properties.
  3. The image properties screen will pop up.

In the image properties interface, you can add a clickable link (URL) to the image, as well as alt text which will be displayed if the user's browser is not set to automatically load images. If you add a link, you can also specify that the link should open in a new window by placing a checkmark beside "open in a new window".

Editing Images

Modifying an image with Image Editor

  1. Double click on the image you wish to modify.
  2. Click Edit.
  3. The image editor screen will pop up.

Imageeditor.png

The Image Editor allows you to modify images you have uploaded or selected from the library.

Undo/Redo

You can undo/redo as many steps as you wish based on the current section and actions done per session.

  1. Undo

Click on the undo icon to undo your last action you have done.

  1. Redo

Click on to redo icon to redo your last action you have done.

Modifying Text

  1. Double left click on the text block; a boxed grayed area will appear on the Text Block.
  2. You will be able to edit text once the button is visible. Click this button in order to edit the text.
  3. Highlight the text you wish to Bold, Italicize, and or Underline.
  4. Once you are finished modifying text, click somewhere on the page outside of the text block.

Modifying Font Style, Colors, and Text Size

  1. Double left click on the text block you wish to modify.
  2. Highlight the text you wish to modify.
  3. Click the icon.
  4. A screen will pop up allowing you to Select Colors.
  5. Use the bar in order to select the Font Style and Font Size.


Create a Hyperlink to another Page or Site

Hyperlinks allow you to refer to pages that exist within your website and sites outside of your own domain.

  1. Highlight the text you wish to link from.
  2. Click on to insert a link onto your page.

External Website

1. Type in the desired URL.

Hyperlink.png

Click Apply to insert the link on your page.

Internal page on my website

  1. Choose an existing page on your website from the drop down menu.
  2. Click Apply to insert the chosen link.

Document or other file

  1. You may also upload a file by clicking on “Browse”. The pop up will prompt you to localize the file on your computer.
  2. Once you have localized the file you wish to upload click on Apply.

Send Email

  1. Enter an email address.
  2. Click on Apply to insert the link.

Create a Bulleted Lists

Bulleted lists help organize text when sentences or paragraphs are not required. There are two ways to create bulleted lists. You can either use existing text to create you lists, or you can create a fresh list by creating a new text block.

Creating a Bulleted List with Existing Text

  1. Double left click an existing text block
  2. Highlight the text you wish to put in your bulleted list
  3. Click the bullet icon.

Using a New Text Block to Create a Bulleted List

  1. Create a new text block
  2. Click bullet icon.
  3. A bullet will appear; type in your text
  4. Hit the “Enter” key on your keyboard to set your next bullet
  5. Repeat steps 3-4 till bulleted list is complete

Create a Heading

Headings are primarily used as titles to indicate the meaning of a section of text. There are two ways to create headings. You can use an existing line of text, or create a fresh new heading.

Using an Existing Line of Text to Create a Heading

  1. Double left click an existing Text Block.
  2. Highlight the Text you wish to make into a Heading.
  3. Click

Creating a New Heading

  1. Create a new text block.
  2. Click
  3. Type in the text you wish to use for your heading.
  4. Once you satisfied with your Heading, Click Enter to begin a new line.

Check Spelling

Spell check is available to verify the spelling within each text block.

How to Check Spelling within a Text Block

  1. Double left click on the text block you wish to check spelling for.
  2. Click on the “Check spelling” tool in the Editor Toolbar.
  3. Words which appear to be spelled incorrectly are outlined in red. Click on the red outline and select from the option list for the correct word. It will automatically be corrected.

The incorrect word is outlined in red. Drop down menu allows you to select from a list of possible words.

Adding Widget to your Page

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

Google Maps

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

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

a.Register for a Free API Key. b.An API Key must be created in order for Google to allow linking to their maps.

  1. Enter the Address you wish to use for the map.
  2. Select map size (i.e. Small, Medium, Large)

Once you are satisfied with the location of your map, click Apply

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 the “X.”


Superpages.com Maps

  1. Enter the Address you wish to use for the map.
  2. Select map size (i.e. Small, Medium, Large)
  3. Once you are satisfied with the location of your map, click “Apply”.

ACCA RSS Feed

Choose the width and height and click on “Apply”.

Analog Clock

Analog clock.png

Choose the width and height and click on Apply.

Digital Clock

Digital.png

Choose the width and height and click on Apply.

Twitter

Twitter.png

Configure the look and feel of twitter on your page by choosing the desired design such as background and text color.

Countdown

With this widget you can set up a countdown to a specific date.

  1. Choose the background and text color and size from the available options.
  2. Enter the specific date on which you should be notified.
  3. Enter the text which should be displayed when notified on the specified date.

Visitor Counter

You can customize the counter's font, size and color to suit the design of your site. The hit counter provides you with a very basic measure of your site's traffic.

YouTube

Insert a YouTube video on your page by providing the relevant URL.

Youtube.png

Poll

  1. Enter a question to be displayed on your page.
  2. Click the “add” button to enter a new option.
  3. Choose the font color and width.
  4. Click “Apply” to display it on your page.

RSS Feed

  1. Enter a URL.
  2. Choose the width, height and style.
  3. Click “Apply” to save the changes.

Facebook

Facebook widget.png

  1. Press “Like button” to set the widget’s configuration;
  2. The screen appears that offers options to input detailed settings that will be used to create the widget
  3. Fill in the offered fields to create a widget:

URL to Like: Insert the URL to like; Layout Style: Determines size and amount of social context next to the button. Show Faces: Check the box if you want the profile pictures to be shown below the button. Width: Set the width of the plugin, in pixels. Verb to display: Select the verb you want to be displayed near the button Font: Select the font of the plugin Color Scheme: Select the color scheme of the plugin.

  1. When all the fields are filled in press “Apply” to save the changes; Press “Cancel” to return to the Editor.
  2. At the site page you will see the widget created.

Preview

Preview launches a new browser which allows you to view the site prior to publishing. To preview the site, click on “Preview.”

Publish

Once you are satisfied with the content you have created with EasySiteWizard Pro, you may wish to publish the site.

Publishing Your Site

  1. Click to publish your site.
  2. A prompt will appear, indicating that any existing content will be overwritten.
  3. Check the URL location (i.e. http://screenshots.company.com).
  4. Click “Yes”/“No” to accept/dismiss publishing the site
  5. A prompt will appear notifying you that your site has been published to specified URL.

Publish.png

Tutorial

Clicking on this button you will be presented with a flash demo on how to use EasySiteWizard application.

Click tutorial to see a flash demo of the particular heading, icons and buttons within the document.