edu-sharing documentation

Layout der Themenseiten

Alle Themenseiten bestehen aus Widgets, die in so genannten “Swimlanes” also Schwimmbahnen angeordnet sind.

Die Swimlanes sind also so zusagen die Zeilen Ihres Layouts und enthalten 1-3 Spalten zur Einbettung von Widgets.

Im Folgenden soll gezeugt werden, wie Swimlanes erstell, bearbeitet und gelöscht werden können.

Swimlanes erstellen


  1. Aktivieren Sie den Bearbeitungs-Modus der Themenseite

    image-20260804-094818.png
  2. Betätigen Sie die “+” Schaltfläche, dort im Layout, wo die neue Zeile erscheinen soll.

    image-20260804-095121.png
  3. Wählen Sie nun, welchen Typ die Swimlane haben soll und welches Layout gewünscht ist.

Die Inhalts-Elemente

Das “Bereichselement”

Das Bereichselement ist die einfachste Form der Swimlanes.

Es besteht aus einer Zeile, die je nach Spalten-Layout zwischen einem und drei Widgets enthält.

image-20260804-100338.png
ein Bereichselement mit Platz für 3 Widgets im Bearbeitungsmodus


image-20260804-100815.png
ein Bereichselement in der Vorschau

Das “Akkordeon-Element”

Mit Hilfe des Akkordeon-Widgets können Themenseiten kompakter gestaltet und für den/die Seitenbesucher*Innen lange Scroll-Wege vermieden werden.

Die Swimlanes lassen sich hierfür auf- und zuklappen.

So können beispielsweise thematisch zusammengehörige Punkte übersichtlich zusammen dargestellt werden und passende Materialien für die jeweilige Phase gebündelt werden.

Auch die Akkordeon-Elemente bieten verschiedene Spalten-Layouts.

image-20260804-101725.png
ein aufgeklapptes Akkordeon-Element mit Schaltfläche zum Umschalten
image-20260804-101953.png
ein geschlossenes Akkordeon-Element mit Schaltfläche zum Umschalten

Das “Ankermenü”

Das Anker-Menü hilft Besucher*Innen der Themenseite sich schnell zu der gewünschten Stelle auf der Seite navigieren zu können. Hierfür wird pro Ankermenü ein Button unterhalb des “Heros” der Themenseite eingefügt. Jeder Anker-Button stellt einen Absprung zu der dazugehörigen Swimlane dar.

An den Sprungmarken wird die Anzahl der in der Swimlane enthaltenen Inhalte angezeigt.

image-20260804-102932.png
Sprungmarken zu zwei Anker-Elementen

Die Bezeichnung des Anker-Buttons wird automatisch aus der Überschrift des Inhaltselements übernommen. Achte daher bei der Bezeichnung darauf, dass diese nicht zu lang wird und noch gut im Ankerbutton dargestellt werden kann.

Im aktivieren Bearbeitungs-Modus können Sie die Farbe der Sprungmarken anpassen. Nutzen Sie hierfür den Farb-Button an einer der Marken.

image-20260804-121310.png
zwei Sprungmarken mit Button für die Farbauswahl


Swimlanes bearbeiten

Existierende Swimlanes lassen sich bearbeiten. Folgende Änderungen sind möglich:

  • Änderung des Titels der Swimlane

  • Änderung des Typs (Bereichselement, Akkordeonelement, Anker)

  • Auswahl der Widget-Typen pro Spalte

  • Reigenfolge der Widgets

  • Änderung des “Grids” also der Spalten-Struktur


  1. Aktivieren Sie den Bearbeitungs-Modus der Themenseite.

    image-20260804-094818.png
  2. Wählen Sie den Bearbeitungs-Modus der Swimlane aus.

    image-20260804-103756.png


  3. Nehmen Sie die gewünschten Änderungen vor.

    image-20260804-104035.png


  4. Speichern Sie.

Swimlanes löschen

  1. Aktivieren Sie den Bearbeitungs-Modus der Themenseite.

    image-20260804-094818.png
  2. Wählen Sie das “Löschen” Symbol neben der gewünschten Swimlane

    image-20260804-104329.png


Reihenfolge der Swimlanes ändern

  1. Aktivieren Sie den Bearbeitungs-Modus der Themenseite.

    image-20260804-094818.png


  2. Nutzen Sie die Pfeil-Schaltflächen an den Swimlanes, um ihre Reihenfolge zu verändern.

    image-20260804-104526.png


Erscheinungsbild der Swimlanes ändern


Um Themenseiten individuell und visuell ansprechend zu gestalten, lässt sich das Erscheinungsbild jeder Lane separat anpassen. So können Hintergrundfarben und dekorative Hintergrundformen ausgewählt werden, die der Seite einen eigenen Charakter verleihen. Die Hintergrundformen können zudem gespiegelt werden, sodass sie wahlweise links- oder rechtsbündig ausgerichtet sind. Dadurch lassen sich abwechslungsreiche Layouts erstellen und wichtige Inhaltsbereiche gezielt hervorheben.

image-20260804-105918.png
vier mal die gleiche Swimlane in verschiedenen Designs



  1. Aktivieren Sie den Bearbeitungs-Modus der Themenseite.

    image-20260804-094818.png


  2. Nutzen Sie die Design-Optionen am unteren Rand der Swimlane

    image-20260804-105833.png