So verwenden Sie den WordPress-Theme-Customizer wie ein Profi (ultimative Anleitung)

Wussten Sie, dass WordPress mit einem integrierten Theme-Customizer ausgestattet ist, 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 Standard-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.

Wie man auf den WordPress-Theme-Customizer zugreift

Der Theme-Customizer ist eine Standardfunktion von WordPress und gehört zu jeder WordPress-Website. Sie können darauf zugreifen, indem Sie sich in Ihren WordPress-Administrationsbereich einloggen und dann in der linken Seitenleiste Ihres WordPress-Administrationspanels auf " Erscheinungsbild " Anpassen " gehen. Dadurch wird die Customizer-Oberfläche mit Ihrem aktuellen Theme geöffnet.

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

So können Sie eine Live-Vorschau dieses Themes sehen und Änderungen vornehmen, bevor Sie es aktivieren. Dazu müssen Sie auf die Seite Erscheinungsbild " 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-Anpassungsseite zu öffnen

So verwenden Sie den 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 vom verwendeten Theme.

Sie müssen auf die einzelnen Bereiche klicken, um Änderungen daran vorzunehmen. Sie können auch auf eines der blauen Stiftsymbole auf der rechten Seite des 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.

Site-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 Website-Tagline hinzu. Es wird empfohlen, dies nach der Installation von WordPress auf Ihrer Website zu ändern. Sie können ihn auch leer lassen, wenn Sie möchten.

Im Bedienfeld Site Identity im WordPress-Theme-Customizer können Sie auch Ihr Site-Logo hinzufü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? Das können Sie tun, indem Sie auf die Option Site-Icon auswählen klicken

Detaillierte Anweisungen finden Sie in unserer Anleitung zum Erstellen und Hinzufügen eines Favicons zu Ihrer Website.

WordPress Theme Customizer: Farben auf Ihrer Website ändern

Die Steuerelemente im Bedienfeld " Farben" variieren meist je nach dem von Ihnen verwendeten WordPress-Theme.

Beim Theme "Twenty Seventeen" können Sie beispielsweise die Textfarbe für die Kopfzeile und ein Farbschema für Ihre gesamte Website auswählen.

Andere WordPress-Themes bieten möglicherweise verschiedene Farboptionen für Website-Elemente wie: Überschriften, Links, Textkörper, Hintergrund Ihrer Website usw.

Hinzufügen von Navigationsmenüs im Theme-Customizer

Im Bedienfeld " Menüs" können Sie Navigationsmenüs erstellen und deren Position auf Ihrer Website steuern.

In dieser Registerkarte finden Sie alle bestehenden 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 Panel zu öffnen. Sie können nun benutzerdefinierte Links, Seiten, Beiträge, Kategorien und Tags als Menüelemente hinzufügen.

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

Widgets auf Ihrer Website im Theme-Customizer steuern

Im Widgets-Bedienfeld können Sie die Widgets auf Ihrer Website hinzufügen und verwalten.

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 Theme ab. Zum Beispiel bietet das Twenty Seventeen-Theme 3 Widgets, während das Twenty Nineteen-Theme nur einen Platz hat.

Wenn Sie auf einen dieser Orte klicken, sehen Sie die Widgets, die Sie zuvor zu 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 Panel geöffnet, in dem Sie eine Liste aller verfügbaren Widgets sehen.

Klicken Sie auf das Widget, das 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 Business-Websites bevorzugen Benutzer jedoch eine benutzerdefinierte Homepage. Damit können Sie eine richtige Landing Page haben, die Ihre Produkte und Dienstleistungen anzeigt. Um eine benutzerdefinierte Homepage zu verwenden, müssen Sie das Optionsfeld "Eine statische Seite" im Bedienfeld " Homepage-Einstellungen " auswählen

Dadurch ö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 von Ihnen gewählten Namen 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ätzliches CSS" tun

Fortgeschrittene und erfahrene WordPress-Benutzer passen ihre Website 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, das Ändern 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.

Dies ermöglicht Ihnen, Änderungen an Ihrer Website vorzunehmen und diese live auf der rechten Seite Ihres Bildschirms zu sehen.

Wenn Sie anfangen, CSS-Code zu schreiben, wird WordPress Ihnen automatisch Attribute vorschlagen, die auf den Buchstaben basieren, die Sie eingeben.

Es werden auch Fehlermeldungen angezeigt, wenn Sie keine korrekte CSS-Anweisung geschrieben haben. Hinweis: Wenn Sie Ihre Website anpassen möchten, ohne einen Code zu schreiben, lesen Sie weiter. Wir werden Ihnen zwei einsteigerfreundliche Optionen vorstellen, mit denen Sie Ihr Theme leicht anpassen und sogar ein eigenes WordPress-Theme erstellen können.

Andere Theme-Customizer-Optionen

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

