Vorlage: Angebot Details

Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.

Die Vorlage Angebot Details enthält die Widgets, mit denen Sie die öffentliche Detailseite eines Angebots gestalten. Hier entscheidet sich, ob Besuchende Inhalt, Termine, Ort, Preis, Leitung und den nächsten Schritt zur Anmeldung verstehen.

Für Angebot-Details-Widgets gelten dieselben Raster-, Breiten- und Breakpoint-Regeln wie in anderen Design-Manager-Vorlagen. Setzen Sie die wichtigsten Informationen weit oben und prüfen Sie die Darstellung auf Desktop und Smartphone.

Kernwidgets der Angebot-Details-Seite

Angebotsdetail-Vorlage mit beschrifteten Widgets A bis M — Die markierte Übersicht hilft, die Bausteine auf einer Angebotsdetailseite einzuordnen. Ältere Social-Bausteine H und I sind vom verwendeten Design und externen Dienst abhängig.
A
Titel des Angebots
B
Eckdaten zum Angebot
C
Direkt in die Anmeldung wechseln
D
Beschreibung aus Kategorie und Angebot
E
Lektionen und Module anzeigen
F
Karte zum Durchführungsort
G
Öffentliche Teilnehmerübersicht
H
Social-Baustein aus bestehenden Designs
I
Facebook-Fans aus bestehenden Designs
J
Unterangebote eines Multiangebots
K
Anfrage starten
L
Freie Hinweise und Bilder
M
Gutscheinverkauf öffnen

Widget	Aufgabe	Wichtige Einstellungen
Angebot Name	Zeigt den Angebotstitel	Textgrösse normal, Überschrift 3, Überschrift 2 oder Überschrift 1
Angebot Details	Zeigt Angebotsdaten wie Nummer, freie Plätze, Datum, Ort, Preis und Kontakt	Auswahl der sichtbaren Informationen, Zusatzzeile für Tags mit Werten
Anmelde Button	Leitet in das Anmeldeformular	Buttontext und Farbe für normale Buchung und Warteliste
Beschreibung	Zeigt Kategorie- und Angebotsbeschreibung	Verwendet die allgemeinen Widget-Einstellungen
Lektionen/Module Übersicht	Listet Termine, Module oder Lektionen	Spalten, vergangene Termine, aktuelle Zeile und responsive Tabelle
Google Maps	Zeigt den Ort der ersten Lektion oder des ersten Moduls	Zoom, Marker, Map Type und Kartenstil

Widgetauswahl planen

Die Angebotsdetailseite soll Teilnehmenden genug Sicherheit für die Anmeldung geben. Platzieren Sie deshalb zuerst Angebotsname, wichtigste Eckdaten, Beschreibung und Anmeldebutton. Zusätzliche Widgets wie Karte, Social Links oder Gutscheinverkauf sollten den Entscheid unterstützen und nicht vom nächsten Schritt ablenken.

Wenn ein Angebot aus Modulen, Lektionen oder Multiangeboten besteht, sollten diese Informationen vor dem Anmeldebutton oder gut sichtbar darunter erscheinen. Teilnehmende müssen verstehen, was sie buchen und welche Termine dazugehören.

Angebot Name, Details und Anmeldebutton

Angebot Name zeigt den Titel des Angebots in der gewählten Textgrösse. Vermeiden Sie doppelte Hauptüberschriften, wenn der Titel bereits an anderer Stelle prominent erscheint.

Angebot Details kann gezielt Informationen wie Angebotsnummer, freie Plätze, Datum, Ort, Preis, Kontakt, Anmeldeschluss oder zusätzliche Tag-Werte anzeigen. Für besondere Hinweise wie Sprache, Level oder Zielgruppe können Tags mit Werten hilfreich sein. Wählen Sie nur Angaben, die Buchende wirklich benötigen.

Die Zusatzzeile für Tags mit Werten eignet sich für kompakte Hinweise, die nicht im Beschreibungstext untergehen sollen. Beispiele sind Unterrichtssprache, Schwierigkeitsgrad, Zielgruppe, Materialhinweis oder Kursformat. Prüfen Sie die Anzeige in der Vorschau, weil zu viele Detailwerte die erste Ansicht überladen können.

