Website-Erscheinungsbild anpassen
Hier stellst du Farben, Schriftarten, Logos und das Layout deiner Website ein. Du kannst ein Design-Schema mit Hilfe von KI generieren oder alles manuell anpassen. Am Ende wird deine komplette Website mit den neuen Einstellungen aktualisiert.
Voraussetzungen
Du brauchst Schreibzugriff auf die Website-Einstellungen.
So gehst du vor
Öffne die Einstellungen einer Seite deiner Website. Das Fenster öffnet sich mit drei Registerkarten.
Wechsle zur Registerkarte Design.
Du findest dort zwei große Bereiche: einen KI-Design-Assistenten und Einstellungen. Du kannst beide Wege kombinieren – generiere zunächst ein Schema mit KI und passe es danach manuell an.
Design mit KI erstellen
Klicke auf die Kopfzeile KI-Design-Assistent, falls der Bereich noch zugeklappt ist.
Schreibe eine Beschreibung deiner Marke oder des gewünschten Stils in das Textfeld – zum Beispiel eine Branche, ein Farbton oder ein Gefühl, das die Website vermitteln soll.
Klicke auf Theme generieren. Die KI erstellt automatisch ein Farbschema und füllt alle Farb- und Schrifteinstellungen aus. Du siehst dabei einen Ladehinweis. Sobald die Generierung fertig ist, werden alle Einstellungen übernommen und die Vorschau aktualisiert sich.
Design manuell anpassen
Klicke auf die Kopfzeile Einstellungen, falls der Bereich noch zugeklappt ist.
Schalter und Optionen: Du siehst mehrere Schalter für verschiedene Designoptionen. Jeden kannst du ein- oder ausschalten. Mit dem Pfeil-Links-Symbol daneben setzt du eine Einstellung auf ihren Standardwert zurück.
Schriftarten anpassen:
- Wähle deine Schriftfamilie aus der Auswahlbox oben.
- Für weitere Schrift-Einstellungen (zum Beispiel für Überschriften oder Body-Text) trägst du die genaue Bezeichnung ins entsprechende Feld ein. Mit dem Pfeil-Links-Symbol setzt du es auf den Standard zurück.
Farben anpassen:
- Klicke auf das Farbquadrat neben einem Farbnamen, um die Farbe zu wählen.
- Mit dem Farbwähler suchst du dir die genaue Farbe aus.
- Das Pfeil-Links-Symbol setzt die Farbe auf den Standard zurück.
Eigenes CSS hinzufügen (optional): Im Bereich Eigenes CSS kannst du zusätzliche CSS-Regeln eintragen, um dein Design noch präziser anzupassen. Die Änderungen siehst du sofort in der Vorschau.
Klicke auf Speichern, um alle Änderungen zu sichern. Die Website wird daraufhin mit dem neuen Design geladen.
Aufbau des Fensters
Das Einstellungsfenster hat drei Registerkarten:
Design-Registerkarte (die du für diese Aufgabe brauchst):
- KI-Design-Assistent: Textfeld für deine Marken-Beschreibung, Schaltfläche Theme generieren
- Einstellungen: Mehrere Unterabschnitte mit Schaltern, Textfeldern und Farbwählern
- Schalter für verschiedene Designoptionen (jeweils mit einem Pfeil-Links-Symbol zum Zurücksetzen)
- Schriftfamilien-Auswahlbox
- Textfelder für einzelne Schrift-Einstellungen
- Farbquadrate für jeden Farbwert
- Textfeld für eigenes CSS
Seiteneinstellungen (optional): Hier stellst du die Adresse und SEO-Metadaten dieser einzelnen Seite ein – siehe Website-SEO.
Globale Einstellungen (optional): Hier wählst du die Menü-Variante, lädst dein Website-Logo, das Logo für die Navigation und das Favicon hoch. Du kannst auch globale HTML-Codes oder die Google-Analytics-ID eintragen.
Was danach passiert
Deine Änderungen werden gespeichert und sofort auf der Website angewendet. Alle Seiten verwenden das neue Design. Wenn du CSS geändert hast oder Farben angepasst hast, siehst du die Vorschau direkt aktualisiert.
Du kannst jederzeit zurück in die Einstellungen gehen und das Design weiter anpassen.
Tipps und Hinweise
- Theme überarbeiten: Wenn dir ein automatisch generiertes Theme nicht gefällt, kannst du einzelne Farben oder Schriftarten manuell wieder auf ihre Standard-Werte zurücksetzen und neue Werte eingeben.
- CSS-Vorsicht: Nur wenn du CSS kennst, trage dort Code ein. Fehlerhafte Regeln können das Design beeinträchtigen.
- Änderungen live testen: Nach dem Speichern solltest du deine Website im Browser aufrufen und prüfen, ob alles so aussieht, wie du es wolltest.
- Vorschau nutzen: Während du die Einstellungen änderst, siehst du die Änderungen direkt in der Vorschau – so kannst du sofort sehen, wie deine Website aussieht.