You are eager to get that organizer created and feel that you should already know how to do it. This is natural. You think "When I run into a problem, that's when I will read or learn the instructions". This works, but often you miss out on things because you are not even aware that they exist. As a result things can look difficult when you want to do something different.

Spend some minutes understanding the basics and this will SAVE YOU TIME and even spare you some pain.

There are just a few things to know, and then "LET THE ADVENTURE BEGIN".

1. Pressing Tabs

The main tabs are SELECTION, ORGANIZER EDIT and ORGANIZER VIEW. Pressing these tabs will open up sections of the organizer.

2. Pressing Browser Back arrow_back  and Forward arrow_forward  buttons

If you are in the tab ORGANIZER EDIT and before that in SELECTION, then pressing the 'browser back' button will return you to SELECTION. Pressing the 'browser forward' button will return you to ORGANIZER EDIT. Pressing the 'browser back' button multiple times will return you to where you were before that for example. If you have come from SELECTION, ORGANIZER EDIT, IMAGES, ORGANIZER EDIT, CONTENT, ORGANIZER EDIT then pressing the browser back button 3 times will return you to IMAGES.

3. Pressing menu items in the Toolbar

Pressing CONTENT will bring to a page that will let you search for MY HERO content. Pressing TEXT will bring you to a page that allows you to create a Text item. etc.

As your organizer grows in size you will want to be able to move rapidly from the top of the organizer to the bottom of the organizer or vice-versa without having to scroll. You might event want to move to somewhere in the middle of your organizer.
  1. Go to Top or Bottom buttons

    In the "PAGE ACTIONS" toolbar under the heading "NAVIGATE" there is a button to move to the top and another to move to the bottom.

    Move to top or bottom of organizer


  2. Move to item

    There is an input field called Position. Entering a number (for example 12) will bring you to the 12th element on the page. You don't have to be exact.

    Move to an Element Position


  3. Select using ARRANGE

    By selecting ARRANGE in the toolbar, you will be brought to a page where all of your items are listed in a grid. Find the item you want to move to in the grid and then press the Back Arrow key at the end of the grid line. You will be returned to the Edit page and positioned at the element you selected.

    Move to an Element Position using Arrange


Right clicking your mouse usually opens up a menu of items that you can select from.

Right clicking an element on the organizer page works together with the ITEM ACTIONS Tool/Menu bar. When you right click an item, the name of the item you clicked appears in yellow under the sub-heading "FORMATTING";

Depending on what element you selected the FORMATTING choices you are presented with will change.

Actions that can be done using right-click
  • Alignment Horizontal - LEFT, MIDDLE, RIGHT
  • Forcing/un-forcing next element to start on a new row
  • Editing the text or url of Images, Links, Text
  • Positioning Image Text at the Top/Bottom of the image
  • Changing the Width, Height and vertical position (link only) of an element
  • Changing the size of media content to Small, Medium or Large
  • Viewing media content
  • Deleting (removing) an element from the page
  • Undoing a delete of an element
  • Convert a Media content Item so that it behaves like an Image
  • Feature an image that is the thumbnail of a media content item
  • Upgrading an image to a higher-resolution (only shown if not already done)
  • Assigning an image on the page to be the Organizer page thumbnail
There are items on the organizer page that can be dragged. This means their position on the screen can be changed. This is done by positioning your mouse pointer over the item to be dragged and then clicking the left-mouse button. If the item can be dragged it will become transparent (you can see through and see what is underneath). By holding the left-mouse button down and moving your mouse you can re-position(drag) what you selected to another location on the screen.
Dragging items
Draggable elements are:
  • Toolbar
  • Help Pages
  • Formatting Dialog screens

