Page Information and Elements

In this chapter you will find information on the three areas on the left side of the HTML5 Editor:
  1. Screen
  2. Add Elements
  3. Screen Elements

1. Screen

Add Page

Clicking the Plus Button duplicates the template and provides it as a additional page for the purpose of further editings.

Remove Added Page

Once you have added a further page, the program enables the Minus Button for the purpose of removing it again if needed.

Transition

Using this feature allows you to choose an Animation that will be shown as a transition to the next screen.

To do this, open the drop-down menu and select one of the provided menu items.

Orientation

Using the selection field Orientation
allows you to specify whether you edit
the template for a horizontal or for vertical representation.

The edits you have done in the other alignment will be retained.

Duration

In the input field Duration you can determine how long the screen should be played. When you touch the input field with the mouse pointer, two opposite arrows appear, which you can use to count up or down the preset time.

Alternatively, after clicking in the field, enter an exact numerical value.

Grid

The correct alignment and arrangement of images and text elements is an important aspect in the design of an attractive screen. Therefore, you can display a help grid in the Preview Area.

To do this, click on the button on which an Eye is shown. By clicking on the button with the Magnet Symbol, the auxiliary grid is given a magnetic property.

The size of the boxes of the grid can be defined by entering a numerical value in the input field.

By clicking on the small colour patch you open a colour palette from which you can choose the colour of the grid. You can also choose between the options → top left -center - Golden section - Fibonacci.

Fibonacci and Golden Section

These two arrangements are generally perceived as beautiful and harmonious, and orientation towards them makes it easier to design the image or screen.

Screen Representation

When you open a screen in the Editor for editing, all media, text fields, etc. used are listed as an item in the item list. Once you click an element in this list, the respective editing options available for editing are activated in the preview area as well as in the right column of the program window.

2. Add Elements

Add Element

This elements are provided:

  1. Textfield
  2. Rectangle
  3. Ellipse
  4. Polygon 
  5. Media
  6. Audio 
  7. Library 
  8. QR Code
  9. Website

Library

Clicking the →  button opens the Library which is divided into:

  1. An area for a template related Mediapool, where all media is stored as long as it is used in the template. As soon as you confirm the deletion of an item by clicking on Yes in the confirmation prompt and by clicking on the Save button afterwards, it will be removed from this pool.
  2. An All Users area that can be accessed by all users of this account and in which you as administrator are allowed to store elements for general use by drag & drop.
  3. The My own Templates area where all items of this template are saved after you have selected the Copy to Library option.
  4. An area provided for each sub user, where the administrator can drag and drop items for custom access.
  5. Designing tools like BordersOverlaysShapesSocial Network Icons and Widgets.

3. Screen Elements

Listed Element

  1. Clicking a listed element enables it for editing. The right section of the program window provides corres- pondingly the analog editing options.
  2. Clicking this button causes this element not to appear as an element in the XML and also not in the Mode View, so it cannot be edited.
  3. Clicking this button makes the element invisible.
  4. Using this button locks the element. This means that the position of the element cannot be changed either. Furthermore, the element can no longer be selected directly in the editing area, but only via the item list.
  5. Use this button to remove the element from the screen after confirming the confirmation prompt.

Arrange Elements

The elements can be moved in order using drag & drop and thus moved forwards or backwards in the layer.