Erstellen Sie einen Verlaufshintergrund im Gutenberg WordPress-Editor

Last Updated on 11/10/2021 by MTE Leben

In diesem schnellen und einfachen Tutorial erfahren Sie, was ein Hintergrund mit Farbverlauf ist und wie Sie ihn in Gutenberg anwenden und die Blöcke auf Ihren Seiten attraktiver aussehen lassen.

Was ist ein Hintergrund mit Farbverlauf

Eine der Definitionen des Wortes „Farbverlauf“ ist eine Reihe von positionsabhängigen Farben, die normalerweise verwendet werden, um einen Bereich auszufüllen. Gradient ist ein Werkzeug, mit dem Sie Ihrem Design Tiefe und Dimension verleihen können. Es gibt einige Arten von Gradienten:

linearer Gradient;
radialer Gradient;
• Winkelgradient;

reflektierter Gradient;

Diamant-Gefälle.

Es gibt mehrere Gründe für die Verwendung von Farbverläufen in Schaltflächen, Abschnitten oder dem gesamten Seitenhintergrund. Mit diesem Tool können Sie der Oberfläche Ihrer Website ein völlig neues Leben einhauchen. Lass uns herausfinden, wie man es auf die verschiedenen Blöcke anwendet!

Wie man den Farbverlauf in Gutenberg verwendet

Gehen Sie im ersten Schritt zu „Seiten“ > „Alle Seiten“ und wählen Sie die Seite aus, mit der Sie arbeiten möchten. In diesem Teil unseres Tutorials zeigen wir Ihnen, wie Sie einen Verlaufshintergrund auf einige der zuvor erstellten Blöcke anwenden.

Um einen Farbverlauf anzuwenden, müssen Sie ein solches zusätzliches Werkzeug verwenden , als Gradientengenerator.
Passen Sie die Farbe und Deckkraft des Farbverlaufs an das Farbschema Ihres Wählen Sie auf der Seite auch den Typ Ihres Farbverlaufs aus. Kopieren Sie dann den generierten CSS-Code.

Gehen Sie zum Gutenberg-Editor. Klicken Sie auf den ausgewählten Block und öffnen Sie die Registerkarte „Erweitert“.

• Notieren Sie den Namen der CSS-Klasse für diesen Block. Vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.
• Wiederholen Sie diese Aktionen für alle Blöcke, in denen Sie einen Hintergrund mit Farbverlauf festlegen möchten .
Achte darauf, dass beim Arbeiten mit Buttons in Gutenberg , Sie müssen keine erweiterten CSS-Klassen festlegen.
• Alles, was Sie tun müssen, ist einfach auf die Schaltfläche zu klicken und die Registerkarte “Verlauf” zu öffnen, die sich befindet in der rechten Seitenleiste.

Stellen Sie den gewählten Verlauf unter den 12 Varianten ein und klicken Sie auf die Schaltfläche „Aktualisieren“, um ihn zu speichern.

• Wenn Sie jedoch einen benutzerdefinierten Farbverlauf auf Ihre Schaltfläche anwenden möchten, können Sie auch die CSS-Klasse festlegen und die folgenden Optionen durchlaufen.

Anwenden des benutzerdefinierten Farbverlaufs Nachdem der Vorbereitungsjob abgeschlossen ist, klicken Sie auf die Schaltfläche „Vorschau“, die sich über der rechten Seitenleiste befindet. Sie werden auf die Seite Ihrer Website weitergeleitet.

Klicken Sie auf die Schaltfläche „Anpassen“ im Administrationsbereich, der sich oben auf Ihrer Seite befindet.

Klicken Sie im nächsten Schritt auf den Reiter „Zusätzliches CSS“, um öffne das spezielle Feld, in dem du den benutzerdefinierten CSS-Farbverlauf anwenden kannst.
• In dieser Registerkarte schreibe den Namen der CSS-Klassen auf, die du angegeben hast zu Ihren Blöcken.
  Gehen Sie zurück zum CSS-Code, den Sie zuvor generiert haben. Fügen Sie den Code in die Klammern ein.
  • Vergessen Sie nicht, Ihre Änderungen zu speichern – klicken Sie auf die Schaltfläche „Veröffentlichen“.

  Wir hoffen, dass Ihnen unser einfaches und schnelles Tutorial zum Anwenden von Farbverlaufshintergrund in Gutenberg gefällt! Abonnieren Sie unseren Newsletter für weitere nützliche Tutorials und Anleitungen.