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 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 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 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 nel punto desiderato. Quando trascini un 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.
Per informazioni dettagliate sulla modifica e l'organizzazione delle righe, vedi Editor riga.
Colonne
Ogni riga contiene almeno una colonna. Le colonne contengono tutti i 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.
- 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, 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 direttamente nelle colonne, o strutturare ulteriormente la colonna aggiungendo righe interne.
Per informazioni dettagliate sulla modifica e l'organizzazione delle colonne, vedi Editor colonne.
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 , ma le righe interne non possono essere aggiunte a tali colonne.
Per aggiungere una riga interna a una colonna, eseguire una delle operazioni seguenti:
- 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.
- Fare clic con il pulsante destro del mouse sulla colonna e scegliere Aggiungi riga interna.
- 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 al tuo sito:
- Nel pannello a sinistra, fai clic su Widget.
- Cerca il desiderato, quindi trascinalo nel sito.
Per eliminare un dal sito, fai clic con il pulsante destro in un punto qualsiasi del 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 .
Per disporre i fianco a fianco, trascina un sul sito, aggiungi una colonna alla riga in cui è stato inserito il , quindi trascina un altro in quella colonna. In alternativa, trascina il a due colonne sul sito, quindi trascina e rilascia i in ogni colonna.
Aggancia per allineamento
Durante il ridimensionamento dei all'interno della stessa colonna, IONOS tenterà di agganciarli per allinearli in modo che abbiano le stesse dimensioni. Pertanto, durante il ridimensionamento il IONOS si muoverà avanti o indietro per agganciarsi alla posizione, cosa che dovrebbe aiutare uniformare le dimensioni di tutti i .
Aggancia alla griglia
La funzione Aggancia alla griglia aiuta a posizionare i nelle pagine del sito con precisione professionale. In pratica, consente di allineare i orizzontalmente e verticalmente all'interno di colonne e righe. Quando si sposta un 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 può essere allineato ad altri , a seconda del caso d'uso specifico.
L'allineamento è supportato nelle visuali dei tre diversi dispositivi (desktop, tablet, mobile).
Per ulteriori informazioni sull'aggiunta e la modifica di , vedi Aggiungere widget e Modificare widget.