So verwenden Sie einen visuellen Editor, um Widgets in WordPress zu erstellen

Die visuelle Bearbeitung hat die Art und Weise, wie wir Widgets erstellen, revolutioniert.

Was früher benutzerdefinierten Code erforderte, kann jetzt mit wenigen Klicks erledigt werden, wodurch die Erstellung von Widgets für jedermann zugänglich wird.

Der visuelle Editor in WordPress ist immer leistungsfähiger geworden, insbesondere mit den neuesten Updates des Gutenberg-Block-Editors.

Das bedeutet, dass die Erstellung von Block-Widgets jetzt intuitiver ist als je zuvor. Ob Sie Ihre Seitenleiste, Ihren Footer oder einen beliebigen Widget-Bereich anpassen, Sie können jetzt schöne, funktionale Inhalte hinzufügen, ohne eine einzige Zeile Code anzufassen.

In diesem Leitfaden zeigen wir Ihnen genau, wie Sie den visuellen Editor verwenden, um Widgets für Ihre WordPress-Website zu erstellen.

Warum den visuellen Editor zum Erstellen von Widgets in WordPress verwenden?

Die Verwendung des visuellen Editors erleichtert die Erstellung benutzerdefinierter Widgets mit reichhaltigen Inhalten überall auf Ihrer Website, ohne Code schreiben zu müssen.

Sie können diese Widgets zu widget-fähigen Bereichen wie dem Footer, Header oder der Seitenleiste hinzufügen, abhängig von Ihrem Theme.

Widgets eignen sich perfekt für die Anzeige von Dingen wie einem Über-uns-Bereich, beliebten Beiträgen, Anmeldeformularen für Newsletter oder sogar eingebetteten Social-Feeds.

WordPress ermöglicht es Ihnen, Blöcke zu diesen Bereichen hinzuzufügen, und viele Plugins bieten ihre eigenen benutzerdefinierten Blöcke an.

Zum Beispiel können Sie mit dem Smash Balloon Twitter Feed Plugin Ihre neuesten Tweets überall mit seinem Block einbetten.

Sie können auch vollständig benutzerdefinierte Widgets erstellen, wie z. B. eine Autoren-Biografie mit einem Foto und Links zu sozialen Profilen, um Ihre Website ansprechender zu gestalten.

Davon abgesehen, sehen wir uns an, wie Sie einen visuellen Editor verwenden können, um benutzerdefinierte Widgets in WordPress zu erstellen.

Verwenden Sie einfach die unten stehenden Links, um zu der Methode zu springen, die für Ihr Theme richtig ist:

Methode 1: Verwendung des Widget Options Plugins (funktioniert mit allen WordPress-Themes)

Der einfachste Weg, benutzerdefinierte Inhalte zu Ihren Widget-Bereichen hinzuzufügen, ist die Verwendung des Widget Options Plugins.

Es fügt dem Standard-WordPress-Widget-Editor viele zusätzliche Einstellungen hinzu, einschließlich der Möglichkeit, verschiedene Widgets je nach Benutzerrolle anzuzeigen, WordPress-Widgets auf Mobilgeräten auszublenden und mehr.

Es fügt auch ein Text-Widget hinzu, das Sie mit Ihren eigenen Links, Bildern, Formatierungen und mehr anpassen können. Dies ermöglicht es Ihnen, reichhaltige, benutzerdefinierte Inhalte zu Ihren Widget-Bereichen hinzuzufügen, ohne Code schreiben zu müssen.

Zuerst müssen Sie das Widget Options-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung gehen Sie zur Seite Design » Widgets in Ihrem WordPress-Dashboard.

Sie sehen nun eine Liste aller Widget-Bereiche in Ihrem WordPress-Theme. Das Widget Options Plugin fügt ein erweitertes Text-Widget hinzu.

Finden Sie dieses Widget und ziehen Sie es einfach per Drag & Drop in einen beliebigen Widget-Bereich, wie die Seitenleiste oder den Footer.

Sobald Sie das getan haben, öffnet das Widget Options Plugin ein kleines Popup-Fenster.

