Aggiungi contenuti alle pagine del sito con questo sistema di editing drag-and-drop completamente personalizzabile.

L'Editor fluido è l'editor di contenuti principale per i siti Squarespace versione 7.1. In tutti i tipi di pagina, nei progetti portfolio e nel piè di pagina del sito, le sezioni a blocchi utilizzano l'Editor fluido.

L'Editor fluido è disponibile per tutte le sezioni a blocchi nei siti 7.1. L'Editor fluido non è attualmente supportato su:

• Aree del blocco che non utilizzano sezioni, come post del blog, descrizioni degli eventi e informazioni aggiuntive sul prodotto
• Sezioni che non utilizzano blocchi, come layout intelligenti, sezioni raccolta e sezioni galleria
• Siti nella versione 7.0

Al momento nell'app Squarespace non è possibile aggiungere o modificare i blocchi nelle sezioni Editor fluido.

Guarda un video

Avvio rapido con l'Editor fluido

L'Editor fluido è l'esperienza di modifica per i siti aggiornati alla versione 7.1 ed è disponibile per le sezioni di pagina che utilizzano i blocchi. Se il tuo sito è aggiornato alla versione 7.1, puoi iniziare a utilizzare l'Editor fluido in qualsiasi momento aggiungendo una pagina di layout, aggiungendo una sezione a blocchi a una pagina esistente o modificando il piè di pagina. Se il tuo sito ha sezioni a blocchi realizzate prima del rilascio dell'Editor fluido, puoi aggiornarle.

Con la griglia flessibile dell'Editor fluido, puoi posizionare i blocchi ovunque, anche sovrapponendoli ad altri, e ridimensionarli direttamente sulla pagina. Tieni presente che creerai due layout: uno per i visitatori che visualizzano il tuo sito su un computer e uno per i dispositivi mobili. Clicca sulle icone dei dispositivi nell'angolo in alto a destra per impostare i diversi layout.

Per maggiori dettagli, consulta il resto della guida.

Sto usando Editor fluido?

L'Editor fluido è supportato sui siti della versione 7.1 in queste aree:

• Sezioni a blocchi su qualsiasi pagina
• Piè di pagina
• Progetti portfolio

Quando clicchi su Modifica nella pagina, le sezioni dell'Editor fluido presentano un pulsante Aggiungi blocco nell'angolo in alto a sinistra. Quando clicchi su un blocco e lo trascini, sullo sfondo dovrebbe apparire una griglia.

Suggerimento: rendi visibile la griglia premendo G. Premi nuovamente G per nascondere la griglia.

Se non appare alcun pulsante o griglia, quest'area a blocchi utilizza l'editor classico.

Editor classico

Tutte le aree a blocchi della versione 7.0 utilizzano l'editor classico. Nei siti della versione 7.1, alcune aree a blocchi continuano a utilizzare il nostro editor classico, tra cui:

• Post
• Descrizioni di eventi
• Informazioni aggiuntive sui prodotti
• Sezioni di blocco aggiunte prima del rilascio di Editor fluido

Per saperne di più sulle differenze tra l'Editor fluido e l'editor classico, consulta Differenze tra Editor fluido e editor classico. 

Aggiungere una sezione dell'Editor fluido

Per aggiungere una sezione dell'Editor fluido a una pagina:

1. Clicca su Modifica nella pagina.
2. Clicca su Aggiungi sezione.
3. Clicca su Aggiungi sezione vuota per aggiungere una sezione vuota dell'Editor fluido, oppure clicca su una categoria per trovare le sezioni predefinite. Tieni presente che se nella sezione è presente un'icona i nell'angolo in alto a destra, si tratta di un layout intelligente che non fa uso dell'Editor fluido.

Per modificare l'altezza della griglia della sezione, clicca e trascina l'icona della freccia blu nell'angolo in basso a destra. Tieni presente che la quantità e il posizionamento dei blocchi potrebbero impedirti di diminuire l'altezza. Ogni sezione dell'Editor fluido ha un limite di 1000 righe.

