Erscheinungsbild deiner Website gestalten

Du bestimmst hier, wie deine Website aussieht: Farben, Schriftarten, Logos und die allgemeinen Einstellungen für Layout und Suchmaschinen. Die Änderungen gelten für alle Seiten deiner Website – es sei denn, du möchtest einzelne Seiten anders gestalten.

Voraussetzungen

Du benötigst Administratorrechte für die Website.

Aufbau des Einstellungsfensters

Das Fenster hat drei Registerkarten: Seiteneinstellungen für diese eine Seite (Adresse und SEO-Metadaten), Globale Einstellungen für websiteweite Einstellungen (Layout, Logos, Google Analytics) und Design für Farben, Schriftarten und eigenes CSS.

So gehst du vor

Öffne das Einstellungsfenster einer Seite deiner Website.
Wechsle zur Registerkarte Seiteneinstellungen, um Adresse und Suchmaschinen-Texte dieser einzelnen Seite zu ändern:
- Adresse: Der URL-Pfad dieser Seite. Die Startseite hat die Adresse / und kann nicht geändert werden.
- Meta Title: Der Titel, der in Google-Suchergebnissen und im Browser-Registerkarte angezeigt wird.
- Meta Description: Die Vorschau unter dem Titel in den Suchergebnissen – du siehst live, wie sie bei Google aussehen würde.
- Diese Seite löschen: Entfernt diese Seite endgültig – nur im Notfall verwenden.
Wechsle zur Registerkarte Globale Einstellungen, um die gesamte Website zu beeinflussen:

Layout:
- Menü Variante: Wähle, wie die Navigation oben dargestellt sein soll.
Bilder (Logos und Symbol):
- Lade drei Bilder hoch: dein Website-Logo (wird groß angezeigt), dein Navigations-Logo (schmaler Bereich oben) und dein Favicon (das winzige Symbol im Browser-Registerkarte). Jedes Feld hat eine maximale Breite – zu große Bilder werden automatisch verkleinert.
Website Einstellungen:
- Globaler HTML Code: Trage hier HTML-Code ein, der am Ende jeder Seite eingefügt wird – z. B. für Tracking oder externe Scripts. Dieses Feld ist für Fortgeschrittene gedacht.
- Google Analytics ID: Falls du Google Analytics nutzt, trage deine Tracking-ID ein.
- Markenname der Website: Der Name, der in Suchergebnissen als Seitenname erscheint. Leeres Feld = es wird dein Firmenname verwendet.
Wechsle zur Registerkarte Design, um Farben, Schriftarten und eigenes CSS anzupassen:

KI-Design-Assistent:
- Beschreibe deine Marke oder den gewünschten Stil in wenigen Worten (z. B. „modernes IT-Unternehmen, professionell, blau-grau").
- Klicke Theme generieren – die KI erstellt ein passendes Farbschema und wendet es an.
Einstellungen:
- Schalte Optionen ein oder aus, die das Aussehen beeinflussen. Mit dem Zurück-Pfeil setzt du einzelne Optionen auf ihre Standardwerte zurück.
Schriftarten:
- Wähle eine Schriftfamilie aus – diese wird überall verwendet.
- Passe einzelne Schriftarten noch feiner an (z. B. besondere Schrift für Überschriften). Mit dem Zurück-Pfeil setzt du sie zurück.
Farben:
- Klicke auf jede Farbe, um sie mit einem Farbwähler anzupassen. Mit dem Zurück-Pfeil stellst du die Standardfarbe wieder her.
Eigenes CSS:
- Für Fortgeschrittene: Trage eigenen CSS-Code ein, um das Design noch stärker anzupassen. Änderungen siehst du sofort in der Vorschau.
Klicke Speichern, um alle Änderungen zu sichern. Die Website wird in den meisten Fällen sofort neu geladen.

Was danach passiert

Deine Einstellungen sind gespeichert. Farben, Schriftarten und Logos erscheinen sofort auf allen Seiten. Bei Meta-Titeln und Beschreibungen kann Google ein bis zwei Wochen brauchen, bis es die neuen Texte in den Suchergebnissen anzeigt.

Willst du eine einzelne Seite anders gestalten als den Rest der Website, änderst du ihre Einstellungen (Adresse oder SEO-Texte) in der Registerkarte Seiteneinstellungen – ohne den Rest zu beeinflussen.

Lies mehr über SEO-Grundlagen unter Website für Suchmaschinen optimieren.

Tipps und Hinweise

KI-Theme zu ungenau? Beschreibe deine Marke präziser: Statt „modernes Design" schreib „Tech-Startup, leuchtend blau, minimalistisch".
Farben sehen anders aus? Je nach Bildschirm wirken Farben verschieden. Überprüfe deine Website auf verschiedenen Geräten.
Google Analytics funktioniert nicht? Stelle sicher, dass du die richtige ID eingegeben hast. Es kann mehrere Stunden dauern, bis Daten ankommen.
CSS-Code bricht das Design? Halte dich an gültiges CSS. Ein Tippfehler macht die ganze Regel unwirksam. Im Browser-Inspektor siehst du, welches CSS aktiv ist.
Logos verschwinden nach dem Speichern? Das ist normal – die Website wird neu geladen. Warte einen Moment, bevor du ein Bild erneut hochlädst.