Utilizzare HTML, CSS e JavaScript personalizzati in Kopage

Il classico Website Builder di Kopage consente di utilizzare codice HTML, CSS e JavaScript personalizzato, oltre alle funzioni integrate.

In questo modo puoi, ad esempio, integrare contenuti esterni, personalizzare determinate visualizzazioni o aggiungere funzionalità per cui Kopage stesso non fornisce un modulo adatto.

Il codice personalizzato offre ulteriori possibilità, ma richiede anche la dovuta cautela. Codice errato o non verificato può influire sulla grafica, sulle funzionalità, sulle prestazioni, sulla sicurezza o sulla privacy del tuo sito web.

Breve spiegazione: Per la maggior parte dei normali siti web di Jimdo non hai bisogno di un codice personalizzato. Usa HTML, CSS o JavaScript soprattutto quando le funzioni integrate non sono sufficienti per un requisito specifico.

Che cos'è il codice personalizzato in Kopage? #

Kopage è fondamentalmente progettato per creare siti web senza alcuna conoscenza di programmazione.

Pagine, testi, immagini, moduli e numerose altre funzioni possono essere gestiti tramite il visual website builder.

Per esigenze particolari, il classico Website Builder di Kopage supporta tuttavia anche codice HTML, CSS e JavaScript personalizzato.

Le tre tecnologie svolgono compiti diversi:

HTML
→ Struttura e contenuti

CSS
→ Design e presentazione

JavaScript
→ Comportamento e funzioni aggiuntive

Questa distinzione è importante prima di inserire il tuo codice nel tuo sito web.

Quando ho bisogno di codice mio? #

Il codice personalizzato può essere utile quando una determinata funzione non può essere implementata con i normali strumenti di Kopage.

I casi d'uso tipici sono, ad esempio:

• Inclusione di un widget esterno,
• Integrazione di un servizio esterno,
• personalizzazioni CSS individuali,
• ulteriori contenuti HTML,
• o una funzione JavaScript speciale.

Se Kopage dispone già di una funzione integrata adatta per il tuo compito, questa è nella maggior parte dei casi la soluzione più semplice e facile da mantenere.

Consiglio pratico: Verifica prima se Kopage offre già la funzione desiderata. Il codice personalizzato dovrebbe colmare una lacuna specifica e non sostituire inutilmente una funzione esistente del builder.

Che cos'è l'HTML? #

HTML sta per HyperText Markup Language e descrive la struttura dei contenuti di una pagina web.

Un esempio molto semplice è:

<h2>I nostri orari di apertura</h2>
<p>Da lunedì a venerdì: dalle 08:00 alle 17:00</p>

Il browser interpreta gli elementi HTML e li visualizza come un'intestazione e un paragrafo.

Tuttavia, in Kopage non è necessario scrivere HTML da soli per i normali titoli e testi. A questo scopo sono disponibili le normali funzioni di modifica del website builder.

Quando è utile l'HTML personalizzato? #

L'HTML personalizzato diventa interessante, ad esempio, quando un fornitore esterno fornisce un codice di incorporamento pronto all'uso o quando è necessaria una struttura speciale che non può essere rappresentata in modo sensato con le normali funzioni di Kopage.

Un servizio esterno potrebbe ad esempio fornire un codice di questo tipo:

<div class="example-widget">
    Contenuto esterno
</div>

Questo è solo un esempio semplificato e non un widget da includere effettivamente.

Non abusare di HTML per la normale gestione delle pagine #

Solo perché si può usare l'HTML, non dovresti creare manualmente tutti i contenuti normali delle pagine con esso.

Testi, immagini e normali sezioni di pagina possono essere gestiti più facilmente con le funzioni Kopage previste.

Spiegheremo come elaborare i contenuti normali su Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini.

Che cos'è i CSS? #

CSS sta per Cascading Style Sheets e viene utilizzato per la formattazione visiva degli elementi HTML.

Ciò consente, ad esempio, di influenzare spaziatura, dimensioni dei caratteri, bordi o altre caratteristiche di visualizzazione.

Un esempio semplificato:

.hinweis {
    font-weight: bold;
    padding: 20px;
}

Questo CSS, tra le altre cose, rendererebbe in grassetto gli elementi con la classe corrispondente e aggiungerebbe un margine interno.

Quando è utile il CSS personalizzato? #

Il CSS personalizzato può essere utile quando hai bisogno di una modifica visiva mirata che va oltre le normali opzioni di design di Kopage.

