Personalizzazione del tema del centro assistenza

Disponibile con i piani Suite Growth e superiori Disponibile con tutti i piani Guide

Anteprima: Amministrazione Guide > Personalizza aspetto > 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

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

In Guide, nella barra laterale, fai clic sull’icona Personalizza aspetto ().
Fai clic su Personalizza per il tema da modificare.
Fai clic su Modifica codice.
Nella sezione Modelli, fai clic sul modello o sulla pagina personalizzata da modificare.
La pagina si apre nell’editor di codice.
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.
- Segnaposto di contenuti dinamici, (consulta Aggiunta di testo tradotto)
- Widget incorporabili creati da terzi
- Markup HTML
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.
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.
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:

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

In Guide, fai clic sull’icona Personalizza aspetto () nella barra laterale.
Fai clic su Personalizza per il tema da modificare.
Fai clic su Modifica codice.
Fai clic su script.js per modificare JavaScript o su style.css per modificare CSS.
Il file si apre nell’editor di codice.
Aggiungi o modifica codice JavaScript o CSS nella vista del codice.
Fai clic su Salva in alto a destra per salvare le modifiche.
Le modifiche vengono applicate al tema.
Per visualizzare in anteprima le modifiche, fai clic su Anteprima(consulta Anteprima del tema nel centro assistenza).
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}}