Referenz für Design & Styles

Dieses Dokument ist eine Referenz für den Bildschirm Design & Styles des ADP Car Market Hub-Plugins (CMH Center → Design & Styles). Es erklärt jede Karte, die Bedeutung jedes Farb- und Typografie-Tokens und wie das Plugin mit Ihrem aktiven Theme interagiert.

Wann Sie dieses Dokument verwenden sollten

Verwenden Sie diese Referenz, wenn Sie das Erscheinungsbild der Fahrzeugseiten an Ihre Marke anpassen, die Typografie für bestimmte Frontend-Kontexte ändern, das Teilen in sozialen Netzwerken oder die Schaltfläche für das PDF-Datenblatt konfigurieren, das Lazy Loading von Bildern steuern oder benutzerdefiniertes CSS hinzufügen möchten.

Übersicht

Der Bildschirm ist in die folgenden Karten unterteilt:

1. Farbschema & Branding – Primärpalette und Schaltflächenfarben.
2. Weitere Design-Einstellungen – zusätzliche Farb-Tokens, Rahmenradius (Border Radius) und Voreinstellung für die Schaltflächengrösse.
3. Typografie-System – Typografie pro Seitenkontext (Fahrzeugdetail, Archiv & Grid, Favoriten, Vergleich).
4. Social-Sharing-Buttons – Netzwerke, die auf den einzelnen Fahrzeugseiten angezeigt werden, deren Platzierung und eine separate Mobile Aktionsleiste mit einer eigenen Auswahl von (maximal 3) Sharing-Netzwerken.
5. PDF-Datenblatt – Option zum Einblenden einer druckoptimierten Fahrzeugzusammenfassung.
6. Performance – natives Lazy Loading für Bilder.
7. Layout Manager – Verweis auf den dedizierten Tab Layout Manager und eine globale Option zur Verwendung der benutzerdefinierten Blockreihenfolge.
8. Plugin-Credit / Powered by – eine Option zum Ein- oder Ausblenden des kleinen "Powered by"-Plugin-Credits im Frontend.
9. Benutzerdefiniertes CSS – rohes CSS, das nach allen Plugin-Styles angehängt wird.

Der Bildschirm folgt dem Prinzip "Theme First": Jedes Feld, das dies unterstützt, kann leer gelassen werden, um die Werte vom aktiven Theme zu erben.

Anforderungen oder Voraussetzungen

• Berechtigung zur Verwaltung des Plugins.
• Damit die Option für den Layout Manager wirksam wird, müssen Sie den Bildschirm Layout Manager konfiguriert haben.
• Für das PDF-Datenblatt wird die visuelle Schaltfläche auf den einzelnen Fahrzeugseiten angezeigt; das PDF-Layout selbst wird im PDF-Manager konfiguriert.

Schritt-für-Schritt-Anleitung

1. Öffnen Sie CMH Center → Design & Styles.
2. Legen Sie unter Farbschema & Branding Ihre Markenfarben fest. Verwenden Sie die Farbauswahl oder fügen Sie Hex-Werte ein.
3. Öffnen Sie Weitere Design-Einstellungen, um optionale Tokens wie Preis-/Linkfarben, Rahmenradius und Schaltflächengrösse fein abzustimmen.
4. Öffnen Sie das Typografie-System und konfigurieren Sie jeden Tab (Fahrzeugdetail, Archiv & Grid, Favoriten, Vergleich). Lassen Sie die Felder leer, um die Werte vom Theme zu erben.
5. Aktivieren Sie unter Social-Sharing-Buttons das Teilen, wählen Sie die sichtbaren Netzwerke und die Platzierung aus. Aktivieren Sie im Unterabschnitt Mobile Aktionsleiste die Leiste und wählen Sie bis zu 3 Sharing-Aktionen für Mobiltelefone aus.
6. Aktivieren Sie PDF-Datenblatt aktivieren, wenn Sie eine Schaltfläche zum Drucken/Speichern als PDF auf den einzelnen Fahrzeugseiten wünschen.
7. Aktivieren Sie unter Performance das Lazy Loading, um das native loading="lazy" des Browsers für Fahrzeugbilder zu verwenden.
8. Entscheiden Sie unter Layout Manager, ob die im Tab Layout Manager gespeicherte benutzerdefinierte Blockreihenfolge angewendet werden soll.
9. Fügen Sie bei Bedarf letzte Überschreibungen in Benutzerdefiniertes CSS hinzu.
10. Speichern Sie. Jede Karte verfügt über eine eigene Schaltfläche Design & Styles-Einstellungen speichern; das Speichern einer dieser Schaltflächen sichert das gesamte Formular.

---

Konfigurationsreferenz

Farbschema & Branding

Andere Design-Einstellungen

Typografie-System

Die Typografie-Karte hat vier Tabs, die den Frontend-Kontexten entsprechen:

Innerhalb jedes Tabs legt die Matrix die Typografie pro Textrolle fest. Die Zeilen sind die Textrollen und die Spalten sind die Typografie-Token, die Sie für jede Rolle festlegen können:

Jedes Feld, das leer gelassen wird, erbt vom aktiven Theme. Die vollständige Matrix (einschliesslich der Zeile Labels) erscheint auf den Tabs Fahrzeug-Detail, Archiv & Grid und Vergleichen. Der Tab Favoriten verwendet dieselben Spalten, enthält jedoch nicht die Zeile Labels.

Social-Sharing-Buttons

Wie die einzelnen Platzierungen aussehen und wie sie sich auf Mobilgeräten verhalten:

