Sie können ein Hintergrundbild in WordPress abdunkeln, ohne eine einzige Zeile Code schreiben zu müssen. Es dauert nur ein paar Minuten und ist viel einfacher, als die meisten Leute denken.
WordPress verfügt über eine einfache Einstellung, mit der Sie jeder Hintergrundgrafik eine transparente Farbüberlagerung hinzufügen können. Dies hilft dabei, dass Ihr Text lesbar bleibt, während Ihr Design trotzdem zur Geltung kommt.
In diesem Leitfaden führe ich Sie genau durch, wo Sie die Option finden und wie Sie sie anpassen. Es ist eine der schnellsten Möglichkeiten, das Design Ihrer Website zu verbessern, ohne etwas anderes zu ändern.
Schnelle Schritte zum Abdunkeln eines WordPress-Hintergrundbilds:
- Schritt 1: Installieren und Aktivieren des SeedProd-Plugins
- Schritt 2: Wählen Sie ein Website-Kit oder eine Landingpage-Vorlage
- Schritt 3: Fügen Sie Ihr Hintergrundbild zu WordPress hinzu
- Step 4: Add a Transparent Overlay to Dim Your Background Image
- Schritt 5: Veröffentlichen Sie Ihre Änderungen
- FAQs zum Abdunkeln von Hintergrundbildern in WordPress
Was ist ein WordPress-Hintergrundbild?
Ein WordPress-Hintergrundbild ist jedes Bild, das hinter dem Hauptinhalt Ihrer Website angezeigt wird. Sie können zum Beispiel ein Hintergrundbild hinter allem haben, wie diesem:
Oder Sie können ein Bild hinter bestimmten Inhaltselementen wie Seitenleisten, Fußzeilen, Kopfzeilen und mehr anzeigen.
Diese Bilder verleihen Ihrer Website Interesse und können dazu beitragen, dass Besucher mit Ihren Inhalten interagieren. Sie sind auch für das Branding Ihres Unternehmens unerlässlich und helfen den Benutzern, Ihre Website von Ihren Mitbewerbern zu unterscheiden.
Warum sollten Sie Hintergrundbilder in WordPress abdunkeln?
Manchmal können Hintergrundbilder es für Besucher schwierig machen, Ihre Inhalte zu lesen. Sehen Sie sich dieses Beispiel an:
Es ist ziemlich schwer zu erkennen, was der Text besagt, da das Hintergrundbild so lebendig ist.
Wenn Sie jedoch das Hintergrundbild abdunkeln, können Sie den Inhalt stärker hervorheben, sodass er für Besucher leichter zu lesen ist, sie mehr über Ihre Produkte und Dienstleistungen erfahren und zu potenziellen Kunden werden.
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.
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, Hintergrundbilder in WordPress abzudunkeln, da keine Programmierung erforderlich ist. Es verfügt über einen Drag-and-Drop-Seitenersteller, 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 praktischen Dropdown-Menü auswählen.
Neben der Anpassung von Bildern auf Ihrer WordPress-Website ermöglicht Ihnen SeedProd auch Folgendes:
- Erstellen Sie ein WordPress-Theme von Grund auf
- Erstellen Sie ganze WooCommerce-Shops
- Erstellen Sie Landing Pages, die konvertieren
- Verwalten Sie Abonnenten und erweitern Sie Ihre E-Mail-Liste
- Starten Sie Ihre Website mit einer "Coming Soon"-Seite vor dem Launch
- Versetzen Sie Ihre Website in den Wartungsmodus
- Und vieles mehr
Fazit: SeedProd macht es einfach, jeden Teil Ihrer WordPress-Website ohne Code anzupassen.
Schritte zum Abdunkeln eines Hintergrundbilds in WordPress ohne Code
Befolgen Sie diese einfachen Schritte, um ein Hintergrundbild in WordPress ohne CSS-Code oder HTML mit SeedProd abzudunkeln. Wir versprechen, es ist viel einfacher, als Code zu lernen, und liefert beeindruckende Ergebnisse.
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
Es gibt 2 Möglichkeiten, SeedProd auf Ihrer WordPress-Website zu verwenden. Sie können entweder:
- Ein benutzerdefiniertes WordPress-Theme von Grund auf erstellen und Ihr aktuelles Theme ersetzen
- Eine eigenständige Landing Page erstellen und Ihr bestehendes WordPress-Theme beibehalten
Für diese Anleitung erstellen wir ein benutzerdefiniertes Theme. Wenn Sie jedoch stattdessen eine Landing Page erstellen möchten, können Sie unserer Schritt-für-Schritt-Anleitung folgen: Erstellen einer Landing Page in WordPress.
Nachdem Sie Ihre Seite eingerichtet haben, können Sie zu diesem Tutorial zurückkehren, um zu erfahren, wie Sie Ihre Hintergrundbilder abdunkeln.
Da wir für dieses Tutorial ein WordPress-Theme erstellen, müssen Sie im WordPress-Adminbereich zu SeedProd » Theme Builder navigieren und auf die Schaltfläche Themes klicken.
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-Seitenersteller 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 Seitenersteller 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 Seitenersteller 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 von uns verwendete Hintergrundbild nicht genug mit der Überschrift, was es schwer lesbar macht.
Das zu beheben ist super einfach und dauert nur wenige Klicks. Suchen Sie einfach die Überschrift Hintergrund abdunkeln in den Abschnittseinstellungen und ziehen Sie den Schieberegler nach rechts, bis Ihre Überschrift hervorsticht.
Sie können auch denselben Bereich verwenden, um Ihrem Hintergrundbild eine farbige Überlagerung hinzuzufügen. Dies ist eine ausgezeichnete Möglichkeit, die Farben Ihrer Marke in Ihr Webdesign zu integrieren und Ihre Website erkennbarer zu machen.
Um dies zu tun, suchen Sie die Überschrift Überlagerungsfarbe und klicken Sie auf den Farbwähler, um eine benutzerdefinierte Farbe auszuwählen. Die Auswahl einer Farbe ist ganz einfach. Sie können zeigen und klicken, um eine passende Farbe zu finden, oder die Pfeile verwenden, um Folgendes einzugeben:
- Hex-Wert
- RGBA-Wert
- HSLA-Wert
Dies ist eine ausgezeichnete Lösung, wenn Sie bereits wissen, welche Farbe Sie verwenden möchten.
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 den perfekten Look zu erzielen.
Kann ich Hintergrundbilder in anderen Teilen von WordPress abdunkeln?
Jetzt, da Sie wissen, wie Sie Hintergrundbilder mit SeedProd abdunkeln können, können Sie dieses Wissen in anderen Teilen Ihres Webdesigns anwenden.
Sie können beispielsweise Zeilen und Spalten ein Hintergrundbild hinzufügen und eine Filter-Eigenschaft hinzufügen, um es abzudunkeln, damit Ihr Inhalt hervorsticht.
Sie können sogar Ihre Blog-Seitenleiste anpassen mit einem Hintergrundbild, damit sie im Vergleich zu Ihren Blog-Beiträgen besser sichtbar ist. Laden Sie einfach Ihr Bild hoch, passen Sie Ihre Einstellungen schnell 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 sicherstellen, dass Ihr benutzerdefiniertes SeedProd-Theme aktiviert ist. Gehen Sie dazu zu SeedProd » Theme Builder und stellen Sie die Option SeedProd Theme aktivieren auf die Position "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
Wenn Ihr Hintergrundbild großartig aussieht, aber Ihren Text schwer lesbar macht, ist das Abdunkeln eine einfache Lösung, die Ihre Seite verwandeln kann.
Ich habe Ihnen gezeigt, wie Sie dies mit SeedProd mit dem Schieberegler "Hintergrund abdunkeln" und der optionalen Überlagerungsfarbe tun können. Sie können dies für Hero-Bilder über die gesamte Breite, Abschnittshintergründe oder sogar Seitenleisten verwenden – überall dort, wo Sie einen besseren Kontrast wünschen, ohne Ihr Design zu verlieren.
Das Beste daran? Sie müssen sich nicht mit CSS oder Theme-Dateien herumschlagen. Ziehen Sie einfach, passen Sie an und veröffentlichen Sie.
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
Sind Sie bereit, Ihre WordPress-Website ohne Code anzupassen?
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
