L'editor è flessibile, in quanto consente di modificare il codice esistente o aggiungere il proprio. In questo modo è possibile estendere la funzionalità della piattaforma e ottenere funzionalità aggiuntive. Ad esempio, puoi aggiungere un widget di calendario personalizzato o un modulo di contatto di terzi per ricevere pagamenti sul tuo sito.
Esistono diversi modi per aggiungere codice personalizzato: tramite la modalità sviluppatore o il widget HTML. Di seguito sono riportate le istruzioni su come accedere a entrambi.
Nota
Il codice personalizzato che deve essere visibile nel sito deve essere aggiunto utilizzando un widget HTML. Il codice personalizzato che non lo è di solito dovrebbe essere inserito nell'intestazione. In generale, è sempre meglio seguire le indicazioni fornite dall'autore del codice prima di aggiungerlo al proprio sito.
La Modalità sviluppatore permette di accedere e modificare il codice HTML e CSS del tuo sito. L'aggiunta di codice personalizzato consente di ottenere una personalizzazione avanzata non disponibile con l'editor a trascinamento. Tuttavia, questa azione dovrebbe essere eseguita solo da utenti esperti con una solida conoscenza del codice di sviluppo web.
Per accedere alla Modalità sviluppatore:
-
Fai clic su Modalità sviluppatore (
) nella barra di navigazione. In alternativa, fai clic con il pulsante destro del mouse su un widget e seleziona Modifica HTML/CSS, quindi fai clic su Modalità sviluppo in basso a sinistra.
-
Dopo aver aggiunto il codice, usa i pulsanti Salva e Anteprima per vedere il tuo lavoro.
Il widget HTML è il metodo più semplice per aggiungere codice personalizzato al tuo sito. A seconda di dove posizioni il tuo widget HTML, apparirà su tutte le pagine del tuo sito o solo su una singola pagina. Se si posiziona il widget HTML nell'intestazione o nel piè di pagina, verrà posizionato contemporaneamente su tutte le pagine del sito. Questo perché ogni sito condivide l'intestazione e il piè di pagina. Se posizioni il widget HTML in qualsiasi altra posizione, apparirà solo nel corpo.
Nel pannello laterale,widget fai clic su e trascina il HTML widget in una colonna o riga nel tuo sito e incolla il codice.
Puoi inserire il codice nell'intestazione a livello di sito o nell'intestazione di una singola pagina.
Nota
Le app di gestione del consenso non sono in grado di impedire l'esecuzione del codice prima del consenso quando il codice viene inserito nell'HTML dell'intestazione. Questo perché ottimizziamo la struttura e l'ordine di caricamento dei contenuti, in base alle migliori pratiche di performance del sito. Posizioniamo gli script e i banner CMP più in basso nella pagina, al fine di migliorare le prestazioni dei contenuti primari. Per questo motivo, si consiglia di inserire il codice nell'estremità del corpo quando si utilizza un'app di gestione del consenso.
Per inserire il codice nell'intestazione a livello di sito:
-
Nel pannello laterale, fai clic su SEO e impostazioni.
-
Fare clic su Intestazione HTML.
-
Testa HTML. Aggiungi contenuto al campo della sezione principale.
-
Corpo Fine HTML. Aggiungi HTML/Javascript personalizzato appena prima del tag di chiusura dell'elemento <body> per ogni pagina del sito.
-
-
Incolla il codice, quindi salva.
È comune che i codici di tracciamento dei pixel scompaiano quando vengono inseriti nell'intestazione. La sezione <head> head non accetta alcun codice che sia <img>, <iframe>, e altro. Normalmente bastano <link>, <script>, e <meta>.
Se devi incollare il codice che non viene salvato nella sezione head, incollalo nell'intestazione o nella body-end.html. A tale scopo, segui la procedura descritta nella sezione Codice personalizzato dopo l'apertura del tag del corpo di questo articolo.
Al momento non disponiamo della possibilità di inserire il codice immediatamente dopo il tag di apertura del corpo della pagina. Puoi comunque incollare il codice direttamente nel file body-end.html. Esistono due modi per eseguire questa operazione: in modalità sviluppatore o dalle impostazioni.
Per incollare il codice direttamente nel file body-end.html in modalità sviluppatore:
-
Fai clic sull'icona della modalità sviluppatore (
-
Fare clic su Sito HTML/CSS per espandere la selezione.
-
Fare clic su body-end.html.
-
Incolla il codice qui, nell'ultima riga.
-
Fare clic su Salva e Fine.
Per incollare il codice direttamente nel file body-end.html dalle impostazioni:
Molti elementi, tra cui righe, colonne e widget, offrono la possibilità di accedere al suo HTML/CSS.
Per aggiungere qualsiasi codice a qualsiasi elemento o widget:
-
Fai clic con il pulsante destro del mouse sul widget o sull'elemento per visualizzare il menu contestuale.
-
Fai clic su Modifica HTML/CSS. Se sei in modalità flex nell'Editor classico o nell'Editor 2.0, fai clic sull'icona con i tre puntini nel menu mobile, quindi seleziona Modifica CSS.
-
Modifica o inserisci qui il codice.
-
Fare clic su Aggiorna.
La visualizzazione della modifica potrebbe richiedere l'aggiornamento del browser.
Per aggiungere il codice di monitoraggio a un modulo di contatto:
-
Recati alla pagina contenente il modulo.
-
Fai clic sul modulo di contatto per aprire le opzioni.
-
Fare clic su Invio.
-
Fai clic su Monitoraggio.
-
Incolla qui il codice di tracciamento delle conversioni.
Di seguito sono riportate le linee guida consigliate da seguire quando si lavora con il codice personalizzato e la modalità sviluppatore.
Linee guida generali
-
Crea sempre un backup del tuo sito prima di aggiungere codice personalizzato.
-
Prima di inserire il codice nell'intestazione, eseguire il test in un sito di test separato. A tale scopo, è possibile creare un duplicato del sito per testare il codice personalizzato.
-
Se il codice va inserito in una pagina, crea una pagina di prova per testarlo.
-
L'anteprima utilizza HTTPS, mentre il tuo sito live potrebbe non farlo. Questo spesso interrompe il codice personalizzato.
-
Assicurati di rimanere all'interno delle colonne. I nostri siti reattivi si basano su una struttura riga-colonna. Perciò ciascuna riga contiene colonne nelle quali, a loro volta, si trovano i contenuti. Quando aggiungi o modifichi il tuo codice HTML, assicurati che si trovi all'interno di una colonna.
Linee guida specifiche per la modalità sviluppatore
-
Assicurati di rimanere all'interno delle colonne. I nostri siti reattivi si basano su una struttura riga-colonna. Perciò ciascuna riga contiene colonne nelle quali, a loro volta, si trovano i contenuti. Quando aggiungi o modifichi il tuo codice HTML, assicurati che si trovi all'interno di una colonna.
-
Lascia le classi al loro posto. L'editor si basa sulle molte classi che vengono aggiunte agli elementi. Se visualizzi una classe esistente (generalmente inizia con dm) lasciala dove si trova. Se vengono rimosse delle classi, quando si attiva l'anteprima il Sito potrebbe avere un aspetto diverso.
-
Annota la dimensione delle classi. La dimensione delle colonne viene aggiunta come suffisso alla classe, per cui si avrà large-6 o small-12. Da questo dipendono le dimensioni delle colonne all'interno della riga. Questi dati devono essere mantenuti così come sono in quanto sono fondamentali per il controllo delle dimensioni della riga su diversi dispositivi.
-
Evita di modificare le estensioni, se possibile. Nell'HTML, vedrai già i segnaposto degli elementi sulla pagina. Se puoi, evita di modificarli, in particolare i valori dei dati contenuti al loro interno. La modifica di questi può interrompere i widget una volta tornati all'editor.
Se hai aggiunto al tuo sito del codice personalizzato che ne influenza le prestazioni o che ti impedisce di modificarlo, è probabile che ciò sia dovuto a un errore di formattazione nel codice o alla mancata conformità con il protocollo HTTPS.
Di seguito sono riportate le soluzioni per la risoluzione dei problemi che potresti riscontrare durante l'utilizzo del codice personalizzato.
Ripristina un backup del tuo sito a un punto precedente all'aggiunta del codice personalizzato (anche se non hai creato un backup, l'editor ne crea uno per te quando pubblichi o entri in modalità sviluppatore).
Per ripristinare un backup:
Di seguito sono riportati i messaggi di errore specifici e il loro significato:
-
DUPLICATE_ID. Ogni elemento deve avere un ID univoco. -
INVALID_ELEMENT_LOCATION. Tutti gli elementi devono essere in una colonna che deve essere in una riga. -
BAD_PROPORTION. La somma delle colonne di una riga deve essere pari a 12. -
INVALID_CLASS_FOR_ELEMENT. È stata aggiunta una classe IONOS a un elemento non valido.
Se sul sito è presente del codice non funzionante, è probabile che la causa sia una formattazione imperfetta o il fatto che il codice non sia conforme al protocollo HTTPS.
Se nel tuo codice ci sono dei link (http:// o //) e il tuo sito usa il protocollo HTTPS, oppure sei all'interno dell'anteprima, dovrai cambiarli in https://. La ragione è che il codice non HTTPS non funzionerà in una connessione caricata tramite HTTPS (anteprima del sito, editor e così via).
L'ottimizzazione della velocità della pagina influisce sul modo in cui vengono eseguiti determinati script. Eseguiamo l'ottimizzazione PageSpeed sulla maggior parte delle pagine, il che può causare problemi con il codice personalizzato.
Per determinare se il codice personalizzato è interessato da un problema di velocità della pagina:
-
Duplica la pagina con i tuoi script.
-
Cambia l'URL in "testing_scripts".
-
Pubblica e poi controlla la pagina sul tuo sito live.
-
Se il codice funziona su quella pagina, contatta l'assistenza per disattivare l'ottimizzazione della velocità della pagina per il tuo sito.
Se stai usando uno script, puoi anche provare ad assicurarti che venga eseguito in modo asincrono: non è sempre così, ma a volte il problema degli script non eseguiti correttamente all'interno del browser può essere risolto in questo modo.
Per abilitare l'esecuzione asincrona degli script, modifica il tuo codice come segue:
-
Vecchio codice:
<script src="https://example.com/script.js"></script> -
Nuovo codice:
<script src="https://example.com/script.js" async defer></script>