Dieses Popup fungiert wie ein Mini-Seiten- oder Beitragseditor, sodass es Ihnen vertraut vorkommen sollte.

Zuerst können Sie einen Titel eingeben, der über dem Widget angezeigt wird.

Danach können Sie Text direkt in den kleinen Editor eingeben, Links und Bilder hinzufügen, die Formatierung ändern, Aufzählungszeichen und nummerierte Listen hinzufügen und mehr.

Sie können Widgets auch auf bestimmten WordPress-Seiten anzeigen oder ausblenden und benutzerdefinierte Stile zum WordPress-Widget hinzufügen.

Wenn Sie mit der Einrichtung des Widgets zufrieden sind, klicken Sie auf den Link 'Fertig', um die Einstellungen zu speichern.

Wenn Sie nun Ihre Website besuchen, sehen Sie das neue Rich-Text-Widget live.

Wenn Sie ein klassisches WordPress-Theme verwenden, können Sie auch visuell benutzerdefinierte Inhalte für Widget-Bereiche mit dem WordPress Customizer erstellen.

Gehen Sie einfach zu Darstellung » Widgets, aber klicken Sie dieses Mal auf 'Mit Live-Vorschau verwalten'.

Dies öffnet den Customizer mit den bereits ausgewählten Widget-Einstellungen.

Sie können nun auf den Bereich klicken, in dem Sie das benutzerdefinierte Widget hinzufügen möchten.

Klicken Sie danach auf „Widget hinzufügen“, wodurch sich ein Bereich öffnet, der alle verschiedenen Widgets anzeigt.

Finden Sie einfach das klassische Text-Widget und klicken Sie darauf, um es zu Ihrer Website hinzuzufügen.

Dies öffnet einen kleinen Editor, in dem Sie Text, Links, Medien und mehr hinzufügen können.

Während Sie Änderungen im Editor vornehmen, wird die Live-Vorschau automatisch aktualisiert.

Wenn Sie mit dem Aussehen des Widgets zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“, um es auf Ihrem WordPress-Blog oder Ihrer Website live zu schalten.

Wenn Sie den Theme-Customizer in Ihrem WordPress-Dashboard nicht finden können, lesen Sie bitte unsere Anleitung, wie Sie den fehlenden Theme-Customizer im WordPress-Admin beheben.

Methode 2: Verwendung des Full-Site-Editors (funktioniert mit Block-fähigen WordPress-Themes)

Wenn Sie ein Block-fähiges WordPress-Theme verwenden, können Sie mit dem Full-Site-Editor Blöcke zu jedem Bereich der Vorlagen Ihrer Website hinzufügen.

Auf diese Weise können Sie benutzerdefinierte Inhalte für Bereiche wie die Seitenleiste erstellen, indem Sie Standard- WordPress-Blöcke direkt in die Vorlagen Ihres Themes einfügen. Sie müssen auch kein separates WordPress-Plugin installieren.

Es ist auch eine Möglichkeit, Widgets zu Bereichen hinzuzufügen, die Sie nicht mit dem Standard-WordPress-Widget-Editor oder Customizer bearbeiten können. Sie können beispielsweise Widgets zu Ihrer 404-Seitenvorlage hinzufügen.

Um zu beginnen, gehen Sie im WordPress-Dashboard zu Darstellung » Editor.

Standardmäßig zeigt der Full Site Editor die Startvorlage Ihres Themes an, aber Sie können Widgets und Blöcke zu jedem Bereich hinzufügen.

Um alle verfügbaren Optionen anzuzeigen, wählen Sie einfach entweder 'Vorlagen' oder 'Vorlagenteile' aus.

Sie können nun auf die Vorlage oder das Vorlagenteil klicken, das Sie bearbeiten möchten.

WordPress zeigt nun eine Vorschau des Designs an. Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Stiftsymbol.

Wenn Sie damit fertig sind, klicken Sie auf das blaue „+“-Symbol und suchen Sie dann den ersten Block, den Sie für Ihre benutzerdefinierten Inhalte verwenden möchten.