Prima di utilizzare i CSS, tuttavia, dovresti verificare se la modifica desiderata può già essere implementata tramite le impostazioni di design e template esistenti.

Trattiamo le normali opzioni di design sotto Modificare template e design di Kopage: colori, caratteri, intestazione e piè di pagina.

Importante: Non utilizzare CSS inutilmente per impostazioni che Kopage fornisce già tramite la sua interfaccia di design. Le modifiche apportate tramite le funzioni integrate sono solitamente più facili da comprendere per modifiche successive.

Il CSS può influenzare più aree contemporaneamente #

I CSS utilizzano i selettori. A seconda di quanto è generale la formulazione di un selettore, una regola può modificare non solo un singolo elemento, ma molte aree del sito web.

Una regola CSS molto generale può quindi avere conseguenze indesiderate su altre pagine o elementi.

Testa accuratamente le modifiche CSS individuali e controlla non solo il punto che volevi modificare inizialmente.

Verificare le modifiche su più pagine #

Se il tuo CSS agisce su classi comuni o elementi della pagina, dopo una modifica dovresti controllare diverse aree del sito web.

Ciò include in particolare:

Pagina iniziale
sottopagine importanti
Navigazione
Moduli
Blog
Negozio
Piè di pagina
Visualizzazione per smartphone

Una modifica che ha un bell'aspetto su una singola pagina può avere effetti imprevisti altrove.

Cos'è JavaScript? #

JavaScript è un linguaggio di programmazione che può essere eseguito nel browser e consente funzioni interattive o dinamiche.

JavaScript può, ad esempio, reagire alle azioni dell'utente, caricare funzioni esterne o modificare dinamicamente i contenuti.

Un esempio molto semplificato:

<script>
console.log('Beispiel');
</script>

Questo esempio è puramente a scopo illustrativo e non ha alcun utilizzo pratico per un normale sito web Kopage.

Usare JavaScript con particolare attenzione #

JavaScript offre molte più possibilità rispetto a una semplice regola di stile CSS.

Un codice difettoso può compromettere le funzionalità, causare messaggi di errore o entrare in conflitto con il JavaScript esistente del sito web o di un servizio esterno.

Includi quindi solo codice JavaScript di cui conosci l'origine e lo scopo.

Attenzione: Non copiare mai codice JavaScript non verificato da forum, commenti, siti Web sconosciuti o altre fonti non attendibili sul tuo sito Web. JavaScript può fare molto di più che semplicemente modificare la visualizzazione di una pagina.

Cos'è un codice embed? #

Molti servizi esterni forniscono un cosiddetto codice di incorporamento o embed.

Questo può essere utilizzato per visualizzare un contenuto esterno all'interno di un sito web o per caricare una funzione esterna.

A seconda del fornitore, un tale codice può contenere HTML, JavaScript o una combinazione di essi.

Esempi tipici possono essere funzioni di prenotazione esterne, moduli, calendari, video, servizi di recensione o altri widget.

Includi il codice di incorporamento solo dal fornitore originale #

Se desideri integrare un servizio esterno, dovresti copiare il codice apposito direttamente dall'interfaccia di gestione ufficiale o dalla documentazione di quel servizio.

Non usare un codice qualsiasi tratto da un vecchio articolo di blog o da un forum solo perché viene menzionato il nome del servizio desiderato.

I fornitori esterni possono modificare i loro metodi di incorporamento nel corso del tempo.

Preferire le funzioni di copage esistenti #

Per diversi contenuti esterni comunemente utilizzati, Kopage offre già le funzioni adatte.

Trattiamo ad esempio le integrazioni con Google Maps, YouTube e i social media alla voce Incorporare Google Maps, YouTube e social media in Kopage.

Se una tale possibilità integrata è sufficiente per il tuo caso d'uso, non devi utilizzare in aggiunta un tuo codice di embed.

Dove inserire il proprio codice? #

Per HTML, CSS o JavaScript, utilizza esclusivamente le funzioni previste del classico Kopage Website Builder.

Quale area sia adatta dipende dal fatto che il codice riguardi un determinato contenuto della pagina, la grafica o una funzione esterna.

Non inserire codice a caso nei normali campi di testo.

Importante: HTML, CSS e JavaScript sono diversi tipi di codice. Un codice CSS non appartiene automaticamente allo stesso campo di un embed HTML, e JavaScript dovrebbe essere inserito solo dove è previsto il relativo tipo di codice.

