3.4 Adding & Editing Text On Your Page

When you open the Editing Interface, you will see that the existing content of your page is loaded into the WYSIWYG editor content area. From here, you can edit or add to the text on your page. 

Typing Text Into The Editor

The easiest way to manage your text content is to type into the WYSIWYG editor, just as you would in a regular word processing program.

Figure 3.4.1 Type text in the content area of the WYSIWYG editor, or edit existing text

To Type New Text:
Click to position your cursor where you wish your new text to appear, and begin typing as normal. 

To Delete Text:
Click at the end of the text, and press the 'backspace' key on your computer keyboard until all unwanted text is deleted. Alternatively, to delete a large block of text, click and hold down your mouse at the beginning of the text, and drag the cursor to the end before releasing - this selects the text. Then press the 'backspace' key to delete it. 

To Edit Existing Text:
Position your cursor over the text in the position you want to edit, and click or double-click to begin typing. (double clicking is sometimes required on positioned content, for example side boxes and captions).

Change Layout and Style of your Text
See Section 3.5 - Styling Text On Your Page

Pasting New Text Into The Editor

A common method of adding text to your page is to paste in text from another program. Please be careful when you paste in text from elsewhere! Read the instructions below carefully to ensure your text remains in keeping with the visual style of the rest of your website. 

Avoid pasting directly from Microsoft Word or other word processors!
When you paste into the WYSIWYG editor from another program (such as Microsoft Word) without removing the text formatting, the editor attempts to import that formatting - but often there are inconsistencies in the way the styles are translated. This can cause your text to look irregular and become difficult to edit. SiteWizard recommends that you only paste unformatted text into the editor. 

Paste As Unformatted Text
Unformatted text is text which does not have any layout or styling attributed to it. Once you paste unformatted text into the editor, you can use the controls in the WYSIWYG toolbar to format and style the text in keeping with your website design. 

3.5 Formatting Text On Your Page

The WYSIWYG toolbar contains many options for formatting text on your page. Formatting includes text alignment and structure, and simple emphasis such as bold and italic.

When you first type into the editor, the text will have the default paragraph format. You can use the options in the editor to apply formatting to your text - most of the buttons for this are to the right of the middle row in the editor toolbar.

Simple Formatting - Bold, Italic, Underline

You can enhance regular paragraph text with simple text formatting, such as bold, italic and underline.

Figure 3.5.1 - Bold, Italic and Underline buttons on the Editor Toolbar.

To apply these formatting options: Select the text you wish to apply the style to, and click the corresponding formatting button. 

To remove these formatting options: Select the formatted text, and click on the button again, the formatting will be removed.

Be Careful! Underlined text often looks like a hyperlink - if you underline text which is not a link, it can be confusing for your users. They will think the text is a link, when it is not - as you may have done with the underlined text above. 

Numbered and Bulleted lists

Lists are an excellent way of presenting information to your users in a clear and concise way. 

Figure 3.5.2 - List buttons on the Editor Toolbar

To create a list: select the text you wish to be in the list, and click either then numbered or bulleted list icon. The current paragraph will become your first bullet point. 

To create a new list item: press the 'Return' or 'Enter' key on your keyboard.

To end your list: create a new list item (as above), and then click the list button in the toolbar again - the current list item will revert back to a normal paragraph. 

Text Alignment

You can specify the alignment of text on your page by using the alignment buttons. Usually, your text is aligned to the left by default.

Figure 3.5.3 - Alignment buttons in the Editor Toolbar

These buttons can be used to align the currently selected paragraph to the center, the right, or to be justified.

Please Note: Justified text can sometimes be difficult to read, as the spacing between words becomes uneven, so use this option with care. 

Further Simple Formatting

You can add several other options for basic formatting, including superscript and subscripts, indented text, and block-quotes. These styles can be applied with the same methods as above - selecting the text and clicking the corresponding button in the toolbar. For a full list of the different buttons on the toolbar, see Section 3.3 - The WYSIWYG Toolbar. 

Advanced Formatting

Some pages on your site may have been formatted in a custom way by your designer at SiteWizard, to meet your website requirements. If you are having trouble editing your page, don't hesitate to call SiteWizard Technical Support, on 01622 200 045. 

