Visualizza le immagini sul tuo sito e aggiungi animazioni, didascalie e link.

Usa i blocchi immagine per aggiungere immagini alle pagine o ai post del blog. Ciascun blocco immagine contiene un'immagine.

Guarda un video

Aggiungere un'immagine

Per aggiungere un Blocco immagine:

1. Modifica una pagina o un post, clicca su Aggiungi blocco o su un punto di inserimento, quindi clicca su Immagine. Per assistenza, visita Aggiungere contenuti con blocchi.
2. Clicca sull'icona + nel blocco immagine.
3. Carica un file dal tuo computer o dispositivo mobile, riutilizza un'immagine della tua galleria o sfoglia le immagini di archivio. Per risultati ottimali, utilizza un'immagine di dimensioni inferiori a 500 KB.
4. Utilizza l'editor di blocchi immagine per sostituire, eliminare o modificare l'immagine.
5. Se utilizzi Editor fluido, assicurati di impostare anche il layout mobile.

Suggerimento: per visualizzare il blocco immagine sul sito pubblicato, dovrai caricare un'immagine.

Caricare immagini da un dispositivo mobile

Puoi aggiungere immagini dal tuo telefono o da un altro dispositivo mobile utilizzando l'app Squarespace.Per caricare un'immagine:

1. Nell'editor del blocco immagine, fai clic su +, quindi scegli Carica da dispositivo mobile. Così facendo viene inviata una notifica push al dispositivo.
   • Se è la prima volta che carichi contenuti su questo sito, sul tuo computer verrà visualizzato un codice QR. Se non hai già l'app Squarespace, scansiona il codice per scaricarlo, quindi fai clic su Continua e Invia notifica push.
2. Tocca la notifica sul tuo dispositivo per aprire lo strumento di importazione dell'app Squarespace. Questa preleva automaticamente le immagini dalla libreria di foto del tuo dispositivo.
   • Se la notifica non viene visualizzata, controlla le impostazioni del tuo dispositivo per assicurarti che le notifiche push dall'app Squarespace siano abilitate.
3. Tocca l'immagine che vuoi utilizzare, quindi tocca Carica.
4. L'immagine verrà visualizzata nel blocco immagine sul computer. Dall'app Squarespace, tocca Sostituisci per scegliere un'immagine diversa oppure tocca Fine per chiudere lo strumento di caricamento.

Suggerimento: quando carichi immagini da dispositivi mobili, fai clic su Risoluzione problemi nella finestra pop-up visualizzata sul computer per eseguire una nuova scansione del codice QR che scarica l'app Squarespace, oppure trova l'opzione per inviare nuovamente la notifica push.

Apri l'editor di blocchi immagine

Con l'editor dei blocchi immagine puoi:

• Sostituire, eliminare o modificare l'immagine
• Impostare il punto focale
• Impostare le opzioni di design
• Aggiungere testo alt
• Modificare il nome del file
• Attivare o disattivare la funzione lightbox
• Aggiungere effetti all'immagine

Per aprire l'editor dei blocchi immagine:

1. Modifica la pagina o il post.
2. Clicca sul Blocco immagine.
3. Clicca sull'icona della matita nella barra degli strumenti del blocco.

Aggiungere un link a un'immagine

Per trasformare l'immagine in un link, clicca sul blocco per evidenziarlo e quindi clicca sull'icona del link nella barra degli strumenti del blocco, oppure clicca su Allega link nell'editor dei blocchi. Per la maggior parte dei layout dell'editor classico, è necessario selezionare Su immagine o Su pulsante prima che appaia Allega link. Al termine, clicca fuori dall'editor di blocchi per salvare le modifiche.

Tieni presente che l'attivazione di una lightbox disabilita gli URL di click-through al sito

Layout editor classico

I blocchi immagine aggiunti alle sezioni di Editor fluido non dispongono di opzioni di layout integrate. Crea layout simili sovrapponendo blocchi immagine con altri blocchi, come blocchi di testo e blocchi pulsante.

Quando aggiungi un Blocco immagine nell'editor classico, questo utilizza il layout In linea per impostazione predefinita. Per modificare il layout, clicca sulla scheda Design, quindi scegli il layout desiderato tra i seguenti:

