Elementi di base della progettazione

Al fine di disporre di tutte le opzioni per la progettazione del sito Web, aprire Progettazione avanzata. La modifica del progetto e del layout avviene in modalità WYSIWYG e le modifiche vengono visualizzate immediatamente.
L'area di lavoro del browser viene divisa in due. Nella sezione superiore viene visualizzata la barra multifunzione, con tutte le funzioni disponibili. Per ulteriori informazioni, vedere Barra multifunzione e contenuto.
Nella sezione inferiore, dove è possibile modificare direttamente il progetto e il layout, viene visualizzata l'anteprima della pagina, che mostra la pagina Web corrente con il design e il layout specificati dallo stile selezionato. Vedere I miei stili.
Il sito Web è suddiviso nelle seguenti aree funzionali. Vedere Figura 8.
Figura 8: struttura del sito Web

Area 1:
Intestazione
Area 2:
Superiore
Area 3:
Sinistro
Area 4:
Area dei contenuti
Area 5:
Destro
Area 6:
Inferiore
Area 7:
Piè di pagina

È inoltre disponibile l'area di lavoro del browser, che circonda l'area di visualizzazione del sito Web. Vedere Imposta visualizzazione pagina nel browser.
Per modificare un'area, fare clic con il mouse nella posizione corrispondente. L'area viene attivata ed evidenziata con un bordo. La barra multifunzione visualizza le funzioni eseguibili nell'area.
In termini di opzioni di modifica e configurazione, le aree del sito possono essere suddivise in aree verticali, aree orizzontali e area dei contenuti:

Aree orizzontali:
Intestazione, Superiore, Inferiore, Piè di pagina
In genere le aree orizzontali coprono l'intera larghezza del sito Web. Sono più larghe che alte, e contengono principalmente collegamenti ed elementi di visualizzazione di larghezza limitata. Gli elementi di pagina tipici delle aree orizzontali includono:
  • Logo
  • Nome del sito Web
  • Collegamento alla home page, informazioni di contatto, termini e condizioni contrattuali, categorie e carrello
  • Bandiere per la selezione del paese
Aree verticali:
Sinistro, destro
Le aree verticali sono in genere posizionate tra le aree orizzontali e sono parallele all'area dei contenuti. Sono più alte che larghe, e contengono principalmente caselle con testo, elenchi, collegamenti o campi di immissione. Gli elementi di pagina tipici delle aree verticali sono:
  • Elenco di categorie principali
  • Accesso
  • Vista compatta del Carrello e stato del Carrello
  • Ricerca prodotti
  • Prodotti in promozione
Area dei contenuti:
Mentre le altre aree contengono principalmente elementi funzionali quali menu e collegamenti, l'area dei contenuti include il contenuto delle pagine create dall'utente in Contenuto/categorie.
Le dimensioni dell'area dei contenuti sono determinate dall'altezza e larghezza delle altre aree, nonché dalla spaziatura. La parte rimanente della finestra del browser è dedicata ai contenuti.

I parametri delle singole aree, una volta combinati, creano il design completo. Alcuni parametri si influenzano a vicenda o sono interdipendenti. Questi effetti collaterali vanno tenuti in considerazione. Le seguenti informazioni potranno risultare utili:
Note sulle immagini dello sfondo
In ciascun modello del progetto vengono caricati modelli corrispondenti per le immagini di sfondo. È possibile sostituire a tali modelli immagini personalizzate. Se si eliminano le immagini personalizzate, i modelli corrispondenti vengono ricaricati automaticamente. Se non si desidera un'immagine di sfondo, rimuovere il modello. Fare clic sul collegamento Rimuovi modello. Dopo la rimozione del modello, il nome del collegamento viene modificato in Ripristina modello. Fare clic sul collegamento al fine di ripristinare il modello predefinito per l'immagine di sfondo senza dover cercare il nome file corrispondente.
Nota: se si imposta sia un colore di sfondo, sia un'immagine di sfondo, l'immagine di sfondo sarà sempre sovrapposta al colore di sfondo. Pertanto, per visualizzare il colore, è necessario eliminare l'immagine. Se lo sfondo deve essere riempito completamente, sarà necessario ridimensionare l'immagine in modo da adattarla all'area oppure utilizzare la funzione Affianca immagine.
Affianca immagine
Le immagini di sfondo possono essere visualizzate come immagine unica oppure più volte, in modo da riempire lo sfondo dell'intera pagina. Le copie dell'immagine vengono affiancate fino a riempire l'intera pagina.