Con Aruba, a lezione di e-commerce - Modificare la homepage del negozio online utilizzando il CSS - Parte 2

1. Con Aruba,
a lezione di e-commerce
Vuoi modificare la homepage del tuo negozio online?
Impariamo ad usare il CSS – Parte 2

2. Una volta trovato il codice giusto
come indicato nella guida di Introduzione ai CSS,
è possibile modificare quasi ogni elemento
nel vostro negozio online.
Vediamo insieme come…

3. Dove inserire il codice?
Basta andare nel menu "Impostazioni -> Impostazioni generali -> Impostazioni
avanzate". Una volta inserito tale codice, ricordiamo che la modifica effettuata
interesserà, in seguito, l'intero negozio.
Come eliminare la barra dei menu solo nella home page?
Per eliminare la barra laterale del menu solo nella homepage, senza estendere tale
modifica alle altre pagine del negozio online, è necessario seguire alcuni semplici passi
all’interno dell’area di amministrazione del vostro negozio online.
Muniamoci di mouse e attenzione,
si comincia!
3

4. Per prima cosa, bisogna entrare nel menu “Contenuto/Categorie” dell’area di
amministrazione;
- selezionare l’opzione “Visualizzazione del foglio dati” ed entrare in “Generale”
- tra le varie opzioni, scegliamo disponibili “Descrizione estesa”.
È all’interno di quest’area che
inseriremo il codice che ci
permetterà di effettuare la
modifica desiderata.
4

5. In particolare, clicchiamo nell’area “html” e incolliamo il seguente codice:
<style type="text/css">
.NavBarLeft {display:none;}
div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper
div.CategoryList{margin:0; padding:0 !important;}
.ContentArea, .ContentArea div, .ContentArea table, .ContentArea td,
.ExtractedContentAreaElement{margin:0 !important;}
div.Middle div.ContentArea {padding-right:0 !important;} </style>
Clicchiamo su ‘Salva’ per rendere effettive le modifiche.
Inserendo questo codice, la barra laterale sinistra del menu è stata eliminata dalla
homepage.
5

6. Potremo seguire lo stesso procedimento per occultare la barra laterale destra dei
menu inserendo ‘Right’ all’interno del codice:
<style type="text/css">
.NavBarRight {display:none;}
div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper
div.CategoryList{margin:0; padding:0 !important;}
.ContentArea, .ContentArea div, .ContentArea table, .ContentArea td,
.ExtractedContentAreaElement{margin:0 !important;}
div.Middle div.ContentArea {padding-right:0 !important;} </style>
Non abbiamo ancora terminato…
La modifica potrebbe non interessare solamente la homepage, perchè potrebbe
essere riconosciuta dal software come modifica generale, e quindi applicarsi a tutte le
pagine del negozio online.
6

7. Cosa dobbiamo fare allora?
A questo punto dovremmo comunicare al software, tramite l’inserimento di un nuovo
codice, che la modifica che desideriamo deve applicarsi solo alla home page,
lasciando quindi visibili le barre laterali all’interno del resto del negozio.
Torniamo, quindi, nell’area di amministrazione, selezioniamo “Impostazioni” ed
entriamo nel menu “Impostazioni Generali”.
Tra le opzioni disponibili scegliamo “Generale” e quindi “Impostazioni avanzate”.
Vedremo apparire un’area chiamata “Area Head HTML” (immagine in seguito) in
cui potremo inserire il codice per completare la modifica iniziale, cioè eliminare la
barra dei menu solo nella homepage.
7

8. Nell’ “Area Head HTML” inseriamo il codice qui di seguito:
<style type="text/css">
div.NavBarLeft {display:visible !important;}
</style>
Clicchiamo su ‘Salva’, aggiorniamo la cache della pagina, e controlliamo nell’anteprima
della home page che la modifica sia stata applicata con successo.
8

9. Buone modifiche e
buona vendita online!
e-commerce.aruba.it
9

10. Grazie
10