Elements on the organizer edit page can be dragged and then DROPPED onto other elements of the page. The element that was dragged takes the place of the element that was dropped onto. The element that was dropped onto moves down one location (position) on the page. IMPORTANT! Dropping ONLY works by dragging an element lower on the page to an element higher on the page or dragging an element higher on the page to one lower on the page, separated by at least ONE element.

  • Dropping on the edit page

    When an item to be dragged is selected, its background will turn green; also a smaller transparent version of the item to be dragged appears. As the item is dragged over other items that can be dropped on, the backgrounds of those items will also turn green.

    When an item to be dragged is selected, its background will turn green; also a smaller transparent version of the item to be dragged appears. As the item is dragged over other items that can be dropped on, the backgrounds of those items will also turn green.

  • Dropping on the ARRANGE page

    When you have lots of elements page, dragging and dropping on the arrange page is easier and faster than on the edit page.

    When an item to be dragged is selected, a transparent item (gridline) of the item to be dragged appears. Drag the item to the position in the grid where you would like it to be and then release the left-mouse button.


  • Dropping image into Dropzone

    When you are uploading images from your own computer or images you have stored on the web, you can drag these images into an image dropzone and drop them there.













An Organizer page consists of a Header, which can optionally be hidden, and media content which consists of 1. MY HERO content such as stories, art,audio, film and other organizers and, 2. content that you create such as Dividers, Text, Images and Carousels.

There is a lot of freedom as to how to present your content. As a result some of the formatting choices you make will affect other elements on the page in some un-predictable way. When this happens you need to move elements around or change a size or change a position to get the presentation you would like. For example, the size of an element affects how elements that come after it are presented.

The position of an element can be changed by alignment (align left, align middle and align right).

An element can be forced to start on a new row. IMPORTANT! Sometimes Media Content does not flow continuously from one row to the next.This can be fixed using "Follow by new row".


MY HERO content (stories, art, audio and film) are layed out in a grid pattern that consists of rows and columns. Each media element should have a picture that is used to represent that element (thumbnail) as well as a title and summary. Content can be displayed in 4 columns (small), 3 columns (medium) and 2 columns (large). The size of the media thumbnail is adjusted according to the size selected.

4 Across - small
3 Across - medium
2 across - large


The layout you want to use can be set using the PAGE ACTIONS toolbar under the heading PAGE CONTENT IMAGE SIZE. This will affect each MY HERO media element on the page unless you have assigned an element to be a different size.

Setting the Page Image Size



Overriding page settings on a media item
The size of an individual media element can be changed. This can be done by selecting the item with a right mouse click. Under ITEM ACTIONS Toolbar and sub heading FORMATTING there will appear a section called MEDIA CONTENT. There you can choose the size you desire. If you want to set the size back to default page behavior (the size you have selected for the page), then select default.
Setting an individual Image Size
Setting the Indvidual Image Size


The size of MY HERO Audio content is either medium or large, as it has its own unique layout.

Except for Dividers, all other elements (Text, Images, Links, Carousels) can be resized.

Changing Sizes of Images

An images size is controlled by its width. By adjusting the width of the image, the height of the image will change accordingly. This is done to maintain aspect-ratio ( elements on the image are not bent out of shape because of resizing). Depending on the size of the original image it will not be enlarged beyond its maximum size. Using the size more space than the image itself can be taken up on the page. For example, the maximum width of an image could be 250px. The space occupied by that image on the page could be set to 800px. The 250px image will be centered in this space. By changing the amount of space taken up by an image you can control if other items are allowed next to the image or not.

Resizing and Image


Changing Sizes of Text Areas

A text area has a minimum width 100px and a maximum width of 990px. It also has a minimum height of 100px and a maximum height of 1600px. Based on what you have placed in the text area the dimensions can be changed accordingly.

Text before Resize
Text after Resize


Changing Sizes of Links

A Link area has a minimum width 100px and a maximum width of 990px. It also has a minimum height of 100px and a maximum height of 800px. A link can also be vertically aligned inside the area that has been defined for the link

Link before Resize
Link after Resize



