Disporre il contenuto

Panoramica

Il modo in cui disponi il contenuto nel sito Web è 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 Web e aiuta ad aumentare le vendite, poiché i visitatori del sito Webriescono a trovare facilmente ciò che cercano.

Guida

Struttura dello strumento di creazione di siti Web

Lo strumento di creazione di siti Web è costituito da un'intestazione, un piè di pagina, righe e colonne. Ogni widget aggiunto viene inserito in una di queste sezioni.

Righe

Le righe sono le sezioni orizzontali del tuo sito Web. Quando aggiungi widget e colonne al sito Web, vengono posizionati all'interno di queste righe. 

arrangingcontent1_en-US.png

È possibile aggiungere righe al sito web trascinando widget. Quando trascini un widget tra righe o in uno spazio dove desideri vi sia una riga, sarà creata una nuova riga non appena rilasci il widget.

arrangingcontent2_en-US.png

Esistono due modi per eliminare le righe. Puoi fare clic con il pulsante destro del mouse sulla riga per aprire il menu contestuale e selezionare Elimina. Oppure, puoi fare clic sul pulsante RIga nella parte in alto a sinistra della riga e fare clic su Elimina.

arrangingcontent3_en-US.png

Colonne

Ogni riga contiene almeno una colonna. Le colonne includono tutti i widget nel sito e controllano la loro disposizione.

arrangingcontent4_en-US.png

Ciascuna riga può contenere fino a quattro colonne. Quando aggiungi una nuova colonna,  appare lungo la colonna esistente in quella riga. 

arrangingcontent5_en-US.png

Esistono due modi per eliminare le colonne. Puoi fare clic con il pulsante destro del mouse sulla colonna per aprire il menu contestuale e selezionare Elimina. Oppure, puoi fare clic sulla X rossa nell'angolo in alto a destra della colonna.

arrangingcontent6_en-US.png

arrangingcontent7_en-US.png

Puoi posizionare i 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 della colonna e mantenere la struttura generale della riga (sfondo, spaziatura, smarginatura, ecc.).

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. Fare clic con il pulsante destro del mouse sulla riga e scegliere 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. Fare clic con il pulsante destro del mouse sulla riga interna e scegliere Aggiungi riga, per posizionare una riga interna sotto quella corrente.

Per fare un esempio di come usare la riga interna, esaminiamo due modi per progettare un layout che contiene 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.

inner-rows1-en-US.png

  • 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.

inner-rows2-en-US.png

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.  

Widget

I widget contengono il testo, le immagini, i pulsanti e altri contenuti del tuo sito Web. Per aggiungere widget al tuo sito, fai clic su Widget nel menu a sinistra, cerca il widget che desideri e quindi trascinalo e rilascialo nel sito. 

arrangingcontent8_en-US.png

Esistono diversi modi per eliminare i widget dal sito. Puoi fare clic con il pulsante destro del mouse sul widget per aprire il menu contestuale e selezionare Elimina. Oppure, puoi fare clic sulla X rossa nell'angolo in alto a destra del widget.

arrangingcontent9_en-US.png

arrangingcontent10_en-US.png

Considerazioni

Mentre le viste desktop e tablet permettono a ogni riga di contenere fino a quattro colonne, i siti web per cellulari riescono a mostrare solo due colonne di seguito.

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.

Domande frequenti

Come posso affiancare i widget ?

Esistono diversi modi per affiancare i widget. Puoi trascinare un widget sul sito Web, aggiungere una colonna alla riga dove tale widget è stato collocato, quindi trascinare un altro widget in tale colonna. Puoi anche trascinare il widget a due colonne sul sito Web e quindi rilasciarlo all'interno di ciascuna colonna. 

arrangingcontent11_en-US.png

arrangingcontent12_en-US.png

Come si seleziona una colonna o una riga?

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

arrangingcontent13_en-US.png

Come si elimina l'ultima colonna in una riga?

Non serve! Le colonne vuote non vengono visualizzate sul sito live. Sono lì qualora volessi inserirci del contenuto. Puoi eliminare la colonna eliminando la riga in cui è contenuta.

Posso modificare in modo in cui vengono visualizzati i contenuti nella visualizzazione per dispositivi mobili?

Sì. Puoi attivare/disattivare l'opzione di inversione dell'ordine delle colonne nel design delle righe per modificare il modo in cui vengono visualizzate le colonne nella visualizzazione per dispositivi mobili in ciascuna riga.arrangingcontent14_en-US.png

Risorse