Aggiorna le sezioni dell'editor classico

Nota: non è possibile riportare una sezione all'editor classico dopo averla aggiornata e aver salvato la pagina. Se non sei sicuro di voler utilizzare Editor fluido con una sezione ti consigliamo, per sicurezza, di duplicare la sezione prima di effettuare l'aggiornamento. Puoi anche aggiungere sezioni vuote dell'editor classico. 

Se hai aggiunto sezioni di blocco che utilizzano l'editor classico, puoi convertirle in sezioni Editor fluido. Per farlo:

1. Clicca su Modifica nella pagina.
2. Fai clic su Aggiorna in alto a sinistra di qualsiasi sezione dell'editor classico.
3. La sezione dell'editor classico diventa una sezione dell'Editor fluido. Se l'altezza dell'editor classico supera il limite di 1000 righe della griglia, verrà suddivisa in più sezioni di Editor fluido.

A causa delle differenze tra l'editor classico e l'Editor Fluido, il layout potrebbe cambiare leggermente o i blocchi potrebbero non essere allineati durante l'upgrade. Non tutti i layout dell'editor classico avranno un equivalente esatto nell'Editor fluido. Tuttavia, l'upgrade può essere un'ottima opportunità per riprogettare i layout dei blocchi con le nuove opzioni e la maggiore flessibilità dell'Editor fluido.

Se decidi che non vuoi utilizzare Editor fluido con quella sezione, fai clic su Annulla prima di salvare.

Aggiungere blocchi

Per aggiungere blocchi a una sezione dell'Editor fluido:

1. Clicca su Modifica nella pagina.
2. Clicca su Aggiungi blocco nell'angolo in alto a destra.
3. Seleziona il blocco che desideri aggiungere. Per maggiori informazioni sui diversi tipi di blocchi, visita Aggiungere contenuto con blocchi.

Non c'è un limite rigido per il numero di blocchi che puoi aggiungere, ma ti consigliamo di non aggiungere più di 60 blocchi per pagina, poiché troppi contenuti possono rallentare il caricamento del sito. I browser per dispositivi mobili, in particolare, potrebbero avere problemi a scaricare pagine con molti contenuti.

Dopo aver aggiunto i blocchi, puoi:

• Fissare i blocchi
• Duplicare i blocchi già presenti nella sezione
• Copiare e incollare i blocchi da e in altre sezioni dell'Editor fluido
• Spostare e ridimensionare i blocchi cliccando e trascinando
• Modificare il layout per dispositivi mobili per impostare la modalità di visualizzazione sui dispositivi mobili
• Scopri le procedure ottimali per rendere accessibili le sezioni dell'Editor fluido, soprattutto se stai creando sovrapposizioni di blocchi

Nota: l'Editor fluido non supporta i blocchi spaziatori. Questi vengono utilizzati nell'editor classico per aggiungere spazio tra i blocchi, tuttavia, l'Editor fluido consente di effettuare la stessa operazione cliccando sui blocchi e trascinandoli in nuove posizioni della sezione.

Fissare i blocchi

Fissa uno o più blocchi nelle sezioni di Editor fluido per mantenerli in posizione fissa mentre i tuoi visitatori scorrono gli altri contenuti della sezione. È un modo fantastico per mettere in evidenza un contenuto specifico e dare alla tua pagina un design inconfondibile.

Per fissare un blocco:

1. Clicca sul blocco, quindi clicca sull'icona a forma di puntina nella barra degli strumenti del blocco. Puoi fissare qualsiasi tipo di blocco.
2. Per impostazione predefinita, i blocchi che vengono fissati sono impostati in modo da essere allineati con la parte superiore della sezione. In alternativa, è possibile fare clic sulle icone corrispondenti per allinearli al centro o allinearli in basso.
3. Utilizza il cursore Offset per modificare la distanza tra il blocco fissato e il bordo del browser, tra 0 px e 50 px. Ad esempio, un blocco fissato allineato in alto a 0px rimarrà sul bordo del browser durante lo scorrimento da parte del visitatore.

