Skip To Content

Brandizzare un sito con opzioni di intestazioni e temi

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:

Per iniziare, accedere a Portal for ArcGIS e fare clic su Siti nella pagina Panoramica per visualizzare un elenco dei siti.

Suggerimento:

È anche possibile modificare un sito quando lo si visualizza in un browser. Accertarsi di aver effettuato l'accesso e cercare il pulsante di modifica sulla 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.

  1. Fare clic su Intestazione nel pannello di personalizzazione.
  2. Fare clic sul 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. Per ulteriori informazioni, vedere l'argomento Intestazioni e piè di pagina personalizzati.
      Nota:

      Per aggiungere un logo, attenersi alla procedura illustrata nella prossima sezione.

  3. 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.

  4. Scegliere un'opzione per Layout: Riquadro o Ampio.
  5. 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.

  6. Modify the CSS box in the side panel and click Apply Changes to see your code in effect.
  7. 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.

  1. Fare clic su Intestazione nel pannello di personalizzazione.
  2. Fare clic per espandere il menu Branding.
  3. Fare clic sul pulsante di selezione Logo per attivarlo.
  4. 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.

  5. Se si sta utilizzando un'intestazione Evidente, è possibile scegliere un'impostazione per Allineamento immagine.
  6. 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.

  7. Fare clic su Salva.

Creare un tema

Creare un tema per il sito scegliendo i colori dell’intestazione, del testo e dei pulsanti.

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.

  1. Per selezionare un colore per una qualsiasi delle seguenti opzioni, immettere un codice colore o scegliere un colore dalla finestra di selezione colori accanto al campo dei codici 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 Aggiungere la prima scheda usando la scheda delle righe.
    • 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.
  2. Once you've set colors, click Apply Changes.
  3. È 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

Le impostazioni predefinite dell’Editor di siti non prevedono un piè di pagina. You must create a custom footer to have a persistent footer across all pages of your site.

  1. Dalla sezione Piè di pagina, selezionare Personalizzato.

    Nella pagina appare un piè di pagina predefinito e viene visualizzata una casella CSS nel pannello laterale.

  2. Fare clic sul pulsante Impostazioni nell’angolo in basso a destra del piè di pagina per modificare l’HTML.
  3. Fare nuovamente clic sul pulsante Impostazioni per visualizzare le modifiche.
  4. Modificare la casella CSS nel pannello laterale e fare clic su Applica modificheper visualizzare gli effetti sull’HTML.
Suggerimento:

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: