Navigation

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.

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.

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.

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

Webf6master (inte+2trnetoper@uol.de) (Stand: 13.05.2020)