Deine Website gestalten
Hier bestimmst du das Erscheinungsbild deiner gesamten Website – Farben, Schriftarten, Abstände und wie die Kopfzeile aussieht. Die Einstellungen gelten für alle Seiten, einzelne Abschnitte können davon abweichen.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
So gehst du vor
Design der Website anpassen
Öffne das Gestaltungs-Fenster. (Der Weg dorthin ist dir bekannt.)
Wähle einen Look – das ist eine fertige Kombination aus Schrift, Schriftgröße, Überschriften, Ecken und Schatten. Ein Look setzt alle diese Werte in einem Zug. Jede Angabe bleibt danach einzeln änderbar.
Wähle eine Farbwelt – fertige Farbkombinationen für deine Markenfarbe, Akzente, Textfarbe und Flächen. Alternativ kannst du Meine Marke wählen, um deine Markenfarbe zu bewahren und nur Text und Fläche auf geprüfte Werte zu setzen.
Stelle deine Markenfarbe ein. Du kannst Farbtöne aus einer Vorschau wählen oder deine eigene Farbe hinzufügen – klicke auf das + Symbol. Die Farbtonleiter darunter zeigt, welche helleren und dunkleren Abstufungen daraus entstehen. Wenn die Farbkombination mit deinem Text einen Kontrast von mindestens 4,5 zu 1 erreicht, sehen das alle Besucher gut.
Stelle die Akzentfarbe ein – für Buttons und Hervorhebungen. Wähle aus den Vorschlägen oder füge deine eigene Farbe hinzu.
Wähle deine Schrift. Die angebotenen Schriftarten liefern wir mit und sehen beim Besucher genauso aus wie bei dir. Alternativ kannst du Überschriften und Fließtext einzeln wählen – klicke dafür auf Schriften einzeln wählen.
Stelle die Schriftgröße ein – kompakt, normal oder großzügig.
Stelle ein, wie stark die Überschriften vom Fließtext abheben sollen – zurückhaltend, normal, auffällig, groß oder plakativ. Die Überschriften wachsen mit der Schriftgröße mit und auf breiten Bildschirmen zusätzlich mit dem Fenster.
Stelle die Ecken ein – kantig, sanft oder rund. Das gilt für Karten, Knöpfe und Bilder der ganzen Website.
Stelle die Schatten ein – flach, weich oder deutlich. Das bestimmt, wie sehr Karten und Menüs von der Fläche abheben.
Stelle die Abstände ein – kompakt, normal oder großzügig. Das ist die Luft zwischen den Abschnitten und in den Karten.
Schalte den Dunkelmodus ein oder aus. Wenn er eingeschaltet ist, sehen Besucher mit dunkel gestelltem Gerät automatisch dunkle Flächen. Deine Markenfarbe bleibt unverändert. Wenn er ausgeschaltet ist, zeigt deine Website bei jedem Besucher die hellen Flächen.
Schalte Bewegung ein oder aus. Wenn eingeschaltet, blenden sich die Abschnitte ein, sobald der Besucher sie beim Scrollen ins Bild bringt. Ein Abschnitt mit eigener Animation behält seine. Kopfzeile und Fußleiste bewegen sich nicht.
Stelle den schwebenden Knopf ein – das ist ein Knopf, der beim Scrollen über der Seite stehen bleibt. Trage eine Aufschrift ein (zum Beispiel „Jetzt anrufen"), wähle ein Ziel (eine Seite oder einen externen Link), ein Symbol (Telefon, Kuvert, Kalender oder kein Symbol) und eine Stelle (oben links, oben rechts, unten links oder unten rechts). Ohne Aufschrift und Ziel erscheint der Knopf nicht.
Klicke auf Kopfzeile gestalten, um Aufbau, Verhalten beim Scrollen, Logo und Menü einzustellen. (Siehe nächster Abschnitt.)
Trage einen Markenname der Website ein. Dieser steht in den Suchergebnissen und in der Kopfleiste des Editors.
Klicke auf Für Fortgeschrittene, um Logos hochzuladen, eigenes CSS einzufügen oder den KI-Design-Assistenten zu nutzen.
Kopfzeile anpassen
Sobald du Kopfzeile gestalten angeklickt hast, öffnet sich ein neues Fenster.
Wähle einen Aufbau für deine Kopfzeile:
- Logo links, Menü rechts: klassische Anordnung
- Menü an der linken Seite: das Menü läuft vertikal an der linken Kante
- Ohne Menü: keine Kopfzeile
- Schwebende Leiste: die Leiste steht frei über der Seite und wird beim Scrollen kleiner
- Logo mittig, Menü beidseitig: das Logo steht in der Mitte, Menüpunkte links und rechts
- Logo über dem Menü: das Logo steht in einer eigenen Zeile. Passt zu langen Namen
- Großes Menü mit Untereinträgen: Mega-Menü
Wenn die Kopfzeile sichtbar ist, stelle das Verhalten beim Scrollen ein:
- stehend: das Menü bleibt am Seitenanfang und scrollt weg
- mitlaufend: das Menü bleibt beim Scrollen oben stehen
- mitlaufend, schrumpfend: das Menü bleibt oben und wird flacher
Wenn die Kopfzeile oben angeordnet ist, kannst du sie über dem ersten Abschnitt liegen lassen – das Menü wird durchsichtig, und der erste Abschnitt beginnt darunter. Das passt zu einem großen Bild als erstem Abschnitt. Beim Scrollen bekommt das Menü seine Fläche zurück.
Schalte Logo zeigen ein. Wenn eingeschaltet, wählst du die Größe – klein, normal oder groß.
Füge einen Handlungsaufruf ein – das ist ein Knopf im Menü, der überall dieselbe Sache anstößt: anrufen, buchen, schreiben. Trage eine Aufschrift ein (zum Beispiel „Termin buchen") und wähle ein Ziel (eine Seite oder einen externen Link). Du kannst nur einen Knopf haben. Wenn du mehrere Knöpfe brauchst, klicke auf Auf einen Knopf reduzieren.
Passe dein Menü an – füge Einträge ein, entferne sie oder ändere ihre Reihenfolge. Siehe „Website-Navigation"
Wenn die Kopfzeile oben angeordnet ist, wähle ein Menü auf dem Handy:
- Schublade: das Menü klappt unter der Leiste auf
- Vollbild: das Menü legt sich über die Seite
- Vollbild, groß: das Menü legt sich über die Seite, die Punkte stehen groß in der Überschriftenschrift
Klicke auf Für Fortgeschrittene, um die Menüleiste in voller Breite zu nutzen, das Menü mittig zu setzen oder ein Abzeichen einzufügen.
Seiteneigenschaften anpassen
Nachdem du alle Gestaltungsoptionen eingestellt hast, kannst du noch einzelne Seite anpassen:
Trage einen Seitentitel ein – dieser steht im Menü und im Reiter des Browsers.
Trage die Adresse ein (wenn sie nicht festgelegt ist). Das ist der Teil der Website-URL nach der Domain.
Trage eine Beschreibung für Google ein – das ist der Text, der in den Suchergebnissen unter dem Titel steht. Bis zu 160 Zeichen.
Schalte Im Menü zeigen ein oder aus. Wenn ausgeschaltet, bleibt die Seite über ihre Adresse erreichbar, ist aber nicht im Menü sichtbar.
Schalte Von Suchmaschinen ausschließen ein – nur für Seiten, die niemand finden soll.
Klicke auf Alle Einstellungen, um weitere Optionen zu öffnen.
Aufbau des Gestaltungs-Fensters
Das Fenster ist in drei Bereiche unterteilt:
Design: Hier stellst du Looks, Farbwelten, Farben, Schriften, Größen und Abstände ein – alles, was für die gesamte Website gilt.
Kopfzeile: Ein Knopf führt dich zu den Einstellungen für die Kopfzeile (Aufbau, Verhalten, Logo, Menü).
Für Fortgeschrittene: Hier findest du Logos, eigenes CSS und den KI-Design-Assistenten.
Das Fenster der Seiteneigenschaften zeigt den Titel der aktuellen Seite, die Anzahl ihrer Abschnitte und die gewählte Bildschirmbreite. Hier änderst du den Seitentitel, die Adresse, die Beschreibung und die Sichtbarkeit.
Was danach passiert
Alle Einstellungen werden sofort gespeichert. Die Vorschau deiner Website zeigt die Änderungen live. Farben und Schriftarten gelten für alle Seiten – Abschnitte können davon abweichen. Aufbau und Menü der Kopfzeile gelten ebenfalls für alle Seiten.
Erfahre mehr über einzelne Seiten
Gestalte die Abschnitte einer Seite
Tipps und Hinweise
- Kontrast prüfen: weboffice prüft automatisch, ob deine Textfarbe auf der Markenfarbe gut lesbar ist. Ab 4,5 zu 1 gilt sie als gut lesbar.
- Schriften liefern wir mit: Die angebotenen Schriftarten funktionieren bei jedem Besucher gleich. Wenn du eine Schrift nicht mehr verwenden möchtest, zeigt weboffice an, dass sie „nicht mehr im Angebot" ist – du kannst sie aber noch verwenden, bis du eine neue wählst.
- Dunkelmodus und Markenfarbe: Wenn Dunkelmodus eingeschaltet ist und ein Besucher sein Gerät auf dunkel gestellt hat, sieht er dunkle Flächen – aber deine Markenfarbe bleibt immer sichtbar.
- Ein Look ändert mehrere Werte: Wenn du einen Look wählst, ändern sich Schrift, Schriftgröße, Überschriften, Ecken und Schatten. Du kannst danach jeden Wert einzeln anpassen.
- Abschnitte mit eigener Animation: Wenn du Bewegung ausschaltest, bewegen sich nur noch Abschnitte, die eine eigene Animation haben.