Questo articolo tratta 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 può essere suddiviso in diverse aree.
Nell’editor sono presenti diverse sezioni predefinite: la barra di navigazione superiore, il pannello laterale, l’area centrale dei contenuti (spesso chiamata canvas dell’editor) e il pannello di design laterale. Queste sezioni costituiscono la base per costruire siti web secondo la visione dell’utente.
Barra di navigazione superiore
La barra di navigazione superiore all’interno dell’editor contiene scorciatoie utili per diverse azioni del sito.
La barra di navigazione superiore consente di:
- Menu hamburger. Aprire il menu hamburger sul lato sinistro della barra di navigazione superiore per accedere alla modalità sviluppatore, alla dashboard del sito, alla lingua della piattaforma e a varie risorse di creazione e supporto del sito.
- Navigazione tra le pagine. Fare clic sul menu a discesa delle pagine per visualizzare un elenco delle pagine del sito. È possibile passare a una pagina selezionandola da questo menu.
- Icone dei dispositivi. Passare tra diverse visualizzazioni delle dimensioni dello schermo (chiamate anche breakpoint) facendo clic sulle icone dei dispositivi. Questo consente di visualizzare in anteprima come appare la pagina corrente su varie dimensioni dello schermo, da desktop a tablet fino a mobile.
- Annulla e Ripristina. Fare clic sui pulsanti Annulla o Ripristina quando necessario durante il lavoro nell’editor.
- Indicatore di salvataggio del progresso. L’icona con il segno di spunta funge da indicatore dello stato attuale del sito e del corretto salvataggio delle modifiche.
- Commenti del sito. Fare clic per aprire il pannello dei commenti del sito. Se è presente un nuovo commento, compare un punto rosso sul pulsante dei commenti del sito nella barra superiore.
- Condividi. Fare clic su Condividi per accedere al link di anteprima del sito per dimensione dello schermo, dominio del sito, nome del sito e gestione del cliente.
- Anteprima delle modifiche. Fare clic per visualizzare in anteprima il sito, comprese le modifiche non pubblicate, su tutte o singole dimensioni dello schermo dei dispositivi.
- Pubblica o ripubblica. Utilizzare il pulsante Pubblica o Ripubblica per pubblicare il sito con le modifiche più recenti.
- Pulsante Home. Fare clic sull’icona Home per tornare alla dashboard del sito.
Pannello laterale
Il pannello laterale funge da toolkit completo per gestire vari aspetti del design e della funzionalità del sito.
Di seguito sono riportate le opzioni predefinite disponibili nel pannello laterale:
- Aggiungi. Da questo elemento, è possibile trascinare e rilasciare Widget, Media e Testo del sito sul canvas.
- Pagine. Aggiungi, visualizza e gestisci pagine e popup.
- Tema. Definisci stili e impostazioni predefinite per tutto il testo, i colori, i pulsanti, le immagini, gli sfondi, le righe, le colonne, il layout, la larghezza e la spaziatura del sito.
- CMS. Gestisci raccolte e contenuti raccolti dai clienti.
- SEO/AEO. Gestisci le impostazioni SEO per pagine, immagini, link interni ed esterni e altro ancora.
- Altro. Fornisce accesso a Blog, Negozio, Prenotazioni, Personalizzazione, Impostazioni e Dashboard del sito.
Tieni presente che, dopo aver installato Blog, Prenotazioni o Negozio, questi vengono aggiunti al pannello laterale per un accesso facile e veloce.
Area contenuti / Canvas
L’Area contenuti / Canvas è il punto in cui puoi spostare o aggiungere qualsiasi nostra funzionalità, oppure fare clic e modificarla. L’area contenuti consente di cambiare immagini, testo, modificare ed eliminare pulsanti e molto altro.
Per imparare ad aggiungere e configurare elementi nel canvas, consulta Progettare con Flex.
Per ulteriori informazioni sulle opzioni di modifica del canvas, consulta Azioni e opzioni del canvas.
Pannello di design
Il pannello di design offre una gamma di impostazioni di progettazione per gli elementi selezionati, consentendo una personalizzazione precisa. Che tu stia modificando l’allineamento del contenuto del layout, la spaziatura tra gli elementi, l’animazione o lo sfondo, il pannello di design fornisce un insieme completo di strumenti per migliorare l’aspetto visivo del tuo sito web. Le opzioni di design includono regolazioni del layout, configurazioni delle dimensioni, impostazioni di allineamento e altro ancora, adattate all’elemento selezionato.
Per saperne di più sul Pannello di design e sulle sue sezioni, consulta Pannello di design.
Struttura del website builder
Il Website Builder è costruito a partire da un’intestazione, un piè di pagina, righe, sezioni e colonne. Ogni widget che aggiungi viene inserito in una di queste sezioni.
Righe
Le righe sono le sezioni orizzontali del sito. Quando aggiungi widget e colonne al tuo sito, questi vengono posizionati all’interno di tali righe. Per modificare il modo in cui il contenuto viene visualizzato nella vista mobile, fai clic sull’opzione inverti ordine colonne nell’editor delle righe.
Puoi aggiungere righe al sito trascinando i widget nel sito. Quando trascini un widget tra le righe o in uno spazio in cui vuoi aggiungere una riga, verrà creata una nuova riga quando rilasci il widget.
Per eliminare una riga, fai clic con il tasto destro in qualsiasi punto della riga per aprire il menu contestuale, quindi fai clic su Elimina. In alternativa, fai clic sul pulsante Riga nell’angolo in alto a sinistra della riga, quindi fai clic su Elimina.
Per informazioni dettagliate sulla modifica e organizzazione delle righe, consulta Editor delle righe.
Slider di immagine di sfondo
Gli slider di immagine di sfondo possono essere utilizzati per impostare immagini di sfondo per righe o colonne.
Dopo aver selezionato più immagini nel selettore immagini, fai clic su Fatto. Una volta creato lo slider, seleziona una transizione diapositiva dal menu a discesa e sposta il cursore per selezionare una velocità diapositiva (secondi).
Qualsiasi altra opzione dell’immagine di sfondo, come Sovrapposizione sfondo, Posizionamento e stile di visualizzazione, può essere applicata allo slider.
Sezioni progettate (modelli di sezioni predefinite)
Le sezioni sono righe di elementi predefiniti che gli utenti possono aggiungere ai propri siti responsive. Le sezioni consentono agli utenti di creare rapidamente siti dall’aspetto gradevole, facendo risparmiare tempo durante il processo di progettazione. L’infrastruttura è stata realizzata per offrire una migliore esperienza utente con una varietà di sezioni già pronte.
Nota
- Le sezioni non utilizzano alcun CSS personalizzato e sono tutte costruite all’interno dell’editor dai designer.
- Le sezioni non utilizzano le impostazioni del colore del testo o del font del testo del tema del sito. Tuttavia, puoi sempre cancellare la formattazione e applicare il tuo design.
Aggiungere sezioni
Per aggiungere sezioni di widget:
- Passa il cursore tra le righe e fai clic su Aggiungi sezione.
- Seleziona Progettato. Le sezioni vengono visualizzate nel pannello laterale.
- In Modalità Sezione, nel pannello sinistro è disponibile una galleria di sezioni predefinite, raggruppate in categorie (Introduzione, Funzionalità, Chi siamo, Team, Testimonianze e così via).
- Nel pannello laterale, fai clic su una sezione per visualizzarla come una nuova riga. Puoi quindi sfogliare le sezioni dello stesso gruppo utilizzando i tasti freccia oppure selezionando una sezione di un gruppo diverso.
- Per incorporare la sezione nel sito, fai clic su Salva. In alternativa, fai clic su Salva e aggiungi un’altra per continuare ad aggiungere sezioni al tuo sito. La sezione viene convertita in una riga e tutti gli elementi al suo interno sono modificabili.
Allineamento dei widget
Quando si allineano widget all’interno della stessa colonna, il website builder cerca di farli agganciare in modo che abbiano la stessa dimensione. Durante il ridimensionamento, il builder salta in avanti o indietro per agganciarsi alla posizione corretta. Questo dovrebbe rendere più facile creare widget della stessa dimensione.
Esiste anche una funzione Aggancia alla griglia. La funzione Aggancia alla griglia aiuta a disporre i widget nelle pagine del tuo sito con precisione professionale. Questo sistema consente di allineare i widget orizzontalmente e verticalmente all’interno di colonne e righe. I righelli vengono mostrati quando si sposta un elemento nella sua riga o colonna, oppure quando si ridimensiona il widget. Gli elementi allineati sono contrassegnati con un bordo colorato. Un widget può essere allineato con più di un altro widget, a seconda del caso d’uso specifico.
L’allineamento è supportato nelle visualizzazioni dei tre diversi dispositivi (desktop, tablet, mobile).
Intestazione e piè di pagina
Per ulteriori informazioni sulla configurazione di intestazioni e piè di pagina, consulta:
- Intestazioni
- Piè di pagina