What's my plan?
Suite Growth, Professional, Enterprise, or Enterprise Plus
Support with Guide Professional or Enterprise

Riepilogo AI verificato ◀▼

Personalizza il tema del centro assistenza modificando HTML, CSS e JavaScript per creare stili e layout di pagina univoci. Usa Curlybars per gestire contenuti dinamici e variabili, assicurando l'uniformità degli elementi di design. Tieni presente che i temi personalizzati non riceveranno aggiornamenti. Esplora Zendesk Marketplace per trovare altri temi, se necessario. Questa flessibilità consente di personalizzare l'aspetto e le funzionalità del centro assistenza in base alle proprie esigenze.

Posizione: Amministratore Knowledge > Personalizza design () > Personalizza > Modifica codice

Gli amministratori Guide esperti nella progettazione di siti Web possono lavorare direttamente con il codice delle pagine per creare un tema personalizzato per il centro assistenza. I temi personalizzati possono includere:

  • Modelli modificabili che definiscono il layout di ogni pagina (ad esempio, pagina articolo, pagina categoria o pagina argomento della community)
  • Pagine personalizzate che crei da zero e che inserisci ovunque nel centro assistenza
  • Intestazione e piè di pagina globali per il centro assistenza

Puoi anche usare un linguaggio di creazione di modelli completo denominato Curlybars per accedere ai dati del centro assistenza e manipolare il contenuto nei modelli di pagina e nelle pagine personalizzate. Puoi inoltre usare i file JavaScript e CSS inclusi nel tuo tema per apportare modifiche all’aspetto e al comportamento del tema in tutto il sito. Se stai pensando di usare il tuo codice HTML per modificare il tema del centro assistenza, leggi Modifica del codice sorgente degli articoli del centro assistenza.

Quando modifichi il codice di un tema (ad esempio, i suoi modelli, JavaScript o CSS), l’anteprima del tema visualizza l’icona </>, che indica che il codice del tema è stato modificato e che non riceverà più nuove funzionalità e aggiornamenti.

Suggerimento: se hai bisogno di aiuto con il branding e la personalizzazione del centro assistenza, puoi visitare Zendesk Marketplace per acquistare nuovi temi creati da Zendesk e da sviluppatori di terzi.
Nota: agli utenti che beneficiano di un periodo di prova viene offerto il piano Professional, che include opzioni di modifica del codice. Tuttavia, non potranno più accedere a tale funzionalità se acquistano Suite Team.

Questo articolo tratta i seguenti argomenti:

  • Personalizzazione di modelli di pagina con HTML e Curlybars
  • Personalizzazione di CSS o JavaScript
  • Uso di variabili in CSS e HTML

Articoli correlati:

  • Branding del tuo centro assistenza
  • Limiti dei temi Guide
  • Guida dei modelli del centro assistenza
  • Creazione di pagine personalizzate nel centro assistenza
  • Aggiunta di più modelli di categorie, articoli e sezioni al tuo tema

Personalizzazione di modelli di pagina e di pagine personalizzate con HTML e Curlybars

Il codice HTML per il centro assistenza è contenuto in modelli modificabili che definiscono il layout dei tipi di pagina, le pagine personalizzate e un’intestazione e un piè di pagina globali. Puoi anche usare un linguaggio di creazione di modelli completo denominato Curlybars per creare o manipolare contenuto per questi elementi.

Nota: con i piani Enterprise, puoi creare pagine personalizzate e modelli di pagina supplementari per articoli, sezioni e categorie, se hai bisogno di più versioni di tali modelli.

