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

Spostare i blocchi per personalizzare i layout

Sposta i blocchi all'interno delle pagine per personalizzare i layout o creare colonne e righe.

Questa guida è lo step successivo ad Aggiungere contenuto con blocchi, guida che ti consigliamo di consultare prima di iniziare a utilizzare Squarespace, se hai iniziato da poco a utilizzare la piattaforma.

Nota: puoi spostare un blocco all'interno dell'area di contenuto della pagina dove è stato aggiunto. Non è possibile spostare i blocchi fra pagine o aree di contenuto separate, ad esempio da un piè di pagina a un'intestazione.

Guarda un video

Questo video si riferisce alla versione 7.0, ma si applica anche alla versione 7.1.

Come funzionano i layout dei blocchi

Prima di spostare i blocchi, ti consigliamo di rivedere questi termini per maggiori informazioni sul funzionamento del nostro sistema a blocchi.

Griglia dell'area di contenuto

La griglia dell'area contenuti è uno schema invisibile che controlla i punti in cui puoi posizionare blocchi. Nella maggior parte delle aree, come le Pagine di layout e i post del blog, la griglia supporta fino a 12 colonne e un numero illimitato di righe. Alcune aree, come i piè di pagina, possono avere limiti diversi.

Blocchi in movimento

Quando clicchi su un blocco e lo trascini per cambiare la sua posizione all'interno della griglia, il blocco apparirà semi-trasparente.

Caselle grigie

Se sposti un blocco all'interno di un'area di testo, visualizzerai una casella grigia per indicare in che modo il testo verrà disposto attorno al blocco.

Linee guida

Quando sposti un blocco, appaiono delle linee nere, chiamate linee guida, che indicano dove stai posizionando il blocco. Sono particolarmente utili quando vuoi creare colonne e righe.

Mentre trascini i blocchi, le linee guida cambieranno per mostrarti se il blocco:

  • Occuperà l'intera altezza di una pagina, creando una nuova colonna
  • Occuperà l'intera larghezza della pagina, creando una nuova riga
  • Corrisponderà all'altezza o alla larghezza di un altro blocco, posizionando il blocco in una colonna o riga già esistente.

Blocchi linea e Blocchi spazio

I Blocchi linea e i Blocchi spazio sono strumenti utili per separare il contenuto in colonne e righe.

Poiché i Blocchi di Testo spesso si uniscono quando impilati, puoi utilizzare una Linea o un Blocco Spazio per dividere il testo ed evitare che i blocchi si uniscano. Consulta la nostra guida sui Blocchi di Testo per maggiori dettagli.

Puoi anche utilizzare i Blocchi linea e spazio per separare temporaneamente il contenuto mentre definisci la struttura di una pagina o di un'area contenuti. Utilizza un Blocco linea o spazio per dividere le righe, quindi aggiungi blocchi per creare nuove colonne parallele. Una volta organizzato il contenuto, rimuovi i blocchi linea o spazio, tenendo presente che i Blocchi di testo potrebbero unirsi dopo aver eliminato la linea o lo spazio. 

Spostare un blocco

Per spostare un blocco:

  1. Passa il mouse sul blocco che desideri spostare. Il puntatore assumerà la forma di una mano.
  2. Clicca sul blocco e trascinalo per spostarlo all'interno della pagina.
  3. Quando trascini il blocco, utilizza le linee guida e le caselle per scegliere la nuova posizione.
  1. Tocca e tieni premuto il blocco che desideri spostare. Il blocco apparirà grigio e si muoverà sopra il contenuto.
  2. Trascina il blocco e spostalo nella pagina.
  3. Quando trascini il blocco, utilizza le linee guida e le caselle per scegliere la nuova posizione.

Immagini flottanti e altri blocchi nel testo

Puoi spostare un blocco all'interno di un'area di testo per creare un effetto di disposizione del testo. Questo video si riferisce alla versione 7.0, ma si applica anche alla versione 7.1.

