Spostare i blocchi per personalizzare i layout

Clicca e trascina i blocchi in nuove posizioni per riorganizzare i contenuti del tuo sito web.

Ultimo aggiornamento 8 settembre 2024

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 post del blog.

Guarda un video

Questo video mostra l'editor classico.

Spostare un blocco

Ovunque tu aggiunga blocchi in Squarespace, puoi spostare i blocchi per personalizzare il layout. Per spostare un blocco:

  1. Passa il mouse sul blocco che desideri spostare. Quando il cursore diventa una mano, fai clic e trascina il blocco per spostarlo all'interno della pagina. Se la mano non appare, prima fai clic sul blocco. 
  2. Quando trascini il blocco, utilizza le linee guida visualizzate per scegliere la nuova posizione.

Il punto dove posizionare i blocchi e come cambiano i layout quando li sposti dipende da dove stai spostando i blocchi:

  • In Editor fluido, l'attuale esperienza di modifica di Squarespace, posiziona i blocchi ovunque nella griglia dell'area del contenuto, anche sovrapponendoli ad altri blocchi. Organizzerai separatamente i layout per computer e dispositivi mobili per i blocchi. Per ulteriori informazioni, consulta i layout di Editor fluido di seguito.
  • Nell'editor classico, posiziona i blocchi ovunque accanto ad altri blocchi o blocchi mobili nel testo. I layout vengono riorganizzati automaticamente per riempire gli spazi vuoti e i blocchi non possono sovrapporsi. Le modifiche apportate al layout del computer incidono sul layout per dispositivi mobili. Per ulteriori informazioni, consulta i layout dell'editor classico di seguito.
  1. Tocca e tieni premuto il blocco che desideri spostare. In questo modo, passerà sopra il contenuto.
  2. Trascina il blocco e spostalo nella pagina.
  3. Quando trascini il blocco, utilizza le linee guida per scegliere la nuova posizione.

Suggerimento

per rendere i tuoi contenuti accessibili a un pubblico più ampio possibile, visita Risorse per l'accessibilità di Squarespace.

Layout Editor fluido

L'attuale esperienza di modifica dei blocchi su Squarespace si chiama Editor fluido. È supportato nei siti realizzati con la versione 7.1, in tutte le aree in cui si aggiungono sezioni di blocco, incluse pagine di layout, pagine secondarie del portfolio e piè di pagina. Gli elementi della raccolta e le sezioni di blocco aggiunte prima del rilascio di Editor fluido utilizzano l'editor classico.

A causa del sistema a griglia in Editor fluido, lo spostamento di un blocco può far sì che anche alcuni blocchi attorno ad esso si spostino leggermente. Ciò accade per mantenere l'equilibrio generale del layout della sezione. 

Tieni presente che in Editor fluido imposterai le visualizzazioni per computer e dispositivi mobili separatamente.

Blocchi centrali

Per centrare un blocco orizzontalmente, fai clic e trascina il blocco verso il centro della sezione e rilascialo quando una linea gialla appare verticalmente attraverso il centro della griglia. Il blocco potrebbe ridimensionarsi leggermente per garantire la posizione al centro della sezione.

Creare blocchi con smarginatura completa

Quando sposti un blocco al di fuori della griglia dell'Editor fluido, questo si ridimensiona in base al margine della larghezza del contenuto della sezione. Si crea così un effetto di smarginatura completa. Alcuni blocchi, come i blocchi immagine impostati su Riempi, potrebbero dover essere ritagliati in modo diverso per creare tale effetto. 

Imposta l'allineamento e la sovrapposizione dei contenuti

Dopo aver spostato un blocco in una nuova posizione in Editor fluido, si visualizza la barra degli strumenti del blocco.

  • Per allineare il contenuto del blocco orizzontalmente, verticalmente o in entrambi i sensi all'interno dei bordi del blocco, clicca sulle icone di allineamento nella barra degli strumenti del blocco. Tieni presente che alcuni blocchi, come i Blocchi immagine e i Blocchi pulsante impostati su Riempi, non hanno opzioni di allineamento.
  • Se i blocchi si sovrappongono, nella barra degli strumenti si visualizzano le icone Sposta in avanti e Sposta all'indietro in modo da poter stabilire quale blocco è in alto. Se molti blocchi si sovrappongono, potrebbe essere necessario fare clic più volte per portare il blocco completamente avanti o indietro.
  • Per rendere più visibile il contenuto dei blocchi che si sovrappongono, aggiungi dei colori di sfondo ad alcuni di essi.

Disporre più blocchi contemporaneamente

Evidenzia diversi blocchi cliccandoli e trascinandoli sullo sfondo della sezione. Poi, sposta o disponi tutti i blocchi evidenziati contemporaneamente:

  • Per spostare più blocchi evidenziati contemporaneamente, clicca e trascina uno dei blocchi. In questo modo, tutti i blocchi evidenziati vengono spostati contemporaneamente, mantenendo la loro disposizione originale.
  • Per allineare tutti i blocchi evidenziati contemporaneamente, clicca sul pulsante Allinea gruppo che appare nella barra degli strumenti. Quindi, seleziona una delle opzioni di allineamento.
  • Per spostare tutti i blocchi evidenziati indietro o avanti, clicca sui pulsanti Sposta indietro o Porta avanti che appaiono nella barra degli strumenti.
  • Per ridimensionare tutti i blocchi evidenziati, passa il mouse su uno dei quadrati del contorno di un blocco finché non diventa una freccia, quindi clicca e trascina i blocchi più grandi o più piccoli.

