Aggiungi CSS e JavaScript personalizzato ai tuoi Gruppi di Communities per ottimizzare il branding, il layout e il comportamento interattivo. Questo articolo mostra dove puoi inserire il tuo CSS o JavaScript.

Nota: HITLEAD non fornisce indicazioni, raccomandazioni o supporto per il codice personalizzato (inclusa la scrittura, il debug o la manutenzione).

INDICE DEI CONTENUTI

Cos'è l'aggiunta di CSS/JS personalizzato ai Gruppi?

Aggiungere CSS e JavaScript personalizzato a livello di gruppo ti permette di modificare l'aspetto e il comportamento del tuo gruppo senza alterare altre parti di Communities. Puoi incollare il codice direttamente, testarlo in sicurezza e poi pubblicarlo per i membri con tranquillità.

Vantaggi principali dell'aggiunta di CSS/JS personalizzato

  • Branding preciso: adatta font, spaziature e componenti alle linee guida del tuo brand.
  • Modifiche mirate: applica CSS/JS a un singolo gruppo senza impattare gli altri.
  • Rilascio controllato: usa Test Preview prima di attivare la Live Mode.
  • UX migliorata: arricchisci la navigazione o le micro-interazioni con piccoli snippet JS.
  • Flessibilità mobile: personalizza le regole responsive per smartphone e tablet.

Come aggiungere CSS/JS personalizzato ai Gruppi

Segui questi passaggi per aggiungere codice personalizzato ai tuoi gruppi:

  1. Accedi al tuo sub-account.

  2. Vai su Membership > Communities > Groups.

Schermata 1 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

  1. Accedi al Group che vuoi personalizzare.

Schermata 2 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

  1. Clicca su Settings nel gruppo.

Schermata 3 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

  1. Clicca sulla scheda Branding, scorri fino ad Advanced Options e clicca per espanderla.

Schermata 4 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

  1. Scorri fino ai campi Custom CSS e Custom JavaScript e incolla il tuo codice.

Schermata 5 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

  1. Clicca su Test Preview per verificare le modifiche.

  2. Se sei soddisfatto, attiva Live Mode su On. In caso contrario, apporta le correzioni e testa di nuovo.

  3. Clicca su Save per completare.

Schermata 6 — Communities - Come aggiungere CSS/JS personalizzato ai Gruppi

Domande frequenti

D: Posso disabilitare rapidamente il codice personalizzato per risolvere problemi?

Sì. Disattiva Live Mode.

D: Cosa devo fare se riscontro problemi in una community dopo aver applicato codice personalizzato?

Se si verificano problemi in una community in cui è stato implementato HTML, CSS o JavaScript personalizzato, è importante verificare se il problema è causato dal codice personalizzato. Per farlo, puoi disabilitarlo temporaneamente e vedere se il problema persiste. Aggiungi semplicemente customCode=false alla fine dell'URL della community nella barra degli indirizzi del browser e premi Invio. Questa operazione disattiva il codice personalizzato per la sessione corrente, permettendoti di verificare se il problema si manifesta anche senza le personalizzazioni. Se il problema si risolve con il codice disabilitato, significa che potrebbe essere necessario rivedere il codice personalizzato.

D: Come posso applicare stili diversi per la modalità scura e quella chiara nel mio portale community?

Per applicare stili specifici alla modalità notturna (tema scuro), usa la classe .dark nel tuo CSS. Questa classe viene applicata automaticamente all'elemento root quando la modalità notturna è attiva.

Evita di usare selettori troppo generici come div:nth-of-type(2) a meno che tu non sia assolutamente sicuro che non influiranno su altre parti della pagina. Verifica sempre entrambe le modalità in anteprima per garantire la coerenza visiva.

Articoli correlati

  • Communities - Cambia il tema del tuo gruppo
  • Communities - Newsletter automatiche
  • Communities - Usa Go Live per ospitare riunioni e trasmissioni
  • Gestione dei contenuti in Communities