Come funziona
Alva Courses applica lo stile al lettore corsi su due livelli. Le impostazioni per tutto il negozio in Impostazioni → Aspetto valgono per ogni corso. La scheda Impostazioni → Aspetto di ciascun corso decide se il corso le segue o usa un proprio colore e font. Le modifiche salvate raggiungono gli studenti al successivo caricamento o aggiornamento della pagina del corso.
| Impostazione | Tutto il negozio | Per corso |
|---|---|---|
| Colore principale | Colore predefinito | Colori brand, Personalizzazione avanzata dei colori |
| Font | Font predefinito | Default Font |
| Menu mobile | Stile menu mobile | Nessuna |
| CSS personalizzato | Stili personalizzati | Nessuna |
Come personalizzare l'aspetto del lettore corsi
1. Imposta il colore predefinito
Nel tuo admin Shopify, apri Alva Courses → Impostazioni → Aspetto. In Colore predefinito, digita un valore esadecimale o clicca su Scegli colore per sceglierne uno nella finestra Color Preview. Clicca su Close, poi su Salva nella barra di salvataggio.
Un corso usa questo colore solo se nel corso è spuntata l'opzione Use global color. Altrimenti mantiene il proprio colore (passaggio 4).
2. Scegli il font predefinito
In Font predefinito, scegli una Famiglia di font: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS o Verdana. Montserrat e Poppins si caricano da Google Fonts; gli altri usano i font installati sul dispositivo dello studente.
Il font si applica a ogni corso senza un font proprio e ai corsi con Use global font spuntato. Predefinito di sistema non imposta alcun font per tutto il negozio. Salva.
3. Scegli lo stile del menu mobile
In Stile menu mobile, scegli come gli studenti aprono l'elenco delle lezioni su schermi più stretti di 1.024 pixel. L'Anteprima del negozio qui sotto mostra la tua scelta.
- Hamburger (Predefinito): un pulsante quadrato nel tuo colore principale che fa scorrere in vista l'elenco delle lezioni.
- Pillola (Colore accento): un pulsante arrotondato Menu del corso nel tuo colore principale, fissato in alto mentre lo studente scorre la pagina.
- Intestazione breadcrumb: una barra a tutta larghezza con il nome della sezione e della lezione correnti, che apre l'elenco delle lezioni sotto di sé. Anche questa resta fissata in alto.
- Fluttuante in basso a destra: un pulsante Menu del corso fisso nell'angolo in basso a destra, dove può sovrapporsi ai widget di chat.
Salva. Per cambiare il testo di Menu del corso, usa i testi del negozio.
4. Dai a un corso il suo colore e il suo font
Apri il corso e vai su Impostazioni → Aspetto. In Colori brand, deseleziona Use global color e scegli un colore. In Default Font, deseleziona Use global font e scegli una Font Family. Use global font è disattivato finché non imposti un font per tutto il negozio.
Per un controllo più fine, clicca su Attiva in Personalizzazione avanzata dei colori. Si apre un editor dei colori in cui imposti colori separati per barra laterale, contenuto, pulsanti, barra di avanzamento, campi e bordi; Edit Colors lo riapre in seguito. Attiva non è disponibile finché Use global color è spuntato. Salva il corso.
Aggiungi CSS personalizzato
Il CSS personalizzato cambia lo stile di tutto ciò che le impostazioni sopra non coprono. In Impostazioni → Aspetto, scrivi le regole nella casella CSS personalizzato sotto Stili personalizzati e salva. Alva Courses le aggiunge all'elenco dei corsi e a ogni pagina di corso, dove prevalgono sulle impostazioni di colore e font.
Alva Courses non limita l'ambito del tuo CSS. Lo aggiunge alla pagina dello storefront esattamente come lo scrivi, quindi un selettore semplice come h2 cambia lo stile anche del tuo tema. Inizia ogni selettore con #alva-courses, la radice del lettore, o con un ID del lettore come #alva-course-sidebar.
Un banner Avvisi sull'ambito dei selettori elenca fino a cinque selettori senza ambito e la casella segnala il CSS che non può essere interpretato. Sono solo avvisi: il CSS viene salvato così com'è scritto e la casella non ha limiti di lunghezza.
Termina ogni dichiarazione con !important, perché il lettore imposta così molti dei suoi stili. Il link Guida ai selettori CSS sotto la casella elenca gli ID e le classi che puoi usare. Due esempi sicuri:
#alva-courses .lesson-content p { line-height: 1.7 !important; }allarga l'interlinea dei paragrafi delle lezioni.#alva-course-sidebar h2 { font-size: 22px !important; }ridimensiona il titolo del corso in cima alla barra laterale.
Per un font che non è nell'elenco Famiglia di font, inserisci una riga @import di Google Fonts proprio all'inizio, oppure una regola @font-face con l'URL assoluto del font (qui Liquid non funziona). Poi usa il nome del font in una regola con ambito.
Cosa vedono gli studenti
Gli studenti vedono il tuo colore principale sulla lezione selezionata, sui segni di completamento, sulla barra di avanzamento, sui link delle lezioni, sul pulsante Completa e continua e sul menu mobile. Il tuo font appare nel titolo del corso, nei titoli delle lezioni e nel testo delle lezioni.
Domande frequenti
Perché il Colore predefinito non ha cambiato un corso?
Un corso segue il Colore predefinito solo se nella scheda Aspetto del corso è spuntato Use global color. Altrimenti mantiene il proprio colore. Spunta la casella, salva il corso e ricarica la pagina del corso.
Posso aggiungere CSS personalizzato a un solo corso?
No. Stili personalizzati è un'unica impostazione per tutto il negozio che Alva Courses aggiunge all'elenco dei corsi e a ogni pagina di corso. Per dare un aspetto diverso a un corso, assegnagli un colore e un font propri nella sua scheda Aspetto.
Il mio CSS personalizzato cambierà il resto del mio tema?
Può succedere. Alva Courses aggiunge il tuo CSS alla pagina dello storefront così com'è scritto, quindi un selettore semplice come h2 cambia lo stile anche dei titoli del tuo tema. Inizia ogni selettore con #alva-courses per tenerlo dentro il lettore corsi.
Quando vedono gli studenti le mie modifiche?
Al successivo caricamento della pagina. Alva Courses legge le impostazioni di aspetto a ogni caricamento del lettore corsi, quindi non c'è nulla da pubblicare. Una pagina già aperta mantiene il vecchio aspetto finché non viene aggiornata.
Vedi anche
È stato utile?
Ultimo aggiornamento 2026-10-09