Referenz für Design & Styles

Dieses Dokument ist eine Referenz für den Bereich Design & Styles des ADP Car Market Hub-Plugins (Car Market Hub → 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 Social Sharing oder die Schaltfläche für das PDF-Datenblatt konfigurieren, das Lazy Loading von Bildern steuern oder benutzerdefiniertes CSS hinzufügen möchten.

Übersicht

Die Seite ist in die folgenden Karten unterteilt:

1. Color scheme & branding (Farbschema & Branding) — Primärpalette und Schaltflächenfarben.
2. Other design settings (Weitere Design-Einstellungen) — zusätzliche Farb-Tokens, abgerundete Ecken und Voreinstellungen für die Schaltflächengrösse.
3. Typography System (Typografie-System) — Typografie pro Seitenkontext (Fahrzeugdetail, Archiv & Raster, Favoriten, Vergleich).
4. Social sharing buttons (Social-Sharing-Schaltflächen) — Netzwerke, die auf den einzelnen Fahrzeugseiten angezeigt werden, und deren Platzierung.
5. PDF Datasheet (PDF-Datenblatt) — Option zum Einblenden einer druckoptimierten Fahrzeugzusammenfassung.
6. Performance (Leistung) — 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. Custom CSS (Benutzerdefiniertes CSS) — reines CSS, das nach allen Plugin-Styles angehängt wird.

Die Seite 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 Bereich 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 Car Market Hub → Design & Styles.
2. Legen Sie unter Color scheme & branding Ihre Markenfarben fest. Verwenden Sie die Farbauswahl oder fügen Sie Hex-Werte ein.
3. Öffnen Sie Other design settings, um optionale Tokens wie Preis-/Linkfarben, abgerundete Ecken und die Schaltflächengrösse fein abzustimmen.
4. Öffnen Sie das Typography System und konfigurieren Sie jeden Tab (Fahrzeugdetail, Archiv & Raster, Favoriten, Vergleich). Lassen Sie 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 bestimmen Sie die Platzierung.
6. Aktivieren Sie Enable PDF datasheet, wenn Sie eine Schaltfläche zum Drucken/Speichern als PDF auf den einzelnen Fahrzeugseiten wünschen.
7. Aktivieren Sie unter Performance die Option Lazy loading, um das native loading="lazy" des Browsers für Fahrzeugbilder zu nutzen.
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 Custom CSS hinzu.
10. Speichern Sie. Jede Karte verfügt über eine eigene Schaltfläche Save Design & Styles settings; das Speichern einer beliebigen Karte sichert das gesamte Formular.

Konfigurationsreferenz

Color scheme & branding

Other design settings

Typography 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-Tokens, 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 Vehicle Detail, Archive & Grid und Compare. Der Tab Favorites 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:

• Below gallery — eine horizontale Reihe von Share-Buttons direkt unter der Fotogalerie. Sichtbar auf allen Bildschirmgrössen.
• Sticky right sidebar — 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 Schnellschaltflächen für Favorites, Compare und das PDF datasheet (jeweils nur sichtbar, wenn die entsprechende Funktion aktiviert ist). Um das Verdecken von Inhalten auf kleinen Bildschirmen zu vermeiden, wird diese Leiste auf Mobiltelefonen ausgeblendet (Viewport ≤ 600 px). Wählen Sie daher für Bildschirme in Mobiltelefon-Grösse Below gallery oder End of page, wenn das Teilen sichtbar bleiben soll.
• End of page — eine horizontale Reihe ganz unten auf der Fahrzeugseite, unterhalb des Kontaktbereichs. Sichtbar auf allen Bildschirmgrössen (auf einem Mobiltelefon erscheint sie also unter dem Kontaktbereich).

Wenn Sie die Share-Leiste auf einem Mobiltelefon unten auf der Seite "unter der Kontaktschaltfläche" sehen, ist die Platzierung auf End of page eingestellt (oder der Besucher nutzt ein Tablet zwischen 601 px und 960 px, auf dem die Sticky right sidebar noch angezeigt wird). Dies ist das erwartete Verhalten, das durch die obige Option "Placement" gesteuert wird.

PDF Datasheet

Performance

Layout Manager card

Custom CSS

Betriebliche Hinweise

• Das Prinzip "Theme First" bedeutet, dass das Leerlassen eines Feldes die Kontrolle an das aktive Theme zurückgibt. Dies ist die sicherste Standardeinstellung bei der Integration mit einem neuen Theme.
• Die Hover-Hintergrundfarbe fällt auf einen abgeleiteten Farbton zurück, wenn sie leer gelassen wird, sodass primäre Schaltflächen 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 unter Settings → Frontend Features.
• Der Schalter für das PDF-Datenblatt hier steuert nur, ob die Schaltfläche sichtbar ist. Wenn die Schaltfläche 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 Bereich 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 übernommen 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 Theme-Styles überschreiben müssen.
• Lazy Loading funktioniert nicht. Einige Themes oder Drittanbieter-Plugins 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-Datenblatt fehlt. Vergewissern Sie sich, dass der Schalter aktiviert ist und dass das Template für die einzelne Fahrzeugseite weiterhin den Schaltflächenbereich des Plugins enthält. Die Schaltfläche wird nur auf einzelnen Fahrzeugseiten gerendert.
• Der Schalter "use custom block order" 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 fehlerhaft gemacht. Entfernen oder kürzen Sie das Snippet und speichern Sie erneut. Benutzerdefiniertes CSS überschreibt alles andere.

Verwandte Dokumente

• Referenz zum Layout Manager
• Einstellungsreferenz
• Referenz zum PDF Manager
• Referenz zu Shortcodes und Widgets