Ein Produkt-Trio mit Vorteilen einrichten

Mit diesem Baustein zeigst du bis zu drei Produkte nebeneinander an – jeweils mit Bild, Beschreibung, Preis und Schaltfläche. Davor kannst du gemeinsame Vorteile auflisten, die alle drei Produkte betreffen.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Der Baustein ist Teil deiner Website und bereit zur Bearbeitung.

Aufbau des Formulars

Das Formular ist in vier Abschnitte aufgeteilt:

• Allgemein: Bezeichnung des Bausteins (für deine interne Orientierung) und Farbvariante
• Einleitung: Kleiner Titel (Eyebrow), Überschrift und Beschreibung, die über den Produkten stehen
• Gemeinsame Vorteile: Eine Liste mit Icons und Kurztexten, die alle drei Produkte betreffen
• Produkte: Die drei Produktkarten mit allen Details

So gehst du vor

Allgemeine Einstellungen

1. Trage unter Bezeichnung (für Verlinkung) einen Namen ein, unter dem du den Baustein wiederfindest.
2. Wähle eine Farbvariante aus, die zum Design deiner Website passt. Dieses Auswahlfeld ist optional; wenn du nichts auswählst, wird die Standardfarbe verwendet.

Einleitung

3. Fülle den Kleinen Titel aus – das ist eine kurze Zeile, die vor der Überschrift angezeigt wird (optional).
4. Trage die Überschrift ein.
5. Schreib eine Beschreibung, die den Inhalt der drei Produkte einleitet (optional).

Alle drei Felder unterstützen Markdown-Formatierung.

Gemeinsame Vorteile hinzufügen

6. Klick auf Vorteil hinzufügen, um den ersten Vorteil zu erstellen.
7. Ein neuer Bereich öffnet sich. Hier wählst du ein Icon aus (das Symbol links) und trägst darunter eine Bezeichnung ein.
8. Wiederhole Schritt 6 und 7, bis du alle Vorteile eingetragen hast (maximal so viele, wie es für dein Design sinnvoll ist).

Du kannst Vorteile in der Reihenfolge verschieben (Pfeile hoch/runter) oder löschen (Mülltonne). Die Reihenfolge erscheint später auf der Website in der gleichen Abfolge.

Produkte einrichten

9. Klick auf Produkt hinzufügen, um das erste Produkt zu erstellen.

10. Ein neuer Bereich öffnet sich. Fülle folgende Felder aus:

    • Reiter-Label: Ein sehr kurzer Name für die Registerkarte oben, falls du mehrere Produkte nebeneinander anzeigen willst. Dieses Feld ist optional.
    • Produktname: Der volle Name des Produkts, der auf der Website sichtbar ist.
    • Kurzer Beschreibungssatz: Eine Ein- oder Zweizeilenzusammenfassung (Markdown möglich).
    • Beschreibung: Ein längerer Fließtext mit allen wichtigen Details (Markdown möglich).
    • Bild: Lade ein Produktfoto hoch oder wähle eines aus deiner Bilderverwaltung.
    • Preis-Angabe: Die Preisangabe, die angezeigt werden soll (beliebiger Text, kein Feld mit automatischer Berechnung).
    • Hervorgehoben anzeigen: Ein Schalter. Wenn du ihn einschaltest, wird dieses Produkt optisch stärker betont (z. B. mit Hintergrund oder Rahmen).

11. Im Bereich darunter:

    • Schaltflächen-Text: Der Text, der auf der Schaltfläche steht.
    • Schaltflächenstil: Wähle das Design der Schaltfläche aus (Farbe, Form). Klick auf das Feld, um die Optionen zu sehen.
    • Navigationsziel: Bestimme, wohin der Klick auf die Schaltfläche führt – zu einer anderen Seite deiner Website, zu einer externen URL oder zu einem Anker. Klick auf das Feld und wähle das Ziel.

12. Wiederhole Schritte 9 bis 11 für die übrigen Produkte (bis zu drei insgesamt).

Reihenfolge anpassen und Einträge löschen

Für jeden Vorteil und jedes Produkt siehst du Pfeile und eine Mülltonne:

• Nach oben/unten verschieben: Mit den Pfeilen änderst du die Reihenfolge.
• Entfernen: Die Mülltonne löscht den Eintrag sofort.

Was danach passiert

Alle Änderungen werden automatisch gespeichert. Der Baustein zeigt sofort die aktualisierten Informationen an, wenn du eine Eingabe machst. Sobald du die Website veröffentlichst, sind die Produkte und Vorteile für deine Besucher sichtbar.

Möchtest du den Baustein auf mehreren Seiten verwenden, musst du ihn jedes Mal neu einrichten – Kopien werden nicht automatisch synchronisiert.

Tipps und Hinweise

• Mindestanzahl: Du brauchst mindestens ein Produkt, damit der Baustein sinnvoll angezeigt wird. Mit null Produkten bleibt der Bereich leer.
• Drei oder weniger: Der Baustein ist für bis zu drei Produkte ausgelegt. Wenn du mehr brauchst, verwende mehrere Bausteine hintereinander.
• Bilder optimieren: Verwende Bilder in ähnlicher Größe und Auflösung, damit das Layout ausgewogen wirkt.
• Interne Bezeichnung: Die „Bezeichnung (für Verlinkung)" ist nur für dich sichtbar – deine Besucher sehen sie nicht.
• Markdown nutzen: Fettdruck, Kursivschrift und Links funktionieren in den Text- und Beschreibungsfeldern. Umbrüche entstehen durch Leerzeilen.