Aggiungere testo e immagini

I membri del team principale possono aggiungere immagini e testo a un sito utilizzando le seguenti schede:

• Scheda Riga: sono gli elementi costruttivi del sito. Ogni scheda deve potersi inserire all'interno della scheda di una riga. È possibile aggiungere immagini e colori di sfondo alla scheda della riga. È inoltre possibile creare un effetto di parallasse usando questa scheda.
• Scheda Testo: aggiungere testo in qualunque parte del sito rilasciando questa scheda sulla scheda di una riga. È anche possibile utilizzare questa scheda per aggiungere pulsanti, elenchi, tabelle e un codice personalizzato al sito.
• Scheda Immagine: aggiungere immagini indipendenti a qualunque scheda di riga, ovunque sul sito.

Per iniziare, accedere ad ArcGIS Enterprise e selezionare 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.

Aggiungere e formattare testo

È possibile aggiungere del testo al sito ovunque vi sia la scheda di una riga.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Testo alla riga.
3. Aggiungere il testo.
4. Selezionare il testo da formattare. Le opzioni di formattazione includono lo stile (normale, codice, intestazioni, ecc.), grassetto, corsivo e collegamenti.
5. Per modificare le dimensioni del testo, selezionare il pulsante dello stile e scegliere una dimensione dell'intestazione.
6. Per impostare l'allineamento del testo, selezionare le opzioni del paragrafo e sceglierne una. È anche possibile spostare una riga di testo scegliendo l'opzione paragrafo e selezionando aumenta o diminuisci rientro.

   Suggerimento:

   In caso di errore, premere Comando+Z o Ctrl+Z sulla tastiera per annullare le modifiche.

7. Selezionare Salva.

Nota:

La dimensione del font del testo di base è stata aumentata in tutti i siti e pagine nel 2021/2022 per migliorare la leggibilità e rendere i contenuti Web accessibili a persone diversamente abili.Leggere il post Domande frequenti: prossimi cambiamenti alla dimensione font di base e unità rem in ArcGIS Enterprise Sites per maggiori dettagli.

Cambiare il colore del testo

Per applicare lo stesso colore a tutto il testo del sito, modificare il colore del testo utilizzando le impostazioni Tema del sito. In alternativa, è possibile regolare il colore del testo utilizzando le impostazioni di riga.

1. Aprire un sito o una pagina in modalità di modifica.
2. Per impostare un colore per tutto il testo sul sito o la pagina, aprire il pannello laterale ed espandere il menu Tema. Per maggiori informazioni sui temi, vedere Imposta il marchio di un sito con intestazione e opzioni di tema.
3. Per impostare un colore per una riga specifica, selezionare la matita di modifica per la riga.
4. Modificare il colore immettendo un codice esadecimale o scegliendo un colore dal selettore.

   Suggerimento:

   I codici esadecimali sono utili per garantire uniformità nel branding delle risorse dell'organizzazione. Se non si è sicuri delle specifiche di branding dell'organizzazione, verificare se sono disponibili documenti o linee guida del brand.

5. Selezionare Salva.

Cambia caratteri

È possibile cambiare il carattere delle intestazioni di testo e del testo di base usando Google Fonts. Il testo di base include tutto il testo presente sul layout del sito. Questo carattere è anche applicato a tutte le pagine che sono state aggiunte al tuo sito e alle pagine di anteprima del contenuto a cui si accede attraverso la ricerca del sito.

Per maggiori informazioni, consultare Formattazione del testo su ArcGIS Hub e ArcGIS Enterprise Sites.

Aggiungere un elenco puntato o numerato

Creare un elenco attenendosi alla procedura seguente.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Testo a un sito o layout di pagina.
3. Aggiungere il testo o selezionare un testo esistente.
4. Selezionare Elenco non ordinato per creare un elenco puntato o Elenco ordinato per creare un elenco numerato.
5. Selezionare Salva.

Creare un menu di controllo a soffietto

Aggiungere un menu comprimibile, un'opzione utile per aggiungere domande frequenti.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Testo al layout.
3. Selezionare il pulsante Inserisci e scegliere Comando a soffietto.
4. Aggiungere e formattare testo.
5. Selezionare Salva.

Componenti Calcite supportati

La scheda Testo supporta i seguenti componenti di Calcite Design System. Visualizzare un catalogo di tutti i componenti Calcite che include descrizioni, usi ottimali, esempi e altro.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Aggiungere un'immagine indipendente

Aggiungere immagini caricandole da un file o fornendo un URL per un'immagine ospitata. Le immagini condivise internamente possono essere visualizzate solo dagli utenti che effettuano l'accesso e appartengono al team principale o all'organizzazione.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Immagine in una riga esistente.
3. Scegliere un’origine immagine nell'Editor layout. È possibile fornire un URL immagine o caricare un file immagine. Entrambe le opzioni supportano JPG, JPEG e PNG.
   • Per fornire un URL, scegliere URL immagine e incollare un link supportato a un'immagine nel campo URL.
   • Per caricare un file, scegliere Carica immagine e trascinare un file sulla casella, oppure selezionare Cerca immagine per localizzare e aggiungere il file. La dimensione massima per i file è 3 MB.
