Vorlage: Angebote Übersicht

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 Angebote Übersicht entscheidet, wie Kategorien und Angebote im öffentlichen Buchungsprozess präsentiert werden. Sie kann eine schlichte Liste, eine tabellarische Kursübersicht, einen Kalender, Kacheln, Filter oder eine Kombination daraus enthalten.

Bearbeiten Sie diese Vorlage im Design Manager Editor. Wichtig ist, dass Filter-Widgets immer mit einem Widget kombiniert werden, das die gefilterten Angebote tatsächlich anzeigt, zum Beispiel Angebotsliste, Angebotstabelle, Kalender oder Kacheln.

Typische Widgets dieser Vorlage sind Statuslegende, Suche, Tag-Filter, Angebotsfilter, Kategorien-Kacheln, Kategorielisten, Angebotsliste, Angebotstabelle, Kalender, Angebotskacheln, Beschreibung, Textblock, Gutscheinverkauf-Button und Kartenansicht.

Widget-Auswahl der Angebotsübersicht mit Markierungen A bis H — Die linke Spalte wählt die Vorlage, die Mitte enthält das Layout, rechts stehen die dazugehörigen Widgets. Die Markierungen A–H ordnen Suche und Kategorieansichten zu.
A
Erklärung der Statussymbole
B
Suche nach Angeboten
C
Vorbereitete Tagfilter
D
Suchmaske mit mehreren Angebotsfiltern
E
Kategoriekacheln mit Bildern
F
Kategoriebilder über die Breite
G
Kategorien als Liste
H
Kategorien in mehreren Spalten

Statuslegende: erklärt die Farben oder Zustände von Angeboten, zum Beispiel verfügbar, bald ausgebucht oder Warteliste.
Suche: ermöglicht Freitextsuche über die sichtbaren Angebote.
Tag-Filter: filtert Angebote nach vorbereiteten Tags.
Angebotsfilter: bündelt mehrere Filterarten in einem Widget.
Kategorien und Angebote: zeigen Struktur und konkrete buchbare Inhalte.
Text- und Zusatzwidgets: ergänzen Hinweise, Beschreibung, Gutscheinverkauf oder Karte.

Statuslegende und Angebotsstatus

Die Statuslegende erklärt Besucherinnen und Besuchern, was farbige Banner oder Statusanzeigen bedeuten. Das ist besonders hilfreich, wenn Sie mit Warteliste, ausgebuchten Angeboten, Anfragelisten oder bald startenden Kursen arbeiten.

Stimmen Sie die Legende mit den tatsächlichen Angebotsstatus ab. Wenn Statusbanner in Listen oder Tabellen eingeblendet werden, sollten Text und Farbe zur Sprache Ihrer Zielgruppe passen. Vermeiden Sie interne Begriffe, die Teilnehmende nicht kennen.

In der Vorschau erscheint ein Status normalerweise nur, wenn mindestens ein sichtbares Angebot diesen Status tatsächlich verwendet. Testen Sie deshalb nicht nur freie Angebote, sondern auch ausgebuchte Angebote, Warteliste, Anfrageliste und interne Angebote, wenn diese Zustände in Ihrem Programm vorkommen.

Das Suchfeld sucht nach Angebotsnamen und hilft besonders bei grossen Angebotslisten. Es ersetzt keine saubere Kategorienstruktur, kann aber als schnelle Direktsuche oberhalb von Listen, Tabellen oder Kacheln sinnvoll sein.

Suche, Tag-Filter und Angebotsfilter

Die Suche eignet sich für breite Programme mit vielen Kursen. Besucherinnen und Besucher können nach Begriffen aus Angebotstitel, Beschreibung oder sichtbaren Informationen suchen. Platzieren Sie die Suche oberhalb der Angebotsliste oder Tabelle.

Der Tag-Filter zeigt vordefinierte Tags als auswählbare Filter. Alle Tags, nach denen gefiltert werden soll, müssen vorher in edoobox gepflegt und in den Widget-Einstellungen hinzugefügt werden. Mehr dazu steht unter Ein Angebot mit Tags versehen und Nutzung des Tagfilter-Widgets.

