Ein Produkttrio mit Vorteilen gestalten

Mit diesem Baustein stellst du drei Produkte oder Leistungen nebeneinander dar. Jedes erhält ein Bild, eine Beschreibung und einen Link. Darunter kannst du gemeinsame Vorteile als Liste anzeigen – etwa Garantien oder Besonderheiten, die für alle gelten.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen.

So gehst du vor

Einleitung schreiben

1. Trage eine Kleine Überschrift ein – optional, etwa eine kurze Ankündigung für die Produkte.
2. Trage eine Überschrift ein – das ist der Haupttitel für diesen Baustein.
3. Trage eine Beschreibung ein – optional, etwa eine Einleitung zu den drei Produkten.

Produkte hinzufügen und gestalten

4. Klicke Produkt hinzufügen, um das erste Produkt zu erfassen.

   Ein neuer Produkteintrag öffnet sich. Trage folgende Angaben ein:

   • Aufschrift des Reiters: Der Name, unter dem das Produkt in der Reiterleiste angezeigt wird (kurze Produktbezeichnung).
   • Produktname: Der vollständige Name des Produkts.
   • Kurzer Beschreibungssatz: Eine oder zwei Zeilen Teaser-Text.
   • Beschreibung: Die ausführliche Produktbeschreibung – mehrere Absätze möglich.
   • Bild: Lade ein Bild hoch oder wähle eines aus der Medienbibliothek. Das System schneidet es zu einem Quadrat zu. Klicke auf das Bild, um es auszuschneiden oder zu ersetzen.
   • Preis-Angabe: Trage hier ein, wie der Preis angezeigt werden soll. Dieses Feld ist flexibel und zeigt, was du eingibst.
   • Schaltflächen-Text: Das Wort auf dem Link, etwa „Jetzt anfragen" oder „Mehr erfahren".
   • Ziel: Wähle die Seite oder den Abschnitt aus, auf den der Link führt. Du kannst auch zu einem anderen Block verlinken, indem du dessen Bezeichnung (aus dem Feld „Bezeichnung für Verlinkung") eingibst.
   • Schaltflächen-Stil: Wähle das Design des Links – etwa „Primär" oder „Sekundär".
   • Hervorgehoben anzeigen: Schalte dies ein, wenn dieses Produkt visuell hervorgehoben werden soll.

5. Wiederhole Schritt 4 für das zweite und dritte Produkt.

   Nach dem Speichern jedes Produkts kannst du die Reihenfolge anpassen: Wähle ein Produkt und verschiebe es mit den Pfeilen nach oben oder unten. Zum Entfernen klickst du das Trash-Symbol.

Gemeinsame Vorteile hinzufügen

6. Klicke Vorteil hinzufügen, um die erste Zeile unter den Produkten zu erfassen.

   Ein neuer Vorteilseintrag öffnet sich. Trage folgende Angaben ein:

   • Icon: Wähle ein Symbol aus, das den Vorteil darstellt – etwa ein Häkchen oder ein Schloss für Sicherheit.
   • Bezeichnung: Der Text zum Symbol, etwa „30 Tage Rückgaberecht" oder „Zertifiziert".

7. Wiederhole Schritt 6 für weitere Vorteile. Du kannst beliebig viele hinzufügen.

   Wie bei den Produkten kannst du die Reihenfolge mit den Pfeilen anpassen oder einen Vorteil mit dem Trash-Symbol entfernen.

Zuordnung für interne Verlinkung (optional)

8. Unter Aufbau trage in das Feld Bezeichnung (für Verlinkung) einen Namen ein, wenn andere Abschnitte dieser Stelle einen direkten Link setzen sollen. Das Feld ist optional; brauchst du es nicht, lasse es leer.

9. Speichere deine Änderungen. Der Baustein wird sofort im Seitenentwurf aktualisiert.

Aufbau des Bausteins

Der Baustein besteht aus vier Bereichen:

• Einleitung: Kleine Überschrift, Haupttitel und Beschreibung, die über den drei Produkten stehen.
• Produkte: Die drei (oder mehr) Produktkarten mit Bild, Text und Link. Jede Karte zeigt einen Reitertab oben.
• Gemeinsame Vorteile: Eine Liste mit Icon und Text, die unterhalb der Produkte angezeigt wird.
• Aufbau: Technische Einstellung für interne Verlinkung; spielt für die Anzeige selbst keine Rolle.

Was danach passiert

Alle Eingaben werden sofort gespeichert. Der Baustein wird im Seitenentwurf sichtbar und zeigt die drei Produkte als Reiter mit Bildern, Beschreibungen und Links sowie die Liste der Vorteile darunter. Besucher können zwischen den Produkten wechseln und auf die Schaltfläche klicken.

Um diesen Baustein in eine Live-Website zu bringen, musst du die Seite veröffentlichen.

Tipps und Hinweise

• Bilder sollten alle gleich groß sein: Das System schneidet sie zu Quadraten zu. Lade Bilder hoch, deren Ausgangsgröße bereits quadratisch oder annähernd quadratisch ist, um ungewollte Schnitte zu vermeiden.
• Reitertabs besser nicht zu lang: Die „Aufschrift des Reiters" wird oben auf der Karte angezeigt. Halte sie kurz (1–2 Worte), damit sie auf allen Bildschirmgrößen passt.
• Verlinkung auf andere Abschnitte: Um direkt auf einen anderen Block dieser oder einer anderen Seite zu verlinken, nutze das Feld „Bezeichnung (für Verlinkung)" des Zielblocks und trage diesen Namen ins Feld Ziel ein.
• Vorteile mit passendem Icon: Wähle Icons, die der Aussage entsprechen – etwa ein Häkchen für „erledigt" oder ein Schloss für „sicher".