Der Anmelde Button führt in das Anmeldeformular. Sie können den Text „Jetzt anmelden“ und die Farbe anpassen. Wenn Warteliste aktiv ist und das Angebot ausgebucht ist, können Text und Farbe für „Auf Warteliste eintragen“ separat definiert werden.

Button-Texte und Statuslogik

Der Anmeldebutton kann je nach Status andere Texte und Farben erhalten. Neben «Jetzt anmelden» sind zum Beispiel Warteliste, Anfrage oder geschlossen relevant. Prüfen Sie diese Zustände mit echten Demo-Angeboten, damit Teilnehmende nicht auf einen missverständlichen Button klicken.

Das Widget Angebot Details kann Informationen wie Angebotsnummer, freie Plätze, Datum, Ort, Preis oder Kontakt anzeigen. Zusätzlich kann ein Tag-Wert als eigene Zeile eingebunden werden, zum Beispiel Kurssprache, Niveau oder Durchführungsform. Mehr dazu unter Tags mit Werten verwenden.

Eine E-Mail-Adresse anklickbar anzeigen

Öffnen Sie im Design Manager Body → Angebot Details und die Einstellungen des Widgets Angebot Details. Ergänzen Sie in der Auswahl der sichtbaren Zeilen den Eintrag E-Mail, speichern Sie und öffnen Sie die öffentliche Detailseite. Diese eigene E-Mail-Zeile gibt die Organisationsadresse als mailto:-Link mit dem Angebotsnamen als Betreff aus. Sie ist von der allgemeinen Kontaktzeile und vom Kontakt der Kursleitung getrennt.

Die Adresse im Kontakt der Kursleitung wird in diesem Widget als Text ausgegeben. Für einen festen anderen Kontakt können Sie einen Textblock verwenden: Text wie «Frage zum Kurs stellen» markieren, Link einfügen wählen und beispielsweise mailto:kurse@example.org eintragen. Der Textblock ist fester Designinhalt und übernimmt nicht automatisch je Angebot eine andere Kursleitungsadresse. Prüfen Sie alle Sprachen und Mobilansichten. Ein Mail-Link öffnet das auf dem Gerät eingerichtete E-Mail-Programm; die Website versendet damit selbst keine Nachricht.

Preisangaben bei kostenlosen Angeboten reduzieren

Entfernen Sie in den Einstellungen von Angebot Details die nicht benötigten Preiszeilen, zum Beispiel Preisspanne, Preis oder Preiskategorien, und speichern Sie. Die Auswahl gilt für jedes Angebot, das dieses Design und Widget verwendet. Sie ist keine automatische Regel ausschliesslich für Preise von null und verändert die tatsächliche Preisberechnung nicht.

Für einen eigenen kostenlosen Angebotsbereich können Sie ein Kategoriedesign ohne Preiszeilen verwenden und «Kostenlose Teilnahme» im passenden Beschreibungstext erklären. Bei gemischten Angeboten behalten Sie die nötigen Preisinformationen bei. Kontrollieren Sie auch die Preisspalten der Übersicht und den tatsächlichen Anmeldeablauf.

Externe Anmeldung in Detail und Übersicht abstimmen

Der normale Anmeldebutton startet die Anmeldung des gewählten Angebots. Ist diesem Angebot der spezielle Tag-Name redirect mit einer vollständigen gültigen Ziel-URL als Wert zugeordnet, wird dieser Anmeldestart zur externen Website weitergeleitet. Die vollständige Einrichtung und Gegenprobe gilt auch für die Detailseite.

Ein geänderter Buttontext oder ein beliebiger Tag-Wert ersetzt die Zieladresse nicht. Prüfen Sie den direkten Angebotslink, den Einstieg aus der Übersicht und dieselben Wege mit aktivem Tagfilter. Ein freier Textlink zur Fremdwebsite kann zusätzliche Information anbieten; er richtet keinen edoobox-Buchungsabschluss ein.

Beschreibung, Lektionen/Module und Google Maps

Das Widget Beschreibung zeigt Kategorie- und Angebotsbeschreibung, sofern beide gepflegt sind. Die Inhalte selbst werden im Angebot beziehungsweise in der Kategorie bearbeitet. Details stehen unter Beschreibungstexte in Angebot und Kategorie.