1. Your organizer is AUTOMATICALLY saved as you make changes to your work. This is YOUR copy of the organizer. Your work will be available to you on any of the devices you choose to work on your organizer. It will be there, 1 hour, 1 day, 1 week or 6 months from when you last worked on it.

2. Your organizer is PERMANENTLY saved on the MY HERO Server, BUT THIS IS NOT AUTOMATIC. You have to tell Organizer that you want to save it and this is done by pressing the SAVE button on the toolbar. The approval of your organizer is based on what has been SAVED to the MY HERO server.

3. When you first create an organizer, it is assigned a number and the initial organizer is created on MY HERO server. Until you SAVE your organizer, it will remain empty. An advantage of SAVING your organizer is the ability to fall back to an earlier SAVED version. You make changes on your own copy of the organizer and if you don't like what you have done, you can replace your version with the version saved on MY HERO.

4. You can VIEW your organizer as you have created it by selecting YOUR VIEW. Thus, as you work you will be able to see how the organizer will be presented. You can also VIEW the organizer as it is currently SAVED on MY HERO.

5. To restore your version of the organizer back to how it is on the MY HERO server, you can choose the RESTORE-FROM MY HERO. You can reverse this after it has been done and go back to your local copy.

Press SAVE-MY HERO on the toolbar to save your work to the MY HERO Server. This PERMAMENTLY saves your work.

When you press SAVE-MY HERO you should receive a green success message on the right-hand top of your screen confirming a successful save.
It occasionally happens that the save is unsuccessful. You will receive a red-alert on the right-hand top of your screen. When this happens, the handling is as follows: RELOAD your browser tab.
This effectively reloads the Organizer and returns you to where you left off. Now press SAVE again. If all is well, you should now receieve a green success message.

Press MY HERO VIEW on the toolbar to see your organizer AS IT IS STORED ON THE MY HERO SERVER.

Your organizer will now be rendered by the MY HERO Server. This is what users will see and experience when they look at your organizer after it has been published.

Rendered Organizer


The organizer will be rendered under the ORGANIZER VIEW tab. You will see a Return button at the top of your organizer - pressing that will return you to where you came from. You can also press the browser go back button if the return button does not respond.

You will not leave the Organizer program when you click on a story or a film in your organizer. The story or film or artwork will appear with a heading in Return to Organizer. Pressing this will return you to your viewed Organizer page.

Viewing Organizer Content


When you press on a link that is external to MY HERO a new browser window will be opened up.


Press RESTORE-FROM MY HERO on the toolbar to replace your own version of the organizer with the SERVER version of organizer.


The steps of Refreshing
Current Server Version using VIEW Organizer
Local Organizer after changes
Refresh Local version from server
Local version after refresh from server


In addition to the images that are connected to MY HERO content, images that have been previously uploaded to MY HERO, you can upload your own images or internet images to MY HERO and then have these images included on your page. You can also use images that you have previously uploaded using organizer or during page create.
It is important that when uploading your images have a high resolution. This will ensure the best quality possible when your images are rendered. Each image uploaded must also be correctly credited. If it is an image of art you have created then provide your own name as the credit. If it is an image of someone else's art, then provide the name of the artist as credit. if it is your own photo of some scene or person, then provide your own name.

There are several things that can be done with images.
1. Images can be upgraded in quality. This applies to older organizers where the image is presented as a thumbnail with a maximum width of 125px. If MY HERO has that image at a higher resolution/size, then choosing UPGRADE IMAGE on the toolbar will result in replacing the image with an image width of 300px. This size will allow you to scale the image from small, medium and large and you will see the size of the image changing accordingly.

2. Images can be featured. For example, you have an image associated with a story that you really like and want to have that image featured separately. When this is done the image is featured at its original size. It can then be scaled down to the size you would like it to be. WHen the organizer is presented, clicking on this image does not link anywhere.

3. Images can be featured and linked.
In this case, the image associated with the Story, Art, or Film is featured and the link to the page content remains. So, when viewing the organizer page clicking on the image will bring you to the content.