Hintergrundbild in WordPress abdunkeln (kein CSS erforderlich) 

Sie haben ein Hintergrundbild hochgeladen, das Ihnen gefällt, aber jetzt ist Ihre Überschrift kaum noch dagegen zu erkennen. Der Text ist da, aber die Besucher können ihn nur mit zusammengekniffenen Augen lesen. Das ist das Problem, das eine Hintergrundbild-Überlagerung löst, und Sie müssen keine einzige Zeile CSS anfassen, um es zu beheben.

WordPress hat eine integrierte Möglichkeit, Hintergrundbilder abzudunkeln, und wenn Sie mehr Kontrolle über Ihr Design wünschen, fügt SeedProd einen speziellen Überlagerungsregler hinzu, der über Abschnitte, Zeilen und Spalten hinweg funktioniert. In dieser Anleitung zeige ich Ihnen beide Optionen, damit Sie wählen können, was zu Ihrer Einrichtung passt.

Warum ein Hintergrundbild in WordPress abdunkeln?

Ein WordPress-Hintergrundbild ist jedes Bild, das hinter Ihrem Inhalt liegt, sei es ein ganzseitiger Hintergrund oder ein Bild hinter einem bestimmten Abschnitt wie einem Header oder einem Hero-Block.

Aber das Problem ist der Kontrast. Ein lebendiges oder unruhiges Hintergrundbild macht Ihren Text fast unlesbar, und schlechte Lesbarkeit von Text über Hintergrundbildern ist eine der schnellsten Möglichkeiten, Besucher zu verlieren.

Das Hinzufügen einer transparenten Farbüberlagerung dimmt das Hintergrundbild, ohne es zu verdecken, sodass Ihr Text hervorsticht und die Besucher tatsächlich mit Ihren Inhalten interagieren können.

Der einfachste Weg, ein Hintergrundbild in WordPress abzudunkeln?

Um ein Hintergrundbild in WordPress abzudunkeln, ist die einfachste Option das Hinzufügen einer transparenten Farbüberlagerung. Dies schafft einen Kontrast zwischen dem Bild und Ihrem Inhalt, sodass alles leichter zu lesen ist.

Eine kurze Anmerkung zur Terminologie: Eine Überlagerung ist eine halbtransparente Schicht, die über Ihrem Hintergrundbild platziert wird. Sie unterscheidet sich von einem CSS-Filter (der einen visuellen Effekt auf das Bild selbst anwendet) und davon, einfach die Bild-Deckkraft zu verringern (was den gesamten Abschnitt betrifft).

Eine Überlagerung gibt Ihnen die meiste Kontrolle, und dies ist der Ansatz, den sowohl der WordPress-Block-Editor als auch SeedProd verwenden.

Wenn Sie SeedProd verwenden, können Sie dies in wenigen schnellen Schritten tun:

• Klicken Sie auf den Abschnitt mit Ihrem Hintergrundbild
• Öffnen Sie die Einstellungsleiste
• Verwenden Sie den Schieberegler Hintergrund abdunkeln, um die Helligkeit anzupassen
• (Optional) Fügen Sie eine Farbüberlagerung hinzu, die zu Ihrer Marke passt

Es ist kein CSS oder HTML erforderlich. Sie können die Ergebnisse in Echtzeit in der Vorschau anzeigen und Ihren Inhalt sofort hervorheben.

Warum SeedProd der beste Weg ist, Hintergrundbilder abzudunkeln

SeedProd ist der beste Weg, um Hintergrundbilder in WordPress abzudunkeln, da keine Programmierung erforderlich ist. Es verfügt über einen Drag-and-Drop-Website-Builder, mit dem Sie durch Zeigen und Klicken Ihre Website anpassen können.

Mit seiner einfachen Überlagerungsfunktion können Sie ein Hintergrundbild abdunkeln, indem Sie einen einfachen Schieberegler ziehen. Sie können auch eine Farbüberlagerung erstellen und die Position Ihres Hintergrundbilds ändern, indem Sie eine Option aus einem Dropdown-Menü auswählen.

Fazit: SeedProd macht es einfach, jeden Teil Ihrer WordPress-Website ohne Code anzupassen.

Hintergrundbild in WordPress mit dem Block-Editor abdunkeln

Wenn Sie ein Standard-WordPress-Theme verwenden und nur einen Abschnitt abdunkeln müssen, kann der native Block-Editor dies ohne Plugin erledigen. Der Schlüssel ist der Cover-Block, der speziell für das Hinzufügen von Inhalten über einem Hintergrundbild entwickelt wurde.