3.6 - Styling Text On Your Page

You can use the Editor Toolbar to apply visual styling to the text on your page. This can include simple colour changes, or pre-set styles and headings. These styling options can be found on the bottom row of the Editor Toolbar.

General Pre-Set Text Styles

If you would like to format your text to be highlighted or stand out in some way, the easiest method is to use the different options in the 'Styles' drop-down box on the bottom row of the editor toolbar.

Figure 3.6.1 - The pre-set styles drop-down menu in the Editor Toolbar.

These styles are labelled with names such as 'Shout' or 'Quote', and allow you to add pre-set styles to blocks of text. You may also have extra styles set, labelled 'Custom'. To apply these styles:

  1. Select the paragraph you wish to style by clicking your mouse on the text. 
  2. Click the arrow on the 'Styles' drop down menu
  3. Select your text style to change the text to that style.
Please note: These styles will be applied to whole paragraphs. Separate your paragraphs first using the 'Enter' or 'Return' key on your keyboard, before applying the style to your required text block.

Headings

Apply a heading style to a heading on your page, use the second drop-down menu. The styles are labelled 'Heading 1', 'Heading 2', etc.

These heading numbers should relate the the importance of the heading on the page - use 'Heading 1' at the top for the page title, use 'Heading 2' for sub-headings, and 'Heading 3' for sub-sub-headings, and so on!  

Figure 3.6.2 - The headings drop-down menu in the Editor Toolbar.
  1. Select paragraph you wish to become a heading by clicking on the text. 
  2. Click the arrow on the 'Headings' drop down menu (it may be labelled 'normal')
  3. Select your heading style to change the text to a heading.
Tip: Serch engines pay close attention to your heading text, so headings are a great place to include keywords to help with your Search Engine Optimisation. Make sure you style them with the pre-set styles in the editor, so that the search engine knows they are headings. If you'd like more tips for SEO, have a chat SiteWizard account manager on 01622 200 045 for more help and advice! 

Font Size and Colour

An alternative to the pre-set styles is to change the font size and colour to styles of your own choice. This can be done using the buttons and drop-down boxes in the menu. 

Figure 6.3.3 - Font, Size and Colour options in the Editor Toolbar
Please Note: Although you can change the style of your text by using the Font, Size and Colour boxes, it is recommended you use the pre-set styles in the editor. This way you can preserve the continuity of design that runs through your entire website.

3.7 Inserting Links

A link is a small piece of code that can be applied to text or images that when clicked, opens a new web page or jumps to a new location in the current page. There are three types of link you can insert into your web page. These are:

Links are an invaluable tool in web design as they replicate the turning of a page in the real world. It also gives you the ability to create navigation systems that allow you to breakdown the content of your site into relevant sections.

Creating a URL link (to a web page or file download)

A standard URL link can be used to link to another page on your site, a file or image in your SiteWizard libraries or somebody else's website.

  1. Create the text, or select some existing text that you wish to make a link.
  2. Click on the Insert/Edit Link button on the toolbar:   
  3. You'll see in the Link Type that URL has already been selected.
  4. If you are linking to an external site, type the web address into the URL box. If you look in the Protocol box you'll see that the http:// has been selected so there is no need to include this in the URL box. If you would like to link to a page or file from your server space then click the Browse Server button.
  5. If you click browse server, you will have the option to select a page on your website, or a file from your file library. Select the page or file by clicking on the file name, to insert it into the URL box.
  6. Click the OK button to add the link to your selected text.

Figure 2.6 Click on the Browse Server button to link to a page or file on your site.

Figure 3.7.1 - Click on the Browse Server button to link to a page or file on your site.

If you would like to adjust a link at any time during editing, Right Click your mouse over the link text and select the 'Edit Link' option. If you would like to remove a link, select the 'Unlink' option from the same pop-out menu.

Creating an email link

