Die meisten WordPress-Seitenleisten-Widgets sehen im Allgemeinen gleich aus. Es wäre schön, wenn alle Ihre Widgets gleich wichtig wären, aber die Wahrheit ist, dass einige für das Wachstum Ihrer Website wichtiger sind als andere. Beispielsweise ist ein Abonnement-Widget für E-Mail-Listen sicherlich wichtiger als ein Datei-Widget. Wäre es nicht schön, wenn Sie wichtige Widgets einfach anders gestalten könnten? In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Widgets benutzerdefinierte Stile hinzufügen.
Verwenden eines Plugins zum Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets
Als erstes sollten Sie das CSS Classes Widget-Plugin installieren und aktivieren. Nach der Aktivierung gehen Sie einfach zu Aussehen »Widgets und klicken Sie auf ein Widget in einer Seitenleiste, um es zu erweitern.
Unter den Widgets wird eine neue Klasse angezeigt, sodass Sie für jedes Widget problemlos eine CSS-Klasse definieren können. Zum Beispiel haben wir die Abonnementklasse zu unserem Widget für Abonnementformulare hinzugefügt.
Sie können jetzt zum Stylesheet Ihres Themas gehen und dort Ihre Stilregeln hinzufügen. Ich mag das:
.subscribe {
background-color: #858585;
color:#FFF;
}
Sie können ein beliebiges benutzerdefiniertes CSS hinzufügen, z. B. Hintergrund hinzufügen, Rahmen ändern, verschiedene Farben verwenden usw.
Fügen Sie WordPress-Widgets manuell benutzerdefinierte Stile hinzu
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 seiner Seitenleiste hat eine nummerierte Widget-Klasse. Wie Widget-1, Widget-2, Widget-3 usw. Mit dem Google Chrome Inspect Element-Tool können Sie die CSS-Klasse für das Widget finden, das Sie anpassen möchten.
Wie Sie im obigen Screenshot sehen können, hat das Widget, das wir anpassen möchten, die Widget-2-Klasse, die von WordPress hinzugefügt wurde. Gehen Sie nun zum Stylesheet Ihres Themas und fügen Sie Ihre benutzerdefinierten Stilregeln hinzu.
.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}
Wir hoffen, dieser Artikel hat Ihnen geholfen, benutzerdefinierte Stile zu WordPress-Widgets hinzuzufügen. Spielen Sie mit dem CSS und experimentieren Sie mit verschiedenen Farben. Verwenden Sie A / B-Split-Tests, um festzustellen, welche benutzerdefinierten Stile für Ihre Site am besten geeignet sind.
Wenn Sie das Abonnementformular-Widget in der Seitenleiste einfacher hervorheben möchten, probieren Sie OptinMonster aus, da es mehrere Layouts, A / B-Tests und vieles mehr bietet.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Google+.
