3. Web Page Editor

You can edit the content of all the pages on your website using the SiteWizard Web Page Editor. To access this section, click on the 'Page Editor' icon on the top CMS menu bar. 

Figure 3.0.1 - Click the 'Page Editor' menu item to access the Web Page Editor

3.1 Select A Page To Edit

When you click through to the Page Editor section of the SiteWizard CMS, you will be presented with a list of the pages on your website. You can select a page to edit by clicking the corresponding 'Edit Page' button. 

Figure 3.1.1 - The 'Select A Page To Edit' panel in the Sitewizard CMS
If you have a large number of pages on your website, it can be handy to use some of the sorting features available in this panel. 
 

Number of Pages to Show

In the top left of the panel is a drop-down selection menu to change the number of pages visible in the list at once. By default, 10 pages are visible. You can change this to 25, 50 or 100 pages.

Figure 3.1.2 - Select the number of pages to show

If your site contains more pages than are currently visible, your remaning pages can be accessed using the 'Prev' and 'Next' buttons at the bottom right of the panel, or the numbered buttons in between.

Figure 3.1.3 - Access more pages than are visible in the current list 

Reorder Page List

By default, your website pages are listed by their ID number. You can change the order of the list to be alphabetical by alternate file name or by page title, by clicking on the corresponding column heading. Clicking the heading again reverses the order.

Figure 3.1.4 - The page list has been sorted alphabetically by 'Page Title'.
Please Note: If you have unused pages you have not yet named, they will appear in the list under their default names. So, when sorting by page title, 'Page 10', 'Page 11', etc will appear in the alphabetical 'P' position. When sorting by file name, the spare pages will appear first - as they have no alternate file name and thus appear before 'A' in the list. 

Search for pages

If you have a large number of pages on your site, you can search for them using the search box in the top right. The panel will display pages which match your search term in the page title or file name. 

Figure 3.1.5 - A search for the word 'contact' filters the displayed pages to only those which
match the searched word, in this case the 'Contact Us' page.

Adding & Naming Pages

For information on how to rename pages and how to add pages, see Section 4 - Adding & Naming Pages

3.2 The Editing Interface

When you click through to edit a page on your website, you will be presented with the editing interface. 

Figure 3.2.1 - The SiteWizard Page Editing Interface.

Elements of the Editor Interface

Edit Meta Tags & Title
At the top of the interface is a button to 'Edit Meta Tags & Title'. For information on this, see section 3.12 Editing Meta Tag Information.

The WYSIWYG Editor
The largest and most important part of the editing interface is the WYSIWYG editor (pronounced 'wiz-ee-wig'). The name stands for 'What You See Is What You Get'. This editor is used to edit the content of your web page. The sections following provide detailed guidance on using this editor for managing your website content.

Save Changes & Cancel Changes
At the bottom of the interface are buttons to either save or cancel the changes you have made. Be careful to save your changes regularly by clicking the 'Save Shanges' button, to ensure you do not loose any work if there is a problem. If you click 'Cancel Changes', you will be asked to confirm that you definitely wish to cancel - as this will abandon any changes you have made. 

3.3 The WYSIWYG Editor

The WYSIWYG content area is where the content of your web page is loaded for you to edit. Using the WYSIWYG editor, you can edit the text or add to it, and change the way it looks. You can also add images, tables of data, and other elements to your web page. 

The WYSIWYG Toolbar

The WYSIWYG Toolbar provides a simple, easy way for you to do most editing on your website. The buttons on the toolbar may appear familiar to you. This is because some of the editing funtionality is the same as those found in most word processors (for example, buttons for making text bold or italic).

Below is a description of the function of each of the buttons on the toolbar.

