Wie man den WordPress Theme Customizer wie ein Profi benutzt (Ultimative Anleitung)

Wussten Sie, dass WordPress über einen integrierten Theme-Customizer verfügt, mit dem Sie Änderungen am Design Ihrer Website in Echtzeit vornehmen können?

Während jedes Theme ein gewisses Maß an Unterstützung für die standardmäßigen Customizer-Optionen bietet, enthalten viele Themes zusätzliche Registerkarten und Optionen für den WordPress-Theme-Customizer, sodass Sie Ihr Theme auch ohne Programmierkenntnisse leicht anpassen können.

In diesem Artikel führen wir Sie durch die Standard-Panels und zeigen Ihnen, wie Sie den WordPress-Theme-Customizer wie ein Profi nutzen können.

So greifen Sie auf den WordPress Theme Customizer zu

Der Theme-Customizer ist eine Standardfunktion von WordPress, die zu jeder WordPress-Website gehört.

Sie können darauf zugreifen, indem Sie sich in Ihrem WordPress-Administrationsbereich anmelden und dann in der linken Seitenleiste Ihres WordPress-Administrationsbereichs auf Darstellung “ Anpassen gehen. Dadurch wird die Customizer-Schnittstelle mit Ihrem aktuellen Theme geöffnet.

Sie können die WordPress-Theme-Anpassungsseite auch für alle installierten Themes auf Ihrer Website verwenden, selbst wenn diese nicht aktiv sind.

So können Sie eine Live-Vorschau des Themas sehen und Änderungen vornehmen, bevor Sie es aktivieren.

Dazu müssen Sie auf die Seite Erscheinungsbild “ Themen gehen.

Bewegen Sie nun den Mauszeiger über ein installiertes Theme und klicken Sie auf die Schaltfläche Live-Vorschau, um die WordPress-Theme-Anpassungsseite zu öffnen.

Verwendung des WordPress Theme Customizer

Nachdem Sie den WordPress-Theme-Customizer geöffnet haben, sehen Sie alle Anpassungseinstellungen auf der linken Seite des Bildschirms und die Live-Vorschau Ihrer Website auf der rechten Seite.

Der WordPress-Theme-Customizer wird mit einer Reihe von Standard-Panels geliefert, unabhängig davon, welches Theme Sie verwenden.

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

Hinweis: Erweiterte WordPress-Themes fügen zusätzliche Einstellungsfelder für zusätzliche Anpassungsoptionen hinzu (mehr dazu später).

Werfen wir einen Blick auf die Standardoptionen, die im WordPress-Theme-Customizer verfügbar sind.

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

Das Panel Site Identity im WordPress-Theme-Customizer ermöglicht es Ihnen, den Titel und die Tagline Ihrer Website hinzuzufügen oder zu ändern.

Standardmäßig fügt WordPress „Just Another WordPress Site“ als Tagline für die Website hinzu.

Es wird empfohlen, sie nach der Installation von WordPress auf Ihrer Website zu ändern. Sie können es auch leer lassen, wenn Sie möchten.

Das Site-Identity-Panel im WordPress-Theme-Customizer ermöglicht es Ihnen auch, Ihr Site-Logo hinzuzufügen. Klicken Sie einfach auf die Option “ Logo auswählen „, um das Logo Ihrer Website hochzuladen.

Möchten Sie ein Favicon zu Ihrer Website hinzufügen? Klicken Sie dazu auf die Option Website-Symbol auswählen. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Erstellen und Hinzufügen eines Favicons zu Ihrer Website.

WordPress Theme Customizer: Farben auf Ihrer Website ändern

Die Steuerelemente im Farben-Panel variieren je nach dem von Ihnen verwendeten WordPress-Theme.

Bei Twenty Seventeen können Sie beispielsweise die Farbe des Headertextes und ein Farbschema für Ihre gesamte Website auswählen.

