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 Block-Editors. Egal, ob Sie Ihre Seitenleiste, Ihren Footer oder einen beliebigen Widget-Bereich anpassen, Sie können jetzt schöne, funktionale Widgets erstellen, ohne eine einzige Codezeile anfassen zu müssen.

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?

Widgets ermöglichen es Ihnen, Rich Content außerhalb des Hauptbereichs für Seiten und Beiträge hinzuzufügen. Jedes WordPress-Theme ist anders, aber Sie können Widgets normalerweise zu Bereichen wie dem Footer, Header und der Sidebar hinzufügen.

Viele Websites nutzen diese Bereiche, um einen Über-uns-Bereich anzuzeigen, ihre beliebtesten Beiträge anzuzeigen, ein Anmeldeformular für den E-Mail-Newsletter hinzuzufügen und vieles mehr.

WordPress ermöglicht es Ihnen, eine breite Palette von Blöcken zu jedem Widget-fähigen Bereich hinzuzufügen, und viele WordPress-Plugins fügen auch ihre eigenen Blöcke hinzu.

Wenn Sie beispielsweise Smash Balloon Twitter Feed verwenden, können Sie mit dem Twitter Feed-Block des Plugins aktuelle Tweets in jedem Widget-fähigen Bereich einbetten.

Manchmal möchten Sie jedoch möglicherweise ein benutzerdefiniertes Widget erstellen, das Ihren Besuchern reichhaltige Multimedia-Inhalte anzeigt. Zum Beispiel möchten Sie vielleicht Ihr Autorenfoto hochladen und es dann verwenden, um ein Autoren-Bio-Widget zu erstellen, komplett mit Links zu Ihren verschiedenen Social-Media-Profilen.

Lassen Sie uns nun sehen, wie Sie einen visuellen Editor verwenden können, um benutzerdefinierte Widgets in WordPress zu erstellen. Verwenden Sie einfach die folgenden 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)
• Methode 2: Verwendung des Full-Site-Editors (funktioniert mit Block-fähigen WordPress-Themes)
• Häufig gestellte Fragen

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

Der einfachste Weg, ein benutzerdefiniertes Widget zu erstellen, ist die Verwendung des Widget Options-Plugins.

Es fügt dem Standard-WordPress-visuellen Widget-Editor viele zusätzliche Einstellungen hinzu, einschließlich der Möglichkeit, verschiedene Widgets je nach Benutzerrolle anzuzeigen, WordPress-Widgets auf Mobilgeräten zu verstecken 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, ein benutzerdefiniertes Widget zu erstellen, 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 zur Installation eines WordPress-Plugins.

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

Sie sehen nun eine Liste aller Widget-fähigen Bereiche in Ihrem WordPress-Theme. Die angezeigten Optionen können je nach Theme variieren.

Sie sehen auch alle Widgets, die Sie zu Ihrer Website hinzufügen können. Wir werden das Text-Widget für diese Anleitung verwenden, ziehen Sie es also einfach per Drag & Drop in einen beliebigen Widget-fähigen Bereich.

Sie sehen nun ein kleines Popup.

Dieses Popup ist im Wesentlichen ein Mini-Seiten- oder Beitragseditor, daher sollte es Ihnen bekannt vorkommen.

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 vieles mehr.

Sie können auch Widgets 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 es vorziehen, können Sie ein benutzerdefiniertes Widget visuell 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 'Text' und klicken Sie darauf, um ihn 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 unseren Leitfaden zur Behebung des fehlenden Theme-Customizers im WordPress-Adminbereich.

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 Blöcke mit dem Full-Site-Editor zu jedem Widget-fähigen Bereich hinzufügen.

Auf diese Weise können Sie benutzerdefinierte Widgets erstellen, indem Sie die Standard- WordPress-Blöcke in einem Widget-fähigen Bereich wie der Seitenleiste anordnen. Sie müssen auch kein separates WordPress-Plugin installieren.

Es ist auch eine Möglichkeit, Widgets zu Bereichen hinzuzufügen, die Sie mit dem Standard-Widget-Editor oder dem Customizer von WordPress nicht bearbeiten können. Zum Beispiel können Sie 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 das erledigt ist, klicken Sie auf das blaue „+“-Symbol und suchen Sie dann den ersten Block, den Sie in Ihrem benutzerdefinierten Widget 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 Text in einem schönen Layout anzuordnen. In diesem Sinne ist der Block „Medien & Text“ perfekt für das Erstellen 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 widget-bereiten Bereich wie 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 einen Call-to-Action-Button, Text, Links, Bilder und andere Inhalte zu einer größeren Auswahl an Blöcken hinzufügen können.

Mit diesen Worten sollten Sie in der Lage sein, genau das Widget zu erstellen, das Sie sich vorgestellt haben. Fügen Sie einfach weitere Blöcke und Inhalte zum Widget-fähigen Bereich hinzu, bis Sie mit dem Aussehen zufrieden sind.

Weitere Ideen, wie Sie die widget-bereiten Bereiche Ihres Themes nutzen können, finden Sie in unserer Checkliste mit Dingen, die Sie Ihrem Footer auf Ihrer WordPress-Website hinzufügen können.

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

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie das neue benutzerdefinierte Widget live.

Häufig gestellte Fragen

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 ansehen.

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.