PDF

Das Erscheinungsbild deiner Website einrichten

Hier stellst du Schriften, Farben, Formen und den Rhythmus deiner gesamten Website ein. Alle Einstellungen gelten für jede Seite – einzelne Abschnitte können aber abweichen. Dein Logo, der Name und spezielle Gestaltungsdetails gehören ebenfalls hierher.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Du brauchst Zugriff auf den Website-Editor.

So gehst du vor

Die Einstellungen sind in Gruppen organisiert. Du kannst mit den Voreinstellungen beginnen oder direkt einzelne Bereiche anpassen.

Grundlage mit einer Voreinstellung wählen

Scrolle zum Bereich Voreinstellung ganz oben.
Wähle eine der verfügbaren Voreinstellungen aus. Jede setzt Schrift, Form, Linien, Dichte, Überschriften und Schaltflächen auf einmal. Deine bisherigen Farben bleiben erhalten.
Jede Angabe der Voreinstellung bleibt danach einzeln änderbar – du kannst also immer noch nachjustieren.

Schriften einstellen

Unter Schrift findest du vorgefertigte Schrift-Paare für Überschriften und Fließtext:

Wähle ein Paar aus – die Schriften werden in den Editor übernommen.
Falls du Überschriften und Fließtext einzeln wählen möchtest: Scrolle nach unten zur Gruppe Feinheiten, öffne dort Schriften einzeln wählen und wähle die gewünschten Schriften aus den Listen.

Hinweis: Alle angebotenen Schriften werden bei jedem Besucher gleich angezeigt – sie müssen nicht auf seinem Gerät installiert sein.

Form, Linien, Dichte und Überschriften anpassen

Jede dieser Einstellungen steuert ein visuelles Merkmal der ganzen Website:

Form: Die Ecken von Karten, Schaltflächen, Bildern und Abzeichen (kantig, sanft oder rund).
Linien: Ränder von Karten und die Trennlinien (ohne, Haarlinie oder betont).
Dichte: Der Abstand zwischen Abschnitten, in Karten und zwischen Listen-Einträgen (kompakt, normal oder großzügig).
Überschriften: Das Aussehen aller Überschriften (klassisch, Kapitälchen oder mit Kursiv-Akzent).

Wähle für jede Einstellung einen der angebotenen Werte.

Schaltflächen gestalten

Unter Schaltflächen → Aussehen aller Schaltflächen wählst du einen Look für alle Schaltflächen der Website:

Klassisch, Leicht, Weich, Pille oder Plakativ – jede setzt Form, Schrift-Gewicht, Schatten und Hover-Effekt auf einmal.

Falls du einzelne Details ändern möchtest (z. B. nur die Form der Schaltflächen): Öffne Schaltflächen einzeln einstellen und passe folgende Punkte an:

Form der Schaltflächen: eckig, abgerundet oder Pille-Form
Schrift der Schaltflächen: leicht oder kräftig
Schatten der Schaltflächen: mit oder ohne
Beim Überfahren: nur Farbe, anheben oder Symbol rückt

Farben einstellen

Farbwelt wählen

Unter Farbwelt wählst du eine vorgefertigte Kombination aus Markenfarbe, Akzenten, Text- und Flächenfarbe:

Klick auf eine der Farbwelten – die Farben werden auf die ganze Website übertragen.
Wenn du deine bisherige Markenfarbe behalten möchtest, wähle Meine Marke – dann werden nur Text und Fläche auf sichere Werte gesetzt.

Jede Farbe bleibt danach einzeln änderbar.

Markenfarbe festlegen

Unter Markenfarbe stellst du die Farbe ein, die deine Website trägt:

Wähle einen der vorgegebenen Farbwerte, eine deiner eigenen Farben oder klick auf das Plus-Symbol, um eine eigene Farbe zu wählen.
Unter der Farbpalette findest du ein Farbverlauf (Ramp) – ein Klick auf eine Abstufung macht sie zur neuen Markenfarbe.
Wenn du ein Logo hochgeladen hast, zeigt weboffice dir die prominentesten Farben aus dem Logo – du kannst eine davon direkt als Markenfarbe übernehmen.

weboffice prüft, ob deine Markenfarbe auf dem Hintergrund lesbar ist. Die Prüfung zeigt dir das Kontrastverhältnis.

Akzentfarbe festlegen

Unter Akzent wählst du auf die gleiche Weise eine Akzentfarbe – sie heben besondere Elemente hervor.

Marke (Logo und Name) einrichten

Logo hochladen

Unter Logo:

Klick auf das Upload-Feld und wähle dein Logo aus (maximal 1024 × 1024 Pixel).
weboffice zeigt dir automatisch die Farben aus deinem Logo – klick auf eine, um sie als Markenfarbe zu übernehmen (optional).

Das Logo erscheint in der Kopfzeile, Fußleiste und in Suchergebnissen.

Eigenes Logo für die Kopfzeile

Falls deine Kopfzeile eine andere Fassung deines Logos zeigen soll (z. B. hell auf dunklem Hintergrund):

