Welcome To IVWebsites' Dynamic Editor:

To get started, add a new element to the page by clicking its name on the ELement bar at the top of the page. Or, simply doubleclick an element to move, resize, or edit its properties.

While using the editor, keep in mind:
  1) Double clicking activates ELements [Show Me]
  2) Moving/Resizing happens in move "green" mode [Show Me]
  3) Editing the ELment happens in the edit "pink" mode [Show Me]
  4) To navigate to other pages, click "save", [Show Me] then the button for that page.        Click the yellow edit button to edit new page.
  5) Help topics to the right will answer most questions.

Settings:

The settings button can be found on the status bar. [Show Me] This button is only displayed when no page elements are active.

Click this button and the resulting pop-up windows will allow you to change the style of your portfolio, choose the language of your buttons, and set your page background color and/or texture (this is the extra area displayed around your site when viewed in a browser window larger then your site). 

Soon this area will contain other site settings for things like: search engine key words, specialties, dynamic listing/changing of your sites www names, and more.

Settings:

The settings button can be found on the status bar. [Show Me] This button is only displayed when no elements are active.

Click this button and the resulting pop-up windows will allow you to change the style of your portfolio, choose the language of your buttons, and set your page background color and/or texture (this is the extra area displayed around your site when viewed in a browser window larger then your site). 

Soon this area will contain other site settings for things like: search engine key words, specialties, dynamic listing/changing of your sites www names, and more.

Saving: [Show Me]

When you have completed your work on a page, click the black/red “save-navigate” button toward the top (next to the edit and move/load buttons). This will write all your data to the server and make your changes live.

Only data from elements that are turned on and on the page will be saved. Uploaded images or inputed text in elements that have been turned off (not showing on the page) will not be saved and will be lost. If you wish to delete an image or any element, simply turn off that element and save the page. Some elenments like the Folio and the Stock elements can not be turned off.

Miscellaneous Tips:

Sticky ELements: After double clicking and moving an element, some users periodically experience difficulty deselecting the element. We believe that this may be caused from sticky fingers. Wash hands and mouse and retry. If that doesn’t work hit the ESC key and the system will release the element. Note: You can also click an active elements button on the element bar to deselect or deactivate it.

Special Effects: Add drop shadows to pictures and elements by painting them into your background and positioning your elements on top once the background image is loaded.  Hint:  Placing a print screen of your layout onto a layer in your design software (Photoshop, Illustrator, CorelDraw, etc.) when designing your background helps you line up drop shadows, knockouts, fills and other special effects.

Designs: Jump Start Design Templates [Show Me]

Jump Start design templates are available by clicking the “load template” button on the status bar. (This button is only displayed when no elements are active)

Once clicked, a pop-up windows displays the different designs that can be applied to give you a  jump start on setting up your site.

Why do we call it a jump “start” design? Because once applied, every aspect of each template is still editable by you. Only like the background? Change everything else.

Note: Applying a template will replace all of your current formatting and loaded information except for your bio text, contact text, links text and your portfolio and stock images.

Copy Button: [Show Me]

The copy button is located on the status bar and the name of the button changes to reflect the currently activated “unglued” element.

Use the copy button to copy the position, formatting and content of the activated "unglued" element from another page to the page you are currently on. You can use the copy button to copy a formatted text block from one page to the next to avoid having to go into the advanced editor to reselect point size, font, and color.

Note: You can only copy only the same element that is currently selected from another page.

Backgrounds:

Each page of your website can be styled with a background color and/or a background picture. Each page of your site can have a different background color and/or image.

Deselect all elements on the page. Click either the “edit background image” button [Show Me] or the “edit background color” button [Show Me] on the status bar to perform the task.

Portfolios:

The portfolio elements are only available on your portfolio page. To upload a portfolio image, first make sure your portfolio elements are not active.  Then click the icon/place holder for the image slot you wish to upload to. Click the yellow upload button now displayed in the “large image preview element” on your page. Follow the direction in the resulting pop-up. There are three different styles of portfolios that are available. Each can be customized.

30 Block – block of 30 image icons that can be dynamically resized vertically and horizontally. It also includes a “large image preview” element that dynamically displays a larger version of each icon image. Billboard – single resizeable row of icons and a large “wide format” image preview element. Category – allows users to sort their images into different, user defined categories and includes a large image preview element.

To change your portfolio style, click the “settings” button on the status bar. (Settings button is only displayed when no elements are “active.”)

Text ELements:

To add or edit text, double click and “activate” a text element. Make sure the interface is in “edit” (pink) mode.

To add or change text, click inside the active element and begin typing.

