Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Blocchi immagine

Utilizza i Blocchi immagine per aggiungere immagini a pagine o post del blog in diversi layout. Ciascun Blocco immagine visualizza un'immagine.

Guarda un video

Aggiungere un Blocco immagine

Per aggiungere un Blocco immagine:

  1. Modifica una pagina o un post, fai clic su un punto di inserimento e poi su Immagine. Per maggiori informazioni, visita Aggiungere contenuto con blocchi.
  2. Utilizza la scheda Contenuto per aggiungere un'immagine e un link a un'immagine.
  3. Clicca sulla scheda Design per modificare il layout e animare il blocco.
  4. Quando hai finito, clicca fuori dall'editor dei blocchi. Le modifiche apportate vengono salvate automaticamente.

Per istruzioni dettagliate, consulta le sezioni seguenti.

Aggiungere un'immagine

Nella scheda Contenuto dell'editor Blocco immagini:

Clicca sull'icona +, quindi scegli come aggiungere l'immagine:

Dopo aver aggiunto un'immagine, puoi:

  • Modificare l'immagine o aggiungere effetti all'immagine
  • Impostare il punto focale dell'immagine cliccando sui tre punti, quindi cliccando su Punto focale
  • Cambiare l'immagine cliccando su Sostituisci
  • Eliminare l'immagine cliccando sui tre punti, quindi su Rimuovi

Ricorda:

  • Per ottenere risultati ottimali, utilizza un'immagine di dimensione inferiore a 500 KB. Per ulteriori suggerimenti sul formato delle immagini, visita Formattazione delle immagini per la visualizzazione sul Web.
  • Il blocco immagine non si visualizzerà sul tuo sito Web senza aver caricato un'immagine.

Aggiungere un link a un'immagine o un pulsante

Nella scheda Contenuti, puoi trasformare l'immagine in un link o aggiungere un pulsante al suo layout.

Per trasformare l'immagine in un link nel layout In linea, aggiungi l'URL al campo Link o clicca su l'icona dell'ingranaggio per ulteriori opzioni.

Ricorda:

  • Se attivi una lightbox, i collegamenti URL verranno disattivati.
  • Il layout In linea non supporta l'utilizzo di pulsanti.

Per tutti gli altri layout del Blocco immagine, utilizza il menu a discesa Link. Puoi scegliere tra:

  • None (Nessuno) - Nessun link
  • Su immagine - L'intera immagine diventa un link. Aggiungi un URL nel campo che viene visualizzato sotto il menu a discesa, oppure clicca su l'icona dell'ingranaggio per ulteriori opzioni.
  • Pulsante - Viene visualizzato un pulsante allineato al testo, sotto il titolo e il sottotitolo. Personalizza il testo del pulsante e aggiungi l'URL nel campo che appare sotto il menu a discesa o clicca su l'icona dell'ingranaggio per ulteriori opzioni.

Scegli un layout

Quando aggiungi un Blocco immagine, 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 verso l'angolo inferiore delle 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.

Suggerimento: quando passi dal layout In linea a un altro layout, dovrai inserire nuovamente il testo dell'immagine.

Aggiungere animazioni

Non è possibile aggiungere animazioni dall'app Squarespace.

Nella scheda Designdell'editor del Blocco immagine, puoi aggiungere animazioni che i visitatori vedono quando caricano o aggiornano la pagina.

Per aggiungere animazioni:

  1. Nell'editor Blocco immagini fare clic su Progettazione, quindi su Animazioni.
  2. Seleziona un effetto dalla lista da applicare all'immagine e a un qualsiasi testo. Mentre selezioni un'opzione, vedrai un'anteprima di come apparirà sulla pagina.
  3. Per animare separatamente l'immagine e il testo, selezionaPersonalizza, quindi seleziona le opzioni Immagine e Testo.
Suggerimento: nella versione 7.1, è possibile applicare animazioni a livello globale a tutte le immagini sul tuo sito.

Scegli tra queste opzioni di animazione per l'immagine, il testo o entrambi:

  • Dissolvenza - Il blocco, l'immagine o il testo si dissolve
  • Scorrimento verso l'alto - Il blocco, l'immagine o il testo scorre verso l'alto
  • Scorrimento verso il basso: l'immagine o il testo scorre verso il basso
  • Clip orizzontale - Il blocco o l'immagine si carica in strati orizzontali
  • Clip verticale - Il blocco o l'immagine si carica in strati verticali
  • Inclinazione verso l'alto - Il blocco o l'immagine si ingrandiscono con un'inclinazione verso l'alto
  • Inclinazione verso il basso - Il blocco o l'immagine si ingrandiscono con un'inclinazione verso il basso
  • Messa a fuoco: il blocco, l'immagine o il testo sembra sfocato, poi viene messo a fuoco
  • Scontro: immagine e testo scivolano verso l'interno dai lati
  • Rivelazione: immagine e testo scivolano verso l'esterno dal centro
  • Scorrimento da sinistra: l'immagine o il testo scorre da sinistra
  • Scorrimento da destra: l'immagine o il testo scorre da destra

Ecco un esempio di un blocco immagine Collage che utilizza queste impostazioni:

  • Animazione - Personalizza
  • Animazione immagine - Diapositiva da destra
  • Animazione testo - Diapositiva da sinistra

Esempio di un Blocco immagine con animazioni.

Aggiungere il testo

Nel blocco immagine, clicca nei campi di testo per aggiungere testo all'immagine. Potresti vedere testo segnaposto come Aggiungi una descrizione dell'immagine o Metti in risalto.

