Panoramica dell'editor

Questo articolo illustra le aree dell'editor e come aggiungere e configurare sezioni, righe, colonne, righe interne e l'allineamento dei widget.

Panoramica dell'interfaccia dell'editor

L'editor si divide in diverse aree predefinite: la barra di navigazione superiore, il pannello laterale e l'area centrale dei contenuti (spesso chiamata editor canvas). Queste aree sono la base per costruire siti web secondo la tua visione.

Barra di navigazione superiore

La barra di navigazione superiore dell'editor contiene comode scorciatoie per diverse azioni sul sito.

Ecco cosa trovi nella barra di navigazione superiore:

• Menu a hamburger. Apri il menu a hamburger, sul lato sinistro della barra di navigazione superiore, per accedere al Pannello di controllo del progetto, alla lingua della piattaforma e a varie risorse per creare il sito e ricevere assistenza.
• Navigazione tra le pagine. Fai clic sul menu a discesa delle pagine per vedere l'elenco delle pagine del tuo sito. Da qui puoi andare a una pagina selezionandola.
• Icone dei dispositivi. Con le icone dei dispositivi passi tra le diverse dimensioni dello schermo (chiamate anche breakpoint). Così vedi in anteprima come appare la pagina corrente sulle varie dimensioni, dal desktop al tablet al mobile. Per saperne di più, consulta «Dimensioni dello schermo e dispositivi».
• Annulla e ripeti. Fai clic sui pulsanti Annulla o Ripeti quando ti serve mentre lavori nell'editor.
• Indicatore di salvataggio. L'icona con il segno di spunta mostra a che punto è il tuo sito e se le modifiche sono state salvate correttamente.
• Anteprima delle modifiche. Fai clic per vedere in anteprima il tuo sito, comprese le modifiche non pubblicate, su tutte le dimensioni dello schermo o su una sola.
• Pubblica o ripubblica. Usa il pulsante di pubblicazione o ripubblicazione per pubblicare il sito con le ultime modifiche.
• Pulsante Ritorno a casa. Fai clic sull'icona Ritorno a casa per tornare al tuo Pannello di controllo del progetto.

Pannello laterale

Il pannello laterale è una cassetta degli attrezzi completa per gestire i vari aspetti del design e del funzionamento del tuo sito.

Ecco le opzioni predefinite del pannello laterale:

• Aggiungi. Da qui trascini e rilasci widget, media e testo del sito sul canvas.
• Pagine. Aggiungi, consulta e gestisci pagine e popup.
• Tema. Definisci stili e impostazioni predefiniti per tutti i testi, i colori, i pulsanti, le immagini, gli sfondi, le righe, le colonne, il layout, la larghezza e gli spazi del tuo sito.
• CMS. Gestisci le collezioni e i contenuti raccolti.
• SEO/AEO. Gestisci le impostazioni SEO di pagine, immagini, link interni ed esterni e altro.
• Altro. Dà accesso a Personalizzazione, Impostazioni e al Pannello di controllo del progetto.

Area dei contenuti / Canvas

Nell'area dei contenuti / canvas sposti o aggiungi le nostre funzioni, oppure fai clic su di esse per modificarle. Qui cambi immagini e testi, modifichi ed elimini pulsanti e molto altro.

Struttura del Costruttore di siti web

Il Costruttore di siti web è composto da una testata, un piè di pagina, righe, sezioni e colonne. Ogni widget che aggiungi viene inserito in una di queste aree.

Righe

Le righe sono le sezioni orizzontali del tuo sito. Quando aggiungi widget e colonne, questi si collocano dentro le righe. Per cambiare il modo in cui il contenuto appare nella vista mobile, fai clic sull'opzione per invertire l'ordine delle colonne nell'editor delle righe.

Puoi aggiungere righe trascinando i widget nel sito. Quando trascini un widget tra due righe o in uno spazio in cui vuoi una nuova riga, al rilascio del widget viene creata una riga.

Per eliminare una riga, fai clic destro in un punto qualsiasi della riga per aprire il menu contestuale e poi fai clic su Elimina. In alternativa, fai clic sul pulsante Riga nell'angolo in alto a sinistra della riga e poi su Elimina.

Trovi informazioni dettagliate su come modificare e disporre le righe più in basso, in «Editor delle righe».

Editor delle righe

Con l'editor delle righe cambi lo sfondo di una riga (colore o immagine), aggiungi un bordo o regoli lo spazio interno ed esterno della riga. Le righe ti servono a organizzare e disporre il contenuto del tuo sito.

Per configurare le righe, passa il mouse sulla parte in alto a sinistra di una riga finché non compare un pulsante di riga e fai clic su Riga. Compare il menu dell'editor delle righe.

Hai le seguenti opzioni di configurazione:

