Formatting and arranging elements // University of Oldenburg

The individual content modules of a page can be positioned and formatted in various ways. In addition to frame and background properties, accordion effects (opening and closing of the associated content) can be used. The elements can also be placed in column constructs. The necessary "air" around them is provided by spacing, which can be set above and/or below elements.

Distances upwards and downwards

Depending on their nature, it can be a good idea to give content elements a certain amount of space between them. The automatically set spacing corresponds approximately to a normal paragraph spacing (see the following coloured elements as an example), but if necessary this spacing can be reduced or increased to emphasise togetherness or separation.

To do this, assign different values to the "Spacing before" and "Spacing after" fields in the appearance tab of the respective content element.

As can be seen above and below this element, a little "air" can do a lot of good. :-)

Highlighting with coloured background and frame

Content elements can be highlighted against the other content on a page using a colour background or frame line. Please note, however, that this method must be used in moderation, otherwise it loses its purpose! Therefore, only emphasise selected elements so that a balanced overall picture is created in combination with the other ("normal") elements.

Here are the available variants:

Appearance "light grey background"

A light grey background colour was assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

Appearance "light green background"

A light grey background colour was assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

Appearance "light blue background"

A light grey background colour was assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

Appearance "medium blue background" (incl. white font)

A light grey background colour has been assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

This style element is still in preparation and is not yet generally available.

Appearance "dark blue background" (incl. white font)

A light grey background colour has been assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

This style element is still in preparation and is not yet generally available.

Appearance "With frame"

A light grey background colour was assigned to this element via the "Appearance" tab and the "Indentation and frame" setting there.

Appearance "Info box"

This element has been turned into an "info box" via the "Appearance" tab and the "Frame" setting there. This formatting is suitable for highlighting shorter information due to its strong colour.

Visual demarcation: line before or after

This element, which is introduced with a paragraph heading, is given the value "Line in front" in the "Indentation and frame" property in the "Appearance" tab.

With line afterwards

This element, which is introduced with a paragraph heading, is given the value "Line after" in the "Indentation and frame" property in the "Appearance" tab.

Folding elements

Content elements can be collapsed. This means that only their headline is visible and acts as a button that can be used to expand the content. In this way, several content sections can also be presented clearly and are easy to understand and use, especially on smartphones.

Make a content element expandable by opening it for editing and ticking the "Expandable" box in the [Appearance] tab.

You can also set whether the content element should be expanded by default when the website is loaded. To do this, activate the "Open" switch on the right-hand side. This can be useful, for example, if there are several successive expandable elements on the page, one of which (e.g. the first) should already show its content immediately.

Important information and application examples for pop-up units

Using drop-down elements, extensive information can be clearly structured and made quickly accessible.

This is particularly effective when several pop-up elements are used together or nested within one another:

Several hinged elements

If several elements are made expandable in this way, it is possible to work with the headings in a space-saving manner, the content of which can be made visible if interested.

Directly consecutive drop-down elements are automatically displayed with reduced spacing between them and thus have the effect of a compact navigation menu.

Nested pop-up elements

As you can see here, expandable elements can also be nested inside one another, creating sub-unfoldable elements - here we are in one of these.

To do this, first create a container of the type"1-column", add the desired heading that is to function as an expand button and make it expandable by activating the checkbox described above. This creates a kind of expandable cover.

Further elements can now be inserted within this container, which can also be made expandable.

Folding element with "info box" frame

If a content element is marked as expandable and at the same time receives the "Info box" frame look, the appearance changes, as can be seen here.

Arrange elements: In columns or tiled

Column constructs

Here: 2-column (50/50)

Column constructs (element type "Container") can be used to place content areas next to each other. The container element provides an invisible frame in which content elements can be inserted.

Different variants are available, e.g. two or three columns or with different width ratios.

Note: On smartphones, the columns are automatically displayed one below the other instead of next to each other to save space.

It is often not necessary to use column constructs, but occasionally smaller content elements can be placed compactly.

As always, the same applies here:

Please do not overdo it!

Create column constructs

[New content element] → [Container] → Select the desired variant and save/close the element.
Then insert content elements within the contained column(s).

Column constructs and smartphones

Please note: Even if the column constructs also work in principle on smartphones by displaying the columns one below the other instead of next to each other, they should be used with caution. Be sure to check how your column construct is then displayed on a smartphone (or on a computer with a correspondingly narrow browser window)!

Two-, three- or four-column flow of tiled elements

Illustration: Four content elements in a two-column tiling - in principle they "flow" like words in a paragraph of text.

If several content elements are to be arranged like tiles that are displayed in two, three or four columns, a different method is recommended: the content elements flow dynamically into a grid-like arrangement of two to four columns of equal width .

Features

Due to the horizontal flow (see arrows in the accompanying illustration), elements located higher up remain at the top even in the (single-column) mobile display.
If a content element is removed or added, the subsequent elements automatically move one position forwards or backwards.
On mobile devices, the tiling is automatically based on the available space. If the display is in three columns on a large screen, for example, it automatically changes to two columns on a tablet and to one column on a smartphone.

Example of a two-column tiling:

Press and Communication (editorial team)

Procedure

Create a grid element of the type "1-column". (A multi-column grid element is deliberately not used here, as the content should be positioned dynamically).
In the "Advanced" tab of the grid element in the "CSS class" field for the text halb (two-column) or drittel (three-column) or viertel (four-column) for the text. (Important: Only assign one of these values!)
Save and close the grid element.
Now create your content elements within this grid element. These are then arranged in tiles.

Centre columns vertically

If several elements are placed next to each other, they should possibly have a common centre instead of being aligned at the top edge. To achieve this, the column construct (grid element) is assigned the CSS class centred.

Fig.: Setting the grid element to vertical centring

Place graphics expanded

If several images(e.g. logos) are to appear next to each other and are to be distributed as loosely and harmoniously as possible across the available width, the CSS class gallery-widened can be assigned to the relevant content element in the [Advanced] tab. The images are then both horizontally expanded and vertically centred.

Important: The total width of the images must not completely fill the available width on the page from the outset, i.e. it must remain smaller so that there is still room to expand the display. If necessary, you can reduce the numerical value in the "Width of each element" field in the [Media] tab in order to reduce the size of the graphics and thus create additional "space".

Here is an example with three graphics whose "Width of each element" has been set to 180px, the "Number of columns" to 3 and the "Position" to Bottom centre:

Special case: Display elements in map look

If several content elements are to be presented as "cards", i.e. similar-looking, framed objects, there is a special solution for this:

Create a content element "Grid Element" -> 1-column.
In the General tab of this element, enter the word " cards" in the"CSS class" field.
Save and close the element.
Now create further content elements within the element. These are then automatically given a frame line and are displayed as follows.