Kopage Template und Design anpassen: Farben, Schriften, Header und Footer

Das Design bestimmt den visuellen Gesamteindruck deiner Kopage Website. Dazu gehören unter anderem das verwendete Template beziehungsweise Theme, Farben, Schriftarten, Header, Navigation und weitere Gestaltungselemente.

Im klassischen Kopage Website Builder kannst du viele dieser Einstellungen über die Benutzeroberfläche anpassen, ohne dafür selbst CSS oder HTML schreiben zu müssen.

In dieser Anleitung erklären wir, wie die verschiedenen Designbereiche zusammenhängen und worauf du achten solltest, wenn du das Erscheinungsbild einer bestehenden Kopage Website veränderst.

Kurz erklärt: Änderungen am Design können sich auf mehrere oder sogar alle Seiten deiner Website auswirken. Einzelne Texte, Bilder und Content Blocks bearbeitest du dagegen als Inhalte.

Was gehört zum Design einer Kopage Website? #

Beim Design geht es nicht nur um die Auswahl einer Farbe.

Mehrere Gestaltungselemente bestimmen gemeinsam, wie deine Website wahrgenommen wird. Dazu gehören insbesondere:

• Template beziehungsweise Theme,
• Farben und Farbschema,
• Schriftarten,
• Header,
• Navigation und Menügestaltung,
• Hintergründe,
• sowie weitere globale Gestaltungseinstellungen.

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ürlich ebenfalls das Erscheinungsbild beeinflusst.

Was ist ein Template beziehungsweise Theme? #

Ein Template beziehungsweise Theme bildet die gestalterische Ausgangsbasis deiner Kopage Website.

Es legt grundlegende visuelle Eigenschaften fest und sorgt dafür, dass du nicht jede Seite und jedes Gestaltungselement vollständig von Grund auf entwickeln musst.

Du kannst ein vorhandenes Design als Ausgangspunkt verwenden und anschließend an deinen eigenen Webauftritt anpassen.

Das ist insbesondere für Einsteiger hilfreich: Statt zuerst ein komplettes Webdesign entwickeln zu müssen, kannst du dich auf Farben, Schriften, Inhalte und die Struktur deiner Website konzentrieren.

Wichtig: Ein Template ist eine gestalterische Grundlage und kein Ersatz für deine eigenen Inhalte. Texte, Bilder, Seitenstruktur und Navigation sollten immer zu deinem Unternehmen beziehungsweise Projekt passen.

Welches Template sollte ich auswählen? #

Bei der Auswahl solltest du dich weniger von Beispielbildern oder Beispieltexten beeindrucken lassen und stärker auf den grundsätzlichen Aufbau achten.

Ein Beispielbild lässt sich später austauschen. Wichtiger ist, ob die grundlegende Gestaltung zu deiner geplanten Website passt.

Achte insbesondere darauf, ob Header, Navigation, Inhaltsbreite und die allgemeine Gestaltung deinen Vorstellungen entsprechen.

Für eine kleine Unternehmenswebsite kann beispielsweise ein übersichtliches und ruhiges Design sinnvoller sein als ein aufwendiges Template mit vielen visuellen Effekten.

Template einer bestehenden Website ändern #

Bei einer bereits eingerichteten Website solltest du einen Template-Wechsel nicht genauso behandeln wie die Auswahl des Designs bei einer neuen Website.

Ein Template beeinflusst grundlegende Gestaltungseigenschaften. Deshalb solltest du vor einer größeren Designänderung genau prüfen, welche Auswirkungen die gewählte Änderung auf deine bestehende Website hat.

Kontrolliere anschließend insbesondere:

• Startseite und wichtige Unterseiten,
• Header und Navigation,
• Schriftgrößen und Zeilenumbrüche,
• Bilder und Content Blocks,
• Footer,
• sowie die Darstellung auf Smartphone und Tablet.

Achtung: Übernimm bei einer bestehenden Website keine Option zum Ersetzen oder Überschreiben vorhandener Inhalte, ohne vorher genau zu prüfen, was diese Funktion verändert. Designwechsel und das Ersetzen von Website-Inhalten sind zwei unterschiedliche Vorgänge.

Farben in Kopage anpassen #

Farben gehören zu den wichtigsten Bestandteilen eines einheitlichen Webdesigns.

Kopage stellt dafür verschiedene Farbmöglichkeiten beziehungsweise Farbschemata zur Verfügung. Darüber hinaus kannst du das Erscheinungsbild an deine eigenen Farben anpassen.

Wenn dein Unternehmen bereits ein Corporate Design besitzt, solltest du möglichst dieselben Grundfarben auch auf deiner Website verwenden.

Typischerweise benötigst du nur eine überschaubare Farbpalette:

Hauptfarbe
Akzentfarbe
Hintergrundfarbe
Textfarbe
gegebenenfalls eine zusätzliche neutrale Farbe

Zu viele unterschiedliche Farben lassen eine Website schnell unruhig wirken.

Welche Farbe sollte ich für Buttons und Links verwenden? #

Interaktive Elemente sollten für Besucher gut erkennbar sein.

Wenn deine Hauptfarbe beispielsweise für Buttons verwendet wird, solltest du diese Verwendung auf der Website möglichst konsistent beibehalten.

Ein Button sollte nicht auf einer Seite blau, auf der nächsten grün und auf einer dritten Seite rot sein, wenn dafür kein gestalterischer Grund besteht.

Dasselbe gilt für Links und andere Elemente, mit denen Besucher interagieren können.

Praxis-Tipp: Verwende Farben nicht nur dekorativ. Eine wiederkehrende Akzentfarbe kann Besuchern helfen, Buttons, Links und wichtige Aktionen schneller zu erkennen.

Auf ausreichenden Farbkontrast achten #

Eine Farbkombination kann optisch attraktiv aussehen und trotzdem schlecht lesbar sein.

Besonders wichtig ist ein ausreichender Kontrast zwischen Text und Hintergrund.

Helle Schrift auf einem fast gleich hellen Hintergrund oder dunkle Schrift auf einer sehr dunklen Fläche erschweren das Lesen unnötig.

Das betrifft nicht nur normale Texte, sondern auch Buttons, Navigation, Formulare und andere Bedienelemente.

Kontrolliere deshalb nach einer Farbänderung nicht nur, ob dir die Farbe gefällt, sondern auch, ob sämtliche Texte und Funktionen gut erkennbar bleiben.

Schriftarten in Kopage ändern #

Auch die Schriftart hat großen Einfluss auf die Wirkung einer Website.

Kopage stellt verschiedene Schriftarten für die Gestaltung zur Verfügung. Damit kannst du das typografische Erscheinungsbild an deine Website anpassen, ohne eigene Webfonts manuell integrieren zu müssen.

Bei der Auswahl sollte die Lesbarkeit wichtiger sein als ein möglichst ausgefallenes Erscheinungsbild.

Eine dekorative Schrift kann beispielsweise für einzelne gestalterische Elemente funktionieren, ist aber für längere Fliesstexte häufig ungeeignet.

Nicht zu viele Schriftarten kombinieren #

Für die meisten Websites reichen eine oder höchstens zwei gut aufeinander abgestimmte Schriftarten.

Eine mögliche Aufteilung ist beispielsweise:

Überschriften → Schriftart A
Fliesstext    → Schriftart B

Du kannst aber ebenso eine einzige Schriftfamilie für die gesamte Website verwenden und Überschriften durch Größe und Schriftschnitt unterscheiden.

Entscheidend ist, dass die Gestaltung einheitlich bleibt.

Praxis-Tipp: Eine gut lesbare und konsequent verwendete Schrift wirkt meist professioneller als mehrere auffällige Schriftarten auf derselben Website.

Überschriften und Fliesstext unterscheiden #