4. Per personalizzare un'immagine caricata, selezionare il pulsante Ritaglia immagine e trascinare la maniglia per ridimensionare la cornice di ritaglio. Per riposizionare la cornice di ritaglio, selezionare e trascinare la linea tratteggiata. Per regolare lo zoom, utilizzare il cursore sotto l'immagine e riposizionare ulteriormente l'immagine selezionando all'interno della cornice di ritaglio.
5. Dal menu Opzioni, fornire il testo alternativo dell'immagine per aiutare gli utenti non vedenti e migliorare l'accessibilità del sito.
6. Fornire un collegamento ipertestuale di immagine e impostare il collegamento da aprire nella stessa scheda o in una nuova scheda.

   Nota:

   Le linee guida sull'accessibilità (in Input 3.2.2 e tecnica G201) consigliano di evitare di aprire link in nuove schede o finestre a meno che non si fornisca un avviso in anticipo.

7. Fornire testo per Didascalia immagine e scegliere l'allineamento del testo.
8. Facoltativamente, selezionare Regola immagine per riempimento per impostare un punto focale per l'immagine. Il punto focale garantisce che l'immagine rimanga focalizzata dove lo si desidera quando viene ridimensionata per schermi diversi.
9. Selezionare Salva.

Creare un pulsante

Un pulsante con un collegamento a un altro luogo, come una sezione o una pagina, è un utile strumento di navigazione. I pulsanti possono includere anche chiamate all'azione.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Testo al layout.
3. Selezionare il pulsante Inserisci e scegliere Pulsante.
4. Modificare il testo sul pulsante per includere la chiamata all'azione.
5. Selezionare il pulsante appena aggiunto e selezionare il pulsante del link.
6. Nella casella di testo Testo da mostrare, aggiungere testo se tale operazione non è ancora stata eseguita.
7. Nella casella di testo URL, incollare il link al quale si vuole reindirizzare gli utenti quando selezionano il pulsante.
8. Selezionare Inserisci link per confermare le modifiche.
9. Selezionare Salva.
Per informazioni sui colori del pulsante, vedere Crea un tema.

Aggiungere immagini e colore di sfondo

È possibile aggiungere immagini dietro ad altre schede usando la scheda Riga.

Suggerimento:

Se si sta visualizzando del testo o del contenuto al di sopra di un'immagine, scegliere un colore di sfondo contrastante. Ad esempio, se si sta utilizzando del testo di colore chiaro o visualizzando una mappa di colore chiaro, scegliere un colore di sfondo scuro, come il nero, per accertarsi che il testo resti chiaro. Quindi, regolare la trasparenza del colore in modo che l'immagine resti visibile.

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Riga al layout e formato in Aspetto.
3. In Immagine di sfondo, scegliere un'origine di immagine. È possibile fornire un URL immagine o caricare un file immagine. Entrambe le opzioni supportano JPG, JPEG e PNG.
   • Per fornire un URL, scegliere URL immagine e incollare un link supportato a un'immagine nel campo URL.
   • Per caricare un file, scegliere Carica immagine e trascinare un file sulla casella, oppure selezionare Cerca immagine per localizzare e aggiungere il file. La dimensione massima per i file è 3 MB.
4. Dopo aver aggiunto un'immagine, selezionare un Colore di sfondo immettendo un codice esadecimale o utilizzando il selettore di colori.

   Nota:

   Solo le schede delle righe supportano i colori di sfondo.

5. Per regolare la Trasparenza immagine, utilizzare il cursore o immettere un valore nel campo percentuale. In tal modo, il colore di sfondo sarà più luminoso o tenue a seconda dell'impostazione. Ciò è utile per garantire che l'immagine e il testo rimangano accessibili per gli utenti ipovedenti.
6. Selezionare Salva.

Scegliere il layout di un'immagine sulla scheda di una riga

Ogni scheda delle righe dispone di due opzioni di layout che consentono di selezionare la modalità di visualizzazione dell'immagine.

1. Dopo aver aggiunto un'immagine alla scheda di una riga, è possibile scegliere un layout ampio o fisso per l'immagine e per qualunque contenuto visualizzato sulla scheda.
   • Scegliere Casella se si desidera che l'immagine rimanga fissa.
   • Scegliere Ampio se si desidera che l'immagine occupi l'ampiezza del sito.
2. Impostare il Punto focale immagine per garantire che l'immagine rimanga focalizzata dove necessario quando viene ridimensionata per i diversi schermi.
3. Selezionare Salva.

Configurare testo con HTML

Se si desidera usare HTML per personalizzare il testo, è possibile usare i seguenti elementi HTML:

1. Aprire un sito o una pagina in modalità di modifica.
2. Aggiungere una scheda Testo nel layout e selezionare </> Modifica in HTML.
3. Immettere il codice e selezionare Salva.

Attenzione:

Per ragioni di sicurezza, le schede di Testo non supportano JavaScript integrati. I tag dello script saranno ignorati.

Sono consentiti i seguenti elementi HTML:

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

Per questi elementi, sono consentiti i seguenti attributi:

 All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
	'button' : ['name', 'value', 'data-toggle', 'data-target',
	'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
	'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
	'width'],
 'ol' : ['align', 'start', 'type'],
	'p' : ['style'},
 'q' : ['cite'],
	'source' : ['media', 'src', 'type'], 
	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
	'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']