Get Started Now
FREE 60 Day Trial

WYSIWYG Editor

When you’re editing an existing page, or creating an entirely new page from scratch, you’re going to need to insert content. Your Site Manager comes equipped with a WYSIWYG editor (or “Wizzy-Wig” which stands for “What You See Is What You Get”) to allow you to create HTML web pages without having to know the HTML language.

Log in to your Site Manager and Roll your mouse over any section of your page and when it highlights, click it to bring up to WYSIWYG editor. For more information on how to bring up and use the WYSIWYG editor, click here

 

  1. Source Code
  2. Maximize Window
  3. Print
  4. Find and Replace
  5. Templates
  6. Cut
  7. Copy
  8. Paste
  9. Paste From Word
  10. Undo
  11. Redo
  12. Insert Table
  13. Insert/Edit Image
  14. Insert/Edit Media Object
  15. You Tube
  16. Horizontal Line
  17. Insert/Edit a Hyperlink 
  18. Anchor Text
  19. Special Characters
  20. Spelling
  1. Format
  2. Left Align
  3. Center Align
  4. Right Align
  5. Justify
  6. Numbered List
  7. Bulleted List
  8. Font
  9. Decrease Indent
  10. Increase Indent
  11. Font Size
  12. Bold
  13. Italic
  14. Underline
  15. Strike through
  16. Subscript
  17. Superscript
  18. Remove Format
  19. Font Color
  20. Background Text Color

Many of the formatting options such as font, alignment, bullets, color, bold, italics, and underline are just like Microsoft Word. However, there are some unfamiliar commands in the WYSIWYG editor that we will tell you about

Note

Source Code

Displaying the source code of a text editing box allows the you the opportunity to edit HTML coding on any page of your site.  Having a familiarity with HTML code isn’t necessary to use the WYSIWIG editor.

Note

Maximize Window

This tool is used expand the vertical area of your text editing window.  First maximize the window using the expand button in the top right corner (if on a PC) and then press the Maximize button to expand out the editable area. Normally, if you resize or maximize the editing window, the actual editable area remains the same size. Use this tool if you want to see a larger area to work on.

Note

 Print

You can use this button to easily print out  the content of that editing field.

Note

 Find and Replace

This tool is used to easily find and replace words or phrases in your page content. Rather than sifting through your whole page trying find the specific phrase you want to change, just type it into the Find/Replace tool and let the WYSIWYG editor find it for you. If you want to replace the phrase with a different one, simply enter the new phrase into the space under Replace With:




Note

Templates

The template button gives you three page layouts to choose from.  Select one to avoid designing the layout yourself.  Once selected, simply replace the text and images and you’re done!

Note

  Cut, Copy & Paste

The cut, copy, and paste options serve the same functions they do in most document programs; Cut allows you to remove a highlighted passage and add it to the clipboard, Copy will add the highlighted passage to the clipboard while leaving the original intact, and Paste will insert whatever passage is on the clipboard to the text field.

Note

 

Paste From External Source

The Paste From External Source tool allows you to add content to your page from an existing Microsoft Word document or other program without the potential danger of HTML formatting errors.

First, go to your document and hit Ctrl-A to select your text and then Ctrl-C to copy it. Now go back to the WYSIWYG editor and click the Paste  icon. When the window pops up, paste your text copied from a Microsoft Word document by hitting Ctrl-V and then click Insert. The text should now appear in the WYSIWYG window. For more information, click here.

Note

Undo

If you make a mistake, dont worry! This tool will undo the last modification that you made.

Note

Redo

If you decided that you shouldn’t have hit the Undo button and you want to go back to how you had it, click the Redo button.

Note

Insert Table

Tables in HTML are much like the tables you would use in a word processor.

On the dialog box that pops open you are given options as to how wide you would like the table to be in relation to the area it is being placed in, how many rows and how many columns you would like it to contain, the Cell Spacing and Cell Padding properties (defines how much space is in between each cell, and how much buffer space is in between the inserted text and the table walls).

When you’ve placed the table, you can edit it further by right-clicking on the table, a table cell, or highlighted content within the table. A dialog box will open, giving you options to insert a row or column, delete a row or column, insert a link, image or email link, and to bring up (and edit) the overall cell properties. These options can also be found on the toolbar at the top of the WYSIWYG editor.

Tables can be very handy if you’re wanting more than one column in a web page (for example, if you have more than one office location and want both locations listed in the footer of your website), but are a little more complex than ordinary one-column pages, so take your time when working with them.

Note

Insert/Edit Image

This tool allows you to insert and edit images in your webpage. When you click the icon, a dialogue box will open. You can either choose from your personal pictures by clicking Browse, or use pictures from the galleries that we provide. Once you have a picture selected, click OK.

In order to change the size of the picture, click a corner and drag it to fit your desired size. To adjust how text flows around the picture, move the picture to the right place on the page, right click the image and choose Image Properties. From this window you can make changes pertaining to how the image looks on the page and in relation to the text.