Je nach verwendetem Theme können Sie den Schriftstil ändern, ein Hintergrundbild hinzufügen, das Layout ändern, Farben modifizieren, zufällige Header-Bilder hinzufügen und vieles mehr. Mit Hilfe von Plugins können Sie dem 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 für jeden Website-Besitzer wichtig, sicherzustellen, dass seine Website mobile responsive 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. Unten im Bedienfeld des Theme-Anpassers finden Sie drei Symbole und den Link "Bedienelemente 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 Ihre Website anwenden.

Andernfalls ist Ihre ganze harte Arbeit verloren. Klicken Sie auf die Schaltfläche Veröffentlichen, um die Änderungen zu übernehmen

Wenn Sie fertig sind, können Sie auf die Schaltfläche "Schließen" in der oberen linken Ecke des Bildschirms klicken, um den Theme-Customizer zu verlassen.

Was ist, 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 Zugriff auf Ihren Admin-Bereich zu geben. Dazu müssen Sie auf das Zahnradsymbol rechts neben der Schaltfläche Veröffentlichen klicken. Dadurch wird das Bedienfeld "Aktion" geöffnet.

Hier finden Sie drei Optionen: Veröffentlichen, Entwurf speichern und Planen. Sie müssen das Optionsfeld " Entwurf speichern" im Bedienfeld "Aktion" auswählen und dann auf die Schaltfläche " Entwurf speichern" klicken, um Ihre Änderungen zu speichern

Sie können nun den Vorschau-Link kopieren und ihn mit anderen teilen, um Feedback zu erhalten. Andererseits können Sie mit der Option Planen Ihre Änderungen zu einem bestimmten Datum und einer bestimmten Uhrzeit veröffentlichen Sie können diese Option verwenden, um Ihre Themenänderungen so zu planen, dass sie zu einem Zeitpunkt live gehen, zu dem Sie den geringsten 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 gibt Zeiten, in denen Sie prü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 live zu gehen. 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 an. Um ein bestimmtes Theme zu prüfen, müssen Sie auf die Schaltfläche Live-Vorschau klicken

Sie können auch eine Vorschau von Themes aus dem WordPress-Themes-Repository anzeigen.

Dazu müssen Sie im linken Bedienfeld das Kontrollkästchen "WordPress.org-Themes" aktivieren. Dadurch 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 Themes auch filtern, indem Sie auf die Schaltfläche " Themes filtern" in der oberen rechten Ecke des Bildschirms klicken. Hinweis: Wir empfehlen, eine WordPress-Staging-Website zu verwenden, um neue Themes zu testen, anstatt den Customizer auf einer Live-Site zu verwenden.

Importieren oder Exportieren von Theme-Customizer-Einstellungen

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

Dies ist extrem 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 die Theme-Customizer-Einstellungen einfach exportieren, um Zeit zu sparen. Eine detaillierte Anleitung finden Sie in unserer Anleitung zum Importieren und Exportieren von Theme-Customizer-Einstellungen in WordPress.

WordPress-Theme-Customizer-Alternativen

Obwohl Sie mit dem WordPress Customizer Änderungen an Ihrer Website vornehmen können, variiert die Anzahl der Steuerelemente je nach verwendetem Theme.

Was ist, wenn Sie Ihr Theme mögen, aber sich wünschen, dass es zusätzliche Anpassungsoptionen hat? In diesem Fall ist die beste Lösung, eines der beiden Anpassungs-Plugins zu verwenden, die neben dem WordPress-Theme-Customizer funktionieren.

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-Site 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 ansehen, um sicherzustellen, dass Ihr Design auf jedem Gerät perfekt aussieht.

Beaver Builder

Beaver Builder ist eines der besten WordPress-Seitenerstellungs-Plugins auf dem Markt.

Es ermöglicht Ihnen, atemberaubende Seiten für Ihre Website mit einer Drag-and-Drop-Oberfläche zu erstellen. Der beste Teil ist, dass Beaver Builder mit fast jedem WordPress-Theme funktioniert. Dies ermöglicht Ihnen, es mit Ihrem aktuellen Theme zu verwenden.

Beaver Builder unterstützt die Verwendung von Shortcodes und Widgets. Es bietet auch verschiedene Arten von Modulen, die Sie verwenden können, um Ihre Website einfach zu gestalten. In unserer Anleitung zum Erstellen von benutzerdefinierten Layouts in WordPress finden Sie detaillierte Anweisungen.

Sie können Beaver Builder auch verwenden, um ein vollständig benutzerdefiniertes WordPress-Theme zu erstellen, ohne Code zu schreiben. Wir hoffen, dass diese Anleitung Ihnen geholfen hat, den WordPress Theme Customizer wie ein Profi zu nutzen.

Verwandte Artikel:

• Wie man ein WordPress-Theme richtig ändert (ultimative Anleitung)
• Anleitung für Anfänger: Wie man ein WordPress-Theme installiert
• So aktualisieren Sie ein WordPress-Theme, ohne die Anpassungsfähigkeit zu verlieren
• So finden Sie heraus, welches WordPress-Theme eine Website verwendet
• So deinstallieren und löschen Sie ein WordPress-Theme (Schritt für Schritt)