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.
Attenzione
La modalità sviluppatore non è disponibile quando si modifica il sito in modalità flex nell'editor classico. È necessario uscire dalla modalità flex per accedere alla modalità sviluppatore.
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 è visibile di solito deve 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.
Se si utilizza l'editor classico in modalità flex o nell'editor 2.0, è possibile modificare il CSS dei contenitori flex (sezione, colonna, colonna interna e griglia avanzata). Se sei nell'Editor 2.0 puoi anche modificare il CSS di intestazioni e piè di pagina.
Nota
Nell'Editor 2.0 e nella modalità flex, il pannello di progettazione potrebbe non riflettere tutte le modifiche al codice personalizzato. Ciò può causare differenze di stile tra il pannello di progettazione e gli elementi in linea.
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. Se si è in modalità flessibile nell'Editor classico o nell'Editor 2.0, fare clic per selezionare il contenitore, l'intestazione o il piè di pagina flessibile.
-
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.
L'attuale meccanismo di aggiornamento dello stile non supporta le regole CSS AT. Se si desidera utilizzare i CSS nelle regole in modalità Flex o Editor 2.0, è necessario aggiungerle tramite la modalità sviluppatore, a cui è possibile accedere facendo clic sull'icona della modalità sviluppatore nella barra di navigazione in alto.
Le seguenti regole at sono supportate solo in modalità sviluppatore:
-
@import: Utilizzato per importare fogli di stile esterni.
-
@media: definisce le regole di stile per diversi tipi di media/dispositivi.
-
@font-face: consente di caricare e utilizzare font personalizzati.
-
@supports: applica gli stili in base al supporto delle funzionalità.
-
@keyframes: Definisce le animazioni.
-
@page: utilizzato nei supporti di paginazione, come la stampa.
-
@namespace: Dichiara uno spazio dei nomi per i documenti XML.
-
@charset: Specifica la codifica dei caratteri.
-
@counter-style: definisce gli stili dei contatori personalizzati.
-
@document: (Obsoleto) Stili applicati a URL specifici.
-
@layer: Utilizzato nei livelli CSS a cascata.
-
@property: Definisce le proprietà personalizzate con tipi e valori iniziali specifici.
Nell'Editor 2.0 e nella modalità flex, è possibile aggiungere classi CSS agli elementi flex (sezione, colonna, colonna interna e griglie avanzate). L'utilizzo delle classi CSS consente di risparmiare tempo durante lo stile degli elementi. Ad esempio, invece di utilizzare il pannello di progettazione per modificare la spaziatura interna e le dimensioni di una singola colonna, è possibile creare una classe CSS e applicare queste modifiche di stile a un numero qualsiasi di colonne.
La stessa classe può essere applicata a più elementi della stessa pagina e più classi possono essere applicate allo stesso elemento.
Nota
Per utilizzare questa funzione, è necessario disporre dell'accesso alla modalità sviluppatore.
Per aggiungere o modificare una classe CSS:
-
Selezionare l'elemento flessibile desiderato (sezione, pilastro, pilastro interno o griglia avanzata).
-
Dal menu mobile o dal menu di scelta rapida, seleziona Aggiungi nome classe CSS.
-
Digita un nuovo nome di classe CSS o seleziona un nome di classe esistente dal menu a discesa. Puoi selezionare più classi.
-
(Facoltativo) Se non hai già aggiunto la classe CSS al codice, fai clic su Apri modalità Dev.
-
Fare clic su Fine.
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. Una classe di Website Builder è stata aggiunta 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).
Se non riesci ad accedere all'editor quando il tuo sito viene caricato inizialmente, prova ad accedere all'editor su una nuova pagina inserendo un URL diverso nel link dell'editor, ad esempio https://my. Sito web Builder.co/home/site/XXXXXXX/about. Quando arrivi lì, puoi eliminare e aggiungere nuovamente la pagina che causa problemi o accedere alla modalità sviluppatore per risolvere il problema nel codice del sito.
Oppure, se l'editor è danneggiato, prova a forzare l'apertura dell'editor utilizzando la scorciatoia da tastiera per l'ispettore elemento. Per Mac la scorciatoia è Comando+Opzione+C. Per PC la scorciatoia è Ctrl+Alt+C
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>