Der Angebotsfilter ist die flexible Variante. Je nach Konfiguration können Preis, Datum, Leitung, Durchführungsort, Kategorie, Tag, Status oder Suchfeld angeboten werden. Setzen Sie nur Filter ein, die für Ihre Zielgruppe verständlich sind. Zu viele Filter machen eine kleine Kursübersicht unnötig schwer.

Für Preis, Leitung, Durchführungsort, Status, Kategorie und Tag-Filter kann je nach Widget eingestellt werden, dass nur Werte aus der aktuell gefilterten Ergebnismenge auswählbar bleiben. Das verhindert leere Trefferlisten, muss aber pro Filter bewusst aktiviert und mit realistischen Angeboten getestet werden.

Beim Tag-Filter gilt: Fügen Sie alle Tags, die als Filter erscheinen sollen, im Widget hinzu. Enthält ein Tag-Filter mehrere Tags, filtert die Ansicht nach den darin enthaltenen Tags. Prüfen Sie bei Tags mit Werten, ob die Werte besser als eigene Tabellenspalte oder als Filter eingesetzt werden.

Filteroptionen planen

Wählen Sie für einfache vorbereitete Themenlinks Tag Filter. Für eine Suchmaske mit Preis, Datum, Leitung, Ort, Status, Suche, Kategorie und bis zu zehn Taggruppen verwenden Sie Angebote Filter. Das Widget bietet eine sortierbare Auswahl der aktiven Filter, automatische oder manuelle Werte, mehrsprachige Gruppen- und Wertbezeichnungen, Icons und die Option Filtergruppen mit UND verknüpfen.

Die vollständige Schrittfolge und Beispiele stehen in Angebotsfilter konfigurieren. Ergänzen Sie auf derselben Seite mindestens eine Angebotsdarstellung. Filtern verändert die sichtbare Menge, keine Buchungsberechtigung oder Kapazität.

Kategorien anzeigen

Kategorien helfen, Programme in Themenbereiche zu gliedern. In der Angebotsübersicht stehen verschiedene Darstellungen zur Verfügung:

Kategorien-Kacheln: zeigen Kategorien visuell. Leere Kategorien können ausgeblendet werden. Der Anzeigen-Button kann sichtbar bleiben oder für eine reduzierte Darstellung entfernt werden.
Kategorieliste mit grossen Bildern: nutzt breite Kategoriebilder wie Banner und eignet sich für visuelle Einstiegsseiten.
Kategorien Liste: zeigt Kategorien untereinander und kann je nach Einstellung immer offen oder als Dropdown erscheinen.
Kategorien Liste in Spalten: verteilt Kategorien über mehrere Spalten. Titel, Spalten, Zeilen und Hintergrund können angepasst werden.

Wenn Besucherinnen und Besucher auf eine Kategorie klicken, sollte auf der nächsten Ebene wieder ein Angebotswidget vorhanden sein. Prüfen Sie deshalb nicht nur die Startansicht, sondern auch die Ansicht nach dem Klick in eine Unterkategorie.

Angebote als Liste oder Tabelle anzeigen

Die Angebotsliste ist responsiv und eignet sich für erklärungsbedürftige Kurse. Je nach Einstellung können Bild, Datum, Ort, freie Plätze, Leitung, Lektionen, Preis, Statusbanner, Details-Button und Anmelde-Button angezeigt werden.

Weitere Widgets der Angebotsübersicht mit Markierungen I bis O — Für dieselbe Vorlage stehen unterschiedliche Angebotsdarstellungen bereit. I–L zeigen die Varianten, M–O ergänzen Beschreibungen, Hinweise und den Zugang zum Gutscheinverkauf.
I
Angebote untereinander auflisten
J
Angebote als Tabelle ausgeben
K
Angebote im Kalender zeigen
L
Angebote in Kacheln zeigen
M
Hinterlegte Beschreibung ausgeben
N
Freien Text und Bilder ergänzen
O
Gutscheinverkauf öffnen

Je nach Konfiguration kann die Liste statt eines Angebotsbildes auch angemeldete Teilnehmende anzeigen. Nutzen Sie diese Darstellung nur, wenn sie fachlich gewünscht ist und Datenschutz, Zielgruppe sowie öffentliche Wirkung dazu passen.

