So fügen Sie benutzerdefinierte Stile zu WordPress-Widgets hinzu (2 Wege)

Beim Erstellen von WordPress-Websites haben wir gelernt, dass kleine Details große Unterschiede machen. Benutzerdefiniertes Widget-Styling kann gute Websites in großartige verwandeln.

Bei WPBeginner lassen wir jedes Element zusammenarbeiten. Nehmen Sie zum Beispiel unsere Seitenleisten-Widgets.

Wir haben ihr Erscheinungsbild angepasst, um wichtige Ressourcen hervorzuheben und sie nahtlos in das Design unserer Website einzufügen. Dies hilft uns, Vertrauen bei Millionen von Besuchern aufzubauen.

In diesem Leitfaden teilen wir die einfachsten Methoden, um WordPress-Widget-Stile anzupassen. Sie lernen Techniken, um Ihre Widgets professionell aussehen zu lassen und perfekt in Ihr Theme zu integrieren.

Warum benutzerdefinierte Stile zu WordPress-Widgets hinzufügen?

Standardmäßig verwenden WordPress Widgets die Styling-Optionen Ihres Themes, was möglicherweise nicht immer Ihren Designzielen entspricht. Das Hinzufügen benutzerdefinierter Stile gibt Ihnen mehr Kontrolle darüber, wie Ihre Widgets aussehen und sich anfühlen.

Hier ist, warum sich die Anpassung lohnt:

• 🎨 Passend zu Ihrer Marke: Benutzerdefinierte Stile ermöglichen es Ihnen, Widget-Farben, Schriftarten und Abstände an das Branding Ihrer Website anzupassen, um ein kohärenteres Erscheinungsbild zu erzielen.
• 👓 Verbessern Sie die Lesbarkeit: Manchmal ist das Standard-Widget-Layout nicht leicht zu lesen. Styling kann helfen, Schriftgrößen, Kontrast oder Ausrichtung für eine bessere Benutzererfahrung zu verbessern.
• 🌟 Wichtige Inhalte hervorheben: Möchten Sie, dass Ihre neuesten Beiträge, Handlungsaufforderungen oder Kontaktinformationen hervorstechen? Benutzerdefinierter CSS-Code kann diese Widgets auffälliger machen.
• 🧹 Unordentliche Designs aufräumen: Wenn ein Widget überladen oder fehl am Platz wirkt, helfen benutzerdefinierte Stile, sein Erscheinungsbild zu optimieren und es reibungsloser in Ihr Layout zu integrieren.
• 🧩 Erstellen Sie einzigartige Layouts: Benutzerdefinierte Stile eröffnen Layout-Möglichkeiten, z. B. die Umwandlung eines einfachen Text-Widgets in eine stilisierte Promo-Box oder die Ausrichtung mehrerer Widgets in einem Raster.

Kurz gesagt, das Stylen Ihrer Widgets hilft Ihnen, über das Standardaussehen hinauszugehen und eine professionellere Website zu erstellen.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie ganz einfach benutzerdefinierte Stile zu Ihren WordPress-Widgets hinzufügen können.

Wir zeigen Ihnen 2 Möglichkeiten, Ihre WordPress-Widgets mit benutzerdefinierten Stilen anzupassen. Sie können diese Schnelllinks verwenden, um zu der Methode zu springen, die für Sie am besten geeignet ist:

• Methode 1: WordPress-Widgets mit CSS-Code gestalten
• Methode 2: WordPress-Widgets mit CSS Hero stylen (ohne Code)

Methode 1: WordPress-Widgets mit CSS-Code gestalten

WordPress-Widgets verwenden jetzt den Block-Editor, um ein neues Widget und einen neuen Block zu Widget-Bereichen und Seitenleisten hinzuzufügen. Das bedeutet, dass Sie für einige der Standard-WordPress-Blöcke einige Block-Styling-Optionen sehen werden.

Wenn Sie beispielsweise zur Seite Darstellung » Widgets gehen und auf einen Standard-WordPress-Block klicken, sehen Sie Optionen, um die Farben und Typografie des Blocks zu ändern.

Allerdings verfügen nicht alle Blöcke über diese Widget-Optionen, insbesondere wenn es sich nicht um Standard-WordPress-Blöcke handelt. Glücklicherweise ist einer der Vorteile der Verwendung des Block-Editors für Widgets, dass Sie jedem Block einfach benutzerdefinierte CSS-Klassen hinzufügen können.

Alles, was Sie tun müssen, ist einfach auf das Widget zu klicken, wo Sie benutzerdefinierte Stile hinzufügen möchten.

Als Nächstes müssen Sie im Block-Panel zum Tab 'Erweitert' scrollen. Von hier aus können Sie eine benutzerdefinierte CSS-Klasse hinzufügen.

Vergessen Sie nicht, Ihre Widget-Einstellungen zu speichern, indem Sie auf die Schaltfläche 'Aktualisieren' klicken.

