Personalizza il branding del tuo sito

:bookmark: Questo è un tutorial non tecnico che ti guiderà nella personalizzazione del branding e dell’aspetto del tuo sito Discourse.

:person_raising_hand: Livello utente richiesto: Amministratore

Vuoi personalizzare il branding del tuo sito, ma non sai da dove iniziare? Continua a leggere per scoprirlo!

La procedura guidata di configurazione

Discourse è altamente personalizzabile! Un ottimo punto di partenza per le personalizzazioni del sito è accedere con il tuo account amministratore e eseguire la procedura guidata di configurazione del sito. :mage:

La procedura guidata ti permette di configurare il titolo del sito, la lingua predefinita e le impostazioni di accesso (pubblico o privato, registrazione o solo su invito, e se gli utenti devono essere approvati). Questi sono i primi passi essenziali per mettere in funzione il tuo sito.

Una volta completata la procedura, potrai personalizzare ulteriormente l’aspetto del tuo sito — loghi, colori, caratteri e altro — dal pannello di amministrazione.

Puoi visualizzare le opzioni disponibili direttamente in questa pagina. Clicca sul pulsante “Avanti” quando hai trovato le impostazioni più adatte a te. Non preoccuparti, potrai sempre modificare queste impostazioni in seguito se deciderai che non sono quelle che cerchi.

Temi del sito

Una volta impostata una configurazione di base, è il momento di personalizzare ulteriormente il tuo sito! :sparkles:

I temi sono personalizzazioni estese che modificano molteplici elementi dello stile del design del tuo forum e spesso includono anche funzionalità aggiuntive per il front-end. I temi hanno la capacità di cambiare significativamente l’aspetto e il layout del tuo forum.

La categoria #theme su Meta ospita una varietà di temi precreati che puoi utilizzare sul tuo sito per personalizzarne l’aspetto. Questo è il posto migliore per cercare un tema da usare. Vai avanti e scegli un tema che ti piacerebbe utilizzare per il tuo sito in questa categoria.

Una volta deciso quale tema utilizzare, puoi aggiungerlo al tuo sito dalla pagina Admin -> Customize -> Themes (situata in /admin/config/customize/themes). Da questa pagina puoi anche apportare modifiche al tema del tuo sito o addirittura crearne uno completamente nuovo.

La Guida per principianti all’uso dei temi Discourse è un corso intensivo sulle basi dei temi Discourse e fornisce una panoramica su come installarli sul tuo sito. Leggi questa guida per le istruzioni su come installare il tema che hai scelto.

:tipping_hand_woman: Puoi trovare ulteriori informazioni su come usare, creare e condividere i tuoi temi in:

Palette di colori

Puoi personalizzare ulteriormente il tuo sito regolando la sua palette di colori dalla pagina Admin -> Config -> Colors (situata in /admin/config/colors). :art:

Da qui puoi creare una nuova palette di colori, selezionare una palette esistente da personalizzare e assegnare le palette come schema chiaro o scuro predefinito per il tuo tema.

Seleziona uno schema di colori esistente come base per il tuo nuovo schema, quindi personalizza i colori del tuo nuovo schema facendo clic sul colore accanto a ogni sezione:

Non dimenticare di dare un nome al tuo nuovo schema di colori e salvare le modifiche una volta terminato!

:tipping_hand_woman: Hai bisogno di aiuto per decidere i colori? Uno strumento di selezione colori come Paletton - The Color Scheme Designer può essere molto utile!

Per ulteriori informazioni su come utilizzare le palette di colori all’interno di Discourse, consulta:

Componenti del tema

Similmente ai temi, Discourse dispone anche di “Componenti del tema” che puoi utilizzare per modificare gli elementi superficiali del design del tuo forum o aggiungere funzionalità front-end extra. Più piccoli e mirati rispetto ai temi completi, possono generalmente (anche se non sempre) essere combinati con altri componenti del tema per creare un design del forum su misura per la tua community. :gear:

La categoria #theme-component su Meta contiene tutti i componenti del tema ufficiali e non ufficiali di Discourse. Esamina i componenti del tema elencati lì e, se desideri installarne alcuni sul tuo sito, segui semplicemente le istruzioni qui: L’interfaccia dei temi Discourse e come installare i componenti del tema

Alcuni dei componenti del tema Discourse più popolari includono:

:tipping_hand_woman: Discourse dispone anche di un interruttore integrato per la modalità scura/chiaro controllato dall’impostazione del sito interface_color_selector, che può essere configurato per mostrare l’interruttore nel piè di pagina della barra laterale o nell’intestazione.

:tipping_hand_woman: Il tag theme-guides su Meta contiene anche molti guide pratiche con idee per personalizzare ulteriormente il tuo sito con i Componenti del tema.

Branding del sito