Ti consigliamo di sperimentare diverse impostazioni per ottenere l'effetto desiderato.

Ricorda:

• I blocchi fissati rimangono bloccati solo nella loro sezione. Se la tua sezione non ha abbastanza contenuti o è molto ridotta, l'effetto fissato potrebbe non essere visibile.
• I blocchi fissati nel layout per computer non saranno tali nel layout per dispositivi mobili e viceversa.
• I blocchi fissati non sono supportati nell'editor classico né in altri tipi di sezioni di pagina.
• Sebbene non esista un limite al numero di blocchi che puoi fissare, le sezioni che contengono molti contenuti possono caricarsi con maggiore lentezza. Ti consigliamo di non aggiungere più di 60 blocchi, fissati o meno, per pagina. Per maggiori informazioni, visita Il mio sito si carica lentamente.

Aggiungere un colore di sfondo al blocco

Quando i blocchi con molto testo si sovrappongono ad altri contenuti, rendi il testo più leggibile aggiungendo un colore di sfondo al blocco. Per maggiori informazioni sul funzionamento delle palette di colori e dei temi cromatici, visita Modificare i colori.

Adattare o riempire i blocchi

Per impostare il padding tra blocchi immagine e blocchi pulsante, impostali su Adatta o Riempi. Se un blocco è impostato su Riempi, l'immagine o il pulsante occupa l'intero spazio del blocco, quindi i bordi dell'immagine o del pulsante saranno allineati con i blocchi adiacenti. Se un blocco è impostato su Adatta, uno spazio extra circonda l'immagine o il pulsante.

Per impostare i blocchi immagine o pulsante su Adatta o Riempi:

1. Clicca su un blocco immagine o pulsante, clicca sull'icona della matita, quindi sulla scheda Design.
2. Clicca su Adatta o Riempi. Per impostazione predefinita, i blocchi immagine sono impostati su Adatta, mentre i blocchi pulsante sono impostati su Riempi.
3. Se selezioni Adatta, le opzioni di allineamento vengono visualizzate sotto o nella barra degli strumenti del blocco.
4. Dopo aver apportato le modifiche, clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Editor fluido e responsive design

Tutti i siti Squarespace sono caratterizzati da un design reattivo per consentire un'ottima visualizzazione del sito su browser di varie dimensioni e dispositivi. La griglia flessibile dell'Editor fluido, in particolare, è realizzata in modo che quando i blocchi vengono riorganizzati, ridimensionati o modificati, gli altri blocchi della pagina possono spostarsi o ridimensionarsi per preservare i layout più complessi.

Ad esempio, posizionando un blocco di testo sopra un blocco immagine e poi aggiungendo altro testo al blocco di testo, il blocco immagine potrebbe ingrandirsi per adattarsi al testo aggiunto.

Se i blocchi si spostano o si ridimensionano in modo non desiderato, annullare le modifiche più recenti, quindi provare a spostarli prima di effettuare nuovamente le modifiche. Nell'esempio precedente, se volessi aggiungere del testo senza che le dimensioni del blocco immagine cambino, potresti spostare il blocco di testo fuori dal blocco immagine, aggiungere il testo e poi sovrapporlo nuovamente al blocco immagine.

Layout per dispositivi mobili

Nelle sezioni dell'Editor fluido, i layout per dispositivi mobili mostrano lo stesso contenuto, ma puoi impostare il layout per dispositivi mobili e ridimensionarne i blocchi indipendentemente dal layout su computer. Per impostare il layout per dispositivi mobili della sezione:

