Das Erscheinungsbild deiner Website anpassen

Hier stellst du Farben, Schriftarten, Logos und das Layout deiner Website ein. Du kannst die Einstellungen entweder manuell vornehmen oder einen KI-Design-Assistenten nutzen, der dir ein passendes Farbschema vorschlägt.

Voraussetzungen

Du benötigst Bearbeitungsrechte für die Website.

So gehst du vor

1. Öffne die Vorlage, deren Erscheinungsbild du ändern möchtest. Das Einstellungsfenster erscheint auf der rechten Seite.

2. Wähle die Registerkarte Seiteneinstellungen, um die Adresse und SEO-Daten dieser einzelnen Seite zu pflegen. Hier kannst du auch diese Seite löschen.

3. Wechsle zur Registerkarte Globale Einstellungen. Diese Einstellungen gelten für deine gesamte Website:

   • Menü Variante: Wähle ein Layout für dein Navigationsmenü.
   • Website Logo: Lade das Logo hoch, das auf deiner Website angezeigt wird.
   • Navigation Logo: Lade ein separates Logo für die Navigationsleiste hoch (kann kleiner ausfallen).
   • Favicon: Das ist das kleine Symbol, das im Browser-Tab erscheint.
   • Globaler HTML Code: Für Experten – hier kannst du eigenen HTML-Code hinzufügen, z. B. für Tracking oder externe Dienste.
   • Google Analytics ID: Trage hier deine Google-Analytics-Kennung ein, um Besucherzahlen zu erfassen.
   • Markenname der Website: Dieser Name erscheint in Suchergebnissen. Wenn du ihn leer lässt, verwendet weboffice deinen Firmennamen.

4. Öffne die Registerkarte Design, um Farben, Schriftarten und das Theme anzupassen:

   KI-Design-Assistent: Beschreibe deine Marke oder deinen gewünschten Stil (z. B. „modernes IT-Unternehmen, professionell, blau-grau Töne"). Klicke auf Theme generieren – die KI erstellt dann automatisch ein passendes Farbschema für dich.

   Einstellungen: Hier findest du Schalter für verschiedene Design-Optionen, die du an- oder ausschalten kannst. Mit dem Pfeil-Symbol setzt du jede Einstellung auf ihren Standardwert zurück.

   Schriftarten: Wähle eine Schriftfamilie aus der Liste. Darunter kannst du einzelne Schriftarten für Überschriften, Fließtext und andere Elemente anpassen. Der Pfeil-Symbol setzt jede auf ihren Standardwert zurück.

   Farben: Klicke auf die Farbfelder, um die Farben deiner Website zu ändern. Jede Farbe hat einen Namen (z. B. Primärfarbe, Akzentfarbe). Du kannst die Farbe direkt eingeben oder mit dem Farbwähler auswählen. Der Pfeil setzt jede auf ihren Standardwert zurück.

   Eigenes CSS: Für Experten – schreibe hier eigene CSS-Regeln, um das Design individuell anzupassen. Änderungen werden sofort in der Vorschau sichtbar.

5. Klicke unten rechts auf Speichern, um alle Einstellungen zu speichern. Die Website wird daraufhin neu geladen.

Aufbau des Fensters

Das Fenster hat drei Registerkarten:

• Seiteneinstellungen: Adresse und SEO-Angaben dieser einen Seite
• Globale Einstellungen: Layout, Logos und Tracking für die gesamte Website
• Design: Farben, Schriftarten und individuelle Anpassungen

Innerhalb jeder Registerkarte sind die Einstellungen in ausklappbaren Abschnitten organisiert. Klicke auf den Pfeil neben einem Abschnitt, um ihn zu öffnen oder zu schließen.

Was danach passiert

Deine Änderungen werden gespeichert. Die Website lädt neu und zeigt dein neues Design. Alle Seiten nutzen automatisch diese Design-Einstellungen – du musst sie nur einmal festlegen.

Falls du nur einzelne Seiten anders gestalten möchtest, kannst du dort eigene SEO-Daten oder ein anderes Menü-Layout einstellen (Registerkarte Seiteneinstellungen).

Tipps und Hinweise

• Der KI-Design-Assistent funktioniert am besten, wenn du beschreibst, wer deine Zielgruppe ist und welcher Stil zu deiner Branche passt.
• Teste dein Design in verschiedenen Browsern und auf Mobilgeräten, damit es überall gut aussieht.
• Wenn du viel CSS hinzufügst, können Updates des Designs schwer zu verwalten werden. Nutze Custom CSS nur für Feintuning.
• Logos sollten nicht zu groß sein – das Website-Logo wird mit max. 1024 Pixeln, das Navigations-Logo mit max. 512 Pixeln gespeichert.
• Dein Favicon sollte quadratisch sein und passt in 256 Pixel.