Sie können jede beliebige Kombination von Blöcken verwenden, aber wenn Sie ein Bild und Text verwenden möchten, empfehlen wir, mit dem Block Medien & Text zu beginnen.

Dies ermöglicht es Ihnen, ein Bild einfach neben etwas Text in einem schönen Layout anzuordnen. Vor diesem Hintergrund ist der Medien & Text-Block perfekt für die Erstellung einer Autoren-Info-Box, wie Sie im folgenden Bild sehen können.

Nachdem Sie den gewünschten Block ausgewählt haben, ziehen Sie ihn einfach per Drag & Drop in einen Bereich Ihrer Vorlage, wie z. B. die Seitenleiste und den Footer.

Der Full-Site-Editor gibt Ihnen Zugriff auf den vollständigen Satz von WordPress-Tools und -Einstellungen. Das bedeutet, dass Sie eine Call-to-Action-Schaltfläche, Text, Links, Bilder und andere Inhalte zu einer größeren Auswahl von Blöcken hinzufügen können.

Damit sollten Sie in der Lage sein, genau die benutzerdefinierten Inhalte zu erstellen, die Sie sich vorgestellt haben. Fügen Sie einfach weitere Blöcke und Inhalte zu Ihrer Vorlage hinzu, bis Sie mit dem Ergebnis zufrieden sind.

Weitere Ideen, wie Sie die widget-fähigen Bereiche Ihres Themes nutzen können, finden Sie in unserer Checkliste mit Dingen, die Sie dem Footer Ihrer WordPress-Website hinzufügen sollten.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie auf „Speichern“.

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie die neuen benutzerdefinierten Inhalte live in Ihrer Vorlage.

Häufig gestellte Fragen zur Verwendung eines visuellen Editors zum Erstellen von Widgets in WordPress

Hier sind einige Fragen, die unsere Leser häufig zum Erstellen von Widgets mit dem visuellen Editor stellen:

Muss ich ein Plugin installieren, um Widgets visuell zu erstellen?

Nicht immer. Wenn Sie ein Block-Theme verwenden, können Sie Widgets mit dem Full Site Editor ohne zusätzliche Plugins hinzufügen.

Wenn Ihr Theme jedoch den Full-Site-Editor nicht unterstützt, gibt Ihnen ein Plugin wie Widget Options mehr Kontrolle darüber, wo und wie Ihre Widgets angezeigt werden.

Warum sehe ich Änderungen an meinem Widget nicht sofort?

Wenn Ihr Widget nicht sofort aktualisiert wird, versuchen Sie, Ihren Website-Cache und den Browser-Cache zu leeren. Einige Caching-Plugins oder CDNs können Änderungen verzögern.

Die Verwendung der Live-Vorschau-Option ist eine gute Möglichkeit, Ihre Widget-Updates vor der Veröffentlichung zu bestätigen.

Kann ich benutzerdefinierte Blöcke von Plugins (wie Smash Balloon oder WPForms) in einem Widget-Bereich hinzufügen?

Absolut. Die meisten modernen Plugins wie Smash Balloon, WPForms oder MonsterInsights enthalten eigene Blöcke, die in jedem Widget-fähigen Bereich platziert werden können.

Sie können diese Blöcke wie jeden anderen Block in Ihre Seitenleiste, Ihren Footer oder Header ziehen.

Was ist der Unterschied zwischen der Verwendung des Widget Options-Plugins und des Full Site Editors?

Das Widget Options-Plugin funktioniert mit allen Themes, auch mit älteren, die FSE nicht unterstützen.

Der Full Site Editor funktioniert nur mit Block-fähigen Themes und bietet tiefere Designflexibilität, da Sie Header, Footer und Vorlagen visuell bearbeiten können.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie den visuellen Editor für WordPress-Widgets einfach verwenden können. Möglicherweise möchten Sie auch unseren Leitfaden zu Tipps zur Beherrschung des WordPress-Inhaltseditors und wie Sie eine Landingpage mit WordPress erstellen lesen.

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.