• Unter der Galerie – eine horizontale Reihe von Share-Buttons direkt unter der Fotogalerie. Sichtbar auf allen Bildschirmgrössen.
• Sticky-Sidebar rechts – eine kompakte Leiste, die am rechten Bildschirmrand fixiert ist und beim Scrollen des Besuchers an Ort und Stelle bleibt. In dieser Platzierung enthält die Leiste auch die Schnellzugriffs-Buttons für Favoriten, Vergleichen und das PDF-Datenblatt (jeweils nur sichtbar, wenn die entsprechende Funktion aktiviert ist). Um das Verdecken von Inhalten auf kleinen Bildschirmen zu vermeiden, wird diese Leiste auf Handys ausgeblendet (Viewport ≤ 600 px). Wählen Sie daher für Bildschirme in Handygrösse Unter der Galerie oder Ende der Seite, wenn das Teilen sichtbar bleiben soll.
• Ende der Seite – eine horizontale Reihe ganz unten auf der Fahrzeugseite, unterhalb des Kontaktbereichs. Sichtbar auf allen Bildschirmgrössen (auf einem Handy erscheint sie also unter dem Kontaktbereich).

Wenn Sie die Share-Leiste auf einem Handy unten auf der Seite "unter dem Kontakt-Button" sehen, ist die Platzierung auf Ende der Seite eingestellt (oder der Besucher nutzt ein Tablet zwischen 601 px und 960 px, wo die Sticky-Sidebar rechts noch angezeigt wird). Dies ist das erwartete Verhalten, das über die obige Option "Platzierung" gesteuert wird.

Mobile Aktionsleiste

Ein separater Unterabschnitt Mobile Aktionsleiste steuert die kompakte Aktionsleiste, die auf Handys (Viewport ≤ 600 px) unterhalb des Kontakt-CTA auf Einzelfahrzeugseiten angezeigt wird. Sie wird unabhängig von den obigen Desktop-Sharing-Buttons konfiguriert.

Die Auswahl hier ist unabhängig vom Desktop-Feld Sichtbare Netzwerke, sodass Sie auf Handys eine andere (und kürzere) Auswahl an Sharing-Aktionen anzeigen können. Wie die Leiste auf der Seite gerendert wird, erfahren Sie unter Vehicle Detail Pages.

PDF-Datenblatt

Performance

Layout Manager-Karte

Plugin-Credit / Powered by

Benutzerdefiniertes CSS

Betriebliche Hinweise

• Das Prinzip "Theme First" bedeutet, dass das Freilassen eines Feldes die Kontrolle an das aktive Theme zurückgibt. Dies ist die sicherste Standardeinstellung bei der Integration in ein neues Theme.
• Die Hover-Hintergrundfarbe fällt auf einen abgeleiteten Farbton zurück, wenn sie leer gelassen wird, sodass primäre Buttons immer einen sichtbaren Hover-Zustand haben.
• Einige Bereiche, die zuvor auf dieser Seite verfügbar waren, wurden verschoben: Badges und Labels befinden sich jetzt im Layout Manager unter "Car Archive Cards", der Finanzierungsrechner befindet sich jetzt in Einstellungen → Frontend-Funktionen.
• Der Schalter für das PDF-Datenblatt steuert hier nur, ob der Button sichtbar ist. Wenn der Button angezeigt wird, das PDF aber fehlerhaft aussieht, konfigurieren Sie das Layout im PDF Manager.
• Das Speichern einer beliebigen Karte sendet das gesamte Formular ab. Um einen Abschnitt zurückzusetzen, stellen Sie den leeren Standardwert wieder her und speichern Sie erneut.

---

Fehlerbehebung

• Farbänderungen werden nicht angezeigt. Löschen Sie alle Frontend- oder CDN-Caches. Vergewissern Sie sich, dass die Farbauswahl tatsächlich einen Wert gespeichert hat (das Feld sollte einen Hex-Code anzeigen).
• Typografie-Felder scheinen keine Wirkung zu haben. Leere Felder erben absichtlich vom Theme. Legen Sie einen expliziten Wert fest, wenn Sie die Theme-Styles überschreiben müssen.
• Lazy Loading funktioniert nicht. Einige Themes oder Plugins von Drittanbietern ersetzen das Bild-Markup. Vergewissern Sie sich, dass das gerenderte <img>-Tag loading="lazy" enthält. Überprüfen Sie dies in der aktuellen Plugin-Version vor der Veröffentlichung.
• Die Schaltfläche für das PDF datasheet fehlt. Vergewissern Sie sich, dass der Umschalter aktiviert ist und dass das Template für die Fahrzeugeinzelansicht den Schaltflächenbereich des Plugins weiterhin enthält. Die Schaltfläche wird nur auf den Einzelfahrzeugseiten gerendert.
• Der Umschalter "Benutzerdefinierte Blockreihenfolge verwenden" ist aktiviert, aber das Layout sieht unverändert aus. Öffnen Sie den Tab Layout Manager und vergewissern Sie sich, dass ein benutzerdefiniertes Layout für den betroffenen Bereich gespeichert ist.
• Benutzerdefiniertes CSS hat eine Seite zerschossen. Entfernen oder kürzen Sie das Snippet und speichern Sie erneut. Benutzerdefiniertes CSS überschreibt alles andere.

Verwandte Dokumente

• Layout Manager-Referenz
• Einstellungs-Referenz
• PDF Manager-Referenz
• Referenz zu Shortcodes und Widgets