{"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\/fr\/hilfe\/website-baukasten\/kopage-html-css-javascript\/","title":{"rendered":"Utiliser son propre code HTML, CSS et JavaScript dans Kopage"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Der klassische Kopage Website Builder erm\u00f6glicht es, neben den integrierten Funktionen auch eigenen HTML-, CSS- und JavaScript-Code zu verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit kannst du beispielsweise externe Inhalte einbinden, bestimmte Darstellungen individuell anpassen oder Funktionen erg\u00e4nzen, f\u00fcr die Kopage selbst kein passendes Modul bereitstellt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eigener Code bietet zus\u00e4tzliche M\u00f6glichkeiten, erfordert aber auch entsprechende Vorsicht. Fehlerhafter oder ungepr\u00fcfter Code kann die Darstellung, Funktion, Performance, Sicherheit oder den Datenschutz deiner Website beeinflussen.<\/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>En bref :<\/strong> F\u00fcr die meisten normalen Kopage Websites ben\u00f6tigst du keinen eigenen Code. Verwende HTML, CSS oder JavaScript vor allem dann, wenn die integrierten Funktionen f\u00fcr eine konkrete Anforderung nicht ausreichen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist eigener Code in Kopage?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kopage ist grunds\u00e4tzlich daf\u00fcr ausgelegt, Websites ohne Programmierkenntnisse zu erstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Seiten, Texte, Bilder, Formulare und zahlreiche weitere Funktionen k\u00f6nnen \u00fcber den visuellen Website Builder verwaltet werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr besondere Anforderungen unterst\u00fctzt der klassische Kopage Website Builder jedoch auch eigenen HTML-, CSS- und JavaScript-Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die drei Technologien erf\u00fcllen unterschiedliche Aufgaben:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML\n\u2192 Struktur und Inhalte\n\nCSS\n\u2192 Gestaltung und Darstellung\n\nJavaScript\n\u2192 Verhalten und zus\u00e4tzliche Funktionen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Unterscheidung ist wichtig, bevor du eigenen Code in deine Website einf\u00fcgst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann ben\u00f6tige ich eigenen Code?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eigener Code kann sinnvoll sein, wenn eine gew\u00fcnschte Funktion mit den normalen Kopage-Werkzeugen nicht umgesetzt werden kann.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typische Anwendungsf\u00e4lle sind beispielsweise:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Einbettung eines externen Widgets,<\/li>\n\n\n\n<li>Einbindung eines externen Dienstes,<\/li>\n\n\n\n<li>individuelle CSS-Anpassungen,<\/li>\n\n\n\n<li>zus\u00e4tzliche HTML-Inhalte,<\/li>\n\n\n\n<li>oder eine spezielle JavaScript-Funktion.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Kopage f\u00fcr deine Aufgabe bereits eine passende integrierte Funktion besitzt, ist diese in vielen F\u00e4llen die einfachere und wartungsfreundlichere L\u00f6sung.<\/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>Conseil pratique :<\/strong> Pr\u00fcfe zuerst, ob Kopage die gew\u00fcnschte Funktion bereits selbst anbietet. Eigener Code sollte eine konkrete L\u00fccke schlie\u00dfen und nicht ohne Not eine vorhandene Builder-Funktion ersetzen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist HTML?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML steht f\u00fcr HyperText Markup Language und beschreibt die Struktur von Inhalten einer Webseite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sehr einfaches Beispiel lautet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Unsere &Ouml;ffnungszeiten&lt;\/h2&gt;\n&lt;p&gt;Montag bis Freitag: 08:00 bis 17:00 Uhr&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der Browser interpretiert die HTML-Elemente und stellt daraus eine \u00dcberschrift und einen Absatz dar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr normale \u00dcberschriften und Texte musst du in Kopage allerdings nicht selbst HTML schreiben. Daf\u00fcr stehen die normalen Bearbeitungsfunktionen des Website Builders zur Verf\u00fcgung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann ist eigenes HTML sinnvoll?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eigenes HTML wird beispielsweise interessant, wenn ein externer Anbieter einen fertigen Einbettungscode zur Verf\u00fcgung stellt oder wenn eine spezielle Struktur ben\u00f6tigt wird, die sich mit den normalen Kopage-Funktionen nicht sinnvoll abbilden l\u00e4sst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein externer Dienst k\u00f6nnte beispielsweise einen Code in dieser Art bereitstellen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=&quot;example-widget&quot;&gt;\n    Externer Inhalt\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dies ist nur ein vereinfachtes Beispiel und kein tats\u00e4chlich einzubindendes Widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML nicht f\u00fcr normale Seitenpflege missbrauchen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nur weil HTML verwendet werden kann, solltest du nicht s\u00e4mtliche normalen Seiteninhalte von Hand damit erstellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Texte, Bilder und normale Seitenbereiche lassen sich mit den vorgesehenen Kopage-Funktionen einfacher verwalten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du normale Inhalte bearbeitest, erkl\u00e4ren wir unter <a href=\"\/fr\/aide\/createur-de-site-web\/modifier-les-blocs-de-contenu-kopage\/\">Cr\u00e9er du contenu avec Kopage : modifier les blocs de contenu, les textes et les images<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist CSS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS steht f\u00fcr Cascading Style Sheets und wird f\u00fcr die visuelle Gestaltung von HTML-Elementen verwendet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit k\u00f6nnen beispielsweise Abst\u00e4nde, Schriftgr\u00f6\u00dfen, Rahmen oder andere Darstellungsmerkmale beeinflusst werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un exemple simplifie :<\/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\">Dieses CSS w\u00fcrde Elemente mit der entsprechenden Klasse unter anderem fett darstellen und mit einem Innenabstand versehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann ist eigenes CSS sinnvoll?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eigenes CSS kann hilfreich sein, wenn du eine gezielte visuelle Anpassung ben\u00f6tigst, die \u00fcber die normalen Designm\u00f6glichkeiten von Kopage hinausgeht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bevor du CSS verwendest, solltest du jedoch pr\u00fcfen, ob sich die gew\u00fcnschte \u00c4nderung bereits \u00fcber die vorhandenen Design- und Template-Einstellungen umsetzen l\u00e4sst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die normalen Gestaltungsm\u00f6glichkeiten behandeln wir unter <a href=\"\/fr\/aide\/createur-de-site-web\/kopage-template-design-anpassen\/\">Personnaliser le mod\u00e8le et le design Kopage : couleurs, polices, en-t\u00eate et pied de page<\/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>Important :<\/strong> Verwende CSS nicht unn\u00f6tig f\u00fcr Einstellungen, die Kopage bereits \u00fcber seine Designoberfl\u00e4che bereitstellt. \u00c4nderungen \u00fcber die integrierten Funktionen sind f\u00fcr sp\u00e4tere Anpassungen meist leichter nachvollziehbar.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">CSS kann mehrere Bereiche gleichzeitig beeinflussen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS arbeitet mit Selektoren. Je nachdem, wie allgemein ein Selektor formuliert ist, kann eine Regel nicht nur ein einzelnes Element, sondern viele Bereiche der Website ver\u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine sehr allgemeine CSS-Regel kann deshalb unbeabsichtigt Auswirkungen auf andere Seiten oder Elemente haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teste individuelle CSS-Anpassungen sorgf\u00e4ltig und kontrolliere nicht nur die Stelle, die du urspr\u00fcnglich ver\u00e4ndern wolltest.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c4nderungen auf mehreren Seiten pr\u00fcfen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn dein CSS auf gemeinsame Klassen oder Seitenelemente wirkt, solltest du nach einer \u00c4nderung mehrere Bereiche der Website kontrollieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela comprend notamment :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Startseite\nwichtige Unterseiten\nNavigation\nFormulare\nBlog\nShop\nFooter\nSmartphone-Darstellung<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Anpassung, die auf einer einzelnen Seite gut aussieht, kann an einer anderen Stelle unerwartete Auswirkungen haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript ist eine Programmiersprache, die im Browser ausgef\u00fchrt werden kann und interaktive beziehungsweise dynamische Funktionen erm\u00f6glicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript kann beispielsweise auf Benutzeraktionen reagieren, externe Funktionen laden oder Inhalte dynamisch ver\u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein stark vereinfachtes Beispiel:<\/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\">Dieses Beispiel dient lediglich zur Veranschaulichung und hat f\u00fcr eine normale Kopage Website keinen praktischen Nutzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript mit besonderer Vorsicht verwenden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript besitzt wesentlich mehr M\u00f6glichkeiten als eine einfache CSS-Gestaltungsregel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fehlerhafter Code kann Funktionen beeintr\u00e4chtigen, Fehlermeldungen verursachen oder mit bereits vorhandenem JavaScript der Website beziehungsweise eines externen Dienstes kollidieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge deshalb nur JavaScript ein, dessen Herkunft und Zweck du kennst.<\/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>Attention :<\/strong> Kopiere niemals ungepr\u00fcft JavaScript aus Foren, Kommentaren, unbekannten Websites oder anderen nicht vertrauensw\u00fcrdigen Quellen in deine Website. JavaScript kann weit mehr tun als nur die Darstellung einer Seite ver\u00e4ndern.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist ein Embed-Code?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Viele externe Dienste stellen einen sogenannten Embed- oder Einbettungscode bereit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit kann ein externer Inhalt innerhalb einer Website angezeigt oder eine externe Funktion geladen werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je nach Anbieter kann ein solcher Code HTML, JavaScript oder eine Kombination daraus enthalten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typische Beispiele k\u00f6nnen externe Buchungsfunktionen, Formulare, Kalender, Videos, Bewertungsdienste oder andere Widgets sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Embed-Code nur vom tats\u00e4chlichen Anbieter \u00fcbernehmen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du einen externen Dienst einbinden m\u00f6chtest, solltest du den daf\u00fcr vorgesehenen Code direkt aus der offiziellen Verwaltungsoberfl\u00e4che oder Dokumentation dieses Dienstes \u00fcbernehmen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende nicht irgendeinen Code aus einem alten Blogartikel oder Forum, nur weil dort der Name des gew\u00fcnschten Dienstes erw\u00e4hnt wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Externe Anbieter k\u00f6nnen ihre Einbettungsmethoden im Laufe der Zeit \u00e4ndern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vorhandene Kopage-Funktionen bevorzugen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr verschiedene h\u00e4ufig verwendete externe Inhalte bietet Kopage bereits passende Funktionen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google Maps, YouTube und Social-Media-Verkn\u00fcpfungen behandeln wir beispielsweise unter <a href=\"\/fr\/aide\/createur-de-site-web\/kopage-cartes-youtube-reseaux-sociaux\/\">Int\u00e9grer Google Maps, YouTube et les r\u00e9seaux sociaux dans Kopage<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine solche integrierte M\u00f6glichkeit f\u00fcr deinen Anwendungsfall ausreicht, musst du nicht zus\u00e4tzlich einen eigenen Embed-Code verwenden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wo eigenen Code einf\u00fcgen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende f\u00fcr HTML, CSS oder JavaScript ausschlie\u00dflich die daf\u00fcr vorgesehenen Funktionen des klassischen Kopage Website Builders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Welcher Bereich geeignet ist, h\u00e4ngt davon ab, ob der Code einen bestimmten Seiteninhalt, die Gestaltung oder eine externe Funktion betrifft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge Code nicht wahllos in normale Textfelder ein.<\/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>Important :<\/strong> HTML, CSS und JavaScript sind unterschiedliche Codearten. Ein CSS-Code geh\u00f6rt nicht automatisch in dasselbe Feld wie ein HTML-Embed, und JavaScript sollte nur dort eingesetzt werden, wo die entsprechende Codeart vorgesehen ist.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Code vor dem Einf\u00fcgen verstehen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Du musst nicht jedes Detail einer komplexen Integration selbst programmieren k\u00f6nnen. Du solltest aber zumindest wissen, welchem Zweck der eingef\u00fcgte Code dient und von welchem Anbieter er stammt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem externen Widget solltest du beispielsweise beantworten k\u00f6nnen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Von welchem Anbieter stammt der Code?\nWas wird auf meiner Website eingebunden?\nWerden externe Server kontaktiert?\nWerden Daten \u00fcbertragen?\nBen\u00f6tigt die Funktion Cookies?\nKann ich den Code sp\u00e4ter wieder entfernen?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn diese Fragen v\u00f6llig unklar sind, solltest du den Code nicht ungepr\u00fcft auf einer produktiven Website einsetzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vor \u00c4nderungen vorhandenen Code sichern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du bereits funktionierenden individuellen Code \u00e4ndern m\u00f6chtest, sichere die bisherige Version vorher.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das kann beispielsweise bedeuten, dass du den bisherigen Code in einer lokalen Textdatei speicherst, bevor du ihn ver\u00e4nderst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die neue Version Probleme verursacht, kannst du dadurch leichter zum vorherigen Stand zur\u00fcckkehren.<\/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>Conseil pratique :<\/strong> \u00c4ndere bei komplexerem Code m\u00f6glichst nur eine Sache gleichzeitig. Wenn anschlie\u00dfend ein Fehler auftritt, l\u00e4sst sich die Ursache wesentlich leichter eingrenzen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Kommentare im eigenen Code verwenden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du selbst CSS oder anderen Code pflegst, k\u00f6nnen kurze Kommentare helfen, den Zweck einzelner Anpassungen sp\u00e4ter noch zu verstehen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein CSS-Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Abstand f\u00fcr speziellen Hinweisbereich *\/\n.hinweis {\n    padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist besonders hilfreich, wenn mehrere individuelle Anpassungen \u00fcber l\u00e4ngere Zeit entstanden sind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code nicht mehrfach einf\u00fcgen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine Integration nicht sofort sichtbar ist, solltest du denselben Code nicht einfach mehrfach an verschiedenen Stellen einf\u00fcgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dadurch k\u00f6nnen externe Skripte mehrfach geladen oder Funktionen mehrfach ausgef\u00fchrt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00fcfe stattdessen zuerst, ob der Code an der richtigen Stelle eingef\u00fcgt wurde und ob die betreffende Seite ver\u00f6ffentlicht beziehungsweise aktualisiert wurde.<\/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=\"\/fr\/aide\/createur-de-site-web\/design-adaptatif-kopage\/\">Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes<\/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>Important :<\/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>Attention :<\/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\">Nous abordons les bases g\u00e9n\u00e9rales du SEO sous <a href=\"\/fr\/aide\/createur-de-site-web\/kopage-seo-einstellungen\/\">SEO avec Kopage : titres de pages, m\u00e9tadonn\u00e9es, URL et optimisation pour les moteurs de recherche<\/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=\"\/fr\/aide\/createur-de-site-web\/kopage-plan-du-site-google-statistiques\/\">Google, Sitemap, Analytics et statistiques de site Web dans 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\">Quelle est la suite ?<\/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\">C'est pourquoi nous continuons avec <a href=\"\/fr\/aide\/createur-de-site-web\/design-adaptatif-kopage\/\">Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">R\u00e9sum\u00e9<\/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\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"Website-Baukasten","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/website-baukasten\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=22858"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22858\/revisions"}],"predecessor-version":[{"id":22860,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22858\/revisions\/22860"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=22858"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=22858"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=22858"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}