Kontakt

Volker Burggräf
Internetkoordinator

Zwischenüberschrift mit Aufklappfunktion

In diesem Element erhält lediglich die Überschrift eine besondere Formatierung, da für das Element im Reiter "Erweitert" die Aufklappfunktion aktiviert wurde.

Elemente formatieren und anordnen

Die einzelnen Inhaltsbausteine einer Seite können auf verschiedene Weise positioniert und formatiert werden. Neben Rahmen- und Hintergrundeigenschaften können Akkordion-Effekte (Auf- und Zuklappen des zugehörigen Inhalts) eingesetzt werden. Die Elemente können außerdem in Spaltenkonstrukten platziert werden. Für die nötige "Luft" rundherum sorgt man über Abstände, die oberhalb und/oder unterhalb von Elementen gesetzt werden können.

Abstände nach oben und unten

Je nach Beschaffenheit kann es gut sein, Inhaltselementen einen gewissen Abstand zueinander zu geben. Der automatisch gesetzte Abstand entspricht etwa einem normalen Absatzabstand (siehe beispielhaft dafür die nachfolgenden, farblich hinterlegten Elemente), aber bei Bedarf kann dieser Abstand verringert oder vergrößert werden, um Zusammengehörigkeit oder Trennung zu betonen.

Dazu weist man im Erscheinungsbild-Reiter des jeweiligen Inhaltselements den Feldern "Abstand davor" und "Abstand danach" andere Werte zu.

Wie oberhalb und unterhalb dieses Elements zu erkennen ist, tut etwas "Luft" durchaus mal ganz gut. :-)

Hervorhebung durch farbige Hinterlegung und Rahmen

Inhaltselemente können mittels Farbhinterlegung oder Rahmenlinie gegenüber den sonstigen Inhalten einer Seite hervorgehoben werden. Bitte beachten Sie dabei jedoch, dass diese Methode maßvoll eingesetzt werden muss, sonst verliert sie ihren Sinn! Heben Sie daher nur ausgewählte Elemente hervor, sodass sich in Kombination mit den anderen ("normalen") Elementen ein ausgewogenes Gesamtbild ergibt.

Hier die zur Verfügung stehenden Varianten:

Erscheinungsbild "hellgrau hinterlegt"

Über den Reiter "Erscheinungsbild" und die dortige Einstellung "Einrückung und Rahmen" wurde diesem Element eine hellgraue Hintergrundfarbe zugewiesen.

Erscheinungsbild "hellgrün hinterlegt"

Über den Reiter "Erscheinungsbild" und die dortige Einstellung "Einrückung und Rahmen" wurde diesem Element eine hellgraue Hintergrundfarbe zugewiesen.

Erscheinungsbild "hellblau hinterlegt"

Über den Reiter "Erscheinungsbild" und die dortige Einstellung "Einrückung und Rahmen" wurde diesem Element eine hellgraue Hintergrundfarbe zugewiesen.

Erscheinungsbild "Mit Rahmen"

Über den Reiter "Erscheinungsbild" und die dortige Einstellung "Einrückung und Rahmen" wurde diesem Element eine hellgraue Hintergrundfarbe zugewiesen.

Erscheinungsbild "Infokasten"

Über den Reiter "Erscheinungsbild" und die dortige Einstellung "Rahmen" wurde aus diesem Element ein "Infokasten" gemacht. Diese Formatierung eignet sich aufgrund ihrer kräftigen Farbe für die besondere Hervorhebung kürzerer Informationen.

Aufklappende Elemente

Inhaltselemente können eingeklappt werden. Damit ist nur noch ihre Überschrift sichtbar und fungiert als Button, mit dem sich der Inhalt aufklappen lässt. Auf diese Weise können auch mehrere Inhaltsabschnitte übersichtlich präsentiert werden und sind dabei insbesondere auch auf Smartphones gut überschaubar und bedienbar.

Machen Sie ein Inhaltselement aufklappbar, indem Sie es zur Bearbeitung öffnen und im Reiter [Erweitert] das Häkchen "Aufklappbar" setzen.

Aufklappfunktion (Zwischenüberschrift 2)

In diesem Element erhält lediglich die Überschrift eine besondere Formatierung, da für das Element im Reiter "Erweitert" die Aufklappfunktion aktiviert wurde.

Aufklappfunktion (Absatzüberschrift)

In diesem Element erhält lediglich die Überschrift eine besondere Formatierung, da für das Element im Reiter "Erweitert" die Aufklappfunktion aktiviert wurde.