Wenn mehrere Preise vorhanden sind, kann eine Preisspanne oder ein Standardpreis angezeigt werden. Der Anmelde-Button kann umbenannt werden; bei Warteliste kann ein eigener Text erscheinen. Der Details-Button führt zur Angebot-Details-Vorlage.

Die Angebotstabelle eignet sich für kompakte Vergleiche. Spalten wie Angebotsname, Status, Datum, Preis, Ort oder freie Plätze können gewählt werden. Tags mit Werten können als zusätzliche Spalten erscheinen. Die Beschreibung kann gekürzt dauerhaft sichtbar sein, typischerweise bis etwa 250 Zeichen, oder per Klick geöffnet werden.

In Tabellen können Monate als Zwischentitel ausgegeben, Angebotsnamen verlinkt und Buttons ein- oder ausgeblendet werden. Prüfen Sie die responsive Darstellung unter 800 Pixel Breite, damit die Tabelle auf Smartphones nutzbar bleibt.

Angebote kategorienübergreifend chronologisch anzeigen

Die Angebotssortierung und die Kategorienavigation sind getrennt. Für eine einzige Datumsfolge benötigen Sie eine gemeinsame Angebotsliste oder Angebotstabelle auf der Ebene, die alle gewünschten Kategorien umfasst. Mehrere getrennt eingebundene Kategorien oder Listen ergeben keine gemeinsame Sortierung.

Wählen Sie unter Angebote: Allgemeine Einstellungen die Sortierung nach Startdatum.
Öffnen Sie im tatsächlich verwendeten Design Body → Angebote Übersicht und platzieren Sie eine Angebotstabelle oder Angebotsliste.
Erzeugen Sie den Einstieg mit Vorschau-Share auf Kontoebene oder auf der gemeinsamen übergeordneten Kategorie. Ein Einstieg in eine einzelne Unterkategorie zeigt weiterhin nur deren Bereich.
Entfernen Sie bei Bedarf die Kategorien-Kacheln oder Kategorieliste aus dieser Vorlage. Das reduziert die Navigation; es ist kein zusätzlicher Sortierschalter.
Zeigen Sie in der Tabelle das Startdatum an. Wählen Sie Monats-Zwischentitel nur, wenn diese zur gewünschten Darstellung passen.
Vergleichen Sie mindestens drei Angebote aus verschiedenen Kategorien mit ineinandergreifenden Startdaten. Prüfen Sie dieselbe Reihenfolge nach einem Tag- oder Angebotsfilter und auf der eingebundenen Website.

Beispiel: Ein Seminar aus Kategorie A beginnt vor einem Workshop aus B; danach folgt ein weiterer Kurs aus A. Die gemeinsame Tabelle soll A, B, A nach Datum zeigen. Wird stattdessen zuerst der ganze Bereich A gezeigt, kontrollieren Sie die globale Sortierung und ob die Website mehrere getrennte Kategorieansichten zusammensetzt.

Die Tabellenspalte für den nächsten Termin kann die Tabelle nach diesem Termin sortieren. Verwenden Sie für die Reihenfolge nach Angebotsbeginn das passende Startdatum und prüfen Sie fortlaufende Angebote gesondert. Ein Suchbegriff kann die Suchreihenfolge beeinflussen; führen Sie die Gegenprobe auch ohne Suchtext durch.

Preise ausblenden, ohne den Angebotspreis zu ändern

Die Sichtbarkeit im Widget ändert keine Preiskategorie und keinen zu zahlenden Betrag. In der Angebotstabelle entfernen Sie unerwünschte Preisspalten aus der Spaltenauswahl. Das wirkt auf alle Zeilen dieser Tabelle. Im Widget Angebotsliste bedeutet «Preisspanne durch Standardpreis ersetzen» lediglich eine andere Preisdarstellung; dadurch verschwindet ein Nullpreis nicht automatisch.

