Beheerdersreferentie voor Design & Styles

Dit document is een referentie voor het scherm Design & Styles van de ADP Car Market Hub plugin (Car Market Hub → Design & Styles). Het legt elke kaart uit, de betekenis van elke kleur- en typografietoken, en hoe de plugin samenwerkt met uw actieve thema.

Wanneer u dit document moet gebruiken

Gebruik deze referentie wanneer u de uitstraling van voertuigpagina's wilt afstemmen op uw merk, typografie wilt wijzigen voor specifieke frontend-contexten, social sharing of de knop voor de PDF datasheet wilt configureren, lazy loading van afbeeldingen wilt beheren of aangepaste CSS wilt toevoegen.

Overzicht

Het scherm is georganiseerd in de volgende kaarten:

1. Color scheme & branding — primair palet en knopkleuren.
2. Other design settings — aanvullende kleurtokens, border-radius en voorinstellingen voor knopgrootte.
3. Typography System — typografie per paginacontext (Voertuigdetail, Archief & Grid, Favorieten, Vergelijken).
4. Social sharing buttons — netwerken die worden getoond op afzonderlijke voertuigpagina's en hun plaatsing.
5. PDF Datasheet — schakelaar om een voor printen geoptimaliseerde voertuigsamenvatting weer te geven.
6. Performance — systeemeigen lazy loading voor afbeeldingen.
7. Layout Manager — verwijzing naar het speciale tabblad Layout Manager en een globale schakelaar om de aangepaste blokvolgorde te gebruiken.
8. Custom CSS — ruwe CSS die na alle plugin-stijlen wordt toegevoegd.

Het scherm volgt een "Theme First"-principe: elk veld dat dit ondersteunt, kan leeg worden gelaten om de stijlen van het actieve thema over te nemen.

Vereisten of randvoorwaarden

• Toestemming om de plugin te beheren.
• Om de schakelaar van de Layout Manager effect te laten hebben, moet u het scherm Layout Manager hebben geconfigureerd.
• Voor de PDF datasheet wordt de visuele knop getoond op afzonderlijke voertuigpagina's; de PDF-lay-out zelf wordt geconfigureerd in de PDF Manager.

Stapsgewijze instructies

1. Open Car Market Hub → Design & Styles.
2. Stel in Color scheme & branding uw merkkleuren in. Gebruik de kleurkiezer of plak hex-waarden.
3. Open Other design settings om optionele tokens zoals prijs-/linkkleuren, border-radius en knopgrootte fijn te regelen.
4. Open Typography System en configureer elk tabblad (Voertuigdetail, Archief & Grid, Favorieten, Vergelijken). Laat velden leeg om de stijlen van het thema over te nemen.
5. Schakel in Social sharing buttons delen in, kies de zichtbare netwerken en selecteer de plaatsing.
6. Schakel Enable PDF datasheet in als u een knop voor printen/opslaan-als-PDF wilt op afzonderlijke voertuigpagina's.
7. Schakel in Performance de optie Lazy loading in om de systeemeigen loading="lazy" van de browser te gebruiken voor voertuigafbeeldingen.
8. Bepaal in Layout Manager of u de aangepaste blokvolgorde wilt toepassen die is opgeslagen in het tabblad Layout Manager.
9. Voeg indien nodig definitieve overschrijvingen toe in Custom CSS.
10. Sla de wijzigingen op. Elke kaart heeft zijn eigen knop Save Design & Styles settings; het opslaan van een van deze knoppen slaat het volledige formulier op.

Configuratieredactie

Color scheme & branding

Other design settings

Typography System

De typografiekaart heeft vier tabbladen die overeenkomen met frontend-contexten:

Binnen elk tabblad stelt de matrix de typografie in per tekstrol. De rijen zijn de tekstrollen en de kolommen zijn de typografietokens die u voor elke rol kunt instellen:

Elk veld dat leeg wordt gelaten, neemt de stijlen over van het actieve thema. De volledige matrix (inclusief de rij Labels) verschijnt op de tabbladen Vehicle Detail, Archive & Grid en Compare. Het tabblad Favorites gebruikt dezelfde kolommen, maar bevat niet de rij Labels.