To change the formatting, font style, size and color of text, click the “advanced editing” button on the status bar. This advanced editing popup includes many formatting features to control the look of your text. Using the Advanced Editor you even add hyperlinks to text to take visitors to other sites of interest.

When finished editing, click the “save changes” button at the bottom of the window to insert these changes into your page.

Note: If pasting a large amount of preformatted text from a word processor like Microsoft Word, use the “past from word” option in the advanced text editor if you experience formatting issues.

Images:

Images can be added to your site using the image, logo, folio image, and stock image elements. Images can also be incorporated into uploaded backgrounds.

Recommended sizes vary from element to element. IVWebsites supports jpg, png, and gif images for the image1, image2, and logo elements.

Portfolio and stock image elements support jpg, png, gif and also support zoomable high-res previews, Quicktime, and Flash movies.

hen saving your images for uploading to your site, you must include the appropriate .xxx file extension (.jpg, .png, .mov, etc.) at the end of the name. Click the upload button for each image-based element to see the sizes, features, and limitations for each image element.

Note: Though images can be dynamically sized inside your page, for best site performance, pre-size your images to the approximate size that they will be used in the layout prior to upload.

Editing ELements:

To edit an element already on the page, double click the element to activate or “unglue” it. Set the user interface to the pink “edit mode”by clicking the “edit” button.[Show Me]

In edit mode, users can add or change type, type style and color, add fills and borders to objects. To type or change text, simply click inside an “activated” text element and begin typing.

For advanced text editing, which includes changing fonts, size and colors, users must click the “Text Editing and Advanced Features” button on the status bar, while in edit mode.

Buttons:  Navigation Button Bar

These are the buttons that let visitors navigate your site. You can change font, font size, color, fill, and outline of buttons. The button names can not be changed.

The “button bar” can run horizontal or vertical and be spread out by: setting the interface to move/load mode, and activating the element. Then, move the mouse towards the lower right hand corner. When it changes to the resize icon, click and drag to resize/position the buttons.

For custom buttons, design your custom buttons and include the shapes as part of your page's background image. Position them so that the type of the button bar can be aligned over them once the background is uploaded. (Use a print screen of the interface to help in positioning.) Once your background is uploaded, make sure your button text is positioned directly over your custom buttons. Set your buttons to have “no fill and no border”. (text only buttons)

For buttons with custom fonts, set your font color to “none” and include the names as part of the button in your background. Note: Try different fonts/font sizes to get your “invisible” button text to take up the same space as your custom button text.  This will make it easier to “click” your custom buttons. (Find the right size/font, then set the font color to “none”.)

Selecting ELements:

If not currently active, “double clicking” an element on your page will “unglue” or activate it. To deactivate or “glue down” an element, click anywhere on your pages background, on another element, on the active elements button on the element bar, or by simply pressing the ESC key.

Status Bar: [Show Me]

The status bar is the bottom tool bar at the top of the interface. When no element is selected or “active”, the buttons on this bar are for the options that can be used/applied to the page or the site as a whole.(Except for the settings button, which sets both individual page and site settings.)

The status bar can be either green or pink, depending on the current mode of the editor. If an element on the page is “active”, then the buttons displayed on the status bar are for options that can be applied to that  “active” object… not the page in general.

Active ELements:

Activated elements are identified by their color-coded boarder. If the interface is set to “move/load” mode, the border around the active element, the status bar, [Show Me] and the elements button on the element button bar will be green. If the interface is set to “edit” mode, then the border around the active element, the status bar, and the elements button on the element button bar will be pink.

Moving ELements:

To move an element already on your page, double click the element to activate or “unglue” it. Set the user interface to the green “move/load” mode by clicking the green “move/load” button. [Show Me]

Once “activated”, move your cursor over the element. Click, hold, and drag the element to its new location.

Most elements can be moved by clicking anywhere on the active element. Some elements, due to their complexity, require click and holding on the “activation boarder” of the object to move them. If you are having trouble moving an item, double click on the edge of the object, then click on the border to move it.

Users can also move selected elements using the arrow keys on their keyboard.
Note: arrow keys function in both “move/load” and “edit” modes.

Resizing ELements:

To resize an element already on the page, double click the element to activate or “unglue” it. Set the user interface to the green “move/load mode” by clicking the “move/load” button. [Show Me]

Once selected and “activated”, move your cursor to the lower right hand corner of the element. You should notice your cursor change. When this happens, click, hold, and drag your mouse to resize the element.

If you wish to keep the current proportions of the element while you resize, press and hold down the shift key while resizing. Note: All elements are resizable. All elements have a minimum size.