Um ihn zu verwenden, öffnen Sie eine Seite oder einen Beitrag im Block-Editor und fügen Sie einen Cover-Block hinzu.

Laden Sie Ihr Bild hoch, und Sie sehen einen Schieberegler für Hintergrundbild abdunkeln in den Blockeinstellungen auf der rechten Seite. Ziehen Sie ihn, um die Deckkraft der Hintergrundüberlagerung anzupassen, bis Ihr Text lesbar ist.

Dies funktioniert gut für Hero-Bereiche und einzelne Inhaltsblöcke, bei denen Sie ein Hintergrundbild mit Text darüber wünschen. Der Cover-Block ermöglicht es Ihnen auch, eine Überlagerungsfarbe auszuwählen, sodass Sie Ihre Marke anpassen und gleichzeitig den Text lesbar halten können.

Verwenden Sie den Block-Editor, wenn Sie ein Standard-WordPress-Theme verwenden und nur einen Abschnitt abdunkeln müssen. Verwenden Sie SeedProd, wenn Sie die vollständige Designkontrolle, Farbüberlagerungen und die Möglichkeit wünschen, Hintergrundbild-Deckkraftanpassungen auf Ihrer gesamten Website anzuwenden, ohne Theme-Dateien zu berühren.

Schritte zum Abdunkeln eines Hintergrundbilds in WordPress ohne Code

Befolgen Sie diese Schritte, um ein Hintergrundbild in WordPress ohne CSS-Code oder HTML mit SeedProd abzudunkeln.

Video-Anleitung

Schritt 1: Installieren und Aktivieren des SeedProd-Plugins

Zuerst müssen Sie die SeedProd-Website besuchen und eine Abonnementstufe auswählen. Wir empfehlen SeedProd Pro, da es erweiterte Theme-Erstellungsfunktionen enthält.

Sobald Sie einen Plan ausgewählt und Ihr Konto eröffnet haben, gehen Sie zum Abschnitt Downloads Ihres Benutzer-Dashboards und laden Sie das Plugin auf Ihren Computer herunter. Kopieren Sie währenddessen Ihren Plugin-Lizenzschlüssel für die spätere Verwendung.

Gehen Sie als Nächstes zu Ihrer WordPress-Website und installieren und aktivieren Sie das SeedProd-Plugin. Wenn Sie dies noch nie zuvor getan haben, folgen Sie dieser Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung von SeedProd gehen Sie zur Seite SeedProd » Einstellungen und fügen Sie Ihren Lizenzschlüssel in das entsprechende Feld ein.

Sobald Sie auf die Schaltfläche Schlüssel überprüfen klicken, haben Sie Zugriff auf alle Pro-Funktionen von SeedProd.

Schritt 2: Wählen Sie ein Website-Kit oder eine Landingpage-Vorlage

Für diese Anleitung erstellen wir ein benutzerdefiniertes WordPress-Theme. Navigieren Sie von Ihrem WordPress-Adminbereich zu SeedProd » Theme Builder und klicken Sie auf die Schaltfläche Themes.

Auf dem nächsten Bildschirm sehen Sie eine Galerie von Website-Kits, die Sie verwenden können, um ein sofortiges WordPress-Theme zu erstellen.

Jedes Kit enthält alle Seiten und Theme-Vorlagen, die Ihre Website benötigt. Sie können dann jede Seite mit dem Drag-and-Drop-Website-Builder von SeedProd anpassen.

Scrollen Sie durch die Kits, bis Sie eines finden, das zu Ihrem Unternehmen passt. Bewegen Sie dann die Maus über die Miniaturansicht des Kits und klicken Sie auf das Häkchensymbol.

Nachdem Sie das Website-Kit importiert haben, sehen Sie eine Liste der Teile, aus denen Ihr neues WordPress-Theme besteht. Um einen Teil anzupassen, klicken Sie auf den Link Design bearbeiten, und er wird im visuellen Editor geöffnet, wo Sie Ihr benutzerdefiniertes Hintergrundbild hinzufügen können.

Lass uns mit der Bearbeitung des Homepage-Designs beginnen.

Schritt 3: Fügen Sie Ihr Hintergrundbild zu WordPress hinzu

Wenn Sie eine Vorlage im visuellen Editor von SeedProd öffnen, sehen Sie ein Layout, das dem folgenden Beispiel ähnelt.

Links befinden sich Blöcke und Abschnitte zum Hinzufügen von Inhalten und rechts eine Live-Vorschau Ihres Designs mit Elementen, die in Ihrem Website-Kit verwendet werden.

