Karten-Designer
Der Karten-Designer hilft dir beim Erstellen ansprechender Karten-Layouts auf deiner Website. Karten sind perfekt, um Produkte, Dienstleistungen, Team-Mitglieder oder andere Inhalte übersichtlich und attraktiv zu präsentieren. Jede Karte kann ein Bild, Text und eine Schaltfläche enthalten.
Voraussetzungen
- Du hast einen Karten-Block zu deiner Seite hinzugefügt
- Du befindest dich im Bearbeitungsmodus
- Du hast Bilder und Texte für deine Karten vorbereitet
Aufbau des Designers
Allgemeine Einstellungen: Grundlegende Konfiguration für das gesamte Karten-Layout
Karten-Verwaltung: Hier erstellst und bearbeitest du die einzelnen Karten
Allgemeine Einstellungen
Volle Breite verwenden:
- Aktiviert: Die Karten nutzen die gesamte verfügbare Breite
- Deaktiviert: Die Karten werden in einem begrenzten Container angezeigt
- Empfehlung: Für Produkt-Galerien aktivieren, für Text-Inhalte deaktivieren
Dunkle Variante:
- Aktiviert: Dunkles Design mit heller Schrift
- Deaktiviert: Helles Design mit dunkler Schrift
- Wähle je nach Hintergrund und Design deiner Website
Bilder öffnen erlauben:
- Aktiviert: Besucher können Bilder durch Anklicken vergrößert betrachten
- Deaktiviert: Bilder sind nicht anklickbar
- Empfehlung: Für Produkt-Bilder oder Portfolios aktivieren
Karten pro Zeile: Wähle, wie viele Karten nebeneinander angezeigt werden:
- 1 Karte: Vollbreite, ideal für detaillierte Inhalte
- 2 Karten: Ausgewogen, gut für Vergleiche
- 3 Karten: Standard für Produkte oder Dienstleistungen
- 4 Karten: Kompakt, für viele ähnliche Inhalte
- 6 Karten: Sehr kompakt, für einfache Inhalte
- 12 Karten: Minimale Größe, für Icons oder kleine Elemente
Karten erstellen und bearbeiten
Neue Karte hinzufügen:
- Klicke auf "Karte hinzufügen"
- Eine neue Karte 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 optimiert
Bild oben ausrichten:
- Aktiviert: Das Bild wird am oberen Rand der Karte angezeigt
- Deaktiviert: Das Bild wird seitlich neben dem Text positioniert
- Nur verfügbar, wenn ein Bild ausgewählt ist
Text-Konfiguration
Symbol (Icon):
- Wähle ein passendes Symbol aus der Feather-Icon-Bibliothek
- Symbole werden neben oder über dem Titel angezeigt
- Optional, kann auch leer gelassen werden
Titel:
- Hauptüberschrift der Karte
- Sollte kurz und aussagekräftig sein
- Beispiele: "Premium-Paket", "Unser Service", "Max Mustermann"
Animation:
- Wähle eine Einblend-Animation oder "Keine Animation"
- Verfügbare Optionen: fadeIn, slideUp, zoomIn
- Animationen werden beim Scrollen ausgelöst
Text zentrieren:
- Aktiviert: Titel und Text werden mittig ausgerichtet
- Deaktiviert: Linksbündige Ausrichtung
- Empfehlung: Für symmetrische Layouts aktivieren
Haupttext:
- Beschreibender Text für die Karte
- Unterstützt einfache Formatierung
- KI-Unterstützung verfügbar für Textgenerierung
- Halte den Text prägnant (2-4 Sätze)
Schaltflächen-Konfiguration
Schaltflächen-Text:
- Text, der auf der Schaltfläche angezeigt wird
- Beispiele: "Mehr erfahren", "Jetzt kaufen", "Kontakt"
- Leer lassen, um keine Schaltfläche anzuzeigen
Navigationsziel:
- URL oder Pfad, zu dem die Schaltfläche führt
- Für interne Seiten:
/produkte,/kontakt - Für externe Links:
https://example.com - Für E-Mail:
mailto:info@example.com
Schaltflächen-Stil:
- Wähle aus verschiedenen vorkonfigurierten Stilen
- Primary, Secondary, Success, etc.
- Sollte zum Design deiner Website passen
Karten organisieren
Reihenfolge ändern:
- Nach oben: Verschiebe eine Karte nach links/oben
- Nach unten: Verschiebe eine Karte nach rechts/unten
- Die Reihenfolge bestimmt die Anzeige-Reihenfolge
Karte kopieren:
- Klicke auf das Kopieren-Symbol
- Eine identische Karte wird erstellt
- Bearbeite die Kopie nach deinen Wünschen
Karte löschen:
- Klicke auf das Papierkorb-Symbol
- Die Karte wird sofort entfernt
- Achtung: Diese Aktion kann nicht rückgängig gemacht werden
KI-Textgenerierung nutzen
Automatische Textvorschläge:
- Gib einen Titel für deine Karte ein
- Klicke auf das KI-Symbol im Text-Feld
- Die KI generiert passenden Text basierend auf dem Titel
- Bearbeite den generierten Text nach deinen Wünschen
Responsive Verhalten
Automatische Anpassung:
- Auf großen Bildschirmen: Gewählte Anzahl Karten pro Zeile
- Auf Tablets: Automatische Reduzierung auf 2-3 Karten
- Auf Smartphones: Meist 1 Karte pro Zeile
Optimierung für mobile Geräte:
- Bilder werden automatisch skaliert
- Texte bleiben lesbar
- Schaltflächen sind touch-freundlich
Tipps für effektive Karten
Konsistenz:
- Verwende ähnliche Bildgrößen und -stile
- Halte Texte in ähnlicher Länge
- Nutze einheitliche Schaltflächen-Stile
Bildqualität:
- Verwende hochwertige, scharfe Bilder
- Achte auf einheitliche Bildproportionen
- Optimiere Bilder vor dem Upload
Textgestaltung:
- Halte Titel kurz und prägnant
- Verwende aussagekräftige Beschreibungen
- Vermeide zu viel Text pro Karte
Schaltflächen:
- Verwende handlungsorientierte Texte
- Nicht jede Karte braucht eine Schaltfläche
- Stelle sicher, dass Links funktionieren