Social sharing buttons

Hoe elke plaatsing eruitziet en hoe deze zich gedraagt op mobiel:

• Below gallery — een horizontale rij deelknoppen direct onder de fotogalerij. Zichtbaar op alle schermformaten.
• Sticky right sidebar — een compacte balk die aan de rechterrand van het scherm is vastgezet en op zijn plaats blijft terwijl de bezoeker scrollt. In deze plaatsing bevat de balk ook de sneltoetsen voor Favorieten, Vergelijken en de PDF datasheet (elk alleen getoond wanneer die functie is ingeschakeld). Om te voorkomen dat inhoud op kleine schermen wordt afgedekt, is deze balk verborgen op telefoons (viewport ≤ 600 px). Kies daarom op schermen met het formaat van een telefoon voor Below gallery of End of page als u wilt dat delen zichtbaar blijft.
• End of page — een horizontale rij helemaal onderaan de voertuigpagina, onder de contactsectie. Zichtbaar op alle schermformaten (dus op een telefoon verschijnt deze onder het contactgedeelte).

Als u de deelbalk onderaan de pagina op een telefoon "onder de contactknop" ziet, is de plaatsing ingesteld op End of page (of de bezoeker bevindt zich op een tablet tussen 601 px and 960 px, waar de Sticky right sidebar nog steeds wordt getoond). Dit is verwacht gedrag, beheerd door de optie Placement hierboven.

PDF Datasheet

Performance

Layout Manager card

Custom CSS

Operationele opmerkingen

• Het "Theme First"-principe houdt in dat het leeglaten van een veld de controle teruggeeft aan het actieve thema. Dit is de veiligste standaardinstelling bij de integratie met een nieuw thema.
• De hover-achtergrondkleur valt terug op een afgeleide tint als deze leeg wordt gelaten, zodat primaire knoppen altijd een zichtbare hover-status hebben.
• Sommige gebieden die voorheen op dit scherm beschikbaar waren, zijn verplaatst: badges en labels bevinden zich nu in de Layout Manager onder Car Archive Cards, de financieringscalculator bevindt zich nu in Settings → Frontend Features.
• De schakelaar voor de PDF Datasheet hier regelt alleen of de knop zichtbaar is. Als de knop wordt getoond maar de PDF er niet goed uitziet, configureer dan de lay-out in de PDF Manager.
• Het opslaan van een kaart verzendt het volledige formulier. Om een sectie te herstellen, herstelt u de lege standaardwaarde en slaat u deze opnieuw op.

Problemen oplossen

• Kleurwijzigingen verschijnen niet. Wis eventuele frontend- of CDN-caches. Controleer of de kleurkiezer daadwerkelijk een waarde heeft vastgelegd (het veld moet een hex-code tonen).
• Typografievelden lijken geen effect te hebben. Lege velden nemen opzettelijk de stijlen van het thema over. Stel een expliciete waarde in als u de themastijlen wilt overschrijven.
• Lazy loading werkt niet. Sommige thema's of plugins van derden vervangen de afbeeldingsopmaak. Controleer of de gerenderde <img>-tag loading="lazy" bevat. Controleer dit in de huidige plugin-versie voordat u publiceert.
• De knop voor de PDF datasheet ontbreekt. Controleer of de schakelaar is ingeschakeld en of de template voor het afzonderlijke voertuig nog steeds het knopgebied van de plugin bevat. De knop wordt alleen gerenderd op afzonderlijke voertuigpagina's.
• De schakelaar "use custom block order" staat aan, maar de lay-out lijkt ongewijzigd. Open het tabblad Layout Manager en controleer of er een aangepaste lay-out is opgeslagen voor de betreffende zone.
• Aangepaste CSS heeft een pagina beschadigd. Verwijder of verkort het fragment en sla het opnieuw op. Aangepaste CSS overschrijft al het andere.

Gerelateerde documenten

• Beheerdersreferentie voor de Layout Manager
• Beheerdersreferentie voor Instellingen
• Beheerdersreferentie voor de PDF Manager
• Beheerdersreferentie voor Shortcodes en Widgets