Riferimento a design e stili

Questo documento è un riferimento per la schermata Design & Styles del plugin ADP Car Market Hub (Car Market Hub → Design & Styles). Spiega ogni scheda, il significato di ciascun token di colore e tipografia e come il plugin interagisce con il tuo tema attivo.

Quando usare questo documento

Usa questo riferimento quando desideri allineare l'aspetto grafico delle pagine dei veicoli con il tuo brand, modificare la tipografia per specifici contesti del frontend, configurare la condivisione social o il pulsante del PDF datasheet, controllare il caricamento differito (lazy loading) delle immagini o aggiungere CSS personalizzato.

Panoramica

La schermata è organizzata nelle seguenti schede:

1. Color scheme & branding — tavolozza principale e colori dei pulsanti.
2. Other design settings — token di colore aggiuntivi, raggio del bordo e preset della dimensione dei pulsanti.
3. Typography System — tipografia per contesto di pagina (Dettaglio veicolo, Archivio e griglia, Preferiti, Confronta).
4. Social sharing buttons — reti mostrate sulle pagine dei singoli veicoli e il loro posizionamento.
5. PDF Datasheet — opzione per mostrare un riepilogo del veicolo ottimizzato per la stampa.
6. Performance — lazy loading nativo per le immagini.
7. Layout Manager — puntatore alla scheda dedicata Layout Manager e un'opzione globale per utilizzare l'ordine dei blocchi personalizzato.
8. Custom CSS — CSS non elaborato aggiunto dopo tutti gli stili del plugin.

La schermata segue il principio "Theme First": qualsiasi campo che lo supporti può essere lasciato vuoto per ereditare le impostazioni dal tema attivo.

Requisiti o prerequisiti

• Autorizzazione a gestire il plugin.
• Affinché l'opzione del Layout Manager abbia effetto, è necessario aver configurato la schermata del Layout Manager.
• Per il PDF datasheet, il pulsante visivo viene mostrato sulle pagine dei singoli veicoli; il layout del PDF stesso viene configurato nel PDF Manager.

Istruzioni passo dopo passo

1. Apri Car Market Hub → Design & Styles.
2. In Color scheme & branding, imposta i colori del tuo brand. Usa il selettore di colori o incolla i valori esadecimali (hex).
3. Apri Other design settings per perfezionare i token opzionali come i colori dei prezzi/link, il raggio del bordo e la dimensione dei pulsanti.
4. Apri Typography System e configura ciascuna scheda (Dettaglio veicolo, Archivio e griglia, Preferiti, Confronta). Lascia i campi vuoti per ereditare dal tema.
5. In Social sharing buttons, abilita la condivisione, scegli le reti visibili e seleziona il posizionamento.
6. Attiva Enable PDF datasheet se desideri un pulsante di stampa/salvataggio come PDF sulle pagine dei singoli veicoli.
7. In Performance, abilita Lazy loading per utilizzare il caricamento nativo del browser loading="lazy" per le immagini dei veicoli.
8. In Layout Manager, decidi se applicare l'ordine dei blocchi personalizzato salvato nella scheda del Layout Manager.
9. Aggiungi eventuali sovrascritture finali in Custom CSS, se necessario.
10. Salva. Ogni scheda ha il proprio pulsante Save Design & Styles settings; il salvataggio di una qualsiasi di esse memorizza l'intero modulo.

Riferimento di configurazione

Color scheme & branding

Other design settings

Typography System

La scheda della tipografia ha quattro schede corrispondenti ai contesti del frontend:

All'interno di ciascuna scheda, la matrice imposta la tipografia per ruolo di testo. Le righe rappresentano i ruoli di testo e le colonne sono i token tipografici che puoi impostare per ciascun ruolo:

Qualsiasi campo lasciato vuoto eredita dal tema attivo. La matrice completa (inclusa la riga Labels) appare nelle schede Vehicle Detail, Archive & Grid e Compare. La scheda Favorites utilizza le stesse colonne ma non include la riga Labels.

