Karussell

Der Karussell-Block ist Teil des Plugins „Elements Blocks“, welches den Block-Editor um verschiedene Gestaltungselemente erweitert. Dieser Block kann genutzt werden, um beispielsweise Projekte übersichtlich und anschaulich aufzulisten. Den Block finden Sie ab sofort im Block-Inserter unter „RRZE Elements“.

Funktionen des Karussells

Der Karussell-Block bietet folgende Modi:

  • Marketing: Für dekorative Bilder und Grafiken oder einfache Farbkacheln, Text wird innerhalb der Kachel dargestellt
  • Wissenschaftlich: Für wissenschaftliche Abbildungen, Text wird unterhalb des Bildes dargestellt

  • Hinzufügen beliebig vieler Kacheln
  • Kacheln mit Bild, Fakultätsfarben oder beliebiger Hintergrundfarbe
  • Hinzufügen eines Popovers für mehr Informationen zu einer Kachel
  • Anpassbare Höhe und Breite
  • Fokuspunkt des Bildes frei wählbar für Desktop, Tablet und Mobil

  • Textschatten und Farbverläufe für bessere Lesbarkeit
  • Textfarbe frei einstellbar
  • Textposition wählbar

Auf dieser Seite

  1. Funktionen des Karussells
  2. Das Karussell konfigurieren
  3. Card Popover Editor
  4. Video-Anleitung
Beispielansicht eines Karussells im Marketing-Modus
Beispielhafte Darstellung des Karussell-Blocks im Modus „Marketing“

Gesteuert wird das Karussell, oder auch Slider, über die Pfeil-Buttons unterhalb des Blocks. Über das Plus-Zeichen innerhalb einer Kachel öffnet sich ein Fenster (Popover), in dem weitere Informationen enthalten sein können. So können Sie zum Beispiel mehr Projektinformationen hinterlegen.

Das Karussell konfigurieren

1. Modus auswählen

Stil-Auswahl in den Blockeinstellungen
  1. Fügen Sie den Block zunächst über den Block-Inserter in den Inhaltsbereich Ihrer Seite ein.
  2. Navigieren Sie nun zu den Blockeinstellungen rechts.
  3. Im Reiter Stile können Sie dann zwischen „Wissenschaftlich“ und „Marketing“ wechseln.

Sie können jederzeit zwischen den zwei Modi wechseln. Es ist nur zu beachten, dass beim Wechsel von „Marketing“ auf „Wissenschaftlich“ die Textbeschriftungen verloren gehen. Sie müssen dann unterhalb der Kachel neu eingegeben werden. Die Texte in den Popovers bleiben erhalten. 

2. Eine neue Kachel hinzufügen

Beispielansicht eines Karussells im Marketing-Modus mit Farbflächen statt Bildern
  1. Markieren Sie die oberste Ebene des Blocks.
  2. Klicken Sie auf den schwarzen Balken, um eine neue Kachel einzufügen.

3. Karussell gruppieren

Um eine korrekte Darstellung zu gewährleisten, muss das Karussell immer als oberstes Element innerhalb des Seitenlayouts platziert werden, sollte also nicht gruppiert werden. Ausnahme: Sie stellen in den Einstellungen rechts den Stil „Dark“ ein, um einen dunkelblauen Hintergrund zu verwenden.

4. Funktionen der Blockwerkzeugleiste

Ansicht des Block-Editors mit ausgewähltem Karussell-Block
Karussell-Block im Block-Editor

Fügen Sie den Block zunächst über den Block-Inserter in den Inhaltsbereich Ihrer Seite ein.

  1. Markieren Sie die oberste Ebene des Karussell-Blocks über die Listenansicht.
  2. Sie sehen hier den Aufbau Ihres Karussells und die darin enthaltenen Kacheln.
  3. Wählen Sie in der Blockwerkzeugleiste die passende Überschriftenebene.
  4. In den Block-Einstellungen rechts können Sie die Kartenhöhe (in Pixeln) anpassen. Dies gilt für alle Kacheln innerhalb des Karussells.
Ansicht des Block-Editors mit ausgewählter Karussel-Kachel

Markieren Sie nun eine der Kacheln, ändern sich die verfügbaren Einstellungen in der Blockwerkzeugleiste:

  1. Über die Pfeiltasten können Sie die Reihenfolge der Karten ändern.
  2. Über das Dokumentensymbol öffnen Sie den „Card Popover Editor„. Hier können weiterführende Informationen hinterlegt werden.
  3. Über das Kettensymbol können Sie einen Link zu einer internen oder externen Seite setzen.
  4. Über das Laptopsymbol wechseln Sie innerhalb des Editors zwischen den Gerätegrößen Desktop, Tablet und Mobil.
  5. Rechts in den Block-Einstellungen stehen Ihnen noch viele Anpassungsmöglichkeiten zur Verfügung.

5. Blockeinstellungen

Navigieren Sie zu Einstellungen | Reiter „Block“. Sie sehen nun einige aufklappbare Bereiche, in denen Anpassungen am Karussell vorgenommen werden können.

Ansicht der Block-Einstellungen für eine Karussell-Kachel

Karussell-Einstellungen

  • Auch hier können Sie die Kartenhöhe anpassen. 

Bildeinstellungen

  • Passen Sie für jede Gerätegröße den Bildausschnitt über den Fokuspunkt-Regler oder die Prozentfelder an.
  • Hinterlegen Sie bei nicht dekorativen Bildern einen Alt-Text. 
  • Wählen Sie, ob das Bild die Kachel ausfüllen soll, oder ob Sie es im Originalformat anzeigen möchten. 

Textfarbe

  • Legen Sie die Farbe des überlagernden Textes für die verschiedenen Gerätegrößen fest, sofern Sie den Modus „Marketing“ gewählt haben.
  • Legen Sie über das gekachelte Feld eine Textfarbe fest, oder wählen Sie aus den Standardfarben.

Hintergrundfarbe

  • Wenn Sie in den Bildeinstellungen die Option „Einpassen (contain)“ gewählt haben, können Sie hier die passende Hintergrundfarbe auswählen. 
  • Wählen Sie die passende Fakultätsfarbe aus der Farbauswahl oder legen Sie eine eigene Farbe fest.

Layout

  • Passen Sie die Breite einer einzelnen Kachel an.
  • Passen Sie die Position des überlagernden Textes an, sofern Sie den Modus „Marketing“ gewählt haben.

Effekte

  • Legen Sie einen Farbverlauf fest oder wählen Sie aus verschiedenen Voreinstellungen.
  • Für den Modus „Marketing“ kann hier der Textschatten an- und ausgeschaltet werden.

Card Popover Editor

Beispielansicht eines Popovers im Frontend
Beispielhaftes Popover
  1. Klicken Sie bei markierter Kachel auf das Dokumentensymbol in der Blockwerkzeugleiste, um den Card Popover Editor zu starten.
  2. Befüllen Sie den Inhaltsbereich des Editors nach Ihren Vorstellungen.
  3. Klicken Sie erneut auf das Dokumentensymbol, um den Popover Editor zu schließen.

Die Auswahl der verfügbaren Blöcke im Popover ist bewusst eingeschränkt. Zur Verfügung stehen:

  • Überschriften
  • Listen
  • Buttons

Video-Anleitung

Quelle: https://www.fau.tv/clip/id/63239
Dieses Video ist Teil einer Videosammlung: https://www.fau.tv/clip/id/63239