Come modificare l'HTML delle pagine

La personalizzazione e l'adattamento del sito web sono essenziali per distinguersi e ottimizzare l'esperienza utente. La possibilità di modificare l'HTML delle pagine ti offre il controllo completo sul design e sulla struttura del tuo sito, permettendoti di aggiungere funzionalità avanzate, correggere errori o semplicemente rifinire l'aspetto estetico del tuo e-commerce o sito vetrina. In questa guida, esploreremo le diverse opzioni che hai a disposizione per modificare l'HTML attraverso il Site Builder e il Pannello di Controllo, offrendo un'esperienza personalizzata e senza limiti.

Il Site Builder di ProntoShop è lo strumento principale per la personalizzazione delle tue pagine, grazie a un'interfaccia intuitiva che ti consente di lavorare direttamente sul codice HTML. Ecco come procedere per modificare l'HTML della tua pagina:

Accedi all'Editor: Per iniziare, vai nel menu "Aspetto" e seleziona la voce "Editor". In questo modo entrerai nell'editor visivo del tema.

Modifica del Codice HTML: Una volta entrato nell'editor, troverai l'icona del codice (</> Codice) situata nel centro della barra laterale sinistra. Cliccando su questa icona, potrai visualizzare e modificare il codice HTML della pagina che desideri.

Regola la Finestra di Codice: Puoi personalizzare la visualizzazione della finestra di codice ingrandendola o rimpicciolendola. Basta cliccare sull'icona con i tre puntini (...) che trovi al centro della finestra del codice.

Aggiungi Codice CSS: Se desideri aggiungere del codice CSS personalizzato che influenzi l'intero sito, puoi farlo cliccando sull'icona "CSS" presente sulla stessa finestra. Questo ti permetterà di applicare modifiche stilistiche a livello globale senza alterare il codice HTML.

Quando hai terminato le modifiche, puoi chiudere la finestra cliccando sull'icona con un'icona a freccia rivolta verso il basso, che ti permette di minimizzare la finestra e tornare alla visualizzazione principale del Site Builder.

Se desideri avere un controllo ancora più granulare sulle tue pagine e il layout del sito, puoi farlo direttamente dal Pannello di Controllo. Questa opzione ti consente di modificare non solo l'HTML, ma anche altre componenti importanti come Header e Footer.

Accedi alla Pagina Template Editor: Nel menu del Pannello di Controllo, vai su "Aspetto" e clicca su "Template Editor". Questa pagina ti offre una visione d'insieme del codice del tema e delle sue porzioni principali.

Modifica l'Header e il Footer: Una delle principali funzionalità del Template Editor è la possibilità di personalizzare l'intestazione (header) e il piè di pagina (footer). Questi elementi sono essenziali per il layout del tuo sito e possono essere modificati direttamente nel codice HTML del template, per sovrascrivere l'originale e aggiungere le tue personalizzazioni.

Modifica del Codice JavaScript: Il Template Editor ti permette anche di modificare il codice JavaScript globale del sito. Se hai bisogno di implementare funzionalità interattive personalizzate, puoi farlo accedendo alla sezione "Javascript" nel menu laterale sinistro all'interno della pagina Template Editor.

Aggiungi Codice CSS Globale: Se desideri apportare modifiche stilistiche a livello globale, puoi fare clic sulla voce "CSS" nel menu laterale. Qui potrai aggiungere o modificare il codice CSS per garantire che il design del sito si adatti esattamente alle tue esigenze.

Caricamento di Script JavaScript Esterni: Una funzione avanzata disponibile nel Template Editor è la possibilità di caricare script JavaScript esterni. Per farlo, accedi alla voce "Impostazioni" nel menu laterale sinistro e carica i tuoi script. Questo ti permette di aggiungere funzionalità avanzate tramite script esterni.

Gestione dei File: Il Template Editor include un pulsante denominato "Gestione File", che è molto utile per caricare immagini, file o copiare gli URL di questi file. Questo strumento ti consente di avere un archivio di risorse facilmente accessibile mentre lavori sul sito.

Aggiungere codice personalizzato prima del footer può essere estremamente utile per implementare script esterni, come tracking analytics, pixel di Facebook, oppure per integrare iframe da terze parti. Posizionando il codice proprio prima del footer, puoi caricare risorse che non influenzano il caricamento principale della pagina, migliorando così le performance senza compromettere l’esperienza dell’utente.

• Inizia accedendo al tuo pannello di amministrazione e nel menu a sinistra seleziona la voce "Impostazioni".
• Nella pagina delle impostazioni, ti troverai nella pagina "Generale" scorri fino al basso. Qui troverai un blocco denominato "Codice Personalizzato".
• Clicca sul pulsante "Modifica" all’interno del blocco "Codice Personalizzato". Si aprirà una finestra in cui potrai inserire il tuo codice personalizzato.

Adesso puoi incollare il codice che desideri caricare prima del footer. Questo potrebbe essere un iframe, uno script di tracciamento, o qualsiasi altro tipo di codice esterno che desideri includere nella pagina. Una volta inserito il codice, salva le modifiche per applicare le modifiche al sito.

Dopo aver salvato, visita una delle tue pagine per assicurarti che il codice si carichi correttamente prima del footer e che funzioni come previsto, senza compromettere la performance del sito.