Eine gute Typografie hilft Besuchern dabei, den Aufbau einer Seite schnell zu erfassen.

Hauptüberschriften sollten sich deutlich vom normalen Fliesstext unterscheiden. Unterüberschriften strukturieren längere Inhalte zusätzlich.

Dabei solltest du Überschriften nicht nur optisch vergrößern, sondern die vorgesehenen Überschriftenformate verwenden.

Eine sinnvolle Inhaltsstruktur ist nicht nur für die Lesbarkeit wichtig, sondern hilft auch Suchmaschinen dabei, den Aufbau einer Seite besser zu verstehen.

Header der Website gestalten #

Der Header ist der obere Bereich deiner Website und gehört zu den Elementen, die Besucher besonders häufig sehen.

Je nach verwendetem Design können dort beispielsweise Logo, Navigation und weitere Elemente erscheinen.

Der Header sollte übersichtlich bleiben und Besuchern schnell vermitteln, auf welcher Website sie sich befinden und wie sie zu den wichtigsten Bereichen gelangen.

Ein sehr großer Header mit vielen Elementen kann insbesondere auf kleineren Bildschirmen unnötig viel Platz beanspruchen.

Logo im Header verwenden #

Wenn du ein eigenes Firmen- oder Vereinslogo besitzt, solltest du eine dafür geeignete Bilddatei verwenden.

Achte insbesondere darauf, dass das Logo ausreichend scharf ist und nicht unnötig große Dateiabmessungen besitzt.

Bei Logos mit transparentem Hintergrund eignet sich ein Bildformat, das Transparenz unterstützt.

Kontrolliere außerdem, ob das Logo sowohl auf dem gewählten Header-Hintergrund als auch auf kleineren Displays gut erkennbar bleibt.

Navigation und Header gemeinsam betrachten #

Die Navigation ist häufig Bestandteil des Headers. Deshalb sollten beide Bereiche gestalterisch zusammenpassen.

Das Menü muss gut lesbar sein und sollte nicht mit unnötig vielen Hauptpunkten überladen werden.

Wenn deine Website viele Seiten besitzt, kannst du Inhalte mit Unterseiten beziehungsweise Untermenüs strukturieren.

Wie du Seiten und Menüs organisatorisch aufbaust, erklären wir unter Seiten, Navigation und Untermenüs in Kopage verwalten.

Footer gestalten #

Der Footer befindet sich am unteren Ende einer Website und wird häufig auf mehreren beziehungsweise allen Seiten angezeigt.

Dort können je nach Aufbau beispielsweise Kontaktinformationen, zusätzliche Navigationselemente oder andere wiederkehrende Informationen untergebracht werden.

Auch hier gilt: Weniger ist häufig mehr. Der Footer sollte nützliche Informationen bereitstellen und nicht zu einer zweiten, überladenen Startseite werden.

Wenn du globale Footer-Inhalte änderst, kontrolliere anschließend mehrere Seiten deiner Website.

Hintergründe richtig einsetzen #

Hintergrundfarben und Hintergrundbilder können einzelne Bereiche einer Website optisch voneinander trennen.

Sie sollten jedoch den Inhalt unterstützen und nicht von ihm ablenken.

Bei Hintergrundbildern musst du besonders auf die Lesbarkeit von darüberliegendem Text achten. Ein unruhiges Foto hinter einem längeren Textabschnitt kann die Lesbarkeit erheblich verschlechtern.

Auch die Dateigröße eines Hintergrundbildes sollte berücksichtigt werden, da unnötig große Bilder die Ladezeit einer Website erhöhen können.

Content Blocks individuell gestalten #

Neben den globalen Design-Einstellungen kannst du auch die Darstellung einzelner Inhaltsbereiche beeinflussen.

Dadurch ist es beispielsweise möglich, einen bestimmten Abschnitt optisch hervorzuheben, ohne das gesamte Theme der Website zu verändern.

Diese Unterscheidung ist wichtig:

Globale Designänderung
→ beeinflusst das grundsätzliche Erscheinungsbild

