Vorlage: Kopfzeile und Fusszeile
Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.
Für Kopfzeile und Fusszeile steht im Design Manager jeweils eine zentrale Vorlage zur Verfügung. Diese Bereiche erscheinen wiederkehrend auf den anderen Vorlagen und eignen sich für Navigation, statische Hinweise, Gutscheinverkauf, Tracking- oder Cookie-Hinweise.
Weil Header und Footer über mehrere Seiten hinweg sichtbar sind, sollten Sie dort nur Inhalte platzieren, die während des gesamten Buchungsprozesses hilfreich sind.
Kopfzeile und Fusszeile verstehen
Die Kopfzeile liegt oberhalb der jeweiligen Buchungsprozess-Vorlage. Die Fusszeile liegt darunter. Beide Vorlagen werden separat gepflegt und behalten ihre letzte Auswahl je Bereich.
Nutzen Sie diese Bereiche nicht für lange Angebotsbeschreibungen. Solche Inhalte gehören in Kategorie, Angebot oder die passende Body-Vorlage.
Eine Vorlage für alle Seiten
Innerhalb eines Designs gibt es je eine gemeinsame Kopf- und Fusszeile. Sie werden von den Seiten verwendet, die dieses Design tatsächlich laden. Ein Kategoriedesign und das Konto-Standarddesign können unterschiedliche Header und Footer besitzen. Kontrollieren Sie deshalb sowohl Angebotsseiten als auch Konto-/Abschlussseite; eine Änderung in einem Kategoriedesign aktualisiert nicht automatisch jedes andere Design.
Verwenden Sie gemeinsame Bereiche für Navigation, Logo, Kontakt, Sprache oder Gutscheinverkauf. Angebotsspezifische Hinweise gehören in die Angebotsbeschreibung oder die passende Body-Vorlage.
Navigationsmenü
Im Navigationsmenü steuern Sie, wie sich Teilnehmende im Buchungsprozess bewegen können. Typische Optionen sind:
Position der Navigation, zum Beispiel oben angeheftet.
Alle-Angebote-Button ein- oder ausblenden.
Home-Button im Buchungsprozess anzeigen.
Suchfeld anzeigen, meist in Angebotsübersicht und Angebotsdetails.
Login-Button anzeigen, wenn das Teilnehmendenkonto aktiv ist.
Sprachauswahl anzeigen, wenn mehrere Buchungsprozess-Sprachen aktiv sind.
Wenn Sie einzelne Kategorien oder Angebote auf einer Website einbinden und keine Rückkehr zur Übersicht aller Angebote wünschen, blenden Sie den Alle-Angebote-Button aus.
Optionen im Navigationsmenü
| Option | Wirkung | Wann sinnvoll? |
|---|---|---|
| Alle Angebote | Führt von Angebotsdetails zurück zur Angebotsübersicht. | Aktiv lassen, wenn Teilnehmende zwischen Angeboten wechseln dürfen. Deaktivieren, wenn einzelne Kategorien oder Angebote separat eingebunden sind. |
| Home | Führt im Buchungsablauf zurück zur Angebotsdetailseite. | Hilfreich, wenn Teilnehmende vor dem Abschluss nochmals Angebotsdetails prüfen sollen. |
| Suchfeld | Zeigt Suche in Angebotsübersicht und Angebotsdetail. | Für grössere Angebotskataloge aktivieren; bei sehr fokussierten Einzelseiten oft weglassen. |
| Login | Öffnet den Zugang zum Teilnehmerkonto. | Aktivieren, wenn Teilnehmende ihre Buchungen, Rechnungen, Tickets oder Dateien selbst abrufen sollen. |
| Sprachauswahl | Ermöglicht Wechsel zwischen aktivierten Korrespondenzsprachen. | Nur sinnvoll, wenn Angebote, Vorlagen und Rechtstexte wirklich mehrsprachig gepflegt sind. |
Von der Buchungsseite zur eigenen Kurswebsite zurückführen
Der eingebaute Home-Button ist eine Rücknavigation innerhalb des edoobox-Buchungsablaufs. Sie können ihn ein- oder ausblenden; eine frei wählbare externe Home-Adresse ist dort nicht vorgesehen. Der Alle Angebote-Button führt zur edoobox-Angebotsübersicht.
- Öffnen Sie das tatsächlich zugewiesene Design und dessen Kopfzeile.
- Blenden Sie im Navigationsmenü die Rücknavigation aus, die für Ihren eingebundenen Einzelbereich nicht gebraucht wird.
- Fügen Sie einen Textblock ein und schreiben Sie beispielsweise «Zur Kursübersicht auf unserer Website».
- Markieren Sie den Text, wählen Sie Link einfügen und tragen Sie die vollständige Adresse ein, zum Beispiel
https://example.org/kurse/. Wählen Sie das im Linkdialog angebotene Fensterziel passend zu Ihrem Einstieg. - Pflegen Sie alle aktiven Sprachen, speichern Sie Widget und Layout und prüfen Sie den Link aus Übersicht, Detail und Anmeldung.
- Kontrollieren Sie den direkten edoobox-Aufruf und die echte iFrame-/WordPress-Einbindung. Der Link soll die beabsichtigte Website öffnen und keine zweite Kurswebsite innerhalb eines zu kleinen eingebetteten Bereichs erzeugen.
Der Textblock ist fester Inhalt dieses Designs. Bei unterschiedlichen Kurswebsites je Bereich benötigen Sie die passende Designzuweisung. Ein Rücksprung beendet oder bestätigt keine laufende Buchung; beschriften Sie ihn eindeutig.
Text Block in Header oder Footer
Ein Text Block eignet sich für Logo, kurze Kontaktinformation, Firmenanschrift, Hinweisbanner oder saisonale Hinweise. Pflegen Sie den Text in allen aktiven Sprachen.
Über Sichtbarkeitseinstellungen entscheiden Sie, ob der Text immer erscheint oder nur in bestimmten Einbettungsfällen. Prüfen Sie die mobile Darstellung, damit Kopfzeile und Buchungsformular nicht zu viel Platz verlieren.
Gutscheinverkauf Button
Der Gutscheinverkauf Button kann in Kopfzeile oder Fusszeile platziert werden. Der Vorteil: Der Gutscheinverkauf bleibt auf allen relevanten Seiten sichtbar.
Verwenden Sie diese Platzierung nur, wenn Gutscheine wirklich ein wiederkehrendes Angebot sind. Zu viele permanente Buttons können vom eigentlichen Buchungsabschluss ablenken. Details stehen unter Vorlage: Abschlussseite und Gutscheinverkauf und Verkaufte Gutscheine / Geschenkgutschein.
Textblock und iFrame-Sichtbarkeit
Mit dem Textblock können Sie Logo, Firmenanschrift, Kontaktzeile, kurze Hinweise oder Bilder in allen aktiven Sprachen pflegen. Prüfen Sie die mobile Darstellung besonders sorgfältig, weil Header und Footer auf kleinen Bildschirmen schnell zu hoch werden.
Je nach Widget-Einstellung kann ein Textblock immer sichtbar sein oder nur dann, wenn der Buchungsprozess direkt ausserhalb Ihrer Website geöffnet wird. Das ist nützlich, wenn Logo und Anschrift auf Ihrer Website bereits sichtbar sind, in einem direkten edoobox-Link aber zusätzlich erscheinen sollen.
Code Widget
Das Code Widget wird in der aktuellen Auswahl im Footer angeboten und erlaubt eigenen HTML-, CSS- oder Script-Code. Benennen Sie den Baustein nach seinem Zweck. Verwenden Sie es nur, wenn Sie genau wissen, welche Auswirkungen der Code auf Darstellung, Sicherheit, Datenschutz und Ladezeit hat.
Wenn Sie mit eigenem JavaScript oder jQuery arbeiten, warten Sie darauf, dass die Seite geladen ist, und testen Sie die Änderung in allen relevanten Vorlagen. Ein Code, der ein Widget anhand einer ID ausblendet, kann nach Designänderungen ins Leere laufen oder versehentlich ein anderes Element betreffen.
Cookie Banner
Der Cookie Banner holt Einwilligungen für Tracking oder externe Dienste ein. Platzieren Sie ihn so, dass er sichtbar ist, aber zentrale Buchungsaktionen nicht verdeckt. Definieren Sie den Text verständlich und prüfen Sie, wie sich der Banner bei Zustimmung und Ablehnung verhält. Wenn Tracking-Cookies bei Ablehnung nicht gesetzt werden sollen, testen Sie den Buchungsprozess auch ohne Einwilligung.
Für Tracking lesen Sie zusätzlich Cookie Banner und Google Tag Manager / Google Analytics.
Anwendungsbeispiel: Header für Kursportal
Eine Organisation zeigt im Header Logo, Navigation, Suche und Sprachauswahl. Den Gutscheinverkauf Button platziert sie in der Fusszeile, damit er sichtbar bleibt, aber den Anmeldebutton im Buchungsprozess nicht konkurriert.
Anwendungsbeispiel: Mehrsprachige Navigation mit Teilnehmendenkonto
Die Kopfzeile zeigt Logo, Angebotsübersicht, Sprachwahl und Login. Das Team prüft jeden Link in Deutsch und Englisch sowie den Zustand vor und nach dem Login. Auf Mobil bleibt das Menü ohne Überlagerung des Buchungsformulars bedienbar.
Anwendungsbeispiel: Tracking nur nach Einwilligung
Ein Analysecode wird zusammen mit dem Cookie-Banner getestet. Vor der Einwilligung darf das optionale Tracking nicht laden; nach Zustimmung funktioniert es ohne den Buchungsabschluss zu verlangsamen. Ablehnen und spätere Änderung der Auswahl werden ebenfalls geprüft.
Abo-Navigation und Widerrufsweg ergänzen
Bei aktivem Abo-Plugin kann das Navigations Menü einen zusätzlichen Abo-Eintrag anzeigen. Stellen Sie Sichtbarkeit, Farbe und Bezeichnung pro Sprache ein. Ein leerer eigener Text fällt auf die Organisationssprache und danach auf die Produktbezeichnung zurück. Der Link führt zum öffentlichen Abo-Katalog. Einrichtung: Abo-Katalog und Kundenbereich.
Für Bootstrap 5.3 stehen zusätzlich eine Widerrufsaktion in der Navigation und das Widget Widerruf ausüben Button zur Verfügung. Sie führen zum vorgesehenen Widerrufsformular auf der Login-Seite. Beschriftung und Farbe werden im Design gewählt; die fachlichen Einstellungen zum Widerruf gehören in Anmeldeeinstellungen, Stornierung und Widerruf.
Vergeben Sie für eigene Code-Widgets einen aussagekräftigen Namen. Prüfen Sie Header und Footer auch auf den neuen Abo-Seiten: Ein dauerhaft sichtbarer Link soll zum passenden Katalog und zur aktiven Sprache führen.
Warenkorb in der Navigation anzeigen
Öffnen Sie in der Kopfzeile das Navigationsmenü und aktivieren Sie Warenkorb in Navigation anzeigen. Der sichtbare Einstieg setzt einen im Design vorgesehenen Warenkorbweg und eine passende Buchungssitzung voraus. Ein Navigationsschalter ändert weder die Preisregeln noch allein die primäre Abschlussaktion.
Stimmen Sie ihn mit Buchungsansicht in den Design-Einstellungen und Warenkorb anbieten im Abschlussbutton ab. Die Warenkorb-Anleitung erklärt klassische und primäre Variante. Prüfen Sie den Link vor und nach der Anmeldung sowie mobil. Wird ein anderer Header geladen, kontrollieren Sie das Kategorie- beziehungsweise Konto-Standarddesign.