Capire il codice prima di incollarlo #

Non devi essere in grado di programmare tu stesso ogni dettaglio di un'integrazione complessa. Tuttavia, dovresti almeno sapere a quale scopo serve il codice inserito e da quale fornitore proviene.

Nel caso di un widget esterno, ad esempio, dovresti essere in grado di rispondere:

Da quale fornitore proviene il codice?
Cosa viene integrato nel mio sito web?
Vengono contattati server esterni?
Vengono trasmessi dati?
La funzione richiede cookie?
Posso rimuovere il codice in un secondo momento?

Se queste domande non ti sono del tutto chiare, non dovresti usare il codice senza verifiche su un sito web di produzione.

Prima delle modifiche, eseguire il backup del codice esistente #

Se desideri modificare del codice personalizzato già funzionante, effettua prima un backup della versione precedente.

Ciò può significare, ad esempio, che salvi il codice precedente in un file di testo locale prima di modificarlo.

Se la nuova versione causa problemi, questo ti consente di tornare più facilmente alla versione precedente.

Consiglio pratico: Con codice più complesso, modifica se possibile una sola cosa alla volta. Se successivamente si verifica un errore, la causa è molto più facile da circoscrivere.

Utilizzare i commenti nel proprio codice #

Se gestisci tu stesso CSS o altro codice, dei brevi commenti possono aiutarti a capire lo scopo delle singole modifiche in un secondo momento.

Un esempio di CSS:

/* Spaziatura per area di avviso speciale */
.hinweis {
    padding: 20px;
}

Ciò è particolarmente utile quando diverse personalizzazioni individuali si sono accumulate nel corso di un lungo periodo.

Non inserire il codice più volte #

Se un'integrazione non è immediatamente visibile, non dovresti semplicemente inserire lo stesso codice più volte in punti diversi.

Ciò può causare il caricamento multiplo di script esterni o l'esecuzione multipla di funzioni.

Verifica invece prima se il codice è stato inserito nella posizione corretta e se la pagina in questione è stata pubblicata o aggiornata.

Considerare il codice esterno e le prestazioni #

Script e widget esterni possono caricare file e dati aggiuntivi da server di terze parti.

Più servizi esterni vengono integrati, maggiori risorse aggiuntive potrebbero essere necessarie durante il caricamento della pagina.

Ciò può influire sul tempo di caricamento e sul comportamento del sito web.

Utilizza quindi le integrazioni esterne in modo mirato e rimuovi le funzioni che non offrono più alcun vantaggio reale.

Non tutti i widget valgono la pena del loro sforzo #

Un widget aggiuntivo può essere visivamente interessante, ma allo stesso tempo caricare script esterni, trasferire dati e causare un onere di manutenzione aggiuntivo.

Chiediti quindi prima dell'integrazione se la funzione è davvero rilevante per i tuoi visitatori.

Un semplice collegamento a un servizio esterno può in alcuni casi essere più opportuno rispetto alla sua completa integrazione.

Controllare il proprio codice e il design responsivo #

Kopage di per sé è progettato per siti Web responsive. Tuttavia, il codice inserito individualmente non deve necessariamente funzionare correttamente anche su ogni schermo.

Un widget esterno può, ad esempio, avere una larghezza fissa e di conseguenza fuoriuscire dall'area visibile su uno smartphone.

Testa quindi il codice individuale su computer, tablet e smartphone.

Ulteriori indicazioni sulla visualizzazione mobile sono disponibili alla voce Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet.

Usare le larghezze fisse con cautela #

Con HTML o CSS scritti da te, dovresti prestare particolare attentione alle indicazioni di dimensioni rigide.

Un elemento con una larghezza fissa predefinita elevata può causare problemi sui dispositivi più piccoli.

Il design responsive, invece, tiene conto del fatto che sono disponibili diverse dimensioni di schermo.

Codice proprietario e privacy #

È necessaria particolare attenzione in caso di JavaScript esterno e codice embed.

Un fornitore terzo integrato può stabilire una connessione a server esterni durante il caricamento della pagina ed elaborare dati in questo modo.

Ciò può essere rilevante, ad esempio, per servizi di analisi, mappe, video, chat, prenotazione o social media.

Importante: Il fatto che un servizio esterno possa essere integrato tecnicamente tramite codice non significa automaticamente che possa essere utilizzato senza ulteriori misure di protezione dei dati.

Considerare la soluzione di consenso #

