So fügen Sie Blöcken in Gutenberg einen benutzerdefinierten CSS-Stil hinzu

Last Updated on 11/10/2021 by MTE Leben

Haben Sie sich jemals gefragt, wie Sie in WordPress einzigartige und schöne Beiträge erstellen können? Mit dem neuen Editor können Sie eine Vielzahl von Blöcken hinzufügen und viele verschiedene Funktionen darauf anwenden. Viele Benutzer verwenden die meisten von ihnen nicht und kennen sie sogar nicht. Aber Gutenberg bietet Ihnen mehr, als Sie sich vorstellen können. Achten Sie übrigens auf ein brandneues Zeguten-Plugin, mit dem Sie alles mit Hilfe von Funktionsblöcken bearbeiten können.

Wenn Sie einen attraktiven CSS-Stil erstellt haben und nicht wissen, wie Sie ihn auf Ihre WordPress-Seite, Ihren Post oder Block anwenden sollen, sind Sie zu diesem Tutorial willkommen. Tatsächlich ist das Hinzufügen eines benutzerdefinierten CSS-Stils im Gutenberg-Editor eine einfachere Aufgabe, als Sie denken. Und im Gegensatz zu Elementor, wo Sie zu diesem Zweck die Pro-Version verwenden sollten, erlaubt Gutenberg dies kostenlos.

Während der Gutenberg-Editor Ihnen nur klassische Schriftarten und Farbpaletten bietet, kann CSS Ihren Blöcken überlegene Stile hinzufügen. Sie haben sich beispielsweise entschieden, eine Überschrift mit Ihrer eigenen Schriftart zu erstellen. Verwenden Sie dann einen benutzerdefinierten CSS-Stil.

• Zuerst müssen Sie auf die Seite oder den Beitrag gehen, den Sie anpassen möchten. In unserem Fall gehen wir zu “Seiten” und klicken auf “Bearbeiten” auf der erforderlichen Seite.

• Wenn sich das Bearbeitungsfenster öffnet, entscheiden Sie, welchen Block Sie anpassen möchten. Wir wählen die Überschrift. Öffnen Sie die Einstellungs-Seitenleiste mit „Strg+Umschalt+“ und klicken Sie auf den gewünschten Block. Gehen Sie dann zum Abschnitt „Erweitert“ und suchen Sie das Feld „Zusätzliche CSS-Klasse(n)“. Geben Sie dort den Namen Ihres benutzerdefinierten CSS-Stils ein.
• Nachdem Sie den Namen eingegeben haben, klicken Sie auf „Vorschau“. Das Vorschaufenster öffnet sich und im oberen Bereich sehen Sie die Schaltfläche „Anpassen“.
• Dort sehen Sie die Customizing-Funktionen. Wir benötigen den Abschnitt „Zusätzliches CSS“, um unsere Arbeit fortzusetzen.
• Es gibt ein Feld, um Ihren CSS-Code einzugeben. Kopieren Sie es aus Ihren Notizen oder Dokumenten und fügen Sie es ein. Beachten Sie, dass die erste Zeile der Name Ihres Codes ist und derselbe sein sollte, den wir beim Arbeiten mit Blockeinstellungen im Guttenberg-Editor geschrieben haben. Wenn sie unterschiedlich sind, funktioniert der Code nicht. Nachdem Sie den Code eingegeben haben, drücken Sie die Eingabetaste und klicken Sie auf „Veröffentlichen“, um dem Publikum Ihre wunderschöne Seite zu zeigen.
• Hier sehen Sie das Ergebnis des Hinzufügens eines benutzerdefinierten CSS-Stils.

Wir haben gelernt, wie Sie Ihre Beiträge und Seiten mit benutzerdefinierten CSS-Stilen einzigartig machen. Um zu erfahren, wie Sie Ihren Bildern mit CSS Formen hinzufügen, lesen Sie unser vorheriges Tutorial.