Cliente Modelli CSS

Modelli CSS avanzati per i clienti per una presentazione coerente delle testimonianze

Il livello di stile è ciò che effettivamente controlli una volta inserite le recensioni e i loghi. Un modello CSS per i clienti definisce le proporzioni delle schede, la dimensione del testo e la spaziatura tra una citazione e la sua fonte, insieme alle regole dei breakpoint. Non resta che scegliere l'aspetto predefinito più adatto alla tua presentazione e poi modificare le poche parti che non sono in linea con il tuo marchio.

Slider, griglie, schede con ritratto, pareti di loghi

Gli stili predefiniti per i clienti si presentano in alcune forme riconoscibili:

1. Griglie di recensioni, dove diverse testimonianze sono affiancate con lo stesso spessore;

2. Slider, che privilegiano la visibilità allo spazio una volta raggiunte venti citazioni;

3. Schede con ritratto, con un volto e la relativa attribuzione posizionati sotto il testo;

4. Pareti di loghi, dimensionate per marchi denominativi e loghi quadrati di proporzioni molto diverse.

I ritratti rappresentano il punto di svolta. Con le foto, la scala del testo deve lasciare spazio per un nome e un ruolo sotto un'immagine di dimensioni fisse, e le citazioni devono necessariamente rimanere brevi. Senza di esse, una recensione può risultare più lunga e l'attribuzione può essere limitata a una singola riga di testo in basso. Gli slider richiedono un proprio allestimento, poiché i controlli e i marcatori di posizione necessitano di un contrasto sufficiente per apparire cliccabili.

Testimonianze lunghe si comportano diversamente su schermi stretti

La maggior parte del lavoro di personalizzazione di un layout per un cliente si concentra sui punti in cui il contenuto smette di essere prevedibile:

1. Una recensione di 300 parole che si trova sulla stessa riga di una di 12 parole;

2. Virgolette che incorniciano una scheda su un laptop e ne inghiottono metà su uno smartphone;

3. Un piccolo quadrato che scompare accanto a un logo più ampio in una griglia;

4. Attribuzione che si allontana dalla citazione quando aumenta la spaziatura verticale.

Le altezze fisse sono la causa principale di questi problemi. Lasciare che le schede si espandano in base al loro contenuto, limitare i tag con max-width e max-height invece di utilizzare una larghezza condivisa e mantenere lo spazio sotto una citazione più stretto dello spazio tra le schede risolverà la maggior parte dei problemi. Nicepage supporta il CSS personalizzato quando una singola sezione ostinata continua a non comportarsi correttamente, e questo è il suo utilizzo corretto: un'eccezione all'interno di un insieme di regole che altrimenti sono valide.

Scegli prima lo stile in base alla dimensione del contenuto

Guarda cosa hai prima di guardare cosa è esteticamente gradevole. Venti brevi testimonianze e una serie di tag per i clienti richiedono una griglia e un muro, entrambi sobri e coerenti. Tre articoli lunghi con numeri richiedono pannelli ampi in cui i risultati possano "respirare". I team che hanno entrambe le esigenze di solito finiscono per utilizzare due stili correlati su un unico sito, uniti da un carattere e un colore condivisi. Se le tue citazioni variano notevolmente in lunghezza, testa quella variante prima di qualsiasi altra cosa, perché la bozza per il cliente crea fiducia solo se appare studiata a tavolino.