Questa guida spiega i diversi metodi per creare e personalizzare i banner sul tuo sito Discourse, dai semplici banner che è possibile chiudere ad opzioni più avanzate.
Livello utente richiesto: Moderatore (Banner che è possibile chiudere), Amministratore
I banner sono un modo efficace per comunicare informazioni importanti ai visitatori del tuo sito. Questa guida ti illustrerà i vari metodi per creare e personalizzare i 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 e personalizzare il banner di benvenuto, vai all’area di amministrazione e seleziona il link Aspetto > Banner di benvenuto nella barra laterale.
In quest’area troverai le seguenti impostazioni:
- Abilitato sui temi…: Questo ti permette di designare quali dei tuoi temi attivi devono visualizzare il banner di benvenuto.
- Immagine di sfondo: Carica un’immagine da utilizzare come sfondo per il tuo banner di benvenuto.
- Colore del testo: Se il colore del testo predefinito controllato dalla tua palette di colori è in conflitto con l’immagine di sfondo, puoi selezionare un nuovo colore qui. Nota che questa impostazione si applica solo quando hai caricato un’immagine di sfondo.
- Visibilità della pagina: Questo determina quali pagine visualizzano il banner di benvenuto. Per impostazione predefinita, viene mostrato sulle
Pagine del menu principale(ovvero le pagine selezionate nell’impostazione del sitoMenu principale), ma puoi cambiarlo in:
Solo homepage: Il banner di benvenuto viene mostrato solo sulla homepage del sito (ovvero la prima pagina elencata nell’impostazione del sitoMenu principale).Pagine di scoperta: Il banner di benvenuto viene mostrato su tutte le pagine delMenu principale, anche se non sono mostrate nel menu principale effettivo del tuo sito (ovvero non selezionate nell’impostazione).Tutte le pagine: Il banner di benvenuto viene mostrato su tutte le pagine del tuo sito. Generalmente non è consigliato poiché può causare disordine visivo sulle pagine dei topic che distrae i membri dalla lettura e dalla partecipazione.- Posizione: Questo determina dove il banner di benvenuto viene mostrato sulla pagina. Per impostazione predefinita, viene mostrato
Sopra il contenuto del topic, ma puoi anche selezionareSotto l'intestazione del sito. La differenza è un po’ sottile, ed è mostrata negli screenshot qui sotto:Puoi anche personalizzare il testo del banner di benvenuto per modificare il saluto e aggiungere testo più esplicativo al banner di benvenuto.
- Intestazione per i nuovi membri: Il saluto principale mostrato ai nuovi membri la prima volta che accedono al tuo sito.
- Intestazione per i membri autenticati: Il saluto principale mostrato ai membri di ritorno.
- Intestazione per i visitatori anonimi: Il saluto principale mostrato ai membri anonimi (ovvero non autenticati).
- Sotto-intestazione per i membri autenticati: Una riga di testo secondaria opzionale sotto l’intestazione mostrata ai membri di ritorno.
- Sotto-intestazione per i visitatori anonimi: Una riga di testo secondaria opzionale sotto l’intestazione mostrata ai membri anonimi (ovvero non autenticati).
- Placeholder di ricerca: Il testo segnaposto mostrato nel campo di ricerca del banner di benvenuto.
Banner che è possibile chiudere
Un banner che è possibile chiudere è un avviso temporaneo che gli utenti possono chiudere. Ecco come crearne uno:
- Crea o naviga verso un topic in qualsiasi categoria (pubblica o privata). Il post originale (OP) in cima al topic sarà la fonte del tuo banner.
- Apri le opzioni di amministrazione facendo clic sull’icona della chiave inglese a destra o in fondo al topic.
- Seleziona “Fissa Topic…”
- Nella nuova finestra, scegli
Crea Banner Topic
Il banner apparirà ora in cima al tuo sito. Gli utenti vedranno un banner che è possibile chiudere. Lo staff vedrà anche un link per modificare il topic sorgente.
Suggerimenti per banner che è possibile chiudere efficaci:
- Mantieni il testo chiaro e conciso
- L’altezza massima è di 20vh (modificabile tramite CSS)
- Per testi più lunghi, gli utenti possono scorrere all’interno del banner
- Valuta l’aggiunta di un link a un topic pubblico pertinente per maggiori informazioni
Banner permanente
Per creare un banner sempre visibile e che non può essere chiuso dagli utenti:
- Nelle impostazioni del tuo sito, cerca
global_notice.- Inserisci il testo o l’HTML del tuo banner in questo campo.
- Questo tipo di banner è tipicamente usato 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 noticeBanner avanzati
Puoi creare banner più avanzati utilizzando un componente tema. Si prega di notare che questi componenti tema possono entrare in conflitto con la funzione principale del banner di benvenuto.
Welcome Link Banner
Questo componente ti permette 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 topic 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
Versatile Banner
Uno dei componenti più popolari e meglio mantenuti, il Versatile Banner offre ampie opzioni di personalizzazione tramite l’interfaccia, tra cui:
- Visualizzazione del banner limitata a
- utenti autenticati o anonimi
- dispositivo mobile o desktop
- homepage, elenco di topic o tutte le pagine
- Opzioni per chiudere, espandere o mantenere persistente
- Impostazione di larghezza completa del browser
- Gestione dei colori
- Personalizzazione dell’intestazione e delle colonne utilizzando HTML
Personalizzazione dei banner con CSS
Puoi personalizzare tutti i tipi di banner utilizzando il CSS. Per maggiori informazioni sull’uso del CSS per personalizzare il tuo sito Discourse, consulta la Guida per principianti all’uso dei temi Discourse.
Non sono riuscito a trovare questa opzione… È una nuova funzionalità nella versione Beta?
C’è un bug nella build 3.6.0.beta1-dev (e44347414a)
La modifica di questo testo del sito non ha alcun effetto sul testo nella barra di ricerca, che mostra sempre Search. Testato su Windows 10 x64 con Chrome
Sto lavorando a una soluzione qui: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub
Fantastico, grazie, ha funzionato!
Sto riscontrando un problema con la mia immagine di sfondo per il banner di benvenuto.
Sto utilizzando i bucket S3 di Cloudflare R2 per l’archiviazione di oggetti sul sito in questione.
Quando carico un’immagine di sfondo nella sezione admin, viene visualizzata correttamente, se clicco per mostrarla a dimensione intera funziona. E se faccio clic con il pulsante destro del mouse e mostro l’immagine in una nuova scheda funziona e utilizzando l’URL del bucket pubblico:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg
Quello che inietta nel CSS, però, è questo URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg
Ho un altro sito che utilizza l’archiviazione locale e l’immagine di sfondo del banner funziona correttamente.
È un bug nel codice o sto facendo qualcosa di sbagliato?
Dopo aver approfondito un po’ di più, sembra che questo CSS controlli l’immagine di sfondo:
Se sostituisco manualmente l’URL nell’ispettore, funziona.
Ho provato a sovrascriverlo con:
.custom-search-banner-wrap .welcome-banner__wrap {
background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}
Ma non sta funzionando. Sento ancora che sia un bug.
@tknospdr, non capisco bene quale sia il problema che stai riscontrando?
Ho controllato il tuo sito https://eu.technospider.com e vedo che l’immagine di sfondo viene visualizzata come previsto:
Penso di aver finalmente risolto l’override del CSS. Il problema è che non dovrebbe essere necessario un override.
Sembra che il codice del banner stia utilizzando l’asset sbagliato se si utilizza Cloudflare S3.
Qual è esattamente la tua sostituzione?
Da parte nostra, potremmo assicurarci di applicare solo un pathname URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS:
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
Credo che questa regola funzionerebbe per te senza richiedere alcuna sostituzione?
La mia intera sovrascrittura è:
.welcome-banner {
background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
border-radius: 20px;
}
.welcome-banner__title {
font-size: var(--font-up-4);
max-width: 900px;
}
.welcome-banner__subheader {
font-size: 17px;
padding-bottom: 20px;
}
Nell’interfaccia utente, tutto ciò che posso fare è caricare un’immagine, quindi credo che sia necessaria una modifica del codice per poter rimuovere la mia dichiarazione di sovrascrittura CSS.
Sarei felice di provare qualsiasi correzione tu decida di implementare.
Ciao a tutti,
con l’ultimo aggiornamento di Discourse, il componente tema Advanced Search Banner non è più supportato e apparentemente non è più mantenuto. Al suo posto, ora c’è l’estensione ufficiale Welcome Banner.
Il problema è che con il nuovo componente è attualmente possibile selezionare una sola immagine di sfondo. Con il vecchio componente Advanced Search Banner, era possibile definire diverse immagini di sfondo per la modalità Light e la modalità Dark, il che era ovviamente ideale per layout e temi diversi.
La mia domanda alla community:
-
C’è un modo per replicare questa funzionalità nel Welcome Banner?
-
Qualcuno ha già implementato un’estensione o una soluzione alternativa per utilizzare immagini di sfondo diverse per la modalità Light e Dark?
-
È previsto che gli sviluppatori implementino questa funzione in futuro?
Sarei lieto di ricevere suggerimenti, consigli o idee!
Grazie in anticipo!