{"id":22858,"date":"2026-08-29T10:31:52","date_gmt":"2026-08-29T08:31:52","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=22858"},"modified":"2026-08-29T10:31:52","modified_gmt":"2026-08-29T08:31:52","password":"","slug":"kopage-html-css-javascript","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/it\/hilfe\/website-baukasten\/kopage-html-css-javascript\/","title":{"rendered":"Utilizzare HTML, CSS e JavaScript personalizzati in Kopage"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Il classico Website Builder di Kopage consente di utilizzare codice HTML, CSS e JavaScript personalizzato, oltre alle funzioni integrate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In questo modo puoi, ad esempio, integrare contenuti esterni, personalizzare determinate visualizzazioni o aggiungere funzionalit\u00e0 per cui Kopage stesso non fornisce un modulo adatto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il codice personalizzato offre ulteriori possibilit\u00e0, ma richiede anche la dovuta cautela. Codice errato o non verificato pu\u00f2 influire sulla grafica, sulle funzionalit\u00e0, sulle prestazioni, sulla sicurezza o sulla privacy del tuo sito web.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Breve spiegazione:<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Che cos'\u00e8 il codice personalizzato in Kopage?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kopage \u00e8 fondamentalmente progettato per creare siti web senza alcuna conoscenza di programmazione.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pagine, testi, immagini, moduli e numerose altre funzioni possono essere gestiti tramite il visual website builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per esigenze particolari, il classico Website Builder di Kopage supporta tuttavia anche codice HTML, CSS e JavaScript personalizzato.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le tre tecnologie svolgono compiti diversi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML\n\u2192 Struttura e contenuti\n\nCSS\n\u2192 Design e presentazione\n\nJavaScript\n\u2192 Comportamento e funzioni aggiuntive<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Questa distinzione \u00e8 importante prima di inserire il tuo codice nel tuo sito web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quando ho bisogno di codice mio?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il codice personalizzato pu\u00f2 essere utile quando una determinata funzione non pu\u00f2 essere implementata con i normali strumenti di Kopage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I casi d'uso tipici sono, ad esempio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inclusione di un widget esterno,<\/li>\n\n\n\n<li>Integrazione di un servizio esterno,<\/li>\n\n\n\n<li>personalizzazioni CSS individuali,<\/li>\n\n\n\n<li>ulteriori contenuti HTML,<\/li>\n\n\n\n<li>o una funzione JavaScript speciale.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Se Kopage dispone gi\u00e0 di una funzione integrata adatta per il tuo compito, questa \u00e8 nella maggior parte dei casi la soluzione pi\u00f9 semplice e facile da mantenere.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Consiglio pratico:<\/strong> Verifica prima se Kopage offre gi\u00e0 la funzione desiderata. Il codice personalizzato dovrebbe colmare una lacuna specifica e non sostituire inutilmente una funzione esistente del builder.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Che cos'\u00e8 l'HTML?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML sta per HyperText Markup Language e descrive la struttura dei contenuti di una pagina web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un esempio molto semplice \u00e8:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;I nostri orari di apertura&lt;\/h2&gt;\n&lt;p&gt;Da luned&igrave; a venerd&igrave;: dalle 08:00 alle 17:00&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Il browser interpreta gli elementi HTML e li visualizza come un'intestazione e un paragrafo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tuttavia, in Kopage non \u00e8 necessario scrivere HTML da soli per i normali titoli e testi. A questo scopo sono disponibili le normali funzioni di modifica del website builder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quando \u00e8 utile l'HTML personalizzato?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">L'HTML personalizzato diventa interessante, ad esempio, quando un fornitore esterno fornisce un codice di incorporamento pronto all'uso o quando \u00e8 necessaria una struttura speciale che non pu\u00f2 essere rappresentata in modo sensato con le normali funzioni di Kopage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un servizio esterno potrebbe ad esempio fornire un codice di questo tipo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=&quot;example-widget&quot;&gt;\n    Contenuto esterno\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Questo \u00e8 solo un esempio semplificato e non un widget da includere effettivamente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Non abusare di HTML per la normale gestione delle pagine<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Solo perch\u00e9 si pu\u00f2 usare l'HTML, non dovresti creare manualmente tutti i contenuti normali delle pagine con esso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Testi, immagini e normali sezioni di pagina possono essere gestiti pi\u00f9 facilmente con le funzioni Kopage previste.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spiegheremo come elaborare i contenuti normali su <a href=\"\/it\/aiuto\/creatore-di-siti-web\/modificare-i-blocchi-di-contenuto-dei-contenuti-di-kopage\/\">Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Che cos'\u00e8 i CSS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS sta per Cascading Style Sheets e viene utilizzato per la formattazione visiva degli elementi HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 consente, ad esempio, di influenzare spaziatura, dimensioni dei caratteri, bordi o altre caratteristiche di visualizzazione.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un esempio semplificato:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.hinweis {\n    font-weight: bold;\n    padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Questo CSS, tra le altre cose, rendererebbe in grassetto gli elementi con la classe corrispondente e aggiungerebbe un margine interno.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quando \u00e8 utile il CSS personalizzato?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il CSS personalizzato pu\u00f2 essere utile quando hai bisogno di una modifica visiva mirata che va oltre le normali opzioni di design di Kopage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prima di utilizzare i CSS, tuttavia, dovresti verificare se la modifica desiderata pu\u00f2 gi\u00e0 essere implementata tramite le impostazioni di design e template esistenti.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trattiamo le normali opzioni di design sotto <a href=\"\/it\/aiuto\/creatore-di-siti-web\/kopage-template-design-anpassen\/\">Modificare template e design di Kopage: colori, caratteri, intestazione e pi\u00e8 di pagina<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Importante:<\/strong> Non utilizzare CSS inutilmente per impostazioni che Kopage fornisce gi\u00e0 tramite la sua interfaccia di design. Le modifiche apportate tramite le funzioni integrate sono solitamente pi\u00f9 facili da comprendere per modifiche successive.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Il CSS pu\u00f2 influenzare pi\u00f9 aree contemporaneamente<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I CSS utilizzano i selettori. A seconda di quanto \u00e8 generale la formulazione di un selettore, una regola pu\u00f2 modificare non solo un singolo elemento, ma molte aree del sito web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una regola CSS molto generale pu\u00f2 quindi avere conseguenze indesiderate su altre pagine o elementi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Testa accuratamente le modifiche CSS individuali e controlla non solo il punto che volevi modificare inizialmente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Verificare le modifiche su pi\u00f9 pagine<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se il tuo CSS agisce su classi comuni o elementi della pagina, dopo una modifica dovresti controllare diverse aree del sito web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 include in particolare:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Pagina iniziale\nsottopagine importanti\nNavigazione\nModuli\nBlog\nNegozio\nPi\u00e8 di pagina\nVisualizzazione per smartphone<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Una modifica che ha un bell'aspetto su una singola pagina pu\u00f2 avere effetti imprevisti altrove.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cos'\u00e8 JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript \u00e8 un linguaggio di programmazione che pu\u00f2 essere eseguito nel browser e consente funzioni interattive o dinamiche.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript pu\u00f2, ad esempio, reagire alle azioni dell'utente, caricare funzioni esterne o modificare dinamicamente i contenuti.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un esempio molto semplificato:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nconsole.log('Beispiel');\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Questo esempio \u00e8 puramente a scopo illustrativo e non ha alcun utilizzo pratico per un normale sito web Kopage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Usare JavaScript con particolare attenzione<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript offre molte pi\u00f9 possibilit\u00e0 rispetto a una semplice regola di stile CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un codice difettoso pu\u00f2 compromettere le funzionalit\u00e0, causare messaggi di errore o entrare in conflitto con il JavaScript esistente del sito web o di un servizio esterno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Includi quindi solo codice JavaScript di cui conosci l'origine e lo scopo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Attenzione:<\/strong> Non copiare mai codice JavaScript non verificato da forum, commenti, siti Web sconosciuti o altre fonti non attendibili sul tuo sito Web. JavaScript pu\u00f2 fare molto di pi\u00f9 che semplicemente modificare la visualizzazione di una pagina.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Cos'\u00e8 un codice embed?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Molti servizi esterni forniscono un cosiddetto codice di incorporamento o embed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questo pu\u00f2 essere utilizzato per visualizzare un contenuto esterno all'interno di un sito web o per caricare una funzione esterna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A seconda del fornitore, un tale codice pu\u00f2 contenere HTML, JavaScript o una combinazione di essi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esempi tipici possono essere funzioni di prenotazione esterne, moduli, calendari, video, servizi di recensione o altri widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Includi il codice di incorporamento solo dal fornitore originale<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se desideri integrare un servizio esterno, dovresti copiare il codice apposito direttamente dall'interfaccia di gestione ufficiale o dalla documentazione di quel servizio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Non usare un codice qualsiasi tratto da un vecchio articolo di blog o da un forum solo perch\u00e9 viene menzionato il nome del servizio desiderato.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I fornitori esterni possono modificare i loro metodi di incorporamento nel corso del tempo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preferire le funzioni di copage esistenti<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Per diversi contenuti esterni comunemente utilizzati, Kopage offre gi\u00e0 le funzioni adatte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trattiamo ad esempio le integrazioni con Google Maps, YouTube e i social media alla voce <a href=\"\/it\/aiuto\/creatore-di-siti-web\/kopage-maps-youtube-social-media\/\">Incorporare Google Maps, YouTube e social media in Kopage<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se una tale possibilit\u00e0 integrata \u00e8 sufficiente per il tuo caso d'uso, non devi utilizzare in aggiunta un tuo codice di embed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dove inserire il proprio codice?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Per HTML, CSS o JavaScript, utilizza esclusivamente le funzioni previste del classico Kopage Website Builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quale area sia adatta dipende dal fatto che il codice riguardi un determinato contenuto della pagina, la grafica o una funzione esterna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Non inserire codice a caso nei normali campi di testo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Importante:<\/strong> 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 \u00e8 previsto il relativo tipo di codice.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Capire il codice prima di incollarlo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nel caso di un widget esterno, ad esempio, dovresti essere in grado di rispondere:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Da quale fornitore proviene il codice?\nCosa viene integrato nel mio sito web?\nVengono contattati server esterni?\nVengono trasmessi dati?\nLa funzione richiede cookie?\nPosso rimuovere il codice in un secondo momento?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se queste domande non ti sono del tutto chiare, non dovresti usare il codice senza verifiche su un sito web di produzione.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prima delle modifiche, eseguire il backup del codice esistente<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se desideri modificare del codice personalizzato gi\u00e0 funzionante, effettua prima un backup della versione precedente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 pu\u00f2 significare, ad esempio, che salvi il codice precedente in un file di testo locale prima di modificarlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se la nuova versione causa problemi, questo ti consente di tornare pi\u00f9 facilmente alla versione precedente.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Consiglio pratico:<\/strong> Con codice pi\u00f9 complesso, modifica se possibile una sola cosa alla volta. Se successivamente si verifica un errore, la causa \u00e8 molto pi\u00f9 facile da circoscrivere.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Utilizzare i commenti nel proprio codice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se gestisci tu stesso CSS o altro codice, dei brevi commenti possono aiutarti a capire lo scopo delle singole modifiche in un secondo momento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un esempio di CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Spaziatura per area di avviso speciale *\/\n.hinweis {\n    padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 \u00e8 particolarmente utile quando diverse personalizzazioni individuali si sono accumulate nel corso di un lungo periodo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Non inserire il codice pi\u00f9 volte<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se un'integrazione non \u00e8 immediatamente visibile, non dovresti semplicemente inserire lo stesso codice pi\u00f9 volte in punti diversi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci\u00f2 pu\u00f2 causare il caricamento multiplo di script esterni o l'esecuzione multipla di funzioni.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verifica invece prima se il codice \u00e8 stato inserito nella posizione corretta e se la pagina in questione \u00e8 stata pubblicata o aggiornata.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Externen Code und Performance beachten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Externe Skripte und Widgets k\u00f6nnen zus\u00e4tzliche Dateien und Daten von fremden Servern laden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je mehr externe Dienste eingebunden werden, desto mehr zus\u00e4tzliche Ressourcen k\u00f6nnen beim Seitenaufruf erforderlich sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das kann sich auf die Ladezeit und das Verhalten der Website auswirken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Setze externe Integrationen deshalb gezielt ein und entferne Funktionen, die keinen tats\u00e4chlichen Nutzen mehr haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nicht jedes Widget ist seinen Aufwand wert<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein zus\u00e4tzliches Widget kann optisch interessant sein, gleichzeitig aber externe Skripte laden, Daten \u00fcbertragen und zus\u00e4tzlichen Wartungsaufwand verursachen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Frage dich deshalb vor der Integration, ob die Funktion f\u00fcr deine Besucher wirklich relevant ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine einfache Verlinkung zu einem externen Dienst kann in manchen F\u00e4llen sinnvoller sein als dessen vollst\u00e4ndige Einbettung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigenen Code und Responsive Design pr\u00fcfen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kopage selbst ist auf responsive Websites ausgelegt. Individuell eingef\u00fcgter Code muss deshalb aber nicht automatisch ebenfalls auf jedem Bildschirm korrekt funktionieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein externes Widget kann beispielsweise eine feste Breite besitzen und dadurch auf einem Smartphone \u00fcber den sichtbaren Bereich hinausragen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teste individuellen Code deshalb auf Desktop, Tablet und Smartphone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Weitere Hinweise zur mobilen Darstellung findest du unter <a href=\"\/it\/aiuto\/creatore-di-siti-web\/design-responsive-kopage\/\">Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Feste Breiten vorsichtig verwenden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei selbst geschriebenem HTML oder CSS solltest du besonders auf starre Gr\u00f6\u00dfenangaben achten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Element mit einer fest vorgegebenen gro\u00dfen Breite kann auf kleineren Ger\u00e4ten Probleme verursachen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive Gestaltung ber\u00fccksichtigt dagegen, dass unterschiedliche Bildschirmgr\u00f6\u00dfen zur Verf\u00fcgung stehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigener Code und Datenschutz<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Besondere Aufmerksamkeit ist bei externem JavaScript und Embed-Code erforderlich.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein eingebundener Drittanbieter kann beim Seitenaufruf eine Verbindung zu externen Servern herstellen und dabei Daten verarbeiten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das kann beispielsweise bei Analyse-, Karten-, Video-, Chat-, Buchungs- oder Social-Media-Diensten relevant sein.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Importante:<\/strong> Dass sich ein externer Dienst technisch per Code einbinden l\u00e4sst, bedeutet nicht automatisch, dass er ohne weitere Datenschutzma\u00dfnahmen verwendet werden darf.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Consent-L\u00f6sung ber\u00fccksichtigen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein externer Dienst Cookies setzt oder andere zustimmungspflichtige Technologien verwendet, kann eine entsprechende Consent-Konfiguration erforderlich sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ob und welche Anforderungen bestehen, h\u00e4ngt vom verwendeten Dienst, deiner Konfiguration und den f\u00fcr deine Website geltenden rechtlichen Vorgaben ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00fcfe dies vor der Ver\u00f6ffentlichung einer entsprechenden Integration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigener Code und Sicherheit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Code besitzt grunds\u00e4tzlich die M\u00f6glichkeit, das Verhalten einer Website zu beeinflussen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende deshalb nur Code aus vertrauensw\u00fcrdigen Quellen und entferne Integrationen, die nicht mehr ben\u00f6tigt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besonders kritisch solltest du sein, wenn dich eine unbekannte Person auffordert, einen Code einzuf\u00fcgen, dessen Funktion du nicht nachvollziehen kannst.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Attenzione:<\/strong> F\u00fcge niemals Code auf deiner Website ein, nur weil dir jemand behauptet, er sei f\u00fcr \u201eSEO\u201c, \u201eGoogle-Verifizierung\u201c, \u201eSicherheit\u201c oder eine angeblich notwendige Reparatur erforderlich. Pr\u00fcfe zuerst Herkunft und Zweck.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Externe Dienste k\u00f6nnen sich \u00e4ndern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Integration kann heute funktionieren und sp\u00e4ter Probleme verursachen, wenn der externe Anbieter seinen Dienst, seine URLs oder seinen Einbettungscode ver\u00e4ndert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei externen Funktionen solltest du deshalb ber\u00fccksichtigen, dass deren Betrieb nicht vollst\u00e4ndig unter deiner Kontrolle steht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein Widget pl\u00f6tzlich nicht mehr funktioniert, pr\u00fcfe auch, ob der externe Anbieter seine Integration ge\u00e4ndert oder eingestellt hat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was tun, wenn die Website nach einer Code\u00e4nderung falsch aussieht?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein Darstellungsproblem unmittelbar nach einer CSS- oder HTML-\u00c4nderung auftritt, solltest du zun\u00e4chst die zuletzt vorgenommene \u00c4nderung r\u00fcckg\u00e4ngig machen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hast du den vorherigen Code gesichert, kannst du den funktionierenden Stand wiederherstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00fcfe anschlie\u00dfend, ob die Website wieder korrekt dargestellt wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c4ndere nicht gleichzeitig mehrere weitere Bereiche, solange die Ursache noch nicht gekl\u00e4rt ist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was tun, wenn eine Funktion nach JavaScript-Code nicht mehr funktioniert?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Entferne beziehungsweise deaktiviere zun\u00e4chst den zuletzt hinzugef\u00fcgten JavaScript-Code und teste die Website erneut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die Funktion anschlie\u00dfend wieder arbeitet, liegt ein Zusammenhang mit dem eingef\u00fcgten Code nahe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet noch nicht zwingend, dass der Code grunds\u00e4tzlich fehlerhaft ist. Es kann auch ein Konflikt mit vorhandenen Skripten oder der Art der Einbindung bestehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browser-Konsole f\u00fcr technische Fehlersuche<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fortgeschrittene Nutzer k\u00f6nnen bei JavaScript-Problemen die Entwicklerwerkzeuge ihres Browsers verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Browser-Konsole kann Hinweise auf JavaScript-Fehler oder nicht geladene Ressourcen anzeigen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Meldungen sind jedoch technisch und m\u00fcssen im jeweiligen Zusammenhang interpretiert werden.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Hinweis f\u00fcr Fortgeschrittene:<\/strong> 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\u00fcgten Code stammen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c4nderungen im privaten Browserfenster testen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du nach einer Code\u00e4nderung weiterhin die vorherige Darstellung siehst, kann ein Browser-Cache eine Rolle spielen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teste die Seite gegebenenfalls in einem privaten Browserfenster oder auf einem zweiten Ger\u00e4t.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So kannst du leichter unterscheiden, ob die \u00c4nderung grunds\u00e4tzlich nicht funktioniert oder lediglich eine \u00e4ltere Version im Browser angezeigt wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigener Code und Suchmaschinenoptimierung<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eigener HTML-Code kann die Struktur einer Seite beeinflussen. Fehlerhaftes Markup oder Inhalte, die nur \u00fcber komplizierte externe Funktionen verf\u00fcgbar sind, k\u00f6nnen deshalb auch Auswirkungen auf die technische Qualit\u00e4t einer Website haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript sollte au\u00dferdem nicht eingesetzt werden, um einfache Inhalte unn\u00f6tig kompliziert bereitzustellen, wenn diese problemlos als normaler Seiteninhalt dargestellt werden k\u00f6nnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trattiamo le basi generali della SEO in <a href=\"\/it\/aiuto\/creatore-di-siti-web\/impostazioni-seo-di-kopage\/\">SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Google Analytics nicht \u00fcber beliebigen Code doppelt einbinden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du einen externen Dienst bereits \u00fcber eine daf\u00fcr vorgesehene Kopage-Funktion eingebunden hast, solltest du ihn nicht zus\u00e4tzlich ohne Grund nochmals per eigenem Code integrieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine doppelte Integration kann unter anderem zu mehrfacher Datenerfassung oder schwer nachvollziehbaren Problemen f\u00fchren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die vorgesehenen Google- und Analytics-Funktionen behandeln wir unter <a href=\"\/it\/aiuto\/creatore-di-siti-web\/kopage-google-sitemap-analytics-statistiche\/\">Google, Sitemap, Analytics e statistiche del sito web in Kopage<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann sollte ich besser auf eigenen Code verzichten?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Verzichte auf individuellen Code, wenn du weder dessen Zweck noch die m\u00f6glichen Auswirkungen nachvollziehen kannst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das gilt besonders f\u00fcr umfangreiche JavaScript-Snippets unbekannter Herkunft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch wenn eine gew\u00fcnschte Funktion bereits mit den normalen Kopage-Werkzeugen umgesetzt werden kann, bringt zus\u00e4tzlicher Code h\u00e4ufig keinen Vorteil.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigener Code sollte dokumentiert werden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du mehrere individuelle Anpassungen verwendest, solltest du dokumentieren, wof\u00fcr sie ben\u00f6tigt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine einfache \u00dcbersicht kann beispielsweise so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Anpassung: Buchungswidget\nQuelle: Anbieter des Buchungssystems\nEingef\u00fcgt f\u00fcr: Terminseite\nZweck: Online-Terminbuchung\n\nAnpassung: individuelles CSS\nZweck: spezielle Darstellung eines Hinweisbereichs\nGe\u00e4ndert: August 2026<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Eine solche Dokumentation erleichtert sp\u00e4tere \u00c4nderungen und die Fehlersuche erheblich.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code nach \u00c4nderungen am externen Dienst pr\u00fcfen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein eingebundener Dienst seine Konfiguration ver\u00e4ndert, solltest du pr\u00fcfen, ob dein bisheriger Embed-Code weiterhin aktuell ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ersetze vorhandenen Code nicht automatisch durch eine neue Variante, ohne vorher zu kontrollieren, welche \u00c4nderungen der Anbieter tats\u00e4chlich verlangt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vor gr\u00f6\u00dferen \u00c4nderungen Website sichern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bei umfangreicheren Anpassungen ist eine aktuelle Sicherung grunds\u00e4tzlich sinnvoll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das gilt besonders dann, wenn du an einer produktiven Website \u00c4nderungen vornimmst, deren Auswirkungen du nicht vollst\u00e4ndig absch\u00e4tzen kannst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Sicherung ersetzt zwar nicht das sorgf\u00e4ltige Arbeiten, erleichtert aber die Wiederherstellung, falls eine gr\u00f6\u00dfere \u00c4nderung unerwartete Probleme verursacht.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nach einer Code\u00e4nderung vollst\u00e4ndig testen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere nach einer individuellen Anpassung nicht nur den unmittelbar ver\u00e4nderten Bereich.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sinnvoller Test umfasst:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>betroffene Seite \u00f6ffnen\n        \u2193\nFunktion testen\n        \u2193\nweitere wichtige Seiten pr\u00fcfen\n        \u2193\nNavigation kontrollieren\n        \u2193\nFormulare testen\n        \u2193\nSmartphone pr\u00fcfen\n        \u2193\nzweiten Browser testen\n        \u2193\n\u00f6ffentliche Website kontrollieren<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Typische Fehler bei eigenem Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zu den h\u00e4ufigsten Problemen geh\u00f6ren Code aus unbekannten Quellen, mehrfach eingef\u00fcgte Scripts, falsche Einf\u00fcgepositionen und CSS-Regeln, die unbeabsichtigt mehrere Bereiche ver\u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch externe Widgets mit festen Breiten k\u00f6nnen auf mobilen Ger\u00e4ten Probleme verursachen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein weiterer h\u00e4ufiger Fehler besteht darin, mehrere \u00c4nderungen gleichzeitig vorzunehmen. Wenn danach etwas nicht mehr funktioniert, l\u00e4sst sich kaum feststellen, welche \u00c4nderung die Ursache war.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Checkliste vor dem Einf\u00fcgen von eigenem Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Bietet Kopage bereits eine passende Funktion?\n        \u2193\nIst eigener Code wirklich erforderlich?\n        \u2193\nIst die Quelle vertrauensw\u00fcrdig?\n        \u2193\nVerstehe ich den Zweck des Codes?\n        \u2193\nIst vorhandener Code gesichert?\n        \u2193\nDatenschutz gepr\u00fcft?\n        \u2193\nCode an der richtigen Stelle eingef\u00fcgt?\n        \u2193\n\u00f6ffentliche Website getestet?\n        \u2193\nSmartphone getestet?\n        \u2193\n\u00c4nderung dokumentiert?<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Come procediamo?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Individueller Code und externe Einbindungen sollten nicht nur auf einem Desktop-Bildschirm funktionieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gerade bei eigenen Anpassungen ist es wichtig, die Darstellung auf Smartphones und Tablets sorgf\u00e4ltig zu kontrollieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si prosegue quindi con <a href=\"\/it\/aiuto\/creatore-di-siti-web\/design-responsive-kopage\/\">Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Riepilogo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der klassische Kopage Website Builder erm\u00f6glicht die Verwendung von eigenem HTML-, CSS- und JavaScript-Code f\u00fcr Anforderungen, die \u00fcber die normalen Builder-Funktionen hinausgehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML beschreibt Inhalte und Strukturen, CSS beeinflusst die Darstellung und JavaScript erm\u00f6glicht zus\u00e4tzliche dynamische Funktionen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende individuellen Code nur dann, wenn daf\u00fcr ein konkreter Grund besteht, und bevorzuge vorhandene Kopage-Funktionen, wenn diese deine Anforderung bereits erf\u00fcllen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00dcbernimm externe Codes nur aus vertrauensw\u00fcrdigen Quellen, sichere vorhandene Anpassungen vor \u00c4nderungen und ber\u00fccksichtige bei externen Integrationen auch Performance, Datenschutz und Sicherheit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teste \u00c4nderungen anschlie\u00dfend auf der ver\u00f6ffentlichten Website und auf unterschiedlichen Ger\u00e4ten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Eigener Code kann Kopage sinnvoll erweitern. Je individueller die Anpassung wird, desto wichtiger werden jedoch saubere Dokumentation, kontrollierte \u00c4nderungen und gr\u00fcndliche Tests.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Der klassische Kopage Website Builder erm\u00f6glicht es, neben den integrierten Funktionen auch eigenen HTML-, CSS- und JavaScript-Code zu verwenden. Damit kannst du beispielsweise externe Inhalte einbinden, bestimmte Darstellungen individuell anpassen oder Funktionen erg\u00e4nzen, f\u00fcr die Kopage selbst kein passendes Modul bereitstellt. Eigener Code bietet zus\u00e4tzliche M\u00f6glichkeiten, erfordert aber auch entsprechende Vorsicht. Fehlerhafter oder ungepr\u00fcfter Code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[84],"doc_tag":[],"class_list":["post-22858","docs","type-docs","status-publish","hentry","doc_category-website-baukasten"],"year_month":"2026-09","word_count":2984,"total_views":"5","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/it\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"Website-Baukasten","term_url":"https:\/\/www.curiaweb.ch\/it\/hilfe-kategorie\/website-baukasten\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/comments?post=22858"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22858\/revisions"}],"predecessor-version":[{"id":22860,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22858\/revisions\/22860"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/media?parent=22858"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_category?post=22858"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_tag?post=22858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}