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

Risoluzione dei problemi di ritaglio

Many images on your site will crop either horizontally, vertically, or both. This helps your images look their best within your site's layout and in different browser sizes.

This guide will help you understand the normal cropping that happens in Squarespace and learn how to minimize it as much as possible.

Tip: To crop the original image, use the Image Editor or third party software.

Understanding cropping

Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. When an image is loaded into a container, one of two things happens, depending on the container's settings:

  • Most of the time - The image conforms to the container's dimensions, which vary based on browser width. If the image isn't the same shape as the container, the image crops to fill the container completely.
  • Sometimes - The container’s shape conforms to the dimensions of the image so the whole image displays.

In most cases, images on your site display within the containers' dimensions, and will experience some cropping. This helps images look their best while adapting to different browser sizes.

bryler-overlay.png

Blocchi immagine

Image Blocks display images at their original height and width ratio, within your site's layout restrictions.

Suggerimenti:

  • Crop the image with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle.
  • After cropping, use the focal point to center the image.
  • Make the image smaller by adding Spacer Blocks on either side.

Banner

Se tutte le immagini banner hanno lo stesso rapporto dimensionale, sarà più facile prevedere come verranno ritagliate. Configura al meglio le tue immagini seguendo i nostri suggerimenti per la formattazione delle immagini banner.

There are other ways to control banner cropping on your site, depending which version of Squarespace your site is on.

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 apparirà 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

Images added to site-wide banner images (added within Site Styles) can repeat, display at the banner height or width, or fill the container completely.

Suggerimenti:

Immagini di sfondo

How you control background image cropping depends on which version of Squarespace your site is on.

Upload and manage background images in section styles

Per maggiori informazioni, visita Aggiungere immagini banner

Background images can repeat, display at the browser height or width, or fill the browser screen completely.

Suggerimenti:

  • Use Site Styles to choose how the banner image displays.
  • See our troubleshooting tips for help with mobile display.
  • Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.
  • When choosing a full-bleed background image, consider how visitors will access your site.

Sezioni galleria e Pagine galleria

In base alla versione di Squarespace del tuo sito, questo presenterà diverse opzioni galleria.

Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display. 

Per maggiori informazioni, visita Sezioni galleria nella versione 7.1.

How images appear in your Gallery Page depends on your template. Visit your template's guide to learn how images might crop to fit your Gallery Page’s design.

Blocchi Galleria

How images display in a Gallery Block depends on the format: Slideshow, Grid, Carousel, or Stacked.

Suggerimenti:

  • For any format, resize the whole block by adding Spacer Blocks on either side.
  • Slideshow - The gallery’s height is set by the widest image. To avoid cropping or blank space around images, use images with similar aspect ratios.
  • Grid - In the Design tab, use the aspect ratio to crop all images to the same shape, and change the number of thumbnails per row to change their size. Use the focal point to adjust how each image centers.
  • Carousel - Adjust the height with the cropping handle.
  • Stacked - Each image expands to fill the width of the page or column the block is in.

Portfolio and Index Pages

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.

How images appear in an Index Page depends on your template. Visit your template's guide to learn more.

Pagine negozio

How cropping affects product images depends on which version of Squarespace your site is on.

After uploading images to your store sections, use the Product Items tweaks to style them:

  1. Durante la modifica di una pagina, apri Stili sito.
  2. Clicca su Articoli di prodotto.

Experiment with different style tweaks to set how your product images display.

Per maggiori informazioni, visita Sezioni di pagine della raccolta nella versione 7.1.

Il modo in cui le immagini del prodotto vengono ritagliate sulla pagina di destinazione dipende dal tipo di Pagina negozio del tuo modello.

Classico

  • In Site Styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
  • If you're cropping, use the Product Item Size tweak to set the shape.
  • Use the focal point to adjust where the image centers.
  • If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
  • 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 negozio, usa il tweak Rapporto dimensionale immagine nella sezione Prodotti: Layout di Stili sito.
  • Use the focal point to adjust where the image centers.

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 139