Creare un banner da visualizzare in cima al tuo sito

:bookmark: Questa guida spiega diversi metodi per creare e personalizzare banner sul tuo sito Discourse, da semplici banner chiudibili a opzioni piĂą avanzate.

:person_raising_hand: Livello utente richiesto: Moderatore (banner chiudibile), Amministratore

I banner sono un modo efficace per comunicare informazioni importanti ai visitatori del tuo sito. Questa guida ti illustrerĂ  vari metodi per creare e personalizzare banner sul tuo sito Discourse.

Banner di benvenuto

Un banner di benvenuto accoglie i membri nuovi e di ritorno con un messaggio amichevole e una barra di ricerca prominente, rendendo facile per i visitatori trovare rapidamente i contenuti che stanno cercando.

Per abilitare il banner di benvenuto:

  1. Nell’area amministrativa, fai clic sul link Aspetto > Temi e componenti nella barra laterale.
  2. Trova il tuo tema attivo e fai clic su Modifica.
  3. Trova l’impostazione Abilita banner di benvenuto e assicurati che sia selezionata.

:information_source: Questo abiliterà il banner di benvenuto per questo tema. Se offri più temi selezionabili dall’utente, dovrai ripetere questo processo per ogni tema.

Personalizzazione del banner di benvenuto

Puoi personalizzare il banner di benvenuto per modificarne l’aspetto nella tua community. Nell’area amministrativa, quando vai su Tutte le impostazioni del sito, puoi cercare “banner di benvenuto” per trovare le seguenti opzioni di personalizzazione:

  • Posizione del banner di benvenuto: Questo determina dove viene visualizzato il banner di benvenuto nella pagina. Per impostazione predefinita, mostra “Sopra il contenuto dell’argomento”, ma puoi anche selezionare “Sotto l’intestazione del sito”. La differenza è un po’ sottile e mostrata negli screenshot seguenti:

  • VisibilitĂ  della pagina del banner di benvenuto: Questo determina quali pagine visualizzano il banner di benvenuto. Per impostazione predefinita, viene visualizzato su “Pagine del menu principale” (ovvero le pagine selezionate nell’impostazione Menu principale), ma puoi cambiarlo in:

    • “Homepage”: Il banner di benvenuto viene visualizzato solo sulla homepage del sito (cioè la prima pagina elencata nell’impostazione Menu principale).
    • “Discovery”: Il banner di benvenuto viene visualizzato su tutte le pagine del Menu principale, anche se non sono visualizzate nel menu principale effettivo del tuo sito (cioè non selezionate nell’impostazione).
    • “Tutte le pagine”: Il banner di benvenuto viene visualizzato su tutte le pagine del tuo sito. Questo generalmente non è consigliato poichĂ© può causare disordine visivo nelle pagine degli argomenti che distraggono i membri dalla lettura e dalla partecipazione.
  • Immagine del banner di benvenuto: Carica un’immagine da utilizzare come sfondo per il tuo banner di benvenuto.

Puoi anche personalizzare il testo del banner di benvenuto per cambiare il saluto e aggiungere testo esplicativo al banner di benvenuto. Per personalizzare il testo del banner:

  1. Nell’area amministrativa, fai clic sul link Aspetto > Testi del sito nella barra laterale.
  2. Cerca la stringa di testo che desideri modificare:
    • js.welcome_banner.header.logged_in_members — Il saluto principale mostrato ai membri registrati nel banner di benvenuto.
    • js.welcome_banner.header.anonymous_members — Il saluto principale mostrato ai membri anonimi (cioè non registrati) nel banner di benvenuto.
    • js.welcome_banner.subheader.logged_in_members — Una riga di testo secondaria opzionale mostrata ai membri registrati nel banner di benvenuto, sotto l’intestazione.
    • js.welcome_banner.subheader.anonymous_members — Una riga di testo secondaria opzionale mostrata ai membri anonimi (cioè non registrati) nel banner di benvenuto, sotto l’intestazione.
    • js.welcome_banner.search_placeholder — Il testo segnaposto mostrato nel campo di ricerca del banner di benvenuto.
  3. Fai clic sul pulsante Modifica.
  4. Aggiorna il testo come desiderato.
  5. Fai clic su Salva modifiche.

Banner chiudibile

Un banner chiudibile è un avviso temporaneo che gli utenti possono chiudere. Ecco come crearne uno:

  1. Crea o naviga a un argomento in qualsiasi categoria (pubblica o privata). Il post originale (OP) in cima all’argomento sarà la fonte del tuo banner.
  2. Apri le opzioni amministrative facendo clic sull’icona della chiave inglese a destra o in fondo all’argomento.
  3. Seleziona “Fissa Argomento…”
  4. Nella nuova finestra, scegli :pushpin: Crea Banner Argomento

Il banner apparirà ora in cima al tuo sito. Gli utenti vedranno un banner chiudibile. Anche lo staff vedrà un link per modificare l’argomento sorgente.

:information_source: Suggerimenti per banner chiudibili efficaci:

  • Mantieni il testo chiaro e conciso
  • L’altezza massima è di 250px (modificabile tramite CSS)
  • Per testi piĂą lunghi, gli utenti possono scorrere all’interno del banner
  • Considera l’aggiunta di un link a un argomento pubblico pertinente per ulteriori informazioni

Banner permanente

Per creare un banner sempre visibile e non chiudibile dagli utenti:

  1. Nelle impostazioni del tuo sito, cerca global_notice.
  2. Inserisci il testo o l’HTML del tuo banner in questo campo.

:information_source: Suggerimenti per banner permanenti:

  • Questo tipo di banner viene solitamente utilizzato per comunicazioni urgenti del sito, ma può essere utilizzato per qualsiasi messaggio permanente
  • Questo banner è visibile a tutti, inclusi gli utenti anonimi sui siti con login_required
  • Il banner può essere rimosso reimpostando l’impostazione del sito global notice

Banner avanzati

Puoi creare banner piĂą avanzati utilizzando un componente tema. Tieni presente che questi componenti tema potrebbero entrare in conflitto con la funzionalitĂ  principale del banner di benvenuto.

Banner Link di Benvenuto

Questo componente ti consente di aggiungere testo personalizzato e 1-4 link al tuo banner. Offre varie opzioni di personalizzazione, tra cui:

  • Scelta di dove visualizzare il banner (homepage, elenchi di argomenti o tutte le pagine)
  • Aggiunta di link con icone Font Awesome
  • Limitazione della visibilitĂ  in base ai livelli di fiducia dell’utente
  • Personalizzazione di immagini o colori di sfondo
  • Regolazione dei colori del testo e delle icone

Banner Versatile

Uno dei componenti più popolari e ben mantenuti, il Banner Versatile offre ampie opzioni di personalizzazione tramite l’interfaccia, tra cui:

  • Visualizzazione del banner limitata a
    • utenti registrati o anonimi
    • dispositivo mobile o desktop
    • homepage, elenco argomenti o tutte le pagine
  • Opzioni chiudibili, espandibili o persistenti
  • Impostazione a tutta larghezza del browser
  • Gestione dei colori
  • Personalizzazione di intestazioni e colonne tramite HTML

Personalizzazione dei banner con CSS

Puoi personalizzare tutti i tipi di banner utilizzando CSS. Per ulteriori informazioni sull’utilizzo del CSS per personalizzare il tuo sito Discourse, consulta la Guida per principianti all’uso dei temi Discourse.

41 Mi Piace