Beispiel Zweispalter
Willkommen auf der Beispielseite. Hier findest du einen beispielhaften Aufbau, wie er für viele Seiten Sinn ergibt - du kannst die Seite kopieren und dann deine Inhalten entsprechend anpassen. Wenn du mit dieser Vorlage arbeiten möchtest, gehe in der Seitenstruktur mit einem Rechtsklick auf die Seite “Beispielseite kurz mit Bild” und wähle “kopieren”. Füge die Seite danach mit erneutem Rechtsklick “einfügen in” (Unterseite) oder “einfügen nach” (weitere Seite auf gleicher Ebene) an der Stelle ein, wo deine neue Seite liegen soll.
In deiner neu kopierten Seite kannst du alle Elemente löschen, die du zur Erstellung deiner Inhalte nicht brauchst. Wenn du weitere Elemente benötigst, klicke auf die Beispielseite “Verfügbare Inhaltselemente”. Drücke am Element, das du in deine Seite einfügen möchtest, auf die drei Punkte und dann auf “kopieren”. Danach gehe zurück auf deine Seite. Hier findest du an allen Stellen, wo das Element eingefügt werden kann, ein Klemmbrett. Mit Klick darauf kannst du das Element an der gewünschten Stelle einfügen. Falls das kopierte Element inaktiv ist, aktiviere es über den Schieberegler.
Wenn du an dieser Stelle weniger Text hast, kannst du auch auf einen Einspalter wechseln. Kopiere dir diesen von weiter unten auf dieser Beispielseite oder aus der Beispielseite “Verfügbare Inhaltselemente”. Du kannst ihn auch in der Seitenstruktur über die Schaltfläche “Neuen Inhalt erstellen” einfügen. Wähle unter “Container” das Element “Einspalter mit 80% Breite” aus.
Die Überschrift dieses Zweispalters kann bei Bedarf verborgen werden. Wähle dazu im Seitenaufbau das Element “Zweispalter” mit dem Stift an und klicke unter dem Reiter “Allgemein” bei Überschrift im “Typ”-Drop-Down-Menü “verborgen” an.
Um im Header deiner Seite Sprungmarken einzufügen, gehe wie folgt in deiner Seitenstruktur vor: Gehe vor jedem Element, zu dem die Sprungmarke führen soll, auf “Neuen Inhalt erstellen”, wähle "Spezielle Elemente" und dann “Versteckte Sprungmarke”. Gib der Sprungmarke bzw. den Sprungmarken einen Namen. Die gesetzte(n) Sprungmarke(n) erscheinen automatisch oben im Header-Bereich. Sie sind nur dort sichtbar; im weiteren Aufbau der Seite erscheinen sie nicht.
Beispiel Highlight-Box
Mit der Highlight-Box kannst du einzelne Bereiche optisch durch einen hellblauen Hintergrund hervorheben. Dies eignet sich z.B. gut für kurze, wichtige Textpassagen.
Für den Text dieses Beispiels ist ein Einspalter mit 80% Breite ausgewählt. In die Highlight-Box können auch andere Inhaltselemente eingefügt werden, z.B. Zweispalter. Bei allen Inhaltselementen können die Überschriften verborgen werden. In der Regel sind sie jedoch hilfreich, um die Seite zu gliedern.
Beispiel für ein Text-Medien Element
Hier ist Platz für deinen Text. Das Bild kannst du rechts oder links neben dem Text anordnen. Achte darauf, dass die Länge des Textes in der Desktop-Ansicht nicht über die Höhe des Bildes hinaus geht. Bei längeren Texten füge lieber einen neuen Ein- oder Zweispalter unter dem Text-Medien-Element ein.
Wenn du eine Bilderunterschrift einfügen möchtest, klicke in der linken Menüleiste auf “Dateiliste”. Füge hier dem Bild deine Bildunterschrift hinzu und gehe danach wieder zurück auf deine Seite. Die Bildunterschrift erscheint dann automatisch unterhalb deiner Bilder. Bitte füge die Bildunterschriften nicht im Text-Block neben dem Bild ein.
Beispiel Dreispalter Text Bild mit Icon
Merkmal 1
Merkmal 2
Merkmal 3
Beispiel Einspalter und Trenner
Dies ist ein Beispiel für einen Einspalter, der über den Container “Zentrierte Inhalte mit 80% Breite” erzeugt wurde. Für Einspalter sollte immer dieser Container verwendet werden, da sonst der Text auf dem Desktop zu breit und damit schlecht lesbar wäre.
Die “Trenner”-Linien oberhalb und unterhalb dieses Text-Blocks kannst du setzen oder entfernen - so wie es für deinen Inhalt bzw. für das Design deiner Seite passt. Sie bieten sich vor allem dann an, wenn du
- inhaltlich eine klare Abgrenzung erzeugen möchtest, oder
- die Elemente über und unter diesem wenig visuelle Reize beinhalten. Dann können solche Trenner als optisches Stil-Element eingesetzt werden.
Bitte gehe insgesamt sparsam mit den Trennern um und wähle sie nur dort, wo sie aus den genannten Gründen sinnvoll sind.
Trenner sind eigene Inhalts-Elemente und können im “Baukasten” der Seite hinzugefügt werden. Wähle hierfür unter “Neuen Inhalt erstellen” den Reiter “Spezielle Elemente” und dann “Trenner”.
Beispiel Galerie
-
Jana Zöller -
Jana Zöller -
Jana Zöller -
Jana Zöller -
Jana Zöller -
Jana Zöller -
Jana Zöller -
Jana Zöller
Beispiel Akkordeon
Bitte achte beim Anlegen neuer Akkordeon-Elemente darauf, dass die Überschrift des Text-Elements verborgen ist. Die Container-Gruppe hat bereits eine Überschrift (im Beispiel: “Akkordeon-Element nur Text”). Hätte das Text-Element auch noch eine, dann gäbe es zwei, die semantisch in der Regel nicht notwendig bzw. sogar irreführend sind, weil sie direkt hintereinander kommen.
Bitte achte beim Anlegen neuer Akkordeon-Elemente darauf, dass die Überschrift des Text-Medien-Elementes verborgen ist. Die Container-Gruppe hat bereits eine Überschrift (im Beispiel: “Akkordeon-Element Text und Bild”). Hätte das Text-Medien-Element auch noch eine, dann gäbe es zwei, die semantisch in der Regel nicht notwendig bzw. sogar irreführend sind, weil sie direkt hintereinander kommen.
| Beispiel Spalte 1 | Beispiel Spalte 2 | Beispiel Spalte 3 |
|---|---|---|
| Beispiel Zeile 2 | Beispiel Zeile 2 | Beispiel Zeile 2 |
| Beispiel Zeile 3 | Beispiel Zeile 3 | Beispiel Zeile 3 |
| Beispiel Zeile 4 | Beispiel Zeile 4 | Beispiel Zeile 4 |
| Beispiel Zeile 5 | Beispiel Zeile 5 | Beispiel Zeile 5 |
Beispiel Video
Hier ist Platz für eine kurze Beschreibung zum Video. Bitte achte darauf, dass dein Video über Untertitel verfügt.
Beispiel Download-Bereich
- Beispielvideo Big Buck Bunny (mp4 - 30 MB) Beschreibung Beispielvideo
- Beispielaudio (mp3 - 494 KB) Beschreibung Audiodatei
- Beispielbild (png - 663 KB) Beschreibung Beispielbild
- Beispiel PDF (pdf - 36 KB) Beschreibung Datei