Puoi utilizzare un'immagine per creare un layout a più colonne in un post o in una pagina.

Per creare questo layout, clicca su un blocco e trascinalo su un Blocco di testo. La casella grigia mostrerà la posizione in cui il blocco apparirà nel testo.

Creare colonne e righe

Questo video si riferisce alla versione 7.0, ma si applica anche alla versione 7.1.

Creare colonne

Le colonne possono occupare l'intera altezza dell'area contenuti o allinearsi a un blocco in una riga esistente per creare una colonna di altezza corrispondente. Per creare una colonna:

  1. Passa il mouse sul blocco che desideri spostare.
  2. Il puntatore assumerà la forma di un'icona con la mano. Clicca sul blocco e trascinalo per spostarlo all'interno della pagina.
  3. Mentre sposti il blocco, visualizzerai delle linee guida che mostrano la nuova colonna.
  4. Segui gli step di seguito per aggiungere una colonna a pagina intera o una colonna della stessa altezza.

Creare una colonna a pagina intera

Per creare una nuova colonna che si estenda per l'intera altezza della pagina, clicca su un blocco e trascinalo fino ad estendere la linea guida in verticale lungo l'intera pagina. In questo modo puoi creare una nuova colonna che occupa tutta la pagina.

full_height_column.gif

Creare una colonna della stessa altezza

Per creare una colonna che abbia la stessa altezza di un altro blocco, clicca sul blocco e trascinalo finché la linea guida non corrisponde all'altezza dell'altro blocco. Questa operazione è utile per posizionare blocchi uno accanto all'altro, sopra o sotto blocchi più grandi.

matching_height_column.gif

Modificare la larghezza della colonna

Per creare colonne della stessa larghezza, dovrai avere uno dei seguenti numeri di colonne:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Se hai un numero diverso di colonne, queste avranno una larghezza diversa. Questo principio si applica a tutte le aree dei contenuti, ad eccezione delle barre laterali e alcuni piè di pagina.

Per modificare la larghezza di una colonna: 

  1. Passa il cursore tra due blocchi fino a visualizzare due frecce, che puntano a sinistra e a destra.
  2. Clicca e trascina per estendere e ridurre la dimensione della colonna.
  3. In questo modo modificherai la larghezza della colonna e la dimensione totale di entrambi i blocchi.
  4. Ripetere l'operazione con gli spazi tra altri blocchi della riga, in base alle necessità.

Crere righe

Le righe possono occupare l'intera larghezza dell'area di contenuto o allinearsi ad un blocco in una colonna esistente per creare una pila. Per creare una riga:

  1. Posiziona il puntatore del mouse sul blocco che desideri spostare.
  2. Il puntatore assumerà la forma di una mano permettendoti di cliccare sul blocco e trascinarlo per spostarlo all'interno della pagina.
  3. Mentre sposti il blocco, visualizzerai le linee guida che mostrano la nuova colonna o riga che sarà occupata dal blocco.
  4. Segui gli step sottostanti per inserire il blocco in una riga a pagina intera o in una riga allineata.
Suggerimento: i Blocchi immagine, Blocchi spazio, Blocchi mappa e Blocchi galleria a carosello includono un'icona di ritaglio che puoi utilizzare per regolare l'altezza del blocco. Utilizza questi blocchi per personalizzare l'altezza delle righe sulla tua pagina.

Creare una riga a pagina intera

Per creare una nuova riga che occupi l'intera larghezza della pagina o del post, clicca su un blocco e trascinalo finché la linea guida non si estende in orizzontale lungo l'intera pagina.

full_width_row.gif

Creare una riga della stessa larghezza

Per applicare la stessa larghezza di un altro blocco, sposta un blocco sopra o sotto un altro, finché la linea guida non coincide con la larghezza del blocco esistente. Anziché creare una riga intera lungo la pagina, questa azione consente di impilare blocchi verticalmente, uno sull'altro.

