CMS-Plugin Karussel einrichten

In diesem Artikel zeigen wir dir, wie du ein Karussell (Bilder, die sich automatisch abwechseln) anlegst, die Seitenverhältnisse optimal einstellst und die Bilder korrekt in deine Webseite einbindest.

Schau dir hier unser Videotutorial an

So gehst du vor

1. Karussell in der Struktur anlegen

  1. Öffne die Strukturansicht deiner Seite. Du findest sie rechts oben unter den vier kleinen Strichen.
  2. Suche den passenden Abschnitt, z. B. Seitenteaser oder Inhalt.
  3. Füge in deinem Abschnitt über das Pluszeichen das Plugin Karussell ein.
  4. Anschließend fügst du mehrere Slides hinzu, um ein Karussell zu erhalten.

2. Slides hinzufügen

  1. Klicke in der Strukturansicht auf das Pluszeichen deines Karussell-Plugins.
  2. Es öffnet sich ein Fenster, mit verschiedenen Plugins, die du explizit deinem Karussell-Plugin unterordnen kannst. 
  3. Klicke auf Karussell-Slide.
  4. Damit legst du eine neue Slide an. 
  5. Es öffnet sich dein Dateimanager. Suche hier das Bild heraus, das du in dein Karussell einbinden möchtest. 
  6. Optional kannst du einen Titel, einen Untertitel und einen Link hinzufügen. Die erscheinen dann auf links unten auf deinem Bild.

3. Seitenverhältnis einstellen (Aspect Ratio)

Das Seitenverhältnis bestimmt, wie hoch das Bild im Verhältnis zur Breite angezeigt wird.

  1. Öffne das Karussell-Element über das Bearbeitungssymbol des Stiftes deines Karussell-Plugins.
  2. Scrolle zu den Einstellungen.
  3. Wähle bei Aspect Ratio ein passendes Format aus:
    • Für große Titelbilder empfohlen: 27:9.
    • Weitere Optionen: 16:9, 18:9, etc.
    • 💡 Tipp: Für Landingpages oder Startseiten eignet sich ein breites Verhältnis wie 27:9 besonders gut.
  4. Je nach Bildschirmgröße (Laptop, Tablet, Smartphone) wirkt das Bild unterschiedlich. Teste daher verschiedene Formate.
  5. Achte darauf, dass deine Bilder dieses Verhältnis bereits mitbringen oder beim Upload passend zugeschnitten sind. 

Kleiner Exkurs zur digitalen Barrierefreiheit: Texte korrekt strukturieren

  1. Achte auf barrierearme und semantisch korrekte Überschriften.
  2. Eine Überschrift der Ebene H1 darf nur einmal pro Seite vorkommen.
  3. Nutze für weitere Slides die Ebene H2. Du kannst ihr aber den Stil von H1 zuweisen, wenn du möchtest, dass sie optisch gleich aussieht.
Alles rund um digitale Barrierefreiheit erfährst du hier

4. Link in einer Slide einsetzen

  1. Scrolle im Bearbeitungsmodus deiner Slide zum Abschnitt „Verlinkung“.
  2. Du hast hier drei Optionen für eine Verlinkung:
    • Interner Link (z. B. zu einer Unterseite)
    • Externer Link (z. B. zu einer Kampagnen-Webseite)
    • E-Mail-Adresse
  3. Nur wenn ein Link hinterlegt ist, erscheint der Button „Mehr erfahren“.

5. Karussell in Container mit fester Breite einbauen

  1. Du kannst das Karussell in einen Container mit fester Breite setzen, um es z. B. zentriert auf deiner Seite darzustellen.
  2. Füge im Platzhalter (z. B. Inhalt) einen Container ein.
  3. Setze den Container auf „Feste Breite“.
  4. Füge das Karussell-Plugin innerhalb des Containers über das Plussymbol ein.
  5. Achte darauf, dass der Container die Breite deiner Webseite widerspiegelt (z. B. mittig begrenzt).

6. Bilder passend vorbereiten

  1. Damit deine Bilder im Karussell optimal aussehen:
  2. Achte bei der Bildbearbeitung auf das richtige Seitenverhältnis (z. B. 27:9).
  3. Wenn du z. B. Text im Bild hast oder Gesichter zu sehen sind:
  4. Sorge dafür, dass der wichtige Bildausschnitt zentriert ist.
  5. Sonst könnte das Bild durch das Karussell beschnitten werden.

7. Einsatzmöglichkeiten

Ein Karussell kann an vielen Stellen eingebaut werden:

  • Startseite
  • Kampagnen-Landingpage
  • Inhalte innerhalb eines Containers
  • Themenseiten oder Sonderaktionen