Andere WordPress-Themes bieten möglicherweise verschiedene Farboptionen für Seitenelemente wie Überschriften, Links, Text und den Hintergrund Ihrer Website.

Hinzufügen von Navigationsmenüs im Theme Customizer

Mit dem Bedienfeld Menüs können Sie Navigationsmenüs erstellen und deren Position auf Ihrer Website festlegen.

Auf dieser Registerkarte finden Sie alle vorhandenen WordPress-Menüs, die Sie zuvor erstellt haben. Sie können auf die Schaltfläche „Alle Standorte 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 Speicherort des Menüs auswählen und dann auf Weiter klicken, um fortzufahren.

Um Elemente zu diesem Menü hinzuzufügen, müssen Sie auf die Schaltfläche Elemente hinzufügen klicken, um ein neues Fenster zu öffnen. Sie können nun benutzerdefinierte Links, Seiten, Beiträge, Kategorien und Tags als Menüpunkte hinzufügen.

Um die Reihenfolge der Elemente zu ändern, können Sie auf den Link Neu ordnen klicken und dann die Pfeilsymbole verwenden, um die Menüelemente anzupassen.

Steuerung von Widgets auf Ihrer Website im Theme Customizer

Das Widgets-Panel ermöglicht Ihnen das Hinzufügen und Verwalten der Widgets auf Ihrer Website.

Wenn Sie darauf klicken, werden Ihnen die verschiedenen Stellen angezeigt, an denen Sie Widgets hinzufügen können. Dies hängt von dem von Ihnen verwendeten Thema ab.

Das Twenty Seventeen-Theme bietet beispielsweise 3 Widget-Positionen, während das Twenty Nineteen-Theme nur über eine Position verfügt.

Wenn Sie auf einen dieser Bereiche klicken, werden die Widgets angezeigt, die Sie zuvor an diesem Ort hinzugefügt haben.

Um ein neues Widget hinzuzufügen, müssen Sie auf die Schaltfläche „Add a Widget“ klicken. Dadurch wird ein neues Fenster geöffnet, in dem Sie eine Liste aller verfügbaren Widgets sehen.

Klicken Sie auf die Widgets, die Sie hinzufügen möchten. Sie können auch Änderungen an den neu hinzugefügten Widgets vornehmen und ihre Position anpassen, indem Sie sie nach oben oder unten ziehen.

Homepage-Einstellungsfeld im Theme-Customizer

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

Für geschäftliche Websites bevorzugen die Nutzer jedoch eine benutzerdefinierte Homepage. Damit können Sie eine richtige Landing Page erstellen, auf der Ihre Produkte und Dienstleistungen angezeigt werden.

Um eine benutzerdefinierte Homepage zu verwenden, müssen Sie im Bereich Homepage-Einstellungen das Optionsfeld „Eine statische Seite“ auswählen.

Daraufhin öffnen sich zwei neue Dropdown-Menüs, mit denen Sie eine Seite für Ihre Homepage und eine weitere für die Anzeige Ihrer Blogbeiträge auswählen können.

Falls Sie die Seiten nicht auf Ihrer Website haben, können Sie eine neue Seite erstellen, indem Sie auf den Link „+ Neue Seite hinzufügen“ unterhalb des Dropdown-Menüs klicken. Dadurch wird eine leere Seite mit dem Namen Ihrer Wahl erstellt.

Zusätzliches CSS-Panel zum Hinzufügen von benutzerdefiniertem CSS

Möchten Sie benutzerdefinierten CSS-Code hinzufügen, um Ihre Website zu gestalten? Das können Sie im Bereich “ Zusätzliche 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. Dies erfordert zusätzliche Schritte wie FTP-Zugang zu Ihrem WordPress-Hosting, Änderung von Theme-Dateien usw.

Eine einfachere Lösung für Anfänger ist das Hinzufügen Ihres benutzerdefinierten CSS-Codes zum Panel „Additional CSS“ im WordPress-Theme-Customizer. So können Sie Änderungen an Ihrer Website vornehmen und diese live auf der rechten Seite Ihres Bildschirms sehen.

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