Lektionen/Module Übersicht zeigt einzelne Termine, Module oder Lektionen. Sie können Spalten wie Leitung, Ort, Datum oder Uhrzeit ergänzen oder entfernen. Bei fortlaufenden Angeboten ist es oft sinnvoll, vergangene Termine auszublenden. Wenn vergangene Termine sichtbar bleiben, kann die aktuelle Zeile hervorgehoben werden. Aktivieren Sie für mobile Geräte die responsive Tabelle.

Für kurze Einzelveranstaltungen reicht oft eine knappe Terminangabe in den Angebot Details. Für Kurse mit mehreren Modulen, Serien, Workshops oder Kongressbausteinen ist die Lektionen-/Module-Übersicht deutlich verständlicher, weil Teilnehmende Termine und Orte vor der Buchung prüfen können.

Google Maps zeigt den Standort der ersten Lektion beziehungsweise des ersten Moduls. Prüfen Sie Zoom-Wert, Marker, Map Type und Kartenstil. Für Durchführungsorte ist die Pflege der Adresse entscheidend. Mehr dazu unter Durchführungsorte.

Die Teilnehmer Übersicht zeigt bereits angemeldete Personen. Wer diese Liste sehen kann, hängt von den allgemeinen Sichtbarkeitseinstellungen des Widgets ab. Prüfen Sie angemeldet und abgemeldet. Verwenden Sie möglichst wenige Personendaten, zum Beispiel nur Vorname oder Vorname mit Anfangsbuchstaben des Nachnamens. Eigene Teilnehmerdatenfelder können ebenfalls angezeigt werden, sollten aber besonders sorgfältig geprüft werden.

Das Social Widget bietet Teilen-Schaltflächen abhängig vom verwendeten Bootstrap-Style. Sie wählen Logos mit oder ohne Zähler und die zu teilende URL. Prüfen Sie die Plattformen der tatsächlich geladenen Darstellung. Facebook Fans kann eine Facebook-Seite mit Gefällt-mir-Funktion anzeigen; dafür wird die URL Ihrer Facebook-Seite hinterlegt.

Die Multi-Angebote Tabelle wird nur angezeigt, wenn es sich beim Angebot um ein Multiangebot handelt. Sie listet die zugehörigen Angebote und verwendet hauptsächlich Standard-Widget-Einstellungen. Grundlagen stehen unter Multiangebot / Kongressmodul.

Darstellung	Im Widget vorgesehene Plattformen
Bootstrap 5.3	Facebook, X und LinkedIn.
Ältere Bootstrap-Darstellung	Xing, Facebook, X/Twitter und LinkedIn.

Eine im Editor noch vorhandene Xing-Auswahl erzeugt im Bootstrap-5.3-Widget keine Xing-Schaltfläche. Instagram ist hier keine angebotene Sharing-Schaltfläche. Für einen festen Link zu einem eigenen Profil verwenden Sie bei Bedarf einen Textblock mit normalem Hyperlink; dieser ist kein automatischer Teilen-Dialog.

Prüfen Sie den Bootstrap-Style des tatsächlich zugewiesenen Designs.
Öffnen Sie das Social Widget, wählen Sie die passenden Plattformen und die zu teilende URL und speichern Sie.
Kontrollieren Sie die öffentliche Detailseite und die eingebundene Ansicht mit den verwendeten Cookie-/Browser-Einstellungen. Externe Plattformskripte und Browserblockaden können die Anzeige beeinflussen.
Vergleichen Sie nach einem Stylewechsel alle Schaltflächen und den geteilten Angebotslink erneut.

Volle Unterangebote: Information und Auswahl unterscheiden

Prüfen Sie bei Multiangeboten die öffentliche Tabelle und die tatsächliche Unterangebotsauswahl getrennt. Eine sichtbare Information über einen vollen Workshop macht diesen nicht erneut buchbar. Die Option zum standardmässigen Aufklappen steuert nur die anfängliche Darstellung. Die Multiangebot-Anleitung erklärt, welche ausgebuchten Einträge in Detail und Auswahl berücksichtigt werden und welche Grenzen gelten. Kontrollieren Sie freie Plätze, ausgebuchte Preise und Warteliste jeweils im echten Buchungsweg.

