Karten und Vorteile gestalten
Mit diesem Block präsentierst du Inhalte als Karten in einem Raster. Jede Karte kann ein Bild, einen Titel, einen Text, ein Symbol und einen Button enthalten. Der Block ist ideal für Leistungen, Vorteile, Produktmerkmale oder ähnliche Inhalte, die du übersichtlich darstellen möchtest.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
Aufbau des Bereichs
Der Bereich ist in zwei Sektionen unterteilt:
Allgemein: Hier legst du fest, wie der Block insgesamt funktioniert. Du gibst ihm eine Bezeichnung (für interne Verlinkungen), entscheidest, ob Bilder angeklickt und vergrößert werden können, und stellst ein, wie viele Karten nebeneinander angezeigt werden sollen.
Aktionen: Hier erstellst und bearbeitest du jede einzelne Karte. Für jede Karte siehst du ihre Überschrift und kannst sie mit Schaltflächen verschieben, kopieren oder löschen. Darunter folgt die detaillierte Bearbeitung: Bild, Symbol, Titel, Text, Button-Einstellungen und Navigationsziel.
So gehst du vor
Allgemeine Einstellungen vornehmen:
Trage unter Bezeichnung (für Verlinkung) einen Namen ein, unter dem die Sektion später verlinkt werden kann (z. B. als Sprungziel von der Navigation aus).
Aktiviere Erlaube Bilder zu öffnen, wenn Besucher die Kartenbilder in Originalgröße ansehen dürfen.
Wähle unter Karten pro Zeile aus, wie viele Karten maximal nebeneinander angezeigt werden. Die Verfügbarkeit hängt von der Bildschirmbreite ab – auf Mobilgeräten werden Karten automatisch untereinander angeordnet.
Eine neue Karte hinzufügen:
- Klicke auf Karte hinzufügen am unteren Ende des Bereichs. Es erscheint eine neue Karte mit dem Platzhalter-Titel "Neuer Titel".
Eine Karte bearbeiten:
Klicke auf die Überschrift der Karte, um sie zu bearbeiten.
Bild hochladen oder ändern: Klicke im linken Bereich auf das Bild-Feld. Du kannst ein Bild hochladen, ersetzen oder entfernen. Mit Bild oben ausrichten legst du fest, ob das Bild oben oder mittig in der Karte positioniert wird (nur sichtbar, wenn ein Bild vorhanden ist).
Symbol wählen: Klicke auf das Symbol-Feld (oben links), um ein FontAwesome-Icon auszuwählen.
Titel eingeben: Trage unter Titel den Kartentitel ein. Die Formatierung erfolgt mit Markdown – du kannst also fett oder kursiv schreiben.
Animation wählen (optional): Wähle unter Animation eine Bewegungsanimation aus, die beim Laden der Seite oder beim Hover-Effekt abgespielt wird. Standard ist "Keine Animation".
Text zentrieren: Aktiviere Text zentrieren, um den Titel und den Text mittig auszurichten.
Farbvariante wählen: Wähle unter Farbvariante die Farbe für den Kartenhintergrund oder den Akzent.
Text eingeben: Trage unter Text die Kartenbeschreibung ein (max. 3 Zeilen sichtbar). Auch hier ist Markdown-Formatierung möglich. Wenn du möchtest, kannst du den Text durch einen KI-generierten Vorschlag ergänzen – klicke dazu auf das KI-Symbol.
Button konfigurieren:
- Unter Button Text gibst du die Beschriftung des Buttons ein (z. B. "Mehr erfahren").
- Wähle unter Stil die optische Gestaltung des Buttons (Farbe, Form).
- Unter Navigationsziel legst du fest, wohin der Button führt: zu einer anderen Seite deiner Website, zu einer externen URL oder zu einem Anker auf der aktuellen Seite.
Kartenverwaltung: Über die Schaltflächen oben bei der Kartenüberschrift kannst du:
- Nach unten/oben verschieben: Die Reihenfolge der Karten ändern.
- Kopieren: Eine Karte duplizieren (nützlich, wenn mehrere ähnliche Karten nötig sind).
- Entfernen: Eine Karte löschen.
Wiederhole Schritte 4–14 für alle Karten, die du erstellen möchtest.
Was danach passiert
Alle Änderungen werden automatisch gespeichert. Auf deiner Website wird der Block sofort mit den neuen Einstellungen angezeigt – die Karten sind im eingestellten Raster angeordnet und die Buttons führen zu ihren Navigationszielen. Die Besucher sehen die animierten Karten und können die Buttons anklicken, um zu den verlinkten Seiten zu gelangen. Ist Erlaube Bilder zu öffnen aktiviert, können sie die Bilder in Originalgröße öffnen.
Tipps und Hinweise
Bilder für mobile Geräte: Teste die Anzeige auf verschiedenen Bildschirmgrößen. Mit der Einstellung Karten pro Zeile kannst du beeinflussen, wie groß die Karten wirken.
Konsistente Kartenanzahl: Wenn du 3 Karten pro Zeile einstellst und 5 Karten hast, bleibt die letzte Zeile unvollständig. Wähle eine Kartenzahl, die aufgeht (z. B. 3, 6, 9 Karten bei 3 pro Zeile).
Markdown-Formatierung: Du kannst in Titel und Text Markdown verwenden – etwa
**fett**für Fettdruck oder*kursiv*für Kursivschrift. Zeilenumbrüche funktionieren mit zwei Leerzeichen am Ende der Zeile.Buttons sind optional: Wenn du keinen Button brauchst, lass das Feld Button Text einfach leer.