Brandizzare il sito con il logo e i colori dell'organizzazione rende i contenuti più attendibili e autorevoli. In questo modo, il sito risulterà anche più in armonia con gli altri contenuti Web dell'organizzazione. Questo argomento descrive come gli amministratori e i membri del team principale possono realizzare quanto segue:
- Scegliere un'intestazione e un titolo per un sito.
- Aggiungere un logo all'intestazione di un sito.
- Cambiare il colore per l'intestazione, i pulsanti, il testo e lo sfondo del sito.
Per iniziare, accedere a Portal for ArcGIS e fare clic su Siti nella pagina Panoramica per visualizzare un elenco dei siti.
Suggerimento:
È inoltre possibile modificare un sito mentre lo si visualizza in un browser. Assicurarsi di aver effettuato l'accesso e cercare il pulsante di modifica nella parte sinistra del sito.
Scegliere uno stile di intestazione
L'intestazione del sito è la sezione in cui si può brandizzare il sito con un logo, creare un percorso di navigazione ad altre risorse con collegamenti del menu e collegarsi agli account dei social media.
- Aprire un sito in modalità di modifica.
- Aprire il pannello laterale cliccando l'attivatore
. Se necessario, cliccando la freccia indietro accanto a Personalizza in cima al pannello per ritornare al menu di radice fino a che non si visualizza l'opzione per cliccare Intestazione. - Sotto Intestazione cliccare il menu Aspetto per scegliere uno stile per l'intestazione. Sono disponibili le tre opzioni seguenti:
- Standard: l'impostazione predefinita per ogni sito nuovo; questo design presenta una barra compatta e sottile con uno spazio per un logo (60 pixel), social media e collegamenti al menu.
- Evidente: questo design fornisce più spazio per loghi più grandi (120 pixel) e altro collegamenti al menu.
- Personalizzato CSS/HTML: usare un editor di codice abilitato per la sintassi per configurare un'intestazione con un codice personalizzato.
Nota:
Per aggiungere un logo, attenersi alla procedura illustrata nella prossima sezione.
- Fare clic sul menu Branding. Tutti i campi forniti nel menu sono opzionali.
- Nome: immettere un nome che apparirà nell'intestazione del sito. Il nome fornito in questo campo è visibile solo nell'intestazione e non verrà riportato nell'URL del sito o sull'elenco di siti.
- Nome breve: immettere una versione abbreviata di quello aggiunto all'intestazione. Questo nome apparirà solo se il nome originale dell'intestazione è troppo lungo quando viene visualizzato su schermi più piccoli (ad esempio, un telefono mobile).
Suggerimento:
Le persone utilizzano sempre di più i dispositivi mobili per accedere a Internet. Si consiglia di aggiungere un nome breve per garantire la qualità del sito su qualunque dispositivo.
- Scegliere un'opzione per Layout: Riquadro o Ampio.
- If you want to brand the header of your site with custom HTML or CSS, choose Use custom HTML/CSS.
Nota:
L’HTML dell’intestazione non supporta JavaScript integrati. I tag dello script saranno ignorati.
- Modify the CSS box in the side panel and click Apply Changes to see your code in effect.
- Fare clic su Salva.
Aggiungere un logo a un'intestazione
La dimensione e il posizionamento del logo del sito dipendono dallo stile di intestazione prescelto.
- Cliccare per espandere il menu Branding sotto Intestazione sul pannello laterale.
- Fare clic sul pulsante di selezione Logo per attivarlo.
- Aggiungere un'immagine scegliendo URL immagine o caricando un'immagine da un file.
Suggerimento:
Se si sta caricando un'immagine da un file, si ottengono migliori risultati con un'immagine salvata come file PNG. È possibile ritagliare e applicare lo zoom all'immagine nella sezione Impostazioni immagine della scheda nel riquadro Personalizza. - Se si sta utilizzando un'intestazione Evidente, è possibile scegliere un'impostazione per Allineamento immagine.
- Per Testo alternativo Logo, fornire del testo per rispettare gli standard di accessibilità.
Suggerimento:
Se su un logo è presente del testo, il testo alternativo può essere il nome dell'azienda. Se il logo è il design di un logomark, lo si può considerare decorativo e digitare “” per il testo alternativo. - Fare clic su Salva.
Aggiungere icone social media
Aggiungere icone social media a un'intestazione.
- Cliccare per espandere il menu Branding sotto Intestazione sul pannello laterale.
- Cliccare il menu Icone Social.
- Cliccare sulla levetta per aggiungere un'icona di social media per Facebook, Twitter, Instagram o YouTube.
- Fornire un URL per l'account della piattaforma.
- Fare clic su Salva.
Creare un tema
Stabilire un tema per il sito scegliendo i colori per l'intestazione, il testo e i pulsanti del sito. I colori scelti nel menu Tema del sito sono applicati alla totalità del sito. È possibile sovrascrivere queste selezioni configurando i colori per righe specifiche. Per maggiori informazioni, consultare Colori e Font.
Suggerimento:
Prima di scegliere un colore, consultare le linee guida di branding dell'organizzazione. Molte linee guida di branding forniscono codici colore precisi per contenuti quali siti Web e loghi. Se non si dispone di linee guida di branding, consultare il team o le parti interessate per verificare che il tema del sito rispecchi correttamente l'organizzazione.
- Aprire un sito in modalità di modifica.
- Aprire il pannello laterale cliccando l'attivatore . Se necessario, cliccando la freccia indietro accanto a Personalizza in cima al pannello per ritornare al menu di radice fino a che non si visualizza l'opzione per cliccare Tema.
- Per selezionare un colore per una delle seguenti opzioni, inserire un codice colore con valore esadecimale o scegli un colore dal selezionatore di colori accanto al campo del codice colore.
- Colore di sfondo di Global Nav applica il colore alla barra di navigazione globale del sito.
- Colore del testo di Global Nav applica il colore alla barra di navigazione globale del testo.
Nota:
Per maggiori informazioni sulla navigazione globale, consultare Cos'è la navigazione globale?
- Colore sfondo intestazione applica il colore all'intestazione del sito.
- Colore testo intestazione applica il colore a tutto il testo dell'intestazione.
- Colore sfondo corpo applica il colore alle righe del sito. È possibile configurare il colore delle righe e il colore del testo per ciascuna riga attenendosi alla procedura descritta in Colore e font.
- Colore testo corpo si applica al testo di tutto il sito.
- Colore collegamenti corpo applica il colore a qualunque collegamento fornito sul sito.
- Colore sfondo pulsante applica il colore ai pulsanti forniti sul sito.
- Colore testo pulsante si applica al testo di qualunque pulsante fornito sul sito.
- Once you've set colors, click Apply Changes.
- È anche possibile applicare tipi di carattere al testo dell'intestazione e al corpo del sito.
- Per scegliere un carattere per il corpo del sito, fare clic sul pulsante delle impostazioni Carattere di base.
- Per cambiare il carattere dell'intestazione del sito, fare clic sul pulsante delle impostazioni Carattere intestazione.
Nota:
To start over or return to default colors, choose Reset to Defaults at the bottom of the Theme menu.
Creare un piè di pagina
È possibile usare l'HTML personalizzato per aggiungere un piè di pagina al tuo sito che è persistente in tutte le pagine collegate al tuo sito.
- Espandere il menu Piè di pagina sul pannello laterale.
- Cliccare il selettore accanto a Personalizza.
- Modificare la casella CSS e HTML nel pannello laterale e cliccare Applica Modifiche per vedere gli effetti sull'HTML.
Nota:
L’HTML del piè di pagina non supporta JavaScript integrati. I tag dello script saranno ignorati.
Passaggi successivi
Per configurare il sito in modo che sia più brandizzato, è possibile attenersi a quanto segue:
- Aggiungere collegamenti ai menu e verificare che la navigazione globale sia abilitata. Per maggiori informazioni, consultare Configurare i collegamenti ai menu e la navigazione globale.
- Ogni sito include un URL (indirizzo Web). Se l'organizzazione ha un dominio personalizzato, è possibile configurare tale URL per brandizzare ulteriormente il sito. Per maggiori informazioni, vedere Configura un URL personalizzato.