Hinweis: Wenn Sie Ihre Website anpassen möchten, ohne Code zu schreiben, lesen Sie weiter. Wir stellen Ihnen drei anfängerfreundliche Optionen vor, mit denen Sie Ihr Theme leicht anpassen und sogar ein eigenes WordPress-Theme erstellen können.

Andere Theme Customizer Optionen

Einige kostenlose und Premium-Themen bieten mehr Optionen für die Themenanpassung.

Je nach verwendetem Thema können Sie die Schriftart ändern, ein Hintergrundbild hinzufügen, das Layout ändern, Farben modifizieren, beliebige Kopfzeilenbilder hinzufügen und vieles mehr.

Mit Hilfe von Plugins können Sie Ihrem Theme Customizer auch spezielle Funktionen hinzufügen. Zum Beispiel können Sie mit dem Plugin Easy Google Fonts benutzerdefinierte Schriftarten in WordPress hinzufügen.

Vorschau Ihrer Website auf verschiedenen Bildschirmauflösungen

Es ist wichtig, dass jeder Website-Besitzer darauf achtet, dass seine Website mobilfähig ist und auf allen Bildschirmgrößen gut aussieht.

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

Im unteren Bereich des Theme-Anpassungsfensters finden Sie drei Symbole und den Link „Steuerelemente ausblenden“.

Mit diesen Symbolen können Sie Ihre Website auf verschiedenen Bildschirmauflösungen wie Desktop, Tablet und mobilen Geräten testen.

Der Link Steuerelemente ausblenden ist nützlich, um das WordPress-Customizer-Bedienfeld auszublenden, damit Sie Ihre Website im Desktop-Modus richtig anzeigen können.

Veröffentlichen, Speichern oder Planen Ihrer Customizer-Einstellungen

Sobald Sie die notwendigen Änderungen vorgenommen haben, müssen Sie sie auf Ihrer Website anwenden. Andernfalls ist Ihre ganze harte Arbeit umsonst.

Klicken Sie nun auf die Schaltfläche Veröffentlichen, um die Änderungen zu übernehmen. Sobald Sie fertig sind, können Sie auf die Schaltfläche „Schließen“ in der oberen linken Ecke des Bildschirms klicken, um den Theme-Anpasser zu verlassen.

Und wenn Sie mehr Zeit brauchen, um Ihr neues Design fertig zu stellen? In diesem Fall können Sie es als Entwurf speichern und sogar Ihr neues Design mit jemandem teilen, ohne ihm Zugang zu Ihrem Verwaltungsbereich zu geben.

Klicken Sie dazu auf das Zahnradsymbol direkt neben der Schaltfläche Veröffentlichen. Dadurch wird das Bedienfeld „Aktion“ geöffnet.

Hier finden Sie drei Optionen: Veröffentlichen, Entwurf speichern und Zeitplan.

Wählen Sie das Optionsfeld Entwurf speichern im Bedienfeld Aktion und klicken Sie dann auf die Schaltfläche Entwurf speichern, um Ihre Änderungen zu speichern.

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

Mit der Option Zeitplan hingegen können Sie Ihre Änderungen zu einem bestimmten Datum und einer bestimmten Uhrzeit veröffentlichen. Mit dieser Option können Sie Ihre Themenänderungen so planen, dass sie zu einem Zeitpunkt veröffentlicht werden, zu dem Sie am wenigsten Traffic erhalten.

Wenn Sie schließlich die unveröffentlichten Änderungen zurücksetzen möchten, können Sie auf den Link Änderungen verwerfen im Bedienfeld Aktion klicken.

Vorschau verschiedener Themes ohne Live-Schaltung

Es kommt vor, dass Sie testen möchten, wie ein neues Design auf Ihrer Website aussehen würde. Sie möchten es jedoch nicht auf Ihrer Live-Website aktivieren.

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

