So fügen Sie WordPress benutzerdefinierte CSS -Klassen hinzu (3 einfache Wege)

Diejenigen, die CSS kennen, wissen, dass CSS -Klassen beim Stylen einer ganzen Website ein großer Zeitvergender sind. Aber wenn Sie keinen Codieren, haben Sie vielleicht nie gemerkt, wie mächtig sie sein können. Heute ändern wir das.

In diesem Beitrag werde ich Ihnen 3 einfache Möglichkeiten zeigen, WordPress CSS -Klassen hinzuzufügen - auch wenn Sie noch nie eine einzige Codezeile geschrieben haben. Sie werden auch lernen, wie man es auf dem No-Code-Weg mit dem leistungsstarken WordPress-Website-Builder Divi macht.

Was sind CSS -Klassen und wie helfen sie?

CSS ( Cascading Style Sheets ) ist der Code, der das Design und das Aussehen von Elementen wie Farben, Abstand und Schriftarten auf einer Website steuert. Eine CSS -Klasse ist ein wiederverwendbares Etikett, das Sie mehreren Elementen zuweisen, sodass Sie sie alle gleichzeitig stylen können, anstatt denselben Vorgang für jedes Element zu wiederholen.

Ohne CSS-Klassen müssten Sie jedes Element manuell stylen, was zeitaufwändig wird-insbesondere wenn Sie an größeren WordPress-Sites mit mehreren Seiten arbeiten. Aber wie so oft enthalten die meisten Websites wiederholte Elemente und Motive, z. B. die Schaltflächen auf einer Preisseite oder Funktionsfelder in verschiedenen Abschnitten.

Diese Elemente sehen ähnlich aus, weil sie im Backend dieselbe Klassengruppe teilen. Wenn Sie also CSS auf ein Element einer gemeinsamen Klassengruppe anwenden, erbt jedes darin enthaltene Element automatisch die gleichen Stileinstellungen. Am vorderen Ende verleiht ihnen ein visuell ähnliches Aussehen. CSS -Klassen sparen Zeit, halten Sie das Design konsequent und erleichtern zukünftigen Änderungen - da Sie nur die Klasse aktualisieren müssen, anstatt jedes Element einzeln zu ändern.

Möglichkeiten, WordPress CSS -Klassen hinzuzufügen

Sie können CSS -Klassen einer WordPress -Website auf verschiedene Weise hinzufügen, abhängig von Ihren Kenntnissen bei der Verwendung von CSS. Ich zeige Ihnen, wie Sie es mit WordPress Customizer und einem Plugin wie einfachem Custom CSS machen, aber beider Methoden erfordern Sie, dass Sie CSS schreiben.

Gehen Sie zur dritten Methode, wenn Sie mehr an der No-Code-Methode interessiert sind.

1. Verwenden Sie WordPress Customizer

Angenommen, Ihre WordPress -Seite hat mehrere Schaltflächen. Sie sehen derzeit schlicht aus, und Sie möchten, dass sie hervorstechen.

Durch das Hinzufügen von CSS zu jeder Taste benötigt Sie eine beträchtliche Zeit, da Sie den Vorgang achtmal wiederholen müssen. Bei CSS -Klassen können Sie jeder Taste einfach dieselbe CSS -Klasse zuweisen und die CSS nur einmal schreiben. Nennen wir unsere CSS-Klasse " Custom-A" . Klicken Sie in Ihrem WordPress -Seiten -Editor -Fenster auf eine beliebige Schaltfläche> Einstellungen (Zahnradsymbol)> Umschalten der erweiterten Option. Schreiben Sie nun den Klassennamen in zusätzliche CSS -Klassen.

Wiederholen Sie den Vorgang für jede Taste und speichern Sie. Um den Styling -Code zu diesen Schaltflächen hinzuzufügen, müssen Sie zu WordPress Customizer> Zusätzlicher CSS navigieren.

Um die Border Marine Blue und den Hintergrund himmelblau zu machen, fügen Sie Ihr CSS hier ein.

