Briefly explained:<\/strong> \u00c4nderungen am Design k\u00f6nnen sich auf mehrere oder sogar alle Seiten deiner Website auswirken. Einzelne Texte, Bilder und Content Blocks bearbeitest du dagegen als Inhalte.<\/p>\n<\/blockquote>\n\n\n\n Beim Design geht es nicht nur um die Auswahl einer Farbe.<\/p>\n\n\n\n Mehrere Gestaltungselemente bestimmen gemeinsam, wie deine Website wahrgenommen wird. Dazu geh\u00f6ren insbesondere:<\/p>\n\n\n\n Davon zu unterscheiden sind die eigentlichen Inhalte deiner Website. Texte, Bilder, Formulare oder einzelne Content Blocks sind keine grundlegenden Design-Einstellungen, auch wenn deren Gestaltung nat\u00fcrlich ebenfalls das Erscheinungsbild beeinflusst.<\/p>\n\n\n\n Ein Template beziehungsweise Theme bildet die gestalterische Ausgangsbasis deiner Kopage Website.<\/p>\n\n\n\n Es legt grundlegende visuelle Eigenschaften fest und sorgt daf\u00fcr, dass du nicht jede Seite und jedes Gestaltungselement vollst\u00e4ndig von Grund auf entwickeln musst.<\/p>\n\n\n\n Du kannst ein vorhandenes Design als Ausgangspunkt verwenden und anschlie\u00dfend an deinen eigenen Webauftritt anpassen.<\/p>\n\n\n\n Das ist insbesondere f\u00fcr Einsteiger hilfreich: Statt zuerst ein komplettes Webdesign entwickeln zu m\u00fcssen, kannst du dich auf Farben, Schriften, Inhalte und die Struktur deiner Website konzentrieren.<\/p>\n\n\n\n Important:<\/strong> Ein Template ist eine gestalterische Grundlage und kein Ersatz f\u00fcr deine eigenen Inhalte. Texte, Bilder, Seitenstruktur und Navigation sollten immer zu deinem Unternehmen beziehungsweise Projekt passen.<\/p>\n<\/blockquote>\n\n\n\n Bei der Auswahl solltest du dich weniger von Beispielbildern oder Beispieltexten beeindrucken lassen und st\u00e4rker auf den grunds\u00e4tzlichen Aufbau achten.<\/p>\n\n\n\n Ein Beispielbild l\u00e4sst sich sp\u00e4ter austauschen. Wichtiger ist, ob die grundlegende Gestaltung zu deiner geplanten Website passt.<\/p>\n\n\n\n Achte insbesondere darauf, ob Header, Navigation, Inhaltsbreite und die allgemeine Gestaltung deinen Vorstellungen entsprechen.<\/p>\n\n\n\n F\u00fcr eine kleine Unternehmenswebsite kann beispielsweise ein \u00fcbersichtliches und ruhiges Design sinnvoller sein als ein aufwendiges Template mit vielen visuellen Effekten.<\/p>\n\n\n\n Bei einer bereits eingerichteten Website solltest du einen Template-Wechsel nicht genauso behandeln wie die Auswahl des Designs bei einer neuen Website.<\/p>\n\n\n\n Ein Template beeinflusst grundlegende Gestaltungseigenschaften. Deshalb solltest du vor einer gr\u00f6\u00dferen Design\u00e4nderung genau pr\u00fcfen, welche Auswirkungen die gew\u00e4hlte \u00c4nderung auf deine bestehende Website hat.<\/p>\n\n\n\n Kontrolliere anschlie\u00dfend insbesondere:<\/p>\n\n\n\n Attention:<\/strong> \u00dcbernimm bei einer bestehenden Website keine Option zum Ersetzen oder \u00dcberschreiben vorhandener Inhalte, ohne vorher genau zu pr\u00fcfen, was diese Funktion ver\u00e4ndert. Designwechsel und das Ersetzen von Website-Inhalten sind zwei unterschiedliche Vorg\u00e4nge.<\/p>\n<\/blockquote>\n\n\n\n Farben geh\u00f6ren zu den wichtigsten Bestandteilen eines einheitlichen Webdesigns.<\/p>\n\n\n\n Kopage stellt daf\u00fcr verschiedene Farbm\u00f6glichkeiten beziehungsweise Farbschemata zur Verf\u00fcgung. Dar\u00fcber hinaus kannst du das Erscheinungsbild an deine eigenen Farben anpassen.<\/p>\n\n\n\n Wenn dein Unternehmen bereits ein Corporate Design besitzt, solltest du m\u00f6glichst dieselben Grundfarben auch auf deiner Website verwenden.<\/p>\n\n\n\n Typischerweise ben\u00f6tigst du nur eine \u00fcberschaubare Farbpalette:<\/p>\n\n\n\n Zu viele unterschiedliche Farben lassen eine Website schnell unruhig wirken.<\/p>\n\n\n\n Interaktive Elemente sollten f\u00fcr Besucher gut erkennbar sein.<\/p>\n\n\n\n Wenn deine Hauptfarbe beispielsweise f\u00fcr Buttons verwendet wird, solltest du diese Verwendung auf der Website m\u00f6glichst konsistent beibehalten.<\/p>\n\n\n\n Ein Button sollte nicht auf einer Seite blau, auf der n\u00e4chsten gr\u00fcn und auf einer dritten Seite rot sein, wenn daf\u00fcr kein gestalterischer Grund besteht.<\/p>\n\n\n\n Dasselbe gilt f\u00fcr Links und andere Elemente, mit denen Besucher interagieren k\u00f6nnen.<\/p>\n\n\n\n Practical Tip:<\/strong> Verwende Farben nicht nur dekorativ. Eine wiederkehrende Akzentfarbe kann Besuchern helfen, Buttons, Links und wichtige Aktionen schneller zu erkennen.<\/p>\n<\/blockquote>\n\n\n\n Eine Farbkombination kann optisch attraktiv aussehen und trotzdem schlecht lesbar sein.<\/p>\n\n\n\n Besonders wichtig ist ein ausreichender Kontrast zwischen Text und Hintergrund.<\/p>\n\n\n\n Helle Schrift auf einem fast gleich hellen Hintergrund oder dunkle Schrift auf einer sehr dunklen Fl\u00e4che erschweren das Lesen unn\u00f6tig.<\/p>\n\n\n\n Das betrifft nicht nur normale Texte, sondern auch Buttons, Navigation, Formulare und andere Bedienelemente.<\/p>\n\n\n\n Kontrolliere deshalb nach einer Farb\u00e4nderung nicht nur, ob dir die Farbe gef\u00e4llt, sondern auch, ob s\u00e4mtliche Texte und Funktionen gut erkennbar bleiben.<\/p>\n\n\n\n Auch die Schriftart hat gro\u00dfen Einfluss auf die Wirkung einer Website.<\/p>\n\n\n\n Kopage stellt verschiedene Schriftarten f\u00fcr die Gestaltung zur Verf\u00fcgung. Damit kannst du das typografische Erscheinungsbild an deine Website anpassen, ohne eigene Webfonts manuell integrieren zu m\u00fcssen.<\/p>\n\n\n\n Bei der Auswahl sollte die Lesbarkeit wichtiger sein als ein m\u00f6glichst ausgefallenes Erscheinungsbild.<\/p>\n\n\n\n Eine dekorative Schrift kann beispielsweise f\u00fcr einzelne gestalterische Elemente funktionieren, ist aber f\u00fcr l\u00e4ngere Fliesstexte h\u00e4ufig ungeeignet.<\/p>\n\n\n\n F\u00fcr die meisten Websites reichen eine oder h\u00f6chstens zwei gut aufeinander abgestimmte Schriftarten.<\/p>\n\n\n\n Eine m\u00f6gliche Aufteilung ist beispielsweise:<\/p>\n\n\n\n Du kannst aber ebenso eine einzige Schriftfamilie f\u00fcr die gesamte Website verwenden und \u00dcberschriften durch Gr\u00f6\u00dfe und Schriftschnitt unterscheiden.<\/p>\n\n\n\n Entscheidend ist, dass die Gestaltung einheitlich bleibt.<\/p>\n\n\n\n Practical Tip:<\/strong> Eine gut lesbare und konsequent verwendete Schrift wirkt meist professioneller als mehrere auff\u00e4llige Schriftarten auf derselben Website.<\/p>\n<\/blockquote>\n\n\n\n Eine gute Typografie hilft Besuchern dabei, den Aufbau einer Seite schnell zu erfassen.<\/p>\n\n\n\n Haupt\u00fcberschriften sollten sich deutlich vom normalen Fliesstext unterscheiden. Unter\u00fcberschriften strukturieren l\u00e4ngere Inhalte zus\u00e4tzlich.<\/p>\n\n\n\n Dabei solltest du \u00dcberschriften nicht nur optisch vergr\u00f6\u00dfern, sondern die vorgesehenen \u00dcberschriftenformate verwenden.<\/p>\n\n\n\n Eine sinnvolle Inhaltsstruktur ist nicht nur f\u00fcr die Lesbarkeit wichtig, sondern hilft auch Suchmaschinen dabei, den Aufbau einer Seite besser zu verstehen.<\/p>\n\n\n\n Der Header ist der obere Bereich deiner Website und geh\u00f6rt zu den Elementen, die Besucher besonders h\u00e4ufig sehen.<\/p>\n\n\n\n Je nach verwendetem Design k\u00f6nnen dort beispielsweise Logo, Navigation und weitere Elemente erscheinen.<\/p>\n\n\n\n Der Header sollte \u00fcbersichtlich bleiben und Besuchern schnell vermitteln, auf welcher Website sie sich befinden und wie sie zu den wichtigsten Bereichen gelangen.<\/p>\n\n\n\n Ein sehr gro\u00dfer Header mit vielen Elementen kann insbesondere auf kleineren Bildschirmen unn\u00f6tig viel Platz beanspruchen.<\/p>\n\n\n\n Wenn du ein eigenes Firmen- oder Vereinslogo besitzt, solltest du eine daf\u00fcr geeignete Bilddatei verwenden.<\/p>\n\n\n\n Achte insbesondere darauf, dass das Logo ausreichend scharf ist und nicht unn\u00f6tig gro\u00dfe Dateiabmessungen besitzt.<\/p>\n\n\n\n Bei Logos mit transparentem Hintergrund eignet sich ein Bildformat, das Transparenz unterst\u00fctzt.<\/p>\n\n\n\n Kontrolliere au\u00dferdem, ob das Logo sowohl auf dem gew\u00e4hlten Header-Hintergrund als auch auf kleineren Displays gut erkennbar bleibt.<\/p>\n\n\n\n Die Navigation ist h\u00e4ufig Bestandteil des Headers. Deshalb sollten beide Bereiche gestalterisch zusammenpassen.<\/p>\n\n\n\n Das Men\u00fc muss gut lesbar sein und sollte nicht mit unn\u00f6tig vielen Hauptpunkten \u00fcberladen werden.<\/p>\n\n\n\n Wenn deine Website viele Seiten besitzt, kannst du Inhalte mit Unterseiten beziehungsweise Untermen\u00fcs strukturieren.<\/p>\n\n\n\n Wie du Seiten und Men\u00fcs organisatorisch aufbaust, erkl\u00e4ren wir unter Managing pages, navigation, and submenus in Kopage<\/a>.<\/p>\n\n\n\n Der Footer befindet sich am unteren Ende einer Website und wird h\u00e4ufig auf mehreren beziehungsweise allen Seiten angezeigt.<\/p>\n\n\n\n Dort k\u00f6nnen je nach Aufbau beispielsweise Kontaktinformationen, zus\u00e4tzliche Navigationselemente oder andere wiederkehrende Informationen untergebracht werden.<\/p>\n\n\n\n Auch hier gilt: Weniger ist h\u00e4ufig mehr. Der Footer sollte n\u00fctzliche Informationen bereitstellen und nicht zu einer zweiten, \u00fcberladenen Startseite werden.<\/p>\n\n\n\n Wenn du globale Footer-Inhalte \u00e4nderst, kontrolliere anschlie\u00dfend mehrere Seiten deiner Website.<\/p>\n\n\n\n Hintergrundfarben und Hintergrundbilder k\u00f6nnen einzelne Bereiche einer Website optisch voneinander trennen.<\/p>\n\n\n\n Sie sollten jedoch den Inhalt unterst\u00fctzen und nicht von ihm ablenken.<\/p>\n\n\n\n Bei Hintergrundbildern musst du besonders auf die Lesbarkeit von dar\u00fcberliegendem Text achten. Ein unruhiges Foto hinter einem l\u00e4ngeren Textabschnitt kann die Lesbarkeit erheblich verschlechtern.<\/p>\n\n\n\n Auch die Dateigr\u00f6\u00dfe eines Hintergrundbildes sollte ber\u00fccksichtigt werden, da unn\u00f6tig gro\u00dfe Bilder die Ladezeit einer Website erh\u00f6hen k\u00f6nnen.<\/p>\n\n\n\n Neben den globalen Design-Einstellungen kannst du auch die Darstellung einzelner Inhaltsbereiche beeinflussen.<\/p>\n\n\n\n Dadurch ist es beispielsweise m\u00f6glich, einen bestimmten Abschnitt optisch hervorzuheben, ohne das gesamte Theme der Website zu ver\u00e4ndern.<\/p>\n\n\n\n Diese Unterscheidung ist wichtig:<\/p>\n\n\n\n Wie Content Blocks aufgebaut und bearbeitet werden, erkl\u00e4ren wir ausf\u00fchrlich unter Create content with Kopage: editing content blocks, texts, and images<\/a>.<\/p>\n\n\n\n Auch die Auswahl deiner Bilder beeinflusst das Erscheinungsbild erheblich.<\/p>\n\n\n\n Versuche m\u00f6glichst einen einheitlichen Bildstil zu verwenden. Stark unterschiedliche Bildqualit\u00e4ten, Formate oder Stile k\u00f6nnen selbst bei einem guten Template unruhig wirken.<\/p>\n\n\n\n Au\u00dferdem solltest du Bilder nicht unn\u00f6tig gro\u00df hochladen. Ein Foto muss f\u00fcr eine normale Website nicht in der urspr\u00fcnglichen Gr\u00f6\u00dfe einer modernen Kamera bereitgestellt werden.<\/p>\n\n\n\n Die Bildverwaltung sowie Galerien und Slider behandeln wir unter Creating images, photo galleries, and sliders in Kopage<\/a>.<\/p>\n\n\n\n Kopage arbeitet mit responsiven Website-Designs. Trotzdem solltest du deine Gestaltung auf unterschiedlichen Bildschirmgr\u00f6\u00dfen kontrollieren.<\/p>\n\n\n\n Besonders nach \u00c4nderungen an Header, Navigation, Schriftgr\u00f6\u00dfen, Bildern oder umfangreichen Content Blocks ist eine Kontrolle auf kleineren Displays wichtig.<\/p>\n\n\n\n Achte beispielsweise darauf, ob:<\/p>\n\n\n\n You can find a detailed guide on this at Responsive Design: Optimizing Kopage website for smartphones and tablets<\/a>.<\/p>\n\n\n\n Webdesign und SEO sind keine vollst\u00e4ndig getrennten Themen.<\/p>\n\n\n\n Eine \u00fcbersichtliche Seitenstruktur, lesbare Inhalte, korrekt verwendete \u00dcberschriften und eine verst\u00e4ndliche Navigation helfen nicht nur Besuchern, sondern schaffen auch eine bessere Grundlage f\u00fcr Suchmaschinen.<\/p>\n\n\n\n Reine Designentscheidungen ersetzen allerdings keine Suchmaschinenoptimierung.<\/p>\n\n\n\n Seitentitel, Meta-Daten und weitere SEO-Einstellungen behandeln wir deshalb separat unter SEO with Kopage: Page titles, metadata, URLs, and search engine optimization<\/a>.<\/p>\n\n\n\n F\u00fcr die normale Gestaltung einer Kopage Website ben\u00f6tigst du keine CSS-Kenntnisse.<\/p>\n\n\n\n Wenn du allerdings sehr individuelle Anpassungen vornehmen m\u00f6chtest und entsprechende Kenntnisse besitzt, bietet Kopage M\u00f6glichkeiten f\u00fcr eigenen Code.<\/p>\n\n\n\n Solche Anpassungen solltest du erst einsetzen, wenn sich das gew\u00fcnschte Ergebnis nicht sinnvoll \u00fcber die normalen Designfunktionen erreichen l\u00e4sst.<\/p>\n\n\n\nWas geh\u00f6rt zum Design einer Kopage Website?<\/h2>\n\n\n\n
\n
Was ist ein Template beziehungsweise Theme?<\/h2>\n\n\n\n
\n
Welches Template sollte ich ausw\u00e4hlen?<\/h2>\n\n\n\n
![\"emplate](\"https:\/\/www.curiaweb.ch\/wp-content\/uploads\/2026\/08\/template-waehlen-in-kopage-1024x611.jpg\")
<\/figure>\n\n\n\nTemplate einer bestehenden Website \u00e4ndern<\/h2>\n\n\n\n
\n
\n
Farben in Kopage anpassen<\/h2>\n\n\n\n
![\"Farben](\"https:\/\/www.curiaweb.ch\/wp-content\/uploads\/2026\/08\/farben-in-kopage-waehlen-1024x611.jpg\")
<\/figure>\n\n\n\nHauptfarbe\nAkzentfarbe\nHintergrundfarbe\nTextfarbe\ngegebenenfalls eine zus\u00e4tzliche neutrale Farbe<\/code><\/pre>\n\n\n\nWelche Farbe sollte ich f\u00fcr Buttons und Links verwenden?<\/h2>\n\n\n\n
\n
Auf ausreichenden Farbkontrast achten<\/h2>\n\n\n\n
Schriftarten in Kopage \u00e4ndern<\/h2>\n\n\n\n
![\"Menu](\"https:\/\/www.curiaweb.ch\/wp-content\/uploads\/2026\/08\/schriften-in-kopage-waehlen-1024x611.jpg\")
<\/figure>\n\n\n\nNicht zu viele Schriftarten kombinieren<\/h2>\n\n\n\n
\u00dcberschriften \u2192 Schriftart A\nFliesstext \u2192 Schriftart B<\/code><\/pre>\n\n\n\n\n
\u00dcberschriften und Fliesstext unterscheiden<\/h2>\n\n\n\n
Header der Website gestalten<\/h2>\n\n\n\n
Logo im Header verwenden<\/h2>\n\n\n\n
Navigation und Header gemeinsam betrachten<\/h2>\n\n\n\n
Footer gestalten<\/h2>\n\n\n\n
Hintergr\u00fcnde richtig einsetzen<\/h2>\n\n\n\n
Content Blocks individuell gestalten<\/h2>\n\n\n\n
Globale Design\u00e4nderung\n\u2192 beeinflusst das grunds\u00e4tzliche Erscheinungsbild\n\nContent-Block-Anpassung\n\u2192 betrifft einen bestimmten Inhaltsbereich<\/code><\/pre>\n\n\n\nBilder als Teil des Designs<\/h2>\n\n\n\n
Design auf Smartphone und Tablet kontrollieren<\/h2>\n\n\n\n
\n
Design und Suchmaschinenoptimierung<\/h2>\n\n\n\n
Eigene CSS-Anpassungen<\/h2>\n\n\n\n
\n