Im Customizer-Panel finden Sie den Namen Ihres aktiven Themas und die Schaltfläche Ändern.

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

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

Sie können auch eine Vorschau der Themes aus dem WordPress-Themes-Repository anzeigen. Dazu müssen Sie das Kontrollkästchen „WordPress.org-Themes“ im linken Bereich aktivieren.

Hier werden Themes aus dem WordPress.org-Verzeichnis angezeigt. Sie können auf die Schaltfläche „Installieren & Vorschau“ klicken, um das Theme zu prüfen, das Ihnen gefällt.

Sie können die Themen auch filtern, indem Sie auf die Schaltfläche Themen filtern klicken, die sich in der oberen rechten Ecke Ihres Bildschirms befindet.

Hinweis: Wir empfehlen die Verwendung einer WordPress-Staging-Website, um neue Themes zu testen, anstatt den Customizer auf einer Live-Site zu verwenden.

Theme-Anpassungseinstellungen importieren oder exportieren

Wussten Sie, dass Sie Ihre Theme-Anpassungseinstellungen importieren und exportieren können?

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

Detaillierte Anweisungen finden Sie in unserer Anleitung zum Importieren und Exportieren von Theme-Anpassungseinstellungen in WordPress.

WordPress Theme Customizer Alternativen

Mit dem WordPress Customizer können Sie zwar Änderungen an Ihrer Website vornehmen, aber die Anzahl der Steuerelemente hängt von dem von Ihnen verwendeten Theme ab.

Was, wenn Ihnen Ihr Theme gefällt, Sie sich aber zusätzliche Anpassungsmöglichkeiten wünschen?

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

SeedProd

SeedProd ist der beste Drag-and-Drop-Website-Builder für WordPress. Mit SeedProd können Sie ganz einfach benutzerdefinierte WordPress-Themes und Seitenlayouts erstellen, ohne Code zu bearbeiten.

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

Die Anpassung ist mit vorgefertigten Blöcken wie Optin-Formularen, sozialen Profilen, Schaltflächen, Countdown-Timern, Kontaktformularen und mehr ganz einfach.

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

Thrive Theme Builder

Thrive Theme Builder ist ein weiteres beliebtes Drag-and-Drop-Theme-Builder-Plugin für WordPress. Mit ihm können Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen, ohne dass Sie programmieren müssen.

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

Sie können jeden Teil Ihres Themas bearbeiten, einschließlich der Kopfzeile, der Fußzeile, der Blogbeiträge, der Kategorieseiten und mehr, einfach durch Zeigen und Klicken.

Außerdem gibt es mehr als 100 Design- und Site-Building-Elemente, die Sie per Drag-and-Drop schnell zu Ihrem Thema hinzufügen können.

CSS Held

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

Möchten Sie die Login-Seite Ihrer WordPress-Website anpassen? Mit CSS Hero können Sie das innerhalb weniger Minuten tun.

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.

Biber-Bauer

Beaver Builder ist ein weiterer der Top-Seitenersteller für WordPress. Mit ihm können Sie atemberaubende Seiten für Ihre Website mithilfe einer Drag-and-Drop-Oberfläche erstellen.

Das Beste daran ist, dass Beaver Builder mit fast jedem WordPress-Theme funktioniert. So können Sie es mit Ihrem aktuellen Theme verwenden.

Beaver Builder unterstützt die Verwendung von Shortcodes und Widgets. Außerdem bietet er verschiedene Arten von Modulen, mit denen Sie Ihre Website einfach gestalten können. Ausführliche Anweisungen finden Sie in unserem Leitfaden zum Erstellen benutzerdefinierter Layouts in WordPress.

Wir hoffen, dass diese Anleitung Ihnen geholfen hat, den WordPress Theme Customizer wie ein Profi zu nutzen. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Erstellen einer benutzerdefinierten Seite in WordPress oder für unsere Expertenauswahl der besten WordPress-Plugins und -Tools für Ihre Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.