Icon What It Does
View or edit document source code (for advanced users). Save the changes you've made to the page.
This performs the same action as the 'Save Changes' button beneath the WYSIWYG editor.
Remove the highlighted text. Cut the selected content
The content is added to your computer's clipboard momory and is removed from the page.
Copy the highlighted text. Copy the selected content
The content is added to your computer's clipboard momory but remains on the page.
Paste the text you copied (with or without formatting). Paste With Formatting - Paste the content from your computer's clipboard memory with the original formatting.
Be careful with this! Formatting differences between text editors can cause your site layout to become inconsistent.
See Section 3.5 Adding Text To You Page for more information.
Copy content from Microsoft Word, then paste it into the HTML editor using the pop-up accessed from this icon. Paste With No Formatting - Paste the content from your computer's clipboard memory.
Recommended! This method does not import other editors' formatting and allows for consistent formatting in the SiteWizard WYSIWYG editor. 
See Section 3.5 Adding Text To You Page for more information.
Print the HTML page. Print the content of your web page.
Undo or redo the most recent action. Undo or Redo the most recent action.
Find a word or phrase within the text of the HTML page. Find a word or phrase within the text of the web page.
Find and replace a word or phrase within the text. Find and replace a word or phrase within the text of the web page.
Select all of the text in the HTML page (usually used before copy or cut or to apply a style or format to the whole page). Select all of the content in the page.
Remove the formatting from highlighted text. Remove all formatting from the selected text.
Very handy if you've accidently applied formatting to text and you are having trouble setting it back to normal!
Insert symbols & special characters (trademarks, currency, etc.). Insert symbols & special characters - insert trademarks, currency symbols, foreign characters, etc.
Insert page break. Only impacts printed version. Insert page break for printing. This forces a page break when the website is printed.
This can be handy to avoid important content blocks being split when printed.  This only impacts printed version.
Content Templates - Use this button to add template layouts for your content to help with page layout.
See section 3.14 Content Templates for more information.
Insert a default Enquiry Form. Insert a default Contact Form.
See Section 3.11 Adding a contact form to your site for more information.
Add or remove hyperlink from highlighted text. Also used to manage file uploads and links to files on the web server.Add or remove hyperlink from highlighted text. Also used to manage file uploads and links to files on the web server. Add or remove a hyperlink from selected text.
This creates a clickable link to another web page on your site or another site. This can also be used insert links to email addresses or downloadable files.
See Section 3.6 Inserting Links for more information.
Add an anchor to a page. Add an anchor to a page. An anchor can be linked to from elsewhere on the page or from another page. 
See Section 3.7 Inserting Anchors for more information.
Upload or insert your own or other's images into the HTML page. Insert an image into your web page.
See Section 3.9 Inserting and Managing Images for more information.
Upload or insert your own or other's images into the HTML page. Insert a Flash element into your web page.
See Section 3.10 Inserting a Flash Element for more information.
Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set. Insert a table into your web page.
See Section 3.8 Tables for more information.
Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set. Show blocks in your content.
This displays an outline of the structural blocks which make up your content, for example paragraphs and headings. This button is useful for more advanced users. 
Bold, italic, underscore or strikethrough highlighted text. Bold, italic and underline - Formatting tools to add emphasis to your text.
Be Careful! Underlined text often looks like a hyperlink - underlining text which is not a link can be confusing fo your users.
Superscript or subscript the highlighted text. Superscript or subscript the selected text.
Add bullets to highlighted text lines. Numbered Lists and Bulleted Lists - convert the selected content into an item in a list with either bullet points or numbers.
Increase or decrease the highlighted text's indentation. Indent the selected text, or remove the indentation. 
Increase or decrease the highlighted text's indentation. Blockquote - Inserts the selected content into a blockquote element.
Alignment of highlighted text (left, centred, right, justified). Align selected text left, centred, right, or justified.
Change the colour of the highlighted text. Change the text colour of the selected text.
Change the background colour behind the highlighted text. Change the background colour behind the selected text.
dfhzd Styles & formatting determine the appearance of web page text.
You may also use the drop-down boxes to style specific elements (such as headings), or set overrides for font face, font size, etc.
See Section 3.4 Editing Text On Your Page for more information.
Swap from WYSIWYG mode to HTML mode. Switch to HTML mode from WYSIWYG mode.
This is for advanced users to edit the HTML code which makes up your web page content. 
Figure 3.2.2 - An overview of the icons used in the SiteWizard Page Editor.
^ Back To TopGo to next section >