Content-Block-Anpassung
→ betrifft einen bestimmten Inhaltsbereich

Wie Content Blocks aufgebaut und bearbeitet werden, erklären wir ausführlich unter Inhalte mit Kopage erstellen: Content Blocks, Texte und Bilder bearbeiten.

Bilder als Teil des Designs #

Auch die Auswahl deiner Bilder beeinflusst das Erscheinungsbild erheblich.

Versuche möglichst einen einheitlichen Bildstil zu verwenden. Stark unterschiedliche Bildqualitäten, Formate oder Stile können selbst bei einem guten Template unruhig wirken.

Außerdem solltest du Bilder nicht unnötig groß hochladen. Ein Foto muss für eine normale Website nicht in der ursprünglichen Größe einer modernen Kamera bereitgestellt werden.

Die Bildverwaltung sowie Galerien und Slider behandeln wir unter Bilder, Fotogalerien und Slider in Kopage erstellen.

Design auf Smartphone und Tablet kontrollieren #

Kopage arbeitet mit responsiven Website-Designs. Trotzdem solltest du deine Gestaltung auf unterschiedlichen Bildschirmgrößen kontrollieren.

Besonders nach Änderungen an Header, Navigation, Schriftgrößen, Bildern oder umfangreichen Content Blocks ist eine Kontrolle auf kleineren Displays wichtig.

Achte beispielsweise darauf, ob:

• Überschriften sinnvoll umbrechen,
• Texte gut lesbar bleiben,
• Bilder korrekt dargestellt werden,
• Buttons problemlos bedienbar sind,
• und die Navigation weiterhin übersichtlich funktioniert.

Eine ausführliche Anleitung dazu findest du unter Responsive Design: Kopage Website für Smartphone und Tablet optimieren.

Design und Suchmaschinenoptimierung #

Webdesign und SEO sind keine vollständig getrennten Themen.

Eine übersichtliche Seitenstruktur, lesbare Inhalte, korrekt verwendete Überschriften und eine verständliche Navigation helfen nicht nur Besuchern, sondern schaffen auch eine bessere Grundlage für Suchmaschinen.

Reine Designentscheidungen ersetzen allerdings keine Suchmaschinenoptimierung.

Seitentitel, Meta-Daten und weitere SEO-Einstellungen behandeln wir deshalb separat unter SEO mit Kopage: Seitentitel, Meta-Daten, URLs und Suchmaschinenoptimierung.

Eigene CSS-Anpassungen #

Für die normale Gestaltung einer Kopage Website benötigst du keine CSS-Kenntnisse.

Wenn du allerdings sehr individuelle Anpassungen vornehmen möchtest und entsprechende Kenntnisse besitzt, bietet Kopage Möglichkeiten für eigenen Code.

Solche Anpassungen solltest du erst einsetzen, wenn sich das gewünschte Ergebnis nicht sinnvoll über die normalen Designfunktionen erreichen lässt.

Achtung: Eigener CSS- oder JavaScript-Code kann das Erscheinungsbild beziehungsweise die Funktion deiner Website beeinflussen. Verwende individuellen Code nur, wenn du seine Auswirkungen nachvollziehen kannst.

Den Einsatz von eigenem Code behandeln wir separat unter Eigenes HTML, CSS und JavaScript in Kopage verwenden.

Häufige Fehler beim Gestalten einer Website #

Viele Designprobleme entstehen nicht durch fehlende Funktionen, sondern durch zu viele gleichzeitig verwendete Gestaltungsideen.

Typische Beispiele sind zu viele Farben, mehrere unterschiedliche Schriftarten, sehr große Überschriften, schlecht lesbare Hintergrundbilder oder uneinheitlich gestaltete Buttons.

Auch ein häufiger Wechsel zwischen verschiedenen Gestaltungsstilen innerhalb derselben Website erschwert ein einheitliches Erscheinungsbild.

