L'editor è flessibile in quanto consente sia di modificare il codice esistente che di aggiungerne uno personalizzato. In questo modo è possibile estendere le funzionalità della piattaforma e fornire funzionalità aggiuntive. Ad esempio, puoi aggiungere un widget di calendario personalizzato o anche un modulo di contatto personalizzato di terze parti per accettare pagamenti sul tuo sito.
Avvertimento
La modalità sviluppatore non è disponibile quando si modifica il sito in modalità flessibile nell'Editor classico. È necessario uscire dalla modalità flessibile 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
-
codice personalizzato destinato a 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 istruzioni fornite dall'autore del codice prima di aggiungerlo al sito
-
Non è possibile caricare o eseguire file PHP. I linguaggi lato server, come PHP, non sono supportati, in quanto la piattaforma non fornisce l'esecuzione sul lato server
La modalità sviluppatore ti consente di modificare e modificare HTML e CSS del tuo sito. L'aggiunta di codice personalizzato consente una personalizzazione avanzata che non è possibile con l'editor drag and drop, tuttavia questa operazione dovrebbe essere eseguita solo da utenti esperti con una solida conoscenza del codice di sviluppo web
Per accedere alla modalità sviluppatore, fai clic per aprire il menu a forma di hamburger nell'editor e seleziona Modalità Dev.
Il widget HTML è il metodo più semplice per aggiungere codice personalizzato al tuo sito. A seconda di dove posizioni il widget HTML, verrà visualizzato su tutte le pagine del sito o solo su una singola pagina. Se inserite il widget HTML nell'intestazione o nel piè di pagina, verrà inserito contemporaneamente su tutte le pagine del sito. Questo perché ogni sito condivide l'intestazione e il piè di pagina. Se si posiziona il widget HTML altrove, verrà visualizzato solo nel corpo
Per aggiungere un widget HTML:
-
Cerca HTML, quindi trascina e rilascia il widget in una colonna o riga del tuo sito e poi 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'intestazione HTML. Questo perché ottimizziamo la struttura e l'ordine di caricamento dei contenuti, in base alle best practice relative alle prestazioni del sito. Inseriamo script e banner CMP più in basso nella pagina, per migliorare le prestazioni dei contenuti primari. Per questo motivo, si consiglia di inserire del codice nel testo quando si utilizza un'app per la gestione
Per inserire il codice nell'intestazione a livello di sito:
It is common for pixel tracking codes to disappear when placed in the header. The head section <head> does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>, <script>, and <meta>.
Se devi incollare codice che non viene salvato nella sezione head, incollalo nell'intestazione o nel file body-end.html. Per farlo, segui i passaggi indicati in Codice personalizzato dopo l'Opening Body Tag sezione di questo articolo.
Al momento non abbiamo una funzione per inserire il codice direttamente dopo il tag body di apertura. Tuttavia, puoi incollare il codice direttamente nel file body-end.html. Esistono due modi per farlo, in modalità sviluppatore o nelle impostazioni.
Per incollare il codice direttamente nel file body-end.html in modalità sviluppatore:
-
Fai clic per aprire il menu dell'hamburger nell'editor, quindi seleziona Modalità Dev.
-
CliccaHTML/CSS del sitoper espandere la selezione.
-
Fare clicbody-end.html.
-
Incolla il tuo codice nell'ultima riga qui.
-
Fare clic Salva e Fatto.
Per incollare il codice direttamente nel file body-end.html nelle impostazioni:
Molti elementi, tra cui righe, colonne e widget, offrono la possibilità di accedere al suo codice HTML/CSS.
Se utilizzi Classic Editor usando la modalità flex o l'Editor 2.0:
-
Puoi modificare il CSS dei contenitori flessibili (sezione, colonna, colonna interna e griglia avanzata). Se utilizzi Editor 2.0: Puoi anche modificare il CSS di intestazioni e piè di pagina.
-
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 codice a qualsiasi elemento o widget:
-
Nell'editor classico, fate clic con il pulsante destro del mouse sul widget o sull'elemento per visualizzare il menu contestuale.
-
Se sei in modalità flex nell'editor classico o nell'editor 2.0: Fate clic per selezionare il contenitore flessibile, l'intestazione o il piè di pagina.
-
CleccareModifica HTML/CSS. Se sei in modalità flex in Classic Editor o Editor 2.0, cfai clic sull'icona a tre puntini nel menu mobile, quindi selezionaModifica CSS.
-
Modifica o aggiungi il codice qui, se necessario.
-
Fare clic Aggiornamento.
Potrebbe essere necessario aggiornare il browser per visualizzare la modifica.
L'attuale meccanismo di aggiornamento dello stile non supporta le regole CSS at. Se vuoi usare i CSS nelle regole in modalità Flex o Editor 2.0, è necessario aggiungerli 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/dispositivi multimediali.
-
@font -face: consente di caricare e utilizzare caratteri personalizzati.
-
@supports: applica gli stili in base al supporto delle funzionalità.
-
@keyframes: definisce le animazioni.
-
@page: utilizzato nei supporti impaginati, come la stampa.
-
@namespace: dichiara uno spazio dei nomi per i documenti XML.
-
@charset: specifica la codifica dei caratteri.
-
@counter -style: definisce stili di contatore personalizzati.
-
@document: (Obsoleto) Stili applicati a URL specifici.
-
@layer: utilizzato nei CSS Cascade Layers.
-
@property: definisce proprietà personalizzate con tipi e valori iniziali specifici.
In Editor 2.0 e in modalità flex: Puoi aggiungere classi CSS agli elementi flessibili (sezione, colonna, colonna interna e griglie avanzate). L'uso delle classi CSS può far risparmiare tempo nello stile degli elementi. Ad esempio, invece di utilizzare il pannello di progettazione per modificare il padding e le dimensioni di una singola colonna, potete 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 sulla stessa pagina e più classi possono essere applicate allo stesso elemento.
Nota
È necessario avere accesso alla modalità sviluppatore per utilizzare questa funzionalità.
Per aggiungere o modificare una classe CSS:
-
Seleziona l'elemento flessibile desiderato (sezione, colonna, colonna interna o griglia avanzata).
-
Dal menu mobile o dal menu contestuale, seleziona Aggiungi il nome della 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 avete già aggiunto la classe CSS al codice, fate clic apri la modalità Dev.
-
Fare clic Fatto.
Per aggiungere un codice di tracciamento a un modulo di contatto:
-
Vai alla pagina in cui si trova il tuo modulo di contatto.
-
Fai clic sul modulo di contatto per aprire le opzioni.
-
Fare clicInvio.
-
Fare clicMonitoraggio.
-
Incolla qui il codice di monitoraggio delle conversioni.
Di seguito sono riportate le linee guida consigliate da seguire quando si lavora con codice personalizzato e modalità sviluppatore.
Linee guida generali
-
Crea sempre un backup del tuo sito prima di aggiungere codice personalizzato.
-
Quando lavori con codice personalizzato, usa sempre il tuo editor da questo link: http://my.duda.co?nossl
-
Puoi visualizzare l'anteprima del codice all'esterno di un iframe cambiando il link dell'editor da https://my.duda.co/home/ed/site/xxxxx/page a https://my.duda.co/site/xxxxx/page?preview=true
-
Prima di inserire il codice nell'intestazione, esegui prima il test su un sito di test separato. Puoi farlo creando un duplicato del tuo sito su cui testare il codice personalizzato.
-
Per il codice che deve essere inserito in una pagina, crea una pagina di test e inserisci il codice lì.
-
L'anteprima utilizza HTTPS, mentre il tuo sito live potrebbe non esserlo. Questo spesso interrompe il codice personalizzato.
-
Assicurati di rimanere all'interno delle colonne. I nostri siti responsive si basano su una struttura a righe e colonne. Ciò significa che ogni riga contiene colonne che alla fine contengono il contenuto. Quando aggiungi o modifichi il tuo codice HTML, assicurati che sia all'interno di una colonna.
Linee guida specifiche per la modalità sviluppatore
-
Assicurati di rimanere all'interno delle colonne. I nostri siti responsive si basano su una struttura a righe e colonne. Ciò significa che ogni riga contiene colonne che alla fine contengono il contenuto. Quando aggiungi o modifichi il tuo codice HTML, assicurati che sia all'interno di una colonna.
-
Lascia le lezioni al loro posto. L'editor si basa sulle numerose classi che vengono aggiunte agli elementi. Se vedi una classe esistente (di solito inizia con dm), lasciala al suo posto. Se rimuovi delle classi, il sito potrebbe non avere lo stesso aspetto quando ne visualizzi l'anteprima
-
Nota le dimensioni delle classi. Le colonne hanno un valore di dimensione che viene aggiunto come classe, ad esempio large 6 o small-12. Ciò determina la dimensione delle colonne all'interno di quella riga. Ti consigliamo di lasciarli al loro posto, poiché sono il fulcro del dimensionamento della riga su diversi dispositivi
-
Se possibile, evita di modificare le estensioni. Nell'HTML, vedrai già i segnaposto degli elementi nella pagina. Se puoi, evita di modificarli, specialmente i valori di dati contenuti al loro interno. Modificarli può interrompere i widget una volta tornati all'
Se hai aggiunto codice personalizzato al tuo sito che influisce sulle sue prestazioni o ti impedisce di modificarlo, molto probabilmente è dovuto al fatto che il codice non è formattato correttamente o non è conforme a HTTPS.
Attenzione
L'assistenza Duda non è in grado di risolvere i problemi relativi al codice personalizzato.
-
Il codice personalizzato è molto imprevedibile. Esistono molti fattori per cui il tuo codice personalizzato potrebbe non funzionare con la nostra piattaforma. Se hai bisogno di aiuto per far funzionare il codice personalizzato sul tuo sito, potrebbe valere la pena assumereDuda Expertper aiutarti a far funzionare il codice sul tuo sito.
-
App per la gestione del consenso non sono in grado di impedire l'esecuzione del codice prima del consenso quando il codice viene inserito nell'intestazione HTML. Questo perchéDudaottimizza la struttura e l'ordine di caricamento dei contenuti, in base alle best practice relative alle prestazioni del sito. Inseriamo script e banner CMP più in basso nella pagina, per migliorare le prestazioni dei contenuti primari. Per questo motivo, si consiglia di inserire del codice nel testo quando si utilizza un'app per la gestione
Di seguito sono riportate le soluzioni per la risoluzione dei problemi che potresti riscontrare durante l'utilizzo di codice personalizzato.
Ripristina un backup del tuo sito fino 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 trovarsi in una riga. -
BAD_PROPORTION. La somma delle colonne in una riga deve essere pari a 12. -
INVALID_CLASS_FOR_ELEMENT.Dudala classe è stata aggiunta a un elemento non valido.
Se hai del codice che non funziona sul sito, molto probabilmente è dovuto al fatto che il codice non è formattato correttamente o non è HTTPS.
Se hai dei link nel tuo codice (http://o//) e il tuo sito utilizza HTTPS o sei nell'anteprima, dovrai modificarlo in modo che sia invece https://. Il motivo è che il codice non HTTPS non funzionerà in una connessione caricata tramite HTTPS (anteprima del sito, editor, ecc.)
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.Duda.co/home/site/XXXXXXX/about . Una volta lì, puoi eliminare e aggiungere nuovamente la pagina che causa problemi oppure accedere alla modalità sviluppatore per risolvere il problema relativo al codice del sito
Oppure, se l'editor non funziona, prova a forzare l'apertura dell'editor usando la scorciatoia da tastiera per l'ispettore degli elementi. 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 di PageSpeed sulla maggior parte delle pagine, il che può causare problemi con
Per determinare se il codice personalizzato è affetto da un problema di velocità della pagina:
-
Duplica la pagina con i tuoi script.
-
Cambia l'URL in «testing_scripts». »
-
Pubblica e 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 lo script venga eseguito in modo asincrono: non è garantito, ma a volte può risolvere il problema con gli script che non vengono eseguiti correttamente nel browser.
Per abilitare l'asincrono sugli script, modifica il codice utilizzando quanto segue:
-
Codice vecchio:
<script src="https://example.com/script.js"></script> -
Nuovo codice:
<script src="https://example.com/script.js" async defer></script>