Testata del sito con HTML interamente personalizzato
Le funzionalità descritte sono disponibili da Ready Pro v21.1.
Nella sezione modifica della testata standard abbiamo descritto come apportare semplici cambiamenti alla testata del sito ecommerce Ready Pro, inserendo alcuni elementi grafici come ad esempio un logo aziendale personalizzato o un banner.
E’ possibile personalizzare maggiormente la testata di un sito attraverso l’inserimento di blocchi di codice HTML e CSS (è quindi richiesta una buona conoscenza di questi linguaggi) che consentono di gestire oltre che le immagini, anche altri elementi di navigazione come link, box di ricerca, ecc.
Per utilizzare questo tipo di funzionalità, dalla Gestione template e contenuti, selezioniamo la sezione Contenuti / Testata e impostando il Tipo di visualizzazione testata possiamo scegliere tra due opzioni:
- HTML personalizzato su desktop - Avanzata su mobile: consente di impostare codice HTML personalizzato per la visualizzazione su dispositivi desktop mentre invece utilizza il tipo visualizzazione Testata avanzata (logo + ricerca + carrello) per i dispositivi mobile.
- HTML personalizzato su desktop e mobile: consente di impostare codice HTML personalizzato sia per la visualizzazione su dispositivi desktop sia per i dispositivi mobile, dando facoltà di configurare separatamente la testata per ogni tipologia di dispositivo.
E’ possibile personalizzare maggiormente la testata di un sito attraverso l’inserimento di blocchi di codice HTML e CSS (è quindi richiesta una buona conoscenza di questi linguaggi) che consentono di gestire oltre che le immagini, anche altri elementi di navigazione come link, box di ricerca, ecc.
Per utilizzare questo tipo di funzionalità, dalla Gestione template e contenuti, selezioniamo la sezione Contenuti / Testata e impostando il Tipo di visualizzazione testata possiamo scegliere tra due opzioni:
- HTML personalizzato su desktop - Avanzata su mobile: consente di impostare codice HTML personalizzato per la visualizzazione su dispositivi desktop mentre invece utilizza il tipo visualizzazione Testata avanzata (logo + ricerca + carrello) per i dispositivi mobile.
- HTML personalizzato su desktop e mobile: consente di impostare codice HTML personalizzato sia per la visualizzazione su dispositivi desktop sia per i dispositivi mobile, dando facoltà di configurare separatamente la testata per ogni tipologia di dispositivo.
Vediamo in dettaglio il funzionamento di ogni singola funzionalità:
HTML personalizzato su desktop - Avanzata su mobile
Con questa tipologia di testata possiamo inserire del codice HTML personalizzato da visualizzare solo per i dispositivi desktop, facendo doppio click col mouse sulla relativa impostazione e accedere così all'editor HTML.
HTML personalizzato su desktop - Avanzata su mobile
Con questa tipologia di testata possiamo inserire del codice HTML personalizzato da visualizzare solo per i dispositivi desktop, facendo doppio click col mouse sulla relativa impostazione e accedere così all'editor HTML.
Se inseriamo il codice HTML nella cella Impostazione generica (come nel nostro esempio), l'impostazione è comune per tutte le aree del sito, altrimenti è anche possibile personalizzare la testata per ogni singola area.
Per quanto riguarda i dispositivi mobile, la testata viene visualizzata invece in modalità avanzata con un il logo + il box ricerca + il carrello).
L'unico elemento che andrà configurato in questo caso è il Logo testata avanzata / mobile.
L'unico elemento che andrà configurato in questo caso è il Logo testata avanzata / mobile.
Dopo aver inserito l'immagine del Logo testata vi è anche la possibilità di aggiungere la Descrizione dell'immagine.
HTML personalizzato su desktop e mobile
Con questa tipologia di testata possiamo inserire due diversi blocchi di codice HTML personalizzato da visualizzare: uno per i dispositivi desktop (con le stesse modalità viste nella funzionalità precedente), l'altro per i dispositivi mobile.
Come possiamo notare, con questo tipo di visualizzazione testata, abbiamo a disposizione un secondo blocco di codice HTML personalizzato in testa alla pagina (mobile) da inserire sempre tramite l'apposito editor HTML.
Con questa tipologia di testata possiamo inserire due diversi blocchi di codice HTML personalizzato da visualizzare: uno per i dispositivi desktop (con le stesse modalità viste nella funzionalità precedente), l'altro per i dispositivi mobile.
Come possiamo notare, con questo tipo di visualizzazione testata, abbiamo a disposizione un secondo blocco di codice HTML personalizzato in testa alla pagina (mobile) da inserire sempre tramite l'apposito editor HTML.
Anche in questo caso, se inseriamo il codice HTML nella cella Impostazione generica (come nel nostro esempio), l'impostazione è comune per tutte le aree del sito, altrimenti è anche possibile personalizzare la testata per ogni singola area.
N.B. Se NON viene utilizzata l'impostazione HTML personalizzato per mobile, viene considerata automaticamente quella desktop.
N.B. Se NON viene utilizzata l'impostazione HTML personalizzato per mobile, viene considerata automaticamente quella desktop.
Come sempre, occorre avviare l'aggiornamento del sito, per fare in modo che le modifiche vengano applicate all'ecommerce.
N.B. Se contestualmente all’inserimento di codice HTML, si ha l'esigenza di inserire anche istruzioni di tipo CSS (Cascading Style Sheet), accedere all'editor CSS cliccando sulla sezione Aspetto Grafico e facendo doppio click sul parametro Regole CSS aggiuntive nella colonna Imp. Generica
N.B. Se contestualmente all’inserimento di codice HTML, si ha l'esigenza di inserire anche istruzioni di tipo CSS (Cascading Style Sheet), accedere all'editor CSS cliccando sulla sezione Aspetto Grafico e facendo doppio click sul parametro Regole CSS aggiuntive nella colonna Imp. Generica
N.B. Si suggerisce di applicare gli stili utilizzando nomi non comuni di Id e Classi in modo che non interferiscano con quelli utilizzati dalla struttura standard di Ready Pro.