Ein allgemeiner Schalter «nur kostenlose Preise verbergen» ist in diesen Widget-Einstellungen nicht vorgesehen. Für einen eigenen Bereich ohne Preisangabe können Sie eine eigene Kategorieansicht mit einer Tabelle ohne Preisspalte und dem Hinweis «Kostenlose Teilnahme» verwenden. Prüfen Sie auch die Preiszeilen der Detailseite. In einer gemeinsamen Tabelle mit kostenlosen und kostenpflichtigen Angeboten gelten die gewählten Spalten für alle Angebote.

Buttons, Links und Frame-Verhalten

In Liste und Tabelle können Buttons wie Jetzt anmelden, Details oder Jetzt buchen ein- oder ausgeblendet und teilweise umbenannt werden. Wenn ein Angebot auf Warteliste steht, kann ein eigener Buttontext sinnvoll sein.

Sie können ausserdem steuern, ob Klicks zuerst in die Angebotsdetails führen oder direkt in die Anmeldung. Für erklärungsbedürftige Kurse ist der Weg über Details oft besser; für einfache Termine kann die direkte Anmeldung schneller sein.

Bei iFrame-Einbindungen können Links in einem höheren Frame geöffnet werden. Dadurch sieht die Person die Standardansicht von edoobox statt innerhalb des aktuellen iFrames weiterzunavigieren. Testen Sie dieses Verhalten auf Ihrer Website, bevor Sie es produktiv verwenden.

Für lange Tabellen kann eine Gruppierung nach Durchführungsmonat helfen. Der Angebotsname kann verlinkt werden, damit Nutzerinnen und Nutzer über den Namen direkt zur Detailseite gelangen.

Für einzelne Angebote auf eine externe Anmeldung weiterleiten

Soll die Anmeldung eines Angebots auf einer anderen Website stattfinden, hinterlegen Sie am betreffenden Angebot einen Tag mit Wert: Tag-Name redirect, Wert zum Beispiel https://example.org/anmeldung/workshop. Name und Wert sind zwei getrennte Angaben. Verwenden Sie eine vollständige gültige URL und ordnen Sie den Tag nur den Angeboten zu, die extern angemeldet werden sollen.

Die Weiterleitung greift beim Start einer neuen Anmeldung. Ein Details-Link öffnet zunächst die edoobox-Detailseite. Die Tabellenoption «Sämtliche Links führen in die Angebots-Details» verändert diesen ersten Schritt; sie ist kein Eingabefeld für eine externe Zieladresse. Der Anmeldebutton der Detailseite verwendet danach denselben Anmeldestart.

Öffnen Sie ein freies, veröffentlichtes Demo-Angebot mit erreichtem Anmeldebeginn und hinterlegen Sie den Weiterleitungs-Tag.
Klicken Sie auf die Anmeldeaktion der tatsächlich eingebundenen Liste, Tabelle oder Kachel.
Öffnen Sie zusätzlich die Detailseite und deren Anmeldebutton.
Wiederholen Sie beide Wege in einer taggefilterten Übersicht. Ein Tagfilter wählt Angebote aus; er ändert den hinterlegten Weiterleitungswert nicht.
Prüfen Sie auf der eigenen Website und mobil, ob das externe Ziel im gewünschten Browser-/Frame-Kontext geöffnet wird. Kontrollieren Sie auch einen normalen Kurs ohne Weiterleitung.

Die Anmeldung auf der Zielwebsite wird dadurch nicht als abgeschlossene edoobox-Buchung angelegt. Klären Sie die weitere Datenübernahme in Ihrer Integration. Entfernen Sie die Weiterleitungszuordnung, wenn dieses Angebot wieder den normalen edoobox-Anmeldeweg verwenden soll.

Kalender und Angebotskacheln

Der Kalender zeigt Angebote oder Termine in einer zeitlichen Ansicht. Wochenendtage können ausgeblendet werden, freie Plätze können sichtbar sein und der sichtbare Zeitbereich kann begrenzt werden. Wenn Termine immer um dieselbe Uhrzeit starten, kann eine Startzeit für das automatische Scrollen gesetzt werden.