Se un servizio esterno imposta cookie o utilizza altre tecnologie soggette a consenso, potrebbe essere necessaria una corrispondente configurazione del consenso.

Se e quali requisiti siano necessari dipende dal servizio utilizzato, dalla tua configurazione e dalle normative legali applicabili al tuo sito web.

Verificalo prima di pubblicare un'integrazione corrispondente.

Codice personale e sicurezza #

Il codice possiede fondamentalmente la capacità di influenzare il comportamento di un sito web.

Utilizza pertanto solo codice proveniente da fonti affidabili e rimuovi le integrazioni che non sono più necessarie.

Dovresti essere particolarmente critico se una persona sconosciuta ti chiede di inserire un codice di cui non riesci a comprendere la funzione.

Attenzione: Non inserire mai codice sul tuo sito web solo perché qualcuno ti sostiene che sia necessario per la „SEO“, la „verifica di Google“, la „sicurezza“ o una presunta riparazione necessaria. Verifica prima la provenienza e lo scopo.

I servizi esterni possono cambiare #

Un'integrazione può funzionare oggi e causare problemi in seguito se il fornitore esterno modifica il proprio servizio, i propri URL o il codice di incorporamento.

Pertanto, nel caso di funzioni esterne, dovresti considerare che il loro funzionamento non è completamente sotto il tuo controllo.

Se un widget improvvisamente smette di funzionare, verifica anche se il fornitore esterno ha modificato o interrotto la sua integrazione.

Cosa fare se il sito web appare errato dopo una modifica del codice? #

Se un problema di visualizzazione si verifica immediatamente dopo una modifica CSS o HTML, dovresti prima annullare l'ultima modifica effettuata.

Se hai salvato il codice precedente, puoi ripristinare lo stato funzionante.

Verifica poi se il sito web viene visualizzato nuovamente in modo corretto.

Non modificare contemporaneamente altre aree finché la causa non è ancora stata chiarita.

Cosa fare se una funzione non funziona più dopo del codice JavaScript? #

Rimuovi o disattiva prima il codice JavaScript aggiunto più recentemente e testa nuovamente il sito web.

Se la funzione riprende a funzionare successivamente, è probabile che ci sia una correlazione con il codice inserito.

Ciò non significa necessariamente che il codice sia fondamentalmente difettoso. Potrebbe anche esserci un conflitto con gli script esistenti o con il modo in cui è integrato.

Console del browser per la risoluzione dei problemi tecnici #

Gli utenti avanzati possono utilizzare gli strumenti di sviluppo del proprio browser in caso di problemi con JavaScript.

La console del browser può mostrare indizi su errori JavaScript o risorse non caricate.

Questi messaggi sono tuttavia tecnici e devono essere interpretati nel rispettivo contesto.

Nota per utenti avanzati: Un messaggio di errore nella console del browser non significa automaticamente che Kopage stessa sia la causa. L'errore può anche provenire da uno script esterno, da un widget o da codice inserito individualmente.

Testa le modifiche in una finestra di navigazione in incognito #

Se dopo una modifica del codice continui a vedere la visualizzazione precedente, potrebbe essere dovuto alla cache del browser.

Testa la pagina, se necessario, in una finestra di navigazione in incognito o su un secondo dispositivo.

In questo modo puoi distinguere più facilmente se la modifica fondamentalmente non funziona o se viene semplicemente visualizzata una versione precedente nel browser.

Codice proprietario e ottimizzazione per i motori di ricerca #

Il codice HTML personalizzato può influenzare la struttura di una pagina. Pertanto, un markup errato o contenuti disponibili solo tramite funzioni esterne complicate possono avere ripercussioni anche sulla qualità tecnica di un sito web.

Inoltre, JavaScript non dovrebbe essere utilizzato per fornire contenuti semplici in modo inutilmente complicato, quando questi possono essere tranquillamente visualizzati come normale contenuto della pagina.

Trattiamo le basi generali della SEO in SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca.

Non integrare Google Analytics due volte tramite codice arbitrario #

Se hai già integrato un servizio esterno tramite un'apposita funzione di CoPage, non dovresti integrarlo ulteriormente senza un motivo tramite codice personalizzato.

Un'integrazione doppia può portare, tra le altre cose, a una raccolta di dati multipla o a problemi difficilmente tracciabili.

Trattiamo le funzioni Google e Analytics previste nella sezione Google, Sitemap, Analytics e statistiche del sito web in Kopage.

