So verwenden Sie den WordPress Theme Customizer wie ein Profi (ultimativer Leitfaden)

Haben Sie jemals den WordPress Theme Customizer geöffnet, all die Optionen angesehen und sich völlig überfordert gefühlt?

Es gibt Dutzende von Einstellungen für Farben, Schriftarten und Layouts, was überwältigend sein kann, wenn Sie nur versuchen, Ihre Website gut aussehen zu lassen. Sie nehmen ein paar Änderungen vor, aber irgendwie sieht Ihre Website schlechter aus als zu Beginn.

Wir haben viele Anfänger gesehen, die auf dasselbe Problem stoßen, und die gute Nachricht ist, dass es einfacher zu beheben ist, als Sie vielleicht denken.

In diesem Leitfaden führen wir Sie Schritt für Schritt durch die Verwendung des WordPress Theme Customizers, damit Sie eine polierte, benutzerfreundliche Website ohne Verwirrung erstellen können. Wir geben Ihnen auch einige Tipps, die Ihnen Stunden des Ausprobierens ersparen. 🙌

So greifen Sie auf den WordPress Theme Customizer zu

Der Theme Customizer ist eine Standardfunktion von WordPress, mit der Sie das Erscheinungsbild Ihres Themes steuern können. Er ist in allen klassischen Themes enthalten und verfügt über ein Einstellungsfeld für websiteweite Steuerelemente wie Typografie, Header-Design und mehr.

Sie können darauf zugreifen, indem Sie sich in Ihrem WordPress-Adminbereich anmelden. Gehen Sie dann im linken Seitenmenü Ihres Admin-Panels zu Darstellung » Anpassen.

Dies öffnet die Customizer-Oberfläche mit Ihrem aktuellen Theme.

Sie können den WordPress-Theme-Customizer auch für alle installierten Themes Ihrer Website verwenden, auch wenn diese inaktiv sind. Diese Funktion ermöglicht es Ihnen, eine Live-Vorschau des Themes anzuzeigen und Änderungen vorzunehmen, bevor Sie es aktivieren.

Um das zu tun, müssen Sie zur Seite Darstellung » Themes gehen. Bewegen Sie dann den Mauszeiger über ein beliebiges installiertes Theme und klicken Sie auf die Schaltfläche „Live-Vorschau“, um die WordPress-Theme-Customizer-Seite zu öffnen.

Verwendung des WordPress Theme Customizers

Nach dem Öffnen des WordPress Theme Customizers sehen Sie alle Anpassungseinstellungen auf der linken Seite Ihres Bildschirms. Die Live-Vorschau Ihrer Website wird auf der rechten Seite angezeigt.

Der WordPress Theme Customizer wird unabhängig von Ihrem Theme mit einer Reihe von Standard-Panels geliefert.

Sie müssen auf die einzelnen Panels klicken, um Änderungen daran vorzunehmen. Sie können auch auf eines der blauen Bleistiftsymbole auf der rechten Seite Ihres Bildschirms klicken, um die Einstellungen für dieses bestimmte Element zu öffnen.

In den folgenden Abschnitten zeigen wir Ihnen die Standardoptionen, die im WordPress Theme Customizer verfügbar sind, und geben Ihnen einige Tipps und Alternativen zur Anpassung.

Wenn Sie an einem bestimmten Thema interessiert sind, können Sie auf den Link klicken, um im Artikel vorzuspringen:

• Website-Identitäts-Bereich: Titel, Logo und Favicon hinzufügen
• WordPress Theme Customizer: Farben Ihrer Website ändern
• Navigationsmenüs im Theme Customizer hinzufügen
• Widgets auf Ihrer Website im Theme Customizer steuern
• Homepage-Einstellungen-Bereich im Theme Customizer
• Zusätzlicher CSS-Bereich zum Hinzufügen von benutzerdefiniertem CSS
• Weitere Theme-Customizer-Optionen
• Vorschau Ihrer Website in verschiedenen Bildschirmauflösungen
• Customizer-Einstellungen veröffentlichen, speichern oder planen
• Verschiedene Themes in der Vorschau anzeigen, ohne live zu gehen
• Importieren oder Exportieren von Theme-Customizer-Einstellungen
• Bonus Tip: WordPress Theme Customizer Alternatives
• FAQs zur Verwendung des WordPress Theme Customizers
• Weiter erkunden: Gestalten und anpassen wie ein Profi

