Tutorial
Indietro

Come impostare lo stile globale del tuo negozio


Oggi parleremo di un potente strumento per il design della tua app: il menu dello stile globale. Lo stile globale ti permette di gestire il design generale della tua app da un unico menu. I colori, i caratteri e gli effetti selezionati in questo menu vengono applicati a ogni sezione della tua app. Ma fai attenzione, ogni modifica fatta da questo menu sarà applicata a tutte le sezioni della tua app. Nel menu Contenuto e design > Design > Design generale, clicca su Stile globale.

La prima cosa da fare è selezionare un tema di colore. Un tema di colore è una combinazione di colori che si armonizzano perfettamente. Lo stile globale offre una libreria di temi di colore. Per sfogliare la libreria, clicca su modifica. Come puoi vedere, ho molte scelte. Se preferisco cambiare il mio tema attuale, clicca su modifica, scorri in fondo alla pagina e clicca su crea un tema di colore, poi seleziona i tuoi colori.

Ora passiamo ai telefoni.  C'è una gerarchia per la visualizzazione del testo nell'app. 8 livelli sono utilizzati per visualizzare titoli, sottotitoli, paragrafi e testo. Definisco la dimensione del carattere, il font per ogni livello. A seconda del font scelto, posso anche scegliere l'opzione. Ora i pulsanti. Per le sezioni della tua app che invitano gli utenti a compiere azioni, seleziono la forma del pulsante che voglio applicare.

Posso vedere un'anteprima del risultato cliccando qui. Ci sono diversi livelli di gerarchia per quanto riguarda i pulsanti della tua app. Il design del pulsante dipende dal tema di colore della tua app. Per rispettare l'armonia, sono disponibili diverse varianti per ogni tema. Ecco i tre diversi tipi di design per ogni livello di gerarchia:
Livello 1 => sfondo colorato del pulsante senza contorno
Livello 2 => sfondo trasparente del contorno del pulsante e testo a colori
Livello 3 => sfondo trasparente del pulsante senza contorno

Ora gli effetti hover sulle immagini. Questo è disponibile solo su PWA. Infine gli elementi aggiuntivi come l'icona back che appare nell'header, durante la navigazione del vostro negozio. Salvo la modifica. Non dimenticate che tutte queste modifiche sovrascriveranno il design attuale del vostro negozio, comprese le sezioni sganciate.

Diamo un'occhiata sì, mi piace molto l'aspetto del mio negozio.

Ci vediamo per un altro tutorial!

Video simili