Questo articolo illustra le aree dell'editor e come aggiungere e configurare sezioni, righe, colonne, righe interne e allineamento dei widget.
L'editor può essere suddiviso in diverse aree.
Nell'editor ci sono diverse sezioni predefinite: la barra di navigazione superiore, il pannello laterale, l'area centrale del contenuto (spesso indicata come l'area di disegno dell'editor). Queste sezioni sono la base per la costruzione di siti web in base alla visione dell'utente.
La barra di navigazione superiore contiene utili scorciatoie per diverse azioni del sito.
La barra di navigazione superiore consente di:
-
Navigazione della pagina: Fai clic sul menu delle pagine per accedere a un menu a discesa che mostra tutte le pagine disponibili sul tuo sito. È possibile navigare tra le pagine selezionandole da questo menu.
-
Passa da una visualizzazione all'altra dello schermo (chiamate anche punti di interruzione) facendo clic sulle icone del dispositivo. Ciò ti consente di visualizzare in anteprima l'aspetto della tua pagina corrente su schermi di varie dimensioni, dal desktop al tablet al cellulare. Per ulteriori informazioni, vedere Dimensioni dello schermo e dispositivi.
-
Funzionalità di ricerca: Fai clic sull'icona della lente di ingrandimento per cercare tutto ciò di cui hai bisogno all'interno dell'editor o accedi al centro assistenza per assistenza.
-
Info e tool: Fare clic sull'icona delle informazioni per accedere alle seguenti informazioni:
-
Informazioni sul sito. Visualizza il nome del sito, lo stato di pubblicazione, la versione dell'editor e un collegamento al dashboard del sito.
-
Link di anteprima. Visualizza il collegamento di anteprima per il sito. Per copiare il collegamento, selezionare il tipo di dispositivo e fare clic su Copia.
-
Statistiche. Visualizza le statistiche di base per il sito. Per visualizzare ulteriori informazioni, fai clic su Apri statistiche. Queste informazioni sono disponibili solo per i siti pubblicati. Per ulteriori informazioni, consulta Statistiche e analisi del sito.
-
Lingua dell'editore. Cambia la lingua dell'editor. Ciò non influisce sulla lingua del sito. Per cambiare la lingua dell'editor, seleziona una lingua dal menu a discesa.
-
-
Indicatore di avanzamento del salvataggio: L'icona del segno di spunta funge da indicatore dell'avanzamento attuale del sito e se le modifiche sono state salvate correttamente.
-
Annulla o Ripeti: È possibile utilizzare le funzionalità di annullamento e ripristino rappresentate dalle frecce circolari avanti e indietro per ripristinare o riapplicare le azioni recenti eseguite nell'editor.
-
Modalità sviluppatore: Entra in modalità sviluppatore facendo clic sull'icona appropriata. Questa modalità ti consente di accedere e modificare il codice HTML e CSS del tuo sito.
-
Anteprima delle modifiche: Fai clic sull'icona a forma di occhio per visualizzare l'anteprima del tuo sito, comprese le modifiche non pubblicate, su tutte le dimensioni dello schermo del dispositivo o su singole dimensioni.
-
Pubblica o ripubblica: Utilizza il pulsante Pubblica o Ripubblica per pubblicare il tuo sito con le modifiche più recenti.
-
Pulsante Home: Fai clic sull'icona della home per tornare alla dashboard del sito.
Il pannello laterale funge da toolkit completo per la gestione di vari aspetti del design e delle funzionalità del tuo sito. Puoi apportare modifiche ampie e radicali al design e alle funzionalità del tuo sito. Queste schede ti consentono di personalizzare l'aspetto del tuo sito, aggiungere nuove funzionalità e widget, configurare le impostazioni della pagina, gestire i contenuti, vendere prodotti online, pubblicare post sul blog, installare app e ottimizzare il tuo sito per i motori di ricerca.
Di seguito sono riportate le opzioni disponibili nel pannello laterale:
-
Tema
-
Pagine
-
Widget
-
Contenuto
-
Personalizza
-
Vendi online
-
Abbonamento
-
Blog
-
SEO e impostazioni
-
Uhide Elements (visibile solo se sono presenti elementi nascosti; applicabile solo per l'editor classico, nell'editor 2.0 e nella modalità flex, gli elementi nascosti possono essere trovati nella schermata Layer)
L'Area di contenuto/Area di disegno è il luogo in cui è possibile spostare o aggiungere una qualsiasi delle nostre funzionalità, oppure fare clic e modificare per modificarle. L'area dei contenuti consente di modificare immagini, testo, modificare ed eliminare i pulsanti e altro ancora.
Nota
Per ulteriori informazioni sulle opzioni di modifica dell'area di disegno, consultate Azioni e opzioni dell'area di disegno .
Il Website Builder è costituito da un'intestazione, un piè di pagina, righe e colonne. Ogni widget che aggiungi viene inserito in una di queste sezioni.
Le righe sono le sezioni orizzontali del tuo sito. Quando aggiungi widget e colonne al tuo sito, questi vengono inseriti all'interno di queste righe. Per modificare la modalità di visualizzazione dei contenuti nella visualizzazione per dispositivi mobili, fai clic sull'interruttore Inverti ordine delle colonne nell'editor di righe.
Puoi aggiungere righe al tuo sito trascinando i widget al suo interno. Quando trascini un widget tra le righe o in uno spazio in cui desideri aggiungere una riga, verrà creata una nuova riga quando rilasci il widget.
Per eliminare una riga, fare clic con il pulsante destro del mouse in un punto qualsiasi della riga per aprire il menu di scelta rapida, quindi fare clic su Elimina. In alternativa, fai clic sul pulsante Riga nell'angolo in alto a sinistra della riga e fai clic su Elimina.
Per informazioni dettagliate sulla modifica e la disposizione delle righe, vedere Editor di righe.
Utilizza l'editor di righe per modificare lo sfondo della riga (colore o immagine), aggiungere un bordo o regolare la spaziatura interna ed esterna della riga. Utilizza le righe per organizzare e disporre i contenuti del tuo sito.
Per configurare le righe:
-
hover in alto a sinistra di una riga finché non viene visualizzato un pulsante di riga, quindi fai clic su Riga. Viene visualizzato il menu Editor righe.
-
Fare clic sulle frecce Sposta riga su e Sposta riga giù per spostare la riga corrente verso l'alto o verso il basso.
-
Per aprire l'editor di progettazione delle righe, fai clic su Modifica design. Per ulteriori informazioni, vedere Editor di progettazione delle righe.Viene visualizzato l'Editor di progettazione delle righe.
-
Fai clic su +Aggiungi e seleziona una delle seguenti opzioni:
-
Riga sopra. Aggiungere una nuova riga sopra la riga corrente.
-
Riga sotto. Aggiungere una nuova riga sotto la riga corrente.
-
Sezione. Aggiungere una sezione alla riga.
-
Colonna. Aggiungere una colonna alla riga.
-
Riga interna. Aggiungere una riga all'interno della riga corrente.
-
-
Per cancellare la spaziatura interna all'interno della riga, fare clic su Cancella spaziatura interna.
-
Per ripristinare la spaziatura definita nella spaziatura del tema, fare clic su Ripristina spaziatura predefinita.
-
Per aggiungere un'animazione di ingresso alla riga (ad esempio, dissolvenza da destra, rimbalzo in avanti, zoom avanti), fare clic su Animazione ingresso e selezionare un'opzione.
-
Per salvare la riga come sezione, fare clic su Salva come sezione e selezionare questa opzione per salvare solo la riga corrente, più righe o l'intera pagina.
-
Per nascondere la riga corrente su un dispositivo specifico (desktop, tablet, dispositivo mobile), fare clic su Nascondi sul dispositivo e selezionare il dispositivo.
-
Per bloccare la riga per la modifica del cliente, fare clic su Blocca per la modifica del cliente.
-
Per copiare la riga, fare clic su Copia.
-
Per ancorare la riga alla pagina o eliminare un ancoraggio esistente, fare clic su Imposta come ancoraggio o Modifica ancoraggio.
-
Per eliminare la riga, fare clic su Elimina.
Per modificare lo stile dello sfondo o la spaziatura della riga:
-
hover in alto a sinistra di una riga finché non viene visualizzato un pulsante di riga, fare clic su Riga, quindi su Modifica design.
-
Nella scheda Impostazioni, sono disponibili le seguenti opzioni:
-
Fila al vivo. Per trasformare la riga in una riga al vivo, che consente al contenuto di estendersi per l'intera larghezza dello schermo, fare clic sull'interruttore Riga al vivo. Se scegli di non avere righe al vivo, la larghezza del contenuto è limitata a 960 px.
-
-
Nella scheda Stile, selezionare un colore di sfondo, un'immagine o un video. Sono disponibili le seguenti opzioni:
-
Colore
-
Seleziona un colore di sfondo. Il colore sfumato sostituisce l'immagine e viceversa.
-
Fare clic su Bordo per selezionare un tipo di bordo e spostare il dispositivo di scorrimento per impostare la larghezza del bordo.
-
Per aggiungere un'ombra, fare clic sull'interruttore Ombra e selezionare un colore, un tipo e una posizione per l'ombra.
-
-
Immagine
-
Per aggiungere un'immagine allo sfondo, fai clic su + per aprire il selettore di immagini.
-
Per creare un dispositivo di scorrimento delle immagini di sfondo, selezionare più immagini dal selettore di immagini e vedere Dispositivo di scorrimento delle immagini di sfondo.
-
Selezionare questa opzione per visualizzare l'immagine come Copertina, Immagine intera, Affianca o Nessuna ripetizione.
-
Per abilitare lo scorrimento parallasse su un'immagine di sfondo, fare clic sull'interruttore Scorrimento parallasse. Quando questa opzione è abilitata, il contenuto di sfondo scorre più lentamente rispetto al contenuto in primo piano.
Nota
-
Lo scorrimento parallasse non è un'opzione per il dispositivo di scorrimento dell'immagine di sfondo o per i dispositivi mobili.
-
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet e dispositivi mobili a causa di una limitazione di iOS.
-
-
Configura la posizione, la sovrapposizione dello sfondo, il bordo e l'ombra per l'immagine.
-
-
Video. Fai clic su Seleziona video per visualizzare i video caricati o incolla l'URL del video di YouTube, Vimeo o Dailymotion nell'apposito campo. Per ulteriori informazioni sugli sfondi video, consulta Sfondi degli elementi.
Nota
Per ulteriori informazioni sugli sfondi, vedere Sfondi degli elementi.
-
Ogni riga contiene almeno una colonna. Le colonne contengono tutti i widget del tuo sito e ne controllano la disposizione. Ogni volta che si aggiunge una nuova colonna, questa viene visualizzata accanto alla colonna esistente in quella riga.
Mentre le visualizzazioni su desktop e tablet consentono a ogni riga di contenere fino a quattro colonne, i siti per mobile possono mostrare al massimo due colonne. Le colonne aggiunte nella vista desktop o tablet assumeranno l'intera larghezza della pagina quando si passa alla visualizzazione per cellulare; per creare una riga con due colonne nella vistaper cellulare, passare a questa vista e aggiungere un widget a due colonne.
Per eliminare una colonna, fare clic con il pulsante destro del mouse in un punto qualsiasi della colonna per aprire il menu di scelta rapida, quindi fare clic su Elimina. In alternativa, fai clic sulla X rossa nell'angolo in alto a destra della colonna.
È possibile posizionare il widget direttamente nelle colonne o strutturare ulteriormente la colonna aggiungendo righe interne.
Usa l'editor colonne per modificare lo sfondo di una colonna (colore o immagine), aggiungere un bordo o regolare la spaziatura interna ed esterna della colonna. Usa le colonne per organizzare e disporre il contenuto in una riga.
Per configurare una colonna:
-
Fai clic con il pulsante destro del mouse sulla colonna. Si visualizza il menu dell'editor di colonne.
Nota
Se non è presente la Spaziatura interna sulla colonna, il clic destro non sarà direttamente accessibile. Per accedere alla colonna in questo caso, fare clic con il pulsante destro del mouse su un widget che si trova nella colonna (questo dovrebbe far apparire il menu contestuale per il widget e annoterà il nome di esso in alto), fare clic su Seleziona contenitore, selezionare Colonna. Per verificare che sia stato modificato nel menu contestuale della colonna, fare riferimento all'inizio; ora dovrebbe dire Colonna.
-
Fare clic sulle frecce Sposta colonna a sinistra e Sposta colonna a destra per spostare la colonna corrente a sinistra o a destra (le frecce saranno disabilitate se è presente una sola colonna).
-
Per aprire l'editor di progettazione delle colonne, fai clic su Modifica progettazione. Per ulteriori informazioni, vedere Editor di progettazione colonne. Viene visualizzato l'editor di progettazione delle colonne.
-
Fai clic su +Aggiungi e seleziona una delle seguenti opzioni:
-
Colonna. Aggiungi una nuova colonna alla riga corrente (è possibile aggiungere un massimo di 4 colonne per riga su desktop e 2 su dispositivi mobili).
-
Riga interna. Aggiungere una riga all'interno della colonna corrente.
-
widget qui sotto. Aggiungi un widget.
-
-
Per cancellare la spaziatura interna all'interno della colonna, fare clic su Cancella spaziatura interna.
-
Per ripristinare la spaziatura definita nella spaziatura del tema, fare clic su Ripristina spaziatura predefinita.
-
Per aggiungere un'animazione di ingresso alla colonna (ad esempio, dissolvenza da destra, rimbalzo in avanti, zoom avanti), fare clic su Animazione ingresso e selezionare un'opzione.
-
Per nascondere la colonna corrente su un dispositivo specifico (desktop, tablet, dispositivo mobile), fare clic su Nascondi sul dispositivo e selezionare il dispositivo.
-
Per bloccare la colonna per la modifica da parte del client, fare clic su Blocca per la modifica da parte del client.
-
Per copiare la colonna, fare clic su Copia.
-
Per ancorare la colonna alla pagina o eliminare un ancoraggio esistente, fare clic su Imposta come ancoraggio o Modifica ancoraggio.
-
Per eliminare la colonna, fare clic su Elimina.
Per modificare lo stile di sfondo o la spaziatura di una colonna:
-
Fare clic con il pulsante destro del mouse sulla colonna, quindi fare clic su Modifica design.
-
Nota
Se non è presente la Spaziatura interna sulla colonna, il clic destro non sarà direttamente accessibile. Per accedere alla colonna in questo caso, fare clic con il pulsante destro del mouse su un widget che si trova nella colonna (questo dovrebbe far apparire il menu contestuale per il widget e annoterà il nome di esso in alto), fare clic su Seleziona contenitore, selezionare Colonna. Per verificare che sia stato modificato nel menu contestuale della colonna, fare riferimento all'inizio; ora dovrebbe dire Colonna.
-
-
Nella scheda Stile, selezionare un colore di sfondo, un'immagine o un video. Sono disponibili le seguenti opzioni:
-
Colore
-
Seleziona un colore di sfondo. Il colore sfumato sostituisce l'immagine e viceversa.
-
Fare clic su Bordo per selezionare un tipo di bordo e spostare il dispositivo di scorrimento per impostare la larghezza del bordo.
-
Per aggiungere un'ombra, fare clic sull'interruttore Ombra e selezionare un colore, un tipo e una posizione per l'ombra.
-
-
Immagine
-
Per aggiungere un'immagine allo sfondo, fai clic su + per aprire il selettore di immagini.
-
Per creare un dispositivo di scorrimento delle immagini di sfondo, selezionare più immagini dal selettore di immagini e vedere Dispositivo di scorrimento delle immagini di sfondo.
-
Selezionare questa opzione per visualizzare l'immagine come Copertina, Immagine intera, Affianca o Nessuna ripetizione.
-
Configura la posizione, la sovrapposizione dello sfondo, il bordo e l'ombra per l'immagine.
-
-
Video. Fai clic su Seleziona video per visualizzare i video caricati o incolla l'URL del video di YouTube, Vimeo o Dailymotion nell'apposito campo. Per ulteriori informazioni sugli sfondi video, consulta Sfondi degli elementi.
Nota
Per ulteriori informazioni sugli sfondi, vedere Sfondi degli elementi.
-
Gli slider delle immagini di sfondo possono essere utilizzati per impostare immagini di sfondo per righe o colonne.
Dopo aver selezionato più immagini nel selettore di immagini, fare clic su Fine. Una volta creato il cursore, seleziona una transizione diapositiva dal menu a discesa e sposta il cursore per selezionare una Velocità diapositiva (secondi).
Inoltre, è possibile applicare allo slider tutte le altre opzioni per le immagini di sfondo, come Stile di visualizzazione, Posizionamento e Sovrapposizione sfondi.
Le righe interne consentono una maggiore flessibilità di progettazione grazie alla possibilità di aggiungere righe all'interno delle colonne. Con l'aiuto delle righe interne è possibile variare il layout delle colonne e mantenere la struttura generale della riga (ad esempio, sfondo, spaziatura, smarginatura).
Proprio come le righe normali, le righe interne possono avere il proprio sfondo e spaziatura, essere suddivise in un massimo di quattro colonne e avere l'ordine delle colonne modificato sui dispositivi mobili. Le colonne nelle righe interne possono essere popolate da qualsiasi widget, ma non è possibile aggiungere righe interne a tali colonne.
Per aggiungere una riga interna a una colonna, eseguire una delle operazioni seguenti:
-
Fare clic con il pulsante destro del mouse sulla riga e scegliere Aggiungi riga interna. Se nella riga sono presenti più colonne, scegliere la colonna a cui si desidera aggiungere le righe interne.
-
Fare clic con il pulsante destro del mouse sulla colonna e scegliere Aggiungi riga interna.
-
Fare clic con il pulsante destro del mouse sulla riga interna e scegliere Aggiungi riga per posizionare una riga interna sotto quella corrente.
Per un esempio di come utilizzare la riga interna, diamo un'occhiata a due modi di progettare un layout contenente un titolo e 3 pulsanti:
Esempio 1: aggiungere due righe. Inserire il titolo nella riga 1 con 1 colonna. Dividi la riga 2 in 3 colonne. Posiziona un pulsante in ogni colonna. Si noti che due righe separate non possono condividere la stessa immagine di sfondo ed è necessario impostare la spaziatura e lo stile di smarginatura separatamente per ogni riga.
Esempio 2: aggiungere una riga. Per impostazione predefinita, ogni riga contiene una colonna. Aggiungi 2 righe interne alla colonna. Posiziona il titolo nella riga interna 1. Dividi la riga interna 2 in 3 colonne. Posiziona un pulsante in ogni colonna. Queste due righe interne condivideranno lo sfondo, la spaziatura e la smarginatura della riga principale.
Alcune considerazioni importanti da prendere in esame quando si procede alla modifica delle righe interne:
-
Puoi utilizzare solo le frecce di commutazione dell'ordine per cambiare l'ordine tra le righe interne. Per cambiare l'ordine dei widget e delle righe interne, è necessario selezionare e trascinare manualmente i widget sopra o sotto la riga interna.
-
I widget a 2 colonne, 3 colonne e 4 colonne non possono essere inseriti nelle righe interne. Per aggiungere una colonna, fare clic con il pulsante destro del mouse sulla riga e scegliere Aggiungi colonna.
-
A differenza delle righe normali, le righe interne non possono essere copiate e incollate.
Le sezioni sono righe predefinite di elementi che gli utenti possono aggiungere ai loro siti reattivi. Le sezioni consentono agli utenti di creare rapidamente siti di grande impatto risparmiando tempo durante il processo di progettazione. L'infrastruttura è stata costruita in modo da fornire una migliore esperienza utente con una varietà di sezioni predefinite.
Nota
-
Le sezioni non utilizzano alcun CSS personalizzato e sono tutte costruite all'interno dell'editor da parte dei designer.
-
Le sezioni non utilizzano il colore del testo o le impostazioni del carattere del testo delle impostazioni del tema del sito. Tuttavia, puoi sempre cancellare il formato e applicare il tuo design.
-
Le sezioni non possono essere utilizzate nell'intestazione. Per cambiare la sezione completa dell'intestazione, apri l'editor dell'intestazione. Per ulteriori informazioni, vedere Intestazioni.
Aggiungi sezioni
Per aggiungere sezioni di widget:
-
hover tra le righe e fare clic su Aggiungi sezione.
-
Seleziona Progettato. Le sezioni vengono visualizzate nel pannello laterale.
-
Nella modalità Sezione, nel pannello di sinistra è disponibile una galleria di sezioni predefinite, raggruppate in categorie (Introduzione, Funzionalità, Informazioni, Team, Testimonianze e così via).
-
Nel pannello laterale, fare clic su una sezione per visualizzarla come una nuova riga. È quindi possibile sfogliare le sezioni all'interno dello stesso gruppo utilizzando i tasti freccia o selezionando una sezione da un gruppo diverso.
-
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 al tuo sito. La sezione viene convertita in una riga e tutti gli elementi della sezione sono modificabili.
Quando si allineano widget all'interno della stessa colonna, il Website Builder tenta di eseguire l'allineamento per allinearli in modo che abbiano esattamente le stesse dimensioni. Durante il ridimensionamento, il costruttore salta avanti o indietro per agganciarsi alla posizione. Questo dovrebbe rendere più facile rendere i widget della stessa identica dimensione.
C'è anche una funzione Snap to Grid. La funzione Aggancia alla griglia aiuta a posizionare 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 visualizzati quando si sposta un elemento nella sua riga o colonna o quando si ridimensiona il widget. Gli elementi allineati sono contrassegnati da 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 visuali dei tre diversi dispositivi (desktop, tablet, mobile).
Per ulteriori informazioni sulla configurazione di intestazioni e piè di pagina, vedere: