Blocks

What are blocks, you ask? Well, blocks are the little boxes that appear on the left and right side of your web pages. You can see a block in the left side of your website called Navigation. This is the only block that you cannot remove from your page. it can be edited by simply adding or taking away pages from your site. This is where your navigation menu links can display. But the Blocks modules allows you to create as many blocks as you wish for advertising, special announcements, small images, ANYTHING! And now you will learn how to use them. NOTE: Outside Java applets and codes placed in this are are not supported by our staff. This is a simple text editor, and may not be able to properly save other programming language codes. Please use care.

The first step will be to login to your Control Panel (this is the same Url as the User Login link on your homepage) using your administration username and password. You will want to click on the icon that is circled in this image (Blocks) in order to access and edit any existing blocks within your site or to create and apply new ones. After clicking on this icon, a Block List will display of all existing blocks within your site. 

The Title column shows you the name of the block, which is what will be displayed in the header section (top) of the block. The final column contains the following icons:

Edits a block.
Deletes a block (this action cannot be undone).

Toward the bottom of the Block List, you can see the text link giving you the option to add a New Block. Please click this link now.

Blocks are relatively easy to set up. Once you are comfortable with the editor, then you will have no trouble customizing your text and uploading images (to learn how to insert an image, click here) into a block. You can learn the basics of customizations to blocks by reading the Page Editor chapter. 

Note: As a general rule, in order to make your pages fit comfortably in any screen size resolution, your content placed in your center panel should not exceed 470 pixels in width and your blocks should not exceed 145 pixels in width (collectively 760 pixels). Anything coded larger will create an inconvenient left to right scroll bar for users in 800 x 600 resolutions. It check on an images pixel width, right mouse click on the image and select properties.

*Java Script and html code found on other sites: Any html code copy and pasted from outside sources is considered outside content and will not be supported by our staff. There are simply too many codes and languages out there written by people who may or even may not have known what they were doing. Some of these codes may be poorly written, or may be coded in such a way as to not be supported by our editor. By placing 'code' from other sources in the editor may cause the following: 

All of these effects are caused by the code entered into the editor, not of any fault with our software. If this issue occurs, the content will be deleted by our staff. I am sure you understand that it is simply too time consuming for our staff to try to find every instance of poor coding found from other sources on the Internet. 

WYSIWYG Icons and what they do:

 
Fullscreen Mode
  To expand the active window to a full screen click on the 'Fullscreen Mode' Icon. Concurrent clicks on this icon will toggle this feature on and off.
Cut (Ctrl+X)
  To cut a portion of the document, highlight the desired portion and click the 'Cut' icon (keyboard shortcut - CTRL+X).
Copy (Ctrl+C)
  To copy a portion of the document, highlight the desired portion and click the 'Copy' icon (keyboard shortcut - CTRL+C).
Paste (Ctrl+V)
  To paste a portion that has already been cut (or copied), click where you want to place the desired portion on the page and click the 'Paste' icon (keyboard shortcut - CTRL+V).

To paste from Microsoft Word, click on the drop down icon next to the Paste Icon.
Paste from Microsoft Word (Ctrl + D)
  To Paste from Microsoft Word: Copy your desired text from Microsoft Word and click the drop down icon next to the paste icon. Select the 'Paste from MS Word Option'. This will remove the tags that Microsoft Word automatically places around your text. It will also remove most text formatting as well.
Paste Text
    To Paste Text
Search, Find and Replace
  To find and replace words or phrases within the text:
Select the search and replace feature. Enter the word or phrase you wish to replace and type it in the 'Find what' field

Select the new word or phrase you wish to replace the searched text with in the 'Replace with' field.

You can choose to 'find next' which allows you to manually replace instances of the searched text, or you can choose 'replace all' which allows you to replace all instances of the selected text.

Selecting the optional 'Match Case' tab allows you to search for a word or phrase with exactly the same upper or lower-case spelling of the word or phrase entered in 'Find What'. Not selecting this option means that a word entered in the 'Find what' field with upper case characters will return a search of upper and lower case matches of the same word.

