L'uso delle immagini è un ottimo modo per suddividere il testo, evidenziare i tuoi prodotti o il tuo portfolio e mostrare la personalità del tuo brand. Dopo aver aggiunto le immagini alle pagine del sito, puoi ridimensionarle per ingrandirle o rimpicciolirle sulla pagina.

Ogni sito Squarespace è inoltre dotato di responsive design. Ciò significa che le dimensioni delle immagini cambiano automaticamente, a seconda del dispositivo utilizzato dai visitatori per visitare il sito. In questa guida, mostriamo diversi modi per aggiungere, ridimensionare e personalizzare le tue immagini.

Guarda un video

Aggiungi Immagini

Esistono molti modi per aggiungere immagini al tuo sito. Assicurati di seguire le nostre linee guida per la formattazione per far sì che le tue immagini siano perfette su qualsiasi dispositivo. Puoi:

• Aggiungi un'immagine a una pagina o a un post utilizzando il Blocco immagine.
• Aggiungi un logo del sito, un logo per la condivisione sui sociale una faviconper rendere il tuo branding omogeneo e penetrante.
• Aggiungi più immagini a una pagina con una sezione galleria.
• Usa Blocchi Galleria per visualizzare più immagini in altre aree del tuo sito.
• Caricare immagini del prodotto per mostrare i diversi modelli e le diverse angolazioni di un articolo, quindi mostrarle in diverse parti del tuo sito con i Blocchi prodotto.
• Aggiungi un'immagine banner nella parte superiore di una pagina per conferirle un tema visivo.
• Usa un Blocco Instagram per visualizzare le immagini più recenti provenienti da un feed di Instagram.
• Usare immagini in evidenza per rappresentare gli elementi della raccolta, come post del blog ed eventi. Utilizza un Blocco riepilogo per mostrare le immagini in evidenza in altre aree del sito.

Immagini di archivio

Se non disponi di immagini personali, puoi aggiungere delle immagini di archivio grazie alle nostre partnership con Unsplash e Getty Images. Puoi anche riutilizzare qualsiasi immagine di archivio o caricata in altre aree del tuo sito.

Ridimensiona le immagini

Dopo aver aggiunto le immagini, potresti volerle ingrandire o rimpicciolire sulla pagina. Ad esempio, un'immagine potrebbe essere troppo grande e sovrastare il resto del contenuto della pagina. Oppure il tuo logo potrebbe essere troppo piccolo e quindi difficile da leggere. Il modo in cui ridimensioni un'immagine dipende da come l'hai aggiunta al tuo sito.

Blocchi

Per ridurre la larghezza di qualsiasi blocco, aggiungi altri blocchi accanto ad esso. Ad esempio, se aggiungi un Blocco spazio accanto a un Blocco immagine, le dimensioni e la larghezza del Blocco immagine vengono dimezzate. Puoi quindi modificare la larghezza del Blocco spazio per ingrandire o rimpicciolire il Blocco immagine.

Molti blocchi offrono altre ​​opzioni per personalizzare ulteriormente le dimensioni e la forma dell'immagine:

• Blocchi immagine - Utilizza l'icona di ritaglio per modificare l'altezza dei Blocchi immagine in linea e poster.
• Blocchi galleria - A seconda del layout, puoi ritagliare o ridimensionare le immagini.
• Blocchi riepilogo - Utilizza le impostazioni di design per modificare l'aspetto delle immagini.
• Blocchi Instagram - Utilizza le impostazioni per scegliere un design e modificare il rapporto dimensionale.

Pagine e sezioni

• Sezioni galleria - Definisci lo stile della galleria in modo che le immagini appaiano come desideri. Puoi anche provare a utilizzare un layout diverso.
• Pagine portfolio - Definisci lo stile della sezione portfolio per modificare l'aspetto delle immagini.
• Pagine negozio - Definisci lo stile delle pagine negozio per modificare il rapporto dimensionale e la larghezza dell'immagine del prodotto.
• Se il tuo sito è nella versione 7.0, puoi anche aggiungere immagini alle Pagine galleria e alle Pagine di copertina. Alcuni modelli della versione 7.0 supportano immagini di sfondo a livello di sito. Per assistenza sul ridimensionamento delle immagini, consulta la guida del modello.

Altre aree del sito

• Immagini banner - Utilizza le impostazioni per modificare l'altezza o la larghezza del banner. I banner appariranno sempre parzialmente ritagliati sui dispositivi mobili.
• Logo del sito - Modifica la posizione e le dimensioni del logo.

Opzioni avanzate per le immagini

Vai oltre le opzioni di base con immagini interattive come animazioni, forme immagine e .gif animate.

• Aggiungi del testo alternativo alle tue immagini per fare in modo che compaiano nelle ricerche, e rendere il tuo sito più accessibile ai visitatori che usano degli screen reader.
• Modifica le tue immagini con l'editor di immagini integrato per ottenere l'effetto ideale. Ad esempio, puoi ritagliare, ruotare o aggiungere filtri.
• Imposta le immagini da aprire in una lightbox per distinguerle dagli altri contenuti.
• Trasforma le immagini in link con URL di click-through.
• Utilizza gli effetti del passaggio del mouse per visualizzare ulteriori informazioni quando i visitatori spostano il cursore su un'immagine.
• Usa le forme immagine per aggiungere varietà ed effetti visivi unici alle tue immagini.

Suggerimento: per apportare modifiche alle dimensioni originali del file immagine, ti consigliamo di utilizzare un software di modifica delle immagini di terze parti. Ad esempio, se hai caricato un'immagine di 600 px x 600 px, ma desideri che sia 400 px x 400 px, devi modificare l'immagine sul tuo dispositivo, quindi caricarla di nuovo sul sito.

Passaggi successivi

• Guarda i tutorial presentati nella serie di video Tutto sulle immagini per scoprire come utilizzare le immagini in Squarespace.
• Per offrire ai tuoi visitatori un'esperienza ancora più dinamica, puoi anche aggiungere video al tuo sito.