Ricorda:

  • Limita i titoli a poche parole. Per sottotitoli e didascalie, usa una o due frasi. In questo modo, avrai un buon equilibrio tra le parole e l'immagine. Inoltre, il testo sarà visibile anche sui dispositivi mobili.
  • Per aggiungere interruzioni di riga nel testo del titolo, premi MAIUSC + INVIO. Se aggiungi interruzioni di riga premendo solo INVIO, le interruzioni di riga scompaiono dopo aver salvato la pagina.
Suggerimento: evidenzia il testo per apportare modifiche alla formattazione con la barra degli strumenti di testo, come il grassetto, il corsivo o l'aggiunta di un link.

Differenze tra didascalie, titoli e sottotitoli

I campi di testo e opzioni di stile variano in base al layout. 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 un 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:

Definire lo stile del Blocco immagine

Alcuni layout hanno impostazioni di stile specifiche per i caratteri, i colori e i pulsanti. La visualizzazione di queste impostazioni dipende dalla versionedel sito.

Per definire lo stile dei Blocchi immagine a livello globale:

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

  1. 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. Nel Menu Home, clicca su Design, quindi 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.

Aggiungere forme immagine

Usa le forme immagine per aggiungere varietà e un effetto visivo unico alle tue immagini. La forma scelta viene visualizzata sull'immagine, come una maschera. Puoi aggiungere forme immagine a qualsiasi layout di Blocco immagine. Scegli tra tre rapporti dimensionali: 1:1, 2:3 e 3:2.

Per aggiungere forme immagine:

  1. Nell'editor di Blocchi immagine, clicca su Design.
  2. Scegli Forma, quindi clicca su Forma.
  3. Scegli un rapporto dimensionale, quindi clicca sulla forma che desideri utilizzare.

Dopo aver scelto una forma, puoi:

  • Utilizzare il punto focale per personalizzare l'aspetto dell'immagine nella forma.
  • Abilitare le animazioni per aggiungere movimento visivo.
  • Rimuovere la forma. Nella scheda Design, scegli Originale per tornare alla forma originale.

Ricorda:

Aggiungere un raggio d'angolo

Puoi arrotondare gli angoli di un'immagine utilizzando l'impostazione Raggio d'angolo. Nella scheda Design dell'editor del Blocco immagine:

  1. Vai a Raggio d'angolo e clicca per impostare il raggio per l'intera immagine o per i singoli angoli.
  2. Nel campo Raggio d'angolo, inserisci i numeri (misurati in pixel) per modificare la forma del bordo.
  3. Passa il mouse su Fatto, quindi clicca su Salva.

Ricorda:

  • Le modifiche apportate al raggio di un Blocco immagine si applicano esclusivamente al singolo Blocco immagine. Non si applicano all'immagine in tutto il sito.
  • Per rimuovere il raggio d'angolo, annulla le modifiche o inserisci 0 nei campi del raggio d'angolo.

Ridimensiona l'immagine

È possibile ridimensionare o ritagliare i Blocchi immagine in diversi modi, a seconda del layout. Per ulteriori informazioni, visita Ridimensionamento di un'immagine.

Suggerimento: puoi rimuovere il padding applicato automaticamente ai Blocchi immagine aggiungendo codice personalizzato. Per maggiori informazioni, vedi questo post nello Squarespace Forum.

Nota: le personalizzazioni del codice non rientrano nell'ambito del nostro supporto. Ciò significa che non possiamo fornire assistenza in relazione alla configurazione o alla risoluzione dei problemi.

Blocchi Immagine su dispositivi mobili

Ciascun layout di Blocco Immagine mantiene la formattazione su dispositivi mobili. Il testo si sposterà per adattarsi allo schermo del dispositivo, ma manterrà una posizione simile in relazione all'immagine.

  • Per avere un'idea di come verrà visualizzato il blocco immagine, utilizza la Vista dispositivo.
  • Ad eccezione dei layout In linea e A colonna, le didascalie mantengono la larghezza impostata rispetto all'immagine. Ciò significa che le didascalie più lunghe potrebbero risultare più difficili da leggere oppure è possibile che vengano tagliate sui dispositivi mobili. Ciò può essere particolarmente visibile nel layout Poster, progettato per poco testo.
  • Le didascalie per il layout Carta si spostano da accanto all'immagine sotto l'immagine. Per i layout Collage e Sovrapposizione, le didascalie si spostano da accanto all'immagine verso la parte inferiore dell'immagine.
  • I layout Carta, Collage, Sovrapposto e Impilato dispongono dell'opzione Ridimensionamento dinamico del carattere nel pannello Stili sito. Quando abilitata, il testo non verrà ridimensionato al di sotto dei 14 pixel.
  • I Blocchi immagine vengono impilati verticalmente su dispositivi mobili.

Risoluzione dei problemi relativi ai colori delle immagini

Se un'immagine viene salvata in modalità CMYK piuttosto che RGB, i colori sul tuo sito Squarespace possono differire da quelli dell'immagine originale.

Salva sempre le tue immagini in modalità RGB o sRGB. La modalità a colori RGB è un formato sicuro per il Web, mentre la modalità CMYK è destinata alla stampa e potrebbe non essere visualizzata correttamente nella maggior parte dei browser. Per maggiori informazioni sulla formattazione delle immagini, visita Formattare le immagini per la visualizzazione sul Web.

Passaggi successivi

Dopo aver impostato il Blocco immagine, puoi riorganizzarlo, modificarlo o rimuoverlo:

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 103 su 428