Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Anpassen des Website-Designs | Erstellung Einer Vollständigen Website Von Grund Auf
Codefreie Website-Erstellung mit WordPress

bookAnpassen des Website-Designs

Nachdem Sie Ihr Theme installiert und eine Starter-Vorlage importiert haben, ist es an der Zeit, Ihre Website so anzupassen, dass sie Ihre Marke und Inhalte widerspiegelt.

Verwendung des WordPress Customizers
expand arrow

Der WordPress Customizer ermöglicht es, das Design Ihrer Website in Echtzeit zu bearbeiten und Änderungen sofort zu sehen.

So greifen Sie darauf zu:

  • Gehen Sie im WordPress-Dashboard zu Design → Customizer;
  • Der Customizer öffnet sich mit einer Live-Vorschau Ihrer Website rechts und einem Einstellungsmenü links.

Die verfügbaren Optionen im Customizer variieren je nach aktiviertem Theme. Bei Verwendung von Astra mit einer Starter-Vorlage sind in der Regel folgende Optionen verfügbar:

  • Globale Einstellungen: Schriftarten, Farben und Containerbreite anpassen;
  • Header- und Footer-Builder: Die oberen und unteren Bereiche Ihrer Website bearbeiten;
  • Menüs und Widgets: Navigation und Seitenleisten-Elemente verwalten.

Sie müssen jetzt nicht jede Einstellung erkunden – konzentrieren Sie sich zunächst auf die Grundlagen.

Anpassen der Hauptelemente
expand arrow

Dies sind die wichtigsten Punkte, die Sie beim Anpassen des Website-Designs beachten sollten:

1. Farben und Typografie

  • Gehen Sie zu Global → Farben, um Hintergrund-, Text- und Linkfarben zu ändern;
  • Gehen Sie zu Global → Typografie, um Schriftarten und Größen für Überschriften und Fließtext festzulegen.

2. Header und Footer

  • Klicken Sie im Customizer auf Header-Builder oder Footer-Builder;
  • Sie sehen ein visuelles Layout, in dem Sie auf verschiedene Bereiche (Logo, Menü, Social Icons usw.) klicken können, um diese zu bearbeiten;
  • Sie können Elemente auch entfernen oder durch Ziehen neu anordnen.
Hinzufügen von Logo und Favicon
expand arrow

Falls Sie Ihr Logo beim Importieren der Starter-Vorlage nicht hochgeladen haben, können Sie dies jetzt nachholen.

So aktualisieren Sie Ihr Logo:

  1. Gehen Sie zu Header-Builder → Website-Titel & Logo;
  2. Klicken Sie auf Logo auswählen und laden Sie Ihr Bild hoch (vorzugsweise PNG mit transparentem Hintergrund).

So fügen Sie ein Favicon (Symbol im Browser-Tab) hinzu:

  1. Gehen Sie zu Allgemeine Einstellungen → Website-Identität;
  2. Unter Website-Symbol laden Sie ein quadratisches Bild hoch (empfohlen: 512x512 Pixel).
Speichern Ihrer Änderungen
expand arrow

Wenn Sie mit Ihren Anpassungen zufrieden sind, klicken Sie oben im Customizer auf die Schaltfläche Veröffentlichen, um alle Änderungen zu speichern.

question mark

Was ist ein Favicon in WordPress?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.45

bookAnpassen des Website-Designs

Swipe um das Menü anzuzeigen

Nachdem Sie Ihr Theme installiert und eine Starter-Vorlage importiert haben, ist es an der Zeit, Ihre Website so anzupassen, dass sie Ihre Marke und Inhalte widerspiegelt.

Verwendung des WordPress Customizers
expand arrow

Der WordPress Customizer ermöglicht es, das Design Ihrer Website in Echtzeit zu bearbeiten und Änderungen sofort zu sehen.

So greifen Sie darauf zu:

  • Gehen Sie im WordPress-Dashboard zu Design → Customizer;
  • Der Customizer öffnet sich mit einer Live-Vorschau Ihrer Website rechts und einem Einstellungsmenü links.

Die verfügbaren Optionen im Customizer variieren je nach aktiviertem Theme. Bei Verwendung von Astra mit einer Starter-Vorlage sind in der Regel folgende Optionen verfügbar:

  • Globale Einstellungen: Schriftarten, Farben und Containerbreite anpassen;
  • Header- und Footer-Builder: Die oberen und unteren Bereiche Ihrer Website bearbeiten;
  • Menüs und Widgets: Navigation und Seitenleisten-Elemente verwalten.

Sie müssen jetzt nicht jede Einstellung erkunden – konzentrieren Sie sich zunächst auf die Grundlagen.

Anpassen der Hauptelemente
expand arrow

Dies sind die wichtigsten Punkte, die Sie beim Anpassen des Website-Designs beachten sollten:

1. Farben und Typografie

  • Gehen Sie zu Global → Farben, um Hintergrund-, Text- und Linkfarben zu ändern;
  • Gehen Sie zu Global → Typografie, um Schriftarten und Größen für Überschriften und Fließtext festzulegen.

2. Header und Footer

  • Klicken Sie im Customizer auf Header-Builder oder Footer-Builder;
  • Sie sehen ein visuelles Layout, in dem Sie auf verschiedene Bereiche (Logo, Menü, Social Icons usw.) klicken können, um diese zu bearbeiten;
  • Sie können Elemente auch entfernen oder durch Ziehen neu anordnen.
Hinzufügen von Logo und Favicon
expand arrow

Falls Sie Ihr Logo beim Importieren der Starter-Vorlage nicht hochgeladen haben, können Sie dies jetzt nachholen.

So aktualisieren Sie Ihr Logo:

  1. Gehen Sie zu Header-Builder → Website-Titel & Logo;
  2. Klicken Sie auf Logo auswählen und laden Sie Ihr Bild hoch (vorzugsweise PNG mit transparentem Hintergrund).

So fügen Sie ein Favicon (Symbol im Browser-Tab) hinzu:

  1. Gehen Sie zu Allgemeine Einstellungen → Website-Identität;
  2. Unter Website-Symbol laden Sie ein quadratisches Bild hoch (empfohlen: 512x512 Pixel).
Speichern Ihrer Änderungen
expand arrow

Wenn Sie mit Ihren Anpassungen zufrieden sind, klicken Sie oben im Customizer auf die Schaltfläche Veröffentlichen, um alle Änderungen zu speichern.

question mark

Was ist ein Favicon in WordPress?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 2
some-alt