MEC-Templates – Optionen im Webseiten-Tab
Die MEC-Templates A, C, D, Grooss, Green bieten ihren Center-Admins im Dashboard unter Center → Webseite eine wachsende Sammlung an Reitern, mit denen sich der Look ihrer Center-Seite ohne Code-Eingriff anpassen lässt. Diese Seite gibt dir den Überblick, wo welche Option liegt und was sie bewirkt.
Hinweis: Die Verfügbarkeit der Reiter hängt vom gewählten Website-Template ab. Du findest die Auswahl unter Webseite → Aktivierung → Website-Template.
Startseiten-Hero (Hero Slider / Carousel)
Jedes MEC-Classic-Template (ohne ShopBox) hat einen eigenen Reiter für den Startseiten-Hero. Das Dashboard zeigt nur die Felder, die das gewählte Template auf der Website auch wirklich rendert – kein generischer Editor für alle.
| Template | Reiter | Was du pro Slide pflegst |
|---|---|---|
| A (Rot) | Hero Slider | Hintergrund, Titel-Grafik, Untertitel, Motiv, Link/CTA, optional freie Position (Layout/Responsive) |
| C | Hero Carousel | Hintergrund, Headline-Bild oder -Text, Notice-Text & -Farbe, Motiv, Link; Slider-Intervall in Sekunden |
| D | Hero Slider | Hintergrund, gedrehter Titel (Größe/Position/Farbe), Beschreibung, Motiv, Link, Sichtbarkeit nach Datum |
| Grooss | Hero Slider | Hintergrundfarbe, Script-Titel links oben, Untertitel links unten, Motiv rechts (Layout fest) |
| Green | Hero Slider | Vollbild-Hintergrund, Content-Kasten, zweizeiliger Titel, Untertitel (Layout fest) |
Layout-Vorlagen: Bei C, Grooss und Green kannst du Farben und Größen als Vorlage speichern und auf andere Slides anwenden (Browser-LocalStorage). Bei A und D stehen die Presets des jeweiligen Hero-Editors zur Verfügung.
Links: In allen Classic-Templates (A, C, D, Grooss, Green) wählst du Ziele über den
Seiten-Picker (nur aktivierte Center-Seiten, alternativ eigener Pfad oder externe URL).
Öffnen des Editors automatisch ins passende Schema übernommen (z. B. Template C:
backgroundImage → Hintergrund, subtitle → Notice-Text).
Speicherort: templateContent[<template-key>].hero.slides[] (Template C zusätzlich
hero.intervalMs).
Seiten-Layouts (neuer Reiter)
Jedes der vier MEC-Templates hat im Webseiten-Tab einen Reiter „Seiten-Layouts". Dort kannst du pro Unterseite zwischen mehreren Darstellungsvarianten wählen. Wenn du nichts auswählst, greift der Template-Default – das entspricht der Live-Parität (so, wie es auf dem ursprünglichen Live-Center aussieht).
Welche Varianten gibt es?
| Seite | Varianten | Wann nehmen? |
|---|---|---|
| Aktuelles | „Klassisch" (3-Spalten-Liste, Template-A-Live) oder „Flex-Grid" (große Tiles, Grooss/Green/D-Live) | Klassisch wirkt aufgeräumt für News-Center mit viel Text; Flex-Grid betont Bilder |
| Angebote | „Klassisch" (4er-Reihen mit Inline-Detail, Template-A-Live) oder „Flex-Grid" (2 Spalten mit Preis-Badge, Grooss/Green-Live) | Klassisch für Listen mit vielen Angeboten; Flex-Grid für hervorstechende Aktionen |
| Jobs | „Klassisch" (Standard-Container, Template-A-Live) oder „Grooss-Stil" (Abstand-Linien zwischen Shops, Grooss/Green-Live) | Grooss-Stil mit Linien ist klarer bei mehreren Shops mit Stellen; Klassisch ist kompakter |
| Service | „Klassisch" (Template-A-Live), „Grooss-Stil" (Grooss-Live) oder „Green-Stil" (Green-Live mit Service-Wrapper) | Green-Stil zeigt zusätzliche Untertitel pro Service |
Wie verwende ich das?
- Webseite → Seiten-Layouts öffnen.
- Pro Seite eine Variante anklicken. Die aktive Variante ist farbig hervorgehoben; darunter steht der Template-Default, der greift, wenn nichts gewählt ist.
- Speichern – die Center-Webseite rendert beim nächsten Aufruf die neue Variante.
- „Auf Template-Default zurücksetzen" verwirft die Center-spezifische Auswahl wieder.
Technisch: Der Wert wird unter
templateContent[<template-key>].pageLayouts.<page>gespeichert (z. B.templateContent['mec-template-grooss'].pageLayouts.angebote = 'classic'). Wird das Feld nicht gesetzt oder gelöscht, greift der Template-Default aus dem Code – siehe Developer-Guide:_mec-shared-Bausteine.
Welches Template hat welche Optionen?
| Template | Aktuelles | Angebote | Jobs | Service |
|---|---|---|---|---|
| A | classic ↔ flex | classic ↔ flex | classic ↔ grooss | classic ↔ grooss ↔ green |
| D | classic ↔ flex | — (D nutzt eigene Implementierung) | — | — |
| Grooss | classic ↔ flex | classic ↔ flex | classic ↔ grooss | classic ↔ grooss ↔ green |
| Green | classic ↔ flex | classic ↔ flex | classic ↔ grooss | classic ↔ grooss ↔ green |
Template D hat für Angebote/Jobs/Service eine eigene, fest verdrahtete Implementierung außerhalb der gemeinsamen Bausteine; dort gibt es darum keine Layout-Wahl.
Pflege der Seiten-Hero-Bilder und SEO
Für die wichtigsten Unterseiten gibt es pro Template eigene Reiter, in denen du Seitentitel, Untertitel, ein Hero-Bild (per FileUpload, mit Stockbildern als Alternative) und die SEO-Meta-Felder pflegen kannst:
Seite: AktuellesSeite: AngeboteSeite: JobsSeite: ServiceSeite: Kontakt- (
Seite: Shops– existiert seit längerem) - (
Seite: Gutschein/Seite: Impressionen/Seite: Angebote (Detail)– nur Template D)
Die Inhalte sind unabhängig vom Template in der Datenbank gespeichert
(API page-content mit pageType). Wechselt ein Center das Template,
bleiben Hero-Bild und Meta-Texte erhalten.
Tipp: MEC-Templates haben eigene Seite: …-Reiter – „Seiten-Texte" (Dropdown) ist dafür ausgeblendet (Navigation im Webseiten-Tab). Anfahrt im Reiter „Anfahrt" (alle MEC-Templates). Impressum, Datenschutz und Rechtliche Hinweise bei MEC-Templates im Reiter „Rechtliches" (siehe unten).
Rechtliches (Reiter „Rechtliches“)
Für alle MEC-Templates (A, C, D, Grooss, Green, ShopBox) gibt es einen gemeinsamen Reiter „Rechtliches" im Webseiten-Tab.
| Seite | Route | Inhalt |
|---|---|---|
| Impressum | /impressum | Freitext optional; sonst strukturierte Felder aus Reiter Legal |
| Datenschutz | /datenschutz | wie Impressum |
| Rechtliche Hinweise | /rechtliche-hinweise | Freitext/HTML (nur A/C/D/Grooss/Green; ShopBox ohne diese Route) |
Firmendaten (Betreiber, Register, Datenschutzbeauftragter, Impressums-Adresse) bleiben im Reiter Legal unter „Legal & Vorschau". Im Reiter Rechtliches pflegst du pro Seite optional den Freitextmodus, formatierten Inhalt und SEO (Meta-Titel, Meta-Beschreibung).
Legacy: Früher lag der AGB-/Hinweistext unter pageType
agb(Route/agb). MEC verlinkt im Footer/rechtliche-hinweise. Bestehendeagb-Texte werden auf der Website weiter angezeigt, bis du sie unter Rechtliches → Rechtliche Hinweise speicherst.
Anfahrt (Reiter „Anfahrt“)
Für alle MEC-Templates (A, C, D, Grooss, Green, ShopBox) gibt es einen eigenen Reiter „Anfahrt" im Webseiten-Tab.
| Template-Gruppe | Was du dort pflegst |
|---|---|
| A / C / D / Grooss / Green | Seite /anfahrt: Überschrift (h1) und optional Untertitel (direkt unter der Überschrift). Verkehrsmittel-Blöcke (Auto, ÖPNV, Fahrrad …) mit optionalen Icons und verschachtelten Textblöcken – wie im Legacy-MEC-Repeater. Footer-Teaser (Template A): Titel, Untertitel und Button-Text neben der Kartenfläche im Footer (entspricht MEC-Accordion „Footer“). |
| ShopBox | Sektionstitel, Karten-Embed, Adresszeilen und Anreise-Blöcke (heading/body, optional Link) |
Karte & Koordinaten: Die Karte auf der Anfahrt-Seite nutzt die
Center-Koordinaten aus den Stammdaten (werden beim MEC-Import aus
adresse bzw. anfahrt.adresse übernommen, sofern vorhanden).
MEC-Import: Beim Import aus dem Legacy-MEC werden die Repeater-Felder
anfahrt.<sprache>.verkehrsmittel[] inkl. textblock[] sowie anfahrt.<sprache>.footer
(Titel, Untertitel, Button-Text) automatisch in diesen Reiter geschrieben (ShopBox
zusätzlich als flache Blöcke). Details:
Developer-Guide: MEC-Import.
Hotspot / WLAN (Reiter „Hotspot / WLAN“)
Für MEC Template A, C, D, Grooss, Green (nicht ShopBox) gibt es den Reiter
„Hotspot / WLAN“ im Webseiten-Tab. Die öffentliche Seite liegt unter
/hotspot – ohne normales Center-Header/Footer (Captive Portal wie im
Legacy-MEC).
| Bereich | Inhalt |
|---|---|
| Aktiv | Hotspot geöffnet vs. geschlossen (Slogan/Text „geschlossen“). Zusätzlich gelten die Center-Öffnungszeiten (Europe/Berlin); das Fenster kann durch den Shop „real“ erweitert werden – wie im Legacy-MEC (isOnline()). |
| Bilder | Person, Provider-Logo, Slogan geöffnet/geschlossen |
| Texte | Subheader, zwei Checkbox-Texte, Button, Opt-out (HTML möglich) |
| Meraki | Optional feste Continue-URL statt Query-Parameter von Meraki |
Speicherort: themeOverrides.templateContent.hotspot (template-übergreifend).
MEC-Import: Endpoint /hotspot?center_id=… wird beim Import unter
Website-Konfiguration nach Bunny hochgeladen und in diesen Reiter geschrieben.
Meraki: Das Formular postet an POST /api/[center-slug]/hotspot/grant und
leitet bei beiden aktivierten Checkboxen auf die Meraki-Grant-URL weiter.
MEC ShopBox – Inhaltsfarben (Reiter „Optionen“)
Analog zu Goldbeck gibt es zwei Ebenen – ohne doppelte Pflege der Layout-Farben:
| Ebene | Wo pflegen | Wirkung |
|---|---|---|
| Chrome (Header/Footer) | Reiter Header & Navigation → Darstellung | Hintergrund, Akzent, optional Text |
| Bento-Hintergrund | Reiter Bento / Kategorien | Kategorie-Sektion auf der Startseite |
| Inhaltsfarben | Reiter Optionen → Bereich „Farben“ | Lesbarer Text in Inhalten |
Inhaltsfarben (templateContent['mec-shopbox'].colors, optional):
contentText– Fließtext und Überschriften (Impressum, Datenschutz, Shop-Modal, Vermietung, Anfahrt, Kontakt, Öffnungszeiten …).pageTitle– große Überschrift im Unterseiten-Kopf (MecSubpageHero, z. B. „Impressum“).
Leer = Standard: Template-Grau bzw. Weiß je nach Helle Unterseiten (siehe unten). Gesetzt: nur #main-content – Chrome (Header/Footer) und Bento bleiben in ihren eigenen Reitern konfigurierbar.
MEC ShopBox – Chrome-Farben (Reiter „Header & Navigation“)
Im Reiter Header & Navigation → Block Darstellung kannst du die dunklen Markenflächen von Header, Footer, dem Logo-Carousel und den Unterseiten-Köpfen anpassen.
| Feld | Speicher | Standard | Wirkung |
|---|---|---|---|
| Chrome-Hintergrund | colors.chromeBackground | #1e2733 | Header, Footer, Logo-Streifen, Öffnungszeiten-Modal, Seitenkopf (MecSubpageHero auf Shops, Aktuelles, Impressum, Anfahrt, Centerplan …) |
| Chrome-Text (optional) | colors.chromeText | automatisch | Navigation, Footer-Links, Modal-Text |
| Akzentfarbe (optional) | colors.chromeAccent | #f97316 | Nav-Hover, Uhr-Icon, hervorgehobene Links |
Automatik: Ist Chrome-Text leer, wählt das System hellen oder dunklen Text anhand des Hintergrunds (Kontrast). Rahmen und Sekundärflächen (Mobile-Menü, Öffnungszeiten-Pille) werden aus dem Hintergrund abgeleitet.
Leer = Live-Parität: Fehlen alle drei Felder, bleibt das bisherige Erscheinungsbild unverändert.
MEC ShopBox – Helle Unterseiten (Reiter „Header & Navigation“)
Für mec-shopbox gibt es im Reiter Header & Navigation unter Optionen den Schalter „Helle Unterseiten“.
| Zustand | Wirkung |
|---|---|
| Aus (Standard) | Wie bisher: dunkle Unterseiten (#1e2733 / #0f1720, bzw. Chrome-Farben wenn gesetzt), helle Kacheln auf Shops/Aktuelles/Öffnungszeiten, dunkler Seitenkopf. Live-Parität bleibt erhalten. |
| An | Unterseiten mit hellem Seitenhintergrund (#f8f9fa), weißem Kopfbereich und dunkler Schrift; Kacheln und Formulare bleiben lesbar (weiße Karten / angepasste Textfarben). |
Betroffen u. a.: Shops, Aktuelles, Öffnungszeiten, Anfahrt, Über uns, Vermietung, Centerplan-Kopf, Impressum, Datenschutz, Kontakt.
Technisch: templateContent['mec-shopbox'].subpageTheme = 'light' (nur wenn aktiv; fehlt das Feld → dunkel).
Passage & Zugang (Öffnungszeiten-Seite)
Im selben Reiter Header & Navigation → Optionen steuert der Schalter „Passage & Zugang auf Öffnungszeiten“ die weiße Info-Karte oben auf /oeffnungszeiten („Ihr Besuch im Center“, optionale Center-Zeiten aus den Stammdaten).
| Zustand | Wirkung |
|---|---|
| An (Standard) | Karte wird angezeigt (wie bisher / Live-Parität). |
| Aus | Nur der Block Geschäfts-Öffnungszeiten (und ggf. Services) bleibt sichtbar. |
Technisch: templateContent['mec-shopbox'].passageInfoEnabled = false schaltet ab; fehlt das Feld → an.
Navigation – Vermietung (Reiter „Vermietung“)
Für MEC Template A, C, D, Grooss, Green und MEC ShopBox gibt es einen
eigenen Reiter „Vermietung“ im Webseiten-Tab. Dort steuert ihr den
Menüpunkt Vermietung in der Hauptnavigation – unabhängig vom späteren
Seitenlayout unter /vermietung.
| Option | Wirkung |
|---|---|
| Menüpunkt anzeigen | Ein/Aus (entspricht dem optionalen Link im MEC-Original-header.tpl) |
| Bezeichnung im Menü | z. B. „Vermietung“ |
| Eigene Seite im Cockpit (/vermietung) | Aus (Standard): externer Link. An: Link zur Cockpit-Seite /vermietung (Layout folgt später) |
| Externer Link | URL, die in einem neuen Tab geöffnet wird (target=_blank), Standard: MEC-Portal |
Technisch: templateContent[<template-key>].header.vermietung mit
label, externalUrl, useInternalPage, enabled.
Der ältere Schlüssel header.vermietungUrl (Template D) wird weiter gelesen.
MEC ShopBox: Im Reiter „Vermietung“ zusätzlich die Homepage-Sektion (Titel, Intro, Formular) und die Navigations-Optionen.
Querverweise
- Entwickler-Doku zu den geteilten Bausteinen:
_mec-shared - Template-spezifische Pixel-Treue-Checklisten: Template-A, Grooss, D
- Übersicht der Dashboard-Reiter und Module: Navigation & Module
Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /center-website/mec-webseiten-tab-optionen