Once you have created your page you will obviously need to add some text. has a WYSIWYG Editor that allows you to type/paste in text and format it by clicking on icon buttons.
Tips before you start!There are three crucial things to remember when working with an online WYSIWYG Editor:
- Save your work often! automatically logs you out after 20 minutes of inactivity. So if you are halfway through adding some text and get called away from your desk you can loose all your changes. Also, if you loose Internet connection you can also loose your changes.
- Don’t copy and past from MS Word. Word tries to be clever and adds in its own HTML code when you copy text written in it. This can lead to unexpected results that are hard for you to fix. If you have MS Word documents, its better to copy any text from Word into Notepad or another plain-text editor first, then copy it into the Editor. Alternatively you can paste straight into the ‘Source’ area of the Editor but you will loose all your formatting and have to add it in again. We’ll talk more about this later.
- What you see in the WYSIWIG might not be what it looks like on the site. Most website templates available through contain styles that get applied to text and images when it appears on the Internet. For instance a featured text colour or a border around an image. The Editor might not be able to display these. Save and Preview your page to see what it will look like.
If you are used to hand coding in HTML you can use the plain text Source feature of our editor but for most users the WYSIWYG Editor tool will allow you to easily manage a professional website.
Getting Started
To start editing a page, go to Site Management > Manage Pages.
Either add a new page by clicking on the Add a Page 
button or edit an existing page by clicking on the page name corresponding to that page.
This takes you to the Add/Edit Page facility. Scroll down to Main Content under the Page Content section. This is where the main content of your page is placed.
Adding Text
The Main Content section of the Add/Edit Page facility contains a WYSIWYG (What You See Is What You Get) Editor. A WYSIWYG Editor allows you to add and format content (text, images, tables, links etc) on your website without needing to know any HTML or programming. Its just like using a word processor like MS Word or a modern e-mail program.
Like to know more?For more information on using the WYSIWYG Editor please select one of the following links:
To use the WYSIWYG, simply click in the main text area. Start typing as you would in any other word processor.
Use the Enter button on your keyboard to create a new paragraph. To start a new line, but not a new paragraph use Shift + Enter. To apply styles like Bold or HTML features like links, highlight the words that you wish to format and click the appropriate icon button. The results will appear immediately inside the Text Editing Area so you can see your changes.
As well as clicking the buttons in the WYSIWYG Editor to add styles to your font, you can also use some of the shortcut keys you might already be familiar with from using other programs. For instance:
- CTRL+V will paste in any text you have copied.
- CTRL+Z will undo your last change.
- CTRL+A selects all the text, images etc in the text editor area.
Not all of the common shortcut keys will work. Pressing CTRL+B while you have text highlighted WILL NOT turn text bold in most browsers. This is because the browser you are using, for instance Mozilla Firefox, uses CTRL+B to do something else. In general, shortcut keys will work so long as the browser you are using doesn’t already use them to do something else.
Creating a Heading
To create a heading, type your heading text into the content area and highlight it. With the text highlighted, click on the Format drop down box and select a predefined heading style from the list. Alternatively you can manually set the size, font weight (bold etc) and colour using the WYSIWYG Editor.
Example: Creating a headingIn the example below I want to turn the text 'Sample Heading' into a heading where the font is large and bold. In order to make these changes I first have to highlight the text 'Sample Heading'.
Generally, the heading at the top of a web page is set to be something called Heading 1 <H1>. This is a predefined HTML style where the font is large and bold. The exact size of the font will depend on your template. Most templates within have additional styles applied to <H1>. For instance on your template, <H1> might be set to be same colour that you use in your logo, bold and size 36 font. In another template these settings will be completely different.
For secondary headings on pages, Heading 2 is generally used. For any sub headings under that, Heading 3 and so on.
You can however set your headings to be anything you want using the font colour, size and style options in the WYSIWYG Editor. If the preset styles that come with your template for Heading 1/2/3 etc are not to your liking, they can be changed in the Template Editor (if you know what your doing!). If you don't know how to do this please contact us to discuss customising your template.
Example: Creating a heading CONTINUEDSince this is the major heading for our page I want to use Heading 1. To set Sample Header to be a Heading 1, simply click on the Format dropdown box with the text still highlighted and select Heading 1. Sample Header has now changed to be large and bold. As you can see from the drop down list above, there a several other predefined text-formatting options such as Heading 2, Heading 3.
Don’t worry if the font looks slightly different from the font used on your website. The WYSIWYG Editor sometimes displays things a little differently. Spacing between lines and font colours etc are generally shown slightly differently in the WYSIWYG to how they are shown on your website. To see what your font styles will look like on your site click on Save & Preview.
Using different fonts on the Internet
Using the WYSIWIG Editor you can use any a large range of fonts on your website. But its often pointless to do so. You can use any font on your computer but if the person viewing your site doesn’t have the same font installed, their computer will use a default font instead.
If you do want to change the font, stick to a standard font if possible, for example most computers have Verdana, Arial, Helvetica and to a lesser extent Times New Roman. If the font you have chosen isn’t on a viewers computer, then Verdana, Arial, or Helvetica will be automatically substituted. Changing the font size, colour and style (italic, bold etc) is a much better way to individualise your website.
I really want to use a particular font, is it possible?
If you have a special font that you must use, for instance one used for all your corporate letterheads, it is possible to use custom programming so that almost anyone viewing your website will be able to see it. This is an additional feature that you will be charged a once off fee for. Unless you can provide us with a copy of the font, you may also be charged for the cost of purchasing the font. Where possible will try to find the cheapest possible price for the font but most fonts cost between $40-$200 US to purchase. Please contact [email protected] for further information.
Changing Font Size
With your text highlighted, you can set the size by clicking on Size in the Editor and selecting the required size from the drop down list.
Changing Font Colour
With your text highlighted, change the colour by clicking on the Text Colour icon in the Editor and selecting your colour. You can use the swatches provided or select a custom colour by clicking on More Colors .
Example: Changing font colourIn this example I want to change the colour of the text ‘Then start typing’ to be bright red.
- Highlight the text.
- Click on the
icon.
- Select the required colour from the list provided. In this case red.
- The text ‘Then start typing.’ will now appear in red.
Making text Bold, Italic or Underlined
To set text to be bold, highlight the required text and click on the 
icon. Your text will now be bold. Similarly for italicised text or underlined, highlight the text and click on either the 
icon for italicised text or the 
icon for underlined text. You can use combinations of these - for instance you can make text be bold and italicised. To do this, highlight the text and click on the bold icon. With the text still highlighted click on the italics icon.
Creating a list
If you have some text that needs to appear in a bulleted or number list, simply type the text into the text area, put each different list item on a new line and then highlight the text. Click on the 
icon to create a numbered list or the 
icon to create a bulleted list.
Example: Creating a Bullet ListIn the below example I have added some text that I would like to turn into a bullet list. Each list item is on a new line (hit Enter). I highlight the 3 list items.
With the text still highlighted, click the
After I have created the list I decide that I would like a fourth list item, List Item 4. Simply place your cursor at the end of List Item 3 and hit Enter. A new bullet will appear and you can type in the text for your new list item.
To end the list just hit Enter twice or click on the
If you have text in a bulleted list that you no longer want as a list, simply highlight the text and click the bullet icon again. The list will disappear but your text will remain.
Pasting Text in the WYSIWYG Editor
If you already have your text typed out electronically you can just copy and paste it into the WYSIWYG Editor rather than having to type it again.
Copy & Paste a Simple Document:
If you are wanting to copy across just straight text, with no formatting or only basic formatting like bold and text sizes, simply highlight the text and copy it. Then click in the main Text Area in the WYSIWYG and press Ctrl+V (Windows) or Command+V (Mac). You will lose some of your formatting and will need to use the Editor to add it in again but that is much easier than typing the whole document from scratch!
Copy & Paste a Complex Document:
Text with formatting can be pasted into the Editor using the icon. Simply highlight the text in your document, copy it and click on the icon in the WYSIWYG Editor. Depending on your browser, the text will either appear straight away in the text area or a pop-up window will appear asking you to paste the text into a box in that window. Once in the text area your text may look different to the original word document. Edit it as required and use the Save & Preview button to view your text.
Can I copy/paste directly from MS Word?Technically yes you can. But Word adds in its own HTML code when you cut and paste from word. But sometimes Word doesn’t do a very good job. This can lead to unexpected results that are potentially difficult for you to fix. If you just can’t get your text to do what you want it to do, the simplest solution is to delete all the text you have pasted and start again.
Its better to copy text from Word into Notepad or another plain-text editor first, then copy it into the WYSIWYG Editor. If you do copy into Notepad, remove any linebreaks before pasting into the Editor.
If you do have to paste from Word, use the button. This will remove some of your formatting and you’ll need to add it back in again.
Alternatively, you can paste straight into the Source area of the Editor but you will loose all your formatting, even paragraphs and have to add it all in again. To do this, click on the Source button at the top of the WYSIWIG Editor. This takes you into the HTML editing area of the WYSIWYG. Use Ctrl+V (Cmd+V for Mac) to paste your text into this area. If you know HTML, add your paragraphs and formatting back into your text. If you don’t know HTML, just click the Source button again. Your text will be one long string of words, which you can fix by hitting return at the places you wish to create paragraphs, etc.