Interne und soziale Widgets bewusst einsetzen

Die Teilnehmerübersicht kann intern hilfreich sein, sollte aber nur angezeigt werden, wenn sie fachlich und datenschutzrechtlich passt. Social Widget und Facebook Fans können Reichweite unterstützen, wirken im eigentlichen Buchungsprozess aber schnell ablenkend.

Bei Google Maps gilt: Orte müssen sauber gepflegt sein, und externe Kartendienste können Datenschutz- oder Consent-Anforderungen auslösen. Testen Sie die Detailseite deshalb mit und ohne Cookie-Zustimmung.

Anfrage Button, Text Block und Gutscheinverkauf

Der Anfrage Button wird verwendet, wenn Sie mit einer Anfrageliste arbeiten. Verknüpfen Sie zuerst die gewünschte Liste, passen Sie Buttontext und Farbe an und pflegen Sie Übersetzungen für alle aktiven Sprachen. Auch der Text auf der Zusammenfassungsseite kann angepasst werden.

Der Text Block fügt an beliebigen Stellen mehrsprachige Texte, Bilder oder Hinweise ein. Sie können festlegen, ob der Text nur beim direkten edoobox-Aufruf oder zusätzlich in der iFrame-Einbettung erscheint.

Verwenden Sie Textblöcke für kurze Zusatzinformationen wie Vorbereitung, Treffpunkt, Material, Verpflegung oder interne Hinweise für eine geschlossene Zielgruppe. Längere Angebotsbeschreibungen gehören weiterhin in die Angebots- oder Kategoriebeschreibung, damit sie auch in anderen Ansichten konsistent bleiben.

Der Gutscheinverkauf Button leitet zur Gutscheinverkauf-Seite. Diese Seite bearbeiten Sie im Design Manager unter Vorlage | Body bei den weiteren Seiten. Buttontext, Farbe, Gutscheinwerte, Standardwert und Währung können angepasst werden. Die buchende Person kann keinen beliebigen Gutscheinwert frei eingeben; die auswählbaren Werte definieren Sie.

Bei der Einstellung Art der Verrechnung gibt es zwei wichtige Varianten. Reduktion Angebotspreis eignet sich, wenn der Gutschein nicht auf Zusatzleistungen wirken soll. Verrechnung mit Buchungstotal ist breiter und kann auf das Buchungstotal wirken. Zusätzlich können Preiskategorien eines Angebots als Gutscheinwerte zur Auswahl gestellt werden. Grundlagen stehen unter Verkaufte Gutscheine.

Testen Sie den Gutscheinverkauf immer mit der öffentlichen Detailseite, der Gutscheinseite und der Bestätigung. So erkennen Sie, ob Standardwert, Währung, Preiskategorien, Buttontext und Verrechnungsart zum gewünschten Verkaufsprozess passen.

Widget-Reihenfolge und mobile Darstellung

Die Reihenfolge der Widgets ist entscheidend. Auf Desktop können mehrere Informationen nebeneinander wirken; auf Smartphones erscheinen sie oft untereinander. Platzieren Sie deshalb zuerst Titel, Kernangaben und Anmeldung, danach Beschreibung, Termine, Ort und ergänzende Elemente.

Grosse Karten, Social Widgets, Teilnehmendenlisten oder lange Tabellen sollten nicht vor der eigentlichen Anmeldeentscheidung stehen. Wenn ein Angebot mehrere Module hat, kann die Terminübersicht wichtig sein; bei einem einfachen Tageskurs reicht oft eine kurze Detailzeile plus Beschreibung.

Prüfen Sie nach jeder Änderung Desktop, Tablet und Smartphone. Achten Sie darauf, ob Buttontext, Tabellenspalten, Google Maps und Textblöcke ohne horizontales Scrollen lesbar sind. Besonders bei iFrame-Einbindungen kann die verfügbare Breite kleiner sein als im Design Manager.

Wenn Sie mehrere Designs oder Sprachen verwenden, testen Sie die Vorlage in jeder relevanten Kombination. Lange Übersetzungen, andere Buttontexte und unterschiedliche Datumsformate können das Layout stärker verändern als die Standardansicht vermuten lässt.

