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

Risoluzione dei problemi di ritaglio

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.

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:

  • Ritaglia l'immagine utilizzando l'icona di ritaglio. Per ripristinare le dimensioni originali dell'immagine, clicca due volte sull'icona di ritaglio.
  • Dopo il ritaglio, utilizza il punto focale per centrare l'immagine.
  • Riduci l'immagine aggiungendo Blocchi spazio su entrambi i lati.

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:

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 sezione vengono ritagliati, modifica l'altezza o la larghezza della sezione per visualizzare un'area maggiore dell'immagine o del video.

Per maggiori informazioni, visita Sezioni di pagina nella versione 7.1.

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.

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 galleria nella versione 7.1.

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 l'icona 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 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 nella versione 7.1.

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.

prodpagebackground.png

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.

advancedprodcutscropping.png

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.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 14 su 157