Bereit? Legen wir los.

Website-Identitäts-Bereich: Titel, Logo und Favicon hinzufügen

Das Panel 'Website-Identität' im WordPress-Theme-Customizer ermöglicht es Ihnen, den Titel und den Slogan Ihrer Website hinzuzufügen oder zu ändern.

Standardmäßig fügt WordPress 'Just Another WordPress Site' als Slogan hinzu. Wir empfehlen, diesen nach der Installation von WordPress auf Ihrer Website zu ändern, aber Sie können ihn auch leer lassen, wenn Sie möchten.

Das Bedienfeld 'Site-Identität' im WordPress Theme Customizer ermöglicht es Ihnen auch, Ihr Website-Logo hinzuzufügen. Klicken Sie einfach auf die Option Logo auswählen, um Ihr Website-Logo hochzuladen.

Möchten Sie Ihrer Website ein Favicon hinzufügen? Sie können dies tun, indem Sie auf die Option 'Website-Symbol auswählen' klicken.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Erstellung und Hinzufügung eines Favicons zu Ihrer Website.

WordPress Theme Customizer: Farben Ihrer Website ändern

Die Steuerelemente im Bereich 'Farben' variieren hauptsächlich je nach dem von Ihnen verwendeten WordPress-Theme.

Zum Beispiel ermöglicht das Sydney Theme die Auswahl eines Farbschemas für Ihre gesamte Website in den globalen Farboptionen. Es ermöglicht Ihnen auch, den Hintergrund, Text, Links, Überschriften, Formularfelder und die Seitenleiste zu ändern.

Andere WordPress-Themes können unterschiedliche Farboptionen haben, wie z. B. separate Steuerelemente für Kopfzeilenfarben, Navigationsmenüs, Schaltflächen oder bestimmte Bereiche der Website.

Navigationsmenüs im Theme Customizer hinzufügen

Das Bedienfeld 'Menüs' ermöglicht es Ihnen, Navigationsmenüs zu erstellen und deren Position auf Ihrer Website zu steuern.

Auf dieser Registerkarte finden Sie alle vorhandenen WordPress-Menüs, die Sie zuvor erstellt haben. Sie können auf die Schaltfläche 'Alle Positionen anzeigen' klicken, um die verfügbaren Menüpositionen zu überprüfen, die Ihr Theme unterstützt.

Um ein neues Menü zu erstellen, müssen Sie auf die Schaltfläche „Neues Menü erstellen“ klicken.

Danach müssen Sie Ihrem Menü einen Namen geben, damit Sie es später leicht verwalten können. Sie können auch den Menüstandort auswählen und auf 'Weiter' klicken, um fortzufahren.

Um Elemente zu diesem Menü hinzuzufügen, müssen Sie zunächst auf die Schaltfläche „Elemente hinzufügen“ klicken. Dadurch wird ein neues Bedienfeld geöffnet.

Sie können jetzt benutzerdefinierte Links, Seiten, Beiträge, Kategorien und Tags als Menüpunkte zu den entsprechenden Feldern hinzufügen.

Um die Elemente neu anzuordnen, können Sie auf den Link „Neu anordnen“ klicken und dann die Pfeilsymbole verwenden, um die Menüpunkte anzupassen.

Widgets auf Ihrer Website im Theme Customizer steuern

Der Bereich 'Widgets' ermöglicht es Ihnen, die Widgets auf Ihrer Website hinzuzufügen und zu verwalten. Wenn Sie darauf klicken, sehen Sie die verschiedenen Positionen, an denen Sie Widgets hinzufügen können.

Und auch hier gilt: Dies hängt vom verwendeten WordPress-Theme ab.

Zum Beispiel bietet das Theme Sydney fünf Widget-Bereiche, während das Twenty Nineteen Theme nur einen Bereich hat.

