Site Builder editor
Most users may already be familiar with a word document editor, but just in case you need a refresher, we’ve put together a quick reference list that will help you identify and use the icons:
ROW 1 of icons
Format
This drop-down menu allows you format your text by highlighting a section of text and selecting “Paragraph” for body text or “Heading” (choices are Heading 1, 2 or 3) for a title or section heading.
Bold
Highlight your text and click on the “B" icon to emphasize a word, phrase or sentence with bold text.
Italics
Highlight your text and click on the “I" icon to emphasize a word, phrase or sentence with italicized text.
Horizontal line
This icon adds a horizontal line to the text area which can be helpful for separating the content on your page into sections.
Page justification
Shifts the page left, center, right and align full. Left, right and center will place the text in that area of the page. Align full will space words evenly across the page so that multiple lines of text will line up evenly on both the left and right. We recommend that you use the left justify setting for most pages but you may occasionally want to use the center justify setting to highlight a section of text.
Lists – bullets or numbers
This tool allows you to turn paragraphs of text into numbered or bulleted lists, which makes it easy for a visitor to scan the content on your page. You can also begin a list and enter your own data. Hitting Enter will create the next list item.
To create sub-lists within a list, use the Indent tool. To place a paragraph break within a list item, hold Shift and hit Enter. Do this twice to place a space between paragraphs.
Indent and Outdent
The indent and outdent tool allows you to move lines of text to the right (indent) or back to the left (outdent). Indenting text is useful when you want to emphasize a particular block of text.
Undo and Redo
As in a word processor, these functions allow you to easily restore your content after you’ve made an unwanted change to your text. Each time you click on the icon, it will restore your text to the way it appeared before your most recent change.
ROW 2 of icons
HTML
This icon allows you to reveal the HTML code behind the text. This is useful for users who are familiar with code and want the option to modify it. Most Site Builder users will never need to use this option.
Insert table
The table function works much the same as it does in a word processor. You can insert a table into your Site Builder page and choose the number of columns and rows and set the width of the table, alignment, borders and background.
The next ten icons allow you to modify your table by:
- Changing the properties of a specific row in the table
- Changing the properties of a specific cell
- Inserting a new row before the current one
- Inserting a new row after the current one
- Deleting a row
- Inserting a new column before the current one
- Inserting a new column after the current one
- Removing a column
- Splitting merged table cells
- Merging two or more cells into one
Toggle guidelines/invisible elements
This function lets you see the outline of a table even if there are no borders to indicate
Spell check
This feature allows you to check for spelling errors and typos in the text you’ve entered into the HTML editor. It does not check the menus, Related Links or Departmental Links.
ROW 3 of icons
Managing images
To insert an image, click on the Insert/Edit Image icon and then click on the Browse icon to the right of the space for the Image URL. A new window will open for the Image Manager.
- Upload the image: Click on Upload and then Choose Files. This function allows you to search your own computer and locate the image that you’d like to use. Find the image and click on Open and then Upload to server. Your photo is now in the image manager and can be used again by anyone who maintains your site.
- Edit the image: Once the photo is in the Image Manager, you can change the size and shape of the image before adding it to your page. Click on the upward arrow that appears in the lower right corner of your image and then select Edit from the list of options. Your photo will open in another window.
- Crop the image: You can crop the photo by clicking on the Crop icon, highlighting the area that you want to include in the photo, and then clicking on the Apply icon.
- Resize the image: To change the size of an image, click the Resize icon. You can resize an image in one of two ways:
1. The first option is to adjust the size of the image using the handles (the small squares that appear on the corners and sides of the image). If you choose this method resizing the image using a corner handle will ensure the image maintains its original proportion.
2. The second option is to adjust the size of the image by changing width and height dimensions. If using this method ensure Constrain Proportions is selected to maintain the image’s original proportion. Entering just a width or height dimension and pressing the Tab key will automatically generate the other associated dimension to maintain the image’s original proportion.
Whichever method you use it is important to save your changes. First click Apply and then click Save. Change the file name of the image, but retain the image's extension, such as .jpg or .png and then click Save as. You can now insert your resized image. - Insert the image: To add the photo to the page, click on the photo from the Image Manager, type in the Image Description, align it to the left or right (using the drop-down list), set a Border if you prefer, and enter 5 in both the Vertical Space and Horizontal space boxes. Then, click on Insert to place the image on the page.
Insert YouTube video
Site Builder offers a quick and easy way to present a video on your page. Start by uploading your video to YouTube or finding the relevant video there. Copy the URL for that particular video. Click on the Embed YouTube video icon and paste the URL into the space provided.
Anchors
Anchors are used to link to a specific place in a web page. To create an anchor on your page, place your cursor in front of the desired place in your text. Click on the anchor icon and type in a brief name for the anchor. Go up to the place in your file where you want to link this anchor. Highlight the text and click on the link icon. Go the option for Anchors and click on the drop down menu to find the name of the anchor you have just created. Click on the Insert icon to complete the link.
Link
Highlight the text or right-click on the image to be linked and click on the link icon. Then you can select the type of link you want to make (anchor, URL or email address), enter the link information and click ‘Ok’.
Unlink
To remove an existing link, select the text or image that has been linked and click on the unlink icon.
Subscript or superscript
Format the text as subscript or superscript, which can be useful for endnotes or to indicate a century (21st) or a place (5th).
Find
If you have a lengthy page of content, you can use the Find function to help you quickly located a specific spot in the text.
Find and Replace
This function allows you to update your text if you need to change a piece of information numerous times. Just enter the text that needs to be removed and replace with the new text.
Toggle fullscreen mode
This icon allows you to see the text area on a larger scale, which may make the text easier to read, edit and format.
Cut, Copy and Paste as Plain Text
The Cut and Copy icons work just as they do in any word processing program. But the Paste function works a little differently than it did in the old editor. To paste your text into the editor, place your cursor in the appropriate place and use Control V function on your keyboard (hold down the Control key and then the V key).
If you want to insert the text as plain text (ie. without any of the formatting from the original document or program), click on the Paste icon and then use the Control V function.
If you want to paste the text with it's formatting intact, make sure the Paste as Plain text button is NOT clicked, and use the Control V function.
See Use the editor.