Quando è meglio fare a meno del proprio codice? #

Evita il codice personalizzato se non riesci a comprenderne né lo scopo né i potenziali effetti.

Ciò vale in particolare per ampi frammenti di codice JavaScript di origine sconosciuta.

Anche se una funzione desiderata può già essere implementata con i normali strumenti di Kopage, il codice aggiuntivo spesso non apporta alcun vantaggio.

Il proprio codice dovrebbe essere documentato #

Se utilizzi più personalizzazioni individuali, dovresti documentare a cosa servono.

Una semplice panoramica potrebbe ad esempio apparire così:

Personalizzazione: Widget di prenotazione
Fonte: Fornitore del sistema di prenotazione
Inserito per: Pagina degli appuntamenti
Scopo: Prenotazione di appuntamenti online

Personalizzazione: CSS personalizzato
Scopo: Rappresentazione speciale di un'area di avviso
Modificato: Agosto 2026

Una tale documentazione facilita notevolmente le modifiche successive e la ricerca degli errori.

Controlla il codice dopo le modifiche al servizio esterno #

Se un servizio incorporato modifica la sua configurazione, dovresti verificare se il tuo codice di incorporamento precedente è ancora aggiornato.

Non sostituire automaticamente il codice esistente con una nuova variante senza prima verificare quali modifiche il fornitore richiede effettivamente.

Eseguire il backup del sito web prima di modifiche importanti #

In caso di modifiche più ampie, un backup aggiornato è fondamentalmente opportuno.

Ciò vale soprattutto quando apporti modifiche a un sito web di produzione i cui effetti non puoi valutare appieno.

Un backup non sostituisce un lavoro accurato, ma facilita il ripristino nel caso in cui una modifica importante causi problemi inattesi.

Testare completamente dopo una modifica del codice #

Dopo una modifica personalizzata, non controllare solo l'area immediatamente modificata.

Un test significativo comprende:

aprire la pagina interessata
↓
testare la funzione
↓
verificare altre pagine importanti
↓
controllare la navigazione
↓
testare i moduli
↓
verificare lo smartphone
↓
testare il secondo browser
↓
controllare il sito web pubblico

Errori tipici nel proprio codice #

Tra i problemi più comuni vi sono codice proveniente da fonti sconosciute, script inseriti più volte, posizioni di inserimento errate e regole CSS che modificano inaspettatamente più aree.

Anche i widget esterni con larghezze fisse possono causare problemi sui dispositivi mobili.

Un altro errore comune consiste nell'apportare più modifiche contemporaneamente. Se dopo qualcosa non funziona più, è difficile stabilire quale modifica ne sia stata la causa.

Lista di controllo prima dell'inserimento del codice personalizzato #

Köpage offre già una funzione adatta?
        ↓
È davvero necessario un codice personalizzato?
        ↓
La fonte è affidabile?
        ↓
Comprendo lo scopo del codice?
        ↓
Il codice esistente è protetto/salvato?
        ↓
Protezione dei dati verificata?
        ↓
Codice inserito nel posto giusto?
        ↓
Sito web pubblico testato?
        ↓
Smartphone testato?
        ↓
Modifica documentata?

Come procediamo? #

Il codice personalizzato e i componenti esterni incorporati non dovrebbero funzionare solo su uno schermo desktop.

Soprattutto in caso di personalizzazioni, è importante controllare attentamente la visualizzazione su smartphone e tablet.

Si prosegue quindi con Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet.

Riepilogo #

Il classico website builder di Kopage consente l'utilizzo di codice HTML, CSS e JavaScript personalizzato per esigenze che vanno oltre le normali funzioni del builder.

L'HTML descrive i contenuti e la struttura, il CSS influenza la presentazione e JavaScript consente ulteriori funzioni dinamiche.

Usa il codice personalizzato solo se c'è un motivo specifico per farlo e preferisci le funzioni Kopage esistenti se soddisfano già le tue esigenze.

Accetta codici esterni solo da fonti affidabili, proteggi le personalizzazioni esistenti prima di apportare modifiche e tieni conto di prestazioni, privacy e sicurezza anche nelle integrazioni esterne.

Testa successivamente le modifiche sul sito web pubblicato e su diversi dispositivi.

Il codice personalizzato può estendere Kopage in modo utile. Tuttavia, più l'adattamento diventa individuale, più diventano importanti una documentazione pulita, modifiche controllate e test approfonditi.