For more information on adding pictures, watch our Site Manager Tutorial.

For tips on working with graphics and images, click here.

Note

 Insert/Edit Media Object

This tool allows you to insert and edit videos in your webpage. When you click the icon, a dialogue box will open. You can choose from several different video options, including Flash, Youtube, Quicktime, and Windows Media. Once you have a video type selected, you can set the properties, enter the video URL, and click OK.

Note

You Tube

If you have a YouTube account you can add videos from that account to any page of your site.  Decide where you want to place the video and copy the link from beneath the video in your YouTube account.  Copy the link from underneath the video and past it into the window of the editing box as in the image below.

Note

Insert/Edit Horizontal Line

This tool allows you to insert a horizontal line in your webpage. This helps visually separate sections of your page.

Note

Insert/Edit a Hyperlink

“Hyperlinks” are those click-able hot links on webpages used to direct the viewer to a web address, or “URL” (Uniform Resource Locator). When you want to create a link on a webpage to either a file, email address or another webpage, you would use this button.

Highlight the text that you want to make into a hyperlink and then click the hyperlink button. A dialogue box will open asking you to enter the type of link you want to add.

You have five options on the left to choose from: Page on this Site allows to you to choose a page on your website from a master list of all your pages. Web Location gives you the option to put in a URL address for any website outside of your own. Place in this Document allows you to skip to a specific place on the page through anchor tags, which will be explained in the next section. E-mail Address lets you choose an email address that will be opened in that user’s primary E-mail  program. Finally, Images allows you to choose an object from the Images gallery to create a direct link to, prompting the ability to download.

Note

 

Anchor Text

It’s important to make your site easy to navigate and one way to do this is to link words at the top of your page to sections on other areas of the same page.  For example: If you click on the Anchor Text heading at the top of this page it will bring you directly to this section of the page.

Note

 

Special Characters

This tool allows you to enter symbols and characters into your website that are not on your keyboard.

Note

 Spelling

You can use the Spelling Tool to run a spell check on the page content. You can choose to simply ignore the misspelled word, replace it with another correctly-spelled word, or add the current word to the system dictionary.

 

Note

 

Format

Formatting a specific sentence or paragraph can be done using this drop-down menu. The default is paragraph formatting. These formatting options can be useful for quick and uniform formatting of heading texts, address texts, and so forth.

Note


Align Left, Center, Right, Justify

All these tools can be used to align the text on the page to the:

left,

center, and

right.

Justified will stretch the sentences to the full length of the page, if possible, by spacing out the letters.

Note

Numbered List

Numbered lists are useful when you

  1. Wish to list items in order of importance
  2. Wish to list steps in order of action
  3. Don’t wish to use a bulleted list

Note

Bulleted List

Bulleted lists are useful for occasions in which you

  • Want to create a list of services
  • Want to display a list of examples
  • Don’t require a numbered list

Note

Font

You have a selection of fonts to choose from, such as the set default font, or a specific font like Arial, Times New Roman, Georgia, Courier, and Verdana.

Note

Decrease Indent

Use this feature to remove the indents added as per the above paragraph.

Back to Top

Increase Indent

Use this button if you wish to indent a paragraph, such as what is shown here. Click on it once to move the paragraph indent to the right this much

Click again to increase the paragraph even further over. These functions can be used for a multitude of purposes.

Note 

Font Size

Font size, in web terms, is not listed in points, but rather in a scale of one to seven. For example…

1. Size One

2. Size Two

3. Size Three

4. Size Four

5. Size Five

6. Size Six

7. Size Seven

Font sizes will vary a little in appearance depending upon which font you are using, and some fonts will work better than others in various sizes.

Note

Bold, Italic, Underline

You can use these tools to make your text Bold, Italic, or Underlined.

Note

Strikethrough

Use this feature when you want to create a line through text to create a strikethrough like this.

Note

Subscript/Superscript

Highlight text on a page to create subscript like in the image below.

 

Highlight text on a page to create superscript just like the trademark TM in the image below.

Note

Remove Format

Formatting is applying features to text such as Italicizing,underlining or making text bold. When you want to undo formatting highlight the text in the editing box and click on the Remove Formatting icon. See the two text examples with the phrase “Creating Financial Freedom!”. The first one is formatted and the second one is with the formatting removed.

Note

Font Color

Use this to choose the color you want text to be. The default is black.

Note

Background Text Color

Use this command if you want to create text displayed as you see it here

You can choose whatever color you would like, and can change font color as well.

 

Note

 

One Response to “WYSIWYG Editor”

  1. I have edited several pages on our new website which is not yet published. In all cases where I have bulleted lists the line spacing is wrong. I either get no spaces between lines or too large of spacing between lines. How do I achieve one line space in between each bulleted line?

Leave a Reply