Beachten Sie, dass der von uns ausgewählte CSS -Klasse -Name vor den Styling -Regeln im Code kommt. Dies stellt sicher, dass der Code auf jedes Element angewendet wird, das diesen Klassennamen zugewiesen hat.

Nachdem Sie die Veröffentlichung und Vorschau auf Ihre Seite geklickt haben, sehen die gestalteten Schaltflächen wie folgt aus:

Das ist einfach - wenn Sie CSS kennen.

WordPress Customizer eignet sich auch hervorragend für kleinere Änderungen. Das Problem ist jedoch, dass das CSS dort hinzugefügt wurde, was an das Thema gebunden ist, was bedeutet, dass es möglicherweise verloren geht, wenn Sie Themen wechseln. Wenn Sie also verschiedene Themen auf Ihrer Website testen möchten, müssen Sie den Code jedes Mal aktualisieren, wenn Sie zu einem anderen Thema wechseln, was keinen Spaß macht. In diesem Fall ist es eine viel bessere Option, ein Plugin zu installieren, um Ihre CSS -Klassenstile sicher zu halten.

2. Verwenden Sie ein Plugin wie einfache benutzerdefinierte CSS

Sobald Sie das einfache benutzerdefinierte CSS -Plugin installiert haben, wird die Option "Custom CSS" zum Erscheinungsabschnitt hinzugefügt. Jetzt müssen Sie nur Ihren CSS -Code hinzufügen und benutzerdefinierte CSS aktualisieren, um die Änderungen widerzuspiegeln. (Sie müssen noch Klassennamen zu Elementen zuweisen, die Sie gemeinsam haben möchten.)

Plugins wie diese halten Ihre benutzerdefinierten CSS intakt, auch wenn Sie Ihr Thema später ändern. Es ist auch etwas organisierter als WordPress Customizer. Beide Methoden sind jedoch nicht skalierbar, da sie leicht überladen werden können, wenn Sie benutzerdefinierte CSS für mehrere Elementgruppen Ihrer gesamten Website speichern.

Aus diesem Grund besteht der empfohlene Ansatz für das ortsweite Styling darin, ein Kinderthema zu erstellen und sein Stylesheet zu aktualisieren. Auf diese Weise werden alle Ihre Änderungen in Ihrem Kinderthema selbst nach Themen -Updates sicher gehalten.

Obwohl wirksam (und von Codierern empfohlen), kann diese Methode schnell technisch werden, da sie weiterhin manuelle Arbeiten erfordert-Sie müssen jedes Element (oder mehrere Elemente mit CSS-Klassen) stylen, was zeitaufwändig und nicht anfängerfreundlich ist. Sie müssen auch Klassennamen verfolgen - stellen Sie sich nur vor, Sie möchten eine bestimmte Schaltflächenklasse bearbeiten, und Sie scrollen durch endlose Codeketten.

Was wäre, wenn Sie das Styling skalieren könnten, ohne eine einzelne Codezeile zu schreiben? Hier kommen moderne Drag-and-Drop-Seitenbauer wie Divi herein.

3.. Verwenden eines No-Code-Website-Builders wie Divi

Das Schöne an der Verwendung eines modernen No-Code-Website-Builders wie Divi ist, dass Sie kein CSS (oder einen Code) schreiben müssen, um konsistente Stile auf Ihrer Website anzuwenden. Mit einer visuellen Schnittstelle können Sie Abschnitten, Zeilen, Spalten und Modulen Stile zuweisen, indem Sie Designeinstellungen auswählen und anpassen.

In Divi erstellen Sie Voreinstellungen anstelle von CSS -Klassen. Divi bot jahrelang modulbasierte Voreinstellungen an, mit denen Sie Stile für Module wie Schaltflächen, Mangel und Bilder speichern und wiederverwenden können. Aber wir haben etwas noch Erstaunlicheres gestartet - Options -Gruppenvoreinstellungen, mit denen Sie noch weiter gehen können.