Das Zeitraster kann fein oder grob eingestellt werden. Je nach Bedarf wählen Sie Monats-, Wochen-, Tages- oder Listenansicht als verfügbare Ansichten und definieren eine Standardansicht. Details zur Terminlogik finden Sie unter Kalender und Termine.

Angebote in Kacheln sind ideal für moderne Übersichten mit Bildern und kurzen Texten. Die Kachelbreite kann für normale Ansicht und Tablet separat definiert werden. Optional kann ein Ausschnitt der Beschreibung angezeigt werden, und Teilnehmende können direkt aus der Kachel zur Anmeldung geführt werden.

Beschreibung und Textblock

Das Widget Beschreibung zeigt den Beschreibungstext der aktuellen Kategorie oder des aktuellen Angebots. Es ist hilfreich, wenn mehrere Angebote denselben Einführungstext benötigen: Pflegen Sie die Beschreibung an der Kategorie und zeigen Sie sie in der Übersicht oder Detailseite an.

Der Textblock ist für feste Inhalte gedacht, zum Beispiel Hinweise zu Zielgruppe, Anmeldeschluss, Kontakt, Barrierefreiheit oder Durchführung. Pflegen Sie Textblöcke in allen aktiven Sprachen. Sie können ausserdem steuern, ob ein Textblock immer sichtbar ist oder nur in der iFrame-Ansicht.

Gutscheinverkauf und Kartenansicht

Der Gutscheinverkauf-Button führt zur Gutscheinverkauf-Seite. Button-Text und Farbe können angepasst werden. Die verfügbaren Gutscheinwerte definieren Sie selbst; die Währung folgt normalerweise der Kontowährung, kann aber je nach Einstellung angepasst werden.

Bei der Verrechnung wählen Sie, ob der Gutschein den Angebotspreis reduziert oder mit dem gesamten Buchungstotal verrechnet wird. Das ist wichtig, wenn Gutscheine nicht für Zusatzleistungen gelten sollen. Die zur Auswahl stehenden Gutscheinwerte legen Sie vorab fest; ein frei eingegebener Wunschbetrag durch die buchende Person ist in diesem Widget nicht vorgesehen. Zusätzlich bestimmen Sie, welcher Gutscheinwert nach dem Öffnen der Gutscheinverkauf-Seite standardmässig vorausgewählt ist. Weitere Details stehen unter Verkaufte Gutscheine / Geschenkgutschein.

Die Kartenansicht beziehungsweise Marker-Map eignet sich, wenn Orte für die Angebotsauswahl relevant sind. Prüfen Sie dafür die Durchführungsorte, Adressen und ob Angebote ohne Ort sinnvoll dargestellt oder bewusst ausgeblendet werden sollen.

Für die Marker-Map benötigt Ihr Konto einen eigenen Google-Maps-API-Key. Wenn ein individuelles Kartendesign verwendet werden soll, kann zusätzlich eine Maps-ID aus der Google Cloud hinterlegt werden. Prüfen Sie Zoom-Level, Kartentyp, Marker-Verhalten und den Text des Buttons Mehr lesen in der Vorschau, bevor Sie die Karte auf Ihrer Website einbinden.

Für standortbezogene Angebote kann eine Kartenansicht hilfreich sein. Sie setzt voraus, dass Durchführungsorte mit gültigen Adress- und Positionsdaten gepflegt sind. Prüfen Sie vor Veröffentlichung, ob Marker, Listenansicht und Detailseite konsistent zusammenarbeiten.

Wenn Google Maps oder vergleichbare Kartenfunktionen verwendet werden, beachten Sie Datenschutz, Cookie-/Consent-Regeln und mögliche externe Dienstleister. Für rein interne oder stark fokussierte Angebote ist eine einfache Liste oft schneller und klarer.

Empfohlene Aufbauten

Kleines Kursprogramm: Beschreibung, Suche, Angebotsliste.
Grosses Programm mit Themen: Kategorien-Kacheln, Angebotsfilter, Angebotstabelle.
Terminorientierte Veranstaltungen: Suche, Kalender, Angebotsliste als Ergänzung.
Visuelle Akademie-Seite: Kategorien-Kacheln, Angebotskacheln, Textblock mit Kontakt.
Geschenkgutscheine: Textblock, Gutscheinverkauf-Button, Angebotsliste der beliebtesten Kurse.

