Website-Erscheinungsbild anpassen

Hier stellst du Farben, Schriftarten, Logos und das Layout deiner Website ein. Das Erscheinungsbild gilt für alle Seiten – einzelne Bereiche kannst du zusätzlich noch gestalten, wenn du einen Block auf einer Seite einrichtest.

So kommst du hierher

1. Öffne in der Seitenleiste Websites.
2. Wähle deine Website aus der Liste.
3. Klicke auf die Schaltfläche Einstellungen (Zahnrad-Symbol).

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Du brauchst Schreibrechte für die Website.

So gehst du vor

Das Einstellungsfenster hat drei Registerkarten: Seiteneinstellungen, Globale Einstellungen und Design. Jede enthält verschiedene Bereiche, die du einzeln öffnen und schließen kannst.

Globale Einstellungen: Menü und Logos

1. Klicke auf die Registerkarte Globale Einstellungen.

2. Öffne den Bereich Layout und wähle eine Menü-Variante:

   • Logo links, Menü rechts
   • Menü an der linken Seite
   • Ohne Menü
   • Schwebende Leiste
   • Logo mittig, Menü beidseitig
   • Logo über dem Menü
   • Großes Menü mit Untereinträgen

3. Im Bereich Website Logo lädst du dein Hauptlogo hoch. Es erscheint überall auf der Website, wo das Logo gezeigt wird.

4. Im Bereich Navigation Logo kannst du ein separates Logo nur für die Navigationsleiste hochladen – das ist oft kleiner oder schmaler.

5. Im Bereich Favicon lädst du das kleine Symbol, das in der Browser-Registerkarte erscheint. weboffice schneidet es automatisch quadratisch zu.

Für jedes Bild siehst du eine Vorschau und kannst es zuschneiden oder austauschen.

Globale Einstellungen: Analyse und Suche

1. Im Bereich Website Einstellungen trägst du deine Google Analytics ID ein, falls du Besuche messen möchtest.
2. Im Bereich Suchmaschinen gibst du einen Markenname der Website ein – das ist der Name, der in Google-Suchergebnissen neben deiner Domain steht. Leer gelassen wird automatisch dein Firmenwortlaut verwendet.

Globale Einstellungen: Weiterleitungen und Code

1. Im Bereich Weiterleitungen (anfangs zugeklappt) verwaltest du, wo alte Adressen deiner Website jetzt hin führen – falls du eine Seite gelöscht oder ihre Adresse geändert hast. weboffice schlägt dir das automatisch vor.
2. Im Bereich Für Fortgeschrittene (anfangs zugeklappt) kannst du eigenen HTML-Code eintragen, der in den <body> der ganzen Website eingefügt wird – zum Beispiel Tracking-Code von Drittanbietern.

Design: Farben, Schriften und KI-Assistent

1. Klicke auf die Registerkarte Design.
2. Falls deine weboffice-Version KI-Funktionen nutzt: Im Bereich KI-Design-Assistent beschreibst du deine Marke oder deinen Stil (z.B. "Modernes IT-Unternehmen, professionell, blau-grau Töne"), und weboffice generiert automatisch ein passendes Farbschema.
3. Im Bereich Einstellungen findest du verschiedene Schiebeschalter für das Design – zum Beispiel, ob Ecken abgerundet oder eckig sein sollen.
4. Im Bereich Schriftarten wählst du eine Schriftfamilie aus einer vorgegebenen Liste. Darunter kannst du spezielle Schriften für Überschriften und andere Textelemente einstellen – oder die Standardwerte mit der Schaltfläche neben jedem Feld wiederherstellen.
5. Im Bereich Farben siehst du alle Farben deiner Website als Farbquadrate. Klicke auf ein Quadrat, um die Farbe zu ändern. Neben manchen Farben steht ein Kontrast-Wert – das zeigt, ob dein Text auf der Fläche gut lesbar ist (mindestens 4,5:1 ist ein guter Wert). Mit der Schaltfläche neben jeder Farbe stellst du den Standardwert wieder her.
6. Im Bereich Für Fortgeschrittene (anfangs zugeklappt) kannst du eigenes CSS schreiben – das sind Formatierungs-Regeln, die dein Design weiter verfeinern. Die Vorschau zeigt deine Änderungen sofort.

Speichern

1. Klicke unten im Fenster auf Speichern.
2. Sobald gespeichert, schließt sich das Fenster automatisch.

Aufbau des Fensters

Das Einstellungsfenster ist eine seitliche Schiebeleiste mit drei Registerkarten:

• Seiteneinstellungen: Hier änderst du Titel, Adresse und SEO-Angaben einzelner Seiten. Das ist nicht Teil der globalen Gestaltung und wird hier nicht näher erklärt – siehe dazu Website-Seiten verwalten.

• Globale Einstellungen: Alles, was für alle Seiten der Website gilt – Logos, Menü-Layout, Google Analytics und Code.

• Design: Farben, Schriftarten und CSS – das Aussehen aller Bereiche deiner Website.

Jeder Bereich hat einen Kopfzeilentext mit Icon und einen Pfeil. Klick auf die Kopfzeile, um den Bereich auf- oder zuzuklappen. Ausgeklappte Bereiche zeigen die Eingabefelder.

Was danach passiert

Deine Einstellungen werden sofort gespeichert und angewendet. Die Vorschau in weboffice zeigt dein neues Design sofort; deine veröffentlichte Website wird aktualisiert, sobald du die Website veröffentlichst.

Wenn du eine Farbe oder Schrift änderst, wirkt sich das überall aus – es sei denn, du hast einen einzelnen Block extra gestaltet.

Tipps und Hinweise

• Bilder zuschneiden: Beim Hochladen von Logo oder Favicon kannst du das Bild zuschneiden. Ziehe die Ecken, um den Ausschnitt zu ändern, und drehe das Bild mit der Schaltfläche, falls nötig. Das Original bleibt erhalten – du änderst nur, welcher Teil verwendet wird.

• Schriftfamilienänderung: Wenn du die Schriftfamilie wechselst, siehst du in der Auswahliste bei älteren Schriften einen Zusatz "(nicht mehr im Angebot)" – diese funktionieren noch, sind aber nicht mehr erhältlich.

• Kontrast prüfen: Passe deine Farben so an, dass der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 beträgt – dann können auch Menschen mit schlechterer Sehkraft deine Website gut lesen.

• CSS nur für Fortgeschrittene: Wenn du CSS-Code eingibst, solltest du HTML und CSS kennen. Falscher Code kann das Design beschädigen. Speichern ist immer noch möglich – dann kannst du es korrigieren.

• Weiterleitung nach Adressänderung: Wenn du die Adresse einer Seite änderst, fragt dich weboffice, ob die alte Adresse auf die neue weitergeleitet werden soll – das ist wichtig, damit Lesezeichen und Google-Links nicht ins Leere führen.