Vediamo come personalizzare il modulo slide che troviamo pre-impostato sugli e-commerce.
Per prima cosa dovremo inserire le immagini nell’e-commerce. Da Amministrazione > Gestione sito > Gestore files.
Qui dovrebbe già esistere una cartella slide dove sono contenute tutte le immagini della slide. In questa cartella andremo su carica file ( si può fare anche tasto destro > carica file) e si trascineranno o sceglieranno le immagini desiderate.
Una volta inserite dovremo segnarci il percorso file. Nel caso volessi ad esempio andare ad inserire l’immagine 2slide.jpg prenderò “/user/Files/slide/2slide.jpg”. Per questa ragione si consiglia di avere dei nomi delle immagini facili e riconoscibili per agevolare i prossimi passaggi.
A questo punto si andrà su Configurazione sito > Gestione moduli, Cercheremo la voce slide e click su Modifica. Andremo nella sezione Contenuto e noteremo che è tutto codice (poiché è un modulo JS/HTML). La prima parte di codice la lasceremo invariata perché è quella che controlla il funzionamento della slide ( ad esempio la velocità e il tipo di animazione, ecc). La parte che ci interessa è proprio alla fine del codice, dove troviamo :
});–>
<div class=”rslides_container”>
<ul class=”rslides”>
<li><a href=”#”><img src=”/user/Files/slide/nomeimmagine.jpg”/>
<p class=”caption”>Descrizione della propria attività o prodotto</p></a></li>
Ogni <li> corrisponde ad una nostra immagine nella slide.
In ogni <a href=”#”> si può inserire un link ( che andrà a sostituire #)
In ogni <img src=”…”> andremo ad inserire il nostro percorso file (che andrà a sostituite i …)
Se avete inserito le immagini tutte nella stessa cartella , cambierà solo la parte finale che è il nome della vostra immagine.
<p class= “caption”> serve per aggiungere una descrizione che verrà visualizzata subito sotto la slide e cambierà al cambiare dell’immagine.
Se non si vuole far vedere questa scritta faremo finire questa parte di codice in “commento” inserendo <–! prima e –> dopo.
<!–<p class=”caption”>Descrizione della propria attività o prodotto</p>–>
Non ci resterà che salvare e riaprire il sito per vedere le nostre modifiche effettuate