Discourse dispone di una pagina dedicata alla configurazione del logo in Admin -> Appearance -> Logo (situata in /admin/config/logo) dove puoi gestire tutti i loghi e le icone del tuo sito.

  • Logo principale - Appare nella navigazione superiore del sito, nonché nella parte superiore delle Notifiche email del sito. Dimensione consigliata: 600 × 80 pixel.
  • Logo principale scuro - Alternativa in modalità scura per il logo principale. Dimensione consigliata: 600 × 80 pixel.
  • Icona quadrata - Una versione quadrata dell’immagine del logo che appare nella parte superiore del sito ed è anche il logo dell’app mobile. Dimensione consigliata: 512 × 512 pixel.
  • Favicon - Il logo apparirà come l’icona nella scheda del browser e nei preferiti/firmari del browser.
  • Logo piccolo - L’immagine del logo piccolo in alto a sinistra del tuo sito, visibile quando si scorre verso il basso. Se lasciata vuota, verrà mostrato un glifo home. Dimensione consigliata: 120 × 120 pixel.
  • Logo piccolo scuro - Alternativa in modalità scura per il logo piccolo. Dimensione consigliata: 120 × 120 pixel.

Nella sezione Mobile:

  • Logo mobile - Il logo utilizzato nella versione mobile del tuo sito. Se lasciato vuoto, verrà utilizzata l’immagine dall’impostazione logo. Usa un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto superiore a 3:1.
  • Logo mobile scuro - Alternativa in modalità scura per il logo mobile. Usa un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto superiore a 3:1.
  • Icona del manifesto - Immagine utilizzata come logo/immagine di avvio su Android. Se lasciata vuota, verrà utilizzata large_icon. Dimensione consigliata: 512 × 512 pixel.
  • Screenshot del manifesto - Screenshot che mostrano le funzionalità e le funzionalità della tua istanza nella pagina del prompt di installazione (visualizzata quando si usa “Aggiungi alla schermata Home” su Android). Tutte le immagini devono essere caricate localmente e avere le stesse dimensioni.
  • Icona Apple touch - Icona utilizzata per i dispositivi Apple touch. Se lasciata vuota, verrà utilizzata large_icon. Dimensione consigliata: 180 × 180 pixel. Si sconsiglia uno sfondo trasparente.

Nella sezione Email:

  • Logo digest - L’immagine del logo alternativo utilizzata nella parte superiore del riepilogo email del tuo sito. Se lasciata vuota, verrà utilizzata l’immagine dall’impostazione logo. Usa un’immagine rettangolare larga. Non usare un’immagine SVG.

Nella sezione Social media:

  • Immagine OpenGraph - Immagine opengraph predefinita, utilizzata da molte app e piattaforme per le anteprime dei collegamenti web quando una pagina non ha un’immagine adatta. Se lasciata vuota, verrà utilizzata large_icon.
  • Immagine grande riepilogo X - Immagine grande del riepilogo della scheda X. Se lasciata vuota, vengono generati i metadati della scheda regolare utilizzando OpenGraph_image, a condizione che non sia anche un .svg. Dimensione consigliata: almeno 280 × 150 pixel. Non usare un’immagine SVG.

:tipping_hand_woman: Per ottenere i migliori risultati, consigliamo di seguire le linee guida sulle dimensioni elencate sopra per ogni tipo di logo e icona.

Personalizzazioni aggiuntive

Ora che hai aggiunto un tema personalizzato, una palette di colori, alcuni loghi del brand e forse alcuni componenti del tema al tuo sito, hai completato tutte le personalizzazioni di base del sito! :tada:

Se stai ancora cercando altri modi per personalizzare il tuo sito Discourse, ti consigliamo di leggere uno dei seguenti argomenti che potrebbero interessarti:

8 Mi Piace

Quindi, cosa fa effettivamente Manifest screenshots? Dove vengono utilizzate queste schermate? È quando qualcuno installa la tua community come app locale tramite il browser? Le immagini sono quelle che appaiono se rendi la tua community scopribile con Discourse Discover?

Vedo queste schermate quando uso l’opzione “Aggiungi alla schermata Home” su Chrome sul mio dispositivo Android

2 Mi Piace

Interessante! Pensavo facessero così, ma non li ho visti quando ho installato sul mio desktop (Chrome, Windows). Potrei non aver dato loro abbastanza tempo per caricarsi/propagarsi da qualche parte.

Sono contento di sapere che avevo ragione su cosa fanno, però!

1 Mi Piace

Sembra che questa sezione sia stata omessa per errore,

1 Mi Piace

Dopo averlo letto due volte, penso di aver capito. Le linee guida sulle dimensioni sono incluse sopra. Ad esempio:

Penso che in generale questa guida sia piuttosto obsoleta. Non è più possibile aggiungere un logo o configurare l’aspetto nella procedura guidata. La pagina di amministrazione dei temi ora ha un aspetto completamente diverso e gli schemi di colori sono stati rinominati in palette di colori.
Il componente del tema per l’interruttore della modalità scura/chiara è stato spostato nel core. E il branding ha una nuova pagina di configurazione su /admin/config/logo.
Mi chiedo solo perché la dimensione menzionata nella pagina di configurazione sia diversa dalla descrizione quando guardo l’impostazione del sito.


600×80 è diverso da min. 360×120.

2 Mi Piace

Questo argomento è ormai un po’ obsoleto poiché queste cose sono state recentemente rielaborate.

Ecco i miei pensieri su alcuni suggerimenti minori (ma preziosi) per miglioramenti:

4 Mi Piace