Wenn Sie auf eines davon klicken, sehen Sie die Widgets, die Sie zuvor an dieser Stelle hinzugefügt haben.

Um ein neues Widget hinzuzufügen, können Sie auf die Schaltfläche 'Widget hinzufügen' klicken. Dies öffnet ein neues Fenster, in dem Sie eine Liste aller verfügbaren Widgets sehen.

Dann müssen Sie auf dasjenige klicken, das Sie hinzufügen möchten. Sie können auch Änderungen an den neu hinzugefügten Widgets vornehmen und deren Position durch Ziehen nach oben oder unten anpassen.

Homepage-Einstellungen-Bereich im Theme Customizer

Standardmäßig zeigt WordPress die neuesten Blogbeiträge auf Ihrer Homepage an.

Die meisten Benutzer bevorzugen jedoch die Verwendung einer benutzerdefinierten Homepage für Geschäftswebsites. Dies ermöglicht Ihnen, eine richtige Landingpage zu haben, die Ihre Produkte und Dienstleistungen anzeigt.

Um eine benutzerdefinierte Homepage zu verwenden, wählen Sie die Optionsschaltfläche 'Eine statische Seite' im Bereich 'Homepage-Einstellungen'.

Dies eröffnet zwei neue Dropdown-Menüs, die Sie verwenden können, um eine Seite für Ihre Homepage und eine weitere für die Anzeige Ihrer Blogbeiträge auszuwählen.

Wenn Sie die Seiten auf Ihrer Website nicht haben, können Sie eine neue erstellen, indem Sie auf den Link „+ Neue Seite hinzufügen“ unter dem Dropdown-Menü klicken. Dadurch wird eine leere Seite mit dem von Ihnen gewählten Namen erstellt.

Zusätzlicher CSS-Bereich zum Hinzufügen von benutzerdefiniertem CSS

Möchten Sie benutzerdefinierten CSS-Code hinzufügen, um Ihre Website zu gestalten? Sie können dies im Bereich 'Zusätzliches CSS' tun.

Fortgeschrittene und erfahrene WordPress-Benutzer passen ihre Websites oft an, indem sie CSS-Code direkt in die style.css-Datei ihres Themes einfügen. Diese Methode erfordert zusätzliche Schritte wie FTP-Zugriff auf Ihr WordPress-Hosting, das Ändern von Theme-Dateien usw.

Eine einfachere Lösung für Anfänger ist, Ihren benutzerdefinierten CSS-Code zum Bereich Zusätzliches CSS im WordPress-Theme-Customizer hinzuzufügen. Dies ermöglicht es Ihnen, Änderungen an Ihrer Website vorzunehmen und sie live auf der rechten Seite Ihres Bildschirms zu sehen.

Wenn Sie mit dem Schreiben von CSS-Code beginnen, schlägt WordPress automatisch Attribute basierend auf den von Ihnen eingegebenen Buchstaben vor. Es werden auch Fehlermeldungen angezeigt, wenn Sie keine korrekte CSS-Anweisung geschrieben haben.

Weitere Theme-Customizer-Optionen

Einige kostenlose und Premium-Themes bieten mehr Theme-Customizer-Optionen.

Abhängig von dem Theme, das Sie verwenden, können Sie möglicherweise den Schriftstil ändern, ein Hintergrundbild hinzufügen, das Layout ändern, Farben modifizieren, zufällige Header-Bilder hinzufügen und vieles mehr.

Sie können Ihrem Theme Customizer auch mit Hilfe von Plugins spezifische Funktionen hinzufügen.

Sie können beispielsweise benutzerdefinierte Schriftarten in WordPress hinzufügen mit dem Easy Google Fonts Plugin.

Vorschau Ihrer Website in verschiedenen Bildschirmauflösungen

Es ist für jeden Website-Besitzer wichtig sicherzustellen, dass seine Website responsiv für Mobilgeräte ist und auf allen Bildschirmgrößen gut aussieht.

Dank des WordPress Theme Customizers können Sie ganz einfach überprüfen, wie Ihre Website auf verschiedenen Bildschirmgrößen aussieht.