Social sharing buttons

Aspetto di ciascun posizionamento e comportamento su dispositivi mobili:

• Below gallery — una riga orizzontale di pulsanti di condivisione direttamente sotto la galleria fotografica. Visibile su tutte le dimensioni dello schermo.
• Sticky right sidebar — una barra compatta fissata sul bordo destro dello schermo che rimane in posizione durante lo scorrimento dell'utente. In questo posizionamento, la barra contiene anche i pulsanti rapidi Preferiti, Confronta e PDF datasheet (ciascuno mostrato solo quando la relativa funzionalità è abilitata). Per evitare di coprire i contenuti sugli schermi piccoli, questa barra è nascosta sui telefoni (viewport ≤ 600 px). Di conseguenza, sugli schermi delle dimensioni di un telefono, scegli Below gallery o End of page se desideri che la condivisione rimanga visibile.
• End of page — una riga orizzontale in fondo alla pagina del veicolo, sotto la sezione dei contatti. Visibile su tutte le dimensioni dello schermo (quindi su un telefono appare sotto l'area dei contatti).

Se vedi la barra di condivisione in fondo alla pagina su un telefono "sotto il pulsante di contatto", il posizionamento è impostato su End of page (oppure l'utente sta navigando da un tablet tra 601 px e 960 px, dove la Sticky right sidebar viene ancora mostrata). Questo è il comportamento previsto, controllato dall'opzione Placement sopra indicata.

PDF Datasheet

Performance

Layout Manager card

Custom CSS

Note operative

• Il principio "Theme First" significa che lasciare un campo vuoto restituisce il controllo al tema attivo. Questa è l'impostazione predefinita più sicura quando si effettua l'integrazione con un nuovo tema.
• Il colore di sfondo al passaggio del mouse (hover) utilizza una tonalità derivata se lasciato vuoto, in modo che i pulsanti primari abbiano sempre uno stato di hover visibile.
• Alcune aree precedentemente disponibili in questa schermata sono state spostate: i badge e le etichette si trovano ora nel Layout Manager sotto Car Archive Cards, mentre il calcolatore di finanziamento si trova ora in Settings → Frontend Features.
• L'opzione PDF Datasheet qui controlla solo se il pulsante è visibile. Se il pulsante viene mostrato ma il PDF non appare corretto, configura il layout nel PDF Manager.
• Il salvataggio di qualsiasi scheda invia l'intero modulo. Per ripristinare una sezione, ripristina il valore vuoto predefinito e salva di nuovo.

Risoluzione dei problemi

• Le modifiche ai colori non appaiono. Svuota le cache del frontend o della CDN. Conferma che il selettore di colori abbia effettivamente salvato un valore (il campo dovrebbe mostrare un codice esadecimale).
• I campi della tipografia sembrano non avere effetto. I campi vuoti ereditano intenzionalmente dal tema. Imposta un valore esplicito se hai bisogno di sovrascrivere gli stili del tema.
• Il lazy loading non funziona. Alcuni temi o plugin di terze parti sostituiscono il markup delle immagini. Conferma che il tag <img> renderizzato includa loading="lazy". Verifica nella versione corrente del plugin prima di pubblicare.
• Il pulsante del PDF datasheet è mancante. Verifica che l'opzione sia abilitata e che il template del singolo veicolo includa ancora l'area del pulsante del plugin. Il pulsante viene renderizzato solo sulle pagine dei singoli veicoli.
• L'opzione "use custom block order" è attiva ma il layout sembra invariato. Apri la scheda del Layout Manager e conferma che sia salvato un layout personalizzato per la zona interessata.
• Il CSS personalizzato ha interrotto una pagina. Rimuovi o accorcia lo snippet e salva di nuovo. Il CSS personalizzato sovrascrive tutto il resto.

Documenti correlati

• Riferimento Layout Manager
• Riferimento impostazioni
• Riferimento Pdf Manager
• Riferimento a shortcode e widget