Questo articolo tratta le aree dell'editor e come aggiungere e configurare l'allineamento di sezioni, righe, colonne, righe interne e widget.
Suggerimento
Prendi la Duda Academy Vieni a conoscere Editor 2.0 corso per conoscere i vari menu e pannelli e come sono strutturate le pagine.
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 dei contenuti (spesso chiamata tela dell'editor)e il pannello di progettazione sul lato. Queste sezioni sono la base per la costruzione di siti Web in base alla visione dell'utente
La barra di navigazione superiore all'interno dell'editor contiene utili scorciatoie per diverse azioni del sito.
La barra di navigazione in alto consente di:
-
Menù hamburger. Apri il menu a forma di hamburger sul lato sinistro della barra di navigazione in alto per accedere alla modalità di sviluppo, alla dashboard del sito, alla lingua della piattaforma e a varie risorse di supporto e creazione di siti
-
Navigazione della pagina. Fai clic sul menu a discesa delle pagine per visualizzare un elenco di pagine del tuo sito. Puoi accedere a una pagina selezionandola da questo menu
-
Icone dei dispositivi. Passa da una visualizzazione dello schermo di dimensioni diverse (denominate anche punti di interruzione) facendo clic sulle icone del dispositivo. Ciò consente di visualizzare in anteprima l'aspetto della pagina corrente su schermi di varie dimensioni, dal desktop al tablet al cellulare Per saperne di più, consulta Dimensioni dello schermo e dispositivi.
-
Annulla e ripeti. Fate clic sui pulsanti Annulla o Ripristina, se necessario, quando lavorate nell'editor
-
Salva indicatore di avanzamento: L'icona del segno di spunta serve come indicatore dello stato di avanzamento attuale del sito e se le modifiche sono state salvate correttamente.
-
Commenti sul sito. Fai clic per aprire il pannello dei commenti del sito. Se è presente un nuovo commento, viene visualizzato un punto rosso sul pulsante dei commenti del sito nella barra in alto.
-
Condividi. Fai clic su Condividi per accedere al link di anteprima del sito in base alle dimensioni dello schermo, al dominio del sito, al nome del sito e alla gestione dei client
-
Anteprima delle modifiche: Fai clic per visualizzare l'anteprima del sito, comprese le modifiche non pubblicate, su tutte le dimensioni dello schermo o su singoli dispositivi.
-
Pubblica o ripubblica: Usa il pulsante pubblica o ripubblica per pubblicare il tuo sito con le ultime modifiche.
-
Tasto Home: Fai clic sull'icona principale per tornare alla dashboard del sito.
Il pannello laterale funge da toolkit completo per la gestione di vari aspetti del design e della funzionalità del sito.
Di seguito sono riportate le opzioni predefinite disponibili nel pannello laterale:
-
Aggiungi. Da questo elemento puoi trascinare facilmente widget, contenuti multimediali e testo del sito sulla tela
-
Pagine. Aggiungi, visualizza e gestisci pagine e popup
-
Strati (disponibile solo in Classic Editor utilizzando la modalità flex o in Editor 2.0). Fornisce una visualizzazione gerarchica degli elementi della pagina del sito, consentendoti di navigare e gestire facilmente strutture complesse
-
Tema. Definisci gli stili e le impostazioni predefiniti per tutto il testo, i colori, i pulsanti, le immagini, gli sfondi, le righe, le colonne, il layout, la larghezza e la spaziatura del tuo sito
-
CMS. Gestisci le raccolte e i contenuti raccolti dai clienti.
-
SEO/AEO. Gestisci le impostazioni SEO per pagine, immagini, link interni ed esterni e altro ancora.
-
Altro. Fornisce l'accesso al blog, Negozio, Prenotazioni, Personalizzazione, App Store, Impostazioni e dashboard del sito.
Nota che dopo aver installato Blog, Prenotazioni, o Store, sonoaggiunto al pannello laterale per un accesso facile e veloce.
L'area dei contenuti/tela è dove puoi spostare o aggiungere una qualsiasi delle nostre funzionalità o fare clic e modificarle per cambiarle. L'area dei contenuti consente di modificare immagini, testo, modificare ed eliminare pulsanti e altro ancora.
Nota
Per informazioni su come aggiungere e configurare elementi sulla tela, consulta Progetta con Flex.
Nota
Per ulteriori informazioni sulle opzioni di modifica della tela, consulta Azioni e opzioni Canvas .
Nota
Questo contenuto è rilevante sia per la modalità Flex in Classic Editor che per Editor 2.0. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Il pannello di progettazione offre una gamma di impostazioni di progettazione per elementi selezionati, consentendo una personalizzazione precisa. Che tu stia modificando il layout, l'allineamento dei contenuti, la spaziatura tra gli elementi, l'animazione e lo sfondo, il pannello di progettazione offre un set completo di strumenti per migliorare l'appeal visivo del tuo sito web. Le opzioni di progettazione includono regolazioni del layout, configurazioni di dimensionamento, impostazioni di allineamento e altro ancora,
Per saperne di più sul Pannello di progettazione e sulle sue sezioni, consulta Pannello di progettazione.
Il Website Builder è composto da un'intestazione, un piè di pagina, righe, sezionie colonne. Ogni widget aggiunto viene inserito in una di queste sezioni.
Nota
Se si utilizza la modalità flessibile in Classic Editor o Editor 2.0, le righe sono denominate «sezioni». Per saperne di più, consulta Progetta con Flex.
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 mobile, fai clic sull'interruttore per invertire l'ordine delle colonne nell'editor
Puoi aggiungere righe al tuo sito trascinando i widget nel sito. Quando trascini un widget tra le righe o in uno spazio in cui desideri aggiungere una riga, verrà creata una nuova riga quando rilasci
Per eliminare una riga, fai clic con il pulsante destro del mouse in un punto qualsiasi della riga per aprire il menu contestuale, quindi fai clic suElimina. In alternativa, fai clic suRigapulsante nell'angolo in alto a sinistra della riga e fai clic suElimina.
Per informazioni dettagliate sulla modifica e la disposizione delle righe, vedereEditor di righe.
Nota
Se si utilizza la modalità flessibile in Classic Editor o Editor 2.0, le righe sono denominate «sezioni». Per saperne di più, consulta Progetta con Flex.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Usa l'editor di righe per cambiare lo sfondo della riga (colore o immagine), aggiungere un bordo o regolare la spaziatura interna ed esterna della riga. Usa le righe per organizzare e disporre i contenuti del tuo sito
Per configurare le righe, passa il mouse sulla parte superiore sinistra di una riga finché non viene visualizzato un pulsante di riga e fai clic suRiga. Viene visualizzato il menu dell'editor di righe.
Sono disponibili le seguenti opzioni di configurazione:
-
Fai clic suSposta la riga verso l'altoeSposta la riga verso il bassofrecce per spostare la riga corrente verso l'alto o verso il basso.
-
Fare clic+Aggiungie seleziona una delle seguenti opzioni:
-
Riga sopra. Aggiungi una nuova riga sopra la riga corrente.
-
Fila in basso. Aggiungi una nuova riga sotto la riga corrente.
-
Sezione. Aggiungi una sezione alla riga esistente.
-
Colonna. Aggiungere una colonna alla riga esistente.
-
Fila interna. Aggiungi una riga all'interno della riga corrente.
-
-
Per cancellare la spaziatura interna all'interno della riga, fate clic suImbottitura trasparente.
-
Per ripristinare la spaziatura a quella definita nella spaziatura del tema, fai clic suReimposta la spaziatura predefinita.
-
Per aggiungere un'animazione di ingresso alla riga (ad esempio, dissolvenza da destra, rimbalzo, zoom avanti), fai clic suAnimazione d'ingressoe seleziona un'opzione.
-
Per salvare la riga come sezione, fai clic suSalva come sezionee seleziona per salvare solo la riga corrente, più righe o l'intera pagina.
-
Per nascondere la riga corrente su un dispositivo specifico (desktop, tablet, cellulare), fai clic suNascondi sul dispositivoe seleziona il dispositivo.
-
Per bloccare la riga per la modifica del client, fai clic suBlocca per la modifica da parte del client.
-
Per copiare la riga, fai clic suCopia.
-
Per ancorare la riga alla pagina o eliminare un ancoraggio esistente, fai clic suImposta come ancoraggio o Modifica ancoraggio.
-
Per eliminare la riga, fai clic suElimina.
Il video seguente mostra le varie opzioni di configurazione per le righe:
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Per modificare lo stile o la spaziatura dello sfondo della riga:
-
Passa il mouse sulla parte superiore sinistra di una riga finché non viene visualizzato un pulsante di riga, fai clic suRiga, quindi fai clic suModifica design.
-
SulImpostazionischeda, sono disponibili le seguenti opzioni:
-
Fila a sangue pieno. Per trasformare la riga in una riga piena, che consente al contenuto di estendersi su tutta la larghezza dello schermo,Riga a schermo interoattiva/disattiva. Se scegli di non avere righe con schermo intero, la larghezza del contenuto è limitata
-
-
SulStilescheda, seleziona un colore di sfondo, un'immagine o un video. Sono disponibili le seguenti opzioni:
-
Colore
-
Seleziona unColore dello sfondo. Il colore sfumato ha la precedenza sull'immagine e viceversa
-
Fare clicBordoper selezionare un tipo di bordo e spostare il cursore per impostare la larghezza del bordo.
-
Per aggiungere un'ombra, fai clic suOmbraattiva e seleziona un colore, un tipo e una posizione per l'ombra.
-
Il video seguente mostra come impostare il colore di sfondo per una riga:
-
-
Immagine
-
Per aggiungere un'immagine allo sfondo, fai clic su+per aprire il selettore di immagini.
-
Per creare un cursore per l'immagine di sfondo, seleziona più immagini dal selettore di immagini e vediCursore dell'immagine di sfondo.
-
Selezionare per visualizzare l'immagine comeCopertina,Immagine completa,Piastrella, oNessuna ripetizione.
-
Per abilitare lo scorrimento parallasse su un'immagine di sfondo, fai clic suScorrimento parallasseattiva/disattiva. Quando questa opzione è abilitata, il contenuto in background scorre più lentamente rispetto
Nota
-
Lo scorrimento parallasse non è un'opzione per il cursore dell'immagine di sfondo o nei dispositivi mobili.
-
L'opzione per mantenere statica un'immagine di sfondo non è disponibile per tablet e dispositivi mobili a causa di una limitazione iOS.
-
-
Configura il Posizione, Sovrapposizione di sfondo, Bordo, e Ombra per l'immagine.
-
Il video seguente mostra come aggiungere un'immagine di sfondo a una riga:
-
-
Video. Fare clicSeleziona Videoper visualizzare i video caricati o incollare l'URL del video di YouTube, Vimeo o Dailymotion nell'apposito campo. Per ulteriori informazioni sugliSfondi degli elementi.
Nota
Per ulteriori informazioni sugli sfondi, consulta Sfondi di elementi.
-
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Ogni riga contiene almeno una colonna. Le colonne contengono tutti i widget del sito e ne controllano la disposizione. Ogni volta che aggiungi una nuova colonna, questa viene visualizzata accanto alla colonna esistente in quella riga
Mentre le visualizzazioni per desktop e tablet consentono a ciascuna riga di contenere fino a quattro colonne, i siti Web per dispositivi mobili possono mostrare solo al massimo due colonne di seguito. Le colonne aggiunte nelle visualizzazioni desktop o tablet assumeranno l'intera larghezza della pagina quando si passa alla visualizzazione mobile; per creare una riga con due colonne nella visualizzazione mobile, passa prima alla visualizzazione mobile, quindi aggiungi un widget a due colonne
Per eliminare una colonna, fai clic con il pulsante destro del mouse in un punto qualsiasi della colonna per aprire il menu contestuale, quindi fai clic suElimina. In alternativa, fai clic sul rossoXnell'angolo superiore destro della colonna.
Puoi inserire il widget direttamente nelle colonne o strutturare ulteriormente la colonna aggiungendo righe interne.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Usa l'editor di 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. Viene visualizzato il menu dell'editor delle colonne.
Nota
Se non è presente alcun riempimento nella colonna, il clic con il pulsante destro del mouse non sarà direttamente accessibile. Per accedere alla colonna in questo caso, fai clic con il pulsante destro del mouse su un widget che si trova nella colonna (dovrebbe apparire il menu contestuale del widget e ne verrà indicato il nome in alto),Seleziona Contenitore, selezionaColonna. Per verificare che sia passato al menu contestuale della colonna, fai riferimento alla parte superiore; ora dovrebbe direColonna.
-
Fai clic suSposta la colonna a sinistraeSposta la colonna a destrafrecce per spostare la colonna corrente a sinistra o a destra (le frecce saranno disattivate se c'è solo una colonna).
-
Per aprire l'editor di progettazione delle colonne, fai clic suModifica design. Per ulteriori informazioni, vedereEditor di progettazione delle colonne. Viene visualizzato l'editor di progettazione delle colonne.
-
Fare clic+Aggiungie 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).
-
Fila interna. Aggiungi una riga all'interno della colonna corrente.
-
Widget qui sotto. Aggiungi un widget.
-
-
Per cancellare la spaziatura interna della colonna, fate clic suImbottitura trasparente.
-
Per ripristinare la spaziatura a quella definita nella spaziatura del tema, fai clic suReimposta la spaziatura predefinita.
-
Per aggiungere un'animazione di ingresso alla colonna (ad esempio, dissolvenza da destra, rimbalzo, zoom avanti), fai clic suAnimazione d'ingressoe seleziona un'opzione.
-
Per nascondere la colonna corrente su un dispositivo specifico (desktop, tablet, cellulare), fai clic suNascondi sul dispositivoe seleziona il dispositivo.
-
Per bloccare la colonna per la modifica del client, fai clic suBlocca per la modifica da parte del client.
-
Per copiare la colonna, fai clic suCopia.
-
Per ancorare la colonna alla pagina o eliminare un ancoraggio esistente, fai clic suImposta come ancoraggiooModifica Anchor.
-
Per eliminare la colonna, fai clic suElimina.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Per modificare lo stile o la spaziatura dello sfondo di una colonna:
-
Fare clic con il tasto destro sulla colonna, quindi fare clicModifica design.
-
Nota
Se non è presente alcun riempimento nella colonna, il clic con il pulsante destro del mouse non sarà direttamente accessibile. Per accedere alla colonna in questo caso, fai clic con il pulsante destro del mouse su un widget che si trova nella colonna (dovrebbe apparire il menu contestuale del widget e ne verrà indicato il nome in alto),Seleziona Contenitore, selezionaColonna. Per verificare che sia passato al menu contestuale della colonna, fai riferimento alla parte superiore; ora dovrebbe direColonna.
-
-
SulStilescheda, seleziona un usa a Colore di sfondo,Immagine, oVideo. Sono disponibili le seguenti opzioni:
-
Colore
-
Seleziona unColore dello sfondo. Il colore sfumato ha la precedenza sull'immagine e viceversa
-
Fare clicBordoper selezionare un tipo di bordo e spostare il cursore per impostare la larghezza del bordo.
-
Per aggiungere un'ombra, fai clic suOmbraattiva e seleziona 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 cursore per l'immagine di sfondo, seleziona più immagini dal selettore di immagini e vediCursore dell'immagine di sfondo.
-
Selezionare per visualizzare l'immagine comeCopertina,Immagine completa,Piastrella, oNessuna ripetizione.
-
Configura il Posizione, Sovrapposizione di sfondo, Bordo, e Ombra per l'immagine.
-
-
Video.Seleziona Videoper visualizzare i video caricati o incollare l'URL del video di YouTube, Vimeo o Dailymotion nell'apposito campo. Per ulteriori informazioni sugliSfondi degli elementi.
Nota
Per ulteriori informazioni sugli sfondi, consulta Sfondi di elementi.
-
I cursori 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, fai clic suFatto. Una volta creato il cursore, seleziona una transizione Slide dal menu a discesa e sposta il cursore per selezionare una velocità Slide
Qualsiasi altra opzione dell'immagine di sfondo come Sovrapposizione dello sfondo, Posizionamento e stile di visualizzazione può essere applicata al cursore.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Le righe interne consentono una maggiore flessibilità di progettazione consentendo di aggiungere righe all'interno delle colonne. Con l'aiuto delle righe interne, puoi variare il layout delle colonne e mantenere il design generale della riga (ad esempio, sfondo, spaziatura, smarginatura
Proprio come le righe normali, le righe interne possono avere uno sfondo e una spaziatura diversi, essere suddivise in un massimo di quattro colonne e modificare l'ordine delle colonne sui dispositivi mobili. Le colonne nelle righe interne possono essere popolate da qualsiasi widget, ma le righe interne non possono essere aggiunte a tali
Per aggiungere una riga interna a una colonna, effettuate una delle seguenti operazioni:
-
Fate clic con il pulsante destro del mouse sulla riga e fate clicAggiungi riga interna. Se nella riga sono presenti più colonne, scegli a quale colonna aggiungere le righe interne.
-
Fate clic con il pulsante destro del mouse sulla colonna e fate clic suAggiungi riga interna.
-
Fate clic con il pulsante destro del mouse sulla riga interna e fate clic suAggiungi rigaper posizionare una riga interna al di sotto di quella corrente.
Per dare un esempio di come utilizzare la riga interna, esaminiamo due modi in cui è possibile progettare un layout che contiene un titolo e 3 pulsanti:
Esempio 1: aggiungere due righe. Posiziona il titolo nella riga 1 con 1 colonna. Dividi la riga 2 in 3 colonne. Posiziona un pulsante in ogni colonna. Tieni presente che due righe separate non possono condividere la stessa immagine di sfondo e devi impostare la spaziatura e lo stile di smarginatura separatamente per ogni
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 il margine della riga principale
Alcune considerazioni importanti quando si tratta di modificare le righe interne:
-
È possibile utilizzare le frecce di commutazione dell'ordine solo per cambiare l'ordine tra le righe interne. Per cambiare l'ordine dei widget e delle righe interne, devi trascinare manualmente i widget sopra o sotto la
-
widget a 2 colonne, 3 colonne, 4 colonne non possono essere collocati nelle righe interne. Per aggiungere una colonna, fai clic con il pulsante destro del mouse sulla riga e fai clic Aggiungi colonna.
-
A differenza delle righe normali, le righe interne non possono essere copiate e incollate.
Nota
I proprietari degli account e i membri dello staff possono creare e salvare sezioni da utilizzare per i clienti, ma i clienti non possono creare e salvare le proprie sezioni.
Le sezioni sono righe predefinite di elementi che gli utenti possono aggiungere ai propri siti reattivi. Le sezioni consentono agli utenti di creare rapidamente siti di bell'aspetto risparmiando tempo durante il processo di progettazione. L'infrastruttura è stata creata per fornire una migliore esperienza utente con una varietà di sezioni predefinite
Nota
-
Le sezioni non utilizzano alcun CSS personalizzato e sono tutte create all'interno dell'editor dai designer.
-
Le sezioni non utilizzano il colore del testo o le impostazioni dei caratteri del testo presenti nelle impostazioni del tema del sito. Tuttavia, puoi sempre cancellare il formato e applicare il tuo design.
Aggiungi sezioni
Per aggiungere sezioni di widget:
-
Passa il mouse tra le righe e fai clic Aggiungi sezione.
-
Seleziona Progettato. Le sezioni vengono visualizzate nel pannello laterale.
-
In 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, fai clic su una sezione per visualizzarla come 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 suSalva. In alternativa, fai clic suSalva e aggiungine un altroper continuare ad aggiungere sezioni al tuo sito. La sezione viene convertita in una riga e tutti gli elementi della sezione sono modificabili
Crea una sezione Flex con AI
Per semplificare il processo di creazione e migliorare la flessibilità di progettazione, puoi utilizzare l'Assistente AI per generare contenuti e design per sezioni flessibili.
Per istruzioni dettagliate sulla creazione di sezioni flessibili con AI, consultaCrea una sezione flessibile con AI.
Nota
-
Devi avere un piano Team o superiore e disporre delle autorizzazioni di AI Assistant per utilizzare questa funzionalità.
Quando si allineano i widget all'interno della stessa colonna, il costruttore di siti Web tenta diSnap per allinearedevono avere esattamente le stesse dimensioni. Man mano che si ridimensiona, il costruttore salta avanti o indietro per agganciarsi alla posizione. Questo dovrebbe facilitare la creazione di widget della stessa dimensione
C'è anche una funzione Snap to Grid. Aggancia alla griglia la funzione 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 relativa 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 visualizzazioni dei tre diversi dispositivi (desktop, tablet, dispositivi mobili).
Per ulteriori informazioni sulla configurazione di intestazioni e piè di pagina, consulta: