Hinzufügen individueller Stile zu WordPress Widgets (2 Wege)

Durch die individuelle Anpassung Ihrer Widgets können Sie das Erscheinungsbild Ihrer Website verbessern, die Markenkonsistenz wahren und die Aufmerksamkeit auf wichtige Informationen lenken.

Für viele Benutzer von WordPress ist die Gestaltung von Widgets jedoch eine Herausforderung, vor allem wenn sie mit CSS nicht vertraut sind. Aber keine Sorge, wir sind hier, um zu helfen.

In diesem Artikel zeigen wir Ihnen zwei einfache Methoden, mit denen Sie WordPress-Widgets individuell anpassen können, ohne Ihre Website zu zerstören. Ganz gleich, ob Sie sich mit ein wenig CSS auskennen oder eine Lösung ohne Code bevorzugen, wir haben die Lösung für Sie.

Wir zeigen Ihnen 2 Möglichkeiten, individuelle Stile zu WordPress-Widgets hinzuzufügen. Sie können diese Links verwenden, um zu der Methode zu wechseln, die für Sie am besten geeignet ist:

Methode 1: Hinzufügen individueller Stile zu WordPress Widgets mit dem Block-Editor (Basic)

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

Wenn Sie beispielsweise auf der Seite Design “ Widgets auf einen Standard WordPress-Block klicken, sehen Sie Optionen, um die Farben und die Typografie des Blocks zu ändern.

Diese Option steht jedoch nicht für alle Blöcke zur Verfügung, insbesondere wenn es sich nicht um die Standard-WordPress-Blöcke handelt. Einer der Vorteile der Verwendung des Block-Editors für Widgets ist, dass Sie jedem Block ganz einfach individuelle CSS-Klassen hinzufügen können.

Klicken Sie einfach auf das Widget, dem Sie individuelle Stile anpassen möchten.

Als Nächstes müssen Sie zum Tab „Erweitert“ unter dem Block-Panel blättern. Von hier aus können Sie eine individuelle CSS-Klasse hinzufügen.

Vergessen Sie nicht, Ihre Änderungen zu speichern, indem Sie auf den Button „Aktualisieren“ klicken.

Jetzt können Sie Ihrem WordPress-Theme benutzerdefinierte CSS hinzufügen, die auf diese bestimmte CSS-Klasse abzielen.

Gehen Sie einfach auf die Seite Erscheinungsbild “ Anpassen und wechseln Sie auf die Registerkarte Zusätzliches CSS. Dort sehen Sie eine Live-Vorschau Ihrer Website mit einem Feld zum Hinzufügen Ihrer CSS-Regeln.

Eine andere Möglichkeit, individuelles CSS hinzuzufügen, ist WPCode. Wir empfehlen dies, wenn Sie bereits eine Menge individuellen CSS-Code in Ihrem Theme haben und alle Snippets leicht unterscheiden und verfolgen möchten.

Stellen Sie zunächst sicher, dass Sie das WPCode Plugin installieren. Eine schrittweise Anleitung finden Sie in unserem Leitfaden zur Installation eines WordPress Plugins.

Gehen Sie dann zu Code Snippets „ + Snippet hinzufügen und wählen Sie ‚Fügen Sie Ihren individuellen Code hinzu (neues Snippet). Klicken Sie dann auf den Button „+ Individuelles Snippet hinzufügen“.

Geben Sie nun Ihrem neuen individuellen CSS einen Namen. Es kann etwas Einfaches wie „Individueller Widget-Stil“ sein.

Ändern Sie dann den Codetyp in „CSS Snippet“.

Fügen Sie nun Ihr individuelles CSS in das Feld ein.

Hier sind einige grundlegende CSS, die wir verwendet haben:

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

Blättern Sie dann zum Abschnitt „Einfügen“. Vergewissern Sie sich, dass die Einfügemethode auf „Automatisch einfügen“ und die Position auf „Site Wide Header“ eingestellt ist.

Schalten Sie dann den Button in der oberen rechten Ecke um, bis er aktiviert ist, und klicken Sie auf „Snippet speichern“.

Nachdem Sie Ihr individuelles CSS hinzugefügt haben, können Sie Ihre Website auf dem Handy oder dem Desktop anzeigen, um sie in Aktion zu sehen.

So sieht unsere aus:

Methode 2: Anwenden individueller Stile auf WordPress Widgets mit CSS Hero (besser anpassbar)

Ein Problem bei der obigen Methode ist, dass Sie CSS-Code schreiben müssen. Nicht alle Benutzer kennen sich jedoch mit CSS aus oder wollen einfach nicht selbst Code schreiben.

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

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

Zunächst müssen Sie das CSS Hero Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins.

Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt in der oberen Symbolleiste Ihres WordPress-Administrators hinzu.

Als Nächstes müssen Sie die Seite besuchen, auf der Sie das Widget sehen, das Sie gestalten möchten, und oben auf die Schaltfläche CSS Hero klicken.

Dadurch wird die Seite in der Oberfläche des CSS Hero Editors geöffnet.

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

Gehen Sie einfach mit der Maus auf das Widget, das Sie gestalten möchten. Klicken Sie dann, um es auszuwählen.

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

Danach können Sie Ihr Widget über das Menü auf der linken Seite nach Belieben gestalten. Dazu gehören erweiterte Optionen für die Gestaltung wie Farbverläufe, Typografie, Innenabstände, Außenabstände und Ränder.

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

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

Wir haben zum Beispiel beschlossen, den Eckenradius der Buttons und der Suchfelder zu ändern. Auf diese Weise sehen sie geschwungener und eleganter aus.

Wenn Sie fertig sind, vergessen Sie nicht, auf den Button „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Anschließend können Sie Ihre Website in der Vorschau anzeigen, um die Änderungen in Aktion zu sehen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie individuelle Stile zu WordPress-Widgets hinzufügen können. Vielleicht interessieren Sie sich auch für 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.

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.