Karussell-Designer
Der Karussell-Designer hilft dir beim Erstellen einer Bildergalerie mit automatischem Durchlauf oder manueller Navigation. Karussells sind ideal, um mehrere Bilder, Produkte oder Inhalte in einem kompakten Bereich zu präsentieren, ohne zu viel Platz auf der Seite zu beanspruchen.
Voraussetzungen
- Du hast einen Karussell-Block zu deiner Seite hinzugefügt
- Du befindest dich im Bearbeitungsmodus
- Du hast mehrere Bilder für das Karussell vorbereitet
Aufbau des Designers
Allgemeine Einstellungen: Grundlegende Konfiguration für das gesamte Karussell
Bilder-Verwaltung: Hier fügst du Bilder hinzu und bearbeitest die einzelnen Karussell-Elemente
Allgemeine Einstellungen
Volle Breite verwenden:
- Aktiviert: Das Karussell nutzt die gesamte verfügbare Breite
- Deaktiviert: Das Karussell wird in einem begrenzten Container angezeigt
- Empfehlung: Für Hero-Bereiche oder Produkt-Galerien aktivieren
Karussell-Elemente verwalten
Neues Bild hinzufügen:
- Klicke auf "Bild hinzufügen"
- Ein neues Element mit dem Titel "Neuer Titel" wird erstellt
- Bearbeite sofort die Eigenschaften
Bild-Konfiguration
Bild hochladen/auswählen:
- Klicke auf den Bild-Bereich
- Wähle ein Bild aus der Medienbibliothek oder lade ein neues hoch
- Das Bild wird automatisch für verschiedene Bildschirmgrößen optimiert
Bildqualität: Verwende hochauflösende Bilder, da sie im Karussell prominent dargestellt werden
Text-Konfiguration
Titel:
- Hauptüberschrift für das Karussell-Element
- Wird über oder unter dem Bild angezeigt
- Beispiele: "Unser neues Produkt", "Sommer-Kollektion", "Kundenprojekt"
Symbol (Icon):
- Wähle ein passendes Symbol aus der Feather-Icon-Bibliothek
- Wird neben dem Titel angezeigt
- Optional, kann auch leer gelassen werden
Beschreibungstext:
- Detaillierte Beschreibung des Karussell-Elements
- Unterstützt mehrzeilige Texte
- Halte den Text prägnant, da der Platz begrenzt ist
- Beispiel: "Entdecken Sie unsere neueste Innovation mit verbesserter Technologie"
Schaltflächen-Konfiguration
Schaltflächen-Text:
- Text, der auf der Aktions-Schaltfläche angezeigt wird
- Beispiele: "Jetzt ansehen", "Mehr Details", "Zum Produkt"
- Leer lassen, um keine Schaltfläche anzuzeigen
Navigationsziel:
- URL oder Pfad, zu dem die Schaltfläche führt
- Für interne Seiten:
/produkte/neues-produkt - Für externe Links:
https://shop.example.com - Für Produktseiten:
/produkt/artikel-123
Schaltflächen-Stil:
- Wähle aus verschiedenen vorkonfigurierten Stilen
- Empfehlung: Verwende auffällige Stile (Primary, Success) für wichtige Aktionen
Karussell-Elemente organisieren
Reihenfolge ändern:
- Nach oben: Verschiebe ein Element früher in der Abfolge
- Nach unten: Verschiebe ein Element später in der Abfolge
- Die Reihenfolge bestimmt, in welcher Reihenfolge die Bilder im Karussell erscheinen
Element kopieren:
- Klicke auf das Kopieren-Symbol
- Ein identisches Element wird erstellt
- Bearbeite die Kopie (besonders das Bild) nach deinen Wünschen
Element löschen:
- Klicke auf das Papierkorb-Symbol
- Das Element wird sofort entfernt
- Achtung: Diese Aktion kann nicht rückgängig gemacht werden
Karussell-Funktionen verstehen
Automatischer Durchlauf:
- Das Karussell wechselt automatisch zwischen den Bildern
- Besucher können die automatische Wiedergabe pausieren
- Geschwindigkeit ist vorkonfiguriert und benutzerfreundlich
Manuelle Navigation:
- Pfeil-Schaltflächen links und rechts
- Punkt-Navigation unten für direkten Sprung zu einem Bild
- Touch/Swipe-Unterstützung auf mobilen Geräten
Responsive Verhalten:
- Auf großen Bildschirmen: Vollständige Darstellung mit allen Elementen
- Auf Tablets: Angepasste Größen, Touch-Navigation
- Auf Smartphones: Optimierte Darstellung, Swipe-Gesten
Tipps für effektive Karussells
Bildauswahl:
- Verwende Bilder mit ähnlichen Proportionen
- Achte auf einheitliche Bildqualität
- Wähle Bilder, die auch in kleineren Größen gut erkennbar sind
Anzahl der Elemente:
- 3-7 Elemente sind optimal
- Zu wenige Elemente: Karussell wirkt leer
- Zu viele Elemente: Besucher verlieren das Interesse
Text-Gestaltung:
- Halte Titel kurz und aussagekräftig
- Verwende prägnante Beschreibungen
- Stelle sicher, dass Text auch auf mobilen Geräten lesbar ist
Schaltflächen:
- Nicht jedes Element braucht eine Schaltfläche
- Verwende handlungsorientierte Texte
- Teste alle Links vor der Veröffentlichung
Performance:
- Optimiere Bilder vor dem Upload
- Verwende nicht zu viele sehr große Bilder
- Teste die Ladezeit auf verschiedenen Geräten
Häufige Anwendungsfälle
Produkt-Galerie:
- Zeige verschiedene Produkte oder Produktvarianten
- Verwende aussagekräftige Titel und Preise
- Füge "Zum Produkt" Schaltflächen hinzu
Portfolio/Referenzen:
- Präsentiere abgeschlossene Projekte
- Verwende Projekt-Namen als Titel
- Verlinke zu detaillierten Projekt-Seiten
News/Ankündigungen:
- Zeige aktuelle Neuigkeiten oder Events
- Verwende ansprechende Bilder
- Verlinke zu vollständigen Artikeln
Hero-Bereich:
- Große, auffällige Bilder im oberen Seitenbereich
- Kurze, einprägsame Texte
- Starke Call-to-Action Schaltflächen