Am unteren Rand des Theme Customizer-Bedienfelds finden Sie drei Symbole und den Link „Steuerelemente ausblenden“.

Diese Icons ermöglichen es Ihnen, Ihre Website auf verschiedenen Bildschirmauflösungen zu testen, wie z. B. Desktop, Tablet und Mobilgeräte.

Der Link „Steuerelemente ausblenden“ ist nützlich, um das WordPress Customizer-Panel auszublenden, damit Sie Ihre Website auf einem Desktop richtig anzeigen können.

Customizer-Einstellungen veröffentlichen, speichern oder planen

Sobald Sie die notwendigen Änderungen vorgenommen haben, müssen Sie sie auf Ihre Website anwenden. Andernfalls gehen all Ihre Bemühungen verloren.

Klicken Sie auf die Schaltfläche „Veröffentlichen“, um die Änderungen zu übernehmen. Sobald der Vorgang abgeschlossen ist, können Sie auf die Schließen-Schaltfläche in der oberen linken Ecke Ihres Bildschirms klicken, um den Theme Customizer zu verlassen.

Was ist, wenn Sie mehr Zeit benötigen, um Ihr neues WordPress-Design zu finalisieren? In diesem Fall können Sie Ihr neues Design als Entwurf speichern und es sogar mit jemandem teilen, ohne ihm Zugriff auf Ihren Admin-Bereich zu gewähren.

Dazu müssen Sie auf das Zahnradsymbol direkt neben der Schaltfläche „Veröffentlichen“ klicken. Dadurch wird das Aktionsfenster geöffnet.

Hier finden Sie drei Optionen: „Veröffentlichen“, „Entwurf speichern“ und „Planen“.

Wählen Sie einfach die Radio-Schaltfläche „Entwurf speichern“ im Panel „Aktion“ aus. Klicken Sie dann auf die Schaltfläche „Entwurf speichern“, um Ihre Änderungen zu speichern.

Sie können nun den Vorschau-Link kopieren und ihn mit anderen teilen, um Feedback zu erhalten.

Die Option „Zeitplan“ ermöglicht es Ihnen, Ihre Änderungen zu einem bestimmten Datum und einer bestimmten Uhrzeit zu veröffentlichen. Sie können beispielsweise Ihre Theme-Änderungen so planen, dass sie zu einer Zeit live gehen, zu der Sie den geringsten Traffic haben.

Schließlich, wenn Sie die unveröffentlichten Änderungen zurücksetzen möchten, können Sie auf den Link 'Änderungen verwerfen' im Aktionsbereich klicken.

Verschiedene Themes in der Vorschau anzeigen, ohne live zu gehen

Es gibt Zeiten, in denen Sie überprüfen möchten, wie ein neues Theme auf Ihrer Website aussehen würde. Sie möchten sie jedoch nicht auf Ihrer Live-Website aktivieren.

In diesem Fall können Sie den WordPress Customizer öffnen, um neue Themes zu testen, ohne sie live zu schalten.

Im Customizer-Bedienfeld finden Sie den Namen Ihres aktiven Themes und die Schaltfläche 'Ändern'.

Wenn Sie auf diese Schaltfläche klicken, zeigt WordPress alle Ihre installierten Themes auf der rechten Seite der Seite an.

Um ein bestimmtes Theme zu überprüfen, müssen Sie auf die Schaltfläche „Live-Vorschau“ klicken.

Sie können Themes auch aus dem WordPress Themes Repository in der Vorschau anzeigen.

Um dies zu tun, müssen Sie das Kontrollkästchen 'WordPress.org Themes' im linken Bereich auswählen. Dies zeigt Themes aus dem WordPress.org-Verzeichnis an.

Klicken Sie einfach auf die Schaltfläche „Installieren & Vorschau“, um das gewünschte Theme zu überprüfen.

Sie können die Themes auch filtern, indem Sie oben rechts auf dem Bildschirm auf die Schaltfläche 'Themes filtern' klicken.

Importieren oder Exportieren von Theme-Customizer-Einstellungen