1. Clicca su Modifica nella pagina, quindi clicca sull'icona Vista dispositivo mobile nell'angolo in alto a destra.
2. Disponi e ridimensiona i blocchi come desideri.Per spostare automaticamente un blocco sopra o sotto un blocco adiacente, fai clic sul blocco, quindi fai clic su ↑ o ↓. Questo è un ottimo modo per riorganizzare rapidamente i blocchi nel layout mobile senza dover fare clic e trascinare.
3. Dopo aver apportato le modifiche, clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Qualsiasi modifica apportata al posizionamento o alle dimensioni dei blocchi non influirà sul layout per computer, incluso l'utilizzo dell'icona della freccia blu per aumentare o ridurre l'altezza della griglia. Eventuali modifiche al contenuto del blocco o agli stili di sezione sono globali e influiscono sui layout sia per dispositivi mobili sia per computer. Ad esempio:

• Spostare un blocco di testo in modo che si sovrapponga a un blocco immagine nel layout per dispositivi mobili non modificherà il layout su computer.
• Se modifichi il contenuto o il colore del testo, tali modifiche si ripercuotono su entrambi i layout.

Se aggiungi nuovi blocchi al sito dopo aver modificato il layout per dispositivi mobili, il nostro sistema organizza i nuovi blocchi in modo che siano il più possibile simili al layout per computer. Pertanto, quando apporti delle modifiche al tuo sito, ti consigliamo di verificare il layout per dispositivi mobili.

Definire lo stile delle sezioni dell'Editor fluido

Per definire lo stile delle sezioni dell'Editor fluido:

1. Clicca su Modifica nella pagina, quindi clicca su Modifica sezione nell'angolo in alto a destra della sezione che desideri modificare. Se Modifica sezione non viene visualizzato, è possibile che sia stato selezionato un blocco. Clicca sullo sfondo della sezione per far apparire Modifica sezione.
2. Nella scheda Formato, apporta modifiche di stile alla spaziatura e al padding della sezione. Ti consigliamo di provare diverse impostazioni per avere un'idea di come influiscono sull'aspetto del tuo sito. Scopri di seguito le tue opzioni.
3. Clicca su Sfondo per modificare le impostazioni dello sfondo. Per maggiori informazioni, visita Immagini di sfondo di sezione, Aggiungere video di sfondo e Scenographik di sezione.
4. Clicca su Colori per cambiare il tema cromatico della sezione. Per maggiori informazioni, visita Modificare i colori.
5. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure su Esci e poi su Salva per chiudere l'editor.

Opzioni di design

Modifica le seguenti impostazioni di stile nella scheda Design:

• Conteggio righe - Imposta il numero di righe nella griglia della sezione. Questa è l'unica opzione di stile di sezione in cui puoi avere impostazioni diverse nel layout per computer e per dispositivi mobili, ma il numero minimo di righe dipende anche dal numero di blocchi che hai aggiunto e da come sono disposti.
• Spazio - Imposta lo spazio tra le unità della griglia per controllare la distanza tra i blocchi. Puoi scegliere nessuno spazio, uno spazio predefinito o cliccare su ... per impostare spazi verticali e orizzontali personalizzati.
• Schermo intero - Attiva questa impostazione per avere un maggiore controllo sull'altezza e sull'allineamento dei tuoi contenuti. Se non vuoi padding intorno al contenuto della sezione, lascia l'impostazione disattivata. Le seguenti opzioni vengono visualizzate solo se l'impostazione Schermo intero è attivata:
  
  • Altezza - Aggiungi padding alla sezione al di fuori della griglia di sezione. Scegli tra altezza piccola, media o grande oppure clicca su ... per impostare un'altezza personalizzata.
  • Allineamento - Imposta il punto in cui appare il padding dell'altezza extra. Allinea il contenuto in alto per aggiungere padding sotto il contenuto. Allinea il contenuto al centro per aggiungere padding sopra e sotto il contenuto. Allinea il contenuto in basso per aggiungere padding sopra il contenuto.
