Colori e modelli
Personalizza colori, pulsanti e modelli di un singolo blocco e guarda l'anteprima dal vivo del risultato prima di salvare.
Ogni blocco in Sami B2B Lock, Password Protect ha le proprie impostazioni di design (colori, stile dei pulsanti e un paio di opzioni di visualizzazione), completamente separate da quelle di ogni altro blocco. Questo significa che il tuo catalogo all’ingrosso protetto da codice di accesso può avere un aspetto completamente diverso dal messaggio «accedi per vedere questa collezione», anche se entrambi sono creati con la stessa app. Nulla di ciò che fai in questa pagina influisce sugli altri blocchi.
Aprire il pannello di design di un blocco
Sezione intitolata “Aprire il pannello di design di un blocco”- Apri l’app e vai su Locks, poi apri il blocco di cui vuoi cambiare lo stile (oppure creane uno nuovo).
- Nella scheda Lock setup, trova la scheda Preview a destra e fai clic su Customize templates.
Fai clic su Customize templates nella scheda Preview dell’editor del blocco.
- Si apre il pannello a schermo intero Customize templates. La barra laterale sinistra elenca le schermate che questo blocco può mostrare a chi acquista (Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link e Country Restriction), più un controllo Collapse sidebar in basso. Fai clic su una schermata per caricarne le impostazioni di Translation e Design nella colonna centrale, con un’anteprima dal vivo a destra.
Il pannello Customize templates: scegli una schermata a sinistra, personalizzala al centro e controlla il risultato a destra.
- Nella colonna centrale, scorri oltre la sezione Translation (descritta in Tradurre i messaggi del blocco) fino alla sezione Design sottostante. Tutto ciò che riguarda questa guida si trova in quella sezione Design.
Ogni colore è un campione con il relativo valore esadecimale accanto. Fai clic sul campione (o sull’icona a forma di matita) per aprire il selettore, scegli o digita un colore e l’anteprima dal vivo a destra si aggiorna subito.
Per la schermata Passcode, ad esempio, trovi:
| Campo | Cosa personalizza |
|---|---|
| Color button text | L’etichetta del pulsante Submit |
| Color text | Il testo del messaggio di blocco |
| Color input passcode | Il testo che chi acquista digita nel campo del codice di accesso |
| Box shadow color | L’ombra esterna della scheda, quando Box shadow è attivo |
| Background button | Lo sfondo del pulsante Submit |
| Background notification | Lo sfondo della scheda di blocco |
| Background input passcode | Lo sfondo del campo del codice di accesso |
Ogni colore mostra un campione e il valore esadecimale; fai clic per aprire il selettore.
Interruttori Box shadow e immagine del logo
Sezione intitolata “Interruttori Box shadow e immagine del logo”Due interruttori si trovano in cima alla sezione Design, sopra i selettori di colore:
- Box shadow: aggiunge un’ombra esterna attorno alla scheda di blocco (il suo colore si imposta con Box shadow color più sotto).
- Use image: mostra l’illustrazione del blocco sulla scheda. Disattivalo per una scheda con solo testo.
Attiva Box shadow o Use image per cambiare la presentazione della scheda di notifica.
Placeholder card
Sezione intitolata “Placeholder card”Seleziona Placeholder card nella barra laterale per personalizzare ciò che chi acquista vede al posto di un prodotto bloccato quando compare in un elenco, ad esempio in una pagina collezione.
La schermata Placeholder card controlla come appaiono gli articoli bloccati negli elenchi di prodotti.
CSS personalizzato per blocco
Sezione intitolata “CSS personalizzato per blocco”In fondo alla sezione Design c’è un editor Custom css. Tutto ciò che inserisci qui si applica solo ai widget di questo singolo blocco: è un buon posto per un piccolo ritocco che serve al tuo tema (una dimensione del carattere, un margine) senza toccare il foglio di stile del tema.
Ogni blocco ha il proprio editor Custom css per personalizzazioni una tantum.
Il pannello di anteprima dal vivo
Sezione intitolata “Il pannello di anteprima dal vivo”La colonna di destra del pannello Customize templates mostra sempre un’anteprima dal vivo, con lo stile della vetrina, della schermata selezionata: le modifiche a colori e stile compaiono all’istante, senza salvare. In cima al pannello, un selettore Desktop preview / Mobile preview permette di controllare come appare la stessa schermata a ciascuna dimensione.
Passa dall’anteprima desktop a quella mobile per controllare entrambi i layout prima di salvare.
Poiché l’intero pannello si trova nell’editor di un blocco specifico, l’anteprima riflette sempre le impostazioni di quel blocco (contenuto, regole e design) e non un esempio generico.