Compatibilità:

WebSite X5 Evo e Pro

Uno degli aspetti a cui devi prestare attenzione per ottenere una buona impaginazione è che i contenuti non siano affastellati tra loro. Una pagina troppo piena, infatti, risulta caotica e difficile da leggere e da apprezzare per i lettore. Lo spazio vuoto, in questi casi, è il tuo migliore amico!


Per gestire al meglio lo spazio fra i diversi contenuti di una Pagina puoi sfruttare la possibilità di agire sui margini dei diversi Oggetti.


Ecco come devi fare:

  • Al Passo 4 - Creazione della Pagina seleziona l'Oggetto sul quale vuoi agire e clicca sul pulsante  Margini. 
  • Nella finestra richiamata Margini e Allineamento trovi i comandi necessari per:
    • agire sul margine esterno;
    • agire sul margine interno;
    • definire l'allineamento orizzontale/verticale dell'Oggetto rispetto alla Cella delle Griglia di impaginazione che lo contiene.


Il Box Model in WebSite X5

Per riuscire a gestire correttamente i margini e ad agire con precisione sull'impaginazione dei contenuti, devi conoscere il Box Model utilizzato da WebSite X5.


Quando si scrive il codice di una Pagina Web, tutti gli elementi HTML vengono considerati come dei blocchi (o box) e tutto l'insieme di regole che gestisce l'aspetto visuale di tali elementi blocco viene indicato come Box Model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS: margini, bordi, padding e contenuto.


L'immagine seguente illustra le parti del Box Model:



In WebSite X5 la Griglia di impaginazione proposta identifica una serie di Celle in cui è possibile inserire i diversi Oggetti. A voler essere più precisi, ogni Oggetto viene inserito in un contenitore che, a sua volta, è inserito all'interno di una Cella della Griglia di impaginazione. Per ciascuna di tali Celle si applica il Box Model illustrato.


Pertanto gli elementi sono:

  • Contenuto (area in verde): è il contenuto inserito attraverso il trascinamento di uno degli Oggetti disponibili.
  • Margine interno (area in fucsia): è lo spazio tra l'Oggetto attuale e il bordo del suo contenitore.
  • Bordo: è il bordo del contenitore dell'Oggetto; l'aspetto di tale bordo può essere definito attraverso le opzioni della finestra Stile dell'Oggetto.
  • Margine esterno (area in arancio): è lo spazio tra il bordo del contenitore dell'Oggetto e i bordi della Griglia di impaginazione.


Date queste definizioni, lo spazio tra due Oggetti affiancati (in orizzontale o in verticale) è pari alla somma dei Margini Esterni impostati per le Celle che li contengono.