Puoi personalizzare il modello di uno qualsiasi dei seguenti elementi o tipi di pagina, oppure creare pagine personalizzate.

  • Pagine personalizzate (custom_page.hbs): pagine personalizzate che puoi creare da zero e per le quali è possibile creare link ovunque nel centro assistenza
  • Pagina articolo (article_page.hbs): le pagine dei singoli articoli nella Knowledge base
  • Pagina categoria (category_page.hbs): pagine di destinazione
  • Pagina di elenco post della community (community_post_list_page.hbs)
  • Pagina post della community (community_post_page.hbs)
  • Pagina di elenco argomenti della community (community_topic_list_page.hbs)
  • Pagina argomento della community (community_topic_page.hbs)
  • Pagina contributi (pagina_contributi.hbs): elenchi di post, commenti della community e commenti sugli articoli di un utente finale
  • Intestazione documento (document_head.hbs): il tag head del documento
  • Pagina errore (error_page.hbs): il messaggio visualizzato quando un utente tenta di accedere a una pagina che non esiste
  • Piè di pagina (footer.hbs): le barre visualizzate nella parte inferiore di tutte le pagine del centro assistenza
  • Intestazione (header.hbs): le barre che appaiono in alto in tutte le pagine del centro assistenza
  • Home page (home_page.hbs): la pagina di destinazione di livello superiore del centro assistenza
  • Pagina nuovo post della community (new_community_post_page.hbs)
  • Pagina nuova richiesta (new_request_page.hbs): il modulo di invio della richiesta o del ticket
  • Pagina richiesta (request_page.hbs): le pagine di ogni richiesta o ticket
  • Pagina delle richieste (request_page.hbs): gli elenchi di richieste o ticket che un utente ha ricevuto in CC o che gli sono stati assegnati
  • Risultati ricerca (search_results.hbs): il formato di visualizzazione dei risultati della ricerca
  • Pagina sezione (section_page.hbs): pagine di destinazione
  • Pagina segui (subscriptions_page.hbs): l’elenco di categorie, sezioni e articoli che un utente sta seguendo
  • Pagina del profilo utente (user_profile_page.hbs)
Nota: quando usi l’editor dei temi per modificare modelli di pagina, CSS o JavaScript per un tema standard o quando sviluppi il tuo tema, viene salvato come tema personalizzato. I temi personalizzati non sono supportati da Zendesk e non vengono aggiornati automaticamente quando vengono rilasciate nuove funzionalità (consulta Informazioni su temi standard e personalizzati nel centro assistenza).

Per modificare i modelli di pagina

  1. In Amministratore Knowledge, fai clic su Personalizza design () nella barra laterale.
  2. Fai clic su Personalizza per il tema da modificare.
  3. Fai clic su Modifica codice.

  4. Nella sezione Modelli, fai clic sul modello o sulla pagina personalizzata da modificare.

    La pagina si apre nell’editor di codice.

  5. Usa la vista del codice per modificare il modello o la pagina.

    Puoi aggiungere, rimuovere o riordinare quanto segue:

    • Espressioni di modello per visualizzare e manipolare il contenuto delle tue pagine

      Ad esempio, l’helper dei modello del percorso di navigazione {{breadcrumbs}} visualizza un elemento del percorso di navigazione in una pagina. Per una guida dettagliata sulle espressioni di modello, consulta Modelli del centro assistenza.

    • Segnaposti di contenuto dinamico (consulta Localizzazione dei contenuti del centro assistenza)
    • Widget incorporabili creati da terzi
    • Markup HTML
  6. Fai clic su Salva nell’angolo in alto a destra per salvare le modifiche.

    Se hai modificato un modello, le modifiche vengono applicate a tutte le pagine del tema basate sul modello modificato.

  7. Per visualizzare in anteprima le modifiche, fai clic su Anteprima. Visualizza Anteprima del tema nel centro assistenza.

    Nota: durante l'anteprima di un tema, è possibile che non tutte le funzioni siano attive. La funzionalità di anteprima ha lo scopo di mostrare le modifiche apportate all’aspetto, ma non è concepita per il test end-to-end della funzionalità dei temi interattivi. Ti consigliamo di usare una sandbox per i test end-to-end.

  8. Apporta altre modifiche al codice come necessario, quindi fai clic su Salva.

    Dopo avere implementato tutte le modifiche necessarie al modello di pagina o alla pagina personalizzata, puoi chiudere.

Suggerimento: leggi questo post del blog Zendesk per ulteriori idee sui modelli degli articoli della Knowledge base.

Personalizzazione di CSS o JavaScript

Puoi aggiungere codice JavaScript o personalizzare il codice CSS del sito. Per avere un’idea di ciò che puoi fare nel centro assistenza con un po’ di codice, dai un’occhiata alle seguenti risorse:

  • Suggerimenti della community per il centro assistenza
  • Guida CSS per il centro assistenza
  • Guida JavaScript per il centro assistenza
Nota: quando usi l’editor dei temi per modificare modelli di pagina, CSS o JavaScript per un tema standard o quando sviluppi il tuo tema, viene salvato come tema personalizzato. I temi personalizzati non sono supportati da Zendesk e non vengono aggiornati automaticamente quando vengono rilasciate nuove funzionalità. Consulta Informazioni su temi standard e personalizzati nel centro assistenza.