Vor der Voreinstellung der Optiongruppen durften Sie nur Voreinstellungen über Module hinweg anwenden. Beispielsweise kann ein Klappentext voreingestellt werden, nur in einem anderen Klappentext. Jetzt können Sie sogar Einstellungen über Module weitergeben.

Anstatt jeweils ein Element anzupassen, können Sie mit Option Group -Voreinstellungen Stile für gemeinsame Einstellungen speichern - wie Hintergründe, Grenzen oder Textstile - und sie auf mehrere verschiedene Elemente gleichzeitig anwenden. Wenn beispielsweise ein Abschnitt und eine Spalte eine Hintergrundfarbe verwenden, können Sie diese Stileinstellung als Voreinstellung speichern und alle relevanten Elemente anwenden, um ein zusammenhängendes Design zu erstellen.

Divi vereinfacht das Erstellen und Sparen von Stilen als Voreinstellung durch Drag & Drop-Funktionen ohne Codierung, wodurch sich das standortweite Design schneller und zugänglicher ändert-insbesondere für Nicht-Koder.

Laden Sie Divi 5 herunter

Mal sehen, was ich unten genauer meine

Die Optionsgruppengruppe von Divi erleichtert das Hinzufügen von CSS -Klassen

Die Optionsgruppen-Voreinstellungen von Divi nehmen das Konzept der CSS-Klassen an und vereinfachen es für Nicht-Koder. Anstatt manuell zu schreiben und Klassen zuzuweisen, können Sie jetzt den Visual Builder von Divi verwenden, um gemeinsame Designstile auf verschiedene Elemente mit nur wenigen Klicks anzuwenden.

Diese Voreinstellungen arbeiten auf der Optionsstufe, dh sie zielen auf bestimmte Designeinstellungen wie Hintergrundfarben, Grenzen oder Abstand ab, die über mehrere Elementtypen teilnehmen. So können beispielsweise die Hintergrundeinstellungen eines Abschnitts auf eine Spalte, Zeile und sogar Textelement angewendet werden.

Es ist eine schnellere, einfachere und intuitivere Möglichkeit, Ihr Website -Design konsistent zu halten. So wie: wie:

• Wiederverwendbare Stile über Elemente hinweg: Sie müssen nicht jedes Element manuell anpassen. Speichern Sie Optionsgruppenstile als Voreinstellung und wenden Sie sie auf ein beliebiges Element an.
• Globale Updates mit einer einzigen Bearbeitung: Ändern Sie einmal ein Voreinstellung, und alle Elemente mit dieser Voreinstellung aktualisieren automatisch. Dadurch werden Designanpassungen schnell und effizient auf Ihrer gesamten Website.
• Kombinieren Sie mehrere Voreinstellungen: Schichten- und Mischen Sie verschiedene Voreinstellungen (z. B. Ränder, Schatten, Textstile) auf jedem Element für eine flexible und kreative Designkombination, ohne von vorne zu beginnen.
• Passen Sie die Standardvoreinstellungen für Basisstile an: Speichern Sie Voreinstellungen als Standard, um sie automatisch auf alle relevanten Elemente anzuwenden.

Erfahren Sie mehr über Optionengruppenvoreinstellungen

So verwenden Sie Divi, um WordPress ohne Codierung CSS -Klassen hinzuzufügen

Jetzt, da Sie wissen, was die Optionsgruppengruppen -Voreinstellungen von Divi sind und dass Sie nicht wissen müssen, dass Coding mit ihnen zusammenarbeitet, wollte ich Ihnen zeigen, wie genau es im Divi -Builder funktioniert. Was Sie tun müssen, um Gruppenvoreinstellungen auf Optionseinstellungen wie Hintergrund, Rand, Box-Shadow usw. zu erstellen, zu speichern und anzuwenden.

Ändern des Schaltflächenhintergrunds