Sie können Ihre Vorlage ganz einfach anpassen, indem Sie auf ein beliebiges Element in der Vorschau klicken. Dadurch wird ein Bereich mit Einstellungen für dieses Element und Anpassungsoptionen geöffnet.

Sie können auch einen Block von links auf Ihre Seite ziehen, um weitere Inhalte hinzuzufügen, wie z. B. Anmeldeformulare, Social-Media-Icons, Videos, Bilder, Schaltflächen und mehr.

Das Hinzufügen eines Hintergrundbilds zu einem beliebigen Abschnitt ist genauso einfach. Klicken Sie auf den Bereich, den Sie bearbeiten möchten, und löschen Sie das Standard-Hintergrundbild.

Sie können dann ein neues Bild von Ihrem Computer oder der WordPress-Mediathek hochladen.

Schritt 4: Fügen Sie eine transparente Überlagerung hinzu, um Ihr Hintergrundbild abzudunkeln

Wie Sie in unserem vorherigen Beispiel sehen können, kontrastiert das Hintergrundbild nicht genug mit der Überschrift, was es schwer lesbar macht.

Suchen Sie die Überschrift Hintergrund abdunkeln in den Abschnittseinstellungen und ziehen Sie den Schieberegler nach rechts, bis Ihre Überschrift hervorsticht.

Wie stark sollten Sie den Hintergrund abdunkeln?

Für die meisten Designs bietet eine Deckkraft von 40-60 % für die Hintergrundüberlagerung die beste Lesbarkeit des Textes.

Unter 40 % kann der Textkontrast immer noch ein Problem darstellen. Über 70 % wird Ihr Hintergrundbild fast unsichtbar, was den Zweck der Verwendung eines solchen zunichtemacht.

Wenn Sie mit einem Hero-Bild oder einem Vollbildbereich arbeiten, zielen Sie auf 50 % als Ausgangspunkt und passen Sie es dann an.

Sie können dasselbe Panel auch verwenden, um Ihrem Hintergrundbild eine Farbüberlagerung hinzuzufügen. Dies ist eine großartige Möglichkeit, Ihre Markenfarben in Ihr Design zu integrieren und gleichzeitig die Lesbarkeit zu gewährleisten.

Um dies zu tun, suchen Sie die Überschrift Überlagerungsfarbe und klicken Sie auf den Farbwähler, um eine benutzerdefinierte Farbe auszuwählen. Sie können klicken und ziehen, um eine passende Farbe zu finden, oder die Pfeile verwenden, um einen Hex-, RGBA- oder HSLA-Wert einzugeben.

Sie können auch:

• Passen Sie die Position des Hintergrundbilds an
• Ändern Sie die Hintergrundfarbe eines Abschnitts
• Verwenden Sie einen Farbverlauf anstelle eines Bildes

Wenn Sie beispielsweise auf den Dropdown-Pfeil klicken, können Sie Ihren Hintergrund auf folgende Weise positionieren:

• Vollbild-Abdeckung
• Vollbild-Abdeckung – Fixiert
• Vollbild-Inhalt
• Vollbild-Inhalt – Fixiert
• 100% Breite Oben
• 100% Breite Unten
• Hintergrund wiederholen
• Horizontal wiederholen Oben
• Horizontal wiederholen Unten
• Vertikal wiederholen Mitte
• Benutzerdefinierte Position

Die Option Benutzerdefinierte Position öffnet detailliertere Anpassungsoptionen.

Sie können beispielsweise die X- oder Y-Position ändern, um einen bestimmten Teil Ihres Bildes anzuzeigen. Sie können auch den Anhangstyp auf "fixed" oder "scroll" ändern, festlegen, wie das Bild wiederholt wird, und die Hintergrundgröße ändern.

Dadurch können Sie jeden Bereich Ihrer Hintergrundbilder anpassen, um das richtige Aussehen zu erzielen.

Kann ich Hintergrundbilder in anderen Teilen von WordPress abdunkeln?

Nachdem Sie nun wissen, wie Sie Hintergrundbilder mit SeedProd abdunkeln, können Sie denselben Ansatz auch in anderen Teilen Ihres Designs verwenden.

Sie können beispielsweise Zeilen und Spalten ein Hintergrundbild hinzufügen und die WordPress-Steuerelemente für die Hintergrundüberlagerung verwenden, um es abzudunkeln, damit Ihr Inhalt hervorsticht. Dies ist besonders nützlich für Hero-Bilder, bei denen die Lesbarkeit von Text über Hintergrundbildern entscheidend ist.

