Nota: Sebbene le nostre guide più popolari siano state tradotte in spagnolo, alcune guide sono disponibili solo in inglese.
Creare righe e colonne con i blocchi

Puoi disporre il contenuto del tuo sito in colonne e righe trascinando i blocchi e seguendo le linee guida un corretto posizionamento.

Se non hai ancora familiarità con la piattaforma Squarespace, ti consigliamo di leggere le seguenti guide e guardare i nostri video tutorial:

Suggerimento: Presta attenzione alle linee guida, le righe di colore nero visualizzate quando clicchi e trascini i blocchi. Se la linea guida si estende sull'altezza della pagina, verrà creata una nuova colonna. Se invece questa si estende sull'intera larghezza, verrà creata una nuova riga.

Watch a video

Glossario

Prima di creare righe e colonne, ti consigliamo di rivedere questi termini:

Griglia dell'area di contenuto

La griglia dell'area dei contenuti è uno schema invisibile che controlla i punti in cui puoi posizionare blocchi. Nella maggior parte delle aree, come le Pagine Semplici e i post, la griglia supporta fino a 12 colonne e un numero illimitato di righe.

Alcune aree specifiche di determinati template, come le barre laterali e i piè di pagina, hanno diversi limiti. Per maggiori informazioni, consulta le nostre guide dei template.

Linee guida

Quando sposti un blocco, visualizzerai delle linee di colore nero per mostrarti il punto in cui lo posizionerai.

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 in movimento

Quando clicchi su un blocco e lo trascini per cambiare la sua posizione all'interno della griglia, il blocco apparirà semi-trasparente. 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. 

Blocco Linea e Blocco Spazio

Il Blocco Linea e il Blocco Spazio sono utili per separare il contenuto in righe e colonne.

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 Spazio e Linea per separare temporaneamente il contenuto mentre definisci la struttura di una pagina. Utilizza un Blocco Linea per dividere le righe, quindi aggiungi blocchi per creare nuove colonne. Una volta organizzato il contenuto, rimuovi i Blocchi Linea o Spazio. Ricorda che i Blocchi di Testo potrebbero unirsi dopo aver eliminato una Linea o Spazio.

Creare colonne

Sono disponibili due tipi di colonne:

  • Una colonna a pagina intera è una nuova colonna che occupa tutta l'altezza di una pagina. Questa divide l'intera pagina, creando maggiore spazio per impilare i blocchi in verticale.
  • Una colonna della stessa altezza si allinea a un blocco in una colonna esistente. Non inserisce le righe sopra o sotto. Anziché creare una colonna che divide l'intera pagina, una colonna della stessa altezza crea un layout più complesso.

Per creare una colonna:

  1. Passa il 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 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.

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.

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 del mouse tra i due blocchi.
  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

Così come per le colonne, puoi creare due tipi di 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. Utilizza le linea guida per posizionare il blocco sull'intera riga o allineato.
Suggerimento: I Blocchi Immagine, Blocchi Spazio, Blocchi Mappa e i Blocchi Galleria a carosello prevedono un'icona di ritaglio che permette di 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.

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.

Creare righe e colonne di solo testo

Organizzare il testo in colonne o righe può risultare problematico. I Blocchi di Testo spesso vengono uniti quando posizionati uno accanto all'altro. Per evitatlo, utilizza un Blocco di 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.

Aggiungi il tuo primo Blocco di Testo in qualsiasi punto della pagina.

In seguito, clicca su un Punto di Inserimento in qualunque punto della pagina per aggiungere un Blocco Spazio. Clicca sul blocco e trascinalo accanto al primo Blocco di Testo.

Clicca su un Punto di inserimento in una posizione qualsiasi della pagina per aggiungere il prossimo Blocco di Testo. Dal momento che a volte può essere difficile spostare i Blocchi di Testo una volta posizionati, clicca su questo secondo blocco e trascinalo direttamente dall'opzione Text (Testo) nel Menu dei blocchi. Visualizzerai delle linee guida proprio come quando sposti un blocco già posizionato.

Sposta il secondo Blocco di Testo verso il Blocco Spazio finché la linea guida non si riduce alla stessa altezza, quindi rilascialo. Aggiungi il testo al nuovo blocco. 

A questo punto, avrai ottenuto due colonne di testo, separate da uno spazio. Ripeti il processo aggiungendo Blocchi Spazio e Testo per creare il numero di colonne desiderato. Quando hai posizionato tutte le colonne, elimina i Blocchi Spazio per visualizzare solo le colonne di testo.

Righe di testo

I Blocchi Testo quando impilati spesso si uniscono in un singolo blocco. Per tenere i blocchi separati, ti consigliamo di dividere il testo con un Blocco Linea o Spazio. Per creare uno spazio più definito, puoi utilizzare 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. Questa è la stessa struttura che visualizzerai nei contenuti dimostrativi di alcuni template, tra cui Five.

Per iniziare, aggiungi tre Blocchi Immagine creando colonne, seguendo i passaggi per creare righe della stessa larghezza.

In seguito, 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.

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

Risoluzione dei problemi

Suggerimento: Ti consigliamo di provare a trascinare e rilasciare blocchi mentre crei la struttura della pagina. Soprattutto se utilizzi da poco Squarespace, cambiare la posizione dei blocchi è un ottimo modo per acquisire familiarità con la piattaforma e ottenere il layout desiderato.

Le mie immagini hanno dimensioni diverse

Per un miglior risultato, prima di caricare le immagini, assicurati che il rapporto dimensionale sia lo stesso. Nella maggior parte dei casi, consigliamo di utilizzare immagini almeno di 1500 pixel di larghezza. Per informazioni su come regolare le immagini, visita Formattare le immagini per la visualizzazione sul web.

Le mie colonne non sono uguali

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

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

Per modificare la larghezza delle colonne, segui gli step della sezione Colonne in questa guida. Se hai un numero diverso di colonne (ad esempio, hai cinque o sette blocchi in una riga), queste avranno necessariamente larghezze diverse.

Le colonne diventano righe su un dispositivo mobile

È assolutamente normale. Il design responsive di Squarespace impila automaticamente i blocchi in verticale su dispositivi mobili

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 49 su 128
Creare righe e colonne con i blocchi