Mit diesem Baustein stellst du bis zu drei Produkte nebeneinander dar – jeweils mit Bild, Beschreibung und Schaltfläche. Darunter kannst du gemeinsame Vorteile auflisten, die für alle drei gelten. Das eignet sich besonders, um Produktvarianten oder unterschiedliche Leistungsstufen zu vergleichen.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen. Du brauchst lediglich Zugriff auf die Website und die Seite, auf der dieser Baustein eingebaut werden soll.
So gehst du vor
Kopf einrichten
- Trage unter Kleine Überschrift einen kurzen Text ein, der über der Hauptüberschrift steht – etwa „Unsere Angebote" oder „Wähle dein Paket".
- Trage unter Überschrift den Haupttitel ein.
- Schreibe unter Einleitung eine kurze Erklärung oder Anleitung für den Leser.
Erste drei Produkte hinzufügen
- Klicke Produkt hinzufügen. Ein neuer Produkteintrag öffnet sich.
- Lade unter Bild ein quadratisches Foto hoch – das wird oben in der Produktkarte angezeigt.
- Trage unter Aufschrift des Reiters ein Kurzkürzel ein (z. B. „Basis", „Plus", „Pro") – das wird als Reiter über den drei Produktkarten angezeigt.
- Schreibe unter Produktname den vollständigen Namen des Produkts.
- Trage unter Kurzer Beschreibungssatz einen Teaser-Satz ein, der neugierig macht.
- Schreibe unter Beschreibung eine ausführlichere Erklärung der Leistungen oder Besonderheiten.
- Trage unter Preis-Angabe den Preis oder die Preisformel ein.
- Falls dieses Produkt besonders hervorgestochen soll: Schalte Hervorgehoben anzeigen ein. Das hebt die Karte visuell hervor.
- Trage unter Text der Schaltfläche auf, was auf der Schaltfläche stehen soll (z. B. „Jetzt buchen" oder „Mehr erfahren").
- Klicke unter Ziel auf das Feld und wähle die Seite oder den externen Link, zu dem die Schaltfläche führen soll.
- Wähle unter dem Feld Ziel den Stil der Schaltfläche – etwa primär (Hauptfarbe) oder sekundär (Rahmen).
- Wiederhole die Schritte 4–14 für das zweite und dritte Produkt.
Gemeinsame Vorteile hinzufügen
- Scrolle zum Abschnitt Gemeinsame Vorteile.
- Klicke Vorteil hinzufügen. Ein neuer Eintrag öffnet sich.
- Schreibe unter Bezeichnung den Vorteil auf – z. B. „Kostenlos versandt", „Inklusive Support".
- Klicke auf das Symbol-Feld darunter und wähle ein Piktogramm aus, das den Vorteil darstellt.
- Wiederhole die Schritte 17–19 für alle weiteren Vorteile.
Baustein beschriften (optional)
- Scrolle ganz unten zum Feld Blocktitel. Wenn du hier einen Namen einträgst, wird er nur für dich in der Verwaltung sichtbar – nicht auf der Website.
Aufbau des Bausteins
Kopf
- Kleine Überschrift: Kurzer Text über der Hauptüberschrift (optional).
- Überschrift: Die Hauptüberschrift des gesamten Bausteins.
- Einleitung: Erklärtext, der unter der Überschrift steht.
Produkte Jedes Produkt wird mit folgenden Informationen gefüllt:
- Bild: Wird in quadratischer Form dargestellt.
- Aufschrift des Reiters: Das Etikett auf der Registerkarte – etwa „Basis" oder „Premium".
- Produktname: Der sichtbare Name des Produkts.
- Kurzer Beschreibungssatz: Eine Zeile, die Aufmerksamkeit erregt.
- Beschreibung: Der längere Erklärtext zu Leistungen und Besonderheiten.
- Preis-Angabe: Der Preis oder eine Preisangabe.
- Hervorgehoben anzeigen: Ein Schalter, um das Produkt optisch hervorzuheben (z. B. größer oder farbig hinterlegt).
- Text der Schaltfläche: Das Label auf der Schaltfläche (z. B. „Jetzt buchen").
- Ziel: Die Seite oder der Link, zu dem die Schaltfläche führt.
- Stil der Schaltfläche: Das Aussehen der Schaltfläche (Farbe, Rahmen, etc.).
Gemeinsame Vorteile
- Bezeichnung: Der Vorteilstext (z. B. „Kostenlos versandt").
- Symbol: Ein Piktogramm, das den Vorteil visualisiert.
Was danach passiert
Der Baustein wird auf der Website sichtbar, sobald du ihn speicherst. Besucher sehen die drei Produkte nebeneinander, können zwischen den Reitern wechseln und erkennen auf einen Blick, welche Vorteile allen drei gemeinsam sind. Die Schaltflächen verlinken sie zu den gewählten Seiten oder Ressourcen.
Du kannst die Produkte und Vorteile jederzeit umsortieren, indem du sie mit den Pfeilen nach oben oder unten verschiebst, oder sie löschen, indem du das Entfernen-Symbol klickst.
Tipps und Hinweise
- Reiter-Beschriftungen kurz halten: Lange Texte in der Aufschrift des Reiters können das Layout beschädigen. Nutze Abkürzungen oder aussagekräftige Einzelwörter.
- Bilder gleich groß hochladen: Da die Bilder quadratisch zugeschnitten werden, wirkt der Baustein homogener, wenn du Fotos verwendest, die schon etwa die gleiche Größe haben.
- Hervorhebung sparsam einsetzen: Wenn du alle drei Produkte gleich hervorhebst, verliert die Hervorhebung ihre Wirkung. Sie funktioniert am besten, wenn genau ein oder zwei Produkte hervorgehoben sind.
- Produktreihenfolge durchdacht wählen: Die Reihenfolge der Produkte bestimmt, welcher Reiter zuerst sichtbar ist. Viele Websites beginnen mit dem beliebtesten oder mittleren Angebot.