Selecting the optional 'Match whole word only' tab allows the search to only display the words that are an exact match of the word or phrase entered in the 'Find What' field.
Undo (Ctrl+Z)
  To undo the last change, click the 'Undo' icon (keyboard shortcut - CTRL+Z). Each consecutive click will undo the previous change to the document.
Redo (Ctrl+Y)
  To redo the last change, click the 'Redo' icon (keyboard shortcut - CTRL+Y). Each consecutive click will repeat the last change to the document.
Check Spelling (F7)
  To check spelling, select the text you would like to spell check (if you do not select the text, then your whole document will be checked)

Click on the spell checker icon or right click on the mouse and scroll down to 'Check spelling'.

You will be taken to the first incorrectly spelled word. You can then choose to

- Change the incorrectly spelled word with the suggested words provided
- Ignore the incorrectly spelled word (i.e. not make any changes to it)

To check spelling of a single word, highlight the word and right click on the mouse to get a selection of suggested replacements. To replace the miss-spelt word with one of the suggested words, simple select one of the replacements.
Remove Text Formatting
  This command allows you to select a specific portion of text and remove any of the formatting which it contains. To remove any text formatting select the desired portion of text and Click the 'Remove Text Formatting' button.
Bold (Ctrl+B)
  To bold text, select the desired portion of text and click the 'Bold' icon (keyboard shortcut - CTRL+B). Each consecutive click will toggle this function on and off.
Underline (Ctrl+U)
  To underline text, select the desired portion of text and click the 'Underline' icon (keyboard shortcut - CTRL+U). Each consecutive click will toggle this function on and off.
Italic (Ctrl+I)
  To convert text to italic, select the desired portion of text and click the 'Italic' icon (keyboard shortcut - CTRL+I). Each consecutive click will toggle this function on and off.
Strikethrough
  To format text as strike through Select the text you want formatted by highlighting it and select the 'Strike through' icon. Each consecutive click will toggle this feature on and off
Insert Number List
  To start a numbered text list, click the 'Insert Numbered List' icon. If text has already been selected, the selection will be converted to a numbered list. Each consecutive click will toggle this function on and off.
Insert Bullet List
  To start a bullet text list, click the 'Insert Bullet List' icon. If text has already been selected, the selection will be converted to a bullet list. Each consecutive click will toggle this function on and off.
Decrease Indent
  To decrease indent of a paragraph, click the 'Decrease Indent' icon. Each consecutive click will move text further to the left.
Increase Indent
  To increase indent of a paragraph, click the 'Increase Indent' icon. Each consecutive click will move text further to the right.
Superscript
  To convert text to superscript (vertically aligned higher): Select the desired portion of text and click the 'Superscript' icon. Each consecutive click will toggle this function on and off.
Subscript
  To convert text to subscript (vertically aligned lower): Select the desired portion of text and click the 'Subscript' icon. Each consecutive click will toggle this function on and off.
Align Left
  To align to the left, make a selection in the document and click the 'Align Left' icon.
Align Center
  To align to the center, make a selection in the document and click the 'Align Center' icon.
Align Right
  To align to the right, make a selection in the document and click the 'Align Right' icon.
Justify
  To justify a paragraph or text, make a selection in the document and click the 'Justify' icon.
Insert Horizontal Line
  To insert a horizontal line, select the location to insert the line and click the 'Insert Horizontal Line' icon.
Create or Modify Link
  To create a hyperlink, select the text or image to create the link on, then click the 'Create or Modify Link' icon. if applicable, the popup window will contain existing link information. You can type the full URL of the page you want to link to in the URL text box. You can also enter the target window information (optional) and an anchor name (if linking to an anchor - optional).

For quick access to links, you can choose to insert a pre-defined link from the 'Pre-defined links' dropdown list.