Anwendungsbeispiel: Übersicht für ein Kursprogramm

Eine Schule bietet Sprachkurse in mehreren Kategorien an. Oben steht ein Textblock mit kurzem Hinweis. Danach folgen Kategorien-Kacheln. Innerhalb der Kategorie erscheinen Angebotsfilter, Tag-Filter und Angebotstabelle. Die Tabelle zeigt Datum, Ort, freie Plätze und Preis, während der Details-Button zur ausführlichen Kursbeschreibung führt.

Zusammenspiel mit Preisen, Warteliste und Zusatzleistungen

Die Angebotsübersicht zeigt häufig den ersten Eindruck zu Preis, freien Plätzen und Buchbarkeit. Wenn ein Angebot mehrere Preiskategorien hat, entscheiden die Widget-Einstellungen, ob eine Preisspanne oder ein Standardpreis sichtbar ist.

Bei Warteliste oder Anfragelisten sollten Buttontext, Statusbanner und Beschreibung zusammenpassen. Sonst wirkt ein Angebot buchbar, obwohl zuerst eine Anfrage oder ein Wartelisteneintrag erstellt wird.

Wenn Zusatzleistungen oder Zusatzfragen wichtig sind, erwähnen Sie diese nicht nur im Formular, sondern bei Bedarf bereits in Beschreibung, Textblock oder Angebotsdetails. So verstehen Teilnehmende früh, welche Informationen oder Zusatzkosten später folgen.

Vorlage testen

Startansicht, Unterkategorie und einzelnes Angebot prüfen.
Suche, Tag-Filter und Angebotsfilter mit realistischen Daten testen.
Leere Kategorien, ausgebuchte Angebote und Warteliste kontrollieren.
Desktop, Tablet und Smartphone prüfen.
Einbindung als iFrame oder WordPress-Shortcode separat testen.

Testen Sie die Angebotsübersicht mit mehreren Angebotsstatus, ausgebuchten Angeboten, Warteliste, Tags und Kategorien. Erst dann sehen Sie, ob Suchfeld, Filter, Statuslegende, Kartenansicht, Angebotsliste und Buttons die richtigen Entscheidungen für Teilnehmende unterstützen.

Anwendungsbeispiel: Standort und Niveau gemeinsam filtern

Eine Sprachschule verwendet Tags für Standort und Niveau. Im Widget Angebote Filter richtet sie dafür zwei getrennte Tag-Gruppen ein und aktiviert «Filtergruppen mit UND verknüpfen». Die daneben platzierte Angebotsliste soll bei «Zürich» plus «B2» nur Kurse zeigen, die beide Kriterien erfüllen. Der Test umfasst auch eine leere Treffermenge und die mobile Bedienung ohne horizontalen Überlauf. Die Einrichtung beschreibt Angebotsfilter konfigurieren.

Abonnemente als eigenen Einstieg anbieten

Bei aktivem Abo-Plugin kann der Abo-Katalog direkt auf der Angebotsübersicht erscheinen. Auf der eigenen Abo-Vorlage stehen zusätzlich Übersicht und Liste als Darstellungsvarianten zur Verfügung. Der Katalog zeigt veröffentlichte kaufbare Pläne; die normalen Angebotswidgets bleiben für Kurse, Seminare und Veranstaltungen zuständig.

Platzieren Sie den Katalog nach einem kurzen erklärenden Text, wenn sich der Abo-Nutzen für viele Angebote eignet. Bei einem grossen Angebotssortiment kann ein eigener Abo-Einstieg über die Navigation klarer sein. Konfiguration und Kaufweg beschreibt Abonnemente und Kundenbereich gestalten.

Der Angebotsfilter bietet mehrere Filtergruppen und Darstellungsoptionen. Verwenden Sie nur die benötigten Gruppen und kontrollieren Sie Suchfeld, Tagfilter und Angebotsfilter zusammen mit der konkreten Angebotsliste. Ein angezeigter Filter oder Abo-Katalog stellt allein noch keine Kursbuchung dar.