Scrolle zu Eigenes Logo für die Kopfzeile.
Lade das Logo hoch (maximal 512 × 512 Pixel).

Ohne Upload verwendet weboffice das Haupt-Logo.

Markenname eingeben

Unter Markenname der Website trägst du einen Namen ein, der in Suchergebnissen und der Editor-Kopfzeile angezeigt wird. Leer lassen bedeutet: weboffice nutzt deinen Firmennamen.

Farbrhythmus anwenden

Unter Farbrhythmus findest du eine Schaltfläche zum automatischen Einfärben:

Klick Farbrhythmus auf diese Seite anwenden.
weboffice zeigt dir, wie viele Abschnitte sich ändern würden – bestätige oder brich ab.
Helle, cremefarbene und dunkle Abschnitte wechseln sich danach ab. Neu eingefügte Abschnitte bekommen automatisch die Farbe, die an ihrer Stelle passt.

Kopf- und Fußleiste gestalten

Klick auf Kopf- und Fußleiste gestalten – damit öffnet sich ein separates Fenster für Aufbau, Logo-Größe, Navigation und Fußleiste. Diese Einstellungen gelten für alle Seiten deiner Website.

Feinheiten einstellen (optional)

Unter Feinheiten findest du zusätzliche Einstellungen:

Schriftgröße: Wie groß der Fließtext auf der Website ist (kompakt, normal oder großzügig)
Größe der Überschriften: Wie stark sich Überschriften vom Fließtext abheben (zurückhaltend, normal, auffällig, groß oder plakativ)
Schatten: Wie deutlich Karten und Menüs abheben (flach, weich oder deutlich)
Bewegung (Schalter): Abschnitte beim Scrollen einblenden – an oder aus
Dunkelmodus (Schalter): Folgt der Geräte-Einstellung des Besuchers – an oder aus
Schwebender Knopf: Eine Schaltfläche, die beim Scrollen sichtbar bleibt
- Aufschrift: Der Text auf der Schaltfläche (z. B. „Jetzt anrufen")
- Ziel: Wohin der Klick führt (interne Seite oder externe URL)
- Symbol: Ein Icon auf der Schaltfläche (oder keines)
- Stelle: Links unten, rechts unten, links oben oder rechts oben
Jede Farbe einzeln: Alle Design-Farben der Website im Überblick – du kannst jede einzeln ändern oder auf Standardwert zurücksetzen

KI-Design-Assistent nutzen (mit Lizenz)

Falls deine Lizenz den KI-Assistenten enthält:

Scrolle in Feinheiten nach unten zu KI-Design-Assistent.
Beschreib deine Marke oder deinen gewünschten Stil (z. B. „ruhige Praxis, Naturtöne, viel Weiß").
Klick Vorschlag erstellen – die KI schlägt Farben und Schriften vor.
Alle Vorschläge werden in die Vorschau übernommen. Du kannst jede Einstellung danach noch einzeln ändern.

Erweiterte Einstellungen

Ganz unten findest du Einstellungen der Website. Dort kannst du Meta-Angaben für Suchmaschinen, Favicons, Weiterleitungen und eigenen Code einrichten.

Aufbau des Fensters

Das Fenster ist in mehrere Bereiche aufgeteilt:

Oben: Ein Feld zum Suchen und eine Schaltfläche zum Schließen
Mitte: Die Gestaltungseinstellungen, von Voreinstellungen über Schriften und Farben bis zu Logo und Feinheiten
Unten: Eine Schaltfläche für erweiterte Einstellungen der Website

Viele Einstellungen lassen sich einklappen und ausklappen – wenn neben einem Punkt ein Dreieck steht, kannst du durch Klick auf den Text weitere Optionen anzeigen oder verbergen.

Farben werden dir als Farbfelder gezeigt, die du direkt klicken kannst. Bei Schriften siehst du Vorschaubuttons, auf denen die Schriftart schon zu sehen ist. Einige Einstellungen haben Schieberegler oder Auswahlfelder statt einzelner Knöpfe.

Was danach passiert

Alle Einstellungen werden sofort in die Vorschau übernommen und automatisch gespeichert. Deine Website zeigt das neue Erscheinungsbild, sobald du sie veröffentlichst.

Tipps und Hinweise

Farben testen: weboffice prüft Kontraste automatisch. Wenn Schrift auf deiner Markenfarbe schwer lesbar ist, siehst du einen Hinweis – wähle dann einen dunkleren oder helleren Farbton.
Voreinstellung + Feinheiten: Starten mit einer Voreinstellung spart Zeit. Danach kannst du immer noch Details anpassen – die Voreinstellung überschreibt nicht deine Farben.
Logo-Farben nutzen: Wenn dein Logo starke Farben hat, zeigt weboffice sie dir automatisch – so passt die Website optisch zu deinem Logo.
Dunkelmodus: Schalte ihn ein, wenn deine Besucher auf mobilen Geräten in den Dunkelmodus wechseln. Die Website passt sich dann automatisch an.
Schwebender Knopf: Braucht sowohl Text als auch Ziel, um zu erscheinen. Ohne beides wird er nicht angezeigt.