• Fai clic sulle frecce Sposta riga in alto e Sposta riga in basso per spostare la riga corrente in alto o in basso.
• Fai clic su Aggiungi e scegli una di queste opzioni:
  • Riga precedente. Aggiunge una riga nuova sopra quella corrente.
  • Riga inferiore. Aggiunge una riga nuova sotto quella corrente.
  • Sezione. Aggiunge una sezione alla riga esistente.
  • Colonna. Aggiunge una colonna alla riga esistente.
  • Riga interna. Aggiunge una riga dentro quella corrente.
• Per eliminare lo spazio interno della riga, fai clic su Cancella spaziatura interna.
• Per riportare lo spazio al valore definito nello spazio del tema, fai clic su Ripristina la spaziatura predefinita.
• Per aggiungere un'animazione d'ingresso alla riga (ad esempio comparsa da destra, ingresso con rimbalzo o con zoom), fai clic su Entrance Animation e scegli un'opzione.
• Per salvare la riga come sezione, fai clic su Salva come sezione e scegli se salvare solo la riga corrente, più righe o l'intera pagina.
• Per nascondere la riga corrente su un dispositivo specifico (desktop, tablet, mobile), fai clic su Nascondi sul dispositivo e scegli il dispositivo.
• Per copiare la riga, fai clic su Copia.
• Per ancorare la riga alla pagina o eliminare un'ancora esistente, fai clic su Imposta come ancoraggio o Modifica ancoraggio.
• Per eliminare la riga, fai clic su Elimina.

Editor di design delle righe

Per modificare lo stile dello sfondo o lo spazio della riga:

1. Passa il mouse sulla parte in alto a sinistra di una riga finché non compare un pulsante di riga, fai clic su Riga e poi su Modifica design.
2. Nella scheda Impostazioni hai le seguenti opzioni:
   • Full bleed row. Per trasformare la riga in una riga a tutta larghezza, che permette al contenuto di occupare l'intera larghezza dello schermo, fai clic sull'opzione Riga a pagina intera. Se scegli di non usare righe a tutta larghezza, la larghezza del contenuto è limitata a 960px.
3. Nella scheda Stile, scegli un Colore dello sfondo, un'Immagine o un video. Hai le seguenti opzioni:
   • Color
     • Scegli un Colore di sfondo. Un colore a gradiente prevale sull'immagine, e viceversa.
     • Fai clic su Bordo per scegliere un tipo di bordo e muovi il cursore per impostarne lo spessore.
     • Per aggiungere un'ombra, fai clic sull'opzione Ombreggiatura e scegline colore, tipo e posizione.
   • Image

     • Per aggiungere un'immagine allo sfondo, fai clic su + per aprire il selettore di immagini.

     • Per creare uno slider di immagini di sfondo, seleziona più immagini dal selettore; vedi «Slider di immagini di sfondo» più in basso.

     • Scegli se mostrare l'immagine come Copertina, Immagine completa, Affianca o Nessuna ripetizione.

     • Per attivare lo scorrimento parallax su un'immagine di sfondo, fai clic sull'opzione Scorrimento di tipo parallasse. Quando è attivo, il contenuto dello sfondo scorre più lentamente di quello in primo piano.

       Nota: lo scorrimento parallax non è disponibile per lo slider di immagini di sfondo né su mobile. L'opzione per mantenere statica un'immagine di sfondo non è disponibile su tablet e mobile per una limitazione di iOS.

     • Configura Posizione, Sovrapposizione sfondo, Bordo e Ombreggiatura dell'immagine.

   • Video. Fai clic su Seleziona video per vedere i video caricati, oppure incolla nell'apposito campo l'URL del video di YouTube, Vimeo o Dailymotion. Per maggiori informazioni sugli sfondi video, consulta «Element Backgrounds».

Nota: per maggiori informazioni sugli sfondi, consulta «Element Backgrounds».

Colonne

Ogni riga contiene almeno una colonna. Le colonne ospitano tutti i widget del tuo sito e ne controllano la disposizione. Ogni volta che aggiungi una colonna, questa compare accanto a quella già presente nella riga.

Nelle viste desktop e tablet ogni riga può contenere fino a quattro colonne; su mobile, invece, una riga ne mostra al massimo due. Le colonne aggiunte nella vista desktop o tablet occupano tutta la larghezza della pagina quando passi alla vista mobile. Per creare una riga con due colonne su mobile, passa prima alla vista mobile e poi aggiungi un widget a due colonne.

Per eliminare una colonna, fai clic destro in un punto qualsiasi della colonna per aprire il menu contestuale e poi fai clic su Elimina. In alternativa, fai clic sulla X rossa nell'angolo in alto a destra della colonna.

Puoi mettere i widget direttamente nelle colonne oppure strutturare ancora di più la colonna aggiungendo righe interne.

Editor delle colonne