When finished, click the 'Insert Link' button to insert the hyperLink you just created, or click 'Remove Link' to remove an existing link. Clicking 'Cancel' will close the window and take you back to the editor.
Insert / Modify Anchor
  To insert an anchor, select a desired spot on the web page you are editing and click the 'Insert / Modify Anchor' icon. In the dialogue box, type the name for the anchor.

When finished, click the 'OK' button to insert the anchor, or 'Cancel' to close the box.

To modify an anchor select the anchor (displayed as an anchor icon when guidelines are switched on) and click the 'Insert / Modify Anchor' icon. Make your changes and hit the 'OK' button or click 'Cancel' to close the window.
Font
  To change the font of text, select the desired portion of text and click the 'Font' drop-down menu.

Select the desired font (choose from Default - Times New Roman, Arial, Verdana, Tahoma, Courier New or Georgia).
Font Size
  To change the size of text, select the desired portion of text and click the 'Size' drop-down menu.

Select the desired size (text size 1-7).
Paragraph
  To change the format of text, select the desired portion of text and click the 'Format' drop-down menu.

Select the desired format (choose from Normal, Superscript, Subscript and H1-H6).
Styles & Formatting
  To change the style of text, images, form objects, tables, table cells etc select the desired element and click the 'Style' drop-down menu, which will display all styles defined in the style-sheet.

Select the desired style from the menu.

Note: this function will not work if there is no style-sheet applied to the page.
Font Color
  To change the color of text, select the desired portion of text and click the 'Color' drop-down menu.

Select the desired color from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.

This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient
Background Color
  To change the highlighted color of text, select the desired portion of text and click the 'Highlight' drop-down menu.

Select the desired color from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.

This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient
Insert Table
  To insert a table, select the desired location, then click the 'Insert Table' icon.

A new window will pop-up with the following fields: Rows - number of rows in table; Columns - number of columns in table; Width - width of table; BgColor - background color of table; Cell Padding - padding around cells; Cell Spacing - spacing between cells and Border - border around cells.

Fill in table details then click the 'OK' button to insert table, or click 'Cancel' to go back to the editor.
Edit Table Properties
  To modify table properties, select a table or click anywhere inside the table to modify, then click the 'Modify Table Properties' icon.

A pop-up window will appear with the table's properties. Click the 'OK' button to save your changes, or click 'Cancel' to go back to the editor.

Note: this function will not work if a table has not been selected.
Show / Hide Guidelines
  To show or hide guidelines, click the 'Show/Hide Guidelines' icon.

This will toggle between displaying table and form guidelines and not showing any guidelines at all.

Tables and cells will have a broken gray line around them, forms will have a broken red line around them, while hidden fields will be a pink square when showing guidelines.

Note that the status bar (at the bottom of the window) will reflect the guidelines mode currently in use.
Insert Row
  To insert row above, click inside cell above which to insert a row, then click the 'Insert Row Above' icon.

Each consecutive click will insert another row above the selected cell.

Note: this function will not work if a cell has not been selected.
Delete Row
  To delete a row, click inside cell which is in the row to be deleted, then click the 'Delete Row' icon.

Note: this function will not work if a cell has not been selected.
Delete Column
  To delete a column, click inside cell which is in the column to be deleted, then click the 'Delete Column' icon.

Note: this function will not work if a cell has not been selected.
Insert Column
  To insert a column, click inside cell which is in the column to be inserted, then click the 'Insert Column' icon.

Note: this function will not work if a cell has not been selected.
Increase / Decrease Column Span
  To increase / decrease column span, click inside cell who's span is to be decreased, select the Edit Tables / Cells icon and choose Edit Table from the dropdown menu.  then click the 'Decrease Column Span' icon.

Each consecutive click will further decrease the column span of the selected cell. Note: this function will not work if a cell has not been selected.
Insert / Modify Flash
  If a flash movie is NOT selected, clicking this icon will open the Flash Manager.

If a flash movie IS selected, then clicking this icon will open the 'Modify Flash Properties' popup window.

