Il modo in cui disponi il contenuto nel sito è molto importante. Una buona disposizione consente ai visitatori di trovare facilmente ciò che cercano e a te di mettere in evidenza sezioni che altrimenti possono passare inosservate. Una pagina ben organizzata conferisce un aspetto professionale al sito e aiuta ad aumentare le vendite, poiché i visitatori del sito riescono a trovare facilmente ciò che cercano.

Struttura dello strumento di creazione di siti Web

Website Builder è costituito da un'intestazione, un piè di pagina, righe e colonne. Ogni widget che aggiungi viene inserito in una di queste sezioni.

I widget spesso occupano l'intero spazio di una colonna o di una riga, il che rende difficile selezionarli. Per aggirare il problema, fai clic con il tasto destro sul widget nella colonna o riga che desideri selezionare, passa con il mouse sopra l'opzione Seleziona un contenitore e quindi seleziona Colonna o Riga.

Righe

Le righe sono le sezioni orizzontali del tuo sito. Quando aggiungi widget e colonne al sito, vengono posizionati all'interno delle righe. Per modificare la modalità di visualizzazione del contenuto sui dispositivi mobili, fai clic sull'interruttore Inverti l'ordine delle colonne nell'editor delle righe.

È possibile aggiungere righe al sito trascinando i widget nel punto desiderato. Quando trascini un widget tra due righe o in uno spazio in cui vorresti inserire una nuova riga, ti basterà rilasciarlo per crearne una.

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

Colonne

Ogni riga contiene almeno una colonna. Le colonne contengono tutti i widget del tuo sito e controllano la loro disposizione.

Ciascuna riga può contenere fino a quattro colonne. Quando aggiungi una nuova colonna, appare accanto alla colonna già esistente nella stessa riga.

Per eliminare una colonna, fai clic con il tasto destro in un punto qualsiasi della colonna per aprire il menu di scelta rapida, quindi fai clic su Elimina. In alternativa, puoi fare clic sulla X rossa nell'angolo in alto a destra della colonna.

È possibile inserire widget direttamente nelle colonne, o strutturare ulteriormente la colonna aggiungendo righe interne.

Righe interne

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, la propria spaziatura ed essere suddivise in un massimo di quattro colonne, il cui ordine può essere modificato su dispositivi mobili. Le colonne nelle righe interne possono essere occupate da qualsiasi widget, ma le righe interne non possono essere aggiunte a tali colonne.

Per aggiungere una riga interna a una colonna, eseguire una delle operazioni seguenti:

1. Fai clic con il pulsante destro del mouse sulla riga, quindi su Aggiungi riga interna. Se nella riga sono presenti più colonne, è necessario scegliere in quale colonna si desidera aggiungere le righe interne.
2. Fare clic con il pulsante destro del mouse sulla colonna e scegliere Aggiungi riga interna.
3. Fai clic con il tasto destro sulla riga interna. quindi su Aggiungi riga per posizionare una riga interna al di sotto di quella selezionata.

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:

• Aggiungi due righe. Inserisci il titolo nella riga 1 con 1 colonna. Suddividi la riga 2 in 3 colonne. Inserisci un pulsante in ogni colonna.
  • Due righe separate non possono condividere la stessa immagine di sfondo ed è necessario impostare lo stile di pagina e smarginatura per ciascuna riga separatamente.

  
  

• Aggiungi una riga. Per impostazione predefinita, ogni riga contiene una colonna. Aggiungi 2 righe interne alla colonna. Posiziona il titolo nella riga interna 1. Suddividi la riga interna 2 in 3 colonne. Posiziona un pulsante in ciascuna 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, 3 e 4 colonne non possono essere collocati nelle righe interne. Per aggiungere una colonna, fai clic con il pulsante destro sulla riga, quindi su Aggiungi colonna.
• A differenza delle righe normali, le righe interne non possono essere copiate e incollate.

Widget

I Widget contengono testo, immagini, pulsanti e altri contenuti del tuo sito.

Per aggiungere widget al tuo sito:

1. Nel pannello a sinistra, fai clic su Widget.
2. Cerca il widget desiderato, quindi trascinalo nel sito.

Per eliminare un widget dal sito, fai clic con il pulsante destro in un punto qualsiasi del widget per aprire il menu di scelta rapida, quindi fai clic su Elimina. In alternativa, fai clic sulla X rossa nell'angolo in alto a destra del widget.

Per disporre i widget fianco a fianco, trascina un widget sul sito, aggiungi una colonna alla riga in cui è stato inserito il widget, quindi trascina un altro widget in quella colonna. In alternativa, trascina il widget a due colonne sul sito, quindi trascina e rilascia i widget in ogni colonna.

Aggancia per allineamento

Durante il ridimensionamento dei widget all'interno della stessa colonna, Website Builder tenterà di agganciarli per allinearli in modo che abbiano le stesse dimensioni. Pertanto, durante il ridimensionamento il Website Builder si muoverà avanti o indietro per agganciarsi alla posizione, cosa che dovrebbe aiutare uniformare le dimensioni di tutti i widget.

Aggancia alla griglia

La funzione Aggancia alla griglia aiuta a posizionare i widget nelle pagine del sito con precisione professionale. In pratica, consente di allineare i widget orizzontalmente e verticalmente all'interno di colonne e righe. Quando si sposta un widget all'interno di una riga o colonna o lo si ridimensiona, verranno visualizzati dei righelli. Gli elementi allineati sono contrassegnati da un bordo colorato. Un widget può essere allineato ad altri widget, a seconda del caso d'uso specifico.

Per ulteriori informazioni sull'aggiunta e la modifica di widget, vedi Aggiungere widget e Modificare widget.