Wussten Sie schon, dass Sie Ihre Theme Customizer-Einstellungen importieren und exportieren können?

Dies ist äußerst hilfreich, wenn Sie Änderungen an Ihrem Theme auf Ihrem lokalen Server oder einer Staging-Site vornehmen. Anstatt die Einstellungen manuell auf Ihre Live-Website zu kopieren, können Sie einfach die Theme-Customizer-Einstellungen exportieren, um Zeit zu sparen.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Importieren und Exportieren von Theme-Customizer-Einstellungen in WordPress.

Bonustipp: Alternativen zum WordPress Theme Customizer

Obwohl der WordPress Customizer es Ihnen ermöglicht, Änderungen an Ihrer Website vorzunehmen, variiert die Anzahl der Steuerelemente je nach Theme, das Sie verwenden.

Was ist, wenn Ihnen Ihr Theme gefällt, Sie sich aber zusätzliche Anpassungsoptionen wünschen?

In diesem Fall ist die beste Lösung die Verwendung eines der drei Anpassungs-Plugins, die neben dem WordPress Theme Customizer funktionieren.

SeedProd

SeedProd ist der beste Drag-and-Drop-Page-Builder für WordPress. Sie können SeedProd verwenden, um benutzerdefinierte WordPress-Themes und Seitenlayouts einfach zu erstellen, ohne Code bearbeiten zu müssen.

Einige unserer Partner-Marken haben SeedProd verwendet, um ihre Websites zu erstellen. Neugierig auf unsere Erfahrungen? Tauchen Sie ein in unseren detaillierten SeedProd-Testbericht für weitere Einblicke.

SeedProd bietet Hunderte von vorgefertigten Seitenlayouts für Landing Pages, Verkaufsseiten, Webinar-Registrierungsseiten, Coming Soon-Seiten, Wartungsmodus-Seiten und vieles mehr.

Die Anpassung ist einfach mit vorgefertigten Blöcken wie Opt-in-Formularen, Social-Profilen, Schaltflächen, Countdown-Timern, Kontaktformularen und mehr.

Sie können auch Farbschemata festlegen, Schriftkombinationen speichern und Seiten und Seitenelemente wiederverwenden, damit Sie sie nicht erneut erstellen müssen.

Thrive Theme Builder

Thrive Theme Builder ist ein weiteres exzellentes Drag-and-Drop-Theme-Builder-Plugin für WordPress. Sie können es verwenden, um ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen, ganz ohne Code.

Es wird mit vier verschiedenen vorgefertigten Theme-Vorlagen geliefert, damit Sie schnell loslegen können. Jede Theme-Vorlage enthält eine Vielzahl von vorgefertigten Seiten, die Sie Ihrer Website hinzufügen können.

Eine detaillierte Aufschlüsselung finden Sie in unserem vollständigen Testbericht zur Thrive Themes Suite.

Mit diesem Plugin können Sie jeden Teil Ihres Themes bearbeiten, einschließlich Header, Footer, Blogbeiträge, Kategorieseiten und mehr, einfach durch Zeigen und Klicken.

Außerdem gibt es über 100 Design- und Website-Elemente, die Sie schnell zu Ihrem Theme hinzufügen können, indem Sie sie per Drag & Drop an Ort und Stelle ziehen.

CSS Hero

CSS Hero ist ein WordPress-Plugin, mit dem Sie Ihre Website anpassen können, ohne eine einzige Zeile CSS-Code schreiben zu müssen. Sie haben die Freiheit, jedes Element Ihrer Website problemlos zu gestalten.

Möchten Sie die Anmeldeseite Ihrer WordPress-Website anpassen? CSS Hero ermöglicht Ihnen dies in wenigen Minuten.

Sie können die Änderungen auch im Frontend bearbeiten und in der Vorschau anzeigen, um sicherzustellen, dass Ihr Design auf jedem Gerät perfekt aussieht.

Beaver Builder

Beaver Builder ist ein weiterer der Top-Seitenersteller für WordPress. Er ermöglicht es Ihnen, mit einer Drag-and-Drop-Oberfläche beeindruckende Seiten für Ihre Website zu erstellen.

