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 Utility-Blöcke, können Sie eine Gruppenblock um als flexibler Container zu fungieren. Indem Sie den Inhalt innerhalb des Gruppenblocks einschließen, können Sie Hintergrundfarben auf den gesamten Abschnitt anwenden.
Schritt 1: Identifizierung und Ausrichtung auf den spezifischen Block
Klicken Sie auf den Block, der die Hintergrundfarbe nicht direkt unterstützt. Daraufhin wird die Blocksymbolleiste über dem betreffenden Block angezeigt.
Schritt 2: Gruppieren Sie den Block
Klicken Sie nun auf die Schaltfläche Menü Optionen (drei Punkte) ganz rechts in der Symbolleiste des Blocks, und wählen Sie Gruppe aus dem Dropdown-Menü. Dadurch wird der ausgewählte Block in einen Gruppenblock eingeschlossen.
Schritt 3: Wählen Sie den Gruppenblock
Klicken Sie auf den äußeren Rand des Gruppenblocks, und wählen Sie in der Symbolleiste den übergeordneten Gruppenblock ganz links aus. Dadurch wird der gesamte Abschnitt hervorgehoben.
Schritt 4: Anwenden der Hintergrundfarbe
Navigieren Sie sofort zur Seite Panel "Blockeinstellungenblättern Sie zur Seite Farbe und wählen Sie eine Hintergrundfarbe, oder verwenden Sie die Farbauswahl für benutzerdefinierte Farbtöne.
Schritt 5: Abstände anpassen (optional)
Wenn der Inhalt innerhalb Ihres Gruppenblocks die gesamte Breite des Blocks einnimmt, müssen Sie möglicherweise die Breite des Inhalts anpassen, damit die Hintergrundfarbe sichtbar wird. Wählen Sie die Gruppe Block (wie in Schritt 3), wechseln Sie zum Block-Einstellungen, scrollen Sie nach unten zu Inhalt Breiteund legen Sie eine benutzerdefinierte Breite fest, um Platz zwischen dem Inhalt und dem farbigen Hintergrund zu schaffen.
Gilt für
- Medienblöcke ohne direkte Unterstützung: Bild (falls nicht in ein Cover konvertiert), Video, Audio
- Legacy/Utility-Blöcke: Shortcode, Classic, More, Custom HTML, Legacy Widget, Template Part, Page Break, Archives, Embed (YouTube, Twitter, etc.), Avatar, Comments Query Loop, Spacer (für erweiterte Kontrolle), Separator (für zusätzliche Flexibilität)
Anmerkungen
- Der Gruppenblock ist ideal für die Erstellung von Abschnitten mit einheitlichen Hintergrundfarben.
- Sie können mehrere Blöcke innerhalb eines Gruppenblocks verschachteln, um sie als einen zusammenhängenden Abschnitt zu gestalten.
- Passen Sie die Layout-Einstellungen (wie Ausrichtung und Auffüllung) an, um die Abstände und den Fluss des Inhalts besser kontrollieren zu können.
Methode 3: Verwendung eines Abdeckblocks
Wenn Sie erweiterte Gestaltungsoptionen wie Überlagerungseffekte oder überlagerte Hintergründe benötigen, können Sie die Abdeckblock ist die perfekte Lösung. Sie ermöglicht das Hinzufügen von Hintergrundfarben oder -bildern mit anpassbarer Deckkraft und ist damit perfekt für Hero-Abschnitte, Banner oder Bereiche mit hervorgehobenen Inhalten.
Schritt 1: Hinzufügen eines Abdeckblocks
Beginnen Sie einfach mit einem Klick auf die + Schaltfläche im Editor, suchen Sie nach Abdeckungund fügen Sie sie in Ihren Inhalt ein.
Schritt 2: Wählen Sie eine Hintergrundfarbe
Bei der Ersteinrichtung können Sie eine Hintergrundfarbe auswählen oder ein Bild hinzufügen. Unabhängig davon, ob Sie ein Bild oder eine Farbe verwenden, können Sie die Überlagerungsfarbe ändern und die Deckkraft der Überlagerung anpassen. Rufen Sie dazu die Seite Farbe Abschnitt unter der Stile auf der Registerkarte Block-Einstellungen.
Schritt 3: Inhalt in den Titelblock einfügen
Um den Inhalt innerhalb des Titelblocks einzufügen, können Sie einfach die Blocksymbolleiste um die Blöcke, die Sie gestalten möchten (wie Absätze, Überschriften oder Bilder), in den Cover-Block zu ziehen oder neue Blöcke direkt in den Block einzufügen, indem Sie die Blockeinsetzer (+ Taste).
Gilt für
- Für fortgeschrittene Design-Anforderungen: Alle Blöcke, die überlagerte Hintergrundeffekte erfordern, wie Absätze, Überschriften, Bilder, Schaltflächen oder sogar mehrere kombinierte Blöcke.
Anmerkungen
- Der Abdeckblock ist ideal für Heldenteile, Call-to-Action-Bereicheund Banner.
- Sie können Text über Hintergrundfarben oder -bilder legen, um beeindruckende visuelle Effekte zu erzielen.
- Passen Sie die Deckkraft für subtile Überlagerungen oder kräftige Farbblöcke an.
Zusammenfassende Tabelle: Blöcke und Methoden
Block Kategorie |
Methode |
|---|---|
Text-/Inhaltsblöcke (z. B. Absatz, Überschrift, Liste) |
Methode 1 |
Medienblöcke (z. B. Bild, Video, Audio) |
Methode 2 oder 3 |
Layout-Blöcke (z. B. Spalten, Gruppe, Cover) |
Methode 1, 2, oder 3 |
Interaktive Blöcke (z. B. Schaltflächen, soziale Icons) |
Methode 1 |
Widget-Blöcke (z. B. Suche, Kalender) |
Methode 1 |
Legacy/Utility-Blöcke (z. B. Shortcode, Classic) |
Methode 2 |
Schlussfolgerung
Die einfachste Möglichkeit, das Erscheinungsbild Ihrer Website zu beeinflussen, ist wahrscheinlich die Änderung der Hintergrundfarbe der von Ihnen verwendeten WordPress-Blöcke. Die Wahl der richtigen Hintergrundfarbe für die Bereitstellung von Inhalten wird die Besucher Ihrer Website definitiv anziehen. Dies ist ein einfacher, aber wirkungsvoller Hack, um die Benutzerfreundlichkeit zu verbessern und Ihre Website hervorzuheben. Ganz gleich, ob Sie sich für die nativen Hintergrundfarbeinstellungen, die Gruppenblock-Methode oder die Cover-Block-Methode entscheiden, letztendlich geht es nicht nur darum, Farbe hinzuzufügen, sondern eine Umgebung zu schaffen, in der Ihre Inhalte noch mehr zur Geltung kommen. Experimentieren Sie also ruhig mit Farben und sehen Sie, wie kleine Änderungen Ihre Website in eine effektivere Plattform verwandeln können.
