Areas of the Design module

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.

Layout

Structure

When you select an element in the structure, its settings are displayed in the Element settings area. They 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

  • Additional settings

    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.

Elements

Click here for more information.

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.

Create new snapshot

Opens a submenu where a new snapshot can be created. The submenu item Create new snapshot with comment opens a dialog where the new snapshot can be commented. The comment will be shown in the Snapshot area under the date, when the snapshot was created.

Open selected snapshot

Opens the layout in the state of the selected snapshot.

Options

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

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

Here are different functions available for the search.

  • CSS

    Searches for element properties in the CSS.

  • CSS selector

    Searches for the entered CSS selector.

  • Title

    Searches for element titles.

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.

Workspace

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

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.).

Styles

Click here for more information about this area.

Options link

Click here for more information about this area.

History

Click here for more information about this area.