Jetzt können Sie benutzerdefiniertes CSS zu Ihrem WordPress-Theme hinzufügen, das auf diese spezielle CSS-Klasse abzielt.

Gehen Sie einfach zur Seite Darstellung » Anpassen und wechseln Sie zum Tab „Zusätzliches CSS“. Dort sehen Sie eine Live-Vorschau Ihrer Website mit einem Feld, in das Sie Ihre CSS-Regeln eingeben können.

Eine weitere effektive Methode zum Hinzufügen von benutzerdefiniertem CSS ist die Verwendung von WPCode.

Wir haben es ausgiebig getestet und festgestellt, dass es eine der sichersten Methoden ist, benutzerdefinierten Code in Ihr Theme zu integrieren. Wenn Sie zahlreiche CSS-Snippets verwalten, erleichtert WPCode deren Organisation und Nachverfolgung.

Für weitere Details zu seinen Funktionen und Vorteilen lesen Sie gerne unsere WPCode-Bewertung.

Stellen Sie zunächst sicher, dass Sie das WPCode-Plugin installiert haben. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Gehen Sie als Nächstes zu Code-Snippets » + Snippet hinzufügen und wählen Sie „Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)“. Klicken Sie dann auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Geben Sie nun Ihrem neuen benutzerdefinierten CSS einen Namen. Es kann etwas Einfaches sein wie 'Benutzerdefinierter Widget-Stil'.

Ändern Sie dann den Code-Typ auf „CSS-Snippet“.

Fügen Sie als Nächstes Ihren benutzerdefinierten CSS-Code in das Feld ein.

Hier ist etwas grundlegendes CSS, das wir verwendet haben:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Wenn Sie fertig sind, scrollen Sie einfach nach unten zum Abschnitt „Einfügen“. Stellen Sie sicher, dass die Einfügemethode auf „Automatisch einfügen“ und der Speicherort auf „Website-Header“ eingestellt ist.

Schalten Sie danach den Schalter in der oberen rechten Ecke um, bis dort 'Aktiv' steht, und klicken Sie auf 'Snippet speichern'.

Nachdem Sie Ihren benutzerdefinierten CSS-Code hinzugefügt haben, können Sie Ihre WordPress-Website auf Mobilgeräten oder Desktops anzeigen, um sie in Aktion zu sehen.

So sieht unseres auf unserer Demo-WordPress-Website aus:

Methode 2: WordPress-Widgets mit CSS Hero stylen (ohne Code)

Ein Problem mit der obigen Methode ist, dass Sie CSS-Code schreiben müssen. Allerdings kennen nicht alle Benutzer CSS oder möchten einfach keinen Code selbst schreiben.

In diesem Fall können Sie CSS Hero verwenden. Es ist ein benutzerdefiniertes WordPress-Styling-Plugin, mit dem Sie benutzerdefiniertes CSS zu Ihrem WordPress-Theme hinzufügen können, ohne Code schreiben zu müssen.

Mehr über das Plugin erfahren Sie in unserem CSS Hero Testbericht.

Zuerst müssen Sie das CSS Hero Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt zur oberen WordPress-Admin-Symbolleiste hinzu.

Besuchen Sie als Nächstes die Seite, auf der Sie das zu stylende Widget sehen können, und klicken Sie oben auf die Schaltfläche CSS Hero.

Dies öffnet die Seite in der CSS Hero-Editor-Oberfläche.

Es ist ein Live-Editor, bei dem Sie einfach auf ein beliebiges Element auf Ihrer Website zeigen und klicken können, um dessen Stil zu ändern.

Bewegen Sie einfach Ihre Maus über das Widget, das Sie stylen möchten. Klicken Sie dann, um es auszuwählen.

In diesem Beispiel haben wir unser Such-Widget ausgewählt.

Danach können Sie das Menü auf der linken Seite verwenden, um Ihr Widget nach Belieben zu gestalten. Dies beinhaltet erweiterte Styling-Optionen wie Farbverläufe, Typografie, Abstände, Ränder und Rahmen.

Im folgenden Beispiel haben wir die Schriftgröße des WordPress-Such-Widgets geändert, damit es noch mehr hervorsticht.

Sie können bei Bedarf auch bestimmte Elemente des Widgets ändern.

Zum Beispiel haben wir uns entschieden, den Radius des Buttons und der Suchfelder zu ändern. Auf diese Weise sehen sie runder und stilvoller aus.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Vorschau Ihrer Website, um Ihr neues WordPress-Design in Aktion zu sehen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie benutzerdefinierte Stile zu WordPress-Widgets hinzufügen. Möglicherweise möchten Sie auch unsere Auswahl der besten Drag-and-Drop-Page-Builder für WordPress und unseren Vergleich der Vor- und Nachteile zwischen kostenlosen und Premium-WordPress-Themes sehen.

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.