• In linea - Il Blocco immagine di base, con sottotitoli opzionali sotto o sovrapposti all'immagine. Imposta la modalità di visualizzazione della didascalia nella scheda Contenuto.
• Poster - Visualizza il testo sulle immagini, creando l'effetto di un banner o di un poster.
• Carta - Visualizza immagini con testo a sinistra o a destra. Di solito, il testo si sposta sotto le immagini nei browser più piccoli e nei dispositivi mobili o quando i Blocchi immagine vengono utilizzati in colonne.
• Sovrapposto - Visualizza immagini su un lato e il testo sull'altro, parzialmente sovrapposto all'immagine. Aggiungi un colore di sfondo per evidenziare il titolo. Di solito, il testo si sposta sotto le immagini nei browser più piccoli e nei dispositivi mobili o quando i Blocchi immagine vengono utilizzati in colonne.
• Collage - Visualizza le immagini su un lato e il testo su "carte" di sfondo sull'altro, parzialmente sovrapposto all'immagine. Di solito, il testo si sposta sotto le immagini nei browser più piccoli e nei dispositivi mobili o quando i Blocchi immagine vengono utilizzati in colonne.
• Stack - Visualizza le immagini con il testo sottostante.

Mentre selezioni un layout, vedrai un'anteprima della pagina. Per verificare la visualizzazione del Blocco immagine sui dispositivi mobili, usa Vista dispositivo.

Modifica rapidamente il layout e l'allineamento del testo

Nell'editor classico, puoi modificare il layout e l'allineamento del testo di un blocco immagine senza aprire l'editor utilizzando i pulsanti di azione rapida. Clicca sul blocco immagine mentre modifichi la pagina e poi clicca sui pulsanti di layout o allineamento che appaiono tra le icone della matita e del cestino.

Imposta la forma dell'immagine

Oltre a ritagliare e ridimensionare, puoi modellare i blocchi immagine per aggiungere varietà e conferire un effetto visivo unico alle tue immagini. Imposta la forma dell'immagine nella scheda Progettazione dell'editor di blocchi immagine:

• Raggio dell'angolo: per un effetto leggero, arrotonda gli angoli dell'immagine.
• Forma: per una modifica più drastica, imposta una forma, ad esempio un cerchio o un triangolo.La forma appare sopra l'immagine, come una maschera.

Suggerimento: se il tuo sito supporta Editor fluido, puoi utilizzare i blocchi di forma per aggiungere forme a tinta unita alle tue pagine senza immagini.

Raggio d'angolo

Nella scheda Progettazione, utilizza le opzioni Raggio dell'angolo per impostare il raggio per l'intera immagine o per i singoli angoli.

Ricorda:

• Per rimuovere il raggio d'angolo, annulla le modifiche o inserisci 0 nei campi del raggio d'angolo.
• Se le opzioni del raggio d'angolo non vengono visualizzate nella scheda Progettazione, assicurati di non aver selezionato Forma.

Forma

Nella scheda Progettazione, clicca su Forma, scegli il rapporto dimensionale (1:1, 2:3 o 3:2), quindi scegli la forma. Per eliminare la forma, seleziona un'altra opzione nella scheda Progettazione (Adatta/Riempi o Originale).

Ricorda:

• Usa il punto focale per personalizzare l'aspetto dell'immagine nella forma
• Se imposti l'apertura delle immagini in una lightbox, la forma originale dell'immagine viene visualizzata dopo che i visitatori cliccano su quest'ultima
• Se scegli la forma del cerchio ma l'immagine appare come un ovale, usa il nostro editor di immagini integrato per ritagliare l'immagine con rapporto dimensionale 1:1

Ridimensiona l'immagine

È possibile ridimensionare o ritagliare i blocchi immagine in diversi modi. Il modo principale per ridimensionare un'immagine è:

• Editor fluido: clicca e trascina dagli angoli o dai lati e utilizza l'opzione Riempimento nella scheda progettazione per ritagliare e modellare
• Editor classico: ridimensiona con blocchi

Per tutti i blocchi immagine, puoi anche utilizzare l'editor di immagini per ritagliare l'immagine originale. Tieni presente che questa modifica è permanente.

Ridimensionare nell'editor classico

Nell'editor classico, puoi ridurre le dimensioni del Blocco immagine aggiungendo blocchi su uno dei lati. Il modo più comune per eseguire questa operazione consiste nell'utilizzare blocchi spazio, che creano spazi vuoti.

Per ridimensionare usando i blocchi:

1. Clicca su un punto di inserimento per aggiungere un blocco spaziatore.
2. Trascina il Blocco spazio a sinistra o a destra del Blocco immagine.
3. Clicca sullo strumento di ritaglio e trascinalo.

Ricorda:

• Per centrare l'immagine, aggiungi Blocchi Spazio della stessa dimensione su entrambi i lati.
• Per i layout In linea e Poster nell'editor classico, clicca e trascina la maniglia di ritaglio per ritagliare l'immagine verticalmente. In questo modo modifichi l'altezza dell'immagine, ma non la larghezza.
• I layout Cartolina, Sovrapposto e Collage offrono un'opzione per il ridimensionamento nelle impostazioni di stile dell'editor classico:

Tieni presente che l'applicazione di queste modifiche influisce su tutti i Blocchi immagine con quel layout.