Per evidenziare e spostare contemporaneamente tutti i blocchi in una sezione dell'Editor fluido, premi Command+A o Ctrl+A, quindi fai clic e trascinali.

Layout editor classici

Tutte le aree di blocco nei siti della versione 7.0 utilizzano l'editor classico. È anche presente in alcune aree dei siti della versione 7.1:

  • Post del blog, eventi e ulteriori informazioni sui prodotti
  • Sezioni di blocco aggiunte prima dell'Editor fluido

Spostare i blocchi

Nella maggior parte delle aree che utilizzano l'editor classico, una griglia invisibile supporta fino a 12 colonne e un numero illimitato di righe. Alcune aree, come i piè di pagina, possono presentare limitazioni diverse.

  • Quando clicchi su un blocco e lo trascini per cambiare la sua posizione all'interno della griglia, il blocco appare semi-trasparente.
  • Quando si sposta un blocco, appaiono delle linee nere chiamate "linee guida" per mostrare dove lo si sta posizionando, cosa particolarmente utile quando si creano colonne e righe.
  • sposti un blocco all'interno di un'area di testo, come quando crei una citazione, visualizzerai una casella grigia per indicare in che modo il testo verrà disposto attorno al blocco.

Posizionare blocchi

Mentre trascini un blocco, si visualizzano linee guida che mostrano cosa accadrà quando lo rilasci:

  • Linea verticale alta come l'area del contenuto: il blocco si estenderà per tutta l'altezza della pagina, creando una nuova colonna
  • Linea orizzontale larga come l'area del contenuto: il blocco si estende su tutta la larghezza della pagina, creando una nuova riga
  • Linea corrispondente all'altezza o alla larghezza di un altro blocco: il blocco sarà aggiunto a una colonna o riga esistente, alla stessa altezza o larghezza di quel blocco

Separare i blocchi in colonne e righe

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 sezione di seguito 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 o di un'area di contenuto. Utilizza un Blocco linea 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 si uniranno dopo aver eliminato la linea o lo spazio.

Layout per dispositivi mobili

La disposizione dei blocchi sui browser mobili dipende dall'editor in cui si trovano i blocchi:

  • Editor fluido: i layout per dispositivi mobili e computer sono separati. Fai clic sull'icona Visualizzazione mobile in alto a destra per visualizzare e modificare il layout per dispositivi mobili della pagina. Lo spostamento dei blocchi nel layout per computer non incide sul layout per dispositivi mobili. 
  • Editor classico: non è possibile modificare separatamente i layout per computer e dispositivi mobili. Il layout per dispositivi mobili corrisponde al layout per computer e i blocchi si riorganizzano automaticamente per adattarsi ai dispositivi più piccoli.

Creare colonne e righe

Il tuo sito include una serie di opzioni per la creazione automatica di colonne e righe con tipi di contenuto comuni. Puoi aggiungere più contenuti nel tempo senza dover ricorrere a molte modifiche manuali. Ti consigliamo di utilizzare queste opzioni per colonne e righe pulite e coerenti, tra cui:

Tuttavia, se è necessario creare colonne e righe con altri tipi di contenuto o in layout non supportati dalle opzioni precedenti, è possibile creare colonne e righe con set di blocchi:

  • Editor fluido: posiziona i blocchi e ridimensionali utilizzando le linee guida della griglia per colonne e righe coerenti, quindi disponi il layout per dispositivi mobili in colonne e righe diverse, se necessario.
  • Editor classico: la creazione di colonne e righe è più complessa. Il resto di questa guida spiega come creare manualmente colonne e righe nell'editor classico.

Questo video mostra la versione 7.0, ma si applica anche all'editor classico nella versione 7.1.

Creare colonne nell'editor classico

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. Il puntatore assumerà la forma di un'icona con la mano. Se la mano non appare, prima fai clic sul blocco.
  2. 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 delle colonne

Per creare colonne della stessa larghezza, devi 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 del tuo sito, 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 le dimensioni 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à.

Creare righe nell'editor classico

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

  1. Passa il mouse sul blocco che desideri spostare. Il puntatore assumerà la forma di un'icona con la mano. Se la mano non appare, prima fai clic sul blocco.
  2. Clicca sul blocco e trascinalo 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 uno strumento 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 nell'editor classico

Organizzare il testo in colonne o righe può risultare problematico. I Blocchi di testo spesso vengono uniti quando sono impilati. Per evitarlo, utilizza un blocco spaziatore 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 punto di inserimento 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 su questo secondo blocco e trascinalo direttamente dall'opzione Testo nel menu Blocco. Visualizzerai delle 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 colonne e righe nell'editor classico

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 di colonne e righe nell'editor classico

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 responsive design di Squarespace allinea automaticamente i blocchi in verticale. L'ordine dei blocchi dipenderà dalla struttura delle colonne e delle righe.

Per maggiori informazioni, visita Come si impilano i blocchi nell'editor classico.

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.

Spostare i blocchi per personalizzare i layout