Wenn Sie eine optisch ansprechende WordPress-Website erstellen möchten, können Sie durch das Ändern der Hintergrundfarben wichtige Inhalte hervorheben, eine klare visuelle Hierarchie schaffen und Ihre Website ansprechender gestalten. Bei so vielen Blöcken, die im WordPress-Block-Editor zur Verfügung stehen, kann es jedoch verwirrend sein, herauszufinden, wie man die Hintergrundfarbe für jeden einzelnen Block ändert.
Während einige Blöcke über integrierte Einstellungen für die Hintergrundfarbe verfügen, erfordern andere einen etwas anderen Ansatz. Die gute Nachricht ist, dass die meisten WordPress-Kernblöcke die native Anpassung der Hintergrundfarbe unterstützen. Für diejenigen, die dies nicht tun, gibt es einfache Umgehungen wie den Gruppenblock und den Cover-Block.
In diesem Leitfaden führen wir Sie durch drei einfache Methoden, mit denen Sie jeden Block auf Ihrer Website sicher gestalten können. Wir befassen uns mit Blöcken, die direkte Farbänderungen unterstützen, zeigen Ihnen, wie Sie den Gruppenblock verwenden, und erkunden den Cover-Block für fortgeschrittene Designs wie Hero-Abschnitte und Banner. Fangen wir an.
Methode 1: Direkte Hintergrundfarbe (Native Support)
Viele WordPress-Kernblöcke bieten native Unterstützung für die Änderung der Hintergrundfarbe. Das bedeutet, dass Sie Farben direkt anwenden können, ohne zusätzliche Blöcke oder benutzerdefinierten Code hinzufügen zu müssen.
Schritt 1: Wählen Sie den Block
Klicken Sie zunächst im Editor auf den Block, den Sie anpassen möchten. Dadurch wird der Block aktiviert, und seine Einstellungen erscheinen im Feld Block-Einstellungen auf der rechten Seite.
Schritt 2: Öffnen Sie die Seitenleiste der Blockeinstellungen
Wenn das Einstellungsfeld noch nicht sichtbar ist, klicken Sie auf die Schaltfläche Einstellungen die sich in der obersten Ecke auf der rechten Seite des Editors befindet. Unter der Schaltfläche Block-Einstellungen Bedienfeld, suchen Sie den Stile Abschnitt.
Schritt 3: Anpassen der Hintergrundfarbe
Im Einstellungsbereich der Stile finden Sie die Option Farbe Abschnitt. Unter Farbeinstellungenfinden Hintergrund. Wählen Sie jetzt einfach eine Farbe aus der Palette, arbeiten Sie mit dem Farbwähler oder geben Sie einen benutzerdefinierten HEX/RGB/HSL-Code ein.
Gilt für
-
Text- und Inhaltsblöcke: Absatz, Überschrift, Liste, Zitat, Pullquote, Code, vorformatiert, Verse
-
Layout-Blöcke: Gruppe, Spalten, Cover, Medien & Text
-
Interaktive/Widget-Blöcke: Schaltflächen, Kalender, Neueste Beiträge, Kategorien, Tag Cloud, Soziale Symbole, Navigation, Datei, Audio, Video, RSS, Suche, Login/Out, Seitenliste
-
Site/Post-Blöcke: Website-Titel, Website-Tagline, Post-Titel, Post-Inhalt, Post-Auszug, Post-Datum, Post-Autor, Post-Kategorien, Post-Tags, Kommentare, Nächster/Vorheriger Post, Mehr lesen
-
Utility-Blöcke: Spacer (begrenzt), Separator (begrenzt), Tisch (nur ganzer Tisch).
Anmerkungen
-
Abdeckung Block: Anstelle eines Hintergrunds finden Sie die Option Überlagerung. Sie können die Farbe der Überlagerung zusammen mit den Deckkraft-Einstellungen für überlagerte Effekte anpassen.
-
Buttons Block: Die Hintergrundfarbe gilt für die Schaltfläche selbst, während die Option Textfarbe den Text der Schaltfläche ändert.
-
Soziale Ikonen: Die Hintergrundfarbe wirkt sich nur auf den Symbolcontainer aus.
-
Tabelle Block:
-
Zum Ändern der Hintergrundfarbe der gesamten TabelleWählen Sie den Tabellenblock aus, und wenden Sie die Farbe im Einstellungsfenster an.
-
Sie können verschiedene Farben für die Zeilen verwenden, aber es ist auf die Standardoption beschränkt. Gehen Sie zum Stile und wählen Sie den Abschnitt Streifen Option, aber die Streifenfarbe ist vordefiniert und kann nicht von Haus aus angepasst werden.
-
Methode 2: Umhüllung in einem Gruppenblock
Für Blöcke, die keine nativen Optionen für die Hintergrundfarbe haben, wie Medien-, Legacy- oder Utili