An email link enables the user's computer to open its default email program (e.g. Microsoft Outlook) and begin a new email messge. It allows you to specify the recipient email address, the text of the email subject box, and add some text for the email content. This is a great way of identifying emails that have been sent via the link from your site.

  1. Create the text, or select some existing text that you wish to make a link.
  2. Click on the Insert/Edit Link button on the toolbar:   
  3. In the Link Type drop-down box select the E-Mail option.
  4. In the E-Mail Address box type in the address you wish the email to be sent to. e.g. you@yourcompany.co.uk
  5. If you would like to be able to identify this email from others that arrive in your email manager (e.g. Microsoft® Outlook), enter a subject and some text that appears in the email in the Message Subject and Message Body boxes respectively.
  6. Click the OK button to add the email link to your selected text.

Figure 2.7 Include an Email Address, Subject and Body text to your email links.

Figure 3.7.2 Include an Email Address, Subject and Body text to your email links.

Creating a link to an anchor

An anchor is an invisible marker on a web page. A link which points to an anchor will jump to the specific anchor point on the linked page. Anchors can be handy on long pages, as users can click a link to a relevant section, rather than scrolling down the page.

Before you can create a link to an anchor, you must first create the anchor in the place you want the link to jump to. To set up an anchor, see Section 3.8 - Inserting an anchor on a page .

  1. Create the text, or select some existing text that you wish to make a link.
  2. Click on the Insert/Edit Link button on the toolbar:   
  3. In the Link Type drop-down box select the Anchor in this page option.
  4. Click on the By Anchor Name box and select the name of the anchor you wish to link too.
  5. Click on the OK button and the link will be added to the selected text.

Figure 2.8 Anchor links allow you to jump to a specific section on a page.

Figure 3.7.3 - Anchor links allow you to jump to a specific section on a page.

Setting the target value of a link

The target value of a link allows you to specify how the new page will open once the link is clicked on.

  1. Right Click your mouse over the link you wish to edit and select the Edit Link option in the pop-up menu.
  2. Select the Target tab at the top of the window.
  3. Click on the Target drop-down box and click on one of the settings. A breakdown of these options is given below.
  4. Click the OK button for your modifications to be applied to the link.

Figure 2.9 Choose from a number of different target options.

Figure 3.7.4 - Choose from a number of different target options.

<not set>
This is the default setting of a link. When the target of a link isn't set up, the link will act as normal.

<frame>
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

<popup window>
This option makes the target of your link open in a pop-up window with dimensions and features specified by you. 

Please Note: Pop-up windows can be inconsistent in their behaviour on different computers, and more importantly, they can be confusing for a user. It is generally advised to stick to the 'New Window' option (below) when you want the site to open away from your current page. 

New Window (_blank)
This option tells the link to open its target in a new browser window. This means that the original window that contains your website will still be available for people to go back to. This is a very handy option when linking to other people's websites.

Topmost Window (_top)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Same Window (_self)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Parent Window (_parent)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Advanced link settings

These settings should only be modified if you have an in-depth knowledge of how HTML works and are not covered in this guide.

3.8 Inserting an Anchor on a Page

An anchor is an invisible marker on a web page. A link which points to an anchor will jump to the specific anchor point on the linked page. Anchors can be handy on long pages, as users can click a link to a relevant section, rather than scrolling down the page.

Create an Anchor

  1. In the Page Editor, click your mouse on the page to position your cursor where you would like the anchor to be placed.
  2. Click on the Insert/Edit Anchor on the toolbar:   
  3. In the Anchor Name pop-up box, give your anchor a unique name.

Figure 2.11 Create anchors for links to specifically jump to.

Figure 3.8.1 - name your anchor in the pop-up menu.
  1. Click the OK button and you will see that an anchor symbol will be added to your page.
  2. Repeat these steps for as many anchors as you need on the page.

Figure 2.12 Link Anchors are shown by a yellow anchor on the page. Don't worry these will not show up on your live site.

Figure 3.8.2 - Link Anchors are shown by a yellow anchor on the page. 
Don't worry these will not show up on your live site.

To edit the anchors at any point, Right Click your mouse over the anchor symbol and select the Anchor Properties option in the pop-up menu.

Link to an Anchor

To link to your anchor from another part of the page or from a different page, see Section 3.7 - Inserting Links - Creating a link to an Anchor.

Don't Worry! The anchor symbol in the editor will not appear on your live site. This has been included to give you a visual clue as to where you have placed anchors on your page.
^ Back To TopGo to next section >