matching_width_row.gif

Creare colonne e righe di solo testo

Organizzare il testo in colonne o righe può risultare complicato. I Blocchi di testo spesso vengono uniti quando sono impilati. Puoi evitare che accada utilizzando dei Blocchi spazio per separare il contenuto mentre crei la struttura della pagina.

Colonne di testo

Spostare il testo in colonne è un ottimo modo per dividere visivamente il contenuto o per allineare il testo ad altri blocchi, come i Blocchi Immagine. Per creare colonne di testo:

  1. Aggiungi il tuo primo Blocco di Testo in qualsiasi punto della pagina.
  2. Clicca su un Inserisci punto in un'area qualsiasi della pagina per aggiungere un Blocco spazio. Clicca sul blocco e trascinalo accanto al primo Blocco di testo.

add_spacer_block.gif

  1. Clicca su un Inserisci punto in un'area qualsiasi della pagina per aggiungere il successivo Blocco di testo. Poiché a volte può essere difficile spostare i Blocchi di testo dopo averli posizionati, clicca sull'icona Testo e trascinala direttamente dal menu Blocchi. Verranno visualizzate le linee guida, proprio come quando sposti un blocco già posizionato.
  2. Trascina l'icona Testo verso il Blocco spazio finché la linea guida non si riduce alla stessa altezza, quindi rilasciala e aggiungi il testo.

second_text_block.gif

  1. Ripeti il processo aggiungendo Blocchi Spazio e Testo per creare il numero di colonne desiderato.
  2. Quando hai posizionato tutte le colonne, elimina i Blocchi Spazio per visualizzare solo le colonne di testo.

Righe di testo

Quando impilati, i Blocchi di testo si uniscono spesso in un singolo blocco. Per tenere i blocchi separati, ti consigliamo di dividere il testo con un Blocco linea o spazio. Per degli spazi più definiti, usa un Blocco linea. Per creare uno spazio più ampio, utilizza un Blocco spazio.

Combinare righe e colonne

Puoi creare una combinazione di righe e colonne per personalizzare la pagina. Un esempio comune è la pagina "Informazioni" su un'azienda o "Chi Siamo", in cui puoi posizionare Blocchi di testo con Blocchi immagine allineati. In questo esempio, stiamo allineando tre Blocchi immagine a tre Blocchi di testo.

Per combinare colonne e righe:

  1. Aggiungi tre Blocchi immagine, ciascuno nella propria colonna, seguendo gli step per creare colonne della stessa altezza descritti sopra.
  2. Aggiungi un nuovo Blocco di testo sotto ogni Blocco immagine. Verifica che la linea guida corrisponda al Blocco immagine, in questo modo creerai una nuova riga all'interno della colonna esistente sotto ogni immagine.

text_under_image.gif

Se hai bisogno di inserire dei titoli, aggiungili a ciascuna colonna utilizzando altri Blocchi di Testo allineati ai Blocchi Immagine.

Risoluzione dei problemi

Le mie immagini hanno dimensioni diverse

Per un risultato migliore, assicurati che le immagini da caricare abbiano lo stesso rapporto dimensionale. Nella maggior parte dei casi, consigliamo di utilizzare immagini con almeno 1500 pixel di larghezza. Per informazioni su come adattare le immagini, visita Formattare le immagini per la visualizzazione sul web

Il mio layout di colonne e righe non viene visualizzato su un dispositivo mobile

Per una maggiore leggibilità su dispositivi mobili ed evitare che i visitatori debbano ingrandire o scorrere per visualizzare il contenuto, il design responsive di Squarespace allinea automaticamente i blocchi in verticale. L'ordine dei blocchi dipenderà dalla struttura delle colonne e delle righe.

Per maggiori informazioni, visita Visualizzazione di pagine e blocchi su dispositivi mobili.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 35 su 142
Spostare i blocchi per personalizzare i layout