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 aggiuntiveQuesta 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 smartphoneUna 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.
Externen Code und Performance beachten #
Externe Skripte und Widgets können zusätzliche Dateien und Daten von fremden Servern laden.
Je mehr externe Dienste eingebunden werden, desto mehr zusätzliche Ressourcen können beim Seitenaufruf erforderlich sein.
Das kann sich auf die Ladezeit und das Verhalten der Website auswirken.
Setze externe Integrationen deshalb gezielt ein und entferne Funktionen, die keinen tatsächlichen Nutzen mehr haben.
Nicht jedes Widget ist seinen Aufwand wert #
Ein zusätzliches Widget kann optisch interessant sein, gleichzeitig aber externe Skripte laden, Daten übertragen und zusätzlichen Wartungsaufwand verursachen.
Frage dich deshalb vor der Integration, ob die Funktion für deine Besucher wirklich relevant ist.
Eine einfache Verlinkung zu einem externen Dienst kann in manchen Fällen sinnvoller sein als dessen vollständige Einbettung.
Eigenen Code und Responsive Design prüfen #
Kopage selbst ist auf responsive Websites ausgelegt. Individuell eingefügter Code muss deshalb aber nicht automatisch ebenfalls auf jedem Bildschirm korrekt funktionieren.
Ein externes Widget kann beispielsweise eine feste Breite besitzen und dadurch auf einem Smartphone über den sichtbaren Bereich hinausragen.
Teste individuellen Code deshalb auf Desktop, Tablet und Smartphone.
Weitere Hinweise zur mobilen Darstellung findest du unter Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet.
Feste Breiten vorsichtig verwenden #
Bei selbst geschriebenem HTML oder CSS solltest du besonders auf starre Größenangaben achten.
Ein Element mit einer fest vorgegebenen großen Breite kann auf kleineren Geräten Probleme verursachen.
Responsive Gestaltung berücksichtigt dagegen, dass unterschiedliche Bildschirmgrößen zur Verfügung stehen.
Eigener Code und Datenschutz #
Besondere Aufmerksamkeit ist bei externem JavaScript und Embed-Code erforderlich.
Ein eingebundener Drittanbieter kann beim Seitenaufruf eine Verbindung zu externen Servern herstellen und dabei Daten verarbeiten.
Das kann beispielsweise bei Analyse-, Karten-, Video-, Chat-, Buchungs- oder Social-Media-Diensten relevant sein.
Importante: Dass sich ein externer Dienst technisch per Code einbinden lässt, bedeutet nicht automatisch, dass er ohne weitere Datenschutzmaßnahmen verwendet werden darf.
Consent-Lösung berücksichtigen #
Wenn ein externer Dienst Cookies setzt oder andere zustimmungspflichtige Technologien verwendet, kann eine entsprechende Consent-Konfiguration erforderlich sein.
Ob und welche Anforderungen bestehen, hängt vom verwendeten Dienst, deiner Konfiguration und den für deine Website geltenden rechtlichen Vorgaben ab.
Prüfe dies vor der Veröffentlichung einer entsprechenden Integration.
Eigener Code und Sicherheit #
Code besitzt grundsätzlich die Möglichkeit, das Verhalten einer Website zu beeinflussen.
Verwende deshalb nur Code aus vertrauenswürdigen Quellen und entferne Integrationen, die nicht mehr benötigt werden.
Besonders kritisch solltest du sein, wenn dich eine unbekannte Person auffordert, einen Code einzufügen, dessen Funktion du nicht nachvollziehen kannst.
Attenzione: Füge niemals Code auf deiner Website ein, nur weil dir jemand behauptet, er sei für „SEO“, „Google-Verifizierung“, „Sicherheit“ oder eine angeblich notwendige Reparatur erforderlich. Prüfe zuerst Herkunft und Zweck.
Externe Dienste können sich ändern #
Eine Integration kann heute funktionieren und später Probleme verursachen, wenn der externe Anbieter seinen Dienst, seine URLs oder seinen Einbettungscode verändert.
Bei externen Funktionen solltest du deshalb berücksichtigen, dass deren Betrieb nicht vollständig unter deiner Kontrolle steht.
Wenn ein Widget plötzlich nicht mehr funktioniert, prüfe auch, ob der externe Anbieter seine Integration geändert oder eingestellt hat.
Was tun, wenn die Website nach einer Codeänderung falsch aussieht? #
Wenn ein Darstellungsproblem unmittelbar nach einer CSS- oder HTML-Änderung auftritt, solltest du zunächst die zuletzt vorgenommene Änderung rückgängig machen.
Hast du den vorherigen Code gesichert, kannst du den funktionierenden Stand wiederherstellen.
Prüfe anschließend, ob die Website wieder korrekt dargestellt wird.
Ändere nicht gleichzeitig mehrere weitere Bereiche, solange die Ursache noch nicht geklärt ist.
Was tun, wenn eine Funktion nach JavaScript-Code nicht mehr funktioniert? #
Entferne beziehungsweise deaktiviere zunächst den zuletzt hinzugefügten JavaScript-Code und teste die Website erneut.
Wenn die Funktion anschließend wieder arbeitet, liegt ein Zusammenhang mit dem eingefügten Code nahe.
Das bedeutet noch nicht zwingend, dass der Code grundsätzlich fehlerhaft ist. Es kann auch ein Konflikt mit vorhandenen Skripten oder der Art der Einbindung bestehen.
Browser-Konsole für technische Fehlersuche #
Fortgeschrittene Nutzer können bei JavaScript-Problemen die Entwicklerwerkzeuge ihres Browsers verwenden.
Die Browser-Konsole kann Hinweise auf JavaScript-Fehler oder nicht geladene Ressourcen anzeigen.
Diese Meldungen sind jedoch technisch und müssen im jeweiligen Zusammenhang interpretiert werden.
Hinweis für Fortgeschrittene: Eine Fehlermeldung in der Browser-Konsole bedeutet nicht automatisch, dass Kopage selbst die Ursache ist. Der Fehler kann ebenso aus einem externen Script, Widget oder individuell eingefügten Code stammen.
Änderungen im privaten Browserfenster testen #
Wenn du nach einer Codeänderung weiterhin die vorherige Darstellung siehst, kann ein Browser-Cache eine Rolle spielen.
Teste die Seite gegebenenfalls in einem privaten Browserfenster oder auf einem zweiten Gerät.
So kannst du leichter unterscheiden, ob die Änderung grundsätzlich nicht funktioniert oder lediglich eine ältere Version im Browser angezeigt wird.
Eigener Code und Suchmaschinenoptimierung #
Eigener HTML-Code kann die Struktur einer Seite beeinflussen. Fehlerhaftes Markup oder Inhalte, die nur über komplizierte externe Funktionen verfügbar sind, können deshalb auch Auswirkungen auf die technische Qualität einer Website haben.
JavaScript sollte außerdem nicht eingesetzt werden, um einfache Inhalte unnötig kompliziert bereitzustellen, wenn diese problemlos als normaler Seiteninhalt dargestellt werden können.
Trattiamo le basi generali della SEO in SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca.
Google Analytics nicht über beliebigen Code doppelt einbinden #
Wenn du einen externen Dienst bereits über eine dafür vorgesehene Kopage-Funktion eingebunden hast, solltest du ihn nicht zusätzlich ohne Grund nochmals per eigenem Code integrieren.
Eine doppelte Integration kann unter anderem zu mehrfacher Datenerfassung oder schwer nachvollziehbaren Problemen führen.
Die vorgesehenen Google- und Analytics-Funktionen behandeln wir unter Google, Sitemap, Analytics e statistiche del sito web in Kopage.
Wann sollte ich besser auf eigenen Code verzichten? #
Verzichte auf individuellen Code, wenn du weder dessen Zweck noch die möglichen Auswirkungen nachvollziehen kannst.
Das gilt besonders für umfangreiche JavaScript-Snippets unbekannter Herkunft.
Auch wenn eine gewünschte Funktion bereits mit den normalen Kopage-Werkzeugen umgesetzt werden kann, bringt zusätzlicher Code häufig keinen Vorteil.
Eigener Code sollte dokumentiert werden #
Wenn du mehrere individuelle Anpassungen verwendest, solltest du dokumentieren, wofür sie benötigt werden.
Eine einfache Übersicht kann beispielsweise so aussehen:
Anpassung: Buchungswidget
Quelle: Anbieter des Buchungssystems
Eingefügt für: Terminseite
Zweck: Online-Terminbuchung
Anpassung: individuelles CSS
Zweck: spezielle Darstellung eines Hinweisbereichs
Geändert: August 2026Eine solche Dokumentation erleichtert spätere Änderungen und die Fehlersuche erheblich.
Code nach Änderungen am externen Dienst prüfen #
Wenn ein eingebundener Dienst seine Konfiguration verändert, solltest du prüfen, ob dein bisheriger Embed-Code weiterhin aktuell ist.
Ersetze vorhandenen Code nicht automatisch durch eine neue Variante, ohne vorher zu kontrollieren, welche Änderungen der Anbieter tatsächlich verlangt.
Vor größeren Änderungen Website sichern #
Bei umfangreicheren Anpassungen ist eine aktuelle Sicherung grundsätzlich sinnvoll.
Das gilt besonders dann, wenn du an einer produktiven Website Änderungen vornimmst, deren Auswirkungen du nicht vollständig abschätzen kannst.
Eine Sicherung ersetzt zwar nicht das sorgfältige Arbeiten, erleichtert aber die Wiederherstellung, falls eine größere Änderung unerwartete Probleme verursacht.
Nach einer Codeänderung vollständig testen #
Kontrolliere nach einer individuellen Anpassung nicht nur den unmittelbar veränderten Bereich.
Ein sinnvoller Test umfasst:
betroffene Seite öffnen
↓
Funktion testen
↓
weitere wichtige Seiten prüfen
↓
Navigation kontrollieren
↓
Formulare testen
↓
Smartphone prüfen
↓
zweiten Browser testen
↓
öffentliche Website kontrollierenTypische Fehler bei eigenem Code #
Zu den häufigsten Problemen gehören Code aus unbekannten Quellen, mehrfach eingefügte Scripts, falsche Einfügepositionen und CSS-Regeln, die unbeabsichtigt mehrere Bereiche verändern.
Auch externe Widgets mit festen Breiten können auf mobilen Geräten Probleme verursachen.
Ein weiterer häufiger Fehler besteht darin, mehrere Änderungen gleichzeitig vorzunehmen. Wenn danach etwas nicht mehr funktioniert, lässt sich kaum feststellen, welche Änderung die Ursache war.
Checkliste vor dem Einfügen von eigenem Code #
Bietet Kopage bereits eine passende Funktion?
↓
Ist eigener Code wirklich erforderlich?
↓
Ist die Quelle vertrauenswürdig?
↓
Verstehe ich den Zweck des Codes?
↓
Ist vorhandener Code gesichert?
↓
Datenschutz geprüft?
↓
Code an der richtigen Stelle eingefügt?
↓
öffentliche Website getestet?
↓
Smartphone getestet?
↓
Änderung dokumentiert?Come procediamo? #
Individueller Code und externe Einbindungen sollten nicht nur auf einem Desktop-Bildschirm funktionieren.
Gerade bei eigenen Anpassungen ist es wichtig, die Darstellung auf Smartphones und Tablets sorgfältig zu kontrollieren.
Si prosegue quindi con Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet.
Riepilogo #
Der klassische Kopage Website Builder ermöglicht die Verwendung von eigenem HTML-, CSS- und JavaScript-Code für Anforderungen, die über die normalen Builder-Funktionen hinausgehen.
HTML beschreibt Inhalte und Strukturen, CSS beeinflusst die Darstellung und JavaScript ermöglicht zusätzliche dynamische Funktionen.
Verwende individuellen Code nur dann, wenn dafür ein konkreter Grund besteht, und bevorzuge vorhandene Kopage-Funktionen, wenn diese deine Anforderung bereits erfüllen.
Übernimm externe Codes nur aus vertrauenswürdigen Quellen, sichere vorhandene Anpassungen vor Änderungen und berücksichtige bei externen Integrationen auch Performance, Datenschutz und Sicherheit.
Teste Änderungen anschließend auf der veröffentlichten Website und auf unterschiedlichen Geräten.
Eigener Code kann Kopage sinnvoll erweitern. Je individueller die Anpassung wird, desto wichtiger werden jedoch saubere Dokumentation, kontrollierte Änderungen und gründliche Tests.