To modify the properties of the selected flash movie, set the required attributes and click the 'Modify' button.
Insert / Modify Media
  If an image is NOT selected, clicking this icon will open the Image Manager.

If an image IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.

To modify the image properties of the selected image, set the required attributes and click the 'Modify' button.
Insert / Modify Image
  If an image is NOT selected, clicking this icon will open the Image Manager.

If an image IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.

To modify the image properties of the selected image, set the required attributes and click the 'Modify' button.
Insert Special Characters
  To insert a special character, click the 'Insert Special Character' icon.

A pop-up window will appear with a list of special characters.

Click the icon of the character to insert into your web page.
Toggle Absolute Positioning
  To position a text box or image using absolute positioning, select the the textbox or image and select the 'absolute positioning' icon. You can now click and drag an image or text box to the location you would like it to reside within the active window.
Source Mode
  To switch to source code editing mode, click the 'Source' button at the bottom of the editor.

This will switch to HTML code editing mode.

To switch back to WYSIWYG Editing, click the 'Edit' button at the bottom of the editor.

This is recommended for advanced users only
Preview Mode
  To show a preview of the page being edited, click the 'Preview' button at the bottom of the editor.

This is useful in previewing a file to see how it will look exactly in your browser, before changes are saved.

To switch back to editing mode, click the 'Edit' button at the bottom of the editor.

When you are finished creating your block, click the Create Block link at the bottom f the page. You should get a Block created successfully message. Next, click Return to Blocks. You will now see your new block listed in the Block List. 

Now that you have created your block(s), you are probably wondering how you make it appear to visitors on your website. To do this, you will need to return to the Control Panel and select the Page Editor. Remember the (Manage Blocks) icon in the Page List? This is where it comes into play!  Decide on which page you want the newly created block to appear. Once you have the perfect place in mind for your block, click the (Manage Blocks) icon associated with that page. In this example, we are selecting the Home page. You have now entered the Block Management area. It should look similar to the below image:

 There is a Help Section on the right of this page to guide you through the block process if you need reminders.

The Left-side Blocks column shows all blocks that appear on the left side of the page. Currently none, from our example. Similarly, the Right-side blocks column shows all blocks that appear on the right side of the page. 

Adding Blocks
To add a block to the page, select the block from the dropdown lists, then click 'Add'. The new block will appear at the bottom of the list.

Moving Blocks
Use the arrows next to each block to move the block around the page. For example, clicking 'down' will move the block down; clicking 'right' will move the block to the right side of the page; etc. 

Removing Blocks
To remove a block from the page, click the red 'X' icon next to the corresponding block. Please Note: This will not delete the block; it will simply remove the block from this page. You will still be able to put the block back on this page (or on another page) at any time.

A block can be added to many pages at one time. It need not only be used once. 

FAQ's

Q. How many blocks can be placed on the left and right sides? Are they expandable?
A. As many as you want. Yes, they are expandable. But keep in mind, if you place something that it too large to fit in the block's width, it will stretch the blocks width out of alignment. So, stretching down may not pose an issue, but stretching width-wise may be unattractive.

Q. I have been trying to add a script I found on another site to my editor. I am using the 'toggle source' option and pasting in the code properly, but it will not work on my site. Why?
A. This happens because the WYSIWYG editor is an HTML editor, so it cannot support all other language codes. We have made a 'roundabout' attempt to allow JavaScript anyway (applied on 2-2-04), but you may still have some issues. As much as we would like to have our software support every new technology and language available on the Internet, this is just not possible. But we will continue to offer enhancements and improvements as time allows.

Q. Is there any way to substitute my own customized menu for the navigation block and then maintain it myself? 
A. No. It is locked in. We had to choose simplicity in order to allow our software to be administered by just about anyone. In order to do that some loss of control was necessary.

Please visit the Knowledge Base in our Support Center for many other FAQs and their answers.



Close this browser window to return to the Guide. Or click to move on to the next section: Visual Settings