Per personalizzare codice CSS o JavaScript

  1. In Amministratore Knowledge, fai clic su Personalizza design () nella barra laterale.
  2. Fai clic su Personalizza per il tema da modificare.
  3. Fai clic su Modifica codice.

  4. Fai clic su script.js per modificare JavaScript o su style.css per modificare CSS.

    Il file si apre nell’editor di codice.

  5. Aggiungi o modifica codice JavaScript o CSS nella vista del codice.
  6. Fai clic su Salva in alto a destra per salvare le modifiche.

    Le modifiche vengono applicate al tema.

  7. Per visualizzare in anteprima le modifiche, fai clic su Anteprima(consulta Anteprima del tema nel centro assistenza).

  8. Apporta altre modifiche al codice come necessario, quindi fai clic su Salva.

    Al termine, puoi chiudere il file.

Uso di variabili in CSS e HTML

Le proprietà che scegli nel pannello Impostazioni o imposti nel file manifest per colori, caratteri e immagini dei temi sono memorizzate in variabili. Puoi usare queste variabili nel file style.css del tema. Puoi anche fare riferimento alle variabili usando espressioni Curlybars nei modelli di pagina HTML.

Le variabili sono utili se intendi specificare lo stesso valore in più punti e aggiornarlo rapidamente. Se aggiorni la proprietà, l’aggiornamento viene esteso a tutte le occorrenze della variabile. Il tema Copenhagen predefinito include alcune variabili per colori e caratteri. Puoi cambiare nomi ed etichette, eliminare variabili o aggiungerne di nuove (consulta Informazioni di riferimento sul manifest del pannello Impostazioni).

Per impostazione predefinita, nel tema Copenhagen standard sono presenti le seguenti variabili:

  • brand_color è il colore del brand per i principali elementi di navigazione
  • brand_text_color è il colore del brand al passaggio del cursore del mouse e per gli stati attivi
  • text_color è il colore del testo per il corpo e le intestazioni
  • link_color è il colore del testo per gli elementi di link
  • background_color è il colore di sfondo del centro assistenza
  • heading_font è il carattere delle intestazioni
  • text_font è il carattere del corpo del testo
  • logo è il logo dell’azienda
  • favicon è l’icona visualizzata nella barra dell’indirizzo del browser
  • homepage_background_image è la hero image della home page
  • community_background_image è la hero image della pagina degli argomenti della community
  • community_image è l’immagine per la sezione community della home page
Per usare le variabili in CSS e HTML, consulta:
  • Esempi d’uso di variabili in CSS
  • Esempi d’uso di variabili in Curlybars in HTML

Esempi d’uso di variabili in CSS

Le proprietà che imposti per colori, caratteri e immagini dei temi sono memorizzate in variabili che puoi usare nel file style.css del tema.

Ad esempio, puoi usare alcune delle variabili predefinite in CSS con la seguente sintassi:

  • $brand_color
  • $brand_tex_color
  • $heading_font
  • $text_font

Nel file CSS, assegni una variabile a una proprietà CSS nello stesso modo in cui assegni un valore normale. Ad esempio:

.button {
  label-color: $text_font;
}

Puoi anche usare singole parentesi graffe per incorporare l’helper in un’espressione CSS, nel modo seguente:

max-width: #{$search_width}px

Esempi d’uso di variabili in Curlybar in HTML

Le proprietà che imposti per colori, caratteri e immagini dei temi sono memorizzate in variabili a cui puoi fare riferimento con espressioni Curlybars nei modelli di pagina HTML.

Le variabili diventano proprietà dell’oggetto settings in Curlybars. Come con qualsiasi oggetto Curlybars, puoi usare parentesi graffe doppie e la notazione col punto per inserire una proprietà in un modello di pagina.

Ad esempio:

  • {{settings.color_1}} è il valore esadecimale di un colore. Ad esempio: #FF00FF
  • {{{settings.font_1}} è lo stack dei caratteri. Ad esempio, il sistema è definito come: '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
  • {{settings.homepage_background_image}} è il percorso del file memorizzato in questo campo. Ad esempio: p8.zdassets.com/theme_assets/...
  • {{settings.range_input}} è il valore dell’input di intervallo.

L’oggetto settings può essere usato come input per qualsiasi helper. Ad esempio:

{{is settings.enabled}} ... {{/is}}
Powered by Zendesk