Sie können sogar Ihre Blog-Seitenleiste anpassen mit einem Hintergrundbild, damit sie sich besser von Ihren Blog-Posts abhebt. Laden Sie Ihr Bild hoch, passen Sie Ihre Einstellungen an und Sie sind bereit zur Veröffentlichung.

Schritt 5: Veröffentlichen Sie Ihre Änderungen

Damit Ihre Website-Besucher Ihre neuen Hintergrundbilder sehen können, müssen Sie Ihr benutzerdefiniertes SeedProd-Theme aktivieren. Gehen Sie zu SeedProd » Theme Builder und stellen Sie die Option SeedProd Theme aktivieren auf „Ja“.

Das ist alles! Jetzt können Sie Ihr Theme in der Vorschau anzeigen und Ihre Hintergrund-Overlays in Aktion sehen.

Hier ist ein Beispiel für unser neues Homepage-Hintergrundbild:

Sie können auch unsere Hintergrundbilder für den Abschnitt "Über uns" und die Seitenleiste unten sehen:

FAQs zum Abdunkeln von Hintergrundbildern in WordPress

Benötige ich ein Plugin, um ein Hintergrundbild in WordPress abzudunkeln?

Nicht immer. Der native Cover-Block des WordPress-Block-Editors enthält einen integrierten Abdunklungsregler, den Sie ohne Plugin verwenden können. Wenn Sie die vollständige Kontrolle über die Opazität von Hintergrundbildern in Abschnitten, Zeilen und Spalten auf Ihrer gesamten Website wünschen, erleichtert ein Tool wie SeedProd dies erheblich.

Kann ich ein Hintergrundbild im WordPress-Block-Editor ohne Plugin abdunkeln?

Ja. Fügen Sie Ihrer Seite oder Ihrem Beitrag einen Cover-Block hinzu und laden Sie Ihr Bild hoch. Sie sehen einen Schieberegler für die Abdunklung des Hintergrundbilds in den Blockeinstellungen auf der rechten Seite des Editors. Ziehen Sie ihn, um anzupassen, wie dunkel die Überlagerung erscheint.

Welche Überlagerungsfarbe eignet sich am besten zum Abdunkeln eines WordPress-Hintergrundbilds?

Dunkelgraue oder schwarze Überlagerungen mit einer Opazität von 40-60 % eignen sich für die meisten Designs am besten. Dieser Bereich bietet Ihnen genügend Kontrast für lesbaren Text, während das Bild darunter immer noch sichtbar ist.

Wenn Sie Ihr Branding anpassen möchten, können Sie stattdessen eine farbige Überlagerung verwenden. Behalten Sie die Opazität in demselben Bereich von 40-60 % bei und testen Sie auf verschiedenen Bildschirmgrößen, um sicherzustellen, dass der Text lesbar bleibt.

Kann ich nur einen Teil eines Hintergrundbilds in WordPress abdunkeln?

WordPress unterstützt keine selektive Abdunklung eines einzelnen Bildes. Sie können jedoch in SeedProd Überlagerungen auf bestimmte Abschnitte, Zeilen oder Spalten anwenden, wodurch der Effekt einer teilweisen Abdunklung erzielt wird, indem nur diese Bereiche angesprochen werden.

Wenn Ihr Hintergrundbild großartig aussieht, aber Ihren Text schwer lesbar macht, ist das Abdunkeln eine schnelle Lösung, die Ihre Seite verwandeln kann.

Ich habe Ihnen gezeigt, wie Sie ein Hintergrundbild mit SeedProd mithilfe des Schiebereglers „Hintergrund abdunkeln“ und der optionalen Überlagerungsfarbe abdunkeln können. Sie können dies für Hero-Bilder über die gesamte Breite, Abschnittshintergründe oder sogar Seitenleisten verwenden, überall dort, wo Sie besseren Kontrast wünschen, ohne Ihr Design zu verlieren.

Das Beste daran ist, dass Sie sich nicht mit CSS oder Theme-Dateien herumschlagen müssen. Einfach ziehen, anpassen und veröffentlichen.

Möchten Sie weitere Möglichkeiten, Ihre Website anzupassen, ohne Code anzufassen? Sehen Sie sich als Nächstes diese Tutorials an:

• Navigation auf Landingpages ist tot: Hier ist der Grund
• So erstellen Sie Textanimationen in WordPress (einfache Schritte)
• So erstellen Sie ausgefallene Abschnittstrenner für WordPress-Websites

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Konversation auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.