Risoluzione dei problemi di ritaglio

Passaggi per ridurre al minimo i ritagli indesiderati e suggerimenti per far apparire le immagini al meglio.

Ultimo aggiornamento 31 ottobre 2024

Molte immagini del tuo sito verranno ritagliate automaticamente in orizzontale, in verticale o in entrambi i modi. Questo consente di migliorare la visualizzazione delle immagini in base al layout del sito e alla dimensione del browser.

Questa guida ti aiuterà a capire come avviene il processo di ritaglio in Squarespace e come ridurlo al minimo in base alle esigenze.

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.

bryler-overlay.png

Blocchi immagine

I Blocchi immagine mostrano le immagini con il rapporto altezza/larghezza originale, entro i limiti di layout del tuo sito.

Suggerimenti:

  • In Editor fluido, i blocchi immagine impostati su Riempi ritaglio quando vengono ridimensionati. I blocchi di immagini impostati su Adatta diventano più piccoli o più grandi mantenendo il rapporto dimensionale originale.
  • Nell'editor classico, ritaglia i blocchi immagine con il quadratino di ritaglio. Per ripristinare le dimensioni originali dell'immagine, fai doppio clic sullo strumento di ritaglio. Riduci l'immagine senza ritagliarla aggiungendo dei 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.

Nella versione 7.1 puoi creare immagini banner aggiungendo immagini di sfondo alle sezioni della pagina. Queste immagini vengono sempre ritagliate in una certa misura, soprattutto sui dispositivi mobili. Per personalizzare il banner, puoi:

  • Modifica la quantità di contenuti che si sovrappongono al banner. Molti contenuti aumenteranno l'altezza del banner e faranno sì che l'immagine venga ritagliata ulteriormente.
  • Modificare le dimensioni del banner.
  • 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:

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:

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 della tua sezione vengono ritagliati, modifica l'altezza o la larghezza della sezione per mostrare una porzione maggiore del tuo file multimediale da aggiungere come sfondo.

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.

Sezioni galleria e Pagine galleria

In base alla versione di Squarespace del tuo sito, questo presenterà diverse opzioni 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:

  •  Tutti i formati - Nell'editor classico, ridimensiona l'intero blocco aggiungendo blocchi spaziatori 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:

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 nel tuo negozio, puoi utilizzare i tweak relativi alla sezione del negozio per modificarle. Durante la modifica della pagina, passa il mouse sulla sezione del negozio e 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 del 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 da utilizzare per lo scopo abbiano rapporti dimensionali simili. Ad esempio, prima di caricarle sul sito, assicurati che tutte le immagini 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

Per le pagine classiche del negozio:

  • 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.
prodpagebackground.png

Avanzato

Per le pagine avanzate del negozio:

  • Le immagini vengono sempre ritagliate in base alla stessa forma. Questo contribuisce a creare un'esperienza utente più coerente e piacevole.
  • 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.
  • Per maggiori informazioni, visita Definire lo stile delle Pagine negozio.
advancedprodcutscropping.png

Univoco

Visita questi link per scoprire gli stili delle miniature per ognuna delle Pagine negozio esclusive:

Pagine di copertina

Accesso a questa funzionalità

La versione 7.1 non supporta le Pagine di copertina.

Le pagine 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.

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.