Wie man benutzerdefinierte Stile zu WordPress-Widgets hinzufügt

Die meisten Sidebar-Widgets in WordPress sehen normalerweise gleich aus. Es wäre gut, wenn alle Ihre Widgets die gleiche Bedeutung hätten, aber die Wahrheit ist, dass einige Widgets für das Wachstum Ihrer Website wichtiger sind als andere. Beispielsweise ist ein Widget für E-Mail-Listenabonnements sicherlich wichtiger als ein Widget für Archive. Wäre es nicht schön, wenn Sie wichtige Widgets leicht anders gestalten könnten? In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Stile zu WordPress-Widgets hinzufügen.

Verwenden eines Plugins zum Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets

Zuerst müssen Sie das Widget CSS Classes-Plugin installieren und aktivieren. Nach der Aktivierung gehe einfach zu Aussehen »Widgets und klicken Sie auf ein Widget in der Seitenleiste, um es zu erweitern.

Sie werden ein neues bemerken CSS-Klasse Feld unter Ihren Widgets, so dass Sie leicht eine CSS-Klasse für jedes Widget definieren können. Zum Beispiel haben wir das hinzugefügt abonnieren Klasse zu unserem Abo-Formular-Widget.

Jetzt können Sie zum Stylesheet Ihres Themes wechseln und dort Ihre Style-Regeln hinzufügen. So was:

 .abonnieren Hintergrundfarbe: # 858585; Farbe: #FFF;  

Sie können jedes benutzerdefinierte CSS hinzufügen, z. B. Hintergrund hinzufügen, Ränder ändern, verschiedene Farben verwenden usw..

Manuelles Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets

Wenn Sie kein Plugin verwenden möchten, können Sie Ihren WordPress-Widgets manuell benutzerdefinierte Stile hinzufügen. Standardmäßig fügt WordPress verschiedenen Elementen einschließlich Widgets CSS-Klassen hinzu.

Jedes Widget in Ihrer Seitenleiste hat eine nummerierte Widget-Klasse. Wie Widget-1, Widget-2, Widget-3 usw. Mithilfe des Werkzeugs "Inspect-Element" von Google Chrome finden Sie die CSS-Klasse für das Widget, das Sie anpassen möchten.

Wie Sie in der Abbildung oben sehen können, ist das Widget, das Sie anpassen möchten, vorhanden Widget-2 Klasse hinzugefügt von WordPress. Gehen Sie jetzt zum Stylesheet Ihres Themes und fügen Sie Ihre benutzerdefinierten Stilregeln hinzu.

 .Widget-2 Hintergrundfarbe: # 858585; Farbe: #FFF;  .widget-2 .widget-title font-weight: fett;  

Wir hoffen, dass Ihnen dieser Artikel geholfen hat, benutzerdefinierte Stile zu WordPress-Widgets hinzuzufügen. Spielen Sie mit CSS und experimentieren Sie mit verschiedenen Farben. Verwenden Sie A / B-Split-Tests, um herauszufinden, welche benutzerdefinierten Stile für Ihre Website am besten geeignet sind.

Wenn Sie eine einfachere Möglichkeit zum Markieren Ihres Widget zum Abonnieren der Seitenleiste suchen, probieren Sie OptinMonster aus, da es mehrere Designs, A / B-Tests und vieles mehr bietet.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Google+.