Hier legst du Farben, Schriften, Formen und den Gesamteindruck deiner Website fest. Du kannst mit vorgegebenen Designs beginnen oder alle Einstellungen einzeln anpassen – deine Markenfarbe bleibt dabei immer erhalten. Jede Änderung zeigt sich sofort in der Vorschau.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen – du brauchst nur Zugriff auf die Website-Verwaltung.
So gehst du vor
Schritt 1: Ein Design als Grundlage wählen
- Öffne das Design-Fenster, das sich neben deiner Website-Vorschau befindet.
- Unter Voreinstellung siehst du mehrere Designs mit verschiedenen Schriften und Formen. Jedes zeigt dir ein Muster mit „Aa Bb Cc". Klicke auf eines, das dir gefällt – es stellt Schrift, Form, Linien, Dichte, Überschriften und Schaltflächenstil in einem Schritt ein.
Die einzelnen Angaben bleiben danach änderbar; deine Farben behältst du, wie sie sind.
Schritt 2: Schriften wählen
Unter Stil > Schrift findest du vordefinierte Schriftkombinationen. Jede zeigt, welche Schrift für Überschriften und welche für den Fließtext verwendet wird. Diese Schriften sind im weboffice enthalten und sehen bei jedem Besucher gleich aus.
Klicke auf die Kombination, die dir passt. Du kannst Überschriften- und Fließtext-Schrift später auch einzeln einstellen, wenn du Feinheiten öffnest und dort Schriften einzeln wählen aktivierst.
Schritt 3: Form, Linien und Abstände einstellen
Darunter findest du drei Schieberegler:
- Form: Wie stark die Ecken von Karten und Schaltflächen abgerundet sind (kantig bis rund)
- Linien: Wie deutlich die Grenzen zwischen Bereichen sichtbar sind (ohne Linien bis betont)
- Dichte: Wie viel Luft zwischen Abschnitten und in Karten steht (kompakt bis großzügig)
Jeder Regler hat mehrere Stufen zum Anklicken.
Schritt 4: Überschriften und Schaltflächen gestalten
- Überschriften: Wie stark sich Überschriften vom Fließtext abheben (zurückhaltend bis plakativ)
- Schaltflächen > Aussehen aller Schaltflächen: Wie alle Knöpfe auf deiner Website aussehen (von klassisch bis plakativ)
Wenn du Schaltflächen noch feiner einstellen möchtest, öffne Schaltflächen einzeln einstellen und passe Eckenform, Schrift, Schatten und Hover-Effekt an.
Schritt 5: Farbwelt wählen oder Markenfarbe setzen
Unter Farben > Farbwelt siehst du mehrere fertige Farbkombinationen. Jede setzt Markenfarbe, Akzente, Textfarbe und Hintergrund in einem Schritt. Klicke auf die Welt, die dir gefällt.
Alternativ stellst du deine Farben manuell ein:
- Unter Markenfarbe klickst du auf eine der vorgegebenen Farben, oder du klickst auf das Pluszeichen und wählst eine eigene Farbe.
- Du kannst auch auf eine der Abstufungen unterhalb klicken – diese übernimmt die Farbe als deine neue Markenfarbe.
- Unter Akzent wählst du genauso eine zweite Farbe für Highlights.
Wenn ein Farbkontrast problematisch ist, zeigt weboffice dir einen Hinweis mit den Messwerten.
Schritt 6: Logo und Markenname einstellen
Unter Marke > Logo lädst du dein Unternehmenslogo hoch. Es erscheint dann in der Kopfzeile, Fußzeile und in Suchergebnissen.
Wenn dein Logo eine ausgeprägte Farbe hat, schlägt weboffice dir diese als Markenfarbe vor. Du kannst sie mit einem Klick übernehmen – oder alles, wie es ist, lassen.
Unter Eigenes Logo für die Kopfzeile kannst du eine alternative Version hochladen – zum Beispiel in Weiß auf dunklem Hintergrund.
Unter Markenname der Website trägst du einen Namen ein (zum Beispiel deinen Firmennamen). Dieser erscheint in Suchergebnissen und im Editor. Leer gelassen, wird der Firmenwortlaut verwendet.
Schritt 7: Farbrhythmus anwenden (optional)
Farbrhythmus auf diese Seite anwenden wechselt helle, cremefarbene und dunkle Abschnitte ab. Vorher sagt dir der Editor, wie viele Abschnitte sich ändern. Ein neu eingefügter Abschnitt bekommt die Farbe, die an seiner Stelle passt.
Schritt 8: Kopf- und Fußzeile gestalten
Klicke auf Kopf- und Fußleiste gestalten, um Aufbau, Logo-Größe, Menü und Fußzeile einzustellen. Diese Einstellungen gelten für alle Seiten deiner Website.
Schritt 9: Weitere Feinheiten (optional)
Öffne Feinheiten, um auf diese Bereiche zuzugreifen:
- Schriftgröße: Wie groß der Fließtext grundsätzlich ist
- Größe der Überschriften: Wie viel größer Überschriften sind
- Schatten: Wie deutlich Karten und Menüs abheben
- Bewegung: Ob Abschnitte beim Scrollen einblenden
- Dunkelmodus: Ob die Website sich dem Gerät des Besuchers anpasst (helle oder dunkle Einstellung)
- Schwebender Knopf: Ein Knopf, der beim Scrollen oben bleibt (mit Aufschrift, Ziel, Symbol und Position)
- Jede Farbe einzeln: Alle Design-Farben im Detail anpassen
Wenn du einen KI-Design-Assistenten zur Verfügung hast, kannst du unter KI-Design-Assistent deine Marke oder deinen gewünschten Stil beschreiben. Die KI schlägt dir dann Farben und Schriften vor, die du danach noch einzeln ändern kannst.
Schritt 10: Speichern
Alle Änderungen werden automatisch gespeichert, sobald du sie vornimmst. Du siehst das Ergebnis sofort in der Vorschau neben dem Design-Fenster.
Zusätzliche Einstellungen für Seite, Suchmaschinen, Favicon und Weiterleitungen findest du unter Einstellungen der Website (Zahnrad-Symbol unten im Design-Fenster).
Aufbau des Design-Fensters
Das Fenster ist in Abschnitte unterteilt:
- Voreinstellung: Fertige Design-Kombos
- Stil: Schrift, Form, Linien, Dichte, Überschriften und Schaltflächen
- Farben: Farbwelten, Markenfarbe, Akzent
- Marke: Logo, Markenname
- Farbrhythmus: Automatischer Wechsel für Abschnitte
- Feinheiten: Alles Weitere für Fortgeschrittene (mit Klick ausklappar)
Was danach passiert
Alle Einstellungen werden sofort auf deine Website angewendet. Du siehst das Ergebnis in der Vorschau. Wenn du mit dem Erscheinungsbild zufrieden bist, ist deine Website bereit zur Veröffentlichung.
Du kannst dich jederzeit hierher zurück kommen und Einstellungen ändern – auch nach der Veröffentlichung.
Tipps und Hinweise
- Schriften liefern wir mit: Die Schriften im weboffice sind eingebunden – du brauchst nichts hochzuladen, und dein Design sieht bei jedem Besucher gleich aus.
- Farben und Kontrast: Wenn Text auf deiner Markenfarbe schwer lesbar ist, zeigt dir weboffice einen Kontrast-Hinweis. Ein Klick auf eine hellere oder dunklere Abstufung kann helfen.
- Dunkelmodus: Wenn du ihn aktivierst, sehen Besucher mit dunkel gestelltem Gerät dunkle Flächen – deine Markenfarbe bleibt unverändert.
- Logo-Farben übernehmen: Wenn dein Logo farbig ist und weboffice einen Vorschlag macht, kannst du die Farbe mit einem Klick als Markenfarbe übernehmen. Wenn du „Meine Marke" wählst, wird deine eigene Markenfarbe verwendet.
- Schwebender Knopf: Dieser Knopf braucht sowohl eine Aufschrift als auch ein Ziel – sonst erscheint er nicht. Symbol und Position sind optional.
- Änderungen rückgängig machen: Weboffice speichert Änderungen sofort. Wenn dir eine Einstellung nicht gefällt, kannst du jederzeit eine andere wählen oder auf „Auf Standard zurücksetzen" klicken.