Angenommen, ich möchte den Schaltflächenhintergrund in Purpur ändern, um die Farbe der Seite zu entsprechen. Ich werde also die Schaltfläche der ersten Spalte anpassen und die Einstellungen als Primärlicht -Taste voreinstellen. (Die schwarze Farbe in den UI -Einstellungen zeigt, dass Sie eine voreingestellte Einstellung bearbeiten. Wenn Sie den dunklen Modus ausgewählt haben, ist dies das Gegenteil.)

Um dieselben Einstellungen auf die beiden anderen Tasten anzuwenden, wechsle ich einfach die Taste voreingestellt in Primärlicht.

Ändern des Schattens einer Spalte

Fügen wir allen Spalten einen Boxschatten hinzu. Ich werde der ersten Spalte einen Box -Schatten hinzufügen und ihn als Schattenbox -Schattenvoreinstellung speichern.

Um denselben Schatten auf die beiden anderen Spalten anzuwenden, wechsle ich einfach die Schattenschatten -Voreinstellung in den Schatten .

Textvoreinstellungen ändern

Sie können auch Stile für Textelemente wie H1 und H2S ändern. So funktioniert die Aktualisierung der Spalten H3 Preset:

Nach dem Speichern wird die Preisseite aussehen:

Obwohl ich kleinere Änderungen vorgenommen habe, um Ihnen zu zeigen, wie es funktioniert, können Sie sich die Möglichkeiten vorstellen. Mit der Option -Gruppengruppe von Divi ist die Bearbeitung benutzerdefinierter Gruppenstile so einfach wie ein Klick auf eine Schaltfläche. Aber das ist nur die Spitze des Eisbergs. Sie können auch:

• Stellen Sie die Standardvoreinstellungen für Optionsgruppen ein, sodass Basiselemente wie Überschriften oder Schaltflächen Ihr Styling automatisch auf der Website erben. Sobald Sie verstanden haben, wie Standardvoreinstellungen funktionieren, werden Sie nie wieder alte Methoden anwenden.
• Layer -Option Gruppengruppe Voreinstellungen auf Elementvoreinstellungen, um zusätzliche Betonung hinzuzufügen - wie bei der Anwendung eines gemeinsamen Hintergrunds und beim Stapeln eines Schatten- oder Randstils, um bestimmte Elemente hervorzuheben.

Wir haben einen ganzen Leitfaden zu allem geschrieben, was Sie über die Optionsgruppengruppe von Divi wissen sollten. Lesen Sie den vollständigen Artikel, um Designideen und Ratschläge zur Vereinfachung des klassenbasierten Webdesigns mit Divi zu erhalten.

Erfahren Sie mehr über Optionengruppenvoreinstellungen

Divi ist ein Spielveränderer für klassenbasiertes Designsystem

Divis Option Group Presets bringen alle die Kraft von CSS -Klassen an alle. Egal, ob Sie Solo entwerfen oder mit einem Team zusammenarbeiten, Voreinstellungen beschleunigen Ihren Workflow, skalieren Sie wunderbar, wenn Ihre Website wächst, und machen Sie ein konsequentes Styling mühelos. Sie sind schneller, effizienter und weitaus intuitiver als herkömmliche CSS -Workflows.

Beginnen Sie noch heute mit Divi 5

Divi 5 befindet sich im vollständigen Aktualisierungsmodus. Wir starten jede Woche neue Funktionen, genau wie die Voreinstellungen für Optionengruppen. Es ist eine gute Idee, über fortgeschrittene Einheiten, CSS -Designvariablen und vieles mehr zu wissen, die die Art und Weise ändern, wie Sie sich mit der Gestaltung einer Website nähern.

Erfahren Sie mehr über Divi 5

Divi 5 ist ein leistungsstarkes Design -Framework mit leistungsstarken Tools wie Divi Dash, Divi Quick Sites und Divi AI -, um Ihnen dabei zu helfen, benutzerdefinierte, professionelle Websites zu erstellen, ohne eine einzige Codezeile zu berühren. Es gibt nichts ein, das Sie einschränkt, bereit, eine Testfahrt in die Zukunft des Website -Designs zu machen?

Laden Sie Divi 5 herunter