Das Beste daran ist, dass Beaver Builder mit fast jedem WordPress-Theme funktioniert. Das ermöglicht Ihnen die Verwendung mit Ihrem aktuellen Theme. Wir haben es ausgiebig getestet und Sie können alles in unserem vollständigen Beaver Builder Testbericht erfahren.

Beaver Builder unterstützt die Verwendung von Shortcodes und Widgets. Es bietet auch verschiedene Arten von Modulen, mit denen Sie Ihre Website einfach gestalten können. Sie können unseren Leitfaden lesen, wie Sie benutzerdefinierte Layouts in WordPress erstellen für detaillierte Anweisungen.

FAQs zur Verwendung des WordPress Theme Customizers

Haben Sie noch Fragen dazu, wie Sie das Beste aus dem Theme Customizer herausholen können? Hier sind einige häufig gestellte Fragen, die wir von WordPress-Benutzern hören.

Kann ich jedes Theme mit dem WordPress Theme Customizer anpassen?

Nicht jedes Theme. Die meisten WordPress Themes unterstützen immer noch den Theme Customizer und bieten verschiedene Designoptionen. Blockbasierte Themes, die Full Site Editing (FSE) verwenden, setzen jedoch stattdessen auf den Site Editor, und der Customizer wird in diesen Themes nicht angezeigt.

Werden durch den Wechsel des Themes meine Customizer-Einstellungen gelöscht?

Ja, das kann es. Customizer-Einstellungen sind normalerweise themenspezifisch, daher kann der Wechsel zu einem neuen Theme diese Änderungen zurücksetzen oder entfernen. Um sicherzugehen, notieren Sie sich Ihre Einstellungen oder verwenden Sie das Import-/Export-Tool, falls Ihr Theme dies unterstützt.

Was soll ich tun, wenn ich den Theme-Customizer in WordPress nicht finden kann?

Wenn Sie die Option Appearance » Customize in Ihrem Dashboard nicht sehen, verwenden Sie möglicherweise ein blockbasiertes (Full Site Editing) Theme. Diese Themes verwenden den Site Editor, den Sie unter Appearance » Editor finden. Weitere Informationen finden Sie in unserem Leitfaden zur Behebung des fehlenden Theme Customizers im WordPress-Dashboard.

Wie kann ich meinem Theme zusätzliche Anpassungsoptionen hinzufügen?

Wenn Ihr aktuelles Theme zu eingeschränkt ist, können Sie versuchen, ein Child-Theme zu erstellen oder Page-Builder-Plugins wie SeedProd, Thrive Theme Builder oder CSS Hero zu verwenden. Diese Tools bieten mehr Designkontrolle, ohne Code anfassen zu müssen.

Ist es sicher, Änderungen im Theme Customizer auf einer Live-Website vorzunehmen?

Ja, es ist sicher, Änderungen im Theme Customizer vorzunehmen, da diese erst live geschaltet werden, wenn Sie auf 'Veröffentlichen' klicken. Wenn Sie jedoch größere Bearbeitungen planen, ist es am besten, diese zuerst in einer Staging-Umgebung zu testen, um Ihre Live-Site nicht zu beeinträchtigen.

Weiter erkunden: Gestalten und anpassen wie ein Profi

Wir hoffen, dieser Leitfaden hat Ihnen geholfen, den WordPress Theme Customizer wie ein Profi zu nutzen.

Wenn Sie dies hilfreich fanden, dann möchten Sie vielleicht auch unsere anderen Anleitungen zu folgenden Themen sehen:

• So passen Sie Ihr WordPress-Theme an
• So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu
• Hinzufügen von Nächste/Vorherige Links in WordPress 
• Möglichkeiten, eine mobilfreundliche WordPress-Website zu erstellen
• So finden und übersetzen Sie ein für die Übersetzung bereites WordPress-Theme
• Kostenlose vs. Premium WordPress-Themes
• Die besten einfachen WordPress-Themes, die Sie ausprobieren sollten
• So testen Sie Ihr WordPress-Theme anhand der neuesten Standards

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.