Struttura base:
Riducendo ai minimi termini il layout di Magento, è possibile individuare 3 aree ben distinte, al cui interno troviamo a loro volta altre sezioni che aiutano a completare graficamente il sito.
Header:
E' l’area superiore del sito. Nell’header-top (950px) troviamo generalmente il logo, il box di ricerca, il box di login o il menù login, lo switcher per la selezione della lingua. Nell’header-nav (950px) troviamo invece il menù catalogo.
Immagini:
- ../images/header_top_container_bg.jpg (2000x150): sfondo header-top;
- .. /images/nav_bg.jpg (2000x60): sfondo header-nav;
Middle-container:
E' l’area centrale. Nelle col-left e col-right (entrambe 195px) troviamo tutti i box previsti dal layout xml di Magento, come Carrello, Comparazione prodotti, Sondaggi, etc… Per ogni box è possibile modificare la collocazione, mentre si consiglia un tema unico, da impostare una sola volta nel foglio di stile e valido per tutti gli elementi. Nel main (490px) è presente invece il contenuto principale della pagina.
Immagini:
- ../images/main_container_bg.gif (962x653): bordi laterali sfumati;
- ../images/main_bg.gif (951x420): sfondo sfumato contenuto centrale;
Footer:
E' la chiusura del sito (950px). Contiene licenza, copyright, informazioni aziendali, credits.
Immagini:
- ../images/body_bg.gif (952x1): colore di sfondo alle scritte;
Altri elementi grafici:
I bottoni presenti in Magento sono quasi tutti costruiti con il foglio di stile, pertanto non occorre realizzare immagini ad hoc. Quelli ottenuti tramite immagine possono inoltre essere facilmente sostituiti sempre via CSS, in modo da non gravare ulteriormente sui tempi di caricamento del server.
