Panoramica dell'editor

La barra di navigazione superiore contiene utili scorciatoie per diverse azioni del sito.

La barra di navigazione superiore consente di:

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.

Se si utilizza l'editor classico in modalità flex o l'editor 2.0, si avrà accesso al pannello Livelli. Il pannello Livelli fornisce una visualizzazione gerarchica degli elementi della pagina del sito, consentendo di navigare e gestire facilmente strutture complesse. Qui puoi identificare rapidamente la disposizione di widget, colonne e sezioni, semplificando il processo di individuazione e regolazione di elementi specifici. Dal pannello Livelli, è possibile eseguire varie azioni, ad esempio l'aggiunta di nuovi elementi, la selezione di elementi, la riorganizzazione di elementi, la ridenominazione di elementi e l'attivazione o disattivazione della visibilità degli elementi su punti di interruzione specifici.

Di seguito sono riportate le opzioni disponibili nel pannello laterale:

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.

Il pannello di progettazione offre una gamma di impostazioni di progettazione per gli elementi selezionati, consentendo una personalizzazione precisa. Sia che tu stia modificando l'allineamento dei contenuti del layout, la spaziatura tra gli elementi, l'animazione e lo sfondo, il pannello di progettazione fornisce una serie completa di tool per migliorare l'aspetto visivo del tuo sito web. Le opzioni di progettazione includono regolazioni del layout, configurazioni di ridimensionamento, impostazioni di allineamento e altro ancora, su misura per l'elemento selezionato.

Quando regoli impostazioni come spaziatura interna e margine dopo aver selezionato un elemento, la spaziatura interna si riferisce allo spazio tra il contenuto e il bordo di un riquadro, mentre il margine definisce lo spazio esterno che circonda il riquadro. Ciò significa che le regolazioni dello spazio possono influenzare le dimensioni dell'elemento e determinare la quantità di colore di sfondo o di immagine visibile all'interno del riquadro. Invece, la regolazione dei margini determina il modo in cui l'elemento interagisce con gli elementi adiacenti o con i bordi dello schermo, definendo il suo posizionamento rispetto agli altri elementi della pagina, in modo simile alle barriere invisibili.

Per ulteriori informazioni sul pannello Progettazione e sulle relative sezioni, vedere Pannello Progettazione.

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.

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.

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:

Esempio di riga interna

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.

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: