Möchten Sie WordPress-Widgets eigene Stile hinzufügen?
Durch die Gestaltung Ihrer Widgets können Sie Ihr Branding konsistent halten und wichtige Informationen für Ihre Nutzer hervorheben.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach benutzerdefinierte Stile zu WordPress-Widgets hinzufügen können, ohne Ihre Website zu zerstören.
Wir zeigen Ihnen drei Möglichkeiten, benutzerdefinierte Stile zu WordPress-Widgets hinzuzufügen. Sie können diejenige auswählen, die für Sie am besten geeignet ist.
- Hinzufügen von benutzerdefinierten Stilen zu WordPress-Widgets mit dem Block-Editor
- Hinzufügen von benutzerdefinierten Stilen zu klassischen Widgets in WordPress
- Hinzufügen von benutzerdefinierten Stilen zu WordPress-Widgets mit CSS Hero (ohne Code)
Bevor wir beginnen, erfordert dieser Artikel einige CSS-Kenntnisse, damit Sie Widgets gestalten können. Sie müssen auch benutzerdefinierte CSS zu Ihrem WordPress-Theme hinzufügen.
Wenn Sie eine Methode ohne Code anstelle von CSS bevorzugen, können Sie zu Methode 3 übergehen.
Fangen wir an.
Hinzufügen von benutzerdefinierten Stilen zu WordPress-Widgets mit dem Block-Editor
WordPress-Widgets verwenden jetzt den Block-Editor, um Widgets und Blöcke zu Widget-bereiten Bereichen und Seitenleisten hinzuzufügen.
Einer der Vorteile der Verwendung des Block-Editors für Widgets besteht darin, dass Sie jedem Block problemlos benutzerdefinierte CSS-Klassen hinzufügen können.
Gehen Sie einfach auf die Seite Erscheinungsbild “ Widgets und klicken Sie auf das Widget, dem Sie eigene Stile hinzufügen möchten.
Als Nächstes müssen Sie zur Registerkarte „Erweitert“ unter dem Bedienfeld „Block“ blättern. Von hier aus können Sie eine benutzerdefinierte CSS-Klasse hinzufügen.
Vergessen Sie nicht, Ihre Änderungen zu speichern, indem Sie auf die Schaltfläche 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.
Hinweis: Wenn Sie Customize unter Appearance Menu nicht sehen können, dann schauen Sie sich unseren Artikel an, wie man den fehlenden Theme-Customizer im WordPress-Admin behebt oder verwenden Sie das WPCode-Plugin, um Ihr eigenes CSS hinzuzufügen.
Hier sind einige grundlegende CSS, die wir verwendet haben.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Nachdem Sie Ihr benutzerdefiniertes CSS hinzugefügt haben, können Sie eine Vorschau Ihrer Website anzeigen, um sie in Aktion zu sehen.
Das Problem bei der Verwendung der Blockeditor-Widgets besteht darin, den richtigen Block zu finden.
Eine einfachere Lösung wäre das Hinzufügen von Blöcken zu einem Gruppenblock, um sie leichter zusammen zu gestalten. Mehr über das Gruppieren von Blöcken erfahren Sie in unserer Anleitung zur Verwendung des WordPress-Blockeditors.
Hinzufügen benutzerdefinierter Stile zu klassischen Widgets in WordPress
Diese Methode ist für Sie, wenn Sie die älteren klassischen Widgets auf Ihrer WordPress-Website verwenden.
Für diese Methode müssen Sie das Plugin Widget Options installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Widget Options ist ein leistungsstarkes Plugin, das Ihren WordPress-Widgets zusätzliche Optionen hinzufügt. Dazu gehört die Möglichkeit, Widgets basierend auf dem Gerät des Benutzers, der Rolle und anderen Bedingungen ein- und auszublenden.
Das Plugin fügt auch eine Option hinzu, um benutzerdefinierte CSS-Klassen zu Ihren WordPress-Widgets hinzuzufügen.
Gehen Sie einfach auf die Seite Erscheinungsbild “ Widgets und klicken Sie auf das Widget, dem Sie den benutzerdefinierten Stil hinzufügen möchten.
In den Widget-Einstellungen sehen Sie eine erweiterte Auswahl an Optionen. Hier müssen Sie auf das Zahnrad-Symbol klicken, um Ihre eigene CSS-Klasse hinzuzufügen.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Widget-Einstellungen zu speichern.
Sie können nun eine benutzerdefinierte CSS-Regel zu Ihrem Thema hinzufügen, indem Sie die CSS-Klasse verwenden, die Sie gerade eingegeben haben. Wir haben zum Beispiel das folgende CSS auf unserer Testseite verwendet.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
So sah es auf unserer Test-Website aus.
Anwenden von benutzerdefinierten Stilen auf WordPress-Widgets mit CSS Hero
Ein Problem bei den beiden oben genannten Methoden ist, dass Sie CSS-Code schreiben müssen. Doch nicht alle Benutzer kennen CSS 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.
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 CSS Hero-Editoroberfläche 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.
Fahren Sie einfach mit der Maus über das Widget, das Sie gestalten möchten, und klicken Sie darauf, um es auszuwählen.
Danach können Sie das Menü auf der linken Seite verwenden, um Ihr Widget nach Ihren Wünschen zu gestalten.
Dazu gehören erweiterte Styling-Optionen wie Farbverläufe, Typografie, Auffüllungen, Ränder und Umrandungen.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.
Sie können nun eine Vorschau Ihrer Website anzeigen, um die Änderungen in Aktion zu sehen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man WordPress-Widgets benutzerdefinierte Stile hinzufügt. Vielleicht interessieren Sie sich auch für unsere Auswahl der nützlichsten WordPress-Widgets für alle Websites oder für unsere Anleitung zum Erstellen von benutzerdefinierten WordPress-Themen von Grund auf, ohne Code zu schreiben.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankush says
The Plugin was really Great but I had a problem…
It doesn’t work when i add custom css….
May be plugin css is overriding my code but.. that really sad…
Hey Wpbeginner.com Team.. Please leave me a reply,]
I You can tell me how to fix it…
Rachael says
I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
Hi, I tried to do it manually, inspected the element and its class but it did not work.
I am trying to change the style of a WPform.
Could you help me?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Admin
daniel says
i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Admin
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks
WPBeginner Support says
No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.
Admin
Mr.T says
I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?
Erick says
I have the same question
Correen K says
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.