• Divisore - Aggiunge e definisce un divisore nella parte inferiore della sezione. Per maggiori informazioni, visita Sezioni delle pagine.
• Link di ancoraggio - Aggiungi uno slug di ancoraggio specifico in modo da poter rimandare direttamente alla sezione. Per maggiori informazioni, visita Creare link di ancoraggio.

Differenze tra Editor fluido ed editor classico

Questa tabella illustra le differenze tra l'Editor fluido e l'editor classico. Sebbene condividano molte caratteristiche e funzionalità, i layout possibili variano e spesso solo l'Editor fluido dispone delle opzioni più aggiornate.

Funzionalità	Editor fluido	Editor classico
Layout e disposizione	Griglia flessibile con clic e trascinamento in cui i blocchi possono essere posizionati ovunque, anche sovrapposti ad altri. Utilizza il selettore di layout per provare diversi layout con i contenuti che hai aggiunto.	Griglia fissa con clic e trascinamento in cui i blocchi possono essere posizionati solo accanto ad altri blocchi, con alcune eccezioni come i blocchi mobili nel testo.
Blocchi disponibili	Tutti i blocchi tranne i blocchi spaziatori, che non sono necessari nell'Editor fluido. Crea spazio cliccando sui blocchi e trascinandoli in nuove posizioni.   I blocchi immagine non hanno layout integrati, ma puoi ricreare questi e altri layout nell'Editor fluido utilizzando blocchi immagine, blocchi di testo e sfondi blocco.	Tutti i blocchi tranne i blocchi forma, che sono un'esclusiva dell'Editor fluido.
Duplicazione di blocchi	Duplica uno o più blocchi contemporaneamente o copia e incolla i blocchi in altre sezioni dell'Editor fluido.	Non è possibile duplicare i blocchi o copiare e incollare i blocchi. Puoi invece duplicare pagine, post o sezioni.
Spostamento di blocchi	Clicca e trascina per spostare i blocchi in qualsiasi punto della sezione dell'Editor fluido. Sovrapponi altri blocchi e utilizza le linee guida per centrarli.	Clicca e trascina per spostare i blocchi accanto ad altri blocchi in griglie formate da un massimo di 12 colonne. I blocchi non possono sovrapporsi ad altri blocchi e la distanza tra di essi è fissa.
Ridimensionare i blocchi	Clicca e trascina dai bordi e dagli angoli del blocco per ridimensionarlo. La quantità e il tipo di contenuto possono influenzare il ridimensionamento di un blocco.	Utilizza altri blocchi nel layout per ridimensionare i blocchi. Alcuni blocchi dispongono anche di maniglie di ritaglio.
Design per dispositivi mobili	Progetta il tuo layout per dispositivi mobili indipendentemente dal layout su computer.	Il posizionamento del blocco sul computer imposta il layout per dispositivi mobili con il responsive design. Non è possibile organizzare il layout per dispositivi mobili in modo indipendente.

Ulteriore assistenza

Questa guida descrive le funzionalità e le opzioni di base specifiche dell'Editor fluido. Consulta le seguenti guide per maggiori informazioni su altre impostazioni di contenuto e di stile che appaiono nelle sezioni dell'Editor fluido:

• Per spostare, duplicare ed eliminare sezioni, visita Sezioni delle pagine
• Per informazioni sui diversi tipi di blocchi, visita Aggiungere contenuto con blocchi
• Per spostare i blocchi e organizzare i layout, visita Spostare i blocchi per personalizzare i layout
• Per ridimensionare i blocchi, visita Ridimensionare i blocchi
• Per impostare gli stili globali del sito, visita Apportare modifiche di stile
• Suggerimento: per rendere il design del tuo sito accessibile a un pubblico più ampio possibile, visita Risorse per l'accessibilità di Squarespace.