Das Erscheinungsbild deiner Website gestalten

Hier stellst du die Farben, Schriftarten, Logos und das Layout deiner Website ein. Das Fenster hat drei Registerkarten: In der ersten pflegst du SEO-Daten für Suchmaschinen, in der zweiten bestimmst du globale Einstellungen wie Logos und Analytics, in der dritten gestaltest du Design und Farben – auch mit Hilfe eines KI-Assistenten.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Du kannst das Erscheinungsbild jederzeit anpassen und die Änderungen sofort speichern.

So gehst du vor

Öffne das Einstellungsfenster einer Seite – die Schaltfläche befindet sich oben rechts in der Liste der Vorlagen oder beim Bearbeiten einer Seite.
Du befindest dich auf der Registerkarte Seiteneinstellungen. Hier vergibst du eine eigene Adresse für diese Seite (falls nicht die Startseite) und optimierst sie für Suchmaschinen:
- Adresse: Die URL-Endung dieser Seite – leer lässt du das Feld nur für die Startseite (dort steht automatisch /)
- Meta Title: Der Titel, den Suchmaschinen in Suchergebnissen anzeigen (Seitentitel)
- Meta Description: Die Beschreibung unter dem Titel in Suchergebnissen – halte sie kurz und aussagekräftig
Sobald du etwas eingibst, siehst du eine Vorschau, wie deine Seite in Google aussieht. Unter Gefährliche Operationen kannst du diese Seite löschen, falls du sie nicht mehr brauchst.
Wechsle zur Registerkarte Globale Einstellungen. Hier bestimmst du das Aussehen der ganzen Website:
- Menü Variante: Wie dein Navigationsmenü aussehen soll
- Website Logo: Das Logo oben links auf der Website
- Navigation Logo: Das Logo in der Navigationsleiste (kann kleiner sein)
- Favicon: Das kleine Symbol, das oben im Browser-Tab angezeigt wird
Darunter stellst du technische Details ein:
- Markenname der Website: Der Name, den Suchmaschinen verwenden, wenn sie deine Website anzeigen – wenn leer, nutzt weboffice den Namen deines Unternehmens
- Google Analytics ID: Deine Analytics-ID, falls du die Besucherzahlen tracken möchtest
- Globaler HTML-Code: Code für spezielle Funktionen im Body-Bereich (für Fortgeschrittene)
Wechsle zur Registerkarte Design. Hier gestalltest du das Aussehen deiner Website farblich und typografisch.
Nutze den KI-Design-Assistenten für schnelle Ergebnisse: Beschreibe deine Marke oder den gewünschten Stil (zum Beispiel „Modernes IT-Unternehmen, professionell, blau-grau Töne"), klicke Theme generieren und die KI erstellt dir ein passendes Farbschema. Die generierten Farben und Schriftarten werden sofort in die Einstellungen übernommen.
Unter Einstellungen kannst du einzelne Gestaltungsoptionen ein- oder ausschalten und Standardwerte mit der Reset-Schaltfläche (Pfeil zurück) wiederherstellen.
Unter Schriftarten stellst du die Schrift ein:
- Schriftfamilie: Wähle eine der verfügbaren Schriftarten aus
- Weitere Schriftoptionen darunter lassen sich ebenfalls anpassen und mit der Reset-Schaltfläche auf den Standard zurücksetzen
Unter Farben wählst du alle Farben deines Designs. Klicke auf eine Farbe, um sie mit der Farbpalette zu ändern, oder setze sie mit der Reset-Schaltfläche auf den Standard zurück.
Unter Eigenes CSS kannst du, falls nötig, zusätzliche CSS-Befehle eintragen, um dein Design noch feiner abzustimmen. Änderungen werden sofort in der Vorschau angezeigt.
Klicke Speichern, um alle Einstellungen zu speichern. Deine Website wird sofort mit den neuen Einstellungen angezeigt.

Aufbau des Fensters

Das Fenster ist in drei Registerkarten gegliedert:

Seiteneinstellungen – hier pflegst du Adresse und SEO-Daten dieser einzelnen Seite.

Globale Einstellungen – hier stellst du Elemente ein, die auf der ganzen Website gelten: Menülayout, Logos, Favicon, Website-Name für Suchmaschinen und technische Codes.

Design – hier bestimmst du Farben, Schriftarten und Layout der Website. Der KI-Assistent generiert dir auf Wunsch ein komplettes Farbschema basierend auf deiner Marke.

Was danach passiert

Sobald du speicherst, werden alle Einstellungen gespeichert und die Website wird sofort mit dem neuen Design angezeigt. Deine Änderungen gelten für alle Seiten (globale Einstellungen) oder nur für die aktuelle Seite (Seiteneinstellungen).

Du kannst die Einstellungen jederzeit erneut öffnen und ändern. Nur die Seitenloschung unter Gefährliche Operationen lässt sich nicht rückgängig machen.

Tipps und Hinweise

Die SEO-Metadaten (Meta Title und Meta Description) sind wichtig für dein Google-Ranking – bleibe aussagekräftig und halte die Meta Description unter 160 Zeichen.
Der KI-Assistent funktioniert am besten, wenn du präzise beschreibst, wie deine Marke aussehen soll. Nutze Fachbegriffe wie „minimalistisch", „verspielt", „luxuriös" oder Farbvorgaben.
Logos sollten nicht zu groß sein – das Navigationlogo kann kleiner als das Website-Logo sein, damit die Seite übersichtlich bleibt.
Wenn du eigenes CSS hinzufügst, teste es gründlich – falsche CSS-Befehle können das Layout beschädigen.
Die Reset-Schaltflächen (Pfeile zurück) helfen dir, schnell zur Standardeinstellung zurückzukehren, ohne die ganze Seite neu zu laden.