Con l'editor delle colonne cambi lo sfondo di una colonna (colore o immagine), aggiungi un bordo o regoli lo spazio interno ed esterno della colonna. Le colonne ti servono a organizzare e disporre il contenuto di una riga.

Per configurare una colonna:

1. Fai clic destro sulla colonna. Compare il menu dell'editor delle colonne.

   Nota: se la colonna non ha padding, il clic destro non funziona direttamente su di essa. In questo caso, fai clic destro su un widget che si trova nella colonna (si apre il menu contestuale del widget, con il suo nome in alto), fai clic su Seleziona contenitore e scegli Colonna. Per verificare di essere passato al menu contestuale della colonna, guarda in alto: ora dovrebbe indicare Colonna.

2. Fai clic sulle frecce Sposta colonna a sinistra e Sposta colonna a destra per spostare la colonna corrente a sinistra o a destra (le frecce sono disattivate se c'è una sola colonna).

3. Per aprire l'editor di design delle colonne, fai clic su Modifica design. Per maggiori informazioni, vedi «Editor di design delle colonne» più in basso. Compare l'editor di design delle colonne.

4. Fai clic su Aggiungi e scegli una di queste opzioni:

   • Colonna. Aggiunge una colonna nuova alla riga corrente (al massimo 4 colonne per riga su desktop e 2 su mobile).
   • Riga interna. Aggiunge una riga dentro la colonna corrente.
   • Il widget seguente. Aggiunge un widget.

5. Per eliminare lo spazio interno della colonna, fai clic su Cancella spaziatura interna.

6. Per riportare lo spazio al valore definito nello spazio del tema, fai clic su Ripristina la spaziatura predefinita.

7. Per aggiungere un'animazione d'ingresso alla colonna (ad esempio comparsa da destra, ingresso con rimbalzo o con zoom), fai clic su Entrance Animation e scegli un'opzione.

8. Per nascondere la colonna corrente su un dispositivo specifico (desktop, tablet, mobile), fai clic su Nascondi sul dispositivo e scegli il dispositivo.

9. Per copiare la colonna, fai clic su Copia.

10. Per ancorare la colonna alla pagina o eliminare un'ancora esistente, fai clic su Imposta come ancoraggio o Modifica ancoraggio.

11. Per eliminare la colonna, fai clic su Elimina.

Editor di design delle colonne

Per modificare lo stile dello sfondo o lo spazio di una colonna:

1. Fai clic destro sulla colonna e poi su Modifica design.

   Nota: se la colonna non ha padding, il clic destro non funziona direttamente su di essa. In questo caso, fai clic destro su un widget che si trova nella colonna (si apre il menu contestuale del widget, con il suo nome in alto), fai clic su Seleziona contenitore e scegli Colonna. Per verificare di essere passato al menu contestuale della colonna, guarda in alto: ora dovrebbe indicare Colonna.

2. Nella scheda Stile, scegli un Colore dello sfondo, un'Immagine o un video. Hai le seguenti opzioni:

   • Color
     • Scegli un Colore di sfondo. Un colore a gradiente prevale sull'immagine, e viceversa.
     • Fai clic su Bordo per scegliere un tipo di bordo e muovi il cursore per impostarne lo spessore.
     • Per aggiungere un'ombra, fai clic sull'opzione Ombreggiatura e scegline colore, tipo e posizione.
   • Image
     • Per aggiungere un'immagine allo sfondo, fai clic su + per aprire il selettore di immagini.
     • Per creare uno slider di immagini di sfondo, seleziona più immagini dal selettore; vedi «Slider di immagini di sfondo» più in basso.
     • Scegli se mostrare l'immagine come Copertina, Immagine completa, Affianca o Nessuna ripetizione.
     • Configura Posizione, Sovrapposizione sfondo, Bordo e Ombreggiatura dell'immagine.
   • Video. Fai clic su Seleziona video per vedere i video caricati, oppure incolla nell'apposito campo l'URL del video di YouTube, Vimeo o Dailymotion. Per maggiori informazioni sugli sfondi video, consulta «Element Backgrounds».

Nota: per maggiori informazioni sugli sfondi, consulta «Element Backgrounds».

Slider di immagini di sfondo

Gli slider di immagini di sfondo servono a impostare immagini di sfondo per righe o colonne.

Dopo aver selezionato più immagini nel selettore, fai clic su Fine. Una volta creato lo slider, scegli una Transizione diapositive dal menu a discesa e muovi il cursore per scegliere una Velocità della diapositiva (in secondi).

Allo slider puoi applicare tutte le altre opzioni dell'immagine di sfondo, come Sovrapposizione sfondo, la posizione e lo stile di visualizzazione.

Righe interne

Le righe interne danno più libertà di design perché ti permettono di aggiungere righe dentro le colonne. Con le righe interne puoi variare il layout delle colonne e mantenere il design generale della riga (ad esempio sfondo, spazio, bleed).

Come le righe normali, le righe interne possono avere un proprio sfondo e spazio, essere divise in un massimo di quattro colonne e cambiare l'ordine delle colonne su mobile. Le colonne di una riga interna possono contenere qualsiasi widget, ma non puoi aggiungere righe interne dentro quelle colonne.

Per aggiungere una riga interna a una colonna, fai una di queste cose:

• Fai clic destro sulla riga e poi su Aggiungi riga interna. Se la riga ha più colonne, scegli a quale aggiungere la riga interna.
• Fai clic destro sulla colonna e poi su Aggiungi riga interna.
• Fai clic destro sulla riga interna e poi su Aggiungi riga per mettere una riga interna sotto quella corrente.

Esempio di righe interne

Per capire come usare le righe interne, vediamo due modi per progettare un layout con un titolo e 3 pulsanti:

Esempio 1: aggiungi due righe. Metti il titolo nella riga 1 con 1 colonna. Dividi la riga 2 in 3 colonne. Metti un pulsante in ogni colonna. Tieni presente che due righe separate non possono condividere la stessa immagine di sfondo, e che devi impostare spazio e stile al vivo separatamente per ogni riga.

Esempio 2: aggiungi una riga. Di base, ogni riga contiene una colonna. Aggiungi 2 righe interne alla colonna. Metti il titolo nella riga interna 1. Dividi la riga interna 2 in 3 colonne. Metti un pulsante in ogni colonna. Queste due righe interne condividono lo sfondo, lo spazio e lo stile al vivo della riga principale.

Alcune cose importanti quando modifichi le righe interne:

• Le frecce per cambiare l'ordine funzionano solo tra righe interne. Per cambiare l'ordine tra widget e righe interne, devi trascinare manualmente i widget sopra o sotto la riga interna.
• I widget a 2, 3 e 4 colonne non si possono mettere nelle righe interne. Per aggiungere una colonna, fai clic destro sulla riga e poi su Aggiungi colonna.
• A differenza delle righe normali, le righe interne non si possono copiare e incollare.

Sezioni disegnate (template di sezione predisegnati)

Le sezioni sono righe di elementi già pronte che puoi aggiungere ai tuoi siti responsive. Ti permettono di creare siti belli in fretta e di risparmiare tempo durante la progettazione. L'infrastruttura è stata creata per offrire un'esperienza migliore con un'ampia varietà di sezioni già pronte.

Nota:

• Le sezioni non usano CSS personalizzato e sono create interamente dai designer dentro l'editor.
• Le sezioni non usano il colore o il font del testo definiti nelle impostazioni del tema del sito. Puoi però sempre rimuovere la formattazione e applicare il tuo design.

Aggiungere sezioni

Per aggiungere sezioni di widget:

1. Passa il mouse tra due righe e fai clic su Aggiungi sezione.
2. Scegli Progettato. Le sezioni compaiono nel pannello laterale.
3. Nella modalità sezioni, nel pannello di sinistra trovi una galleria di sezioni già pronte, raggruppate per categorie (Intro, Features, About, Team, Testimonials e così via).
4. Nel pannello laterale, fai clic su una sezione per mostrarla come nuova riga. Poi puoi sfogliare le sezioni dello stesso gruppo con i tasti freccia o scegliere una sezione di un altro gruppo.
5. Per incorporare la sezione nel sito, fai clic su Salva. In alternativa, fai clic su Salva e aggiungi un altro per continuare ad aggiungere sezioni. La sezione si trasforma in una riga e tutti i suoi elementi sono modificabili.

Creare una sezione flex con l'IA

Per semplificare la creazione e avere più libertà di design, puoi usare l'Assistente IA per generare contenuto e design delle sezioni flex.

Per istruzioni dettagliate su come creare sezioni flex con l'IA, consulta «Creare una sezione flex con l'IA».

Allineamento dei widget

Quando allinei i widget nella stessa colonna, il costruttore di siti prova ad allinearli con Allineamento automatico perché abbiano esattamente le stesse dimensioni. Mentre ridimensioni, salta avanti o indietro per agganciarsi alla posizione. Così è più facile rendere due widget delle stesse dimensioni.

Esiste anche la funzione Allinea alla griglia, che ti aiuta a disporre i widget nelle pagine del tuo sito con precisione professionale. Con questo sistema allinei i widget in orizzontale e in verticale dentro colonne e righe. Quando sposti un elemento nella sua riga o colonna, o quando ridimensioni un widget, compaiono delle guide. Gli elementi allineati sono contrassegnati da un bordo colorato. A seconda del caso, un widget può allinearsi con più di un altro widget.

L'allineamento funziona nelle viste dei tre diversi dispositivi (desktop, tablet, mobile).