Blocchi immagine

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

Ultimo aggiornamento 1 febbraio 2025

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:

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.

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 immagineSu 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

Accesso a questa funzionalità

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.

quick_actions_-__image_block_classic_layout.png

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:

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:

Ridimensiona l'immagine

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

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 spazio.
  2. Trascina il Blocco spazio a sinistra o a destra del Blocco immagine.
  3. Clicca sullo strumento di ritaglio e trascinalo.
Ridimensionare un'immagine per renderla più piccola, utilizzando un altro blocco.

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 l'icona 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:
  1. Apri il pannello Blocchi immagine
  2. Scorri fino alla sezione per tale layout. Ad esempio, scorri fino alla sezione Blocco immagine: Cartolina.
  3. Usa il tweak Larghezza immagine per modificare le dimensioni. Il testo dell'immagine verrà regolato automaticamente per adattarsi allo spazio.
  4. Clicca su Salva.
  1. Apri il pannello Design, quindi fai clic su Stili sito.
  2. Scorri fino alla sezione per tale layout. Ad esempio, scorri fino alla sezione Blocco immagine: Cartolina.
  3. Usa il tweak Larghezza immagine per modificare le dimensioni. Il testo dell'immagine verrà ingrandito o ridotto automaticamente in base allo spazio.
  4. Clicca su Salva.

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:

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.

Il layout In linea supporta una didascalia:

Nella scheda Contenuto, seleziona un'opzione di visualizzazione dal menu a discesa delle didascalie:

  • Off - Non viene visualizzata alcuna didascalia a meno che l'immagine non venga visualizzata in una lightbox.
  • Didascalia sotto - La didascalia viene visualizzata sotto l'immagine.
  • Didascalia in sovrapposizione - La didascalia viene visualizzata sull'immagine in una barra di colore grigio scuro.
  • Didascalia in sovrapposizione al passaggio del mouse - La didascalia viene visualizzata sull'immagine in una barra di colore grigio scuro quando il cursore passa sopra l'immagine.

Suggerimento

se non vedi Aggiungi una descrizione dell'immagine, passa temporaneamente allo stile Didascalia sotto nella scheda Contenuto.

Le didascalie vengono sempre visualizzate in lightbox. Le didascalie non vengono visualizzate in Blocchi immagine vuoti. Per aggiungere testo senza un'immagine, utilizza un Blocco di testo.

Altri layout supportano un titolo e un sottotitolo:

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.

Per definire lo stile dei Blocchi immagine a livello globale:

  • Modificare i tipi di carattere del blocco nel pannello Tipi di carattere.
  • Modificare i colori della sezione del blocco nel pannello Colori.
  • Personalizzare i colori del tema per gli elementi come il titolo, la sovrapposizione delle immagini o lo sfondo del pulsante con i tweak di colore Blocco immagine.
  • Definisci lo stile del pulsante del blocco nel pannello Pulsanti. I pulsanti del Blocco immagine seguono le impostazioni dello stile Principale.
  • Imposta la dimensione del tipo di carattere e altre opzioni di formattazione nella barra degli strumenti di testo. La dimensione del tipo di carattere del pulsante segue Paragrafo 2.

Per definire lo stile di elementi specifici del layout nel Blocco immagine, come l'allineamento del testo o la larghezza del contenuto:

  1. Apri il pannello Blocchi immagine. Durante la modifica di una pagina, apri Stili sito, quindi clicca su Blocchi immagine.
  2. Scorri verso il basso fino alla sezione di ogni layout per modificarne i tweak.

Nella versione 7.0, tutti i layout dei blocchi immagine, tranne quello In linea, hanno proprie impostazioni di stile in Stili sito. Per trovare queste opzioni:

  1. Apri il pannello Design, quindi fai clic su Stili sito.
  2. Scorri verso il basso fino alla sezione di ogni layout per modificarne i tweak.

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:

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

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.