Scegli un template e il suo aspetto

Guarda l'anteprima dei template, poi imposta colori, font, layout e logo del sito.

Per proprietari e admin dei team · 11 passaggi

Cosa ti serve prima

  • Il tuo team ha un abbonamento al sito. Nella sezione Admin di un team gratuito trovi Ottieni un sito al posto di Template.
  • Sei il proprietario o un admin del team.

Passaggi

  1. Passaggio 1: Apri Template

    Nel menu a sinistra, premi Template.

    Dovresti vedere: una pagina intitolata Template, con una card per ogni template. Quello usato dal tuo sito è contrassegnato con In uso. Se il tuo sito non ha ancora un template, ogni card mostra invece Scegli: premendolo scegli quel template, con la sua prima palette, e si apre Aspetto.

    Il menu admin del team, con Template evidenziato.
  2. Passaggio 2: Guarda l'anteprima di un template

    Sulla card di un template, premi Anteprima.

    Dovresti vedere: il tuo sito con quel template, sotto una barra con scritto Anteprima. Solo gli admin del tuo team possono aprirla. Quando hai finito, premi Torna all'admin.

    La card del template Broadcast, contrassegnata In uso, con il link Anteprima evidenziato.
  3. Passaggio 3: Apri Aspetto

    Tornato nella pagina Template, premi Aspetto in alto a destra.

    Dovresti vedere: una pagina intitolata Aspetto, con il modulo da un lato e un'anteprima dal vivo del tuo sito accanto (sotto, su uno schermo stretto).

    La pagina Template, con il link Aspetto evidenziato.
  4. Passaggio 4: Scegli una palette

    In Palette, scegli uno dei preset del template.

    Dovresti vedere: il preset evidenziato e l'anteprima del tuo sito con i suoi colori. Un preset imposta in un colpo solo i cinque colori ed entrambi i font.

    La riga Palette, con il preset Ice Blue scelto ed evidenziato.
  5. Passaggio 5: Cambia un colore

    In Colori, scrivi un codice colore come #7dd3fc in Principale, Accento, Evidenza, Sfondo o Testo, oppure premi il quadrato accanto per sceglierne uno.

    Dovresti vedere: l'anteprima del tuo sito cambiare e Personalizzata evidenziato in Palette. Ogni colore mostra il valore predefinito del template; Ripristina riporta quel colore al suo valore.

    Il campo del colore Principale con un nuovo colore inserito, evidenziato.
  6. Passaggio 6: Dai a testo e superfici i loro colori

    In Testo e superfici, premi Scegli un colore accanto a Titoli, Didascalie, Card, Linee, Link ed etichette, Pulsante o Testo del pulsante, poi scrivi un codice colore o premi il quadrato accanto. Ognuno parte da Auto, che segue i tuoi cinque colori come fa il tuo template; Usa Auto lo ripristina.

    Dovresti vedere: l'anteprima del tuo sito cambiare e, sotto ogni colore usato per delle scritte, un numero come 7,2:1 · facile da leggere: indica quanto risalta sullo sfondo e sulle card. Sotto 4,5:1 (3:1 per i titoli) indica difficile da leggere, mostra il colore che i visitatori vedranno al suo posto e propone Rendilo leggibile, che inserisce quel colore nel campo.

    La riga Titoli in Testo e superfici, con un colore scelto e il suo valore di leggibilità, evidenziata.
  7. Passaggio 7: Scegli i font

    In Tipografia, apri Font dei titoli o Font del testo e scegli un font. Ogni font è mostrato nel suo stile ed è raggruppato in una categoria (Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace). Puoi scrivere un nome per trovarlo.

    Dovresti vedere: l'anteprima del tuo sito con quel font. Anche cambiare un font rende la palette Personalizzata.

    La sezione Tipografia, con il menu Font dei titoli evidenziato.
  8. Passaggio 8: Aggiungi il tuo logo

    In Logo, premi Scegli immagine accanto a Logotipo, Logo quadrato o Favicon (dopo averne impostato uno, il pulsante diventa Sostituisci). Nella finestra Inserisci immagine, scegli un'immagine o caricane una (JPEG, PNG, WebP o AVIF, fino a 5 MB) e premi Inserisci. Un logo non ha bisogno di testo alternativo.

    • Il logo quadrato appare nella navigazione del sito, in cima alla Home e nel roster.
    • Il logotipo è facoltativo: il nome del tuo team come immagine, di qualsiasi forma. Se ne imposti uno, sostituisce il logo quadrato e il nome nella navigazione e in cima alla Home.
    • La favicon è la piccola icona nella scheda del browser.

    I tuoi loghi non vengono mai ritagliati né modificati. Ogni immagine è mostrata per intero e uno sfondo trasparente resta trasparente. Per questo il logo quadrato e la favicon devono essere quadrati, di almeno 256 × 256 pixel: un'immagine di un'altra forma viene rifiutata al salvataggio, con un messaggio che ne indica le dimensioni. Un logo scelto prima di questa regola continua a essere mostrato finché non lo cambi.

    Dovresti vedere: il nome dell'immagine accanto allo spazio. Un preset non li cambia mai.

    La sezione Logo, con i pulsanti Scegli immagine di Logotipo e Logo quadrato evidenziati.
  9. Passaggio 9: Imposta le opzioni del template

    Più in basso, in Opzioni di Broadcast, scegli Hero layout (Image behind the text o Image beside the text) e Card edges (Cut corners o Square corners). Gli altri template mostrano qui le proprie opzioni: per Neon Grid, Motion è Full motion o Calm (tutto fermo) e Hero glow è Bright (la parte alta della home page sfuma dal colore di sfondo al colore d'accento) o Scuro (verso un grigio scuro ottenuto dal colore principale e dall'accento, per un look più scuro); per Crosshair, Hero layout è Split (i tuoi testi a sinistra, la tua immagine a destra con sopra la prossima partita) o Full-width image; per Faceoff, Hero alignment è Centered o Left e Home roster è Scattered (le card dei tuoi giocatori attorno a una grande scritta «Meet the squad») o Grid; per Clutch, Hero layout è Bento (l'hero accanto a un pannello Latest news) o Full width e Corners è Rounded o Square; per Varsity, Sfondo è Pinstripe (una leggera riga diagonale dietro ogni pagina) o Semplice e Hero size è Full (una foto alta con il menu sopra) o Banner (una più bassa); per Redline, Photo tint è Duotone (le tue foto tinte del colore principale) o Natural (i loro colori originali) e Panels è Offset (blocchi scuri dietro foto e sezioni) o Flat.

    Dovresti vedere: l'anteprima del tuo sito cambiare layout.

    La sezione Opzioni di Broadcast, con il menu Hero layout evidenziato.
  10. Passaggio 10: Salva

    Premi Salva in fondo al modulo.

    Dovresti vedere: «Aspetto salvato». I visitatori non lo vedono ancora: le modifiche salvate restano nella tua bozza finché non pubblichi.

    La parte inferiore del modulo Aspetto, con il pulsante Salva evidenziato.
  11. Passaggio 11: Pubblica il tuo sito

    Premi Pubblica nel menu a sinistra e pubblica: vedi Pubblica il tuo sito.

    Dovresti vedere: Aspetto nell'elenco delle modifiche prima di pubblicare e, dopo, il tuo sito con il nuovo look.

Come capire se ha funzionato

  • La pagina Template indica il tuo template come In uso.
  • Dopo la pubblicazione, il tuo sito mostra i tuoi colori, i tuoi font e il tuo logo, per intero e mai ritagliato.
  • Ogni colore usato per le scritte indica facile da leggere, oppure hai accettato la tonalità leggibile che i visitatori vedono al suo posto.

Qualcosa non va?

Ho cambiato i colori ma il mio sito è uguale

Salvando, i colori restano nella tua bozza. Premi Pubblica nel menu e pubblica (passaggio 11).

Un colore indica "difficile da leggere"

Le scritte in quel colore non risaltano abbastanza sullo sfondo o sulle card perché tutti possano leggerle: il testo normale richiede 4,5:1 e i titoli 3:1. I tuoi visitatori non vedono mai il colore difficile da leggere: il sito mostra al suo posto la tonalità leggibile più vicina, e il modulo la indica. Premi Rendilo leggibile per usare quella tonalità, oppure scegline una tua finché non indica facile da leggere. Un colore lasciato su Auto viene regolato allo stesso modo, senza chiedere. Anche Pubblica mostra un avviso, ma non ti impedisce mai di pubblicare.

Il mio sito è difficile da leggere con un solo colore ovunque

Dai a ogni tipo di testo il suo colore in Testo e superfici (passaggio 6): per esempio Titoli rossi, Testo grigio chiaro per i paragrafi e un colore Card leggermente più chiaro, così i pannelli risaltano sulla pagina. Per colorare in modo diverso intere parti di una pagina, come un negozio chiaro in un sito scuro o una fascia del colore d'accento, vedi Dai a parti del tuo sito i loro colori.

Cambiare template elimina i miei contenuti?

No. I tuoi contenuti appartengono al sito, non al template: colori e font restano dove il nuovo template li usa, le sue opzioni tornano ai valori predefiniti e una sezione che non può mostrare viene nascosta, non eliminata. La finestra che si apre prima del cambio elenca tutte e tre le cose e puoi annullare. Se il tuo sito ha ancora i colori e i font predefiniti della piattaforma (non hai mai scelto una palette né cambiato un colore), viene usata la prima palette del nuovo template, così il sito somiglia all'immagine del template; la finestra lo indica in Colori e font. I template sono sette: Broadcast, un look da giorno di partita; Neon Grid, un look nero e neon con una griglia animata e un gradiente luminoso dietro l'hero, il tuo logo che ci fluttua sopra, i contatori e una parete di video; Crosshair, un look nero e tecnico con pannelli incorniciati, etichette tra parentesi quadre, un grande logotipo nel footer e foto in primo piano; Faceoff, un look blu-nero e ciano ghiaccio in cui il tuo logo fronteggia quello dell'avversario su ogni card partita, con un grande hero e la tua squadra sparsa attorno a un titolo gigante; Clutch, un look chiaro con card bianche arrotondate, titoli larghi in maiuscolo e un solo colore acceso, con la prossima partita nell'hero e, su uno schermo largo, in cima a ogni pagina; Varsity, un look da campus con fasce blu navy, un solo oro, i tuoi migliori piazzamenti nei tornei sopra il roster e le partite in una tabella del calendario; e Redline, un rosso su quasi nero con le foto tinte del colore principale (rosso di default), pulsanti squadrati e le partite come righe con foto ed entrambi i loghi ai lati di un VS. I titoli di Clutch sono in Archivo Expanded, che puoi scegliere in qualsiasi template in Heavy display. Su computer o tablet, il pulsante Join our Discord di Faceoff in cima a ogni pagina appare solo se hai aggiunto il link Discord in Social (Aggiungi i tuoi social). Ogni template mostra la tua diretta allo stesso modo: un conto alla rovescia nel giorno della diretta, il player di Twitch in cima alla home page mentre sei live e una barra Live su tutte le altre pagine (Programma una diretta).

Compare "Questo sito è cambiato da quando l’hai aperto"

Un altro admin ha salvato prima di te e non è stato salvato niente di tuo. Premi Ricarica, poi rifai la modifica.

Compare "Questo logo è … Carica un’immagine quadrata"

Il logo quadrato e la favicon devono essere quadrati (stessa larghezza e altezza) e di almeno 256 × 256 pixel, perché non li ritagliamo mai. Il messaggio indica le dimensioni della tua immagine. Crea una versione quadrata (aggiungi spazio vuoto e trasparente attorno a un logo largo), caricala e salva di nuovo. Un logo non quadrato va in Logotipo.

Compare "Le dimensioni di questo logo non sono registrate"

Non conosciamo le dimensioni di quell'immagine, quindi non possiamo verificare che sia quadrata. Caricala di nuovo, scegli la nuova copia e salva.

I campi e Salva sono disattivati

L'abbonamento del tuo team è scaduto, quindi le pagine del sito sono di sola lettura finché non torna attivo. Rinnovalo: vedi Gestisci la fatturazione.

Guide correlate

Ancora bloccato? Contatta l’assistenza o scrivi a support@spawnfront.com: indicaci la pagina in cui ti trovi e il numero del passaggio.