Passaggi per ridurre al minimo i ritagli indesiderati e suggerimenti per far apparire le immagini al meglio.
Molte immagini sul tuo sito appariranno ritagliate orizzontalmente, verticalmente o in entrambi i sensi. Questo consente di migliorare la visualizzazione delle immagini in base al layout del sito e alla dimensione del browser.
Questa guida ti aiuterà a comprendere come funziona il normale processo di ritaglio in Squarespace e come ridurlo al minimo.
Suggerimento: per ritagliare l'immagine originale, utilizza l'editor di immagini o un software di terze parti.
Comprendere il ritaglio
Ogni immagine del sito si trova all'interno di un contenitore, ovvero un riquadro invisibile che controlla la visualizzazione dell'immagine in relazione ad altri contenuti della pagina. Quando un'immagine viene caricata in un contenitore, a seconda delle impostazioni di quest'ultimo si verifica una di queste due situazioni:
- Nella maggior parte dei casi - L'immagine si adatta alle dimensioni del contenitore, che variano in base alla larghezza del browser. Se non ha la stessa forma del contenitore, l'immagine viene ritagliata per riempirlo completamente.
- In alcuni casi - La forma del contenitore si adatta alle dimensioni dell'immagine, che viene visualizzata per intero.
Di solito, le immagini sul tuo sito vengono visualizzate entro le dimensioni dei contenitori e saranno parzialmente ritagliate. Questo consente di migliorarne la visualizzazione quando si adattano a diverse dimensioni del browser.
Blocchi immagine
I Blocchi immagine mostrano le immagini con il rapporto altezza/larghezza originale, entro i limiti di layout del tuo sito.
Suggerimenti:
- In Fluid Engine, i blocchi immagine impostati su Riempi ritaglio quando vengono ridimensionati.I blocchi immagine impostati su Adatta diventano sempre più piccoli.
- Nell'editor classico, ritaglia i blocchi di immagine con il quadratino di ritaglio. Per ripristinare le dimensioni originali dell'immagine, fare doppio clic sul quadratino di ritaglio. Riduci l'immagine aggiungendo blocchi spaziatori su entrambi i lati.
- Dopo il ritaglio, utilizza il punto focale per centrare l'immagine.
Banner
Se le immagini banner hanno lo stesso rapporto dimensionale, è più facile prevedere come verranno ritagliate. Assicurati di ottimizzare le tue immagini seguendo i nostri suggerimenti per la formattazione delle immagini banner.
Ci sono altri modi per controllare il ritaglio dei banner sul tuo sito, a seconda della versione Squarespace del tuo sito.
I banner appariranno sempre parzialmente ritagliati, specialmente sui dispositivi mobili. Per personalizzare il banner, puoi:
- Definire lo stile del banner (immagine e testo).
- Modificare le dimensioni del banner, incluse l'altezza e la larghezza.
- Utilizzare il focal point per modificare la centratura dell'immagine.
Per sapere come i tuoi banner appariranno sui dispositivi mobili, visita Come verrà visualizzato il mio sito sui dispositivi mobili?
Banner di pagina
Con alcune eccezioni, i banner di pagina appariranno sempre parzialmente ritagliati, specialmente sui dispositivi mobili. L'entità del ritaglio dipende dall'altezza del banner e dalla larghezza del browser.
Suggerimenti:
- Scopri come definire lo stile dei banner del tuo sito e impostarne l'altezza.
- Utilizza il punto focale per regolare la centratura dell'immagine.
Banner del sito
Le immagini aggiunte alle immagini banner del sito (aggiunte all'interno di Stili sito) possono essere ripetute, visualizzate all'altezza o alla larghezza del banner o possono riempire completamente il contenitore.
Suggerimenti:
- Utilizza Stili sito per impostare la modalità di visualizzazione dell'immagine banner.
- Scegli le modifiche che sembrano funzionare sia su cellulare che su computer.
Immagini o video di sfondo
Il modo in cui controlli il ritaglio delle immagini o video di sfondo dipende dalla versione Squarespace del tuo sito.
Se l'immagine o il video di sfondo sezione vengono ritagliati, modifica l'altezza o la larghezza della sezione per visualizzare un'area maggiore dell'immagine o del video.
Per maggiori informazioni, consulta Sezioni delle pagine.
Le immagini di sfondo possono essere ripetute, visualizzate all'altezza o alla larghezza del browser, oppure possono riempire completamente lo schermo del browser.
Suggerimenti:
- Utilizza Stili sito per scegliere la modalità di visualizzazione dell'immagine banner.
- Per assistenza con la visualizzazione su dispositivi mobili, consulta i nostri suggerimenti per la risoluzione dei problemi.
- Le immagini che superano i 2500 pixel lungo il bordo più lungo possono causare problemi sui dispositivi mobili.
- Quando scegli un'immagine di sfondo con smarginatura completa, considera il modo in cui i visitatori accederanno al tuo sito.
Sezioni galleria e Pagine galleria
In base alla versione di Squarespace del tuo sito, questo presenterà diverse opzioni galleria.
- La versione 7.1 utilizza le sezioni galleria
- La versione 7.0 utilizza le Pagine galleria
Carica e gestisci le immagini direttamente nella sezione galleria, quindi utilizza la scheda Galleria per controllare la modalità di visualizzazione delle immagini.
Per maggiori informazioni, visita Sezioni della galleria.
La modalità di visualizzazione delle immagini nella Pagina galleria dipende dal modello. Consulta la guida al modello per scoprire come le immagini potrebbero essere ritagliate per adattarsi al design della tua Pagina galleria.
Blocchi Galleria
La modalità di visualizzazione delle immagini in un Blocco galleria dipende dal formato: Slideshow, Griglia, Carosello o Impilato.
Suggerimenti:
- Per qualsiasi formato, ridimensiona l'intero blocco aggiungendo Blocchi spazio su entrambi i lati.
- Slideshow - L'altezza della galleria è impostata in base all'immagine più ampia. Per evitare ritagli o spazio vuoto intorno alle immagini, utilizza immagini con rapporti dimensionali simili.
- Griglia - Nella scheda Design, utilizza il rapporto dimensionale per ritagliare tutte le immagini in modo che abbiano la stessa forma e modifica il numero di miniature per riga per modificarne le dimensioni. Utilizza il punto focale per regolare il centro di ciascuna immagine.
- Carosello - Regola l'altezza utilizzando lo strumento di ritaglio.
- Impilato - Ogni immagine si espande fino a riempire la larghezza della pagina o della colonna in cui si trova il blocco.
Pagine portfolio e Pagine indice
Le Pagine portfolio e le Pagine indice sono tipi di pagine differenti presenti nelle diverse versioni di Squarespace, anche se il loro funzionamento è simile:
- La versione 7.1 utilizza Pagine portfolio.
- La versione 7.0 utilizza Pagine indice.
Passa il mouse su una sezione portfolio per aggiungere un'immagine, quindi utilizza la scheda Galleria per controllare come viene visualizzata.
Per maggiori informazioni, visita Pagine portfolio.
La modalità di visualizzazione delle immagini in una Pagina indice dipende dal modello. Consulta la guida al modello per maggiori informazioni.
Pagine negozio
Il modo in cui il ritaglio influisce sulle immagini dei prodotti dipende dalla versione di Squarespace su cui si trova il sito.
Dopo aver caricato le immagini nelle sezioni del tuo negozio, utilizza i tweak sezione negozio per modificarle. Durante la modifica di una pagina, clicca sull'icona della matita. Puoi modificare la spaziatura, le colonne, il rapporto dimensionale e l'allineamento del testo. Sperimenta con diversi tweak di stile per definire la visualizzazione delle immagini prodotto. Per maggiori informazioni sulla personalizzazione della Pagina negozio, visita Sezioni della Pagina della raccolta.
Rapporti dimensionali delle immagini del prodotto
Non è possibile ritagliare automaticamente le immagini prodotto nelle Pagine negozio. È consigliabile che le immagini prodotto abbiano rapporti dimensionali simili. Ad esempio, prima di caricarle sul sito, assicurati che tutte le tue immagini prodotto abbiano un orientamento orizzontale o verticale coerente.
Se le tue immagini prodotto hanno orientamenti diversi, utilizza il nostro editor di immagini integrato o strumenti di terze parti per ritagliarle. Puoi anche creare un layout personalizzato per i tuoi prodotti utilizzando i Blocchi prodotto.
Il modo in cui le immagini del prodotto vengono ritagliate sulla pagina di destinazione dipende dal tipo di Pagina del negozio del tuo modello.
Classico
- In Stili sito, utilizza il tweak Ritaglio automatico immagine del prodotto per scegliere se le immagini debbano essere ritagliate per avere la stessa forma o visualizzate nelle forme originali.
- Se scegli di ritagliare, utilizza il tweak Dimensioni articoli per impostare la forma.
- Utilizza il punto focale per regolare la centratura dell'immagine.
- Se scegli di non ritagliare, utilizza il tweak Colore di sovrapposizione del prodotto per scegliere il colore visualizzato dietro l'immagine.
- Per maggiori informazioni, visita Definire lo stile delle Pagine negozio.
Avanzato
- La Pagina negozio avanzata ritaglia sempre le immagini dando la stessa forma. Questo contribuisce a creare uno stile coerente per la tua pagina.
- Per impostare la forma di tutte le immagini nella tua Pagina del negozio, usa il tweak Rapporto dimensionale immagine nella sezione Prodotti: Layout di Stili sito.
- Utilizza il punto focale per regolare la centratura dell'immagine.
Univoco
Visita questi link per scoprire gli stili delle miniature per ognuna delle Pagine negozio esclusive:
Pagine di copertina
La versione 7.1 non supporta le Pagine di copertina.
Le Pagina di copertina appariranno sempre parzialmente ritagliate, soprattutto sui dispositivi mobili. La quantità del ritaglio dipende dall'altezza dell'immagine, dalla larghezza del browser e dal layout prescelto.