Versuche deshalb, einige grundlegende Designregeln festzulegen und diese auf der gesamten Website beizubehalten.

Ein einfaches Designsystem festlegen #

Du benötigst dafür kein professionelles Designhandbuch.

Schon einige grundlegende Entscheidungen helfen dabei, die Website konsistent zu gestalten:

Hauptfarbe
Akzentfarbe
Textfarbe
Hintergrundfarbe

Schrift für Überschriften
Schrift für Fliesstext

Button-Stil
Bildstil
Abstände zwischen Inhaltsbereichen

Wenn du diese Grundlagen konsequent verwendest, wirkt die Website in der Regel deutlich ruhiger und professioneller.

Designänderungen kontrolliert durchführen #

Bei einer bestehenden Website empfiehlt es sich, nicht gleichzeitig Template, Farben, Schriftarten, Header und sämtliche Content Blocks zu verändern.

Arbeite besser schrittweise.

Ändere beispielsweise zuerst die Farben und kontrolliere das Ergebnis. Anschließend kannst du die Typografie anpassen und erneut prüfen.

Dadurch erkennst du leichter, welche Änderung für ein unerwartetes Ergebnis verantwortlich ist.

Praxis-Tipp: Kontrolliere nach einer größeren Designänderung nicht nur die Startseite. Öffne auch typische Unterseiten, Kontaktformulare, Blogbereiche oder andere verwendete Funktionen.

Wann sollte ich das Template nicht wechseln? #

Wenn du mit der grundsätzlichen Struktur deiner Website zufrieden bist und lediglich Farben, Schriftarten oder einzelne Gestaltungselemente ändern möchtest, ist ein kompletter Template-Wechsel möglicherweise gar nicht notwendig.

Prüfe deshalb zuerst, ob du das gewünschte Ergebnis über die vorhandenen Design-Einstellungen erreichen kannst.

Je umfangreicher eine bestehende Website ist, desto wichtiger ist es, grundlegende Änderungen kontrolliert vorzunehmen.

Was sollte ich nach einer Designänderung prüfen? #

Nach größeren Anpassungen empfiehlt sich eine kurze Qualitätskontrolle.

Startseite prüfen
        ↓
wichtige Unterseiten prüfen
        ↓
Navigation testen
        ↓
Links und Buttons testen
        ↓
Formulare kontrollieren
        ↓
Smartphone-Darstellung prüfen
        ↓
Website im Browser aufrufen

Dadurch erkennst du schnell, ob die neue Gestaltung auch außerhalb des gerade bearbeiteten Bereichs funktioniert.

Wie geht es nach dem Design weiter? #

Wenn das Grunddesign deiner Website feststeht, kannst du dich dem eigentlichen Seiteninhalt widmen.

Dafür spielen die Content Blocks eine zentrale Rolle. Mit ihnen baust du einzelne Seitenabschnitte auf und kombinierst Texte, Bilder und weitere Elemente.

Weiter geht es deshalb mit Inhalte mit Kopage erstellen: Content Blocks, Texte und Bilder bearbeiten.

Zusammenfassung #

Das Design einer Kopage Website besteht aus mehreren zusammenhängenden Bereichen. Template beziehungsweise Theme bilden die gestalterische Grundlage, während Farben, Schriftarten, Header, Navigation und weitere Einstellungen das Erscheinungsbild konkretisieren.

Bei einer neuen Website kannst du diese Grundlagen früh festlegen. Bei einer bestehenden Website solltest du größere Änderungen dagegen schrittweise durchführen und anschließend mehrere Seiten kontrollieren.

Unterscheide außerdem zwischen globalen Design-Einstellungen und der Gestaltung einzelner Inhalte. Nicht jede optische Änderung erfordert einen Wechsel des gesamten Templates.

Ein gutes Kopage Design entsteht nicht durch möglichst viele Effekte, Farben und Schriftarten, sondern durch eine klare, einheitliche Gestaltung, die auf Desktop, Tablet und Smartphone gut funktioniert.