Page layout

The basic structure of a page is created by placing various template elements on the page using drag & drop.

A completely empty page initially contains only the red-colored Base Container.

Layout areas can be dragged and dropped into this base 

A layout area creates one or more orange-colored containers in which layout rows can be placed.

Layout rows create blue-colored containers in which content elements can be placed.

The content elements ultimately represent the actual content of the page, e.g., through content sections, lists, media, etc.

In principle, any number of suitable elements can be inserted into each container. For example, several layout rows can be inserted one below the other in a layout area to create a complex page layout.

Layout groups have a special status. They generate predefined layouts for specific areas of application, such as the header or footer of a page. The container in which a layout group can be used depends on the group itself. For example, groups for headers or footers can be stored directly in the base container as layout areas.

The ‘grid’ for page columns consists of a combination of up to 12 possible columns per row.

When displaying a layout row, these 12 possible columns are combined in various ways to form the columns that are actually visible. The numbers in parentheses in the name of a layout row indicate how many of the possible columns in the grid are combined to form a visible column:

• The layout row, Row 1 column (12 - full), takes up the entire available width, i.e., it uses all 12 possible columns.
• Layout rows that create two columns of equal size are called Row 2 columns (6-6).
• Layout rows with two columns of different sizes are, for example, Row 2 columns (9-3) or Row 2 columns (8-4), etc.
• There are also Row 3 columns (4-4-4), Row 4 columns (3-3-3-3), and Row 6 columns (2-2-2-2-2-2).

There are 6 possible screen sizes:

• XS: 552 pixels or smaller – “normal” smartphones
• SM: 553 to 763 pixels – oversized smartphones or small tablets
• MD: 764 to 1013 pixels - tablets, e.g., iPad
• LG: 1014 to 1199 pixels - smaller desktop screens or large tablets
• XL: 1200 pixels or larger - desktop screens
• XXL: 1400 pixels or larger - large desktop screens

Please note that terms such as “desktop,” “tablet,” or “smartphone” are for guidance only and that the template display does not actually depend on the devices, but solely on the available screen width. For desktop devices, this means that the display changes when the browser window is enlarged or reduced. For mobile devices, the screen width changes when the device is held in landscape or portrait mode.

Depending on the screen size, different page elements are arranged differently. For layout rows, the name usually indicates when the elements of the row are displayed completely side by side. Some examples:

• Row 2 columns (6-6) [all display sizes] displays 2 elements side by side in all screen sizes, including on “small” smartphones.
• The Row 2 columns (6-6) [from display size LG] displays the elements one above the other for screen sizes XS, SM, and MD. Only from screen size LG onwards are the elements displayed side by side.