Areas of the Design module

Design module

1. General / Layout properties

If you have more than one layout open, you can use the tabs at the top of the workspace to switch between them. The properties dialog of the layout can be opened by double-clicking on the tab. The size of each area can be adjusted by dragging with the mouse. To do that, position the mouse at the edge of an area until the mouse pointer changes to a double-headed arrow. If there is not enough space in an area to display all of the elements, horizontal and/or vertical scroll bars will appear. Any tab in the module can be closed by clicking on the symbol next to the title. In the View menu, you can select which tabs should be displayed or hidden. If a tab is shown in its own window, you can also anchor it to the right or left of the workspace by dragging the title to the desired position with the mouse. If an entry has been created in the history, the ID of the entry will be shown next to the name of the layout in the tab.

2. Layout

2.1 Structure

When you select an element in the structure, it will be highlighted on the workspace. Its settings will be shown in the Element settings area and can be changed there. The properties dialog can be opened by double-clicking on it. Layout elements can be moved via drag & drop in the layout tree if their arrangement needs to be changed.

2.2 Control elements

Click on this button at the bottom right of the Layout area. The following settings can be modified here:

• General HTML properties
  e.g. body, table or div
• Advanced properties
  e.g. Login, Messages, Datapicker
• Controls
  Style properties that can be assigned in the Applications module on the Style tab in the properties dialog of elements.

If you select something here, the properties will be loaded in the Element settings area. The control elements are ordered by type, such as edit elements or buttons.

3. Elements

Click here for more information.

4. Snapshots

With snapshots, the current layout will be cached at defined intervals. Clicking on a snapshot resets the layout to the state at that specific time.

Open selected snapshot
Opens the layout in the state of the selected snapshot.

Create new snapshot
Makes a snapshot of the layout in its current state. Snapshots can also be commented on via the context menu.

Delete selected snapshot
Removes the snapshot currently selected.

Options
Opens a dialog where the maximum number of created snapshots and the interval between automatic snapshots can be defined.

5. Search

Here, you can search for the title of an element, a CSS selector or for properties in the CSS by selecting "CSS".

Search field

Enter a search term here.

Drop-down list

The following functions are available for the search here:

• CSS
  Searches for element properties in the CSS.
• CSS selector
  Searches for the entered CSS selector.
• Title
  Searches for the element title.

Search
Triggers the search. Hits will be shown beneath the search field. If you click on a hit, the corresponding element will be highlighted in the Layout structure.

Search history
Opens a window with a list of the most recent searches. Click on a search action to repeat it.

6. Workspace

You can arrange the individual elements of your layout in the workspace, which you will see in the middle area.

7. Element settings

Here, you can find the two buttons Styles and Options. These can be used to switch between the CSS properties (Styles) of elements and the optional settings (e.g. title, size etc.).

Style

Click here for more information about this area.

Options

Click here for more information about this area.

8. History

Click here for more information about this area.