Suggerimento: puoi rimuovere il padding applicato automaticamente ai blocchi immagine aggiungendo codice personalizzato. Per maggiori informazioni, visita questo post nello Squarespace Forum. Nota: le personalizzazioni del codice non rientrano nell'ambito della nostra assistenza. Ciò significa che non possiamo fornire assistenza in relazione alla configurazione o alla risoluzione dei problemi.

Riempi il blocco

Nel caso di layout In linea, puoi impostare le immagini per riempire l'intera area del blocco in Editor fluido ed Editor classico. Gli altri layout classici riempiono automaticamente l'area del blocco.

• Editor fluido: utilizza l'opzione Riempimento nella scheda Progettazione per fare in modo che l'immagine riempia il contenitore. Se scegli Adatta, l'immagine sarà circondata da una spaziatura interna.
• Editor classico: attiva l'opzione Estendi nella scheda Progettazione.
• Se l'immagine è più ampia dell'area del Blocco immagine, verrà ridotta (non tagliata).

Ricorda:

• L'estensione di un'immagine può avere effetto sulla sua qualità.
• Per ridurre la necessità di estendere l'immagine, è consigliabile caricare un'immagine con una larghezza compresa tra 1500 e 2500 pixel.

Aggiungere animazioni ed effetti immagine

Puoi aggiungere piccole animazioni alle tue immagini per rendere il tuo sito più accattivante:

• Editor fluido - Consente le animazioni sull'intero sito in Stili sito o aggiunge effetti immagine
• Editor classico: abilita le animazioni blocchi nella scheda Progettazione di ciascun blocco immagine che desideri animare.

Aggiungere il testo

I blocchi immagine nell'editor classico prevedono opzioni di didascalia integrate, mentre Editor fluido offre maggiore versatilità.

Suggerimento: consigliamo inoltre di aggiungere testo alt a ogni immagine per migliorare l'accessibilità e la SEO. Per sapere come rendere le immagini più accessibili, visita Rendere più accessibili audio, immagini e video. 

Editor fluido

Nelle sezioni dell'Editor fluido, utilizza un blocco di testo per aggiungere testo adiacente o sovrapposto a un blocco immagine.

Editor classico

Nelle sezioni dell'editor classico, clicca nei campi di testo per aggiungere testo all'immagine. Potresti vedere del testo dimostrativo come Aggiungi una descrizione dell'immagine o Metti in risalto.

Ricorda:

• Limita i titoli a poche parole. Per i sottotitoli e le didascalie, usa una o due frasi. In questo modo, bilanci il rapporto tra parole e immagine. Inoltre, ti assicuri che il testo sia visibile su dispositivi mobili.
• Per aggiungere interruzioni di riga nel testo del titolo, premi Shift + Invio.
• Evidenzia il testo e utilizza la barra degli strumenti per modificare la formattazione con, ad esempio, il grassetto, il corsivo o l'aggiunta di un collegamento.
• Ad eccezione dei layout in linea e a colonna, il testo mantiene la larghezza impostata in relazione all'immagine su dispositivi mobili e browser stretti.
• Quando si passa da in linea a qualsiasi altro layout per la prima volta, è necessario inserire nuovamente il testo dell'immagine.

Il layout In linea supporta una didascalia di base, mentre gli altri layout supportano i campi titolo e sottotitoli.

Tipi di carattere e colori

Editor fluido

Nelle sezioni dell'Editor fluido, è possibile aggiungere un colore di sovrapposizione a un blocco immagine selezionando Sovrapposizione nella scheda Design . Le sovrapposizioni applicano un filtro colorato sulle immagini, conferendo loro una leggera sfumatura. 

Utilizza il selezionatore di colori per scegliere un colore e una trasparenza per la sovrapposizione. Fare clic su Modalità di fusione per aggiungere un ulteriore effetto visivo alla sovrapposizione. Questi effetti visivi saranno resi con lievi differenze a seconda del browser del visitatore.

Editor classico

Lo stile dei caratteri e dei colori dei blocchi immagine nell'editor classico dipende dalla versione del tuo sito.

Il blocco immagine In linea non ha tweak specifici in Stili sito. Per informazioni sugli stili, i colori e le dimensioni dei tipi di carattere delle didascalie, visita Definire lo stile delle didascalie delle immagini.

Passaggi successivi

Dopo aver impostato il blocco immagine, è possibile:

• Trascina e rilascia il blocco per spostarlo o creare colonne e righe.
• Utilizza l'Editor di immagini per ritagliare, ruotare o aggiungere filtri di immagine.
• Eliminare il blocco.

Per risolvere eventuali problemi relativi alle immagini, visita Formattare le immagini per la visualizzazione sul web