Prüfliste für gute Angebot-Details

Der Titel ist eindeutig und nicht doppelt übergross.
Preis, Ort, Termin, freie Plätze, Leitung und Anmeldeaktion sind auffindbar.
Anmelde- oder Anfragebutton ist ohne langes Scrollen sichtbar.
Module und Tabellen sind mobil lesbar.
Teilnehmerübersicht zeigt nur datenschutzkonforme Daten.
Social Widgets lenken nicht vom Buchungsentscheid ab.
Warteliste, Anfrageliste, interne Angebote, Multiangebote und Gutscheinverkauf wurden separat getestet.

Anwendungsbeispiel: Detailseite für ein Seminar

Ein Seminar zeigt Angebotsname, Beschreibung, Ort, Leitung, Termine, Preis und Anmeldebutton. Ein zusätzlicher Textblock erklärt die Vorbereitung. Die Teilnehmerübersicht wird weggelassen, weil es ein öffentliches Angebot ist. Der Anmeldebutton bleibt direkt unter den wichtigsten Fakten sichtbar.

Anwendungsbeispiel: Angebot mit freier Terminwahl

Ein Fitnessangebot zeigt Name, Preisrahmen, nächste Termine und den Anmeldebutton. Die ausführliche Lektionenauswahl erfolgt erst im passenden Anmeldeschritt. Auf Mobil bleibt der Anmeldebutton sichtbar, während eine grosse Karte ausgeblendet wird.

Anwendungsbeispiel: Interner Hinweis nur für berechtigte Personen

Ein Textblock mit Mitarbeitendenhinweis wird über Teilnehmer-Tags eingeschränkt. Das Team testet angemeldet mit und ohne benötigte Tags sowie ohne Login. Öffentliche Angebotsdaten und Anmeldebutton bleiben unabhängig davon verständlich.

Angebotsbild, Dozierende und Abonnemente ergänzen

Für Bootstrap 5.3 können Sie das Widget Angebotsbild unabhängig von Titel und Beschreibung platzieren. Wählen Sie eine Bildauflösung von 300, 600 oder 900 Pixeln und bei Bedarf die angebotenen Bootstrap-Bildklassen. Das Widget füllt seine Fläche ohne Verzerrung; ohne hinterlegtes Angebotsbild wird es ausgeblendet. Details: Neue Bild- und Informationswidgets.

Dozenten Details zeigt Karten der dem Angebot zugeordneten Dozierenden. Bild beziehungsweise Initialen, Beschreibung, E-Mail und Telefon lassen sich getrennt anzeigen. Eine Beschreibung in einer anderen Sprache muss entsprechend gepflegt sein; veröffentlichen Sie Kontaktinformationen bewusst.

Bei aktivem Abo-Plugin kann ein Abo-Katalog auch in der Angebotsdetailseite stehen. Er erklärt erhältliche Pläne; die Buchbarkeit einer konkreten Preiskategorie wird in deren Abo-Limitierung eingestellt. Fügen Sie den Katalog dort ein, wo Interessierte Preis und Nutzen vor der Buchung verstehen. Die Abo-Designanleitung beschreibt Katalog und Checkout.

Wenn Bild, Text oder Buchungsaktion fehlt

Kontrollieren Sie zuerst das Design der konkreten Kategorie und die öffentliche Freigabe des Angebots. Ein Anmeldebutton folgt Angebotsstatus, Zeitraum und Kapazität. Ein eigener Buttontext oder eine zusätzliche Bildkarte hebt diese Regeln nicht auf.

Beim Textblock bedeutet die iFrame-Option: Anzeige beim direkten edoobox-Aufruf oder zusätzlich in der Einbettung. Für Bilder und Dozentenkarten müssen die entsprechenden Quelldaten vorhanden sein. Ergänzen Sie einen öffentlichen Abo-Katalog nur mit freigeschaltetem Plugin und veröffentlichten Plänen; die Abo-Limitierung einer Preiskategorie bleibt separat in Preiskategorien einzurichten.

Social-Plattformen je Bootstrap-Style prüfen

Volle Unterangebote: Information und Auswahl unterscheiden