Spaltenkonstrukte ("Raster-Elemente")

Hier: 2-spaltig (50/50)

Mit Spaltenkonstrukten (Element-Typ "Raster-Element") lassen sich Inhaltselemente nebeneinander platzieren. Das Raster-Element stellt dabei einen unsichtbaren Rahmen bereit, worin Inhaltselemente eingesetzt werden können.

Es stehen verschiedene Varianten zur Verfügung, z.B. zwei- oder dreispaltig bzw. auch mit unterschiedlichem Breitenverhältnis.

Hinweis: Auf Smartphones werden die Spalten aus Platzgründen untereinander statt nebeneinander dargestellt.

Oft ist es nicht erforderlich, Spaltenkonstrukte zu verwenden, aber gelegentlich können damit kleinere Inhaltselemente kompakt platziert werden.

Wie immer gilt auch hier:

Bitte nicht übertreiben!

Spaltenkonstrukte erzeugen

  1. [Neues Inhaltselement] → [Gridelements] → gewünschte Variante auswählen und das Element speichern/schließen. 
  2. Anschließend innerhalb der Spalten Inhaltselemente einfügen.

Spaltenkonstrukte und Smartphones

Bitte beachten: Auch wenn die Spaltenkonstrukte grundsätzlich auch auf Smartphones funktionieren, indem die Spalten dann ggf. untereinander statt nebeneinander dargestellt werden, sollten sie mit Bedacht eingesetzt werden. Prüfen Sie auf jeden Fall, wie Ihr Spaltenkonstrukt anschließend auf einem Smartphone (bzw. mit entsprechend schmal eingestelltem Browserfenster auf dem Computer) dargestellt wird!

Spalten vertikal zentrieren

Wenn mehrere Elemente nebeneinander stehen, sollen sie evtl. eine gemeinsame Mitte haben, anstatt an der Oberkante ausgerichtet zu sein. Um dies zu erreichen, weist man dem Spaltenkonstrukt (Gridelement) die CSS-Klasse "zentriert" zu.

Grafiken geweitet platzieren

Werden sollen mehrere Bilder (z.B. Logos) nebeneinander erscheinen und dabei möglichst locker und harmonisch über die verfügbare Breite verteilt werden, kann dem betreffenden Inhaltselement im Reiter "Erweitert" die CSS-Klasse galerie-geweitet zugewiesen werden. Die Bilder werden dann sowohl horizontal geweitet platziert als auch vertikal zentriert.

Wichtig dabei: Die Gesamtbreite der Bilder darf in der Summe die verfügbare Breite auf der Seite nicht von vornherein komplett ausfüllen, muss also niedriger bleiben, damit für die Weitung der Darstellung überhaupt noch Raum vorhanden ist. Ggf. können Sie im Reiter "Medien" den Zahlenwert im Feld "Breite jedes Elements" verringern, um die Grafiken zu verkleinern und damit zusätzliche "Luft" zu schaffen.

Hier ein Beispiel mit drei Grafiken, deren "Breite jedes Elements" auf 180px eingestellt wurde, die "Anzahl der Spalten" auf 3 und die "Position" auf Unten mittig

Linie davor oder danach

Dieses Element, das mit einer Absatzüberschrift eingeleitet wird, bekommt im Reiter "Erscheinungsbild" in der Eigenschaft "Einrückung und Rahmen" den Wert "Linie davor".

Mit Linie danach

Dieses Element, das mit einer Absatzüberschrift eingeleitet wird, bekommt im Reiter "Erscheinungsbild" in der Eigenschaft "Einrückung und Rahmen" den Wert "Linie danach".

Sonderfall: Karten

Sollen mehrere Inhaltselementen als "Karten", also ähnlich aussehende, umrahmte Objekte präsentiert werden, gibt es hierfür eine besondere Lösung:

  1. Ein Inhaltselement "Grid Element" -> 1-spaltig erzeugen.
  2. Im Allgemein-Reiter dieses Elements im Feld "CSS-Klasse vergeben" das Wort "karten" eintragen.
  3. Das Element speichern und schließen.
  4. Innerhalb des Elements nun weitere Inhaltselemente erzeugen. Diese erhalten dann automatisch eine Rahmenlinie und werden wie folgt dargestellt.

Karten-Darstellung von Dateilinks

Dem Dateilinks-Element die CSS-Klasse "karten" zuweisen, wie oben beschrieben

Internetkoordinator (Stand: 28.10.2020)